/* =========================================================================
   ① Agency films — cinematic scrollytelling. Page-scoped.
   PURE BLACK (per Gabriel): no blue, no static image backdrops.
   Full-bleed video everywhere; verticals = clean 9:16 films side-by-side on black.
   "Pinning" = position:sticky; GSAP scrubs video + non-text layers only.
   ========================================================================= */

/* This page is black-black-black. Resolve the brand inks to true black here only. */
:root{ --ink-deep:#000000; --ink-graphite:#070708; --ink-graphite-2:#0d0d0e; }
body{ background:#000; }
/* full-bleed beds: pure-black gradient (legibility) — never the blue ink */
.video-bg::after{background:linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0) 64%);}

.film-hero .kicker,.reel-beat__idx,.studio .kicker,.contact-film .kicker,.verticals__line{font-family:var(--font-mono);font-weight:400;}

/* ----------------------------------------------------------------- HERO */
.film-hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;background:#000;}
.film-hero .video-bg{z-index:0;}
.film-hero__inner{position:relative;z-index:2;width:100%;align-self:flex-end;
  display:flex;flex-direction:column;gap:var(--s-6);padding-bottom:clamp(3rem,9vh,7rem);}
.film-hero__line{font-family:var(--font-display);font-weight:600;color:#fff;text-wrap:balance;
  font-size:clamp(2.9rem,9.4vw,8.5rem);line-height:0.88;letter-spacing:-0.05em;}
.film-hero .kicker{color:rgba(255,255,255,0.75);font-size:0.66rem;letter-spacing:0.34em;}

/* --------------------------------------------------- STICKY STAGE (pin-free) */
.film-sticky{position:relative;height:200svh;background:#000;}
.film-sticky__inner{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:#000;}
.film-sticky__inner .video-bg{z-index:0;}

/* STATEMENT */
.statement .video-bg::after{background:linear-gradient(to top,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.28) 50%,rgba(0,0,0,0.5) 100%);}
.statement__line{position:relative;z-index:2;text-align:center;color:#fff;text-wrap:balance;
  font-family:var(--font-display);font-weight:600;letter-spacing:-0.04em;line-height:0.94;
  font-size:clamp(2.6rem,7.6vw,6.4rem);max-width:15ch;padding-inline:var(--gutter);}

/* THE DARE */
.dare .video-bg::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0.46) 0%,rgba(0,0,0,0.18) 45%,rgba(0,0,0,0.2) 100%);}
.dare__whispers{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s-6);align-items:center;text-align:center;}
.dare__line{font-family:var(--font-display);font-weight:500;color:#fff;letter-spacing:-0.012em;
  font-size:clamp(1.8rem,3.8vw,2.9rem);}
.dare__line--2{font-family:var(--font-mono);font-weight:400;font-size:clamp(0.8rem,1.4vw,1rem);
  letter-spacing:0.28em;text-transform:uppercase;color:rgba(255,255,255,0.8);}
.dare__line--2.reveal{transition-delay:0.55s;}

/* --------------------------------------------------------------- THE REEL */
.reel-beat{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000;}
.reel-beat .video-bg{z-index:0;}
.reel-beat__cap{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(2.4rem,7vh,5.5rem);
  z-index:2;display:flex;flex-direction:column;gap:var(--s-4);}
.reel-beat__idx{font-size:0.62rem;letter-spacing:0.32em;text-transform:uppercase;color:rgba(255,255,255,0.64);}
.reel-beat__line{font-family:var(--font-display);font-weight:500;color:#fff;text-wrap:balance;
  font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.02;letter-spacing:-0.02em;max-width:20ch;}

/* ------------------------------------------ VERTICAL INTERLUDE (clean, on black) */
.verticals{position:relative;height:240svh;background:#000;}
.verticals__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;}
.verticals__track{position:relative;z-index:1;display:flex;gap:clamp(0.9rem,2vw,1.8rem);align-items:center;will-change:transform;}
.vfilm{position:relative;flex:0 0 auto;height:min(72svh,30vw);aspect-ratio:9/16;overflow:hidden;border-radius:4px;background:#000;}
.vfilm__media{position:absolute;inset:0;}
.vfilm iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
.vfilm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.verticals__line{position:absolute;left:0;right:0;bottom:4.5vh;z-index:2;text-align:center;
  font-size:0.7rem;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,255,0.88);line-height:1.9;}

/* ----------------------------------------------------------- MONTAGE BURST */
.montage-beat{position:relative;height:82svh;min-height:440px;overflow:hidden;background:#000;}
.montage-beat .video-bg{z-index:0;}

/* --------------------------------------------------------- STUDIO + TRUST (black) */
.studio{position:relative;background:#000;overflow:hidden;padding-block:clamp(6rem,15vw,12rem);}
.studio .container{position:relative;z-index:2;}
.studio__grid{display:grid;gap:var(--s-8);}
@media(min-width:880px){.studio__grid{grid-template-columns:minmax(0,15rem) 1fr;gap:var(--s-24);align-items:start;}}
.studio .kicker{color:var(--steel-light);font-size:0.64rem;letter-spacing:0.32em;}
.studio__line{font-family:var(--font-display);font-weight:600;font-size:clamp(2.8rem,7vw,5.4rem);
  line-height:0.92;letter-spacing:-0.04em;margin-bottom:var(--s-4);text-wrap:balance;}
.studio__id{font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--steel-light);margin-bottom:var(--s-8);max-width:42rem;line-height:1.7;}
.studio__text{font-size:var(--t-sub);line-height:1.62;color:var(--silver);max-width:40rem;}
.trust{position:relative;z-index:2;margin-top:clamp(4rem,9vw,7rem);padding-top:var(--s-8);border-top:1px solid var(--hair);}
.trust__row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-12);align-items:baseline;justify-content:space-between;}
.trust__line{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ivory);}
.trust__tags{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--steel-mid);}
.trust__note{margin-top:var(--s-6);font-family:var(--font-mono);font-size:0.86rem;letter-spacing:0.01em;line-height:1.7;color:var(--ivory);max-width:54rem;}

/* ----------------------------------------------------------------- CONTACT */
.contact-film{position:relative;min-height:88svh;overflow:hidden;display:flex;background:#000;}
.contact-film .video-bg{z-index:0;}
.contact-film .video-bg::after{background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.64) 60%,rgba(0,0,0,0.52) 100%);}
.contact-film__inner{position:relative;z-index:2;width:100%;align-self:center;
  display:flex;flex-direction:column;gap:var(--s-6);padding-block:clamp(4rem,10vh,7rem);}
.contact-film .kicker{color:rgba(255,255,255,0.72);font-size:0.64rem;letter-spacing:0.32em;}
.contact-film__headline{font-family:var(--font-display);font-weight:600;color:#fff;text-wrap:balance;
  font-size:clamp(2.7rem,6.8vw,5.4rem);line-height:0.94;letter-spacing:-0.035em;}
.contact-film__inner .sub{color:rgba(255,255,255,0.84);}

/* CTAs on pure black — no gasoline-blue gradient. Primary = solid white, nav = ghost. */
.pay-btn,.btn--solid{background:#fff;color:#000;border:1px solid #fff;}
.pay-btn:hover,.btn--solid:hover{background:rgba(255,255,255,0.86);color:#000;}
.pay-btn .arrow,.btn--solid .arrow{color:#000;}
.nav__cta{background:transparent;border:1px solid rgba(255,255,255,0.38);color:#fff;}
.nav__cta:hover{background:#fff;color:#000;border-color:#fff;}
.cta-bar .btn{background:#fff;color:#000;border-color:#fff;}

/* ----------------------------------------------------------------- MOBILE */
@media(max-width:1023px){
  .film-sticky{height:auto;}
  .film-sticky__inner{position:relative;height:100svh;}
  .verticals{height:auto;}
  .verticals__sticky{position:relative;height:auto;display:block;overflow:visible;}
  .verticals__track{flex-direction:column;gap:0;}
  .vfilm{height:100svh;width:100%;aspect-ratio:auto;border-radius:0;}
  .verticals__line{position:absolute;top:7vh;bottom:auto;}
}

@media (prefers-reduced-motion:reduce){ .dare__line--2.reveal{transition-delay:0s;} }

/* Contact form (page-scoped).
   Fields sit over a looping film, so they carry their own opaque surface —
   a translucent field is unreadable on a frame we don't control. */
#contact-form{margin-top:var(--s-6);text-align:left;gap:var(--s-4);max-width:38rem;}
#contact-form .row{display:grid;gap:var(--s-4);}
#contact-form .field{
  background:#0c0c0d;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:2px;
  padding:0.7rem 0.85rem;
}
#contact-form .field:hover{border-color:rgba(255,255,255,0.28);}
#contact-form .field:focus{border-color:#fff;background:#101012;}
#contact-form .field::placeholder{color:#6c6c70;}
#contact-form textarea.field{resize:vertical;min-height:5.5rem;line-height:1.5;}
#contact-form .lbl{font-size:0.62rem;letter-spacing:0.18em;margin-bottom:var(--s-2);color:rgba(255,255,255,0.62);}
#contact-form button[type=submit]{justify-self:start;margin-top:var(--s-2);}
.form__secondary{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--steel-mid);}
.form__secondary a{color:var(--steel-light);text-underline-offset:3px;}
@media(min-width:640px){
  #contact-form .row--2{grid-template-columns:1fr 1fr;}
}