/* ==========================================================================
   Dancers Asylum Ent — Home page styles
   Built on top of tokens.css (color + type scale). Structure follows the
   master brief §5 section-by-section order exactly.
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
/* Site-wide safety net: several scroll-triggered reveal animations sit
   off-screen before they fire (.team-member at translateX(-60px),
   .value-item at translateX(60px), the talent carousel's zoomed featured
   card via 3D rotateY/translateZ) — each of those pre-reveal/zoomed states
   can paint outside its own container's box, and without a clip
   somewhere, that widens the page's actual layout width. On mobile,
   browsers respond by auto-zooming the whole page out to fit, which reads
   as a jarring shift/"tilt" every time a new element animates in. Rather
   than patching each animated component's own container individually
   (fragile — the next one added would reintroduce the bug), clipping
   horizontally at the top level catches all of them at once. */
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:var(--text-body-base);
  line-height:var(--lh-body-base);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.container{ max-width:1240px; margin:0 auto; padding:0 24px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---- Scroll-triggered wipe-reveal ------------------------------------------
   Shared utility (see playWipeReveal in main.js): text stays hidden behind
   a left-to-right clip-path wipe until it scrolls into view, then reveals
   once and stays revealed. inline-block so the clip hugs the actual text
   bounds instead of the full-width heading box — on a centered heading, a
   full-width box would sit in empty space either side of the text, so the
   wipe would spend part of its motion revealing nothing. */
.wipe-reveal{
  display:inline-block; clip-path:inset(0 100% 0 0);
  transition:clip-path .9s cubic-bezier(.65,0,.35,1);
}
.wipe-reveal.is-revealed{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- Shared button/pill components -------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius);
  font-family:var(--font-body); font-weight:700; font-size:var(--text-body-xs);
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  border:1px solid var(--signal); transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-solid{ background:var(--signal); color:var(--paper); }
.btn-solid:hover{ background:#c40025; }
.btn-outline{ background:transparent; color:var(--paper); }
.btn-outline:hover{ background:var(--signal); color:var(--paper); }
.pill{
  padding:10px 20px; border-radius:999px; border:1px solid var(--signal);
  font-family:var(--font-body); font-weight:700; font-size:var(--text-body-xs);
  letter-spacing:.04em;
}
.pill-fill{ background:var(--signal); color:var(--paper); }
.pill-fill:hover{ background:#c40025; }
.pill-line{ background:transparent; color:var(--paper); }
.pill-line:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* ---- 1. Header / Nav ------------------------------------------------------
   Gaaga-style: logo left, links center, bordered bar, two pills right.
   ---------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--ink); padding:14px 20px 0;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 24px; max-width:1240px; margin:0 auto;
  border:1px solid var(--signal); border-radius:14px;
  background:rgba(0,0,0,.92); backdrop-filter:blur(6px);
}
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand img{ display:block; height:32px; width:auto; }
.brand-word{ font-family:var(--font-display); font-size:16px; letter-spacing:.04em; display:none; }
.nav-links{
  display:flex; gap:32px; list-style:none; margin:0; padding:0;
  font-family:var(--font-body); font-size:var(--text-body-base); font-weight:500;
}
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--signal); transition:width .2s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-ctas{ display:flex; gap:10px; flex:0 0 auto; align-items:center; }
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:1px solid var(--line); border-radius:var(--radius);
  flex:0 0 auto; margin-right:4px;
}
.nav-burger span{ display:block; width:18px; height:2px; background:var(--paper); margin:0 auto; transition:transform .2s ease, opacity .2s ease; }
.nav-burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2){ opacity:0; }
.nav-burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Wrapper around the links + panel-pills. On desktop this needs to stay
   invisible to layout (display:contents) so .nav-row's flex/space-between
   still sees "brand | links | ctas" as three items, same as before this
   wrapper existed. Only becomes a real bordered box at mobile widths. */
.nav-panel{ display:contents; }
.nav-ctas-panel{ display:none; }

@media (max-width:860px){
  .site-header{ padding:10px 14px 0; }
  /* Even collapsed (max-height:0), a flex-wrap child sizing quirk let the
     dropdown panel affect how the visible logo/burger row centered
     vertically — align-content:center didn't reliably fix it across
     browsers. Cleaner fix: take the panel out of nav-row's flex flow
     entirely with position:absolute, so it's just a normal-flow row of
     two items (logo, burger) with nothing else to skew the centering. */
  .nav-row{ position:relative; padding:8px 14px; }
  .nav-burger{ display:flex; order:1; margin-left:auto; }
  .brand{ order:0; }
  /* Gaaga's mobile top bar is just logo + burger — no pills up here. The
     full-text pills already live in the hero content below and inside the
     opened nav panel, so the compact top-bar ones are redundant on mobile. */
  .nav-ctas{ display:none; }

  .nav-panel{
    display:block; position:absolute; left:0; right:0; top:100%;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .35s ease, opacity .25s ease;
  }
  .nav-panel.is-open{
    max-height:600px; opacity:1; margin-top:14px;
    border:1px solid var(--signal); border-radius:12px;
    padding:8px 16px 16px; background:var(--ink);
  }
  .nav-links{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
  }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links li:nth-child(1), .nav-links li:nth-child(2){ border-top:none; }
  .nav-links a{ display:block; padding:14px 8px; text-align:center; }
  .nav-links a::after{ display:none; }

  .nav-ctas-panel{
    display:flex; gap:10px; margin-top:12px; padding-top:16px;
    border-top:1px solid var(--line);
  }
  .nav-ctas-panel .pill{ flex:1; text-align:center; justify-content:center; }
}

/* ---- 2. Auto-popup ("Schedule a Call") ----------------------------------- */
.popup-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.popup-backdrop.is-open{ opacity:1; pointer-events:auto; }
.popup-card{
  position:relative; width:100%; max-width:480px; background:var(--ink);
  border:1px solid var(--signal); border-radius:16px; padding:44px 36px 36px;
  text-align:center; transform:translateY(12px); transition:transform .25s ease;
}
.popup-backdrop.is-open .popup-card{ transform:translateY(0); }
.popup-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  border:1px solid var(--line); border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:16px; color:var(--paper);
}
.popup-close:hover{ border-color:var(--signal); color:var(--signal); }
.popup-card h2{
  font-family:var(--font-wordmark); font-size:var(--text-display-lg);
  line-height:var(--lh-display-lg); letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px;
}
.popup-card p{
  font-size:var(--text-body-sm); line-height:var(--lh-body-sm); color:var(--smoke);
  margin:0 0 26px;
}
/* Big full-width CTA, matching the reference (gaaga.world mobile popup) —
   scoped to just this popup's button, not the shared .btn style used
   elsewhere site-wide. */
.popup-card .btn{
  width:100%; padding:18px 28px; font-size:var(--text-body-sm);
}

/* ---- 3. Hero -------------------------------------------------------------- */
.hero{
  padding:96px 24px 88px; text-align:center; border-bottom:1px solid var(--signal);
}
@media (max-width:760px){
  .hero{ padding-top:48px; }
}
.hero-logo{ width:min(78vw, 460px); height:auto; margin:0 auto 32px; }
.hero h1{
  font-family:var(--font-wordmark); font-size:var(--text-display-xl);
  line-height:var(--lh-display-xl); letter-spacing:.12em;
  text-transform:uppercase; max-width:720px; margin:0 auto 16px; text-wrap:balance;
}
.hero .tagline{
  font-size:var(--text-body-lg); line-height:var(--lh-body-lg); color:var(--smoke);
  max-width:560px; margin:0 auto 36px;
}
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---- 4/5. Services -------------------------------------------------------- */
.services-video{ position:relative; overflow:hidden; border-bottom:1px solid var(--signal); }
.services-video .stage-head{ padding:56px 24px 0; max-width:none; text-align:center; }
/* Plain text on the background, same treatment as the FAQ heading — the
   red box now belongs to the "Our Services" badge above it (reusing
   .faq-badge), not the heading itself. */
.services-video .stage-head h2{
  font-family:var(--font-wordmark); font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl);
  letter-spacing:.12em; text-transform:uppercase; margin:0; color:var(--paper);
}
/* .faq-badge is inline-block, which stacks fine above the FAQ section's
   own plain-block h2 — but here the heading is ALSO inline-block (from
   .wipe-reveal, needed for its clip-path wipe-in animation), so without
   this the two inline-level elements would sit side by side on one line
   instead of stacking. Forcing the badge to display:block only in this
   context fixes that without touching .faq-badge's own FAQ-section use. */
.services-video .stage-head .faq-badge,
.services-plain .section-head .faq-badge,
.services-costume .section-head .faq-badge{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }

/* ---- 4b. Services — Customized Costuming & Styling ------------------------
   Same badge+heading treatment as On the Stage/Beyond the Stage, but the
   header (badge + h2 + intro copy) sits full-width above the videos instead
   of squeezed into a middle gap between them — there's no cycling text here,
   just two clips shown side by side underneath.
   Deliberately NOT the site's edge-to-edge "connected" video-duo treatment
   (.video-duo/.dancers-duo, full-bleed with one shared top border) — per
   request, this pair stays contained to the normal content width (same
   .container the header above it uses) with real spacing between them, and
   each video keeps its own complete border box instead of a shared line. */
.services-costume{ padding:96px 0 0; border-bottom:1px solid var(--signal); }
.services-costume .section-head{ margin:0 auto 36px; text-align:center; max-width:720px; }
.services-costume .section-head h2{
  font-family:var(--font-wordmark); font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl); letter-spacing:.12em;
  color:var(--paper);
}
.services-costume-copy{ font-size:clamp(15px, .6vw + 13px, 20px); line-height:1.4; color:#d8d8d8; margin:14px 0 0; }
.costume-duo{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:48px;
  padding:40px 24px 96px;
}
.costume-duo .video-frame video{ filter:grayscale(.15) brightness(.55); }
.video-duo{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:6vw;
  min-height:560px; padding:40px 24px; border-top:1px solid var(--signal);
}
/* Full frame (all 4 sides) around each video. The border + clipping live on
   this wrapper so they stay put and crisp; the <video> inside is
   deliberately oversized (see .video-frame video below) so it always has
   crop margin to hide the loop-reset seek glitch in, at any viewport
   width. */
.video-frame{
  position:relative; width:100%; height:100%; overflow:hidden;
  border:1px solid var(--signal);
}
/* The video is rendered ~7% larger than its frame and centered. Without
   this margin, object-fit:cover has ~0px of crop slack whenever the
   frame's aspect ratio happens to nearly match the footage's own ratio
   (this is exactly what happens at the narrower "collapse" desktop width
   with the current 886x1920 source clips) — and with no slack, the
   split-second undersized/letterboxed render some browsers do right after
   a seek (see seekWithFade in main.js) becomes visible as the picture
   briefly shrinking inside the frame. The extra 7% gives that hiccup
   somewhere to hide regardless of viewport width or clip dimensions. */
.video-frame video{
  position:absolute; top:50%; left:50%; width:107%; height:107%;
  transform:translate(-50%,-50%); object-fit:cover; object-position:center;
  transition:opacity .15s ease;
}
.video-duo .video-frame video{ filter:grayscale(.15) brightness(.55); }
.eyebrow{
  display:block; font-family:var(--font-mono); font-size:var(--text-mono-sm); line-height:var(--lh-mono-sm);
  letter-spacing:.18em; text-transform:uppercase; color:var(--signal); margin:0 0 10px;
}

/* Casting/Choreography text — sizing measured directly off gaaga.world's
   own Productions page (a "GUESS THE CRIMINAL"-style heading+body), per
   the user's reference: left-aligned, 48px display heading, 20px/28px
   body, ~700px max-width. Bold + letter-spacing on the heading is our own
   addition on top of that reference (Gaaga's own version uses neither). */
.stage-gap{ position:relative; display:flex; align-items:center; z-index:2; }
.stage-content{ max-width:700px; text-align:left; opacity:0; }
.stage-content.show{ animation:stage-stamp 5.5s ease forwards; }
.stage-heading{
  font-family:var(--font-display); font-weight:700; letter-spacing:.04em;
  font-size:clamp(22px, 2.4vw + 14px, 48px); line-height:1; text-transform:uppercase;
  margin:0 0 14px; text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.stage-body{
  font-family:var(--font-body); font-size:clamp(15px, .6vw + 13px, 20px); line-height:1.4;
  color:var(--paper); margin:0; text-shadow:0 2px 12px rgba(0,0,0,.8);
}
@keyframes stage-stamp{
  0%{ opacity:0; transform:translateY(8px); }
  8%{ opacity:1; transform:translateY(0); }
  88%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-6px); }
}

/* ---- Beyond the stage — one-at-a-time service cycler ----------------------
   Replaces the old 3-card grid: a single service (heading + body) shown at
   a time, starting with "Experiential…", advanced by clicking the arrow —
   click-only, no auto-cycle, so it doesn't compete with the Casting/
   Choreography text auto-cycling above it. Heading letter-spacing matches
   .stage-heading (Casting/Choreography) per request. Sized wide enough
   that the copy reads comfortably at both the "collapse" and "expand"
   desktop widths, rather than the old cards' cramped 1/3-width columns. */
.services-plain-body{
  display:flex; align-items:center; gap:32px; max-width:880px; margin:0 auto;
}
.services-plain-text{ flex:1; min-width:0; transition:opacity .2s ease; }
/* Heading + body sized to match .stage-heading/.stage-body (the Casting/
   Choreography text) exactly, per request. */
.services-plain-heading{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px, 2.4vw + 14px, 48px);
  line-height:1; letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px;
}
.services-plain-copy{ font-size:clamp(15px, .6vw + 13px, 20px); line-height:1.4; color:#d8d8d8; margin:0; }
/* Centered by default (matches the "Beyond the stage" heading above it);
   switches to flush-left at the same 1100px "expand" breakpoint used for
   the FAQ heading/list, so this content isn't sitting centered with big
   empty margins on a wide window. */
@media (min-width:1100px){
  .services-plain-body{ margin-left:0; margin-right:0; }
}
.services-plain-arrow{
  flex:0 0 auto; width:52px; height:52px; border:1px solid var(--signal); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:transparent;
  transition:background .2s ease, transform .15s ease;
}
.services-plain-arrow:hover{ background:var(--signal); }
.services-plain-arrow:active{ transform:scale(.92); }
.services-plain-arrow .chevron{
  width:11px; height:11px; border-top:2px solid var(--signal); border-right:2px solid var(--signal);
  transform:rotate(45deg) translate(-1px,1px); transition:border-color .2s ease;
}
.services-plain-arrow:hover .chevron{ border-color:var(--paper); }

.services-plain{ padding:96px 24px; border-bottom:1px solid var(--signal); }
/* Centered (not the base .section-head's left-aligned default) and bumped
   up to the larger display size, so "Beyond the stage" lines up on the
   same center axis as "On the stage" above it, at any width — both live
   inside centered containers (.container / the full-width .stage-head),
   so centering both is what keeps them tracing straight down to each
   other. */
.services-plain .section-head{ margin:0 auto 44px; text-align:center; }
.services-plain .section-head h2{
  font-family:var(--font-wordmark); font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl); letter-spacing:.12em;
  color:var(--paper);
}
.section-head{ max-width:640px; margin:0 0 44px; }
.section-head h2{
  font-family:var(--font-display); font-size:var(--text-display-xl); line-height:var(--lh-display-xl);
  text-transform:uppercase; margin:0;
}

@media (max-width:760px){
  .services-video .stage-head{ padding:40px 24px 0; }
  .video-duo{ grid-template-columns:1fr; min-height:auto; padding:24px; }
  .video-duo .video-frame{ height:44vh; }
  .stage-gap{ order:3; padding:24px 4px; justify-content:center; }
  .stage-content{ text-align:center; }
  .services-plain-body{ gap:16px; }
  .services-plain-arrow{ width:42px; height:42px; }
  .services-costume{ padding:40px 0 0; }
  .costume-duo{ grid-template-columns:1fr; padding:24px 24px 64px; gap:24px; }
  .costume-duo .video-frame{ height:44vh; }
}

/* Desktop only (both the narrower "collapse" width and a wider "expand"
   width count as desktop here — this is separate from the ≤760px mobile
   breakpoint above, which is untouched). Videos are capped at a fixed
   width instead of stretching with 1fr, so they stay the same size the
   user already approved; the middle column is 1fr so it's the ONLY thing
   that grows as the window widens, giving the Casting/Choreography text
   more room instead of the videos growing. */
@media (min-width:761px){
  .video-duo{
    grid-template-columns:minmax(0,480px) 1fr minmax(0,480px);
    grid-template-rows:640px;
    justify-content:center; gap:0; min-height:0; height:640px; padding:0;
  }
  .stage-gap{ padding:0 40px; justify-content:center; }
  .costume-duo{
    grid-template-columns:1fr 1fr; grid-template-rows:640px;
    gap:48px; padding:40px 24px 96px;
  }
}

/* ---- 6. Dancers video block ------------------------------------------------
   Same staggered duo treatment; text sits in the middle gap instead of
   overlaid on the footage. Kinetic word-cycle per the "handle creatively"
   brief note.
   ---------------------------------------------------------------------- */
.dancers-block{ position:relative; border-bottom:1px solid var(--signal); background:#000; }
.dancers-duo{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; min-height:640px; }
/* Full frame (all 4 sides) around each video — same .video-frame wrapper
   treatment (border/clip on the wrapper, oversized video inside) as the
   Bottle girl videos above; only the filter differs per section. */
.dancers-duo .video-frame video{ filter:grayscale(.1) brightness(.65); }
/* Loop-reset seeks (see syncOffsetPair/seekWithFade in main.js) briefly
   dip opacity to mask the decoder's split-second undersized/letterboxed
   render right after a seek, instead of letting that glitch show through. */
.video-frame video.is-seeking{ opacity:0; }
.dancers-gap{
  width:min(30vw,340px); display:flex; align-items:center; justify-content:center;
  position:relative; padding:0 18px; text-align:center;
}
.dancers-word{
  font-family:var(--font-display); font-size:clamp(22px,3.4vw,40px); line-height:1.05;
  text-transform:uppercase; letter-spacing:.02em; opacity:0;
}
.dancers-word.show{ animation:word-stamp 3.4s ease forwards; }
@keyframes word-stamp{
  0%{ opacity:0; transform:translateY(10px); }
  10%{ opacity:1; transform:translateY(0); }
  85%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-8px); }
}
@media (max-width:760px){
  /* Match the Bottle-girl block's mobile arrangement: padding around the
     whole grid and a gap between frames, instead of sitting flush
     edge-to-edge. */
  .dancers-duo{ grid-template-columns:1fr; min-height:auto; padding:24px; gap:6vw; }
  .dancers-duo .video-frame{ height:38vh; }
  .dancers-gap{ width:100%; order:3; padding:32px 24px; }
}

/* Desktop only — same fixed-video/growing-gap pattern as .video-duo above:
   videos stay capped at their current size regardless of window width;
   the gap is the only thing that grows. The word text is also allowed to
   scale up further than before (was capped at 40px) so it can actually
   use that extra room on a wide/"expanded" window instead of sitting as a
   small island in a much bigger empty gap. Mobile (≤760px, above) is
   untouched. */
@media (min-width:761px){
  .dancers-duo{
    grid-template-columns:minmax(0,480px) 1fr minmax(0,480px); grid-template-rows:640px;
    justify-content:center;
  }
  .dancers-gap{ width:auto; padding:0 40px; }
  .dancers-word{ font-size:clamp(28px, 1.4vw + 22px, 72px); }
}

/* ---- 7. Client logo carousel ----------------------------------------------
   White background per client's most recent instruction. Each logo sits in
   a bordered tile so mismatched source backgrounds (not yet cleaned up to
   transparent PNGs) read as intentional cards rather than stray boxes.
   ---------------------------------------------------------------------- */
/* Background + logo height measured directly off a reference client-logo
   carousel (freestylefridaywithnm.com): light warm-gray band, logos ~53px
   tall. Gap is deliberately much wider than the reference's own 30px —
   the ask here is specifically "~4 logos visible in the window at once,
   one crosses out one side as the next enters the other," which needs a
   bigger pitch (logo+gap distance) relative to viewport width than the
   reference uses. calc(vw - px) scales that gap with viewport width so
   ~4 stay visible whether the window is a phone or a wide desktop,
   instead of a fixed px gap that would show more logos on wider screens. */
.logo-carousel{ background:#dfdbdb; padding:10px 0; border-bottom:1px solid var(--signal); overflow:hidden; }
.logo-carousel .eyebrow{ text-align:center; }
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
/* Duration scaled up from the original 16s/11s to match: adding the 2 new
   logos (7 total now, was 5) made one full track lap 1.499x longer
   (measured: 4011px vs 2676px scrollWidth), so the duration is scaled by
   that same factor to keep the actual scroll speed (px/sec) identical —
   otherwise a longer lap in the same time would visibly speed up. */
/* will-change hints the browser to promote this to its own GPU layer up
   front, instead of only doing so reactively once the animation starts. */
/* Duration nudged 24s -> 25.4s: adding the 14th item's trailing margin
   (the fix above) made one full lap ~5.7% wider (4241px vs 4011px
   measured), so the duration is scaled by that same factor to keep the
   actual scroll speed (px/sec) unchanged. */
.marquee-track{
  display:flex; align-items:center; width:max-content;
  animation:marquee 25.4s linear infinite; will-change:transform;
  transition:opacity .4s ease;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
/* Real transparent PNGs now (backgrounds removed) — no more boxed white
   card needed to hide mismatched source backgrounds. Sized by a common
   height (matching the reference) with auto width so logos of different
   aspect ratios flow past at a consistent scale.
   Spacing is a trailing margin on every item (including the very last
   one) rather than the track's own `gap` — this is the actual fix for the
   skip that used to land right on the Cage logo. `gap` only inserts space
   BETWEEN items, so 14 logos only got 13 gaps; translateX(-50%) still
   assumed the two 7-logo sets split the track exactly in half, but the
   real seam (where the 2nd set starts) sat 115px past that halfway point
   (half of one missing gap) — so every lap the animation visibly snapped
   back by that difference right as the 2nd set's Cage logo arrived. Once
   every item — including the 14th — carries the same trailing margin, the
   two sets are truly identical widths and -50% lands exactly on the seam. */
.logo-item{ flex:0 0 auto; height:53px; display:flex; align-items:center; margin-right:calc(30vw - 60px); }
.logo-item img{ height:100%; width:auto; max-width:160px; object-fit:contain; }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (max-width:520px){
  .logo-item{ margin-right:calc(33vw - 45px); }
  .marquee-track{ animation-duration:17.1s; }
}

/* ---- 8. FAQ ---------------------------------------------------------------- */
.faq{ padding:96px 24px; border-bottom:1px solid var(--signal); }
/* Centered by default (mobile + the video sections' "collapse" desktop
   range); switches to left-aligned once the window is wide enough to feel
   like it has real room either side, per request. */
.faq-head{ margin-left:auto; margin-right:auto; text-align:center; }
.faq-head h2{ font-family:var(--font-wordmark); letter-spacing:.12em; }
.faq-badge{
  display:inline-block; background:var(--signal); color:var(--paper);
  font-family:var(--font-body); font-weight:700; font-size:var(--text-body-xs);
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  padding:10px 22px; border-radius:999px; margin:0 0 18px;
}
.faq-subhead{
  font-family:var(--font-body); font-size:var(--text-body-md); line-height:var(--lh-body-md);
  color:var(--smoke); margin:14px 0 0;
}
.faq-list{ max-width:840px; margin:0 auto; }
@media (min-width:1100px){
  .faq-head{ margin-left:0; margin-right:0; text-align:left; }
  .faq-list{ margin-left:0; margin-right:0; }
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; text-align:left; font-family:var(--font-wordmark); font-size:20px;
  text-transform:uppercase; letter-spacing:.12em;
}
.faq-q .plus{
  flex:0 0 auto; width:26px; height:26px; border:1px solid var(--signal); border-radius:50%;
  position:relative; transition:transform .25s ease;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--signal); left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.faq-q .plus::before{ width:10px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:10px; transition:opacity .2s ease; }
.faq-item.is-open .plus{ transform:rotate(90deg); }
.faq-item.is-open .plus::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ margin:0 4px 24px; color:var(--smoke); font-size:var(--text-body-md); line-height:var(--lh-body-md); max-width:70ch; }

/* ---- "For Clients" modal FAQ ------------------------------------------
   Same accordion classes/JS as the page-level .faq section (.faq-item/
   .faq-q/.faq-a/.plus — the toggle logic in main.js is class-based, so it
   works here with no extra JS), just scoped down to modal-appropriate
   sizing instead of the full page-section treatment (96px padding, 20px
   question text) — sits below the form, collapsed by default, so it
   doesn't compete with the form as the modal's primary action. */
.modal-faq{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.modal-faq h3{
  font-family:var(--font-wordmark); font-size:var(--text-body-lg); line-height:1.2;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper); margin:0 0 4px;
}
.modal-faq .modal-faq-sub{ font-size:var(--text-body-xs); color:var(--smoke); margin:0 0 8px; }
.modal-faq .faq-q{ padding:16px 2px; font-size:14px; gap:14px; }
.modal-faq .faq-q .plus{ width:20px; height:20px; }
.modal-faq .faq-a p{ margin:0 2px 16px; font-size:var(--text-body-xs); line-height:var(--lh-body-sm); }

/* ---- 9. CTA band ------------------------------------------------------------ */
.cta-band{ padding:110px 24px; text-align:center; border-bottom:1px solid var(--signal); }
/* Bordered box, same idea as .popup-card — wraps the heading + buttons in
   their own card instead of sitting bare on the section background.
   Photo lives inside the box itself (gaaga.world's "Get in Touch" CTA
   reference: box background IS the photo, not a full-bleed section image).
   Box is now sized to the CROPPED photo's own aspect ratio (a tall
   portrait card) instead of a fixed wide/short shape — a wide box forced
   the photo into object-fit:contain letterboxing (dark bars either side,
   red border visibly not matching the photo underneath it). Matching the
   box's shape to the photo means it fills the border edge-to-edge with
   no letterbox and no crop. */
.cta-box{
  position:relative; overflow:hidden;
  max-width:480px; aspect-ratio:1750/1870; margin:0 auto; border:1px solid var(--signal); border-radius:16px;
  padding:40px 32px; display:flex; flex-direction:column; justify-content:center;
}
/* Wider at the site's existing tablet/"collapse" tier, wider again (a
   bigger jump) at the "expand" tier — aspect-ratio keeps the box's height
   scaling proportionally with it, so it stays the same portrait shape,
   just larger. */
@media (min-width:761px){
  .cta-box{ max-width:560px; }
}
@media (min-width:1100px){
  .cta-box{ max-width:760px; }
}
.cta-box-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Talent Roster's "Join Us" CTA reuses the same card, just with its own
   photo cropped to a different natural ratio (1750/1697 — a tight crop
   that keeps her raised hand and boot heel fully in frame, see the source
   crop notes) instead of the home page photo's 1750/1870, so the box
   matches THIS photo edge-to-edge with no letterbox/crop of its own. */
.talent-cta-box{ aspect-ratio:1750/1697; }
/* Light scrim over the photo for text contrast — kept subtle (like the
   gaaga reference's ~10% black) since the source photo is already dark. */
.cta-box::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1; }
.cta-box h2, .cta-box .hero-ctas{ position:relative; z-index:2; }
.cta-band h2{
  font-family:var(--font-wordmark); font-size:var(--text-display-xl); line-height:var(--lh-display-xl);
  letter-spacing:.12em; text-transform:uppercase; max-width:640px; margin:0 auto 32px; text-wrap:balance;
}

/* ---- 10. Footer -------------------------------------------------------------- */
.site-footer{ padding:64px 24px 32px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:48px;
}
.footer-brand img{ height:36px; margin-bottom:14px; }
.footer-brand p{ color:var(--smoke); font-size:var(--text-body-xs); max-width:32ch; }
.footer-col h4{
  font-family:var(--font-mono); font-size:var(--text-mono-sm); letter-spacing:.14em;
  text-transform:uppercase; color:var(--smoke); margin:0 0 16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a:hover{ color:var(--signal); }
.newsletter-form{ display:flex; gap:8px; margin-top:4px; }
.newsletter-form input{
  flex:1; min-width:0; background:transparent; border:1px solid var(--signal); border-radius:var(--radius);
  padding:12px 14px; color:var(--paper); font-family:var(--font-body); font-size:var(--text-body-xs);
}
.newsletter-form input::placeholder{ color:var(--smoke); }
.newsletter-form input:focus{ outline:none; border-color:var(--signal); }
.newsletter-form button{
  background:var(--signal); color:var(--paper); padding:0 18px; border-radius:var(--radius);
  font-weight:700; font-size:var(--text-body-xs); text-transform:uppercase;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--line); font-size:var(--text-mono-sm);
  font-family:var(--font-body); color:var(--smoke);
}
.footer-bottom a:hover{ color:var(--signal); }
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---- Modal forms (For Talents / For Clients) --------------------------------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.86); z-index:110;
  display:flex; align-items:flex-start; justify-content:center; padding:60px 20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease; overflow-y:auto;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.modal-card{
  position:relative; width:100%; max-width:560px; background:var(--ink);
  border:1px solid var(--signal); border-radius:16px; padding:40px 32px 32px;
  transform:translateY(10px); transition:transform .2s ease;
}
.modal-backdrop.is-open .modal-card{ transform:translateY(0); }
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid var(--line);
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.modal-close:hover{ border-color:var(--signal); color:var(--signal); }
.modal-card h2{
  font-family:var(--font-display); font-size:var(--text-display-lg); line-height:var(--lh-display-lg);
  letter-spacing:.12em; text-transform:uppercase; margin:0 0 6px;
}
.modal-sub{ font-size:var(--text-body-xs); color:var(--smoke); margin:0 0 28px; }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--font-body); font-size:var(--text-mono-sm); letter-spacing:.08em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:8px;
}
.field label .req{ color:var(--signal); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field input[type="url"], .field textarea, .field select{
  width:100%; background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; color:var(--paper); font-family:var(--font-body); font-size:var(--text-body-base);
}
.field textarea{ min-height:96px; resize:vertical; }
/* The select box itself already inherits transparent/dark from the rule
   above, but the browser's native dropdown list (the <option> popup) is
   a separate rendering surface that ignores that and defaults to a white
   background — set explicitly here since it's one of the few <option>
   properties browsers actually respect. */
.field select option{ background:var(--ink); color:var(--paper); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--signal); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* Higher specificity than ".field label" (which sets display:block and was
   silently winning over this rule, since .checkbox-item labels live inside
   a .field) — needs display:flex to actually apply so the checkbox and its
   text line up instead of falling back to inline baseline alignment. */
.field .checkbox-grid .checkbox-item{ display:flex; align-items:center; gap:8px; font-size:var(--text-body-xs); }
.checkbox-item input{ accent-color:var(--signal); width:16px; height:16px; }
.file-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.file-item label{ margin-bottom:6px; }
.file-item input[type="file"]{
  width:100%; font-size:12px; color:var(--smoke); border:1px dashed var(--line);
  border-radius:var(--radius); padding:10px; background:transparent;
}
.form-note{ font-size:11px; color:var(--smoke); margin:18px 0; line-height:1.6; }
.form-note a{ text-decoration:underline; }
.modal-submit{ width:100%; margin-top:6px; }
.form-status{ margin-top:14px; font-size:var(--text-body-xs); color:var(--signal); display:none; }
.form-status.show{ display:block; }

@media (max-width:520px){
  .field-row, .file-row, .checkbox-grid{ grid-template-columns:1fr; }
}

/* ---- About page — Our Story ------------------------------------------------
   Same font system + red-line treatment as the rest of the site: heading in
   the Bebas Neue wordmark treatment (matches FAQ/CTA/On the Stage/Beyond the
   Stage), red section-divider line. Left-aligned at every width per request
   — not the centered-by-default/left-at-1100px pattern used elsewhere. */
.about-story{ padding:110px 24px; }
/* Text + photo grid, gaaga.world-about-page style: single column with the
   photo stacking after the text on small screens (DOM order already reads
   text-then-photo, so no explicit `order` is needed), switching to a real
   two-column row — text left, photo right — at 768px+. No red divider on
   this section any more (removed per request) since the photo is meant to
   bleed toward Our Team below instead of getting cut off by a hard line. */
.story-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
/* Widened from 720px so the block actually uses more of the available
   width at wide "expand" viewports instead of leaving a large empty gap
   to the right — per request. */
.story-inner{ max-width:960px; margin:0; text-align:left; }
.story-photo img{
  display:block; width:100%; max-width:300px; height:auto; margin:0 auto;
  border:1px solid var(--signal); border-radius:var(--radius);
}
/* Two-column (text left, photo right) only kicks in at the site's existing
   "expand" tier (1100px) rather than gaaga's 768px — their text column at
   768px would have squeezed our (longer) paragraph down to an unreadable
   sliver next to a fixed 450px photo, so tablet stays single-column here. */
@media (min-width:761px){
  .story-photo img{ max-width:460px; }
}
@media (min-width:1100px){
  .story-grid{ grid-template-columns:1fr 450px; gap:60px; }
  .story-inner{ max-width:none; }
  .story-photo img{ max-width:450px; margin:0; }
  /* Positioning while expanded is handled precisely by main.js
     (syncStoryPhoto): it resizes the photo to exactly span the first-
     paragraph-to-last-paragraph text, then sets an explicit margin-top on
     .story-photo so the photo's top lands on firstP's own top — plain
     align-items:start/center on the grid can't target "align with this
     one child's text", only the whole (taller) .story-inner block. */
}
.about-story h2{
  font-family:var(--font-display); font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl);
  letter-spacing:.12em; color:var(--signal); text-transform:uppercase; margin:0 0 28px;
}
/* Dropped from the 24px "lead paragraph" size to the smaller body size
   (same scale as FAQ answers/team bios) so that even with all 3 paragraphs
   expanded via "read more", the text column stays shorter than the fixed-
   height photo next to it — keeps the photo the dominant, tallest element
   in both the collapsed and expanded states instead of leaving a gap under
   it once the text grows past the photo's height. */
.about-story p{
  font-size:var(--text-body-md); line-height:var(--lh-body-md); color:var(--paper); margin:0;
}
/* First paragraph is static; the rest sit inside .story-more and only
   show once the down-chevron button is clicked (same accordion/max-height
   technique as the Team bios and FAQ answers), instead of the old
   auto-cycling fade. */
.about-story .story-inner > p{ margin:0 0 20px; }
.story-more{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
/* Every paragraph (including the last) keeps its own 20px bottom margin —
   while collapsed it's invisible inside the zero-height container anyway,
   but once expanded it gives the same breathing room before the arrow
   button as the gap between the first paragraph and the arrow when closed,
   instead of the two paragraphs butting right up against it. */
.story-more p{ margin:0 0 20px; }
.story-arrow{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--signal); border-radius:50%;
  background:transparent; transition:background .2s ease, transform .15s ease;
}
.story-arrow:hover{ background:var(--signal); }
.story-arrow:active{ transform:scale(.92); }
.story-arrow .chevron{
  width:10px; height:10px; border-bottom:2px solid var(--signal); border-right:2px solid var(--signal);
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .25s ease, border-color .2s ease;
}
.story-arrow:hover .chevron{ border-color:var(--paper); }
.story-arrow.is-open .chevron{ transform:rotate(225deg) translate(-1px,-1px); }
/* Decorative doodle — small accent, sits right above the heading (same
   spot the FAQs badge takes above its own heading). Not a focal point. */
.story-doodle{ display:block; width:72px; height:72px; margin:0 0 12px; }

/* ---- About page — Team --------------------------------------------------
   Structure mirrors a reference from gaaga.world's About page (numbered
   steps: big index number left, heading/body/image right) — but as simple
   stacked blocks per member, not gaaga's scroll-crossfade transition.
   Clicking a member's photo toggles their bio in place, same accordion
   technique as the FAQ answers (max-height transition, plus-icon flip). */
.about-team{ padding:110px 24px; border-bottom:1px solid var(--signal); }
/* Icon + "OUR TEAM" — same font/color treatment as the "01" style index
   numbers below (Anton, brand red), left-aligned per request. */
.team-heading{ display:flex; align-items:center; gap:18px; margin:0 0 64px; }
.team-heading-icon{ width:48px; height:48px; flex:0 0 auto; display:block; }
.team-heading h2{
  font-family:var(--font-display); font-size:var(--text-display-2xl); line-height:1;
  letter-spacing:.12em; color:var(--signal); text-transform:uppercase; margin:0;
}
.team-list{ display:flex; flex-direction:column; gap:80px; max-width:960px; margin:0; }
/* Slides in from the left + fades in once each member scrolls into view
   (see the IntersectionObserver in main.js) — fires once, doesn't repeat. */
.team-member{
  display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start;
  opacity:0; transform:translateX(-60px); transition:opacity .6s ease, transform .6s ease;
}
.team-member.is-revealed{ opacity:1; transform:translateX(0); }
.team-number{
  font-family:var(--font-display); font-size:clamp(48px, 6vw + 24px, 96px); line-height:1;
  color:var(--signal); margin:0;
}
.team-content h4{
  font-family:var(--font-wordmark); font-size:var(--text-display-lg); line-height:1;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 10px;
}
.team-role{ font-size:var(--text-body-lg); line-height:var(--lh-body-lg); color:var(--smoke); margin:0 0 24px; }
.team-bio{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.team-bio-label{
  font-family:var(--font-wordmark); font-size:var(--text-display-lg); letter-spacing:.1em;
  text-transform:uppercase; color:var(--signal); margin:0 0 10px;
}
.team-bio p:last-child{ font-size:var(--text-body-md); line-height:var(--lh-body-md); color:var(--paper); margin:0 0 24px; }
.team-photo{
  position:relative; display:block; width:100%; max-width:280px; aspect-ratio:3/4;
  border:1px solid var(--signal); border-radius:var(--radius); overflow:hidden;
  background:none; padding:0; cursor:pointer;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-photo-icon{
  position:absolute; bottom:12px; right:12px; width:36px; height:36px;
  border:1px solid var(--signal); border-radius:50%; background:var(--ink);
}
.team-photo-icon::before, .team-photo-icon::after{
  content:""; position:absolute; background:var(--signal); left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.team-photo-icon::before{ width:14px; height:1.5px; }
.team-photo-icon::after{ width:1.5px; height:14px; transition:opacity .2s ease; }
.team-photo.is-open .team-photo-icon::after{ opacity:0; }
@media (max-width:760px){
  .team-heading-icon{ width:36px; height:36px; }
  .team-member{ grid-template-columns:1fr; gap:16px; }
  .team-number{ font-size:48px; }
  .team-photo{ max-width:220px; }
}

/* ---- About page — Values --------------------------------------------------
   Heading centered (unlike Team's left-aligned icon+heading), same Anton +
   red treatment. Values themselves are plain and static per request — left
   aligned, no scroll/hover effects, no icons or cards. */
.about-values{ padding:110px 24px; border-bottom:1px solid var(--signal); }
.values-heading{
  font-family:var(--font-display); font-size:var(--text-display-2xl); line-height:1;
  letter-spacing:.12em; color:var(--signal); text-transform:uppercase; text-align:center; margin:0 0 64px;
}
.values-list{ display:flex; flex-direction:column; gap:40px; max-width:960px; margin:0 auto; text-align:left; }
/* Left-aligned at the site's "expand" tier (matches the same pattern used
   on the Talent Roster list) — heading text-align and the list's own
   centering margin both drop, so the whole section hugs the left edge
   instead of sitting centered in the middle of the wide container. */
@media (min-width:1100px){
  .values-heading{ text-align:left; }
  .values-list{ margin-left:0; }
}
/* Slides in from the right, replaying every time — unlike Team/Story's
   one-shot reveals, this re-triggers each time a value crosses in or out
   of view in either scroll direction, per request. */
.value-item{ opacity:0; transform:translateX(60px); transition:opacity .6s ease, transform .6s ease; }
.value-item.is-revealed{ opacity:1; transform:translateX(0); }
.value-item h3{
  font-family:var(--font-wordmark); font-size:var(--text-display-lg); line-height:1;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper); margin:0 0 10px;
}
.value-item p{ font-size:var(--text-body-lg); line-height:var(--lh-body-lg); color:var(--smoke); margin:0; }

/* ---- Contact page ---------------------------------------------------------
   Same registered font system as the About page: Anton heading (red,
   .12em), Bebas Neue sub-headings (.1em), Inter body. */
.contact-section{ padding:110px 24px; border-bottom:1px solid var(--signal); }
.contact-section h2{
  font-family:var(--font-display); font-size:var(--text-display-2xl); line-height:1;
  letter-spacing:.12em; color:var(--signal); text-transform:uppercase; margin:0 0 64px;
}
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1100px; margin:0; align-items:start; }
.contact-item{ margin-bottom:32px; }
.contact-item h4{
  font-family:var(--font-wordmark); font-size:var(--text-display-lg); line-height:1;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper); margin:0 0 8px;
}
.contact-item a, .contact-item p{ font-size:var(--text-body-lg); line-height:var(--lh-body-lg); color:var(--smoke); margin:0; }
.contact-item a:hover{ color:var(--signal); }
.contact-form .btn{ margin-top:6px; }
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---- Legal pages (Privacy Policy / Terms & Conditions) --------------------
   Same registered font system as Contact/About: Anton heading (red, .12em),
   Bebas Neue sub-headings (.1em), Inter body. Long-form scrolling text
   rather than an accordion — legal content should be readable in full
   without extra clicks. */
.legal-section{ padding:110px 24px; border-bottom:1px solid var(--signal); }
.legal-section h2{
  font-family:var(--font-display); font-size:var(--text-display-2xl); line-height:1;
  letter-spacing:.12em; color:var(--signal); text-transform:uppercase; margin:0 0 12px;
}
.legal-updated{ font-size:var(--text-body-xs); color:var(--smoke); margin:0 0 32px; }
.legal-notice{
  max-width:760px; margin:0 0 56px; padding:20px 24px; border:1px solid var(--signal); border-radius:var(--radius);
}
.legal-notice p{ font-size:var(--text-body-sm); line-height:var(--lh-body-sm); color:var(--smoke); margin:0; }
.legal-notice strong{ color:var(--paper); }
.legal-body{ max-width:760px; margin:0; }
.legal-body h3{
  font-family:var(--font-wordmark); font-size:var(--text-display-lg); line-height:1.2;
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper); margin:40px 0 14px;
}
.legal-body h3:first-child{ margin-top:0; }
.legal-body p{ font-size:var(--text-body-md); line-height:var(--lh-body-md); color:var(--smoke); margin:0 0 18px; }
.legal-body a{ color:var(--signal); text-decoration:underline; }
.legal-body a:hover{ color:var(--paper); }
.legal-list{ margin:0 0 18px; padding-left:22px; }
.legal-list li{ font-size:var(--text-body-md); line-height:var(--lh-body-md); color:var(--smoke); margin:0 0 10px; }
.legal-list strong{ color:var(--paper); }

/* ---- Talent Roster page ----------------------------------------------------
   Header band: full-bleed solid color block (Gaaga's "Talents we have
   worked with" band, reused for our own "Our Talents" heading) instead of
   the site's usual dark-background badge+heading pattern.
   Photo marquees ("What life looks like during/outside work"): same
   infinite-scroll mechanism as the home page's client logo carousel
   (.marquee/.marquee-track — see "8. Logo carousel" — content duplicated
   in JS for a seamless -50% loop); .talent-marquee-item/-badge/-sep add
   the photo-card-specific look (uniform cropped card, small corner logo
   badge, "×" separator) on top of that shared base. Card list is built in
   JS (buildPhotoMarquee in main.js) rather than hand-typed twice per
   track — 60 during-work + 9 outside-work photos, doubled for the loop,
   would be an unmanageable amount of markup to author by hand. */
.talent-band{ padding:64px 24px; text-align:center; margin-top:32px; border-bottom:1px solid var(--signal); }
.talent-band-heading{
  font-family:var(--font-wordmark); font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl);
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper); margin:0 0 14px;
}
.talent-band-sub{ font-size:var(--text-body-lg); line-height:1.4; color:var(--smoke); max-width:640px; margin:0 auto; }

.talent-life{ padding:80px 0; border-bottom:1px solid var(--signal); }
.talent-life-heading{
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px, 2.4vw + 14px, 40px);
  letter-spacing:.04em; text-transform:uppercase; text-align:center; margin:0 0 40px;
}
.talent-marquee-item{
  position:relative; flex:0 0 auto; width:220px; height:300px; overflow:hidden;
  border:1px solid var(--signal); margin-right:28px;
}
.talent-marquee-item img, .talent-marquee-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.talent-marquee-badge{
  position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.65);
  border-radius:4px; padding:5px 8px; display:flex; align-items:center;
}
.talent-marquee-badge img{ height:16px; width:auto; display:block; }
.talent-marquee-sep{
  flex:0 0 auto; font-family:var(--font-display); font-size:28px; line-height:1;
  color:var(--signal); margin-right:28px;
}
/* Unlike the home page's client-logo carousel, these two don't pause on
   hover — per request, they should scroll continuously with no stopping
   at any point. Same specificity as .marquee:hover's rule (two classes
   each); this wins because it comes later in the cascade. */
.talent-marquee:hover .marquee-track{ animation-play-state:running; }

/* Video now lives in its own section, below the two photo marquees —
   own top+bottom padding and closing border. */
.talent-video-section{ padding:80px 24px; border-bottom:1px solid var(--signal); }
/* Single showcase video, natural aspect ratio (no forced crop) — unlike
   the home page's ambient looping duo videos, this one has real content
   meant to be watched, so it gets native controls instead of autoplay. */
.talent-video-frame{
  max-width:480px; margin:0 auto; border:1px solid var(--signal); border-radius:var(--radius);
  overflow:hidden; background:var(--ash);
}
.talent-video-frame video{ display:block; width:100%; height:auto; }

@media (max-width:760px){
  .talent-band{ padding:48px 24px; margin-top:20px; }
  .talent-life{ padding:56px 0; }
  .talent-life-heading{ margin:0 0 28px; }
  .talent-marquee-item{ width:150px; height:210px; margin-right:18px; }
  .talent-marquee-badge img{ height:12px; }
  .talent-marquee-sep{ font-size:20px; margin-right:18px; }
}