/* fallow-ignore-file unused-file */
/* Interactive film (docs/STORYDECK.md). Uses site.css variables. Dynamic layout is the CSS default (so the stage reserves its size
   before JS runs); the block at the bottom turns it into a plain static layout without scripting or with reduced motion. */
.film{position:relative;background:var(--bg);color:var(--ink)}
.film-head{padding-top:96px;padding-bottom:28px}
.film-head h2{margin-bottom:0}

/* ---- scroll track + sticky stage ---- */
.film-dyn .film-track{height:300vh}
.film-block.film-dyn .film-track{height:220vh;max-width:1200px;margin:0 auto;padding:0 24px}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);outline-offset:-3px}
.film-block .film-stage{top:88px;height:min(calc(100svh - 112px),675px,calc((100vw - 48px)*.5625));border-radius:var(--radius);border:1px solid var(--line)}

/* ---- media layer ---- */
.film-media{position:absolute;inset:0;overflow:hidden;background:var(--bg2)}
.film-media .film-video,.film-media .standin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* storyboard film: stacked shots, no opacity transition (cuts are hard; film.js drives crossfades per frame) */
.film-media .film-shot{opacity:0;transition:none}
/* a dip-to-colour join (film.js drives it); whip/blur joins set filter + transform on the shots themselves */
.film-dip{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:#000}
.film-media .film-shot[data-shot="0"],.film-media .film-shot.is-on{opacity:1}
.film-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(5,7,11,.88) 0,rgba(5,7,11,.45) 38%,rgba(5,7,11,0) 70%),linear-gradient(90deg,rgba(5,7,11,.55) 0,rgba(5,7,11,0) 60%)}
.film-fade{position:absolute;inset:0;z-index:4;background:var(--bg);opacity:0;pointer-events:none}
.film-hero .film-fade{background:linear-gradient(0deg,var(--bg) 0,rgba(6,10,20,.82) 14%,rgba(6,10,20,.38) 46%,rgba(6,10,20,.12) 100%)}  /* the last lit frame stays behind the end card; only the bottom edge meets the page */
/* the end-card glow: closest-side keeps the whole ellipse INSIDE its box, so it is transparent before any edge at every width
   (10-27: the old 55%x60% ellipse was cut by its own box = a hard vertical edge left of the text on a large desktop) */
.film-hero .film-end::before{content:"";position:absolute;z-index:-1;left:-45%;right:-25%;top:-70%;bottom:-55%;pointer-events:none;background:radial-gradient(closest-side at 50% 52%,rgba(47,123,255,.22),rgba(47,123,255,.07) 55%,rgba(47,123,255,0) 100%)}

/* ---- text layer ---- */
.film-copy{position:absolute;inset:0;z-index:5;pointer-events:none;padding:96px 24px 0}
.film-block .film-copy{padding-top:40px}
.film-eyebrow{position:absolute;left:24px;right:24px;top:92px}
.film-beats{position:absolute;left:24px;right:24px;bottom:120px}
.film-beat,.film-end{position:absolute;left:0;right:0;bottom:0;max-width:760px}
.film-align-center{margin-left:auto;margin-right:auto;text-align:center}
.film-align-right{margin-left:auto;text-align:right}
.film-title{font-size:clamp(30px,5.2vw,72px);margin:0}
.film-block .film-title{font-size:clamp(24px,3.6vw,46px)}
.film-text{font-size:clamp(16px,1.7vw,21px);color:rgba(238,242,248,.86);margin-top:14px;max-width:56ch}
.film-text2{margin-top:6px;font-weight:600}  /* a beat's second line sits right under the first */
.film-align-center .film-text{margin-left:auto;margin-right:auto}
.film-align-right .film-text{margin-left:auto}
.film-align-center .ctas{justify-content:center}
.film-align-right .ctas{justify-content:flex-end}
.film-end .ctas{margin-top:22px}
.film-end a{pointer-events:auto}

/* beats: hidden by default in the scroll layout (JS drives them; the static block below shows them again). Rise in, hold, fade away upward. */
.film-dyn .film-beat,.film-dyn .film-end{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.film-dyn .film-beat.is-in,.film-dyn .film-end.is-in{opacity:1;transform:none}
.film-dyn .film-beat.is-past{opacity:0;transform:translateY(-22px);transition-duration:.5s}
.film-dyn .film-end:not(.is-in) a{visibility:hidden}
/* the opening beat (the h1) is fully legible on load, before and without film.js; it only leaves once the film moves on */
.film-dyn .film-beat-first:not(.is-past){opacity:1;transform:none}
/* scrim: the copy holds over bright frames (a soft dark pool behind each alignment + a text shadow) */
.film-hero .film-shade{background:radial-gradient(62% 58% at 18% 80%,rgba(5,7,11,.66),rgba(5,7,11,0) 72%),radial-gradient(62% 58% at 82% 80%,rgba(5,7,11,.5),rgba(5,7,11,0) 72%),linear-gradient(0deg,rgba(5,7,11,.9) 0,rgba(5,7,11,.45) 38%,rgba(5,7,11,0) 70%),linear-gradient(180deg,rgba(5,7,11,.55) 0,rgba(5,7,11,0) 22%)}
.film-title,.film-text{text-shadow:0 1px 14px rgba(3,6,12,.38),0 1px 2px rgba(3,6,12,.35)}  /* soft: a wide dark halo goes blotchy over flat navy */

/* ---- controls: glass pills at the bottom of the stage ---- */
.film-controls{position:absolute;z-index:3;left:24px;bottom:28px;display:none;gap:10px}
.film-hero .film-controls{left:max(24px,calc((100% - 1200px)/2 + 24px))}
.film-ready .film-controls{display:flex}
.film-controls[hidden]{display:none!important}
.film-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(14,21,32,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.film-btn:hover{background:rgba(47,123,255,.35);border-color:var(--signal2);transform:translateY(-1px)}
.film-btn svg{width:18px;height:18px}
.film-play[data-state=play] .i-pause,.film-play[data-state=pause] .i-play{display:none}
.film-progress{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);display:none}
.film-ready .film-progress{display:block}
.film-progress i{display:block;height:100%;background:var(--signal2);transform:scaleX(0);transform-origin:0 50%}

/* hero copy sits on the page grid (the 1200px .wrap the nav logo uses), not the window edge */
.film-hero .film-eyebrow,.film-hero .film-beats{left:max(24px,calc((100% - 1200px)/2 + 24px));right:max(24px,calc((100% - 1200px)/2 + 24px))}
@media (max-width:640px){.film-hero .film-eyebrow,.film-hero .film-beats{left:16px;right:16px}}

@media (max-width:640px){
  .film-copy{padding:84px 16px 0}
  .film-eyebrow{left:16px;right:16px;top:80px}
  .film-beats{left:16px;right:16px;bottom:104px}
  .film-controls,.film-hero .film-controls{left:16px;bottom:20px;gap:8px}
  .film-btn{padding:0 16px}
  .film-block .film-track{padding:0 16px}
  .film-block .film-stage{height:min(calc(100svh - 112px),calc((100vw - 32px)*1.25))}
  .film-block .film-copy{padding-top:24px}
}

/* ---- static layout: no scripting, or reduced motion. Poster (or the playable video) on top, every beat readable below. ---- */
@media (scripting:none),(prefers-reduced-motion:reduce){
  .film-dyn .film-track,.film-block.film-dyn .film-track{height:auto}
  .film-dyn .film-stage{position:relative;top:auto;height:auto;overflow:visible;border:0;border-radius:0}
  .film-dyn .film-media{position:relative;inset:auto;aspect-ratio:16/9;max-height:80vh;width:100%}
  .film-block.film-dyn .film-media{border-radius:var(--radius)}
  .film-dyn .film-fade{display:none}
  .film-dyn .film-copy{position:relative;inset:auto;pointer-events:auto;padding:40px 24px 64px;max-width:1200px;margin:0 auto}
  .film-dyn .film-eyebrow{position:static;margin-bottom:18px}
  .film-dyn .film-beats{position:static;display:grid;gap:44px}
  .film-dyn .film-beat,.film-dyn .film-end{position:static;opacity:1;transform:none}
  .film-dyn .film-beat,.film-dyn .film-beat .film-text{text-align:left;margin-left:0}.film-dyn .film-beat .ctas{justify-content:flex-start}  /* a static list reads down one edge */
  .film-dyn .film-end:not(.is-in) a{visibility:visible}
  .film-dyn .film-end::before{display:none}
}
@media (scripting:none){.film-controls,.film-progress{display:none!important}}
@media (max-width:640px) and (scripting:none),(max-width:640px) and (prefers-reduced-motion:reduce){
  .film-dyn .film-copy{padding:32px 16px 48px}
  .film-dyn .film-media{aspect-ratio:4/3}
}

/* portrait phones: the 16:9 film is cover-cropped to a narrow window; sit it left of centre so the card's mark stays in */
@media (max-aspect-ratio:3/4){.film-hero .film-media .film-video{object-position:38% 50%}}
/* while the end card shows (and the film is not playing), its CTAs are the controls: Play/Skip leave completely */
.film-dyn.film-at-end .film-controls{visibility:hidden;opacity:0}
/* ---- the mp4 failed to load (blocked, offline, 404): film.js adds .film-static and the film collapses to the same static
   layout as reduced motion: poster on top, every beat below, no scroll track, so no dark runway anywhere ---- */
  .film-dyn.film-static .film-track,.film-block.film-dyn.film-static .film-track{height:auto}
  .film-dyn.film-static .film-stage{position:relative;top:auto;height:auto;overflow:visible;border:0;border-radius:0}
  .film-dyn.film-static .film-media{position:relative;inset:auto;aspect-ratio:16/9;max-height:80vh;width:100%}
  .film-block.film-dyn.film-static .film-media{border-radius:var(--radius)}
  .film-dyn.film-static .film-fade{display:none}
  .film-dyn.film-static .film-copy{position:relative;inset:auto;pointer-events:auto;padding:40px 24px 64px;max-width:1200px;margin:0 auto}
  .film-dyn.film-static .film-eyebrow{position:static;margin-bottom:18px}
  .film-dyn.film-static .film-beats{position:static;display:grid;gap:44px}
  .film-dyn.film-static .film-beat,.film-dyn.film-static .film-end{position:static;opacity:1;transform:none}
  .film-dyn.film-static .film-beat,.film-dyn.film-static .film-beat .film-text{text-align:left;margin-left:0}.film-dyn.film-static .film-beat .ctas{justify-content:flex-start}  /* a static list reads down one edge */
  .film-dyn.film-static .film-end:not(.is-in) a{visibility:visible}
  .film-dyn.film-static .film-end::before{display:none}
.film-static .film-progress{display:none!important}
@media (max-width:640px){
  .film-dyn.film-static .film-copy{padding:32px 16px 48px}
  .film-dyn.film-static .film-media{aspect-ratio:4/3}
}
.film-still .film-media .film-still-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* still hero (StoryDeck still=): one full viewport, the copy overlaid bottom-left on the scrim, nothing scripted. Without
   .film-dyn there is no scroll track and no hidden beat, so the h1 is on screen from the first paint at every size. */
.film-still .film-stage{position:relative;top:auto;height:100vh;height:100svh;min-height:520px}
.film-still .film-beats{bottom:72px}
.film-still .film-beat .ctas{margin-top:26px}
.film-still .film-beat a{pointer-events:auto}
@media (max-width:640px){.film-still .film-beats{bottom:40px}.film-still .film-stage{min-height:600px}}
@media (max-height:500px){.film-still .film-stage{min-height:0}.film-still .film-beats{bottom:22px}.film-still .film-beat .ctas{margin-top:14px}.film-still .film-text{display:none}}
/* CTAs inside a beat (StoryDeck with a fallback: they ride with the h1): clickable, gone once the beat has passed */
.film-beat .ctas{margin-top:26px}
.film-beat a{pointer-events:auto}
.film-dyn .film-beat.is-past a{visibility:hidden}
.film-fallback{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* StoryDeck fallback (fallback=): wherever the film cannot run, ONE full viewport: the still, the h1 + CTAs over the scrim */
@media (scripting:none),(prefers-reduced-motion:reduce){
  .film-hero.has-fallback.film-dyn .film-track{height:auto}
  .film-hero.has-fallback.film-dyn .film-stage{position:relative;top:auto;height:100vh;height:100svh;min-height:520px;overflow:hidden;border:0}
  .film-hero.has-fallback.film-dyn .film-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;width:auto}
  .film-hero.has-fallback.film-dyn .film-media .film-video{display:none}
  .film-hero.has-fallback.film-dyn .film-media .film-fallback{display:block}
  .film-hero.has-fallback.film-dyn .film-fade{display:none}
  .film-hero.has-fallback.film-dyn .film-copy{position:absolute;inset:0;padding:96px 24px 0;max-width:none;margin:0;pointer-events:none}
  .film-hero.has-fallback.film-dyn .film-eyebrow{position:absolute;margin:0}
  .film-hero.has-fallback.film-dyn .film-beats{position:absolute;display:block;bottom:72px}
  .film-hero.has-fallback.film-dyn .film-beat{position:absolute;opacity:1;transform:none}
  .film-hero.has-fallback.film-dyn .film-beat:not(.film-beat-first),.film-hero.has-fallback.film-dyn .film-end{display:none}
  .film-hero.has-fallback.film-dyn .film-controls,.film-hero.has-fallback.film-dyn .film-progress{display:none!important}
}
.film-hero.has-fallback.film-dyn.film-static .film-track{height:auto}
.film-hero.has-fallback.film-dyn.film-static .film-stage{position:relative;top:auto;height:100vh;height:100svh;min-height:520px;overflow:hidden;border:0}
.film-hero.has-fallback.film-dyn.film-static .film-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;width:auto}
.film-hero.has-fallback.film-dyn.film-static .film-media .film-video{display:none}
.film-hero.has-fallback.film-dyn.film-static .film-media .film-fallback{display:block}
.film-hero.has-fallback.film-dyn.film-static .film-fade{display:none}
.film-hero.has-fallback.film-dyn.film-static .film-copy{position:absolute;inset:0;padding:96px 24px 0;max-width:none;margin:0;pointer-events:none}
.film-hero.has-fallback.film-dyn.film-static .film-eyebrow{position:absolute;margin:0}
.film-hero.has-fallback.film-dyn.film-static .film-beats{position:absolute;display:block;bottom:72px}
.film-hero.has-fallback.film-dyn.film-static .film-beat{position:absolute;opacity:1;transform:none}
.film-hero.has-fallback.film-dyn.film-static .film-beat:not(.film-beat-first),.film-hero.has-fallback.film-dyn.film-static .film-end{display:none}
.film-hero.has-fallback.film-dyn.film-static .film-controls,.film-hero.has-fallback.film-dyn.film-static .film-progress{display:none!important}
@media (max-width:640px) and (scripting:none),(max-width:640px) and (prefers-reduced-motion:reduce){
  .film-hero.has-fallback.film-dyn .film-copy{padding:84px 16px 0}
  .film-hero.has-fallback.film-dyn .film-beats{bottom:40px}
  .film-hero.has-fallback.film-dyn .film-stage{min-height:600px}
}
@media (max-width:640px){
  .film-hero.has-fallback.film-dyn.film-static .film-copy{padding:84px 16px 0}
  .film-hero.has-fallback.film-dyn.film-static .film-beats{bottom:40px}
  .film-hero.has-fallback.film-dyn.film-static .film-stage{min-height:600px}
}
@media (max-height:500px) and (scripting:none),(max-height:500px) and (prefers-reduced-motion:reduce){
  .film-hero.has-fallback.film-dyn .film-stage{min-height:0}
  .film-hero.has-fallback.film-dyn .film-beats{bottom:22px}
  .film-hero.has-fallback.film-dyn .film-beat .ctas{margin-top:14px}
  .film-hero.has-fallback.film-dyn .film-text{display:none}
}
@media (max-height:500px){
  .film-hero.has-fallback.film-dyn.film-static .film-stage{min-height:0}
  .film-hero.has-fallback.film-dyn.film-static .film-beats{bottom:22px}
  .film-hero.has-fallback.film-dyn.film-static .film-beat .ctas{margin-top:14px}
  .film-hero.has-fallback.film-dyn.film-static .film-text{display:none}
}

/* outro 'white' (storyboard hero, Knox #27672): the whole stage, copy included, fades to the light section's paper */
.film-hero.film-outro-white .film-fade{z-index:6;background:linear-gradient(0deg,#f5f7fb 0,#f5f7fb 12%,rgba(245,247,251,.55) 34%,rgba(245,247,251,.18) 60%,rgba(245,247,251,0) 100%)}
/* storyboard shots: a per-shot focal point for portrait crops (Shot.focus; the subject stays in view on phones) */
@media (max-aspect-ratio:3/4){.film-hero .film-media .film-shot.fp-x0{object-position:0% 50%}.film-hero .film-media .film-shot.fp-x5{object-position:5% 50%}.film-hero .film-media .film-shot.fp-x10{object-position:10% 50%}.film-hero .film-media .film-shot.fp-x15{object-position:15% 50%}.film-hero .film-media .film-shot.fp-x20{object-position:20% 50%}.film-hero .film-media .film-shot.fp-x25{object-position:25% 50%}.film-hero .film-media .film-shot.fp-x30{object-position:30% 50%}.film-hero .film-media .film-shot.fp-x35{object-position:35% 50%}.film-hero .film-media .film-shot.fp-x40{object-position:40% 50%}.film-hero .film-media .film-shot.fp-x45{object-position:45% 50%}.film-hero .film-media .film-shot.fp-x55{object-position:55% 50%}.film-hero .film-media .film-shot.fp-x60{object-position:60% 50%}.film-hero .film-media .film-shot.fp-x65{object-position:65% 50%}.film-hero .film-media .film-shot.fp-x70{object-position:70% 50%}.film-hero .film-media .film-shot.fp-x75{object-position:75% 50%}.film-hero .film-media .film-shot.fp-x80{object-position:80% 50%}.film-hero .film-media .film-shot.fp-x85{object-position:85% 50%}.film-hero .film-media .film-shot.fp-x90{object-position:90% 50%}.film-hero .film-media .film-shot.fp-x95{object-position:95% 50%}.film-hero .film-media .film-shot.fp-x100{object-position:100% 50%}}
/* film blocks: the outro keeps the last frame lit, only the bottom edge melts into the page (Prism r2 #2) */
.film-block .film-fade{background:linear-gradient(0deg,var(--bg) 0,rgba(6,10,20,.55) 22%,rgba(6,10,20,0) 55%)}
/* end card extras (StoryDeck end_logo / end_text): a logo above the title, one line under it */
.film-end-logo{margin:0 0 14px}
.film-logo{display:block;width:clamp(150px,16vw,220px);height:auto}
.film-end-text{max-width:620px;margin:14px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:rgba(238,242,248,.86)}