/* One continuous film, from the first idea to the Fabriquet signature. */
html { scroll-padding-top: 0; }
.journey { position: relative; background: #100f0e; color: #f1eee6; }
.journey-stage { position: relative; isolation: isolate; overflow: clip; }
.journey-anchor { position: absolute; top: 120svh; left: 0; width: 1px; height: 1px; pointer-events: none; }
.opening-scene { position: relative; z-index: 10; }
.journey-ready .opening-scene { position: absolute; inset: 0; will-change: opacity; }
.journey-ready .opening-scene .hero { height: 100%; min-height: 0; }
.journey-ready .opening-scene .hero-art { transform-origin: 72% 54%; }
.journey-canvas, .journey-atmosphere, .journey-product, .journey-world, .journey-fallback, .journey-light, .journey-vignette { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.journey-canvas { z-index: 2; mix-blend-mode: screen; }
.journey-atmosphere { z-index: 0; background: radial-gradient(ellipse at 70% 60%, #4a2d1538, transparent 65%), #100f0e; }
.journey-product, .journey-world { z-index: 1; opacity: 0; will-change: transform, opacity; }
.journey-product img, .journey-world img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.journey-product { mix-blend-mode: normal; background: radial-gradient(ellipse at 74% 46%,#1c2532 0%,#10151b 39%,#07090d 78%); }
.health-aura { position: absolute; inset: -12%; background: radial-gradient(ellipse at 70% 44%,#798de41c,transparent 33%),radial-gradient(ellipse at 74% 68%,#5de1ee0a,transparent 28%); will-change: transform, opacity; }
.health-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-device { position: absolute; left: 51%; top: 9%; width: 46%; height: 78%; transform-origin: 50% 54%; will-change: transform,opacity; }
.health-device-rig { mix-blend-mode: normal; }
.app-device-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; object-position: center !important; filter: brightness(.82) contrast(1.25) saturate(.82); }
.app-create { --screen-mask: url('assets/glass-create-app.png'); }
.app-focus { --screen-mask: url('assets/glass-focus-app.png'); }
.app-chapters { display: flex; list-style: none; gap: 22px; padding: 0; margin: 35px 0 0; max-width: 350px; }
.app-chapters li { position: relative; padding: 0 0 12px; font-size: 14px; color: #7e8b99; border-bottom: 1px solid #d4e0f523; transition: color .35s,border-color .35s; }
.app-chapters li.is-active { color: #e8edf4; border-color: #c8d5f4aa; }
.app-caption { display: grid; min-height: 3em; }
.app-caption > span { grid-area: 1 / 1; opacity: 0; }
.app-caption > span:first-child { opacity: 1; }
.app-still-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4%; margin-top: 35px; }
.app-still-gallery img { width: 100%; height: min(48svh,450px); object-fit: contain; filter: brightness(.82) contrast(1.25); }
.journey-ready .app-still-gallery { display: none; }
.journey-product .health-device { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: brightness(.74) contrast(1.5) saturate(.84) drop-shadow(0 0 24px #9bacd416); }
.health-device-light { position: absolute; inset: 0; overflow: hidden; mask: var(--screen-mask,url('assets/reverse-glass-health.png')) center / contain no-repeat; -webkit-mask: var(--screen-mask,url('assets/reverse-glass-health.png')) center / contain no-repeat; mix-blend-mode: screen; }
.health-light-sheet { position: absolute; left: -75%; top: -50%; width: 250%; height: 200%; background: linear-gradient(112deg,transparent 39%,#83d9ff0a 45%,#d5e8ff66 49.6%,#faf9ff44 50%,#83d9ff0a 53%,transparent 60%); will-change: transform, opacity; }
.health-device-shadow { position: absolute; left: 59%; bottom: 8%; width: 29%; height: 3%; background: radial-gradient(ellipse,#a4bad432,transparent 67%); filter: blur(12px); will-change: transform, opacity; }
.journey-world { background: #05060a; }
.finale-aura { position: absolute; inset: -15%; background: radial-gradient(ellipse at 50% 49%,#34456448,transparent 37%),radial-gradient(ellipse at 65% 67%,#9a806228,transparent 35%); will-change: transform; }
.finale-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.finale-horizon { position: absolute; top: 68%; left: 12%; width: 76%; height: 1px; background: linear-gradient(90deg,transparent,#9faedb33 30%,#f6e1cfa8 50%,#9faedb33 70%,transparent); box-shadow: 0 0 30px 2px #b2bde72a; transform-origin: center; will-change: opacity,transform; }
.journey-fallback { display: none; z-index: 1; background: url('assets/chapter-two.jpg') 65% center / cover; opacity: .7; }
.no-webgl .journey-fallback { display: block; }
.journey-light { z-index: 3; opacity: 0; background: #e5e3da; mix-blend-mode: screen; }
.journey-vignette { z-index: 4; background: linear-gradient(180deg,#14110f55,transparent 25%,transparent 70%,#08090b66); }
.journey-topline, .journey-bottom { position: absolute; z-index: 6; left: 5.15%; right: 5.15%; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.journey-topline { top: 40px; font-size: .875rem; }
.journey-topline > span:first-child { font-family: 'DM Sans Light', sans-serif; font-size: 21px; letter-spacing: -.6px; }
.journey-chapter { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.journey-beat { position: relative; z-index: 5; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 130px 5.15%; }
.journey-kicker { font-size: .75rem; line-height: 1.6; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 26px; opacity: .6; }
.journey-beat h2 { font-size: clamp(64px, 6.6vw, 164px); line-height: .97; letter-spacing: -.06em; }
.journey-caption { font-size: clamp(16px, 1.15vw, 26px); line-height: 1.5; margin-top: 28px; color: #c6c1b8; max-width: 390px; text-wrap: pretty; }
.journey-bottom { bottom: 32px; gap: 35px; font-size: .75rem; }
.journey-scroll { min-width: 155px; display: inline-flex; gap: 26px; align-items: center; opacity: .65; white-space: nowrap; }
.journey-scroll > span { font-size: 18px; }
.journey-track { width: 100%; height: 1px; background: currentColor; opacity: .4; max-width: 260px; }
.journey-track > span { display: block; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }
.journey-signature { min-width: 155px; text-align: right; opacity: .6; }
.journey-contact { margin-top: 30px; align-self: flex-start; background: #1d211f; color: #f8f5ec; min-height: 48px; padding: 0 26px; }
.journey-contact:hover { background: #353d36; transform: translateY(-2px); }
.beat-world { color: #edf0f7; background: radial-gradient(ellipse at 50% 58%,#21293b,#05060a 68%); }
.finale { min-height: 100svh; text-align: center; }
.finale-eyebrow { position: absolute; top: 23%; left: 0; width: 100%; font-size: 13px; letter-spacing: .19em; color: #a9b0c2; text-transform: uppercase; will-change: opacity,transform; }
.journey-ready .finale .finale-word, .finale .finale-word { position: absolute; top: 29%; left: 4%; width: 92%; max-width: none; margin: 0; font-family: 'DM Sans Light',sans-serif; font-size: clamp(96px,18.5vw,470px); font-weight: 300; line-height: 1.14; letter-spacing: -.068em; font-kerning: none; font-variant-ligatures: none; white-space: nowrap; }
.finale-word-text { display: inline-block; color: transparent; background: linear-gradient(116deg,#afb9cc 0%,#faf6ee 25%,#9eabc3 43%,#fff9eb 48%,#dde4f4 54%,#a3adbe 74%,#f4e6d4 100%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 0 35px #adbfec19); }
.finale-baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.finale-invitation { position: absolute; left: 5%; right: 5%; top: 69%; display: flex; flex-direction: column; align-items: center; will-change: opacity,transform; }
.finale-invitation > p { color: #b9bfcd; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; }
.finale .journey-contact { align-self: center; margin-top: 26px; min-height: 49px; padding: 0 29px; color: #101218; background: linear-gradient(120deg,#e7e2d8,#f6f5f1,#cdd5e3); border: 1px solid #ffffff55; box-shadow: 0 0 30px #c7d4f014; }
.finale .journey-contact:hover { background: #fff; box-shadow: 0 0 45px #c7d4f03b; }
.finale-colophon { position: absolute; bottom: 32px; left: 5.15%; right: 5.15%; display: flex; justify-content: space-between; color: #89909e; font-size: 12px; }
.finale-colophon a { padding: 12px 0 12px 20px; margin: -12px 0; color: inherit; }
.finale-colophon a span { margin-left: 16px; }
.finale-colophon a:hover { color: #f0f2f8; }
.beat-product { color: #e8edf0; background: #0c1015; }
.beat-product .journey-caption { color: #aab6bd; }
.journey-ready .journey { height: 950svh; }
.journey-ready .journey-stage { position: sticky; top: 0; height: 100svh; min-height: 680px; }
.journey-ready .journey-beat { position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; background: none; padding-top: 105px; padding-bottom: 105px; }
.journey-ready .beat-spark { visibility: visible; opacity: 1; }
.journey-ready .journey-beat h2 { max-width: 70%; }
.journey-ready .beat-product h2 { max-width: 45%; font-size: clamp(54px,5.3vw,140px); }
.journey-ready .beat-world { padding-top: 90px; }
.motion-pause.below-hero { visibility: visible; opacity: .45; left: auto; right: 18px; bottom: 75px; }
.contact-form label { font-size: .875rem; }
.simple-modal > p, .simple-modal .helper { font-size: 1rem; }
@media (min-width: 1900px) {
  .journey-topline { top: 2.5vw; }
  .journey-topline > span:first-child { font-size: 1.3vw; }
  .journey-chapter, .journey-kicker, .journey-bottom { font-size: .75vw; }
  .journey-caption { max-width: 24vw; }
  .journey-kicker { margin-bottom: 1.6vw; }
  .journey-bottom { bottom: 2vw; }
  .journey-contact { font-size: .875vw; min-height: 3vw; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .journey-beat h2 { font-size: clamp(62px, 7.4vw, 80px); }
  .journey-caption { max-width: 320px; }
  .app-device { left: 49%; width: 50%; }
}
@media (max-width: 760px) {
  .journey-ready .journey { height: 920svh; }
  .journey-ready .journey-stage { min-height: 740px; }
  .journey-topline { top: 30px; left: 6%; right: 6%; }
  .journey-topline > span:first-child { font-size: 20px; }
  .journey-chapter { font-size: .75rem; letter-spacing: .08em; }
  .journey-ready .journey-beat { justify-content: flex-start; padding: 135px 6% 90px; }
  .journey-beat h2 { font-size: clamp(43px, 10.7vw, 79px); line-height: 1; letter-spacing: -.055em; }
  .journey-ready .journey-beat h2 { max-width: 100%; }
  .journey-ready .beat-product h2 { max-width: 100%; font-size: clamp(43px,10.7vw,79px); }
  .journey-kicker { font-size: .75rem; letter-spacing: .11em; margin-bottom: 19px; }
  .journey-caption { font-size: 1rem; max-width: 280px; margin-top: 23px; }
  .journey-bottom { bottom: 29px; left: 6%; right: 6%; gap: 20px; }
  .journey-scroll { min-width: 104px; gap: 13px; }
  .journey-track { max-width: none; }
  .journey-signature { display: none; }
  .journey-product { inset: 0; width: 100%; height: 100%; }
  .app-device { left: 12%; top: 43%; width: 84%; height: 46%; }
  .journey-ready .beat-product { padding-top: 117px; }
  .app-chapters { margin-top: 16px; gap: 22px; }
  .app-chapters li { font-size: 13px; padding-bottom: 9px; }
  .app-caption { min-height: 3em; margin-top: 19px; }
  .health-device-shadow { left: 27%; width: 57%; bottom: 8%; }
  .journey-ready .beat-world { padding-top: 150px; }
  .finale-eyebrow { top: 29%; font-size: 12px; letter-spacing: .14em; }
  .journey-ready .finale .finale-word, .finale .finale-word { top: 38%; left: 3%; width: 94%; font-size: 23.2vw; }
  .finale-invitation { top: 61%; }
  .finale-invitation > p { font-size: 12px; letter-spacing: .18em; }
  .finale-horizon { top: 58%; left: 5%; width: 90%; }
  .finale-colophon { left: 6%; right: 6%; bottom: 30px; }
  .journey-contact { margin-top: 24px; }
  .journey-vignette { background: linear-gradient(180deg,#08090b44,transparent 42%,transparent 80%,#08090b88); }
  .motion-pause.below-hero { left: 6%; right: auto; bottom: 66px; width: 32px; height: 32px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .journey-beat h2 { font-size: 64px; }
  .journey-kicker { margin-bottom: 14px; }
  .journey-caption { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-ready .journey { height: auto; }
  .journey-ready .journey-stage { position: relative; height: auto; }
  .journey-ready .opening-scene { position: relative; opacity: 1 !important; visibility: visible !important; }
  .journey-ready .opening-scene .hero { height: 100svh; min-height: 680px; }
  .journey-ready .opening-scene .hero-art, .journey-ready .opening-scene .hero-content { transform: none !important; opacity: 1 !important; }
  .journey-ready .journey-beat { position: relative; min-height: 90svh; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .journey-canvas, .journey-atmosphere, .journey-product, .journey-world, .journey-topline, .journey-bottom, .journey-vignette, .journey-light, .journey-fallback { display: none; }
  .journey-ready .beat-spark { background: #100f0e url('assets/chapter-two.jpg') 65% center / cover; }
  .journey-ready .beat-intelligence { background: #111721; }
  .journey-ready .beat-product { background: #0c1015; }
  .journey-ready .app-still-gallery { display: grid; }
  .journey-ready .beat-product h2 { max-width: 100%; }
  .app-chapters li { transition: none; }
  .journey-ready .beat-world { min-height: 100svh; background: radial-gradient(ellipse at 50% 58%,#21293b,#05060a 68%); }
  .finale-eyebrow, .finale-word, .finale-invitation, .finale-colophon { opacity: 1 !important; transform: none !important; filter: none !important; }
}
