/* v05 — scroll-scrubbed video hero on a dark page.
   The hero sits in normal flow at v02's geometry and scrolls away like any other
   section; the page is never pinned. The footage is deliberately left ungraded —
   no brightness or contrast filter — so it stays full-strength until the gradient
   takes it, dissolving into the black page from the middle of the hero's exit. */

.hero.hero-v04{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:0;
 height:90svh;min-height:720px;max-height:1100px;
 display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg,#0d0d10)}

/* <picture> is only a wrapper for choosing the file; display:contents keeps it out of
   the box tree so the still positions against the hero itself, like the clip. */
.hero-v04 picture{display:contents}
.hero-v04 .hero-still{position:absolute;inset:0;z-index:-3;width:100%;height:100%;
 object-fit:cover;object-position:center 44%;pointer-events:none;display:none}
/* Phones only: the still replaces the clip, in the same place and the same framing.
   hero-v05.js uses this same test and leaves the clip without a source there, so the
   footage is never fetched. Width, not touch — a laptop can report a coarse pointer, and
   testing for that alone put the still on desktops. The second clause is a phone held
   sideways: that wide, but only ~400px tall. Keep in step with hero-v05.js and the
   <picture> sources in index.html. */
@media(max-width:767px),(pointer:coarse) and (max-height:520px){
 .hero-v04 .hero-video{display:none}
 .hero-v04 .hero-still{display:block}
}
.hero-v04 .hero-video{position:absolute;inset:0;z-index:-3;width:100%;height:100%;
 object-fit:cover;object-position:center 45%;pointer-events:none;
 /* The foot of the hero is solid page colour under the scrim, so trimming the clip's
    last 2px changes nothing visible and keeps any rounding between the video layer
    and the scrim from showing a line of footage. */
 clip-path:inset(0 0 2px 0)}

/* Legibility only, not a grade: the top band is darkened for the navigation and the
   middle for the headline. The foot feathers into the page colour. */
.hero-v04 .hero-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
 linear-gradient(180deg,rgba(6,6,8,.5) 0%,rgba(6,6,8,.12) 24%,rgba(6,6,8,0) 44%),
 radial-gradient(86% 54% at 50% 48%,rgba(6,6,8,.62) 0%,rgba(6,6,8,.32) 48%,rgba(6,6,8,0) 80%),
 linear-gradient(0deg,var(--bg,#0d0d10) 0%,rgba(13,13,16,.8) 13%,rgba(13,13,16,0) 34%)}

/* Driven from JS: the hero dissolves into the dark page from the middle of its exit. */
.hero-v04 .hero-fade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bg,#0d0d10);opacity:var(--fade,0)}

.hero-v04 .hero-content{position:relative;width:100%;padding:0 4.8%;opacity:var(--copy,1);will-change:opacity}
.hero-v04 h1{font-size:clamp(70px,8.4vw,190px);font-weight:800;letter-spacing:-.065em;line-height:1.01;
 color:#fff;max-width:none;margin:0;text-shadow:0 2px 44px rgba(4,4,6,.5);
 animation:hero-v04-enter 1.15s cubic-bezier(.22,1,.36,1) both}
.hero-v04 h1 span{display:block}
.hero-v04 p{max-width:min(720px,92%);margin:clamp(18px,2.2vh,32px) auto 0;
 font-size:clamp(17px,1.5vw,26px);line-height:1.4;
 font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.9);text-shadow:0 1px 22px rgba(4,4,6,.62);
 animation:hero-v04-enter 1.3s .12s cubic-bezier(.22,1,.36,1) both}

@keyframes hero-v04-enter{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* The navigation sits over the hero, then returns fixed once the hero has dissolved,
   on a dark strip that spans the viewport so it reads over light sections too. */
.navbar{color:#fff}
/* Leaving: a quick, plain fade. */
.navbar.is-stuck{position:fixed;opacity:0;transform:translateY(-8px);
 transition:opacity .45s ease,transform .45s ease}
/* Arriving: a soft start over about a second, so the bar settles in rather than
   popping on. The drop runs a touch longer than the fade so it lands last. */
.navbar.is-stuck.is-shown{opacity:1;transform:none;
 transition:opacity 1.1s cubic-bezier(.45,0,.25,1),transform 1.3s cubic-bezier(.33,0,.2,1)}
.navbar.is-stuck::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
 transform:translateX(-50%);background:rgba(9,9,11,.72);
 -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
 border-bottom:1px solid rgba(255,255,255,.07)}
/* A blurred backdrop is repainted over whatever scrolls under it, which a phone pays for
   in dropped frames. Touch screens up to tablet size get a solid strip instead — the bar
   reads the same. A touch laptop keeps the blur, like any other desktop. */
@media(pointer:coarse) and (max-width:1023px){
 .navbar.is-stuck::before{background:rgba(9,9,11,.94);
  -webkit-backdrop-filter:none;backdrop-filter:none}
}
.navbar .solid{background:#fff;color:#0c0a08}
.navbar .solid:hover{background:rgba(255,255,255,.85)}
.navbar .pill:not(.solid){border-color:rgba(255,255,255,.5)}
.navbar .pill:not(.solid):hover{background:#fff;color:#0c0a08;border-color:#fff}

@media(min-width:1800px){.hero-v04 p{max-width:min(820px,92%)}}
/* The bar tops out at its medium size. From 1600px the base template scales it with
   the viewport (5.04vw tall, 1.26vw links, 2.13vw wordmark); hold the 1024-1599px
   values instead. Its side margins still follow the page. */
@media(min-width:1600px){
 .navbar{height:64px}
 .navbar nav{font-size:16px;gap:32px}
 .navbar .wordmark{font-size:27px}
}
@media(max-width:1023px) and (min-width:768px){.hero.hero-v04{min-height:760px}.hero-v04 h1{font-size:8.5vw}}
@media(max-width:767px){
 .hero.hero-v04{height:82svh;min-height:640px;max-height:900px}
 .hero-v04 .hero-content{padding:0 6% clamp(44px,7vh,86px)}
 .hero-v04 h1{font-size:clamp(41px,12.2vw,84px);letter-spacing:-.06em;line-height:1.04}
 .hero-v04 p{font-size:clamp(16px,4.5vw,21px);line-height:1.42;letter-spacing:-.015em;margin-top:18px;max-width:min(400px,100%)}
 /* Ultrawide source in a portrait hero: hold the characters in frame. */
 .hero-v04 .hero-video{object-position:center 44%}
 .hero-v04 .hero-scrim{background:
  linear-gradient(180deg,rgba(6,6,8,.54) 0%,rgba(6,6,8,.14) 28%,rgba(6,6,8,0) 48%),
  radial-gradient(132% 46% at 50% 47%,rgba(6,6,8,.68) 0%,rgba(6,6,8,.32) 54%,rgba(6,6,8,0) 85%),
  linear-gradient(0deg,var(--bg,#0d0d10) 0%,rgba(13,13,16,.82) 12%,rgba(13,13,16,0) 32%)}
}

/* No scrubbing without motion: the hero holds on the poster frame. */
@media(prefers-reduced-motion:reduce){
 .navbar.is-stuck,.navbar.is-stuck.is-shown{transition:none;transform:none}
 .hero-v04 h1,.hero-v04 p{animation:none}
 .hero-v04 .hero-fade{opacity:0}
 .hero-v04 .hero-content{opacity:1}
}

/* Anchor jumps clear the fixed bar. Lenis applies the same 80px itself
   (app.js anchors.offset); this covers native jumps when Lenis is off. */
html:not(.lenis){scroll-padding-top:80px}