/* ============================================================
   GTMS — GT Media Services
   Premium Metallic system: Onyx black / GTMS Gold / Chrome Silver
   Brand: Gold #D4AF37 · Recording Red #E31B23 · Lato + IBM Plex Mono
   Metallic gradients sampled from GTMS_Premium_Metallic_v02.svg
   ============================================================ */

:root {
  color-scheme: dark;

  --bg: #0a0a0c;            /* page black */
  --bg-2: #101014;          /* raised section */
  --panel: #16161b;         /* cards */
  --line: rgba(255, 255, 255, 0.09);
  --line-gold: rgba(212, 175, 55, 0.38);

  --text: #f2f0eb;          /* warm white */
  --text-2: #b6b3ac;        /* secondary — 9.45:1 on page black */
  --muted: #8a8780;         /* tertiary — 5.03:1 on --panel, the darkest surface it sits on */

  --gold: #d4af37;          /* GTMS Gold */
  --gold-light: #f4c95e;
  --gold-deep: #875008;
  --silver: #c4c9ce;
  --rec: #e31b23;           /* Recording red — REC indicators only */

  /* Full ramp sampled from GTMS_Premium_Metallic_v02.svg.
     DECORATIVE ONLY — the #875008 stop drops to 3:1 on black, so it is
     reserved for large display glyphs, never for text you have to read. */
  --grad-gold: linear-gradient(105deg, #fff2b0 0%, #f4c95e 24%, #d7a334 48%, #c78b1e 62%, #875008 88%, #a97e22 100%);
  /* Same sampled hues, floored at #a97e22 (5.36:1 on black) so metallic
     text and hairlines stay legible along their entire length. */
  --grad-gold-text: linear-gradient(105deg, #fff2b0 0%, #f4c95e 26%, #d7a334 52%, #c78b1e 74%, #a97e22 100%);
  --grad-gold-btn: linear-gradient(165deg, #f4c95e 0%, #d4af37 48%, #a87e1a 100%);
  --grad-silver: linear-gradient(105deg, #f8fafc 0%, #e6e9ec 22%, #c4c9ce 46%, #83888e 72%, #555a60 100%);

  --radius: 14px;
  --radius-sm: 10px;
  --nav-h: 78px;
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(20px, 3.2vw, 32px);

  /* ---- Vertical rhythm: three roles, one system ---- */
  --section-y: clamp(88px, 8.6vw, 124px);      /* standard content section */
  --band-y: clamp(60px, 6.2vw, 88px);          /* thin bands (stats, marquee) */
  --section-y-lg: clamp(104px, 10.4vw, 148px); /* feature moments (quote band) */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s;    /* colour / opacity state changes */
  --t-mid: 0.35s;    /* hover transforms, nav chrome */
  --t-slow: 0.6s;    /* sheens, line draws */
  --t-reveal: 0.85s; /* scroll entrances */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* anchor targets must clear the fixed nav */
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* No overflow-x:hidden here. It masked the directional entrance offsets
     rather than containing them, and it silently computed overflow-y to
     `auto`, making <body> a scroll container — the classic way position:
     sticky breaks later. Each section now clips its own entrance instead. */
}

::selection { background: var(--gold); color: #161616; }
/* gradient-clipped text is painted with a transparent fill — restore it
   on selection so highlighted metallic words don't vanish */
.metallic-gold::selection { background: var(--gold); -webkit-text-fill-color: #161616; color: #161616; }

img, svg, video { max-width: 100%; display: block; }
/* width/height attributes on the logos reserve layout space, but they also
   act as presentational height hints — without this the SVGs render at their
   full intrinsic height. Specific rules (.brand-logo) still override. */
img { height: auto; }

a { color: inherit; text-decoration: none; }

/* no border-radius here — it would alter the focused element's own corners;
   browsers already round the outline to follow the element */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Skip link — first tab stop, visible only when focused */
.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--grad-gold-btn);
  color: #161616;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(calc(-100% - var(--s-5)));
  transition: transform var(--t-mid) var(--ease);
}
/* dark ring — the global gold outline would sit gold-on-gold here */
.skip-link:focus-visible { transform: none; outline: 2px solid #0a0a0c; outline-offset: 2px; }

/* One container. Nav, hero and every section share the same left edge. */
.container,
.nav-inner,
.hero-inner {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Metallic text ---------- */

.metallic-gold {
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-dot { color: var(--gold); }

/* ---------- Type scale ----------
   Tracking tightens as size grows; leading loosens as size shrinks. */

h1, h2, h3 {
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 4.9rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
h1 em { font-style: normal; }

h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.021em;
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.011em;
}

/* Hard line breaks in headlines are a wide-viewport composition decision.
   Below the breakpoint they fight the available measure, so they are removed
   and text-wrap:balance is left to find the break. */
@media (max-width: 720px) {
  .br-lg { display: none; }
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 32em;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-5);
}

.eyebrow::after {
  content: "";
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) 0.4s;
}

/* the gold line draws once the block is revealed */
.reveal.in .eyebrow::after,
.eyebrow.reveal.in::after {
  transform: scaleX(1);
}

/* Gold, static. Recording Red is reserved for genuine REC indicators —
   six pulsing red dots down the page diluted the one signal that matters. */
.eyebrow .tick {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
  flex: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 44px;
  transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.btn .arrow { transition: transform var(--t-mid) var(--ease); }
.btn:hover .arrow,
.btn:focus-visible .arrow { transform: translateX(4px); }

/* press state — every interactive element should acknowledge the click */
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }

.btn-gold {
  background: var(--grad-gold-btn);
  color: #161616;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 24px -8px rgba(212, 175, 55, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* sheen sweep */
.btn-gold::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left var(--t-slow) var(--ease);
}
.btn-gold:hover::after,
.btn-gold:focus-visible::after { left: 125%; }

.btn-gold:hover,
.btn-gold:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px -8px rgba(212, 175, 55, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-ghost {
  border-color: var(--line-gold);
  color: var(--gold);
  background: transparent;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.btn-block { justify-content: center; width: 100%; }

/* ---------- Reveal animations ----------
   --rd is a per-element stagger delay set by js on [data-stagger] children */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease) var(--rd, 0s),
              transform var(--t-reveal) var(--ease) var(--rd, 0s);
}

.reveal { transform: translateY(26px); }
.reveal-left { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }
.reveal-scale { transform: translateY(26px) scale(0.955); }

.reveal.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in { opacity: 1; transform: none; }

.d-1 { transition-delay: 0.08s; }
.d-2 { transition-delay: 0.16s; }
.d-3 { transition-delay: 0.24s; }
.d-4 { transition-delay: 0.32s; }

/* masked line reveal (hero headline)
   The mask box is padded below the line box and pulled back with a negative
   margin — without it, overflow:hidden shears the descenders ("Every"). */
.reveal-lines .hl {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.reveal-lines .hl > * {
  display: block;
  transform: translateY(118%);
  transition: transform 1s var(--ease);
}
.reveal-lines .hl:nth-child(2) > * { transition-delay: 0.1s; }
.reveal-lines .hl:nth-child(3) > * { transition-delay: 0.2s; }
.reveal-lines.in .hl > * { transform: none; }

/* seam marker — gold diamond sitting on section boundaries.
   The hairline is broken by a soft radial fade rather than a flat swatch:
   seams straddle two different section backgrounds, so any opaque halo
   would show as a mismatched patch on one side. */
.seam {
  position: relative;
  height: 0;
  z-index: 5;
}
.seam::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 76px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(4, 4, 5, 0.95), rgba(4, 4, 5, 0));
  pointer-events: none;
}
.seam i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity var(--t-slow) var(--ease);
}
.seam.in i {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  opacity: 1;
}

/* scroll progress — thin gold bar at the very top.
   Uses the legibility-floored ramp so the bar's leading edge never fades
   into the background and under-reads the actual scroll position. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-gold-text);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 120;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .reveal-lines .hl > * { transform: none; }
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* backdrop-filter is deliberately not transitioned: it cannot interpolate
     from `none`, so listing it only costs compositing work for a hard cut. */
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.nav.scrolled {
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; }

.brand-logo {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.nav-links { display: flex; gap: 34px; }

.nav-links a {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-2);
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--grad-gold-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible { color: var(--gold-light); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .btn { padding: 11px 22px; font-size: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  /* 44x44 minimum touch target */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--gold);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.nav-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle.open span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  /* left edge aligns with the nav logo and page content */
  padding: calc(var(--nav-h) + var(--s-6)) var(--gutter) var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s var(--ease), visibility 0s;
}

.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: clamp(1.75rem, 7.5vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease);
}
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible { color: var(--gold-light); }
.mobile-menu nav a .mono { color: var(--gold); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(48px, 5.6vw, 80px)) 0 var(--section-y);
  overflow: hidden;
}

/* ambient gold light */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 76% 12%, rgba(212, 175, 55, 0.11), transparent 65%),
    radial-gradient(40% 34% at 12% 82%, rgba(131, 136, 142, 0.08), transparent 70%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.hero-copy h1 { margin-bottom: var(--s-6); }
.hero-copy .lede { margin-bottom: var(--s-6); }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  list-style: none;
  color: var(--muted);
}
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.hero-meta li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
}

/* ---------- Viewfinder ---------- */

.viewfinder { position: relative; }

.vf-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0d0d10;
  border: 1px solid var(--line);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 60px -20px rgba(212, 175, 55, 0.18);
}

.vf-scene {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(212, 175, 55, 0.26), transparent 55%),
    radial-gradient(100% 100% at 15% 85%, rgba(90, 100, 115, 0.42), transparent 60%),
    linear-gradient(160deg, #202027 0%, #0d0d10 60%, #17161c 100%);
  background-size: 160% 160%;
  animation: scenePan 16s ease-in-out infinite alternate;
}

@keyframes scenePan {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

.vf-grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
  opacity: 0.34;
  pointer-events: none;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-4%, 3%); }
  50%  { transform: translate(3%, -4%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(4%, 3%); }
}

/* GT symbol watermark inside the frame */
.vf-watermark {
  position: absolute;
  top: 50%; left: 50%;
  width: 34%;
  transform: translate(-50%, -50%);
  opacity: 0.14;
  pointer-events: none;
}

.vf-chrome {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.92);
}

.vf-row {
  position: absolute;
  left: 20px; right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vf-top { top: 18px; }
.vf-bottom { bottom: 18px; }

.rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.18em;
}
.rec i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 8px rgba(227, 27, 35, 0.7);
  animation: blink 1.2s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.15; } }

.tc { letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }

.vf-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.vf-corner.tl { top: 52px; left: 20px; border-right: 0; border-bottom: 0; }
.vf-corner.tr { top: 52px; right: 20px; border-left: 0; border-bottom: 0; }
.vf-corner.bl { bottom: 56px; left: 20px; border-right: 0; border-top: 0; }
.vf-corner.br { bottom: 56px; right: 20px; border-left: 0; border-top: 0; }

.vf-focus {
  position: absolute;
  top: 50%; left: 50%;
  width: 68px; height: 68px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  animation: focusHunt 5s var(--ease) infinite;
}
.vf-focus span {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0.9;
}
@keyframes focusHunt {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  45%      { transform: translate(-50%, -50%) scale(1.14); opacity: 0.5; }
  60%      { transform: translate(-50%, -50%) scale(0.98); opacity: 1; }
}

.vf-audio {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.vf-audio i {
  width: 3px;
  background: linear-gradient(to top, var(--gold-deep), var(--gold) 55%, var(--gold-light));
  border-radius: 2px;
  animation: meter 1.1s ease-in-out infinite alternate;
  height: 30%;
}
.vf-audio i:nth-child(2n)  { animation-delay: 0.12s; height: 55%; }
.vf-audio i:nth-child(3n)  { animation-delay: 0.24s; height: 80%; }
.vf-audio i:nth-child(4n)  { animation-delay: 0.36s; height: 40%; }
.vf-audio i:nth-child(5n)  { animation-delay: 0.48s; height: 65%; }
@keyframes meter {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}

.vf-specs { letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); }

.viewfinder figcaption {
  margin-top: var(--s-4);
  color: var(--muted);
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* Looping "footage" panels stop animating once they leave the viewport —
   these are continuous background-position repaints, not composited layers. */
.fx-idle .vf-scene,
.fx-idle .vf-grain,
.fx-idle .vf-focus,
.fx-idle .vf-audio i,
.fx-idle .rec i,
.fx-idle .rec-mini,
.fx-idle .sync-still,
.fx-idle .sync-lines span::after,
.fx-idle .cam,
.fx-idle .cam::after,
.fx-idle .marquee-track { animation-play-state: paused; }

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding: 20px 0;
  background: var(--bg);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-track span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}

.marquee-track i {
  font-style: normal;
  color: var(--gold);
  font-size: 0.55em;
  margin: 0 28px;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================
   STATS
   ============================================================ */

.stats { padding: var(--band-y) 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
}

.stat {
  position: relative;
  padding-top: var(--s-5);
}

/* gold rule draws in as each stat reveals */
.stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold), rgba(212, 175, 55, 0.06));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) calc(var(--rd, 0s) + 0.15s);
}
.stat.in::before { transform: scaleX(1); }

.stat-num {
  display: block;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}

.stat-label { color: var(--muted); line-height: 1.4; }

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  background: var(--bg-2);
  padding: var(--section-y) 0;
  border-block: 1px solid var(--line);
}

.section-head { margin-bottom: var(--s-8); }

.service-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 72px 1fr auto 40px;
  align-items: center;
  gap: var(--s-6);
  padding: 30px var(--s-5);
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              opacity var(--t-reveal) var(--ease) var(--rd, 0s),
              transform var(--t-reveal) var(--ease) var(--rd, 0s);
}

/* keyboard focus gets the identical treatment, not just the outline */
.service-row:hover,
.service-row:focus-visible { background: var(--panel); padding-left: 34px; }

.s-num {
  color: var(--muted);
  font-size: 14px;
  transition: color var(--t-fast) var(--ease);
}
.service-row:hover .s-num,
.service-row:focus-visible .s-num { color: var(--gold); }

.s-body h3 { margin-bottom: var(--s-2); }
/* 46em ≈ 63 characters per line — inside the 45–75 comfortable measure band */
.s-body p { color: var(--text-2); max-width: 46em; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.s-tags { display: flex; gap: var(--s-2); }
.s-tags span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.service-row:hover .s-tags span,
.service-row:focus-visible .s-tags span { border-color: var(--line-gold); color: var(--gold-light); }

.s-arrow {
  font-size: 22px;
  color: var(--muted);
  transition: transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.service-row:hover .s-arrow,
.service-row:focus-visible .s-arrow {
  transform: translateX(6px);
  color: var(--gold);
}

/* ============================================================
   SPLITS
   ============================================================ */

.split {
  padding: var(--section-y) 0;
  /* .reveal-left / .reveal-right start ±48px off their final position, which
     exceeds the gutter and pushes past the viewport while the section is
     still below the fold. Contain it here, at the element that causes it.
     Two declarations: older engines take `hidden`, modern ones take `clip`,
     which clips without creating a scroll container or forcing overflow-y. */
  overflow-x: hidden;
  overflow-x: clip;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.split-copy h2 { margin-bottom: var(--s-5); }
/* :not(.eyebrow) — this rule used to out-specify .eyebrow and render the
   split eyebrows grey/light instead of gold/medium like every other one */
.split-copy > p:not(.eyebrow) {
  color: var(--text-2);
  margin-bottom: var(--s-6);
  max-width: 36em;
  line-height: 1.6;
  text-wrap: pretty;
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.checklist li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-weight: 400;
  line-height: 1.5;
}
.checklist li::before {
  content: "→";
  color: var(--gold);
  flex: none;
  font-weight: 700;
}

/* ---------- Sync panel ---------- */

.sync-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 0.9),
    0 0 50px -25px rgba(212, 175, 55, 0.16);
}

.sync-video {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0d0d10;
}

.sync-still {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 90% at 70% 25%, rgba(212, 175, 55, 0.24), transparent 55%),
    radial-gradient(110% 110% at 20% 80%, rgba(90, 100, 115, 0.4), transparent 60%),
    linear-gradient(150deg, #23222a, #0f0e13);
  background-size: 150% 150%;
  animation: scenePan 14s ease-in-out infinite alternate;
}

.sync-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(transparent, rgba(5, 5, 7, 0.88));
  font-size: 11px;
}

.rec-mini {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 6px rgba(227, 27, 35, 0.7);
  animation: blink 1.2s steps(2) infinite;
}

.sync-tc { margin-left: auto; font-variant-numeric: tabular-nums; }

.sync-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sync-lines span {
  display: block;
  height: 10px;
  width: var(--w, 80%);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.sync-lines span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: var(--grad-gold-btn);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

/* one line at a time "reads" as the video plays */
.sync-lines span:nth-child(1)::after { animation: readline 9s linear infinite 0s; }
.sync-lines span:nth-child(2)::after { animation: readline 9s linear infinite 1.5s; }
.sync-lines span:nth-child(3)::after { animation: readline 9s linear infinite 3s; }
.sync-lines span:nth-child(4)::after { animation: readline 9s linear infinite 4.5s; }
.sync-lines span:nth-child(5)::after { animation: readline 9s linear infinite 6s; }
.sync-lines span:nth-child(6)::after { animation: readline 9s linear infinite 7.5s; }

@keyframes readline {
  0%     { transform: scaleX(0); opacity: 0.9; }
  14%    { transform: scaleX(1); opacity: 0.9; }
  16.5%  { transform: scaleX(1); opacity: 0; }
  100%   { transform: scaleX(0); opacity: 0; }
}

/* ---------- Multicam panel ---------- */

.split-alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.multicam {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cam {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(100% 100% at 70% 20%, hsla(var(--tint, 46), 34%, 48%, 0.32), transparent 60%),
    linear-gradient(150deg, #1f1e25, #0e0d12);
  background-size: 150% 150%;
  animation: scenePan 12s ease-in-out infinite alternate;
}

.cam:nth-child(2) { animation-delay: -3s; }
.cam:nth-child(3) { animation-delay: -6s; }
.cam:nth-child(4) { animation-delay: -9s; }

/* program-out highlight cycles through the grid */
.cam::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 22px -8px rgba(212, 175, 55, 0.5);
  opacity: 0;
}
.cam:nth-child(1)::after { animation: liveCam 8s steps(1) infinite; }
.cam:nth-child(2)::after { animation: liveCam 8s steps(1) infinite 2s; }
.cam:nth-child(3)::after { animation: liveCam 8s steps(1) infinite 4s; }
.cam:nth-child(4)::after { animation: liveCam 8s steps(1) infinite 6s; }

@keyframes liveCam {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

.cam-label {
  position: absolute;
  left: 12px; bottom: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
}

/* ============================================================
   PROCESS
   ============================================================ */

.process { padding: var(--section-y) 0; }

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.step {
  position: relative;
  padding-top: var(--s-5);
  transition: opacity var(--t-reveal) var(--ease) var(--rd, 0s),
              transform var(--t-reveal) var(--ease) var(--rd, 0s);
}

.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold), rgba(212, 175, 55, 0.06));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) calc(var(--rd, 0s) + 0.15s);
}
.step.in::before { transform: scaleX(1); }

/* No hover lift here: a step is not clickable, and a card that moves under
   the cursor promises an interaction that doesn't exist. */
.step-num {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--s-7);
  line-height: 1.4;
}

.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--text-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

/* ============================================================
   QUOTE BAND
   ============================================================ */

.quote-band {
  position: relative;
  background: #070708;
  border-block: 1px solid var(--line);
  padding: var(--section-y-lg) 0;
  overflow: hidden;
}

.quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 60% at 30% 0%, rgba(212, 175, 55, 0.09), transparent 70%);
}

.bigquote { position: relative; }

.bigquote blockquote {
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: 24em;
  /* pretty, not balance: balance is capped at a handful of lines and this
     quote runs to eight on a phone */
  text-wrap: pretty;
  color: var(--text);
}

.bigquote blockquote::before {
  content: "“";
  display: block;
  font-weight: 900;
  font-size: 1.8em;
  line-height: 0.6;
  margin-bottom: 26px;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(16px) scale(0.6);
  transform-origin: left bottom;
  transition: opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s;
}
.bigquote.in blockquote::before {
  opacity: 1;
  transform: none;
}

.bigquote figcaption {
  margin-top: var(--s-6);
  color: var(--gold);
  letter-spacing: 0.22em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease) 0.45s, transform 0.8s var(--ease) 0.45s;
}
.bigquote.in figcaption {
  opacity: 1;
  transform: none;
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact { padding: var(--section-y) 0; }

/* minmax(0, 1fr) throughout: a bare 1fr track has min-width:auto, so any
   item with a large min-content size (long option text, an unbreakable
   token) silently pushes the grid wider than its container. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}

.contact-copy h2 { margin-bottom: var(--s-5); }
.contact-copy .lede { margin-bottom: var(--s-7); }

.contact-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.contact-details li {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-3) 0;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.contact-details li > span:first-child {
  color: var(--muted);
  width: 64px;
  flex: none;
}

.contact-details a {
  padding: var(--s-2) 0;
  transition: color var(--t-fast) var(--ease);
}
.contact-details a:hover,
.contact-details a:focus-visible { color: var(--gold-light); }

.contact-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > span { color: var(--muted); }
.field .req { color: var(--gold); margin-left: 5px; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  padding: 12px 2px;
  min-height: 44px;
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  resize: vertical;
}

.field select {
  /* A select's intrinsic width is its widest option ("Video-Transcript
     Synchronization"), which refuses to shrink and blew the grid track past
     the container below ~340px. min-width:0 lets it track the column. */
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  /* native arrow is unreliable on a transparent dark field — draw our own */
  appearance: none;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field select option { background: var(--panel); color: var(--text); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-bottom-color: rgba(255, 255, 255, 0.24); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
  background-color: rgba(212, 175, 55, 0.04);
}

/* the :focus rule above out-specifies the global ring, so restore a real
   one for keyboard users while pointer users keep the quiet underline */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--gold); }

.form-legend {
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: none;
  margin-top: calc(var(--s-2) * -1);
}

.form-note {
  color: var(--gold);
  min-height: 1.4em;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: none;
}
.form-note:empty { min-height: 0; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: #070708;
  border-top: 1px solid var(--line);
  padding: var(--band-y) 0 var(--s-6);
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-9);
}

.footer-tag { color: var(--gold); letter-spacing: 0.22em; line-height: 1.5; }

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
}

.footer-col > span {
  color: var(--muted);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}

.footer-col a {
  color: var(--text-2);
  font-size: 15px;
  /* padded to a comfortable touch target without loosening the column rhythm */
  padding: 7px 0;
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--gold-light); }

.footer-logo {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.footer-logo::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(680px, 90%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(212, 175, 55, 0.10), transparent 70%);
  pointer-events: none;
}

.footer-logo img {
  width: min(400px, 74vw);
  position: relative;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.7));
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  border-top: 1px solid var(--line);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  color: var(--muted);
  line-height: 1.5;
}

.footer-legal a {
  padding: 10px 0;
  transition: color var(--t-fast) var(--ease);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--gold-light); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* stacked hero: the media spans the full container rather than sitting
     left-aligned with a ragged gap, and drops to a true 16:9 video frame */
  .vf-frame { aspect-ratio: 16 / 9; }
  /* ...but only while the frame stays tall enough for its own chrome.
     Below this the focus reticle collides with the corner brackets. */
  @media (max-width: 560px) {
    .vf-frame { aspect-ratio: 4 / 3; }
  }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); }
  .split-grid { grid-template-columns: minmax(0, 1fr); }
  /* Reverse the second split to media-above-copy WITHOUT leaving grid mode.
     The previous `display:flex; flex-direction:column-reverse` silently
     reinterpreted the inherited `align-items:center` from the block axis to
     the cross axis — which in a flex column is horizontal — so the media
     child shrink-wrapped instead of stretching. `.cam-label` is absolutely
     positioned and contributes no min-content width, so the multicam panel
     had no floor to fall back on and collapsed to 20x18px on every viewport
     at or below 1020px. Reordering keeps `justify-items: stretch` in force. */
  .split-alt .split-media { order: -1; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the tags are credibility content, not decoration — reflow them under the
     description rather than dropping them from small screens entirely */
  .service-row {
    grid-template-columns: 48px 1fr 32px;
    grid-template-areas:
      "num body arrow"
      ".   tags .";
    row-gap: var(--s-4);
  }
  .s-num { grid-area: num; }
  .s-body { grid-area: body; }
  .s-tags { grid-area: tags; flex-wrap: wrap; }
  .s-arrow { grid-area: arrow; }
}

/* Nav collapses at 900px, not 720px. Between 721–780px the desktop nav had
   zero slack and the CTA label would clip inside its overflow:hidden pill. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* Below this the logo + CTA + toggle no longer fit on one line. */
@media (max-width: 540px) {
  .nav-actions .btn { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .brand-logo { height: 32px; }
  .hero { padding-top: calc(var(--nav-h) + var(--s-7)); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .steps { grid-template-columns: 1fr; gap: var(--s-7); }
  .step-num { margin-bottom: var(--s-5); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .service-row { gap: var(--s-4); padding: var(--s-5) var(--s-2); }
  .service-row:hover,
  .service-row:focus-visible { padding-left: var(--s-2); }
  .footer-logo img { width: min(320px, 82vw); }
  .eyebrow { letter-spacing: 0.22em; }
  .eyebrow::after { display: none; }
  .contact-details li { flex-wrap: wrap; gap: 2px var(--s-5); }
  .contact-details li > span:first-child { width: 100%; }
}

@media (max-width: 540px) {
  /* full-bleed CTAs read as decisive; two ragged pills do not */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .footer-legal { justify-content: flex-start; gap: 0 var(--s-6); }
  /* the track covers the same distance across a much narrower viewport,
     so the same duration reads as roughly three times faster on a phone */
  .marquee-track { animation-duration: 48s; }
}