/* Concept A "PLAY": broadcast-style dme.studio pitch.
   Extends shared/tokens.css. Brand palette is never redefined here.
   Mobile-first. Motion-only layouts live under html.has-motion, so no-JS and
   prefers-reduced-motion both get a complete static page. */

:root {
  --play-display: clamp(4.25rem, 19vw, 21rem);
  --play-huge: clamp(3.25rem, 13vw, 15rem);
  --play-big: clamp(2.5rem, 8.5vw, 9.5rem);
  --play-mid: clamp(2rem, 5vw, 5rem);
  --play-lead: 0.84;
  --play-track: -0.05em;
  --play-line: rgba(255, 255, 255, 0.14);
  --play-dim: rgba(255, 255, 255, 0.64);
  --play-ink-dim: rgba(30, 29, 32, 0.68);
  --play-raise: rgba(255, 255, 255, 0.05);
  --header-h: 3.5rem;
  --tc-font: 600 var(--font-size-xs) / 1 var(--font-family);
}

@media (min-width: 768px) {
  :root { --header-h: 4.25rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.sr-only {
  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: fixed; left: var(--space-4); top: var(--space-4); z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-4); background: var(--color-teal); color: var(--color-ink);
  font-weight: 700; text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-4);
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
}

.ch {
  position: relative;
  padding-block: var(--space-24);
  overflow: clip;
}
@media (min-width: 1280px) { .ch { padding-block: var(--space-40); } }

.ch--ink { background: var(--color-ink); color: var(--color-white); }
.ch--purple { background: var(--color-purple); color: var(--color-white); }
.ch--teal { background: var(--color-teal); color: var(--color-ink); }
.ch--pink { background: var(--color-pink); color: var(--color-ink); }

/* Hard colour wipe: three brand bars sit over the seam and slide out on scroll. */
.wipe {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-raised);
  height: 36vh; display: grid; grid-template-rows: repeat(3, 1fr);
  pointer-events: none; visibility: hidden;
}
.has-motion .wipe { visibility: visible; }
.wipe i { display: block; transform-origin: right center; }
.wipe i:nth-child(1) { background: var(--color-purple); }
.wipe i:nth-child(2) { background: var(--color-teal); }
.wipe i:nth-child(3) { background: var(--color-pink); }
.ch--purple > .wipe i:nth-child(1) { background: var(--color-ink); }
.ch--teal > .wipe i:nth-child(2) { background: var(--color-purple); }

/* ---------- Type ---------- */

.display, .huge, .big, .mid {
  font-weight: var(--font-weight-bold);
  text-transform: lowercase;
  letter-spacing: var(--play-track);
  line-height: var(--play-lead);
}
.display { font-size: var(--play-display); }
.huge { font-size: var(--play-huge); }
.big { font-size: var(--play-big); line-height: 0.88; }
.mid { font-size: var(--play-mid); line-height: 0.95; letter-spacing: -0.035em; }

.line { display: block; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.line > span { display: block; }

.label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label); text-transform: uppercase;
  line-height: var(--line-height-label);
}
.label--dot::before {
  content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--color-pink);
}
.tc { font: var(--tc-font); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

.lead { font-size: var(--font-size-lg); line-height: 1.4; font-weight: var(--font-weight-medium); max-width: 34ch; }
.body { font-size: var(--font-size-base); line-height: var(--line-height-body); max-width: 46ch; }
.muted { color: var(--play-dim); }
.ch--teal .muted, .ch--pink .muted { color: var(--play-ink-dim); }

.accent-teal { color: var(--color-teal); }
.accent-pink { color: var(--color-pink); }

.tag-placeholder {
  display: inline-block; padding: 0.15em 0.5em; border: 1px dashed currentColor;
  font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.9;
}

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

.btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 3rem; padding: 0 var(--space-6);
  border: 2px solid currentColor; border-radius: var(--radius-pill);
  background: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
  text-transform: lowercase; text-decoration: none; cursor: pointer; overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor;
  transform: translateY(101%); transition: transform var(--duration-normal) var(--ease-out);
}
.btn > span { transition: color var(--duration-fast) linear; }
.btn:hover::before { transform: none; }
.btn:hover > span { color: var(--btn-hover-ink, var(--color-ink)); }
.ch--teal .btn, .ch--pink .btn { --btn-hover-ink: var(--color-white); }

.btn--solid { background: var(--color-pink); border-color: var(--color-pink); color: #171619; }
.btn--solid::before { background: var(--color-white); }

.play-ico {
  width: 0.9em; height: 0.9em; flex: none;
  clip-path: url(#tri-clip); background: currentColor;
}

/* ---------- Header ---------- */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky);
  height: var(--header-h); background: var(--color-ink);
  border-bottom: 1px solid var(--play-line);
}
.hdr__in {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.hdr__logo { display: block; width: clamp(7.5rem, 22vw, 10.5rem); }
.hdr__logo img { width: 100%; height: auto; }
.hdr__onair { display: none; align-items: center; gap: var(--space-3); color: var(--play-dim); }
.hdr__rec {
  width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-pink);
  animation: rec 1.6s steps(2, jump-none) infinite;
}
@keyframes rec { 50% { opacity: 0.2; } }
.hdr__nav { display: none; }
.hdr__nav a {
  position: relative; text-decoration: none; font-weight: 600; font-size: var(--font-size-sm);
  text-transform: lowercase; padding-block: var(--space-2);
}
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-teal);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--ease-out);
}
.hdr__nav a:hover::after, .hdr__nav a[aria-current="page"]::after { transform: none; }
.hdr__cta { display: none; }
.hdr__menu {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem;
  padding: 0 var(--space-4); border: 2px solid var(--color-white); border-radius: var(--radius-pill);
  background: none; font-weight: 700; font-size: var(--font-size-sm); cursor: pointer;
}

@media (min-width: 768px) {
  .hdr__onair { display: inline-flex; }
}
@media (min-width: 1024px) {
  .hdr__nav { display: flex; gap: var(--space-6); }
  .hdr__cta { --btn-hover-ink: #171619; display: inline-flex; background: #171619; color: var(--color-pink); min-height: 2.5rem; }
  .hdr__menu { display: none; }
}

/* Mobile menu: full purple flood. */
.menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--color-purple); color: var(--color-white);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-8);
  transform: translateY(-101%); visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-in-out), visibility 0s linear var(--duration-slow);
}
.menu.is-open { transform: none; visibility: visible; transition: transform var(--duration-slow) var(--ease-in-out); }
.menu a { display: block; text-decoration: none; }
.menu__links a { font-size: clamp(3rem, 15vw, 6rem); }
.menu__close {
  position: absolute; top: calc((var(--header-h) - 2.75rem) / 2); right: var(--gutter);
}

/* ---------- Custom cursor (pointer: fine only) ---------- */

.cursor {
  position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); pointer-events: none;
  width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.4rem;
  background: var(--color-teal); clip-path: url(#tri-clip);
  opacity: 0; transition: opacity var(--duration-fast) linear;
}
.cursor.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Cookie ---------- */

.cookie {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: var(--z-overlay); display: flex; align-items: center; gap: var(--space-4);
  justify-content: space-between; padding: var(--space-4) var(--space-5);
  background: var(--color-white); color: var(--color-ink); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); line-height: 1.35;
}
.cookie[hidden] { display: none; }
.cookie button {
  flex: none; min-height: 2.5rem; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-white); font-weight: 700; cursor: pointer;
}
@media (min-width: 768px) { .cookie { right: auto; max-width: 30rem; } }

/* Capture mode: deterministic frames for the pitch video recorder. */
.is-capture .cursor, .is-capture .cookie, .is-capture .hdr__rec { display: none !important; }

main { padding-top: var(--header-h); }

/* ---------- HOME: hero (MOTION A-H1) ---------- */

.hero { position: relative; background: var(--color-ink); }
.hero__stage {
  position: relative; min-height: calc(100svh - var(--header-h));
  display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-8);
  padding: var(--space-8) var(--gutter) var(--space-10); overflow: clip;
}
.hero__top { position: relative; z-index: 4; display: flex; justify-content: space-between; gap: var(--space-4); }
.hero__title { position: relative; z-index: 4; }
.hero__title .display { font-size: clamp(3.75rem, 17vw, 12.5rem); }
.hero__sub { max-width: 30ch; }
.hero__sub { margin-top: var(--space-5); }

/* The logo mark, scaled up. --u is one logo-mark viewBox unit. */
.hero__mark {
  --u: calc(min(72vw, 46svh) / 104);
  position: relative; justify-self: center; align-self: center;
  width: calc(104 * var(--u)); height: calc(98 * var(--u));
}
.hero__outline { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; }
.hero__mask {
  position: absolute; overflow: hidden; clip-path: url(#tri-clip);
  left: calc((var(--x) - 40) * var(--u)); top: calc((var(--y) - 12) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.hero__mask img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__mask::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.35; }
.hero__mask--teal { --x: 67; --y: 11; --w: 78; --h: 99; z-index: 1; }
.hero__mask--purple { --x: 57; --y: 19; --w: 86; --h: 83; z-index: 2; }
.hero__mask--pink { --x: 45; --y: 29; --w: 96; --h: 63; z-index: 3; }
.hero__mask--teal::after { background: var(--color-teal); }
.hero__mask--purple::after { background: var(--color-purple); }
.hero__mask--pink::after { background: var(--color-pink); }

.hero__words {
  position: absolute; inset: auto 0 18% 0; z-index: 5; display: flex; justify-content: space-around;
  pointer-events: none; visibility: hidden;
}
.hero__words span { font-size: clamp(2.25rem, 9vw, 9rem); }
.hero__reel { position: absolute; inset: 0; z-index: 3; visibility: hidden; }
.hero__reel img { width: 100%; height: 100%; object-fit: cover; }
.hero__reel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 29, 32, 0) 40%, rgba(30, 29, 32, 0.85));
}
.hero__chyron {
  position: relative; z-index: 6; display: grid; gap: var(--space-4);
}
.chyron {
  display: inline-grid; grid-auto-flow: column; justify-content: start; align-items: stretch;
  font-weight: 700; text-transform: lowercase;
}
.chyron > * { display: flex; align-items: center; padding: var(--space-2) var(--space-4); }
.chyron__ch { background: var(--color-pink); color: var(--color-ink); }
.chyron__t { background: var(--color-white); color: var(--color-ink); }
.chyron__s { background: var(--color-purple); color: var(--color-white); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Motion layout: stage pinned, masks start hidden inside the outline. */
.has-motion .hero__stage { height: 100svh; min-height: 0; margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + var(--space-8)); }
.has-motion .hero__stage { grid-template-rows: auto 1fr; }
.has-motion .hero__mark { position: absolute; left: 50%; top: 40%; translate: -50% -50%; }
.has-motion .hero__title, .has-motion .hero__chyron { grid-row: 2; grid-column: 1; align-self: end; }
.has-motion .hero__chyron { opacity: 0; }
.has-motion .hero__words, .has-motion .hero__reel { visibility: visible; }
.has-motion .hero__reel { opacity: 0; }
.has-motion .hero__words span { opacity: 0; }

@media (min-width: 768px) {
  .hero__mark { --u: calc(min(46vw, 58svh) / 104); }
  .has-motion .hero__mark { left: 70%; top: 52%; }
  .hero__title .display { font-size: clamp(3.75rem, 9.2vw, 12.5rem); }
}
@media (orientation: portrait) {
  .hero__words { inset: 12% auto 14% var(--gutter); flex-direction: column; justify-content: space-around; }
}

/* ---------- HOME: positioning ---------- */

.pos__head { grid-column: 1 / -1; }
.pos__copy { grid-column: 1 / -1; margin-top: var(--space-10); display: grid; gap: var(--space-6); }
.pos__sectors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.pos__sectors li {
  padding: var(--space-1) var(--space-3); border: 2px solid currentColor; border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--font-size-sm); text-transform: lowercase;
}
@media (min-width: 768px) {
  .pos__copy { grid-column: 6 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); margin-top: var(--space-16); }
}

/* ---------- HOME: stats / odometers (MOTION A-H2) ---------- */

.stats__list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--play-line); }
.stat {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2);
  padding-block: var(--space-6); border-bottom: 1px solid var(--play-line);
}
.stat__num {
  position: relative; font-size: clamp(5rem, 24vw, 17rem); font-weight: 700; line-height: 0.9;
  letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
}
.stat__outline { display: block; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5); }
.stat__fill { position: absolute; inset: 0; overflow: hidden; }
.stat__fill > span { display: block; }
.stat__fill--pink { color: var(--color-pink); }
.stat__fill--purple { color: var(--color-purple); }
.stat__fill--teal { color: var(--color-teal); }
.stat__fill--white { color: var(--color-white); }
.stat__cap { font-weight: 700; font-size: var(--font-size-lg); text-transform: lowercase; }

.odo { display: inline-flex; }
.odo__col { display: inline-block; height: 0.9em; overflow: hidden; line-height: 0.9; }
.odo__strip { display: block; }
.odo__strip > span { display: block; height: 0.9em; }
.odo__fix { display: inline-block; }

@media (min-width: 768px) {
  .stats__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .stat__num { font-size: clamp(6rem, 13vw, 15rem); }
}

/* ---------- HOME: services (MOTION A-H3) ---------- */

.svc-head { padding-block: var(--space-24) var(--space-10); }
.services { overflow: clip; }
.services__track { display: grid; }
.svc {
  position: relative; display: grid; align-content: space-between; gap: var(--space-10);
  min-height: 100svh; padding: calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-10);
  overflow: clip;
}
.svc--video { background: var(--color-purple); color: var(--color-white); }
.svc--post { background: var(--color-teal); color: var(--color-ink); }
.svc--animation { background: var(--color-ink); color: var(--color-white); border-top: 1px solid var(--play-line); }
.svc__top { display: flex; justify-content: space-between; align-items: baseline; }
.svc__name { position: relative; z-index: 1; font-size: clamp(2.75rem, 11.5vw, 11rem); }
.svc__name b { font-weight: 700; opacity: 0.65; }
.svc__body { display: grid; gap: var(--space-6); max-width: 40rem; }
.svc__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc--video .svc__list li { background: var(--color-purple); }
.svc--post .svc__list li { background: var(--color-teal); }
.svc--animation .svc__list li { background: var(--color-ink); }
.svc__list li {
  padding: var(--space-1) var(--space-3); border: 2px solid currentColor; border-radius: var(--radius-pill);
  font-size: var(--font-size-sm); font-weight: 700; text-transform: lowercase;
}
.svc__tri {
  position: absolute; right: -12vw; bottom: 8vh; width: 62vw; aspect-ratio: 86 / 83; opacity: 0.95;
  clip-path: url(#tri-clip); pointer-events: none;
}
.svc--video .svc__tri { background: var(--color-teal); }
.svc--post .svc__tri { background: var(--color-purple); }
.svc--animation .svc__tri { background: var(--color-pink); }
.svc__body, .svc__top { position: relative; z-index: 1; }

@media (min-width: 768px) {
  .svc__tri { right: 4vw; bottom: auto; top: 22vh; width: min(36vw, 62vh); }
  .svc__body { max-width: 34rem; }
  .has-motion .services__track { display: flex; width: 300vw; }
  .has-motion .svc { width: 100vw; height: 100svh; min-height: 0; flex: none; padding-left: calc(var(--gutter) * 1.5); }
  .has-motion .svc--animation { border-top: 0; }
}

/* ---------- HOME: logo wall / split-flap (MOTION A-H4) ---------- */

.board__head { display: grid; gap: var(--space-6); margin-bottom: var(--space-12); }
.flaptext { display: flex; flex-wrap: wrap; gap: 0.12em 0.3em; font-size: clamp(1.75rem, 6.4vw, 5.5rem); font-weight: 700; line-height: 1; text-transform: lowercase; }
.flaptext__c {
  position: relative; display: inline-grid; place-items: center; width: 0.78em; height: 1.08em;
  background: var(--color-ink); color: var(--color-white); border-radius: 0.08em; perspective: 4em;
}
.flaptext__c::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55);
}
.flaptext__c > span { display: block; }
.flaptext__w { display: inline-flex; gap: 0.06em; }

.board {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
  padding: var(--space-2); background: var(--color-ink); border-radius: var(--radius-md);
}
.flap { position: relative; aspect-ratio: 16 / 9; perspective: 800px; }
.flap__card {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #2a292d; border-radius: var(--radius-sm); transform-origin: 50% 50%;
}
.flap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; z-index: 2;
  background: var(--color-ink); pointer-events: none;
}
.flap__card img {
  grid-area: 1 / 1; width: 70%; height: 62%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0;
}
.flap__card img.is-on { opacity: 1; }
.board__foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 768px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); } }
@media (min-width: 1280px) { .board { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Project cards (home featured, video grid) ---------- */

.work__head { display: grid; gap: var(--space-6); margin-bottom: var(--space-12); }
.work__grid { display: grid; gap: var(--space-12) var(--space-6); }
.card { position: relative; display: block; text-decoration: none; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #2a292d; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__shutter { position: absolute; inset: 0; z-index: 2; background: var(--color-purple); transform-origin: right center; transform: scaleX(0); }
.has-motion .card__shutter { transform: none; }
.card__play {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1;
  width: clamp(2.5rem, 6vw, 4rem); aspect-ratio: 86 / 83; background: var(--color-white); clip-path: url(#tri-clip);
  transition: transform var(--duration-normal) var(--ease-out), background-color var(--duration-fast) linear;
}
.card:hover .card__play { transform: scale(1.18); background: var(--color-pink); }
.card__meta { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: calc(-1 * var(--space-5)); position: relative; z-index: 3; padding-left: var(--space-4); }
.card__meta > * { padding: var(--space-2) var(--space-3); font-weight: 700; text-transform: lowercase; line-height: 1.1; }
.card__ch { background: var(--color-teal); color: var(--color-ink); }
.card__title { background: var(--color-white); color: var(--color-ink); font-size: var(--font-size-lg); }
.card__client { width: 100%; margin-top: var(--space-2); padding-left: 0 !important; font-weight: 500 !important; text-transform: none !important; color: var(--play-dim); }

@media (min-width: 768px) {
  .work__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work__grid > :nth-child(5n + 1) { grid-column: 1 / -1; }
  .work__grid > :nth-child(5n + 1) .card__media { aspect-ratio: 21 / 9; }
  .work__grid > :nth-child(5n + 2) { grid-column: 1 / span 7; }
  .work__grid > :nth-child(5n + 3) { grid-column: 8 / -1; margin-top: var(--space-24); }
  .work__grid > :nth-child(5n + 4) { grid-column: 1 / span 5; }
  .work__grid > :nth-child(5n + 5) { grid-column: 6 / -1; margin-top: var(--space-16); }
}

/* ---------- Testimonials ---------- */

.voices__head { margin-bottom: var(--space-12); }
.voices__list { display: grid; gap: var(--space-12); }
.voice { display: grid; gap: var(--space-5); }
.voice__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.voice__media img { width: 100%; height: 100%; object-fit: cover; }
.voice__media .card__play { width: clamp(3rem, 8vw, 5.5rem); left: 50%; top: 50%; bottom: auto; translate: -40% -50%; }
.voice__quote { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-transform: lowercase; }
.voice__who { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-weight: 600; }
@media (min-width: 768px) { .voices__list { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .voice:nth-child(2) { margin-top: var(--space-24); } }

/* ---------- HOME: contact (MOTION A-H5) ---------- */

.cta { position: relative; background: var(--color-ink); }
.cta__stage {
  position: relative; display: grid; place-items: center; min-height: 100svh;
  padding: var(--space-24) var(--gutter); overflow: clip; text-align: center;
}
.cta__tri {
  position: absolute; left: 50%; top: 50%; width: 46vmin; aspect-ratio: 86 / 83;
  translate: -45% -50%; background: var(--color-pink); clip-path: url(#tri-clip);
}
.cta__title { position: relative; z-index: 1; }
.cta__title .huge { font-size: clamp(3.5rem, 14vw, 14rem); }
.cta__title-ink { position: absolute; inset: 0; color: var(--color-ink); opacity: 0; }
.cta__form { background: var(--color-pink); color: var(--color-ink); padding-block: 0 var(--space-24); }
.has-motion .cta__tri { width: 22vmin; }

.form { display: grid; gap: var(--space-5); }
.form__intro { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label, .field legend { font-weight: 700; font-size: var(--font-size-sm); text-transform: lowercase; }
.field input, .field textarea {
  width: 100%; min-height: 3.25rem; padding: var(--space-3) 0; border: 0; border-bottom: 2px solid var(--color-ink);
  background: transparent; color: var(--color-ink); font-size: var(--font-size-lg); font-weight: 600; border-radius: 0;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(30, 29, 32, 0.45); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--color-white); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-5);
  border: 2px solid currentColor; border-radius: var(--radius-pill); font-weight: 700; text-transform: lowercase;
}
.chip input:checked + span { background: #171619; color: var(--color-pink); border-color: #171619; }
.chip input:focus-visible + span { outline: 3px solid var(--color-white); outline-offset: 2px; }
.form .btn { justify-self: start; background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.form .btn::before { background: var(--color-white); }
.form__note { font-size: var(--font-size-sm); font-weight: 600; }
.form__sent { font-weight: 700; font-size: var(--font-size-xl); }
@media (min-width: 768px) {
  .form { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .form__intro, .form > .field--full, .form > fieldset, .form > .btn, .form__note, .form__sent { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */

.ftr { background: var(--color-ink); border-top: 1px solid var(--play-line); padding-block: var(--space-16) var(--space-8); }
.ftr__cols { display: grid; gap: var(--space-10); grid-template-columns: 1fr 1fr; }
.ftr__cols h3 { font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--play-dim); margin-bottom: var(--space-3); font-weight: 600; }
.ftr__cols li { margin-bottom: var(--space-2); }
.ftr__cols a { text-decoration: none; font-weight: 600; }
.ftr__cols a:hover { color: var(--color-teal); }
.ftr__logo { margin-top: var(--space-16); }
.ftr__logo img { width: 100%; height: auto; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); color: var(--play-dim); font-size: var(--font-size-sm); }
@media (min-width: 768px) { .ftr__cols { grid-template-columns: 2fr repeat(4, 1fr); } }

/* ---------- Generic page hero (video, portfolio) ---------- */

.phero { position: relative; padding-block: var(--space-16) var(--space-16); overflow: clip; }
.phero__label { margin-bottom: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
.phero__copy { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
.phero__tri {
  position: relative; margin-top: var(--space-12); aspect-ratio: 86 / 83; width: min(100%, 34rem);
  margin-left: auto; overflow: hidden; clip-path: url(#tri-clip);
}
.phero__tri img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .phero__in { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: end; }
  .phero__tri { margin-top: 0; }
}

/* ---------- VIDEO: NLE timeline (MOTION A-V1) ---------- */

.tl { background: var(--color-ink); }
.tl__stage {
  display: grid; gap: var(--space-5); padding-block: var(--space-16);
}
.tl__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.tl__tc {
  font: 700 clamp(1.5rem, 5vw, 3rem) / 1 var(--font-family); font-variant-numeric: tabular-nums;
  color: var(--color-pink); letter-spacing: 0.02em;
}
.tl__body { display: grid; gap: var(--space-5); }
.monitor { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border: 1px solid var(--play-line); }
.monitor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.monitor__osd {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.monitor__safe { position: absolute; inset: 7%; border: 1px solid rgba(255, 255, 255, 0.25); z-index: 1; pointer-events: none; }

.stages { display: grid; gap: var(--space-6); }
.stage__n { color: var(--color-teal); }
.stage h3 { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1; text-transform: lowercase; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-3); }

.nle { border: 1px solid var(--play-line); background: #18171a; }
.nle__ruler, .nle__track { display: grid; grid-template-columns: 2.75rem 1fr; }
.nle__ruler { height: 1.75rem; border-bottom: 1px solid var(--play-line); }
.nle__ticks {
  position: relative;
  background-image: repeating-linear-gradient(90deg, var(--play-line) 0 1px, transparent 1px 2.5%);
  background-size: 100% 35%; background-position: bottom; background-repeat: no-repeat;
}
.nle__ticks span { position: absolute; top: 2px; font: var(--tc-font); color: var(--play-dim); transform: translateX(-50%); }
.nle__ticks span:first-child { transform: none; }
.nle__ticks span:last-child { transform: translateX(-100%); }
.nle__track { height: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nle__track:last-child { border-bottom: 0; }
.nle__id { display: grid; place-items: center; font: var(--tc-font); color: var(--play-dim); border-right: 1px solid var(--play-line); }
.nle__lane { position: relative; }
.clip {
  position: absolute; top: 3px; bottom: 3px; left: var(--l); width: var(--w);
  border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.08);
  font: 600 0.625rem / 1 var(--font-family); text-transform: lowercase; color: var(--play-dim);
  display: flex; align-items: center; padding-inline: 0.4rem; white-space: nowrap;
}
.clip::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: 0.22; }
.clip__lit { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding-inline: 0.4rem; background: var(--c); color: var(--color-ink); }
.clip > span:first-child { position: relative; z-index: 1; }
.clip--purple .clip__lit { color: var(--color-white); }
.has-motion .clip__lit { opacity: 0; }
.nle__wave .clip { background: none; }
.nle__wave .clip::before {
  opacity: 0.5;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
  mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
}
.nle__lanes { position: relative; }
.playhead {
  position: absolute; top: 0; bottom: 0; left: 2.75rem; right: 0; z-index: 3; pointer-events: none;
}
.playhead__line {
  position: absolute; top: -0.5rem; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--color-pink);
}
.playhead__line::before {
  content: ""; position: absolute; top: 0; left: -0.45rem; width: 0.9rem; height: 0.8rem;
  background: var(--color-pink); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.has-motion .tl__stage { height: 100svh; padding-block: calc(var(--header-h) + var(--space-4)) var(--space-4); align-content: center; }
.has-motion .stages { position: relative; min-height: 9.5rem; }
.has-motion .stage { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.has-motion .stage:first-child { opacity: 1; }
.has-motion .stages { min-height: var(--stage-height, 9.5rem); }
html.menu-open { overflow: hidden; }
html.menu-open body { overflow: hidden; }
/* Keep small text on pink above AA without altering the brand flood. */
.chyron__ch, .cta__form, .ch--pink .lead { color: #171619; }
.cta__form .field input, .cta__form .field textarea { color: #171619; }
.cta__form .field input::placeholder, .cta__form .field textarea::placeholder { color: #171619; opacity: 1; }
/* A static monitor uses one still; every process chapter stays in the flow. */
html:not(.has-motion) .monitor img:not(:first-child) { display: none; }

@media (min-width: 768px) {
  .tl__body { grid-template-columns: 1.6fr 1fr; align-items: center; gap: var(--space-8); }
  .nle__track { height: 2.5rem; }
  .clip { font-size: 0.75rem; }
}
@media (min-width: 768px) {
  .has-motion .monitor { max-height: 46svh; width: 100%; }
}
@media (min-width: 768px) and (max-height: 760px) {
  .has-motion .monitor { max-height: 42svh; aspect-ratio: auto; height: 42svh; }
}
@media (max-width: 767px) {
  .tl__head { flex-wrap: wrap; }
  .monitor__osd { flex-wrap: wrap; }
  .has-motion .monitor { max-height: 30svh; }
  .has-motion .nle__track { height: 1.6rem; }
  .has-motion .tl__stage { gap: var(--space-3); }
}

@media (max-width: 479px) {
  /* Keep the ruler legible when seven labels no longer fit. */
  .nle__ticks span:nth-child(even) { display: none; }
}

/* ---------- VIDEO: chapters ---------- */

.chapters__list { border-top: 2px solid currentColor; }
.chapter {
  position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-2);
  padding: var(--space-6) 0; border-bottom: 2px solid currentColor; isolation: isolate;
}
.chapter::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--color-ink);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--duration-normal) var(--ease-out);
}
.chapter:hover::before { transform: none; }
.chapter:hover { color: var(--color-white); }
.chapter__tc { font: 700 var(--font-size-sm) / 1 var(--font-family); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.chapter__t { font-size: clamp(2.25rem, 7vw, 6.5rem); }
.chapter__d { max-width: 40ch; }
@media (min-width: 768px) {
  .chapter { grid-template-columns: 10rem 1fr 18rem; align-items: center; gap: var(--space-8); }
}

/* ---------- VIDEO: gear ---------- */

.gear { display: grid; gap: var(--space-10); }
.gear__list { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid currentColor; }
.gear__list li { padding: var(--space-4) 0; border-bottom: 2px solid currentColor; font-weight: 700; font-size: var(--font-size-xl); text-transform: lowercase; line-height: 1.1; }
.gear__list li:nth-child(odd) { padding-right: var(--space-4); }
@media (min-width: 1024px) { .gear { grid-template-columns: 1fr 1fr; align-items: start; } }

.ctaband { text-align: left; }
.ctaband__in { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) { .ctaband__in { grid-template-columns: 1.6fr 1fr; align-items: end; } }

/* ---------- PORTFOLIO: filters + wall (MOTION A-P1, A-P2, A-P3) ---------- */

.filters { position: sticky; top: var(--header-h); z-index: var(--z-raised); background: var(--color-ink); border-bottom: 1px solid var(--play-line); }
.filters__in { display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-3); scrollbar-width: none; }
.filters__in::-webkit-scrollbar { display: none; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-5);
  border: 2px solid var(--play-line); border-radius: var(--radius-pill); background: none; cursor: pointer;
  font-weight: 700; font-size: var(--font-size-sm); text-transform: lowercase;
}
.fchip sup { font-size: 0.7em; color: var(--play-dim); }
.fchip[aria-pressed="true"] { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); }
.fchip[aria-pressed="true"] sup { color: var(--color-ink); }
.fchip:hover { border-color: var(--color-white); }
.filters__count { margin-left: auto; padding-left: var(--space-4); flex: none; color: var(--play-dim); }

.wall { overflow: clip; perspective: 1400px; perspective-origin: 50% 0%; padding-block: var(--space-12) var(--space-24); }
.wall__plane { transform-origin: 50% 0%; }
.wall__grid { columns: 2; column-gap: var(--space-3); }
.tile { break-inside: avoid; margin-bottom: var(--space-3); }
.tile.is-hidden { display: none; }
.tile a { display: block; text-decoration: none; }
.tile__media { position: relative; overflow: hidden; background: #2a292d; aspect-ratio: 16 / 9; }
.tile--tall .tile__media { aspect-ratio: 4 / 5; }
.tile--sq .tile__media { aspect-ratio: 1; }
.tile__media > img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duration-normal) linear; }
.tile__preview {
  position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 86 / 83; translate: -45% -50%;
  overflow: hidden; clip-path: url(#tri-clip); transform: scale(0);
  transition: transform var(--duration-slow) var(--ease-out);
}
.tile__preview img { position: absolute; inset: -40%; width: 180%; height: 180%; max-width: none; object-fit: cover; transform: scale(1.25); transition: transform 4s linear; }
.tile a:hover .tile__media > img, .tile a:focus-visible .tile__media > img { opacity: 0.35; }
.tile a:hover .tile__preview, .tile a:focus-visible .tile__preview { transform: scale(1); }
.tile a:hover .tile__preview img { transform: scale(1); }
.tile__badge {
  position: absolute; left: var(--space-2); top: var(--space-2); z-index: 2; padding: 0.2em 0.55em;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink);
}
.tile[data-cat="video"] .tile__badge { background: var(--color-teal); }
.tile[data-cat="post"] .tile__badge { background: var(--color-white); }
.tile[data-cat="animation"] .tile__badge { background: var(--color-purple); color: var(--color-white); }
.tile__cap { display: grid; gap: 0.15rem; padding: var(--space-3) 0 var(--space-2); }
.tile__cap strong { font-size: var(--font-size-lg); line-height: 1.05; text-transform: lowercase; letter-spacing: -0.01em; }
.tile__cap span { font-size: var(--font-size-sm); color: var(--play-dim); }
@media (min-width: 768px) { .wall__grid { columns: 3; column-gap: var(--space-5); } .tile { margin-bottom: var(--space-5); } }
@media (min-width: 1280px) { .wall__grid { columns: 4; } }

/* ---------- Reduced motion: static, everything visible ---------- */

@media (prefers-reduced-motion: reduce) {
  .hdr__rec { animation: none; }
  .menu, .btn::before, .tile__preview, .tile__preview img, .chapter::before { transition: none; }
}