/* Scroll-scrubbed hero: The Column */
.hero{position:relative;height:700vh;background:#0c1218}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.poster,.poster-end{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.poster-end{opacity:0}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease-out);transform:translateZ(0) scale(1.07);will-change:transform}
.poster,.poster-end{transform:translateZ(0) scale(1.07);will-change:transform}
.video-ready #hero{opacity:1}
.video-failed #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,10,16,.58) 0%,rgba(8,10,16,.34) 22%,rgba(8,10,16,0) 36%,rgba(8,10,16,0) 64%,rgba(8,10,16,.34) 78%,rgba(8,10,16,.58) 100%),
  radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%),
  linear-gradient(180deg,rgba(10,14,20,.55) 0%,rgba(10,14,20,0) 18%,rgba(10,14,20,0) 80%,rgba(10,14,20,.5) 100%)}

/* bands: the captions travel together as one column with the scroll. Each beat rises from below, holds while you read,
   then carries on upward as the next one follows it up. hero.js writes --y (px) and opacity per band: transform and opacity only. */
.band{position:absolute;inset:0;pointer-events:none;text-shadow:var(--tshadow);opacity:0;--y:0px;
  -webkit-mask-image:linear-gradient(180deg,transparent 3%,#000 17%,#000 85%,transparent 97%);mask-image:linear-gradient(180deg,transparent 3%,#000 17%,#000 85%,transparent 97%)}
.band.live{pointer-events:auto}
.band .btn{text-shadow:none}
.col{position:absolute;top:50%;width:min(29vw,460px);transform:translate3d(0,calc(-50% + var(--y)),0);will-change:transform}
.col-l{left:max(var(--gut),3.5vw)}
.col-r{right:calc(max(var(--gut),3.5vw) + 116px);width:min(23vw,380px);transform:translate3d(0,calc(-50% + var(--y) * 1.16),0)}
.col::before{content:"";position:absolute;inset:-70% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 56% at 50% 50%,rgba(5,5,10,var(--sa,.7)) 0%,rgba(5,5,10,calc(var(--sa,.7)*.85)) 38%,rgba(5,5,10,calc(var(--sa,.7)*.45)) 62%,rgba(5,5,10,0) 84%)}
.b1{--sa:.72}.b2{--sa:.82}.b3{--sa:.78}.b4{--sa:.76}.b5{--sa:.72}
.band h1,.band .bh{font-family:var(--f-display);font-stretch:125%;font-weight:800;line-height:1.04;letter-spacing:-.015em;margin:0;color:var(--text);text-wrap:balance}
.band h1{font-size:clamp(34px,3.7vw,62px)}
.band .bh{font-size:clamp(30px,3.2vw,54px)}
.band .bh.big{font-size:clamp(46px,5.4vw,92px)}
.band .em{color:var(--accent)}
.band .sub{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--text);margin:0;text-wrap:pretty}
.band .kicker{color:var(--text)}
.band .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.b5 .sub{margin-top:18px}
.chip-note{display:inline-block;font-size:15px;line-height:1.45;max-width:30ch;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:12px;padding:12px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85);margin:0}
.chip-note .mono{display:block;font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:6px}
.b5 .col-r{top:22vh;transform:translate3d(0,calc(var(--y) * 1.16),0)}
/* loader ring and scroll cue, bottom left (the column owns the centre) */
.loader{position:absolute;left:max(var(--gut),3.5vw);bottom:5vh;display:flex;align-items:center;gap:14px;color:var(--text);font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 3px rgba(5,5,10,.9);transition:opacity .6s var(--ease-out)}
.ring{width:34px;height:34px;transform:rotate(-90deg);color:var(--accent)}
.ring-fg{transition:stroke-dashoffset .2s linear}
.cue::after{content:"";display:inline-block;width:1.5px;height:14px;background:currentColor;margin-left:12px;vertical-align:-2px;animation:cue 1.8s var(--ease-io) infinite;animation-delay:-.4s}
@keyframes cue{0%,100%{transform:translateY(-3px);opacity:.3}50%{transform:translateY(3px);opacity:1}}
.scrolled-in .loader{opacity:0}
@media (max-height:560px){.loader,.chip-note{display:none}}

/* ---------- phones and portrait tablets: the film fills the whole screen (a portrait cut), captions rise over its lower part ---------- */
@media (max-aspect-ratio: 1/1){
  .scrim{background:
    linear-gradient(180deg,rgba(8,11,16,.62) 0%,rgba(8,11,16,.18) 11%,rgba(8,11,16,0) 20%,rgba(8,11,16,0) 36%,rgba(8,11,16,.4) 51%,rgba(8,11,16,.74) 67%,rgba(8,11,16,.88) 84%,rgba(8,11,16,.94) 100%),
    radial-gradient(ellipse 140% 70% at 50% 40%,rgba(8,11,16,0) 55%,rgba(8,11,16,.4) 100%)}
  .band{inset:auto 0 0 0;top:40%;display:flex;flex-direction:column;justify-content:flex-end;
    padding:24px var(--gut) calc(34px + env(safe-area-inset-bottom));text-shadow:0 1px 3px rgba(5,5,10,.8),0 0 18px rgba(5,5,10,.45);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 72px,#000 calc(100% - 12px),transparent 100%)}
  .col,.col-l,.col-r{position:relative;top:auto;left:auto;right:auto;transform:translate3d(0,var(--y),0);width:auto;max-width:560px}
  .col-r{transform:translate3d(0,calc(var(--y) * 1.1),0);margin-top:14px}
  .col-r::before{display:none}
  .col-l::before{inset:-40% -14% -30%;background:radial-gradient(ellipse 62% 54% at 38% 52%,rgba(5,5,10,.52) 0%,rgba(5,5,10,.34) 48%,rgba(5,5,10,0) 82%)}
  .b5 .col-r{display:none}
  .band h1{font-size:clamp(30px,8.4vw,52px);line-height:1.03}
  .band .bh{font-size:clamp(29px,8vw,50px);line-height:1.04}
  .band .bh.big{font-size:clamp(50px,14vw,88px)}
  .band .sub{font-size:clamp(15.5px,4.1vw,19px);line-height:1.5}
  .band .kicker{margin-bottom:12px}
  .band .ctas{margin-top:20px}
  .band .ctas .btn{flex:1 1 auto}
  .b5 .sub{margin-top:12px}
  .loader{left:auto;right:var(--gut);bottom:auto;top:calc(var(--hdr) + 14px);flex-direction:row-reverse}
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px){
  .band{top:34%;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .band h1{font-size:27px}
  .band .bh{font-size:26px}
  .band .bh.big{font-size:44px}
  .band .sub{font-size:14.5px;line-height:1.45}
  .band .kicker{margin-bottom:8px}
  .band .ctas{margin-top:14px}
  .col-r{margin-top:10px}
}
/* landscape phones: same side-by-side layout as desktop, scaled for a short screen */
@media (min-aspect-ratio: 1/1) and (max-height: 560px){
  .col{top:calc(50% + 26px)}
  .band h1{font-size:26px}
  .band .bh{font-size:24px}
  .band .bh.big{font-size:40px}
  .band .sub{font-size:14px}
  .band .kicker{margin-bottom:8px}
  .band .ctas{margin-top:12px}
  .band .btn{padding:10px 14px;font-size:13.5px}
}

/* ---------- static hero: no JavaScript, reduced motion or data saver (hero.js sets .hero-static) ---------- */
:is(html:not(.js),html.hero-static) .hero{height:auto}
:is(html:not(.js),html.hero-static) .stage{position:relative;height:auto;min-height:100svh;display:flex;align-items:flex-end;background:#0c1218 url('../hero-static.jpg') center 30%/cover no-repeat}
:is(html:not(.js),html.hero-static) .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,18,24,.97) 0%,rgba(12,18,24,.86) 42%,rgba(12,18,24,.25) 72%,rgba(12,18,24,.45) 100%)}
:is(html:not(.js),html.hero-static) #hero,
:is(html:not(.js),html.hero-static) :is(.poster,.poster-end,.loader,.scrim,.band){display:none}
:is(html:not(.js),html.hero-static) .band.b1{display:block;position:relative;inset:auto;opacity:1;pointer-events:auto;-webkit-mask-image:none;mask-image:none;z-index:1;width:100%;padding:calc(var(--hdr) + 38vh) var(--gut) 56px}
:is(html:not(.js),html.hero-static) .b1 :is(.col,.col-l,.col-r){position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;max-width:640px}
:is(html:not(.js),html.hero-static) .b1 .col::before{display:none}
:is(html:not(.js),html.hero-static) .b1 .col-r{margin-top:18px}
:is(html:not(.js),html.hero-static) .band h1{font-size:clamp(34px,9vw,60px)}
@media (min-width: 721px) and (orientation: landscape){
  :is(html:not(.js),html.hero-static) .stage{background-image:url('../hero-poster.jpg');background-position:center}
  :is(html:not(.js),html.hero-static) .stage::after{background:linear-gradient(90deg,rgba(12,18,24,.92) 0%,rgba(12,18,24,.55) 45%,rgba(12,18,24,.15) 100%),linear-gradient(0deg,rgba(12,18,24,.9),transparent 45%)}
  :is(html:not(.js),html.hero-static) .band.b1{padding-top:calc(var(--hdr) + 30vh)}
}