/* ─────────────────────────────────────────────────────────────
   PropSolvers hero: scroll-scrub stage
   Pinned 1400vh region, sticky full-viewport stage. Scroll progress
   drives video time. Phones and portrait tablets scrub a 9:16 cut;
   short landscape phones and reduced motion get a designed static
   hero over the ending frame. The two gate queries below must match
   hero.js character for character.
   ───────────────────────────────────────────────────────────── */
:root{
  --hero-h: 1400vh;
  --hero-scrim: 11,27,58;                       /* navy */
  --hero-text: #FBFCFD;
  --tshadow: 0 1px 2px rgba(5,8,18,.95), 0 3px 12px rgba(5,8,18,.78), 0 10px 44px rgba(5,8,18,.8);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

.hero{position:relative; height:var(--hero-h); background:#0B1B3A}
.hero__stage{
  position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate;
  background:#0B1B3A; color:var(--hero-text);
}
.hero__poster, .hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero__poster{background-size:cover; background-position:center; z-index:0}
.hero__video{
  z-index:1; opacity:0; transition:opacity .7s var(--ease-out);
  will-change:transform; transform:translateZ(0); pointer-events:none;
}
.hero__stage.video-ready .hero__video{opacity:1}
.hero__stage.video-failed .hero__video{display:none}

/* global base scrim: no frame is ever raw behind the page */
.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,
    rgba(var(--hero-scrim),0) 35%, rgba(var(--hero-scrim),.62) 100%);
}

/* loading ring, driven by --ld (stroke-dashoffset), replaced by a chevron on failure */
.hero__ring{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  width:36px; height:36px; z-index:5; color:var(--hero-text); opacity:.85;
}
.hero__ring circle{transition:stroke-dashoffset .12s linear}
.hero__cue{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  z-index:5; width:22px; height:22px; color:var(--hero-text); opacity:.7;
  animation:cue-bob 2.6s var(--ease-in-out) -1.2s infinite;
}
@keyframes cue-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* scroll hint: label + chevron at the bottom center. Hidden until the film is
   ready (or has failed), faded out by hero.js over the first few percent of scroll. */
.hero__hint{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  color:var(--hero-text); text-shadow:var(--tshadow); pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease-out);
}
.hero__hint span{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:500; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.hero__hint svg{width:22px; height:22px; animation:cue-bob 2.6s var(--ease-in-out) -1.2s infinite; transform:none}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.hero__hint svg{animation-name:hint-bob}
.hero__stage.video-ready .hero__hint, .hero__stage.video-failed .hero__hint{opacity:var(--hint,1)}
.hero__hint--static{display:none; position:absolute; z-index:4}

/* ── caption bands ── */
.band{
  position:absolute; z-index:3; opacity:0; pointer-events:none;
  text-shadow:var(--tshadow); font-family:var(--f-display); font-weight:800;
  letter-spacing:-.02em; line-height:1.06; isolation:isolate;
}
.band::before{
  content:""; position:absolute; inset:-14% -10%; z-index:-1; pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%,
    rgba(var(--hero-scrim),.66) 0%, rgba(var(--hero-scrim),.44) 46%, rgba(var(--hero-scrim),0) 76%);
}
.band h1, .band h2{font-family:var(--f-display); font-weight:800; font-size:clamp(1.9rem,4.6vw,4.2rem); max-width:16ch; margin:0; color:var(--hero-text); letter-spacing:-.02em; line-height:1.06}
.band .kicker{
  display:inline-block; margin-bottom:.9rem; font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.35rem .6rem; border-radius:8px;
  background:rgba(var(--hero-scrim),.55); border:1px solid rgba(127,163,240,.3);
  backdrop-filter:blur(10px); text-shadow:0 1px 3px rgba(5,8,18,.85);
}
.band[data-pos="ul"]{top:16vh; left:6vw; width:min(40ch,46vw)}
.band--open{width:min(56ch,64vw)}
.band .brand{
  font-family:var(--f-display); font-weight:800; font-size:clamp(2.8rem,7vw,6.4rem); line-height:.95;
  letter-spacing:-.03em; margin:0 0 .3em; white-space:nowrap;
  /* royal over footage, no plate: a soft near-white halo carries the edge contrast */
  color:#1D4ED8;
  text-shadow:0 0 1px #FBFCFD, 0 0 2px #FBFCFD, 0 0 6px rgba(251,252,253,.95), 0 0 16px rgba(251,252,253,.85), 0 0 34px rgba(251,252,253,.6);
  opacity:var(--k,0); transform:translateY(calc((1 - var(--k,0))*.18em));
}
.band .counties{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:500; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; margin:1.1rem 0 0; color:var(--hero-text); opacity:var(--k,0);
}
.band[data-pos="r"] {top:22vh; right:6vw; width:min(34ch,40vw)}
.band[data-pos="uc"]{top:12vh; left:50%; transform:translateX(-50%); width:min(44ch,62vw); text-align:center}
.band[data-pos="uc"]::before{
  inset:-30% -16%;
  opacity:calc(.55 + .45*var(--k,1));
  background:radial-gradient(ellipse 72% 64% at 50% 50%,
    rgba(var(--hero-scrim),.74) 0%, rgba(var(--hero-scrim),.5) 48%, rgba(var(--hero-scrim),0) 78%);
}
.band--settle{top:14vh; left:6vw; width:min(46ch,52vw)}
.band--settle::before{
  inset:-22% -16%;
  background:radial-gradient(ellipse 78% 68% at 46% 48%,
    rgba(var(--hero-scrim),.78) 0%, rgba(var(--hero-scrim),.56) 46%, rgba(var(--hero-scrim),0) 78%);
}
.band--settle .sub{
  font-family:var(--f-text); font-weight:400; letter-spacing:0; line-height:1.5;
  font-size:clamp(1rem,1.5vw,1.2rem); max-width:44ch; margin:1.2rem 0 0; opacity:var(--ks,0);
  transform:translateY(calc((1 - var(--ks,0))*10px));
}
.band--settle .cta{
  display:inline-block; margin-top:1.6rem; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.1rem,1.9vw,1.45rem); letter-spacing:0; color:var(--hero-text);
  text-decoration:underline; text-decoration-color:#7FA3F0; text-decoration-thickness:2px;
  text-underline-offset:.22em; text-shadow:none; opacity:var(--kb,0);
  padding:.55rem .95rem; border-radius:10px;
  background:rgba(var(--hero-scrim),.62); border:1px solid rgba(127,163,240,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:translateY(calc((1 - var(--kb,0))*10px)); pointer-events:auto;
}
.band--settle .cta:hover{color:#7FA3F0}
.band--settle .cta:focus-visible{outline:2px solid #7FA3F0; outline-offset:4px}
@media (pointer:coarse){ .band--settle .cta{min-height:44px; display:inline-flex; align-items:center} }

/* screen-reader copy of split headlines */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── entrances: transform + opacity only, scrubbed off --k, reversible ── */
.band .w{display:inline-block; white-space:nowrap}
.band .c{display:inline-block}

/* (e) word-by-word rise: bands 1 and 5 */
.band[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc); transform:translateY(calc((1 - var(--kc))*.35em));
}
/* (f) drift-down: band 2 */
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc); transform:translateY(calc((1 - var(--kc))*-24px));
}
/* (c) blur-to-sharp: band 3. Two copies crossfaded; blur is static. */
.band[data-entrance="blur"] .soft{
  position:absolute; inset:0; filter:blur(10px); opacity:calc(1 - var(--k,0)); pointer-events:none;
}
.band[data-entrance="blur"] .sharp{opacity:var(--k,0)}
/* (b) grid snap-align: band 4. Horizontal only, ordered thresholds. */
.band[data-entrance="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc); transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* ── static hero: the designed fallback ── */
.hero__static{display:none}
.hero__static .wrap{position:relative; z-index:3; height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:9vh}
.hero__static::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(var(--hero-scrim),.88) 0%, rgba(var(--hero-scrim),.7) 38%, rgba(var(--hero-scrim),.25) 62%, rgba(var(--hero-scrim),0) 82%);
}
.hero__static{position:absolute; inset:0}
.hero__static .brand{font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,12vw,4.2rem); line-height:.95; letter-spacing:-.03em; color:var(--hero-text); margin:0 0 .7rem; color:#1D4ED8; text-shadow:0 0 1px #FBFCFD, 0 0 2px #FBFCFD, 0 0 6px rgba(251,252,253,.95), 0 0 16px rgba(251,252,253,.85), 0 0 34px rgba(251,252,253,.6)}
.hero__static h1, .hero__static .h1{font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:1.04; font-size:clamp(2.1rem,7vw,3.6rem); max-width:14ch; color:var(--hero-text); text-shadow:var(--tshadow); margin:0}
.hero__static p{font-family:var(--f-text); font-size:1.02rem; line-height:1.5; max-width:38ch; margin:1rem 0 0; color:var(--hero-text); text-shadow:var(--tshadow)}
.hero__static a{color:var(--hero-text); text-decoration-color:#7FA3F0; text-decoration-thickness:2px; text-underline-offset:.22em}
.hero__static .cta{display:inline-block; margin-top:1.3rem; font-family:var(--f-display); font-weight:600; font-size:1.2rem}

/* phones and portrait tablets scrub the -m cut: bands stack in one column */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px){
  .band[data-pos="ul"], .band[data-pos="r"], .band[data-pos="uc"], .band--settle, .band--open{
    left:6vw; right:auto; top:14vh; width:88vw; transform:none; text-align:left;
  }
  .band h1, .band h2{font-size:clamp(1.9rem,8.4vw,2.6rem); max-width:none}
  .band .brand{font-size:clamp(2.6rem,12vw,3.6rem)}
  .band .counties{font-size:.68rem; letter-spacing:.12em}
  .band--settle .sub{font-size:1rem; max-width:none}
  .band--settle .cta{font-size:1.15rem}
  .band[data-pos="uc"]::before, .band--settle::before{inset:-18% -8%}
}

/* the two gates, identical strings to hero.js */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100vh}
  .hero__video, .hero__ring, .hero__cue, .band, .hero__stage > .hero__hint{display:none}
  .hero__poster{background-image:var(--hero-ending)}
  .hero__static{display:block}
  .hero__hint--static{display:flex; opacity:1}
  .hero__static .wrap{padding-bottom:13vh}
}

/* short-but-scrub-capable desktop windows: keep the scrub, hide the small overlays */
@media (max-height:560px) and (pointer:fine){ .hero__ring, .hero__cue, .band .kicker{display:none} }

/* reduced motion, honored completely */
@media (prefers-reduced-motion: reduce){
  .hero *, .hero *::before, .hero *::after{animation:none !important; transition:none !important; transition-delay:0s !important}
  .band{opacity:1}
  .band .w, .band .c, .band .sharp, .band--settle .sub, .band--settle .cta{opacity:1 !important; transform:none !important}
  .band[data-entrance="blur"] .soft{display:none}
}