/* Immersive scroll-driven hero. All content also has a static reading mode. */
.header{position:absolute;top:0;left:0;right:0;z-index:20;background:linear-gradient(#091419b3,transparent);border-bottom:1px solid #ffffff25}
.header nav a:not(.nav-cta){color:var(--white)}
.hero{display:block;min-height:0;height:auto;background:#111d22;position:relative}
.hero-stage{position:relative;isolation:isolate;overflow:hidden;min-height:100svh}
.hero .hero-visual{position:absolute;inset:0;margin:0;border-radius:0;height:100%;clip-path:none;z-index:-3;min-height:0}
.hero .hero-visual:after{display:none}
.hero .hero-visual img{object-position:70% center;transform:none;transition:none}
.hero-atmosphere{position:absolute;inset:0;background:url('./assets/collectif.webp') center/cover;opacity:.08;mix-blend-mode:screen;pointer-events:none;z-index:-2}
.hero-film{position:absolute;inset:0;background:linear-gradient(90deg,#08161aeb 0%,#08161ac9 29%,#08161a33 65%,#08161a00),linear-gradient(0deg,#08161ad9,transparent 45%);z-index:-1}
.hero-scene{padding:150px var(--gutter) 100px;position:relative;max-width:100%;min-height:90svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hero-scene .eyebrow{color:#d2e5e5;font-size:10px;letter-spacing:.16em;margin-bottom:30px}
.hero .hero-scene h1,.hero .hero-scene h2{font-size:clamp(60px,7.8vw,128px);letter-spacing:-.055em;line-height:.98;margin:0;transform:none;white-space:normal}
.hero .hero-scene h2{font-size:clamp(55px,6.2vw,103px)}
.hero .hero-scene h1 em{display:inline;transform:none}
.scene-description{font-size:clamp(16px,1.45vw,22px);line-height:1.5;color:#d7e2e2;margin-top:30px;max-width:580px}
.hero-scene .button{margin-top:28px}
.hero-rail{position:absolute;right:var(--gutter);top:47%;display:flex;flex-direction:column;align-items:center;gap:25px;pointer-events:none}
.hero-rail>span:first-child{writing-mode:vertical-rl;font:8px Arial,sans-serif;letter-spacing:.16em;color:#ffffffbd}
.rail-line{width:1px;height:120px;background:#ffffff4d;position:relative}
.rail-line:after{content:'';position:absolute;inset:0;background:var(--cyan);transform:scaleY(var(--journey,0));transform-origin:top}
.hero-bottom-bar{padding:24px var(--gutter);position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #ffffff30}
.hero-chapters{display:none;gap:30px}
.hero-chapters button{padding:10px 0;display:flex;align-items:center;gap:10px;border:0;background:none;color:#ffffff9c;cursor:pointer;font:10px Arial,sans-serif;letter-spacing:.08em;position:relative}
.hero-chapters button:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.hero-chapters button[aria-pressed=true]{color:var(--cyan)}
.hero-chapters button[aria-pressed=true]:after{transform:scaleX(1)}
.hero-chapters span{font-size:8px}.scroll-cue{font:9px Arial,sans-serif;letter-spacing:.12em;display:flex;align-items:center;gap:20px;color:#dfebeb}
.scroll-cue>span{font-size:24px}
@media(prefers-reduced-motion:no-preference){
 .hero-motion .hero{height:310svh}
 .hero-motion .hero-stage{position:sticky;top:0;height:100svh;min-height:620px}
 .hero-motion .hero-scene{position:absolute;inset:0;min-height:0;padding-top:110px;padding-bottom:115px;will-change:transform,opacity}
 .hero-motion .hero-scene:not(:first-of-type){visibility:hidden}
 .hero-motion .hero-visual img{transform:scale(calc(1.025 + var(--journey,0)*.025)) translateX(calc(var(--journey,0)*-2%));transform-origin:70% 45%;will-change:transform}
 .hero-motion .hero-atmosphere{opacity:calc(.04 + var(--journey,0)*.23);transform:scale(calc(1.08 + var(--journey,0)*.12));will-change:transform,opacity}
 .hero-motion .hero-bottom-bar{position:absolute;bottom:0;left:0;right:0}
 .hero-motion .hero-chapters{display:flex}
}
@media(max-width:1000px){.hero .hero-scene h1{font-size:clamp(58px,8vw,90px)}.hero-chapters{gap:20px}.hero .hero-scene h2{font-size:70px}}
@media(max-width:720px){
 .header{position:absolute;background:#091419c9}.header nav.open{padding-bottom:15px}
 .hero-stage{min-height:100svh}.hero-scene{padding:140px var(--gutter) 90px;min-height:100svh;justify-content:flex-end}
 .hero .hero-visual img{object-position:60% 20%}
 .hero-film{background:linear-gradient(0deg,#07161af5 0%,#07161ac9 30%,#07161a30 65%,#07161a10)}
 .hero .hero-scene h1{font-size:clamp(43px,10.8vw,75px)}.hero .hero-scene h2{font-size:clamp(39px,9.7vw,68px)}
 .hero-scene .eyebrow{font-size:8px;letter-spacing:.10em;margin-bottom:20px}.scene-description{font-size:15px;margin-top:20px;max-width:95%}.scene-description br{display:none}
 .hero-scene .button{padding:14px 18px;margin-top:22px;font-size:12px;gap:18px}
 .hero-rail{display:none}.hero-bottom-bar{padding:18px var(--gutter);gap:15px}.hero-chapters{gap:18px}.hero-chapters span{display:none}.scroll-cue{font-size:7px;letter-spacing:.06em;gap:12px}.scroll-cue>span{font-size:20px}
}
@media(max-width:720px) and (prefers-reduced-motion:no-preference){
 .hero-motion .hero{height:270svh}
 .hero-motion .hero-stage{min-height:540px}
 .hero-motion .hero-scene{padding-top:100px;padding-bottom:100px}
 .hero-motion .hero-visual img{transform:scale(calc(1.025 + var(--journey,0)*.02));transform-origin:60% 35%}
}
@media(max-height:620px) and (min-width:721px){.hero-motion .hero-stage{min-height:100svh}.hero .hero-scene h1{font-size:62px}.hero .hero-scene h2{font-size:48px}.hero-scene .eyebrow{margin-bottom:14px}.scene-description{font-size:15px;margin-top:16px}.hero-scene .button{margin-top:15px;padding:12px 18px}.hero-motion .hero-scene{padding-top:80px;padding-bottom:75px}.hero-bottom-bar{padding-block:14px}}
@media(prefers-reduced-motion:reduce){.hero-scene{opacity:1!important;visibility:visible!important;transform:none!important}.hero .hero-visual img{transform:none!important}.hero-atmosphere{display:none}.hero-chapters{display:none}.hero-stage{height:auto}.hero-rail{display:none}}
@media(max-width:720px){.hero .hero-visual img{object-position:80% 20%}}
/* Real AI-generated gesture, paused and scrubbed by the scroll position. */
.hero-celebration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:0;pointer-events:none;transition:opacity .25s}
.hero-celebration.ready{opacity:1}
@media(max-width:720px){.hero-celebration{object-position:72% center}}
@media(prefers-reduced-motion:reduce){.hero-celebration{display:none!important}}
@media(max-width:720px){.hero-celebration{object-position:65% center}}

/* Keep the face and raised hand visible in the laptop sequence. */
@media(max-width:720px){.hero-celebration{object-position:80% center}}