/* ==========================================================================
   HookMasters · site.css
   Dark navy stage, mint accent, Instrument Sans. Phone-first.
   ========================================================================== */

:root {
  --bg: oklch(15% 0.04 275);
  --surface: oklch(20% 0.06 272);
  --surface-2: oklch(25% 0.07 272);
  --line: oklch(100% 0 0 / 0.1);
  --line-strong: oklch(100% 0 0 / 0.2);
  --ink: oklch(97% 0.01 275);
  --ink-2: oklch(97% 0.01 275 / 0.74);
  --muted: oklch(97% 0.01 275 / 0.52);
  --accent: oklch(92% 0.13 190);
  --accent-ink: oklch(20% 0.05 200);

  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(20px, 4vw, 64px);
  --section: clamp(96px, 12vw, 176px);
  --max: 1280px;

  --z-nav: 50;
  --z-menu: 60;
  --z-preload: 80;
}

@supports not (color: oklch(0% 0 0)) {
  :root {
    --bg: #070b1f;
    --surface: #0c1233;
    --surface-2: #131b45;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.2);
    --ink: #f4f6ff;
    --ink-2: rgba(244, 246, 255, 0.74);
    --muted: rgba(244, 246, 255, 0.52);
    --accent: #5efeee;
    --accent-ink: #001b1a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute has to beat any component rule that also sets display. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px;
  padding: 10px 14px; background: var(--accent); color: var(--accent-ink);
  border-radius: 6px; font-weight: 600; z-index: 100;
}
.skip:focus { top: 16px; }

.kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}

.h-italic { font-style: italic; font-weight: 400; }

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 6px; border: 1px solid transparent;
  font-size: 0.9375rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: oklch(95% 0.11 190); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: oklch(0% 0 0 / 0.15); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 11px 18px; font-size: 0.875rem; }
.btn-lg { padding: 18px 34px; font-size: 1.0625rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: oklch(from var(--surface) l c h / 0.88);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@supports not (color: oklch(from red l c h)) {
  .nav.is-scrolled { background: rgba(12, 18, 51, 0.9); }
}
.nav-inner {
  width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto;
  height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav-logo img { width: 156px; height: auto; }
.nav-links { display: flex; gap: 32px; justify-self: center; }
.nav-links a {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); transition: color 0.25s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 0;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px var(--gutter) 24px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.mobile-menu a:not(.btn) { padding: 12px 0; font-size: 1.25rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 16px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--bg);
}
.hero-media {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--lanes, 4), 1fr); gap: 2px;
  background: var(--bg);
}
.hero-tile { position: relative; overflow: hidden; }
/* Each tile is a vertical conveyor: the current ad sits at 0, the next waits below and pushes it out the top. */
.lane-item { position: absolute; inset: 0; margin: 0; will-change: transform; transform-origin: 0 0; }
.lane-item.is-next { transform: translateY(100%); }
.lane-item.is-moving { transition: transform 1.6s var(--ease); }
.lane-item.is-leaving { transform: translateY(-100%); }
.lane-item.is-next.is-moving { transform: translateY(0); }
.lane-item video, .lane-item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: slowZoom 20s ease-in-out infinite alternate;
}
.hero-tile:nth-child(2) video { animation-direction: alternate-reverse; animation-delay: -6s; }
.hero-tile:nth-child(3) video { animation-delay: -12s; }
.hero-tile:nth-child(4) video { animation-direction: alternate-reverse; animation-delay: -3s; }
.hero-tile:nth-child(5) video { animation-delay: -9s; }
.hero-tile:nth-child(6) video { animation-direction: alternate-reverse; animation-delay: -15s; }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, oklch(from var(--bg) l c h / 0.98) 0%, oklch(from var(--bg) l c h / 0.55) 42%, oklch(from var(--bg) l c h / 0.15) 100%),
    linear-gradient(to right, oklch(from var(--bg) l c h / 0.92) 0%, oklch(from var(--bg) l c h / 0.78) 34%, oklch(from var(--bg) l c h / 0.3) 62%, oklch(from var(--bg) l c h / 0.12) 100%);
}
@supports not (color: oklch(from red l c h)) {
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(7, 11, 31, 0.98) 0%, rgba(7, 11, 31, 0.55) 42%, rgba(7, 11, 31, 0.15) 100%),
      linear-gradient(to right, rgba(7, 11, 31, 0.92) 0%, rgba(7, 11, 31, 0.78) 34%, rgba(7, 11, 31, 0.3) 62%, rgba(7, 11, 31, 0.12) 100%);
  }
}

.hero-inner > * { animation: heroIn 1.1s var(--ease) both; }
.hero-inner > :nth-child(1) { animation-delay: 0.15s; }
.hero-inner > :nth-child(2) { animation-delay: 0.23s; }
.hero-inner > :nth-child(3) { animation-delay: 0.31s; }
.hero-inner > :nth-child(4) { animation-delay: 0.39s; }
.hero-inner > :nth-child(5) { animation-delay: 0.47s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero-inner {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto;
  padding: 120px 0 clamp(48px, 8vh, 96px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 100%;
}
.hero h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.04;
  max-width: 12ch;
}
.hero-tagline {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 6px;
}
.hero-desc { max-width: 52ch; color: var(--ink-2); font-size: 1.125rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-meta { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- Work wall ----------
   Each tile is a poster image with a muted loop that loads only while the tile
   is near the viewport, capped by a concurrency budget in site.js. */
.wall { position: relative; padding: 12px 12px 0; overflow: hidden; }
.wall-grid { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 12px; align-items: start; }
.wall-col { display: flex; flex-direction: column; will-change: transform; }
/* The track is what shifts up by one card when its lane advances; the column keeps its parallax. */
.wall-track { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.wall-track.is-moving { transition: transform 1.6s var(--ease); }

/* Work-grid tile: the tile itself is the media box, so the wall stays edge to edge. */
.wall-tile {
  position: relative; margin: 0; width: 100%; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden; background: var(--surface);
}
.wall-tile img, .wall-tile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.wall-tile video { opacity: 0; transition: opacity 0.5s var(--ease); }
.wall-tile.is-playing video { opacity: 1; }

/* AI-showcase tile: the same media box with a two-line caption under it. */
.reel-track .wall-tile {
  aspect-ratio: auto; border-radius: 0; overflow: visible; background: none;
  display: flex; flex-direction: column; gap: 10px;
}
.tile-media {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden; background: var(--surface);
}
.tile-cap { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; font-size: 0.8125rem; line-height: 1.35; }
.tile-cap b { font-weight: 600; color: var(--ink); }
.tile-cap span { color: var(--muted); font-variant-numeric: tabular-nums; }
/* The poster stays underneath, so a failed or unloaded video never shows a gap. */

/* The columns drift vertically, so at any moment some of them hang below the section's
   own box. The fade therefore has to reach past that box and be fully opaque before it
   gets there, otherwise the lowest tiles end on a hard bright line. */
.wall-fade {
  position: absolute; left: 0; right: 0; bottom: -150px; height: calc(24% + 150px); pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 72%, var(--bg) 100%);
}

/* ---------- Results ---------- */
.proof { padding: var(--section) 0 0; }
.proof h2 { max-width: 20ch; }
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.case {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.case-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; padding: 40px; }
.case-body { display: flex; flex-direction: column; gap: 14px; }
.case h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.case p { color: var(--ink-2); max-width: 58ch; }
.checks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.checks li { position: relative; padding-left: 28px; color: var(--ink-2); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.case-media { margin: 0; }
.case-media img { border-radius: 8px; background: #fff; width: 100%; }
.case-media figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

/* ---------- Brands ---------- */
/* The logo strip is a caption between the grid and the film, not a section in its
   own right, so it sits close to both. */
/* The grid's bottom fade reaches below its own box to catch the drifting columns, and a
   positioned section paints over the one after it, so the logo strip is lifted above it.
   It is a caption between the grid and the film, not a section in its own right. */
.brands { position: relative; z-index: 1; padding: calc(var(--section) * 0.22) 0 calc(var(--section) * 0.28); }
.brands h2 { text-align: center; }
/* Logos sit straight on the navy: no tiles, white marks, grow on hover, link out. */
.logo-grid {
  margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px;
}
.logo-grid li { position: relative; flex: 0 0 20%; aspect-ratio: 3 / 1; }
.logo-grid a, .logo-grid span {
  position: absolute; inset: 0; display: block; border-radius: 10px;
  transition: background-color 0.3s var(--ease);
}
.logo-grid a:hover, .logo-grid a:focus-visible { background: oklch(100% 0 0 / 0.045); }
.logo-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Absolutely positioned so the percentage caps resolve against the cell, keeping every row the same height. */
.logo-grid img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 60%; max-height: 52%; object-fit: contain;
  filter: invert(1); opacity: 0.6; will-change: transform;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.logo-grid a:hover img, .logo-grid a:focus-visible img { transform: scale(1.18); opacity: 1; }

/* ---------- FAQ ---------- */
.faq { padding: 0 0 var(--section); }
.faq-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-aside { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.faq-aside p { color: var(--ink-2); max-width: 28ch; }

.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; font-weight: 400; font-size: 1.1rem; color: var(--ink-2);
  transition: transform 0.35s var(--ease), background-color 0.25s var(--ease);
}
.faq-list details[open] summary::after { content: "−"; background: var(--surface-2); }
/* Eased open and close where the browser supports it; a snap everywhere else. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    height: 0; overflow: clip;
    transition: height 0.42s var(--ease), content-visibility 0.42s allow-discrete;
  }
  .faq-list details[open]::details-content { height: auto; }
}
.faq-body { padding: 0 0 28px; color: var(--ink-2); max-width: 62ch; }
.faq-body p + .bars { margin-top: 20px; }
.bars li { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.9375rem; }
.bars i { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--accent); border-radius: 4px; }
.bars li:first-child { color: var(--ink); font-weight: 600; }
.bars b { font-weight: 500; text-align: right; }

/* ---------- CTA ---------- */
/* The last fold is the peak-end moment, so the work itself sits behind it: a wall of
   ad frames, dimmed and masked away from the centre so the type stays the subject. */
.cta { position: relative; overflow: hidden; padding: calc(var(--section) * 1.15) 0; border-top: 1px solid var(--line); }
.cta-wall {
  position: absolute; inset: -12% -3%; display: flex; gap: 10px; justify-content: center;
  pointer-events: none; opacity: 0.15;
  /* Radial clears the centre for the type; the linear dissolves the top and bottom edges
     so the wall reads as depth behind the page rather than a cropped collage. */
  -webkit-mask-image: radial-gradient(96% 62% at 50% 50%, transparent 26%, #000 88%), linear-gradient(#0000, #000 22%, #000 78%, #0000);
  mask-image: radial-gradient(96% 62% at 50% 50%, transparent 26%, #000 88%), linear-gradient(#0000, #000 22%, #000 78%, #0000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.cta-wall span { flex: 1 1 0; min-width: 0; border-radius: 10px; overflow: hidden; }
.cta-wall span:nth-child(even) { transform: translateY(-3%); }
.cta-wall img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.28) blur(3px); }
.cta-inner { position: relative; }
.cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta h2 { font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cta p { color: var(--ink-2); max-width: 46ch; font-size: 1.125rem; }
.cta .btn { margin-top: 12px; }
.cta .btn-primary { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.25s var(--ease); }
.cta .btn-primary:hover { transform: translateY(-2px); }

/* ---------- Footer ---------- */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding: 72px 0 32px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-brand img { width: 168px; height: auto; margin-bottom: 20px; }
.footer-brand p { color: var(--ink-2); font-size: 0.9375rem; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col a:not(.btn) { color: var(--ink-2); transition: color 0.25s var(--ease); }
.footer-col a:not(.btn):hover { color: var(--ink); }
.footer-label { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.footer-person { display: flex; align-items: center; gap: 14px; }
.footer-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; }
.footer-person div { display: flex; flex-direction: column; line-height: 1.35; }
.footer-person span { color: var(--muted); font-size: 0.9375rem; }
.footer-contact .btn { align-self: flex-start; margin-top: 8px; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px;
  font-size: 0.875rem; color: var(--muted);
}
.footer-bottom div { display: flex; gap: 24px; }

/* One word in the headline gets a mint rule drawn under it once the curtain lifts.
   Drawn is the resting state, so with motion off the underline is simply there. */
.draw { position: relative; white-space: nowrap; }
.draw::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em;
  height: 0.075em; min-height: 3px; border-radius: 999px;
  background: var(--accent); transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .draw::after { animation: draw-under 0.8s var(--ease) 1.2s backwards; }
}
@keyframes draw-under { from { transform: scaleX(0); } }

/* ---------- Who you'll work with ----------
   A masthead rather than a card grid: this is a credit, not a pitch, so it stays
   one band tall and lets the names carry it. */
.team { padding: calc(var(--section) * 0.62) 0 calc(var(--section) * 0.5); }
.team h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
/* ---------- Load curtain ----------
   The first screen is video, so opening the page mid-load looks broken rather than
   fast. The curtain holds until the hero's media is ready, then gets out of the way. */
.preload {
  position: fixed; inset: 0; z-index: var(--z-preload); background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
  /* Failsafe: clears itself even if the script never runs, so the page is never trapped. */
  animation: preload-clear 0s 7s forwards;
}
.preload.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* The mark leaves just ahead of the veil, so the opening resolves rather than blinking out. */
.preload-inner { transition: opacity 0.34s var(--ease), transform 0.44s var(--ease); }
.preload.is-done .preload-inner { opacity: 0; transform: translateY(-10px); }
@keyframes preload-clear { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preload-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.preload-inner img { width: 172px; height: auto; }
.preload-bar { display: block; width: 172px; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.preload-bar i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(var(--p, 0.04)); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
html.is-loading, html.is-loading body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .preload, .preload-bar i { transition: none; }
}

/* ---------- Reveals ----------
   The page ships visible. Script marks only what is still below the fold, so nothing
   the reader has already seen can be hidden and re-shown. No motion, no marking. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate(var(--reveal-x, 0px), var(--reveal-y, 16px));
    transition: opacity 0.7s var(--ease) var(--reveal-d, 0s), transform 0.7s var(--ease) var(--reveal-d, 0s);
    will-change: opacity, transform;
  }
  .reveal.is-in { opacity: 1; transform: none; will-change: auto; }
  /* The rules under "What we make" draw themselves alongside the row they belong to. */
  /* The panel's small charts draw themselves as their row arrives. */
  .readout-row.reveal .bar-split i, .readout-row.reveal .pair i { transform: scaleX(0); transition: transform 0.8s var(--ease) calc(var(--reveal-d, 0s) + 0.1s); }
  .readout-row.reveal.is-in .bar-split i, .readout-row.reveal.is-in .pair i { transform: scaleX(1); }
  .readout-row.reveal .spark-line { stroke-dashoffset: 160; transition: stroke-dashoffset 0.9s var(--ease) calc(var(--reveal-d, 0s) + 0.1s); }
  .readout-row.reveal.is-in .spark-line { stroke-dashoffset: 0; }
  .readout-row.reveal .spark-dot, .readout-row.reveal .venn-lens { opacity: 0; transition: opacity 0.5s var(--ease) calc(var(--reveal-d, 0s) + 0.55s); }
  .readout-row.reveal.is-in .spark-dot { opacity: 1; }
  .readout-row.reveal.is-in .venn-lens { opacity: 0.9; }
  .steps > li.reveal::before { transform: translateX(-50%) scaleY(0); transition: transform 0.8s var(--ease) 0.14s; }
  .steps > li.reveal.is-in::before { transform: translateX(-50%) scaleY(1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  /* The five parallax columns collapse into a reflowing multi-column layout,
     so narrowing the window never drops ads off the page. */
  .wall-grid { display: block; columns: 3; column-gap: 10px; }
  .wall-col, .wall-track { display: contents; }
  .wall-tile { break-inside: avoid; margin-bottom: 10px; }
}

@media (max-width: 1023px) {
  .logo-grid li { flex-basis: calc((100% - 6px) / 4); }
  .faq-inner { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: 1fr auto; height: 68px; }
  .nav-logo img { width: 132px; }
  .nav-toggle { display: flex; }
  .nav-right .btn { display: none; }
  .hero-media { grid-template-columns: 1fr; }
  .hero-tile:not(:first-child) { display: none; }
  .hero-scrim {
    background: linear-gradient(to top, oklch(from var(--bg) l c h / 0.98) 0%, oklch(from var(--bg) l c h / 0.86) 42%, oklch(from var(--bg) l c h / 0.45) 68%, oklch(from var(--bg) l c h / 0.2) 88%, oklch(from var(--bg) l c h / 0.35) 100%);
  }
  .hero-tagline { font-size: 0.7rem; letter-spacing: 0.12em; }
  .hero-inner { padding-top: 96px; gap: 14px; }
  .hero h1 { max-width: none; }
  .hero-desc { font-size: 1.0625rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .wall { padding: 8px 8px 0; }
  .wall-grid { columns: 2; column-gap: 8px; }
  .wall-tile { margin-bottom: 8px; }
  .proof-grid { grid-template-columns: 1fr; }
  .case-wide { grid-template-columns: 1fr; padding: 28px; }
  .case { padding: 28px; }
  .logo-grid li { flex-basis: calc((100% - 4px) / 3); }
  .brands-line { flex-direction: column; align-items: center; gap: 8px; }
  .brands-line span { border: 0; padding: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 520px) {
  .logo-grid li { flex-basis: calc((100% - 2px) / 2); }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.25rem); }
}

@media (max-width: 860px) {
  .mobile-menu { display: flex; }
}
@media (min-width: 861px) {
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-tile video, .hero-tile img, .lane-item video { animation: none; }
  .lane-item.is-moving, .wall-track.is-moving { transition: none; }
  .hero-inner > * { animation: none; }
  .logo-grid img, .logo-grid a { transition: none; }
  .logo-grid a:hover img { transform: none; }
  .btn, .nav-links a, .footer-col a { transition: none; }
}


/* ==========================================================================
   Case studies · /work grid and /work/<slug> pages
   ========================================================================== */
.proof-more { margin-top: 28px; }
.btn-lg { font-size: 1.0625rem; padding: 16px 30px; }
.btn-xl { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); padding: 20px 38px; border-radius: 8px; }
.proof-more a { color: var(--accent); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); }
.proof-more a:hover { border-bottom-color: var(--accent); }

.subpage .nav { background: oklch(from var(--surface) l c h / 0.88); border-bottom-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@supports not (color: oklch(from red l c h)) { .subpage .nav { background: rgba(12, 18, 51, 0.9); } }

.cases-head { padding: 160px 0 48px; }
.cases-head h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; max-width: 16ch; }
.cases-head p { margin-top: 20px; color: var(--ink-2); max-width: 58ch; font-size: 1.125rem; }

/* The grid: full-bleed, 4px gutters, 9:16 tiles. Siblings dim while one is hovered. */
.cases { padding: 0 4px; }
.cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; }
.case-tile {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface);
  border-radius: 0; transition: opacity 0.4s var(--ease);
}
.case-tile img, .case-tile video, .case-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-tile img, .case-tile video { transition: filter 0.5s var(--ease), transform 0.8s var(--ease); }
.case-blank { background: var(--surface-2); }
.case-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease);
  background: linear-gradient(to top, oklch(from var(--bg) l c h / 0.92) 0%, oklch(from var(--bg) l c h / 0.55) 45%, oklch(from var(--bg) l c h / 0.15) 100%);
}
@supports not (color: oklch(from red l c h)) {
  .case-tile::after { background: linear-gradient(to top, rgba(7, 11, 31, 0.92) 0%, rgba(7, 11, 31, 0.55) 45%, rgba(7, 11, 31, 0.15) 100%); }
}
.cases-grid:hover .case-tile:not(:hover) { opacity: 0.55; }
.case-tile:hover img, .case-tile:hover video, .case-tile:focus-visible img, .case-tile:focus-visible video {
  filter: grayscale(0.7) brightness(0.6); transform: scale(1.03);
}
.case-tile:hover::after, .case-tile:focus-visible::after { opacity: 1; }

.case-cap {
  position: absolute; inset: auto 0 0 0; z-index: 1; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.case-tile:hover .case-cap, .case-tile:focus-visible .case-cap { opacity: 1; transform: none; }
.case-brand { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.case-meta { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.case-metrics { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.case-metrics b { display: block; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.case-metrics small { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--accent); }
.case-metrics span { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-2); }
.case-cta { margin-top: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--accent); }
.case-cta::after { content: " \2192"; }

/* Touch: no hover, so the brand line stays visible and metrics wait for the page. */
@media (hover: none) {
  .case-tile::after { opacity: 1; }
  .case-cap { opacity: 1; transform: none; }
  .case-metrics, .case-cta { display: none; }
  .cases-grid:hover .case-tile:not(:hover) { opacity: 1; }
}

/* ---- detail page ---- */
.cs-hero { padding: 150px 0 0; }
.cs-hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.cs-crumb { font-size: 0.8125rem; color: var(--muted); margin-bottom: 20px; }
.cs-crumb a { color: var(--ink-2); }
.cs-crumb a:hover { color: var(--ink); }
.cs-crumb span { margin: 0 8px; }
.cs-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; }
.cs-meta { margin-top: 14px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cs-headline { margin-top: 24px; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.4; color: var(--ink-2); max-width: 38ch; text-wrap: pretty; }
.cs-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.cs-stats b { display: block; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cs-stats small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--accent); }
.cs-stats span { display: block; margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); }
.cs-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.cs-media { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
.cs-loop { position: relative; margin: 0; width: min(100%, 360px); aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--surface); flex: 0 1 auto; min-width: 0; }
.cs-loop img, .cs-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-loop-2 { width: min(100%, 220px); margin-top: 80px; }
.cs-media { max-width: 100%; }
.cs-section { padding: clamp(56px, 7vw, 96px) 0 0; }
.cs-section h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 24px; }
.cs-narrow { max-width: 760px; margin-inline: auto; }
.cs-section p { color: var(--ink-2); font-size: 1.125rem; max-width: 65ch; }
.cs-table { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cs-table div { display: grid; grid-template-columns: minmax(180px, 0.9fr) 1.6fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cs-table dt { color: var(--ink-2); font-size: 0.9375rem; }
.cs-table dd { margin: 0; font-weight: 500; color: var(--ink); font-size: 1rem; }
.cs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-ads { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.cs-ads th { text-align: left; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-strong); }
.cs-ads td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-ads .cs-adname { color: var(--ink); font-weight: 500; white-space: normal; min-width: 220px; }
.cs-note { font-size: 0.9375rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 20px; }
.cs-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: clamp(56px, 7vw, 96px); padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-pager a { display: flex; flex-direction: column; gap: 4px; font-weight: 500; color: var(--ink); }
.cs-pager a:hover { color: var(--accent); }
.cs-pager small { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cs-pager-all { color: var(--ink-2); font-size: 0.9375rem; }
.cs-pager-next { text-align: right; align-items: flex-end; }
/* The footer row is navigation, not the showcase: contained, shorter tiles. */
.cases-more { margin-top: clamp(40px, 5vw, 64px); padding: 0; }
.cases-more h2 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.cases-more .cases-grid { gap: 12px; }
.cases-more .case-tile { aspect-ratio: 4 / 5; border-radius: 10px; }
.cases-more .case-cap { padding: 18px 16px; }
.cases-more .case-metrics { display: none; }
.cases-more .case-figure { padding: 22px 20px; }
.cases-more .case-figure-cap { display: none; }
/* Navigation needs its labels at rest, not on hover. */
.cases-more .case-tile::after, .cases-more .case-cap { opacity: 1; transform: none; }

/* A case with no ad of its own still gets a hero panel: the figure, at size. */
.cs-figure {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  width: min(100%, 360px); aspect-ratio: 9 / 16; padding: 40px 34px; flex: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.cs-figure b { display: block; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cs-figure small { display: block; margin-top: 10px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cs-figure .case-figure-from b { color: var(--ink-2); }
.cs-figure .case-figure-to b { color: var(--accent); }
.cs-figure figcaption { margin-top: 30px; font-size: 0.875rem; color: var(--ink-2); }

/* Before and after, stated once and at size, for a case whose whole point is the jump. */
.cs-ba { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs-ba-step { margin: 0; }
.cs-ba-step b { display: block; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink-2); }
.cs-ba-step small { display: block; margin-top: 10px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cs-ba-to b { color: var(--accent); }
.cs-ba-arrow { position: relative; flex: none; width: clamp(40px, 7vw, 96px); height: 1px; background: linear-gradient(to right, var(--line-strong), var(--accent)); }
.cs-ba-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px;
  border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
  transform: translate(2px, -50%) rotate(45deg);
}
.cs-ba-cap { margin: 0 0 0 auto; max-width: 30ch; font-size: 0.9375rem; color: var(--ink-2); text-align: right; }
@media (max-width: 760px) {
  .cs-ba { flex-wrap: wrap; gap: 18px 24px; }
  .cs-ba-arrow { width: 40px; }
  .cs-ba-cap { margin: 4px 0 0; text-align: left; max-width: none; flex-basis: 100%; }
}

/* One line of case studies, so the row is fixed rather than auto-filled. */
.cases-row { grid-template-columns: repeat(4, 1fr); }
.cases-row-3 { grid-template-columns: repeat(3, 1fr); }

/* A case with no ad of its own carries its before/after figure instead of a poster. */
.case-tile-figure { background: var(--surface-2); }
.case-figure {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 30px 26px; text-align: left;
  transition: opacity 0.4s var(--ease), transform 0.8s var(--ease);
}
.case-figure b { display: block; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.case-figure small { display: block; margin-top: 8px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.case-figure-from b { color: var(--ink-2); }
.case-figure-to b { color: var(--accent); }
.case-figure-arrow { position: relative; display: block; width: 1px; height: 38px; margin: 16px 0 16px 13px; background: linear-gradient(to bottom, var(--line-strong), var(--accent)); }
.case-figure-arrow::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: translate(-50%, 2px) rotate(45deg);
}
.case-figure-cap { margin-top: 26px; font-size: 0.8125rem; color: var(--ink-2); }
.case-tile-figure:hover .case-figure, .case-tile-figure:focus-visible .case-figure { opacity: 0.12; }

/* ---- portfolio: the ads themselves, contained and captioned, so it never reads
        as a second copy of the home-page wall ---- */
.pf { padding: clamp(40px, 5vw, 72px) 0 0; }
.pf h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; }
.pf .section-lead { margin-bottom: 44px; }
.pf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 16px; }
.pf-tile { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pf-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  transition: border-color 0.35s var(--ease), transform 0.5s var(--ease);
}
.pf-frame img, .pf-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-video { opacity: 0; transition: opacity 0.4s var(--ease); }
.pf-tile.is-looping .pf-video { opacity: 1; }
/* The finished ad, shown only once it is asked for. A square ad letterboxes instead of cropping. */
.pf-full { display: none; background: #000; }
.pf-full.pf-fit { object-fit: contain; }
.pf-tile.is-full .pf-full { display: block; }
.pf-tile:hover .pf-frame { transform: translateY(-3px); border-color: var(--line-strong); }
.pf-tile.is-playing .pf-frame, .pf-tile.is-full .pf-frame { border-color: var(--accent); }

.pf-play {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; gap: 12px; align-content: center;
}
.pf-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 11px; }
.pf-tile.is-full .pf-play { display: none; }
.pf-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; opacity: 0.8;
  color: var(--bg); background: oklch(from var(--ink) l c h / 0.92);
  transition: opacity 0.3s var(--ease), scale 0.3s var(--ease);
}
@supports not (color: oklch(from red l c h)) { .pf-icon { background: rgba(236, 240, 255, 0.92); } }
.pf-play:hover .pf-icon { scale: 1.06; opacity: 1; }
.pf-icon svg { width: 26px; height: 26px; }
.pf-icon-pause { display: none; }
.pf-tile.is-playing .pf-icon { opacity: 0; }
.pf-tile.is-playing .pf-play:hover .pf-icon, .pf-tile.is-playing .pf-play:focus-visible .pf-icon { opacity: 0.9; scale: 1; }
.pf-tile.is-playing .pf-icon-play { display: none; }
.pf-tile.is-playing .pf-icon-pause { display: block; }
/* Run time, so a tile that holds the whole ad says so before it is opened. */
.pf-len {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink); background: oklch(from var(--bg) l c h / 0.72); padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
@supports not (color: oklch(from red l c h)) { .pf-len { background: rgba(7, 11, 31, 0.72); } }
.pf-tile.is-playing .pf-len { opacity: 0; }
.pf-cap { display: flex; flex-direction: column; gap: 3px; }
.pf-brand { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.pf-note { font-size: 0.8125rem; color: var(--muted); }
.pf-link { margin-top: 5px; font-size: 0.8125rem; font-weight: 500; color: var(--accent); }
.pf-link::after { content: " \2192"; }
.pf-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1240px) { .pf-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) {
  .cases-row, .cases-row-3 { grid-template-columns: repeat(2, 1fr); }
  .pf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .pf-icon { width: 42px; height: 42px; }
  .pf-icon svg { width: 21px; height: 21px; }
}

@media (max-width: 860px) {
  .cases-head { padding-top: 120px; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-hero { padding-top: 110px; }
  .cs-hero-inner { grid-template-columns: 1fr; }
  .cs-media { justify-content: flex-start; }
  .cs-loop { width: min(100%, 260px); }
  .cs-loop-2 { display: none; }
  .cs-table div { grid-template-columns: 1fr; gap: 4px; }
  .cs-pager { grid-template-columns: 1fr 1fr; }
  .cs-pager-all { grid-column: 1 / -1; order: 3; text-align: center; align-items: center; }
}


/* ==========================================================================
   v4: hero text, then every section after the brand wall. Each section has
   its own shape (statement + list, tabs + reel, ledger, three statements) so
   the page stops reading as one card grid after another.
   ========================================================================== */
.hero-long h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 18ch; letter-spacing: -0.02em; line-height: 1.06; }
.hero-long .hero-tagline { margin-top: 0; order: -1; }
.hero-long .hero-desc { max-width: 58ch; }
.hero-long .hero-meta { text-transform: none; letter-spacing: 0.02em; font-size: 0.875rem; }

.section-lead { margin-top: 20px; color: var(--ink-2); max-width: 60ch; font-size: 1.125rem; text-wrap: pretty; }

/* ---------- What we make: statement on the left, a hairline list on the right ---------- */
.make { padding: 0 0 var(--section); }
.make-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.make-head { position: sticky; top: 120px; }
.make h2 { max-width: 13ch; }
.make-list { margin: 0; }
/* ---------- The first read ----------
   Our own panel, deliberately not a copy of Meta's interface, and labelled as an example
   so illustrative figures are never mistaken for a client's account. */
.readout {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background-color: var(--surface);
  /* Faint measure grid: this is a data surface, so it gets graph paper, not a gradient. */
  background-image: radial-gradient(oklch(100% 0 0 / 0.045) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
.readout-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.readout-tag { letter-spacing: 0.1em; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px; }
.readout-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; align-items: center;
  padding: 20px; transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}
.readout-row + .readout-row { border-top: 1px solid var(--line); }
.readout-row:hover { background: oklch(100% 0 0 / 0.022); }
.readout-label { display: block; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.readout-find {
  margin-top: 10px; font-size: clamp(1.0625rem, 1.5vw, 1.3rem); font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.readout-find em { font-style: normal; color: var(--accent); font-weight: 600; }
.readout-note { margin-top: 6px; color: var(--muted); font-size: 0.875rem; max-width: 42ch; text-wrap: pretty; }
/* Pointing at one row quiets the rest, so the panel behaves like something being read
   rather than a static card. */
@media (hover: hover) and (pointer: fine) {
  .readout:hover .readout-row { opacity: 0.42; }
  .readout:hover .readout-row:hover { opacity: 1; }
}
.readout-viz { display: flex; flex-direction: column; justify-content: center; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .readout-row:hover .bar-split i, .readout-row:hover .pair i { animation: redraw-bar 0.7s var(--ease); }
  .readout-row:hover .spark-line { animation: redraw-line 0.8s var(--ease); }
  .readout-row:hover .spark-dot { animation: pop-dot 0.8s var(--ease); }
  .readout-row:hover .venn-lens { animation: pop-dot 0.8s var(--ease); }
}
@keyframes redraw-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes redraw-line { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes pop-dot { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }

/* Spend sitting on a handful of ads. */
.bar-split { display: flex; align-items: center; gap: 4px; height: 10px; }
.bar-split i { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 3px; transform-origin: left; }
.bar-split span { flex: 1; height: 100%; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 2px, transparent 2px 6px); }

/* Frequency climbing. */
.spark { width: 120px; height: 34px; display: block; }
.spark-line { stroke-dasharray: 160; }
.spark-dot { color: var(--accent); }

/* The same creative reaching the same people. */
.venn { width: 120px; height: 34px; display: block; }
.venn-lens { color: var(--accent); }

/* Platform ROAS against new customers. */
.pair { display: flex; flex-direction: column; gap: 6px; }
.pair i { display: block; height: 8px; width: var(--w); border-radius: 3px; background: var(--accent); transform-origin: left; }
.pair i.is-low { background: var(--line-strong); }

/* ---------- AI: one heading, format tabs, one line per tab, one row of ads ---------- */
.ai { padding: 0 0 var(--section); overflow-x: clip; }
.ai-lead { margin-top: 24px; }
.ai-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ai h2 { max-width: 14ch; }
.reel-nav { display: flex; gap: 8px; flex: none; padding-bottom: 6px; }
.reel-nav button {
  appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.reel-nav button:hover { border-color: var(--ink); background: var(--surface); }
.reel-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reel-nav button:disabled { opacity: 0.3; cursor: default; border-color: var(--line-strong); background: transparent; }
.ai .filter { margin-top: 32px; }
.ai-desc { margin-top: 16px; color: var(--ink-2); max-width: 58ch; min-height: 1.6em; text-wrap: pretty; }
/* The reel starts on the text edge and runs off the right of the viewport, so it reads as a strip you can pull. */
.reel { margin: 28px calc(50% - 50vw) 0 0; }
/* While the row is drifting, tiles dissolve at the left edge instead of cutting off at the gutter. */
.reel.reel-fade { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px); mask-image: linear-gradient(to right, transparent, #000 72px); }
/* No scroll snapping: the row drifts continuously, and snapping would fight it. */
.reel-track {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-right: 12px; scrollbar-width: none; cursor: grab;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reel-track .wall-tile { flex: 0 0 clamp(168px, 17vw, 224px); }
.reel-track .tile-media { transition: transform 0.45s var(--ease); }
.reel-track .wall-tile:hover .tile-media { transform: scale(1.025); }
.reel-track .tile-cap span { transition: color 0.25s var(--ease); }
.reel-track .wall-tile:hover .tile-cap span { color: var(--ink-2); }
.reel-track .wall-tile img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ai-empty { margin-top: 24px; color: var(--muted); }
.ai-note { margin-top: 24px; font-size: 0.8125rem; color: var(--muted); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button {
  appearance: none; background: transparent; color: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.filter button:hover { color: var(--ink); border-color: var(--ink); }
.filter button.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Results: totals row, then one ledger row per account, then the screenshot ---------- */
.proof { padding: 0; } /* the AI reel above already carries the gap */
.totals {
  margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.totals > div { padding: 26px 24px 26px 0; display: flex; flex-direction: column; gap: 8px; }
.totals > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.totals dd, .ledger-stats dd {
  margin: 0; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.totals dd { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.totals > div:first-child dd { color: var(--accent); }
.totals dt, .ledger-stats dt { color: var(--muted); font-size: 0.875rem; }

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid; grid-template-columns: 76px minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(24px, 3.5vw, 56px);
  align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease);
}
.ledger li:hover { background: oklch(100% 0 0 / 0.022); }
/* The ad each number came from, at thumbnail scale: proof beside the claim rather
   than a second copy of the work grid. */
.ledger-loop {
  position: relative; margin: 0; width: 76px; aspect-ratio: 9 / 16;
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.ledger-loop.is-empty { background: none; }
.ledger-loop img, .ledger-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ledger-loop video { opacity: 0; transition: opacity 0.5s var(--ease); }
.ledger-loop video[src] { opacity: 1; }
.ledger h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.ledger-text p { margin-top: 8px; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.ledger-stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ledger-stats dd { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.ledger-stats div:first-child dd { color: var(--accent); transition: transform 0.35s var(--ease); }
.ledger li:hover .ledger-stats div:first-child dd { transform: translateY(-2px); }
.ledger-stats dt { margin-top: 8px; font-size: 0.8125rem; }

/* The two published cases sit above the fold of the section; the rest open on request,
   and the primary action out to the full case studies is the biggest thing here. */
.proof-actions { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: 30px; }
.ledger-toggle {
  appearance: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  display: grid; place-items: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease);
}
.ledger-toggle svg { width: 20px; height: 20px; transition: transform 0.4s var(--ease); }
.ledger-toggle:hover { border-color: var(--accent); color: var(--accent); transform: translateY(2px); }
.ledger-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ledger-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ledger-toggle[aria-expanded="true"]:hover { transform: translateY(-2px); }
.ledger > li[data-more] { display: none; }
.ledger > li[data-more]:not([hidden]) { display: grid; }

/* ---------- Why: one argument in four steps ----------
   A single column, read top to bottom. Each step sits on a hairline spine that draws
   itself as the step arrives, so the chain of reasoning is visible rather than implied.
   The numbers are generated from the list, so the markup carries the order and screen
   readers get it from the <ol> rather than from decorative text. */
.why { padding: calc(var(--section) * 0.55) 0 0; }
.why h2 { max-width: 22ch; }
.why-deck { margin-top: 16px; color: var(--ink-2); font-size: 1.125rem; max-width: 48ch; }

.steps { counter-reset: step; list-style: none; margin: 46px 0 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-bottom: clamp(22px, 2.4vw, 34px); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: ""; position: absolute; left: 22px; top: 56px; bottom: 2px; width: 1px;
  background: var(--line); transform: translateX(-50%); transform-origin: top;
  transition: background-color 0.4s var(--ease);
}
.steps > li:has(details[open])::before { background: oklch(92% 0.13 190 / 0.4); }
.steps > li::after {
  content: ""; position: absolute; left: 22px; top: 56px; width: 1px; height: 34px;
  transform: translateX(-50%); opacity: 0; pointer-events: none;
  background: linear-gradient(var(--accent), transparent);
}
.steps > li:last-child::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Gated on the reveal, so the pulse is seen rather than spent before anyone arrives. */
  .steps > li.is-in:has(details[open])::after,
  .steps > li:not(.reveal):has(details[open])::after { animation: spine-pulse 0.85s var(--ease); }
}
@keyframes spine-pulse {
  from { opacity: 0.9; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(var(--pulse-to, 90px)); }
}
.steps > li:last-child::before { display: none; }
.step-n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--accent);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums; transition: border-color 0.3s var(--ease);
}
.step-n::before { content: counter(step, decimal-leading-zero); }
.steps summary:hover .step-n { border-color: var(--accent); }
.steps details[open] .step-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.step-head { margin: 0; }
.steps summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center;
  gap: clamp(20px, 2.8vw, 38px);
}
.steps summary::-webkit-details-marker { display: none; }
.steps summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.step-title {
  font-size: clamp(1.35rem, 2.5vw, 2.15rem); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.18; text-wrap: balance; transition: color 0.25s var(--ease);
}
.steps summary:hover .step-title { color: var(--accent); }
.step-caret { width: 18px; height: 18px; color: var(--muted); transition: transform 0.4s var(--ease), color 0.25s var(--ease); }
.steps details[open] .step-caret { transform: rotate(180deg); color: var(--accent); }
.steps summary:hover .step-caret { color: var(--ink); }
.step-detail { margin-left: calc(44px + clamp(20px, 2.8vw, 38px)); }
/* Eased open where the browser supports it, a clean snap everywhere else. */
@supports (interpolate-size: allow-keywords) {
  .steps details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height 0.45s var(--ease), opacity 0.35s var(--ease), content-visibility 0.45s allow-discrete;
  }
  .steps details[open]::details-content { height: auto; opacity: 1; }
}
.step-detail p { padding-top: 12px; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

.why-terms { margin-top: 44px; font-size: 0.9375rem; color: var(--muted); max-width: 76ch; }

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

.cta-alt { margin-top: 40px; max-width: 54ch; font-size: 0.9375rem; color: var(--muted); text-wrap: pretty; }
.cta-audit { margin-top: 10px; font-size: 0.9375rem; font-weight: 500; }
.link-btn {
  appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease);
}
.link-btn:hover { border-bottom-color: var(--accent); }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.audit {
  width: min(100%, 520px); margin-top: 28px; text-align: left;
  display: flex; flex-direction: column; gap: 16px;
}
.audit-row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.audit label { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.audit input, .audit textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 12px 14px; width: 100%; resize: vertical;
  transition: border-color 0.25s var(--ease);
}
.audit input:focus-visible, .audit textarea:focus-visible { outline: 0; border-color: var(--accent); }
.audit input:invalid:not(:placeholder-shown), .audit textarea:invalid:not(:placeholder-shown) { border-color: oklch(70% 0.18 25); }
.audit .btn { align-self: flex-start; }
.audit-status { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.audit-status:empty { display: none; }

@media (max-width: 1023px) {
  .make-inner { grid-template-columns: 1fr; gap: 32px; }
  .make-head { position: static; }
  .readout-row { grid-template-columns: 1fr; gap: 14px; }
  .readout-viz { max-width: 220px; }
  .totals { grid-template-columns: 1fr 1fr; }
  .totals > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .totals > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ledger li { grid-template-columns: 64px minmax(0, 1fr); }
  .ledger-loop { width: 64px; }
  .ledger-stats { grid-column: 1 / -1; }
  .ledger-stats { max-width: 480px; }
  .faq-aside { position: static; }
  .steps summary { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 16px; }
  .step-detail { margin-left: 50px; }
  .steps > li::before { left: 17px; top: 44px; }
  .step-n { width: 34px; height: 34px; font-size: 0.625rem; }
}
@media (max-width: 860px) {
  .hero-long h1 { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
  .readout-row { grid-template-columns: 1fr; gap: 14px; }
  .readout-viz { max-width: 220px; }
  .ai-bar { align-items: flex-start; }
  .reel-nav { display: none; }
  .reel-track .wall-tile { flex-basis: 156px; }
  .reel-track { gap: 8px; }
  .totals > div { padding-top: 20px; padding-bottom: 20px; }
  .cta-wall { gap: 6px; opacity: 0.12; }
  .ledger-stats { gap: 12px; }
}

/* ==========================================================================
   v5: the hero carries no video of its own. The work grid is the only grid and its
   right-hand half climbs into the first fold, dissolving into the nav on the way up.
   ========================================================================== */

/* The hero ground: the same dot grid the readout panel uses, so the left half reads as a
   surface rather than a hole where a video used to be. */
.hero-plate {
  position: absolute; inset: 0; pointer-events: none; background: var(--bg);
  background-image: radial-gradient(oklch(100% 0 0 / 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}
@supports not (color: oklch(100% 0 0 / 0.045)) {
  .hero-plate { background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px); }
}

@media (min-width: 1101px) {
  .hero { min-height: 86svh; align-items: center; }
  .hero-inner { padding-block: 130px 40px; }
  /* Nothing in the copy may cross the centre line, which is where column four starts.
     Scoped past .hero-long h1, which is one specificity step up. */
  .hero-inner.hero-long > * { max-width: min(100%, 44vw, 556px); }
  /* The copy column is half the page now, so the headline is set to fit it rather than
     stretched to the old full-bleed measure. */
  .hero-long h1 { font-size: clamp(2rem, 3.5vw, 3.05rem); }

  /* All six columns hang from one bottom edge. Columns four to six carry one tile more,
     so they stand exactly one tile proud of the other three: the step is the grid's own
     measure rather than a number someone picked. */
  .wall-grid { align-items: end; }

  /* Lift the grid by two tiles instead of one. The right-hand columns now run off the top
     of the screen and the left-hand ones reach up behind the copy. The tile is
     (grid width / 6) at 9:16, and margin-top percentages resolve against width, so the
     browser works it out at every viewport instead of us guessing. */
  .wall { margin-top: calc(-2 * ((100% - 84px) * 16 / 54 + 12px)); }

  /* The grid now starts behind the hero, so its own top must not be masked. */
  .wall { overflow: visible; }


  /* The left columns reach up behind the copy, so they are masked at their own top edge
     and stay at nothing until they are clear of the last line of text. The mask rides the
     element the drift moves, so a column fades at its own leading edge however far it has
     travelled. */
  /* The rotation parks a tile one row below the column for the length of the slide, so
     the column clips its own overflow rather than letting it hang into the next section. */
  .wall-col { overflow: hidden; }

  .wall-col:nth-child(-n + 3) {
    --fade: linear-gradient(to bottom, transparent 0, transparent 470px, #000 790px);
    -webkit-mask-image: var(--fade); mask-image: var(--fade);
  }
}

/* Under 1100px the grid is a two-column masonry and there is no room to climb into
   anything, so it stays put and the hero is simply text on the plate. */
@media (max-width: 1100px) {
  .hero { min-height: 74svh; }
}


/* The right columns run off the top of the page, so their fade cannot ride the column:
   it has to stay put while the grid travels under it. It lives on the nav instead, as a
   band of page colour that the tiles dissolve into on the way up. Once the nav takes its
   own background on scroll it is no longer needed and gets out of the way, so no other
   section is dimmed. */
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; pointer-events: none;
  height: calc(100% + 170px);
  background: linear-gradient(to bottom,
    var(--bg) 0%, var(--bg) 44%, oklch(from var(--bg) l c h / 0.72) 66%, transparent 100%);
  transition: opacity 0.35s var(--ease);
}
@supports not (color: oklch(from red l c h)) {
  .nav::before { background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 44%, rgba(7,11,31,0.72) 66%, transparent 100%); }
}
.nav.is-scrolled::before { opacity: 0; }

/* ==========================================================================
   VSL, the case studies, and the two-column comparison.
   ========================================================================== */

/* ---- VSL ---------------------------------------------------------------- */
.vsl { padding: calc(var(--section) * 0.4) 0 0; }
.vsl-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.vsl h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; }
.vsl .section-lead { max-width: 42ch; }
.vsl-frame { margin: 0; }
.vsl-open {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color 0.35s var(--ease), transform 0.5s var(--ease);
}
.vsl-open:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.vsl-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vsl-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The frame Vimeo generates is mid-transition and soft, so it sits under a scrim and
   carries our own title instead of being passed off as a crisp still. */
.vsl-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(from var(--bg) l c h / 0.94) 0%, oklch(from var(--bg) l c h / 0.5) 52%, oklch(from var(--bg) l c h / 0.32) 100%);
}
@supports not (color: oklch(from red l c h)) {
  .vsl-veil { background: linear-gradient(to top, rgba(7,11,31,0.94) 0%, rgba(7,11,31,0.5) 52%, rgba(7,11,31,0.32) 100%); }
}
.vsl-play {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  color: var(--accent-ink); background: var(--accent);
  transition: scale 0.3s var(--ease);
}
.vsl-open:hover .vsl-play { scale: 1.06; }
.vsl-play svg { width: 34px; height: 34px; }
.vsl-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 4px; padding: 22px clamp(18px, 2.4vw, 28px);
  text-align: left;
}
.vsl-open { text-decoration: none; }
.vsl-meta b { font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); font-weight: 600; color: var(--ink); line-height: 1.35; text-wrap: pretty; }
.vsl-meta span { font-size: 0.8125rem; color: var(--muted); }
.vsl-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000; }

/* ---- Case studies on the home page --------------------------------------
   The same tiles /work uses, so the treatment is learned once: the ad plays, hovering
   brings up the numbers. The difference here is a button under each card, because on
   the home page the card has to say out loud that there is more behind it. */
.hcases { padding: calc(var(--section) * 0.72) 0 calc(var(--section) * 0.75); }
.hcases h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 500; letter-spacing: -0.02em; }
.hcases-grid { margin: 44px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hcase { display: flex; flex-direction: column; gap: 12px; }
.hcase .case-tile { border-radius: 12px; }
.hcase-more { justify-content: center; }
.hcases-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
/* The tile carries no "View case study" line here: the button under it does that job. */
.hcase .case-cta { display: none; }

/* ---- Mid-page booking prompt -------------------------------------------- */
.midcta { padding: 0 0 calc(var(--section) * 0.6); }
.midcta-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
}
.midcta p { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink); max-width: 46ch; }

/* ---- Meet the team: a row that opens into an org chart ------------------- */
.org { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.org summary {
  list-style: none; cursor: pointer; padding: 30px 0;
  display: grid; grid-template-columns: 1fr 30px; align-items: center; gap: 18px;
}
.org summary::-webkit-details-marker { display: none; }
.org summary h2 { font-size: clamp(1.625rem, 2.7vw, 2.25rem); letter-spacing: -0.02em; margin: 0; transition: color 0.25s var(--ease); }
.org-caret {
  width: 30px; height: 30px; justify-self: end; color: var(--muted);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), rotate 0.3s var(--ease), color 0.25s var(--ease);
}
.org summary:hover h2 { color: var(--accent); }
.org summary:hover .org-caret, .org summary:focus-visible .org-caret { opacity: 1; transform: none; color: var(--accent); }
.org[open] .org-caret { opacity: 1; transform: none; rotate: 180deg; }
.org summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.org-grid {
  list-style: none; margin: 0; padding: 8px 0 42px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 40px;
}
.org-person { display: flex; align-items: flex-start; gap: 18px; }
.org-person img {
  flex: none; width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
  background: var(--surface); border: 1px solid var(--line);
  filter: saturate(0.82) brightness(0.94);
  transition: filter 0.35s var(--ease), border-color 0.35s var(--ease);
}
.org-person:hover img { filter: none; border-color: var(--accent); }
.org-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.org-text b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.org-role { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.org-line { margin-top: 7px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }

/* Native <details> snaps open. Give it a height to animate where the browser allows it. */
@supports (interpolate-size: allow-keywords) {
  .org { interpolate-size: allow-keywords; }
  .org::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
  }
  .org[open]::details-content { block-size: auto; }
}

@media (max-width: 1100px) {
  .hcases-grid { grid-template-columns: repeat(2, 1fr); }
  .org-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .hcases-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hcase-more { font-size: 0.8125rem; padding-inline: 12px; }
  .org-grid { grid-template-columns: 1fr; }
  .midcta-inner { flex-direction: column; align-items: flex-start; }
}


/* ---- Portfolio: format and niche filters, and the tile's own label ---------
   The pills reuse the AI showcase's .filter so the two surfaces behave alike. */
.pf-head { padding: 160px 0 0; }
.pf-head h1 { max-width: 20ch; }
.pf-filter { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.pf-filter-label {
  flex: none; width: 62px; font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: var(--muted);
}
.pf-filter .filter button small {
  font-size: 0.6875rem; font-weight: 600; opacity: 0.55; margin-left: 5px;
  font-variant-numeric: tabular-nums;
}
.pf-count {
  margin: 26px 0 22px; font-size: 0.8125rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pf-empty { margin-top: 28px; color: var(--ink-2); }

/* The format sits on the tile, the way it does on an ad-library card. */
.pf-fmt {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 4px 9px; border-radius: 999px;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: oklch(from var(--bg) l c h / 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@supports not (color: oklch(from red l c h)) { .pf-fmt { background: rgba(7, 11, 31, 0.72); } }
.pf-tile.is-full .pf-fmt { opacity: 0; }

.pf-title {
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  line-height: 1.3; text-wrap: pretty;
}
.pf-meta { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 700px) {
  .pf-filter { flex-direction: column; gap: 8px; }
  .pf-filter-label { width: auto; }
  .pf-filter .filter { gap: 6px; }
  .pf-filter .filter button { padding: 7px 11px; font-size: 0.8125rem; }
}

/* ==========================================================================
   Phone. Every rule below sits behind a max-width query, so the desktop
   layout is untouched by all of it.
   ========================================================================== */
@media (max-width: 1100px) {
  /* The nav's gradient exists so the risen grid columns dissolve into the bar.
     On a phone the grid never rises, so the gradient had nothing to do except
     wash the top line of the headline out to grey. */
  .nav::before { display: none; }

  /* The VSL lost its single-column rule in an earlier edit and was squeezing
     the copy into a 135px column beside a 183px video. */
  .vsl-inner { grid-template-columns: 1fr; gap: 26px; }
  .vsl h2 { font-size: clamp(1.625rem, 7vw, 2.25rem); }
  .vsl .section-lead { max-width: none; }

  /* Four ads, two by two, instead of twelve rows. The other columns and the
     deeper tiles stay in the document but out of layout, which is where the
     rotation deals its next card from: the tile that rides in was already
     there, it was just past the second row. */
  .wall-grid {
    columns: auto; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; align-items: start;
  }
  /* The narrow layout flattens both of these to display:contents so the tiles can
     reflow. They have to be real boxes again here: the column is what clips the
     slide, and a box with no layout reports zero width, which left the rotation
     unable to find a single column to deal from. */
  .wall-col { display: flex; flex-direction: column; overflow: hidden; }
  .wall-track { display: flex; flex-direction: column; gap: 8px; }
  .wall-col:nth-child(n + 3) { display: none; }
  .wall-track .wall-tile:nth-child(n + 3) { display: none; }
  /* Two rows is not long enough to need fading out at the foot. */
  .wall-fade { display: none; }

  /* Twenty logos stacked four rows deep is a page of its own. On a phone they
     drift past instead, which is also how a logo wall wants to read. */
  .logo-marquee {
    margin-top: 28px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  }
  .logo-marquee .logo-grid {
    margin-top: 0; flex-wrap: nowrap; justify-content: flex-start;
    width: max-content; animation: logo-drift 38s linear infinite;
  }
  .logo-marquee .logo-grid li { flex: 0 0 124px; }
  .logo-marquee:hover .logo-grid { animation-play-state: paused; }
}
/* The set is duplicated in script, so half the track is one full pass. */
@keyframes logo-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee .logo-grid { animation: none; }
}

/* ==========================================================================
   Wide screens: the hero copy stays in the corner it started in.
   ========================================================================== */
@media (min-width: 1101px) {
  /* The copy sat in a 1400px box centred in the viewport while the grid runs
     full bleed. Past about 1500px the box stopped growing and started centring,
     so the text drifted inward: 260px from the left edge at 1920, 1020px at
     3440. It is pinned to the gutter instead, which is where it already sits at
     1440, so nothing moves at the sizes most people are on. */
  .hero-inner { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--gutter) 0; }

  /* Column four of the grid begins at half the viewport plus 6px, whatever the
     width: the grid is six equal columns across the full bleed. Capping the copy
     against that line rather than against a fixed measure is what guarantees it
     can never reach the videos, at any width. */
  .hero-inner.hero-long > * { max-width: min(640px, calc(50vw - var(--gutter) - 56px)); }
}