/* 2026-10-12 THE SLAB → then NO CONTAINER (v5 of this sheet: ground = page paper, edges feathered) (James on the full-bleed cut: "it just looks like the video doesnt fit"). v4 of this sheet. The hero
   is ONE rounded 16:9 slab inside the gutters, the footprint the gel hero had: the film plays uncropped inside it, and the
   kicker + h1 + plasma button sit on the slab's own paper band (the film keeps its bottom fifth as plain paper, so no
   scrim). Under 900 px the slab stays 16:9 and the copy drops below it. Scoped to .hero.hero-two to out-specify the old
   hero rules in both sheets; .btn-gold keeps its own dark token set. */

.hero.hero-two{
  --film:#0f1b27;--plate:#2b3a48;--muted:#5c6b79;--dim:#8a97a3;
  --rule:rgba(15,27,39,.14);--dash:rgba(15,27,39,.22);--hair:rgba(15,27,39,.24);--edge:rgba(15,27,39,.1);
  --steel:#2f6fae;--steel-glow:rgba(47,111,174,.22);--tile:#e8ebef;
  position:relative;isolation:isolate;display:block;
  width:min(1320px,calc(100% - var(--gutter)*2));max-width:none;margin:clamp(14px,1.6vw,24px) auto 0;padding:0;
  height:auto;min-height:0;max-height:none;aspect-ratio:16/9;
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:0 34px 70px -44px rgba(15,27,39,.5),0 1px 0 rgba(255,255,255,.9) inset}
.hero.hero-two::before,.hero.hero-two::after{content:none;display:none}
.bar+main .hero.hero-two{margin-top:clamp(14px,1.6vw,24px)}

/* ── the slab again (James 2026-10-12: "try containerized hero again, and this webgl wash in the background of the
   video but the page background for the hero remains that page background color"): the film carries the fluid wash
   in its own ground; the page stays paper; the slab's edge is what the eye needs. Same 16:9, nothing cropped. */
.hero-two .hero-frame{position:absolute;inset:0;z-index:0;margin:0;aspect-ratio:auto;overflow:hidden;
  background:var(--paper);border:0;border-radius:0;box-shadow:none}
.hero-two .hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:var(--paper)}

/* ── the copy on the slab's paper band: kicker + h1 bottom-left, the actions bottom-right */
.hero-two .hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;inset-inline:0;width:auto;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'kicker kicker' 'h1 acts';column-gap:40px;align-items:end;
  padding:0 clamp(24px,3vw,44px) clamp(22px,2.6vw,36px);pointer-events:none}
.hero-two .hero-copy a,.hero-two .hero-copy button{pointer-events:auto}
.hero-two .hero-kicker{grid-area:kicker;margin-bottom:clamp(8px,.9vw,12px);color:var(--gold-ink);text-shadow:none}
.hero.hero-two h1{grid-area:h1;max-width:26ch;color:var(--film);font:600 clamp(26px,3vw,44px)/1.06 var(--sans);letter-spacing:-.025em;text-shadow:none;text-wrap:balance}
.hero.hero-two .hero-acts{grid-area:acts;margin-top:0;padding-bottom:.2em}
.hero-two .hero-alt{color:var(--muted)}
.hero-two .hero-alt:hover{color:var(--film)}

/* ── settle in once */
.hero-two .hero-kicker,.hero.hero-two h1,.hero.hero-two .hero-acts{animation:rise .9s var(--out) both}
.hero-two .hero-frame{animation:fadeup 1.2s var(--out) both}
.hero-two .hero-kicker{animation-delay:.05s}
.hero.hero-two h1{animation-delay:.12s}
.hero.hero-two .hero-acts{animation-delay:.2s}
@keyframes fadeup{from{opacity:0}to{opacity:1}}

/* ── narrow: the slab stays 16:9 with the film alone in it; the copy drops below on the paper */
@media (max-width:900px){
  .hero.hero-two{aspect-ratio:auto;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;padding-bottom:clamp(24px,5vw,36px)}
  .hero-two .hero-frame{position:relative;inset:auto;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:12px;background:var(--paper-hi);
    box-shadow:0 24px 50px -36px rgba(15,27,39,.5)}
  .hero-two .hero-copy{position:relative;inset:auto;margin-top:clamp(22px,5vw,32px);padding:0;
    grid-template-columns:minmax(0,1fr);grid-template-areas:'kicker' 'h1' 'acts';row-gap:16px}
  .hero.hero-two .hero-acts{padding-bottom:0}
  .hero.hero-two h1{font-size:clamp(30px,8vw,44px);max-width:16ch}
}
@media (prefers-reduced-motion:reduce){
  .hero-two .hero-kicker,.hero.hero-two h1,.hero.hero-two .hero-acts,.hero-two .hero-frame{animation:none;opacity:1;transform:none}
}