@font-face {
  font-family: "Big Shoulders Display";
  src: url("assets/fonts/big-shoulders-900.woff2") format("woff2");
  font-weight: 500 900; /* CHANGES-30 Amendment B: same variable file, range opened for the 500 "/" separators */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-400.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0710;
  --surface: #140d1c;
  --surface-2: #1c1226;
  --band: #0e0915;
  --footer: #07050B;
  --text: #f6f1f8;
  --muted: #b8acc2;
  --pink: #d92a79;
  --pink-hi: #ff5fa2;
  --pink-hover: #E8408C;
  --pink-pressed: #B81F64;
  --purple: #4a1a8c;
  --purple-glow: #6b29d9;
  --cyan: #1DCFFF;
  --muted-2: #A1A1AA;
  --ink-rgb: 255 255 255;
  --divider: rgb(var(--ink-rgb) / .08);
  --line: rgb(var(--ink-rgb) / .12);
  /* Shared in-out curves; names match the GSAP eases used in main.js */
  --ease-power1-inout: cubic-bezier(.455, .03, .515, .955);
  --ease-power2-inout: cubic-bezier(.645, .045, .355, 1);
  --ease-power3-inout: cubic-bezier(.77, 0, .175, 1);
  --ease-power4-inout: cubic-bezier(.86, 0, .07, 1);
  --ease-expo-inout: cubic-bezier(.87, 0, .13, 1);
  --ease: var(--ease-expo-inout);
  --ease-out: var(--ease-expo-inout);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Switzer", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "Geist Mono", "SFMono-Regular", ui-monospace, monospace;
  /* 1024–1439, held from 768–1023 by the clamp floors. TBD CHANGES-07: 1024 minimums are not designed. */
  --margin: clamp(40px, 7.6923vw - 38.7692px, 72px);
  --gutter: 24px;
  --section: clamp(96px, 36.9231px + 5.7692vw, 120px);
  --gap-head: clamp(64px, 24.6154px + 3.8462vw, 80px);
  /* TBD CHANGES-07: Figma defines 1296 only at 1440. Fluid cap reaches 1440 at 1920 and holds. */
  --content-max: clamp(1296px, 1296px + (100vw - 1440px) * 0.3, 1440px);
  --edge: max(var(--margin), (100% - var(--content-max)) / 2); /* CHANGES-12: one content edge. 100% resolves per element. */
  --fs-hero: clamp(96px, 17.2308px + 7.6923vw, 128px);
  --fs-h2: clamp(56px, 5.7692vw - 3.0769px, 80px);
  --fs-xl: clamp(64px, 10.4vw, 200px);
  --fs-num: clamp(88px, 9.2308px + 7.6923vw, 120px);
  --fs-stat: clamp(56px, 16.6154px + 3.8462vw, 72px);
  --fs-metric: clamp(44px, 14.4615px + 2.8846vw, 56px); /* TBD CHANGES-07: derived at 1440 */
  --fs-h3: clamp(28px, 8.3077px + 1.9231vw, 36px);
  --fs-case: clamp(24px, 4.3077px + 1.9231vw, 32px);
  --fs-quote: clamp(24px, 4.3077px + 1.9231vw, 32px);
  --fs-marquee: clamp(24px, 4.3077px + 1.9231vw, 32px);
  --fs-lead: 16px;
  --fs-price: clamp(64px, 44.3077px + 1.9231vw, 72px); /* TBD CHANGES-07: derived at 1440 */
  --fs-menu: clamp(80px, 40.6154px + 3.8462vw, 96px);
  --section-alt: #120B1B; /* TBD CHANGES-05: brief said #1A1424; Figma page uses #120B1B */
  --placeholder: #211F29;
  --pink-ui: #F0559A;
  --index: #8A7F96;
  --line-strong: rgb(var(--ink-rgb) / .16);
  --card-stroke: rgb(var(--ink-rgb) / .10);
  --lh-body: 1.5;
  --lh-small: 1.4;
  --lh-label: 1.2;
  --lh-sub: 1.2;
  --lh-heading: 1;
  --lh-display: 1;
  --lh-btn: 1;
  --nav-h: 72px;
  --hdr: 72px;
  --dim: #6E6577;
  /* CHANGES-20: theme tokens (dark values = the CHANGES-19 build) */
  --bg-rgb: 10 7 16;
  --section-alt-rgb: 18 11 27;
  --cyan-dark: #1491B3;
  --cyan-line: #1DCFFF;
  --on-pink: #F6F1F8;
  --marquee-fg: var(--bg); /* CHANGES-30 A.2: client marquee logos + "/" (Figma marquee-fg; Dark = bg) */
  --on-light: #0A0710;
  --glass: var(--bg-a60); /* CHANGES-29 B */
  --glass-mobile: rgb(var(--bg-rgb) / .88);
  --focus: #1DCFFF;
  --toggle-fg: #8A7F96;
  --toggle-fg-hover: #F6F1F8;
  --pink-line: #E82E81;
  --btn-dark-active: #000;
  --pre-counter: #F0EEF5;
  --pre-track: #1A1424;
  --theme-fade: 300ms var(--ease-power2-inout);
  --footer-logo: #FFFFFF;
  /* === CHANGES-29: RGB channels so translucent colours derive from the theme colours: rgb(var(--x-rgb) / a) === */
  --pink-rgb: 217 42 121;        /* --pink */
  --cyan-rgb: 29 207 255;        /* --cyan */
  --band-rgb: 14 9 21;           /* --band (Amendment B) */
  --pink-line-rgb: 232 46 129;   /* --pink-line */
  --purple-glow-rgb: 107 41 217; /* --purple-glow */
  /* === CHANGES-29 Amendment B: alpha tokens (Figma "Sensoriium Theme"), built from the channels so they flip with the theme === */
  --bg-a00: rgb(var(--bg-rgb) / 0);    --bg-a60: rgb(var(--bg-rgb) / .6);  --bg-a80: rgb(var(--bg-rgb) / .8);
  --bg-a90: rgb(var(--bg-rgb) / .9);   --bg-a95: rgb(var(--bg-rgb) / .95);
  --band-a00: rgb(var(--band-rgb) / 0);  --band-a92: rgb(var(--band-rgb) / .92);
  --section-alt-a00: rgb(var(--section-alt-rgb) / 0);  --section-alt-a92: rgb(var(--section-alt-rgb) / .92);
  --pink-a08: rgb(var(--pink-rgb) / .08);  --pink-a35: rgb(var(--pink-rgb) / .35);
  --pink-a45: rgb(var(--pink-rgb) / .45);  --pink-a60: rgb(var(--pink-rgb) / .6);
  --cyan-a06: rgb(var(--cyan-rgb) / .06);  --cyan-a18: rgb(var(--cyan-rgb) / .18);  --cyan-a50: rgb(var(--cyan-rgb) / .5);
  --ink-a06: rgb(var(--ink-rgb) / .06);    --ink-a72: rgb(var(--ink-rgb) / .72);
  --glare-a14: rgb(255 255 255 / .14);     --glare-a00: rgb(255 255 255 / 0);   /* white in both themes */
  --ink: rgb(var(--ink-rgb));              /* Figma `ink`: #FFFFFF dark / #0A0710 light (dark-button label, B.3/B.4) */
  --pc-hot-fg: #FFFFFF; --pc-hot-fg-rgb: 255 255 255; /* Figma `pc-hot-fg`: text on the hot (pink) pricing card, white in both themes */
  /* === /CHANGES-29 === */
  color-scheme: dark;
}

/* CHANGES-20: light theme = token override (Figma 264:*) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F1F8;  --bg-rgb: 246 241 248;
  --band: #EDE6F0; --footer: #EDE6F0;
  --surface: #FFFFFF; --section-alt: #FFFFFF; --section-alt-rgb: 255 255 255; --surface-2: #F1EAF4;
  --placeholder: #E4DCE8;
  --purple: #E6DAF5; --purple-glow: #C9B3EE;
  --text: #0A0710; --muted: #4A4152; --index: #625870; --muted-2: #5C5C66;
  --cyan: #006F8F; --cyan-dark: #005A75; --cyan-line: #0083A8;
  --pink: #C2186A; --pink-hi: #C2186A; --pink-hover: #A8145B; --pink-pressed: #8F1150;
  --pink-ui: #C2186A;               /* PROVISIONAL, CHANGES-20 §8.1 (#F0559A = 2.91:1 on light) */
  --pink-line: #C2186A;
  --on-pink: #FFFFFF; --on-light: #F6F1F8;
  --marquee-fg: #FFFFFF; /* CHANGES-30 A.2: Light marquee logos + "/" = pure white */
  --ink-rgb: 10 7 16;
  --focus: #006F8F;
  --toggle-fg: #625870; --toggle-fg-hover: #0A0710;
  --btn-dark-active: #E4DCE8;
  --pre-counter: #0A0710;
  --pre-track: #E4DCE8;
  --footer-logo: var(--text);
  /* === CHANGES-29: light channels (= light --pink / --cyan / --band / --pink-line / --purple-glow); the alpha tokens follow === */
  --pink-rgb: 194 24 106; --cyan-rgb: 0 111 143; --band-rgb: 237 230 240; --pink-line-rgb: 194 24 106; --purple-glow-rgb: 201 179 238;
}

@media (min-width: 1440px) {
  :root {
    --margin: clamp(72px, 5vw, 96px);
    --section: 120px;
    --gap-head: 80px;
    --fs-hero: clamp(128px, 10vw - 16px, 168px);
    --fs-h2: clamp(80px, 6.6667vw - 16px, 112px);
    --fs-num: clamp(120px, 8.3333vw, 160px);
    --fs-stat: clamp(72px, 5vw, 96px);
    --fs-price: clamp(72px, 5vw, 96px);
    --fs-metric: clamp(56px, 8px + 3.3333vw, 72px);
    --fs-h3: clamp(36px, 2.5vw, 48px);
    --fs-case: clamp(32px, 8px + 1.6667vw, 40px);
    --fs-quote: clamp(32px, 8px + 1.6667vw, 40px);
    --fs-marquee: clamp(32px, 8px + 1.6667vw, 40px);
    --fs-lead: 16px;
    --fs-menu: clamp(96px, 8.3333vw - 24px, 136px);
  }

  .hero__hud span { font-size: clamp(8px, 2px + 0.4167vw, 10px); } /* TBD CHANGES-07: Figma is 8; scale up to 10 */
}

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

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

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

button, a { font: inherit; color: inherit; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 20;
  padding: 12px 16px;
  background: var(--pink);
  color: var(--on-pink); /* CHANGES-29: label on pink = --on-pink (was --text) */
  transform: translateY(-160%);
}

.skip:focus { transform: none; }

h1, h2, h3, p { margin: 0; }

h1, h2, .stat-xl, .numeral, .metric dt, .hero-stats dt, .quote-mark, .cta h2 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0;
  text-wrap: balance;
}

ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }

ul, ol { list-style: none; }

.container { padding-inline: var(--edge); }

.section { padding-block: var(--section); }

.section-band { background: var(--band); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: var(--gap-head);
}

.section-heading { grid-column: span 8; display: flex; flex-direction: column; gap: 32px; }

.lead {
  grid-column: span 4;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--muted);
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1;
  text-transform: uppercase;
}

h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1;
}

.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 28px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--ink-rgb) / 0.24);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tag--accent {
  border-color: var(--cyan-a50); /* CHANGES-29 */
  color: var(--cyan);
}

.tag-light { border-color: rgb(var(--ink-rgb) / 0.4); color: var(--text); }

.muted { color: var(--muted); }

.footnote {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-small);
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 19px 27px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: var(--lh-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--ease-power1-inout), border-color 150ms var(--ease-power1-inout), box-shadow 150ms var(--ease-power1-inout), transform 100ms var(--ease-power1-inout);
}

.btn .btn__icon { display: inline-flex; width: 16px; height: 16px; flex: none; transition: transform 150ms var(--ease-power1-inout); }
.btn .btn__icon svg { display: block; width: 100%; height: 100%; }
.menu-cta .btn__icon { width: 20px; height: 20px; }
.menu-cta .btn__icon .icon-16 { display: none; }

.btn:hover .btn__icon { transform: translate(2px, -2px); }

.btn--primary { background: var(--pink); color: var(--on-pink); }

.btn--primary:hover { background: var(--pink-hover); box-shadow: 0 0 24px var(--pink-a45); } /* CHANGES-29 */

.btn--primary:active { background: var(--pink-pressed); transform: translateY(1px); }

.btn--ghost { border-color: rgb(var(--ink-rgb) / 0.4); }

.btn--ghost:hover { background: var(--ink-a06); border-color: var(--text); } /* CHANGES-29 B */

.btn--ghost:active { background: rgb(var(--ink-rgb) / .12); transform: translateY(1px); }

.btn--dark { background: var(--bg); color: var(--ink); /* CHANGES-29 B.4: label --ink (was --text) */ border-color: rgb(var(--ink-rgb) / 0.4); }

.btn--dark:hover { background: var(--surface-2); border-color: var(--text); }

.btn--dark:active { background: var(--btn-dark-active); transform: translateY(1px); }

.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }

.btn--primary:focus-visible:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus), 0 0 24px var(--pink-a45); } /* CHANGES-29 */

.btn-block { width: 100%; margin-top: auto; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hdr);
  padding: 0 var(--edge);
  /* glass, same as .hero__lead; used at all scroll positions (replaces the old is-stuck swap) */
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider); /* CHANGES-29 B: nav border = --divider (same value) */
}

.js-motion.site-ready .site-header { animation: fade-in 600ms var(--ease) both; }

.nav__left { display: flex; align-items: center; gap: 100px; }

.nav__logo { display: flex; width: 148px; height: 32px; flex: 0 0 auto; }

.nav__logo img,
.nav__logo svg { width: 148px; height: 32px; display: block; }

.nav__logo .logo-letter { fill: var(--pink); }

.js-motion.site-ready .nav__logo .logo-letter {
  fill: transparent;
  stroke: var(--pink);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 800);
  stroke-dashoffset: var(--len, 800);
  animation:
    logo-draw 0.7s var(--ease) forwards,
    logo-fill 0.28s var(--ease) forwards;
  animation-delay: calc(var(--i) * 80ms), calc(var(--i) * 80ms + 480ms);
}

@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { to { fill: var(--pink); } }

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  font: 500 12px/1.5 "Geist Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  justify-content: center;
  transition: color .2s var(--ease-power1-inout);
}

.nav__link::after {
  content: "";
  height: 2px;
  width: 100%;
  background: var(--pink);
  opacity: 0;
  transition: opacity .2s var(--ease-power1-inout), background-color .2s var(--ease-power1-inout);
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--text); }

.nav__link:hover::after,
.nav__link:focus-visible::after { background: var(--text); opacity: .4; }

.nav__link[aria-current="true"] { color: var(--text); }

.nav__link[aria-current="true"]::after { background: var(--pink); opacity: 1; }

.header__actions { display: flex; align-items: center; gap: 16px; }

.header__cta { height: 40px; min-height: 40px; padding: 12px 20px; font-size: 16px; line-height: 1; }

.hud-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hud-tag i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* === HUD dot glow: looping glow on the "slots open" status dot === */
.hud-tag i { animation: hud-dot-glow 1s ease-in-out infinite alternate; will-change: box-shadow, opacity, transform; }
/* Pulse: 2s full cycle = 1s up + 1s down (alternate, so it never snaps), ease-in-out both ways. */
@keyframes hud-dot-glow {
  from { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; opacity: .8; transform: scale(1); }
  to   { box-shadow: 0 0 5px 1px color-mix(in srgb, currentColor 70%, transparent), 0 0 11px 2px color-mix(in srgb, currentColor 28%, transparent); opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .hud-tag i { animation: none; } }
/* === /HUD dot glow === */

.hero {
  position: relative;
  z-index: 1;
  /* CHANGES-09 fix: never exactly identity. When the pin first activates the hero turns position: fixed and
     ScrollTrigger resets its inline styles; GSAP then re-inserts a fixed element whose transform is identity to
     measure it, and any DOM move restarts the hero's CSS animations (the intro replayed on the first scroll).
     A 0.01px z offset has no visual effect but keeps the transform non-identity. */
  transform: translateZ(0.01px);
  display: flex;
  align-items: flex-end;
  /* TBD CHANGES-07: 1080 cap at 1920 is a fallback. Never taller than the viewport. */
  height: min(100svh, clamp(900px, 900px + (100vw - 1440px) * 0.375, 1080px));
  min-height: 640px;
  padding: clamp(120px, 21.5385px + 9.6154vw, 160px) var(--edge) clamp(72px, 12.9231px + 5.7692vw, 96px);
  overflow: hidden;
}

@media (max-height: 759.98px) {
  .hero h1 { font-size: min(var(--fs-hero), 14svh); }
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg) url("assets/img/hero-jellyfish-frame.jpg") center/cover no-repeat; /* CHANGES-13: matches .hero__video cover/center */
  transform-origin: center center;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb) / .92) 0%, var(--bg-a00) 80%),
    linear-gradient(0deg, var(--bg) 0%, var(--bg-a00) 40%); /* CHANGES-29 B (stops unchanged; see note at .hero__bg::after) */
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 400ms var(--ease-power1-inout);
}

.hero__video.is-ready { opacity: 1; }

html.reduced-motion .hero__video,
body[data-hero="samurai"] .hero__video { display: none; }

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 42%, rgb(var(--cyan-rgb) / .22), transparent 46%); /* CHANGES-29 */
  animation: city-flicker 4s ease-in-out infinite;
}

html.static-hero .hero__bg,
html.reduced-motion .hero__bg {
  background-image: url("assets/img/hero-jellyfish-frame.jpg");
}

body[data-hero="samurai"] .hero__bg {
  background-image: url("assets/img/hero-samurai.webp");
}

html.static-hero body[data-hero="samurai"] .hero__bg,
html.reduced-motion body[data-hero="samurai"] .hero__bg,
body[data-hero="samurai"].static-hero .hero__bg {
  background-image: url("assets/img/hero_samurai.png");
}

.hero__lead {
  background: var(--glass);
  border: 1px solid rgb(var(--ink-rgb) / .12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.hero__hud {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
}

.hero__hud span {
  font: 500 8px/1 "Geist Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.js-motion:not(.site-ready) .nav,
.js-motion:not(.site-ready) h1 .line > span,
.js-motion:not(.site-ready) .hero-lead,
.js-motion:not(.site-ready) .hero__hud span,
.js-motion:not(.site-ready) .nav__logo .logo-letter {
  opacity: 0;
}

.js-motion.site-ready .hero__hud span {
  animation: hud-flicker 400ms steps(4, end) both;
}

.js-motion.site-ready .hero__hud span:nth-child(2) { animation-delay: 80ms; }
.js-motion.site-ready .hero__hud span:nth-child(3) { animation-delay: 160ms; }
.js-motion.site-ready .hero__hud span:nth-child(4) { animation-delay: 240ms; }

.hero-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
}

.hero-copy {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

h1 {
  font-size: var(--fs-hero);
  line-height: 1;
  text-transform: uppercase;
}

h1 .line { display: block; overflow: hidden; }

h1 .line > span { display: block; }

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

.js-motion.site-ready h1 .line > span {
  animation: line-up 700ms var(--ease) both;
  animation-delay: 300ms;
}

.js-motion.site-ready h1 .line:nth-child(2) > span { animation-delay: 400ms; }
.js-motion.site-ready h1 .line:nth-child(3) > span { animation-delay: 500ms; }

h2 .line { display: block; overflow: hidden; }
h2 .line > span { display: block; }
.js-motion h2 .line > span { transform: translateY(100%); }
.js-motion h2.is-in .line > span { animation: line-up 700ms var(--ease) both; }
.js-motion h2.is-in .line:nth-child(2) > span { animation-delay: 100ms; }
.js-motion h2.is-in .line:nth-child(3) > span { animation-delay: 200ms; }
/* === CHANGES-34: the stagger stopped at line 3, so a 4th+ line (CTA heading, CHANGES-32 A) had 0ms delay and rose with
   line 1 instead of in sequence. Continue the same 100ms step up to 6 lines (h1 and h2). === */
.js-motion h2.is-in .line:nth-child(4) > span { animation-delay: 300ms; }
.js-motion h2.is-in .line:nth-child(5) > span { animation-delay: 400ms; }
.js-motion h2.is-in .line:nth-child(6) > span { animation-delay: 500ms; }
.js-motion.site-ready h1 .line:nth-child(4) > span { animation-delay: 600ms; }
.js-motion.site-ready h1 .line:nth-child(5) > span { animation-delay: 700ms; }
.js-motion.site-ready h1 .line:nth-child(6) > span { animation-delay: 800ms; }
/* === /CHANGES-34 === */

.hero-lead {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px 24px;
  background: var(--glass);
  border: 1px solid rgb(var(--ink-rgb) / 0.16);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.hero-lead > p { font-size: var(--fs-lead); line-height: var(--lh-body); }

.js-motion.site-ready .hero-lead { animation: rise 700ms var(--ease) 900ms both; }

/* One-shot intro has played (set from main.js ~2s after site-ready). Detach it so a DOM move can't replay it. */
html.js-motion.hero-intro-done .hero__hud span,
html.js-motion.hero-intro-done h1 .line > span,
html.js-motion.hero-intro-done .hero-lead { animation: none; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.16);
}

.hero-stats dt {
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--cyan);
}

.hero-stats dd {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.marquee {
  display: flex;
  align-items: center;             /* vertical centring of the track at every breakpoint */
  min-height: 96px;
  padding-block: 20px;             /* CHANGES-30: 96 = 20 + 56 logo slot + 20 (was 32 + 32 text + 32) */
  padding-inline-start: 96px;
  overflow: hidden;
  background: var(--pink);
  color: var(--marquee-fg);        /* CHANGES-30 A.2: was var(--bg) + a Light --on-pink override; logos (currentColor) + "/" */
}

.marquee__track {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0;                          /* CHANGES-30: spacing moved onto the items (seamless −50% loop) */
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee ul {
  display: flex;
  align-items: center;
  gap: 0;                          /* CHANGES-30 */
  margin: 0;
  padding: 0;
}

.marquee li {
  display: flex;                   /* no inline line-box / baseline gap */
  align-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--fs-marquee);
  line-height: 1;
  white-space: nowrap;
}

.marquee img,
.marquee svg { display: block; height: 100%; width: auto; }

/* === CHANGES-30 client logos ===
   Loop seam fix: 56px after EVERY item (incl. the last) instead of flex gap, so the track is exactly two identical
   periods and translateX(-50%) lands on the start of half 2 (gap left it half a gap short → jump at the wrap).
   Logo slot: each SVG's viewBox is the slot (W × 56) with the logo pre-centred; set the height, width follows. */
.marquee li { margin-inline-end: 56px; }
.marquee__logo { flex: none; height: 56px; }
.marquee__name { text-transform: uppercase; }   /* text fallback for a client without a logo (old style) */
/* === CHANGES-31 separator width === */
.marquee .sep { justify-content: center; width: .34375em; }   /* CHANGES-31: 11px at 32 (Figma Medium "/"), was .4375em (14, Black) */
/* === /CHANGES-31 === */
/* === CHANGES-30 Amendment B: separators at weight 500 === */
.marquee li.sep { font-weight: 500; }
/* === /CHANGES-30 Amendment B === */   /* "/" box = Figma's 14px at 32px (this font subset's glyph is 13.1), so slots land on the spec's x positions */
/* Inset seam: at the loop start the 96px left inset is empty, but at the −50% point it shows half 1's trailing "/",
   which popped out at every wrap. This decorative "/" sits one gap before the track, so the inset matches at both ends. */
.marquee__track { position: relative; }
.marquee__track::before {
  content: "/";
  content: "/" / "";
  position: absolute;
  top: 50%;
  right: 100%;
  display: flex;
  justify-content: center;
  width: .34375em;   /* CHANGES-31: match .sep (was .4375em) */
  margin-inline-end: 56px;
  font-family: var(--display);
  font-weight: 500;   /* CHANGES-31: Medium, match .sep (was 900) */
  font-size: var(--fs-marquee);
  line-height: 1;
  transform: translateY(-50%);
}
.reduced-motion .marquee__track::before { content: none; }   /* static: no loop, so keep the inset empty (as Figma) */
@media (prefers-reduced-motion: reduce) { .marquee__track::before { content: none; } }
/* === /CHANGES-30 === */

.reduced-motion .marquee { overflow: hidden; }

.reduced-motion .marquee__track { animation: none; }

/* CHANGES-09: Proof + Team slide up over the pinned hero. */
.cover {
  position: relative;
  z-index: 2;                                      /* above hero (1), below header (100) */
  background: var(--bg);                             /* opaque page bg so nothing from the hero shows through */
  border-top: 1px solid rgb(var(--ink-rgb) / .12);
  box-shadow: 0 -24px 48px var(--bg-a60); /* CHANGES-29 B */
  clip-path: inset(-48px 0 0 0);                   /* keep the lift shadow above the cover, not below it */
}
.cover__edge {
  position: absolute;
  inset: -1px 0 auto 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--cyan-line) 100%);
  transform-origin: left center;
  transform: scaleX(1);                            /* static (reduced motion, no JS); GSAP draws 0 → 1 */
  pointer-events: none;
}
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.js-motion .card.reveal.is-in:hover,
.js-motion .card.reveal.is-in:focus-within {
  transform: translateY(-4px);
}

.coarse .card:hover,
.coarse .card:focus-within,
.reduced-motion .card:hover,
.reduced-motion .card:focus-within {
  transform: none;
  box-shadow: none;
}

.coarse .case:hover .case-media img,
.coarse .case:focus-within .case-media img,
.reduced-motion .case:hover .case-media img,
.reduced-motion .case:focus-within .case-media img { transform: none; }

.compare, .steps, .card-grid {
  display: grid;
  gap: var(--gutter);
}

.compare { grid-template-columns: repeat(3, 1fr); }

.compare-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.16);
  color: var(--muted);
}

.compare-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-xl {
  font-weight: 800;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--text);
}

.compare-col p:last-child { font-size: 16px; line-height: 1.5; }

.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  line-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: transform 200ms var(--ease-power1-inout), box-shadow 200ms var(--ease-power1-inout), border-color 200ms var(--ease-power1-inout);
}

.card :where(p, li, dd) { line-height: 1.5; }

.card:hover,
.card:focus-within {
  border-color: var(--pink-hi);
  transform: translateY(-4px);
  box-shadow:
    0 0 8px var(--pink-a60),
    0 8px 32px var(--pink-a35),
    0 16px 64px var(--cyan-a18); /* CHANGES-29 B */
}

.price-featured:hover,
.price-featured:focus-within { border-color: rgb(var(--ink-rgb) / 0.6); }

.brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  line-height: 0;
}

.brackets i {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  border-color: var(--pink);
  border-style: solid;
  border-width: 0;
  transition: opacity 200ms var(--ease-power1-inout);
}

.card:hover .brackets i,
.card:focus-within .brackets i { opacity: 1; }

.brackets i:nth-child(1) { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.brackets i:nth-child(2) { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.brackets i:nth-child(3) { right: 8px; bottom: 8px; border-right-width: 2px; border-bottom-width: 2px; }
.brackets i:nth-child(4) { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }

.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      160% 140% at calc(var(--gx, 68%) + 14%) calc(var(--gy, 24%) + 18%),
      rgb(var(--purple-glow-rgb) / .16) 0%, /* CHANGES-29 */
      transparent 68%
    ),
    radial-gradient(
      140% 130% at var(--gx, 62%) var(--gy, 28%),
      rgb(var(--pink-rgb) / .2) 0%,
      rgb(var(--purple-glow-rgb) / .1) 42%,
      transparent 74%
    );
  mix-blend-mode: screen;
  transition: opacity 200ms var(--ease-power1-inout);
}

.card:hover .glare,
.card:focus-within .glare { opacity: 1; }

.card-index {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tilt-title { transform: translateZ(0); }

.plus-list {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.steps { grid-template-columns: repeat(4, 1fr); }

.step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  border-top: 2px solid var(--cyan-line);
}

.numeral {
  color: transparent;
  font-size: var(--fs-num);
  line-height: 1;
  -webkit-text-stroke: 1px var(--pink);
}

.when {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case {
  gap: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 0;
}

.case-body { font-size: 16px; }

.case-media {
  position: relative;
  height: 352px;
  overflow: hidden;
}

.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms var(--ease-power1-inout);
}

.case:hover .case-media img,
.case:focus-within .case-media img { transform: scale(1.04) translateZ(40px); }

.case-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(var(--cyan-rgb) / .1), rgb(var(--pink-rgb) / .22)); /* CHANGES-29 */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 200ms var(--ease-power1-inout);
}

.case:hover .case-overlay,
.case:focus-within .case-overlay { opacity: 1; }

.case-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 32px 40px;
}

.case-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.case-meta > p:first-child {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case h3 { font-size: var(--fs-case); line-height: 1; }

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.metrics dt {
  font-weight: 800;
  font-size: var(--fs-metric);
  line-height: 1;
  color: var(--pink);
}

.metrics dd { margin: 8px 0 0; color: var(--muted); }

.price { gap: 32px; }

.price-head { display: flex; flex-direction: column; gap: 16px; }

.price-line {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.per { color: var(--muted); font-weight: 500; line-height: 1.5; }

.price-featured {
  background: var(--pink);
  border-color: transparent;
  color: var(--on-pink);
}

.price-featured .per,
.price-featured .plus-list,
.price-featured p { color: var(--on-pink); }

.price-featured .plus-list { border-top-color: rgb(var(--pc-hot-fg-rgb) / .32); } /* CHANGES-29 B */

.testimonial { padding-block: 120px; background: var(--purple); }

.quote-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px;
  margin: 0;
}

.quote-meta { grid-column: span 3; display: flex; flex-direction: column; gap: 24px; }

.quote-row > div:last-child { grid-column: span 9; display: flex; flex-direction: column; gap: 40px; }

.quote-mark {
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--cyan);
}

blockquote p {
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.2;
}

figcaption {
  padding-top: 24px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.32);
  font-weight: 600;
}

.faq-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.faq-intro {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-intro .lead { grid-column: auto; }

.faq-list { grid-column: span 8; }

.faq-item { border-top: 1px solid rgb(var(--ink-rgb) / 0.12); }

.faq-item h3 { font-family: var(--body); font-weight: 500; font-size: 20px; line-height: 1.2; }

.faq-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 32px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.faq-item button[aria-expanded="true"] { padding-bottom: 16px; }

.faq-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--cyan);
}

.faq-icon svg { display: block; width: 24px; height: 24px; }

.faq-icon .faq-v { transform-origin: center; transform-box: fill-box; }

html:not(.faq-js) .faq-item button[aria-expanded="true"] .faq-v { transform: rotate(90deg) scaleY(0); }

.faq-a { overflow: hidden; }

.faq-a[hidden] { display: none; }

.faq-a-inner { overflow: hidden; }

.faq-a p {
  padding-bottom: 32px;
  color: var(--muted);
}

.cta {
  position: relative;
  padding-block: var(--section);
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  right: -10%;
  bottom: -30%;
  width: 70%;
  height: 80%;
  background: radial-gradient(circle, rgb(var(--purple-glow-rgb) / .55), rgb(var(--pink-rgb) / .28) 42%, transparent 70%); /* CHANGES-29 */
  pointer-events: none;
}

.cta .tag { position: relative; margin-bottom: 48px; }

.cta-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
}

.cta h2 {
  grid-column: span 7;
  font-size: var(--fs-h2);
  line-height: 1;
}

.accent-orange { color: var(--cyan); }

.cta-lead {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cta-lead p { font-size: 16px; line-height: var(--lh-body); color: var(--muted); } /* CHANGES-29 A.1: body = --muted (was --text) */

/* === CHANGES-32: closing CTA contact form (Contact Form 7). Figma 568:3522 (Amendment A) / 557:1850 / 565:1868. === */
/* CHANGES-32 A: Figma 568:3522, heading cols 1–6 (tag, H2, email), lead + form cols 7–12, top-aligned */
.cta-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; column-gap: var(--gutter); align-items: start; }
.cta .cta-heading { grid-column: 1 / span 6; grid-row: 1; display: flex; flex-direction: column; gap: 48px; }
.cta .cta-heading .tag { margin-bottom: 0; } /* CHANGES-32 A: gap 48 replaces .cta .tag margin here */
.cta-email { grid-column: 1 / span 6; grid-row: 2; margin-top: 48px; }
.cta-main { grid-column: 7 / span 6; grid-row: 1 / span 2; padding-top: 76px; display: flex; flex-direction: column; gap: 48px; min-width: 0; } /* 76 = tag 28 + gap 48 */
.cta-lead__copy { display: flex; flex-direction: column; gap: 12px; } /* Figma 568:3530: paragraph spacing 12 */
.cta-lead__copy p { margin: 0; font-size: 16px; line-height: var(--lh-body); color: var(--muted); text-wrap: pretty; hyphens: manual; }
.cta-form { min-width: 0; }
.cta-form .wpcf7-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-field .wpcf7-form-control-wrap { display: block; position: relative; }
.cf-label { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.cta-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea, .cf-select__button) {
  box-sizing: border-box; display: block; width: 100%; min-height: 56px; margin: 0;
  padding: 15px 16px; border: 1px solid var(--dim); border-radius: 0;
  background: var(--surface); color: var(--text);
  font: 400 16px/1.5 var(--body); appearance: none; -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.cta-form textarea { height: 160px; resize: vertical; }
.cta-form ::placeholder { color: var(--muted-2); opacity: 1; }
.cta-form select, .cta-form .cf-select__button { padding-right: 44px; cursor: pointer; }
.cta-form select:has(option[value=""]:checked) { color: var(--muted-2); }
.cta-form select option { color: var(--text); background: var(--surface-2); }
.cta-form .cf-select__button { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-form .cf-select__button.is-placeholder { color: var(--muted-2); }
.cf-field--select .wpcf7-form-control-wrap::after {
  content: ""; position: absolute; top: 20px; right: 16px; width: 16px; height: 16px;
  background: var(--muted); pointer-events: none; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cf-field--select.is-open .wpcf7-form-control-wrap::after { transform: rotate(180deg); }
.cta-form :is(input, select, textarea, .cf-select__button):hover { border-color: var(--muted); }
.cta-form :is(input, select, textarea, .cf-select__button):focus { outline: none; border-color: var(--focus); }
.cta-form :is(input, select, textarea, .cf-select__button):focus-visible { box-shadow: 0 0 0 1px var(--focus); }
.cf-field--select.is-open .cf-select__button { border-color: var(--focus); }
.cta-form :is(input, select, textarea, .cf-select__button).wpcf7-not-valid { border-color: var(--pink-ui); }
.cta-form .wpcf7-not-valid-tip { margin-top: 8px; font: 400 12px/1.5 var(--body); color: var(--pink-ui); }
.cf-footer { display: flex; align-items: center; gap: 24px; }
.cf-note { flex: 1 1 auto; margin: 0; font: 400 16px/1.5 var(--body); color: var(--muted); }
.cf-footer .wpcf7-submit { flex: none; cursor: pointer; }
.cta-form .wpcf7-spinner { display: none; }
.cta-form .wpcf7-form.submitting .wpcf7-submit, .cta-form .wpcf7-submit:disabled { opacity: .48; pointer-events: none; cursor: progress; }
.cta-form .wpcf7 form.wpcf7-form .wpcf7-response-output { margin: 0; padding: 12px 16px; border: 1px solid var(--pink-ui); background: var(--pink-a08); color: var(--text); font: 400 16px/1.5 var(--body); }
.cta-form .wpcf7 form.wpcf7-form.sent .wpcf7-response-output { border-color: var(--cyan); background: var(--cyan-a06); }
.cta-form .wpcf7 form.wpcf7-form:is(.init, .resetting, .submitting) .wpcf7-response-output, .cta-form .wpcf7 form.wpcf7-form .wpcf7-response-output:empty { display: none; }
.cf-consent .wpcf7-form-control-wrap { display: block; }
.cf-consent .wpcf7-list-item { display: block; margin: 0; }
.cf-consent label { display: flex; align-items: flex-start; gap: 12px; font: 400 16px/1.5 var(--body); color: var(--muted); cursor: pointer; }
.cf-consent input[type="checkbox"] { flex: none; box-sizing: border-box; width: 20px; height: 20px; margin: 2px 0 0; border: 1px solid var(--dim); border-radius: 0; background: var(--surface); appearance: none; -webkit-appearance: none; display: grid; place-content: center; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.cf-consent input[type="checkbox"]::before { content: ""; width: 16px; height: 16px; background: var(--on-pink); transform: scale(0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.cf-consent input[type="checkbox"]:checked { background: var(--pink); border-color: var(--pink); }
.cf-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.cf-consent input[type="checkbox"]:hover { border-color: var(--muted); }
.cf-consent input[type="checkbox"]:checked:hover { border-color: var(--pink); }
.cf-consent input[type="checkbox"]:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.cf-consent .wpcf7-not-valid input[type="checkbox"]:not(:checked) { border-color: var(--pink-ui); }
.cf-consent .wpcf7-not-valid-tip { margin: 8px 0 0 32px; }
.cf-consent a { color: var(--pink-ui); text-decoration: underline; text-underline-offset: 2px; }
.cf-consent a:hover { color: var(--pink-hover); }
.cf-recaptcha { margin: 0; font: 400 12px/1.5 var(--body); color: var(--muted-2); }
.cf-recaptcha a { color: inherit; text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; } /* CHANGES-32: disclosure shown in the form instead */
/* Package menu (Figma 557:1850 "Menu (listbox)"), built by initCtaSelect() in main.js */
.cf-select__list { position: absolute; top: calc(56px + 8px); left: 0; right: 0; z-index: 20; margin: 0; padding: 4px 0; list-style: none; background: var(--surface-2); border: 1px solid var(--dim); }
.cf-select__list[hidden] { display: none; }
.cf-select__option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; font: 400 16px/1.5 var(--body); color: var(--text); cursor: pointer; }
.cf-select__option:hover, .cf-select__option.is-active, .cf-select__option[aria-selected="true"] { background: var(--pink-a08); color: var(--pink-ui); }
.cf-select__option[aria-selected="true"]::after { content: ""; margin-left: auto; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (forced-colors: active) {
  .cf-select__option.is-active, .cf-select__option[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .cf-field--select .wpcf7-form-control-wrap::after, .cf-select__option[aria-selected="true"]::after { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-form :is(input, select, textarea, .cf-select__button), .cf-field--select .wpcf7-form-control-wrap::after { transition: none; }
}
/* CHANGES-32 A.5: stacked order tag → H2 → lead → form → email button */
@media (max-width: 1023.98px) {
  .cta-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 48px; }
  .cta .cta-heading, .cta-main, .cta-email { grid-column: 1 / -1; grid-row: auto; }
  .cta-main { padding-top: 0; }
  .cta-email { margin-top: 0; }
}
@media (max-width: 767.98px) {
  .cta-grid { row-gap: 40px; }
  .cta-main { gap: 40px; }
  .cf-row { grid-template-columns: 1fr; }
  .cf-footer { flex-direction: column; align-items: stretch; gap: 16px; }
  .cf-footer .wpcf7-submit { width: 100%; justify-content: center; }
}
/* === /CHANGES-32 === */

.footer {
  /* TBD CHANGES-07: top padding stays 96 rather than scaling to 120 at 1920. */
  padding: 96px 0 48px;
  background: var(--footer);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc((100% - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter));
  max-width: none;
  flex: none;
}

.footer-brand p { color: var(--index); }

.footer-cols { display: flex; gap: 96px; }

.footer-cols p {
  margin-bottom: 16px;
  color: var(--cyan-dark);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: var(--lh-label);
  text-transform: uppercase;
}

.footer-cols li + li { margin-top: 16px; }

.footer-cols a { font: 400 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--index); text-decoration: none; position: relative; display: inline-block; }
.footer-cols a[href^="mailto:"] { text-transform: none; }
/* CHANGES-13: footer nav hover. JS (main.js initFooterNav) injects .footer-link__line and owns colour + line
   when html.footer-gsap is set. Without it (no JS / no GSAP / reduced motion / no hover device): colour-only CSS state. */
.footer-link__line { position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--pink-line); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
html:not(.footer-gsap) .footer-cols a:focus-visible { color: var(--text); }
@media (hover: hover) { html:not(.footer-gsap) .footer-cols a:hover { color: var(--text); } }
.footer-cols a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 80px;
  padding-top: 24px;
  border-top: 0;
  position: relative;
  color: var(--index);
}
.footer-bottom::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--divider); } /* CHANGES-29 A.3: footer divider = --divider (was ink 6%) */
.footer-bottom p, .footer-sys { color: var(--index); }

.footer-sys {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: 0.12em;
}

#services, #process, #work, #pricing, #faq, #cta, #problem, #top {
  scroll-margin-top: var(--nav-h);
}

.js-motion .reveal {
  opacity: 0;
  transform: translateY(40px);
}

.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js-motion .card--service.reveal {
  opacity: 0;
  transform: none;                                 /* fade only: no scale or rise (CSS reveal; IO stagger adds .is-in) */
}

.js-motion .card--service.reveal.is-in {
  opacity: 1;
  transform: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hud-flicker {
  0% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes line-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes eye-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes city-flicker {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

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

@media (max-width: 1279px) {
  .card-grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3, .compare { grid-template-columns: 1fr; }
  .hud { flex-wrap: wrap; }
}

@media (max-width: 1023.98px) {
  .footer-brand { width: auto; }
  .section-head, .hero-row, .quote-row, .faq-row, .cta-row { display: flex; flex-direction: column; align-items: stretch; }
  .section-heading, .lead, .hero-copy, .hero-lead, .quote-meta, .quote-row > div, .faq-intro, .faq-list, .cta h2, .cta-lead { grid-column: auto; width: 100%; }
}

@media (max-width: 767px) {
  :root {
    --margin: 24px;
    --gutter: 16px;
    --section: 80px;
    --gap-head: 48px;
    --fs-hero: 64px;
    --fs-h2: 40px;
    --fs-num: 96px;
    --fs-stat: 56px;
    --fs-price: 64px;
    --fs-metric: 48px;
    --fs-h3: 32px;
    --fs-case: 24px;
    --fs-quote: 24px;
    --fs-marquee: 24px;
    --fs-lead: 16px;
    --fs-menu: 40px;
    --hdr: 64px;
    --nav-h: 64px;
  }

  .card-grid-4, .steps, .hero-stats { grid-template-columns: 1fr; }

  .hero {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    align-items: flex-start;
    padding: calc(var(--hdr) + 16px) var(--edge) 32px;
    overflow: visible;
  }
  .hero__video { object-position: 78% center; }
  .hero__bg { background-position: 78% center; }
  .hero-body { gap: 20px; }
  .hero-copy { gap: 12px; }
  .hero h1 { font-size: var(--fs-hero); }
  .hero h1 .line { overflow: visible; }
  .hero-lead > p { font-size: 16px; line-height: var(--lh-body); }
  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
  }
  .hero-stats dt { font-size: 22px; }
  .hero-stats dd { margin-top: 4px; font-size: 12px; line-height: var(--lh-small); }

  .btn-row .btn { width: 100%; }

  .footer-top, .footer-cols, .footer-bottom { flex-direction: column; gap: 40px; }

  .footer-cols { gap: 40px; }

  .case { min-height: 0; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    align-items: flex-start;
    padding: calc(var(--hdr) + 12px) 24px 20px;
    overflow: visible;
  }
  .hero__hud { display: none; }
  .hero-body { gap: 12px; }
  .hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 16px;
  }
  .hero-copy { gap: 8px; width: auto; }
  .hero h1 { font-size: 36px; }
  .hero h1 .line { overflow: visible; }
  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 8px;
  }
  .hero-stats dt { font-size: 18px; }
  .hero-stats dd { margin-top: 2px; font-size: 11px; line-height: var(--lh-small); }
}

html.coarse .card:hover,
html.coarse .card:focus-within,
html.coarse.js-motion .card.reveal.is-in:hover,
html.coarse.js-motion .card.reveal.is-in:focus-within,
html.reduced-motion .card:hover,
html.reduced-motion .card:focus-within {
  transform: none;
  box-shadow: none;
}

.count { font-variant-numeric: tabular-nums; display: inline-block; }

.card__list li { color: var(--muted-2); }
.card__list li:first-child { color: var(--text); }
.card--featured .card__list li,
.price-featured .card__list li { color: var(--text); }
.card--featured .card-index { color: var(--cyan); }

#problem .compare__col:not(.compare__col--us) .compare__value,
#problem .compare__col:not(.compare__col--us) .compare__body { color: var(--muted-2); }
#problem .compare__col--us .compare__value { color: var(--pink); }

/* CHANGES-29: removed unused `#cta h2 .accent` (the CTA heading uses .kw). */

.footer__logo { /* CHANGES-20 fix: logo.svg used as a mask so the ink follows the theme (was an <img> forced white by a filter) */
  display: block; flex: none; width: 148px; height: 32px; opacity: .56;
  background-color: var(--footer-logo);
  -webkit-mask: url("assets/img/logo.svg") center / contain no-repeat;
  mask: url("assets/img/logo.svg") center / contain no-repeat;
}
@media (forced-colors: active) { .footer__logo { background-color: CanvasText; forced-color-adjust: none; } }

#services, #process, #work, #pricing, #cta, footer { border-top: 1px solid var(--divider); }

#process .step__num { color: var(--pink); -webkit-text-stroke: 0; }

html.static-hero .hero__bg::before,
html.reduced-motion .hero__bg::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .marquee__track { animation: none; }
  .hero__bg::before { animation: none; }
  .reveal, h1 .line > span, h2 .line > span, .hero-lead, .site-header, .hud-item { opacity: 1 !important; transform: none !important; }
  .nav__logo .logo-letter { fill: var(--pink); stroke: none; }
}

/* CHANGES-17: preloader v2. Full-screen curtain, centred logo write-on (reuses the header logo-draw/logo-fill
   keyframes), bottom progress line, LOADING/READY label and counter; exit lifts the curtain.
   Owners: CSS = logo letters (stroke/fill) and the READY colour; GSAP = bar scaleX and the exit (see below),
   overlay opacity (reduced motion). JS = the counter/status text and the is-writing / is-complete classes. */
.preloader{display:none;}
.is-preloading .preloader{display:block;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:1000;pointer-events:none;background:transparent;}
.is-preloading body{overflow:hidden;}
/* Per Nico: keep the CHANGES-14 vertical exit. The two panels carry the var(--bg); the curtain only holds the v2 UI
   and fades out as the blade starts (GSAP owns curtain opacity, blade line/tip, panel xPercent, --edge-o). */
.preloader__curtain{position:absolute;inset:0;z-index:1;}
.preloader__panel{position:absolute;top:0;bottom:0;width:50%;background:var(--bg);will-change:transform;}
.preloader__panel--top{left:0;}
.preloader__panel--bottom{right:0;}
.preloader__panel--top::after,.preloader__panel--bottom::before{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--pink-line);box-shadow:0 0 4px rgb(var(--pink-line-rgb) / .55);opacity:var(--edge-o,0);} /* CHANGES-29 */
.preloader__panel--top::after{right:0;}
.preloader__panel--bottom::before{left:0;}
.preloader__blade{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:2;pointer-events:none;}
.preloader__line{position:absolute;top:0;left:-1px;height:100%;width:2px;background:var(--pink-line);
  box-shadow:0 0 4px rgb(var(--pink-line-rgb) / .55);transform:scaleY(0);transform-origin:center top;will-change:transform,opacity;}
.preloader__tip{position:absolute;bottom:0;left:0;height:24px;width:100%;
  background:linear-gradient(180deg,rgb(var(--cyan-rgb) / 0),var(--cyan-line));box-shadow:0 0 3px rgb(var(--cyan-rgb) / .6);opacity:0;} /* CHANGES-29 */
@media (max-width:767px){ .preloader__line{width:1px;left:-.5px;} }
@media (prefers-reduced-motion:reduce){ .preloader__blade{display:none;} }
.preloader__logo{position:absolute;left:50%;top:50%;width:224px;height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 16px rgb(var(--pink-rgb) / .35));} /* CHANGES-29 */
.preloader__logo .logo-letter{fill:var(--pink);}
.preloader.is-writing .preloader__logo .logo-letter{
  fill:transparent;stroke:var(--pink);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);
  animation:logo-draw .7s var(--ease) forwards, logo-fill .28s var(--ease) forwards;
  animation-delay:calc(var(--i)*80ms),calc(var(--i)*80ms + 480ms);}
.preloader__label,.preloader__counter{position:absolute;bottom:48px;font:500 12px/16px "Geist Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;}
.preloader__label{left:48px;color:var(--muted-2);}
.preloader.is-complete .preloader__label{color:var(--cyan);}
.preloader__counter{right:48px;display:flex;gap:4px;color:var(--pre-counter);font-variant-numeric:tabular-nums;}
.preloader__pct{color:var(--cyan);}
.preloader__track{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pre-track);}
.preloader__bar{position:absolute;inset:0;background:var(--pink);transform-origin:left center;transform:scaleX(0);}
@media (max-width:767px){
  .preloader__logo{width:160px;}
  .preloader__label,.preloader__counter{bottom:24px;}
  .preloader__label{left:24px;} .preloader__counter{right:24px;}
}
@media (prefers-reduced-motion:reduce){ .preloader__logo .logo-letter{fill:var(--pink);stroke:none;animation:none;} }
html.reduced-motion .preloader__logo .logo-letter{fill:var(--pink);stroke:none;animation:none;}

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

/* full-screen menu */
.menu-open .site-header{z-index:910;}
/* menu-fix: no overflow lock on html/body; scroll is held in JS (menuFixLock) so opening never changes layout. */

.menu-toggle{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 16px;border:1px solid rgb(var(--ink-rgb) / .24);background:none;color:var(--text);cursor:pointer;
  font:500 12px/1.5 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;}
.menu-toggle:hover{border-color:rgb(var(--ink-rgb) / .48);}
.menu-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.menu-toggle__label{display:grid;}
.menu-toggle__label>span{grid-area:1/1;transition:opacity .2s var(--ease-power1-inout);}
.menu-toggle__label>span:last-child,.menu-open .menu-toggle__label>span:first-child{opacity:0;}
.menu-open .menu-toggle__label>span:last-child{opacity:1;}
@media (prefers-reduced-motion: reduce) {
  .menu-open .menu-toggle__icon i:nth-child(1) { transform: translateY(5px) rotate(45deg) !important; }
  .menu-open .menu-toggle__icon i:nth-child(2) { opacity: 0 !important; }
  .menu-open .menu-toggle__icon i:nth-child(3) { width: 20px; transform: translateY(-5px) rotate(-45deg) !important; }
}
.menu-toggle__icon{position:relative;width:20px;height:12px;flex:none;}
.menu-toggle__icon i{position:absolute;left:0;height:2px;width:20px;background:var(--text);transform-origin:center;}
.menu-toggle__icon i:nth-child(1){top:0;}
.menu-toggle__icon i:nth-child(2){top:5px;}
.menu-toggle__icon i:nth-child(3){top:10px;width:12px;background:var(--pink);}

.site-menu{--muted:var(--muted-2);--line:rgb(var(--ink-rgb) / .08);
  position:fixed;inset:0;z-index:900;background:var(--bg);padding-top:var(--hdr);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;}
.site-menu[hidden]{display:none;}
.site-menu__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(57.3vw 36.5vw at 85% 100%,rgb(var(--pink-rgb) / .22),transparent 70%),
             radial-gradient(52.1vw 36.5vw at 10% 100%,rgb(var(--purple-glow-rgb) / .20),transparent 70%);} /* CHANGES-29 */
.site-menu__body{position:relative;flex:1;display:flex;gap:24px;padding:40px var(--edge);}
.menu-links{flex:1;list-style:none;margin:0;padding:0;min-width:0;container-type:inline-size;}
.menu-links li{border-top:1px solid var(--line);}
.menu-link{display:flex;align-items:center;gap:24px;padding:16px 0;min-height:44px;color:var(--text);text-decoration:none;
  transition:color .25s var(--ease-power2-inout);}
.menu-link__idx{font:500 16px/var(--lh-label) "Geist Mono",monospace;color:var(--text);min-width:24px;transition:color .25s var(--ease-power1-inout);}
.menu-link__label{font:900 var(--fs-menu)/1 "Big Shoulders Display",sans-serif;letter-spacing:0;text-transform:uppercase;white-space:nowrap;transition:text-shadow .25s var(--ease-power1-inout);}
@media (min-width:1024px){
  .menu-link__label{font-size:min(var(--fs-menu), calc((100cqi - 128px) / 3.46));}
}
@media (min-width:1024px) and (max-height:899.98px){
  .menu-link__label{font-size:min(var(--fs-menu), calc((100cqi - 128px) / 3.46), 9.5svh);}
}
.menu-link__arrow{margin-left:auto;width:40px;height:40px;color:var(--pink);opacity:0;transition:opacity .25s var(--ease-power1-inout);flex:none;}
.menu-link__arrow svg{display:block;width:100%;height:100%;}
.menu-link__arrow .arrow-mob{display:none;}
.menu-link[aria-current="true"],.menu-link[aria-current="true"] .menu-link__idx{color:var(--pink);}
.menu-link[aria-current="true"] .menu-link__label{text-shadow:0 0 24px rgb(var(--pink-rgb) / .55);} /* CHANGES-29 */
.menu-link[aria-current="true"] .menu-link__arrow{opacity:1;}
@media (hover:hover) and (min-width:1024px){
  .menu-links .menu-link:hover,.menu-links .menu-link:focus-visible{color:var(--pink);}
  .menu-links .menu-link:hover .menu-link__idx,.menu-links .menu-link:focus-visible .menu-link__idx{color:var(--pink);}
  .menu-link:hover .menu-link__label,.menu-link:focus-visible .menu-link__label{text-shadow:0 0 24px rgb(var(--pink-rgb) / .55);} /* CHANGES-29 */
  .menu-link:hover .menu-link__arrow,.menu-link:focus-visible .menu-link__arrow{opacity:1;}
}
.menu-link:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;}

.menu-panel{width:calc((100% - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter));flex:none;display:flex;flex-direction:column;gap:24px;}
.btn--block{width:100%;height:56px;min-height:56px;justify-content:space-between;padding:0 24px;box-shadow:0 0 32px rgb(var(--pink-rgb) / .35);} /* CHANGES-29 */
.menu-contact{margin:0;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.menu-contact>div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:24px;}
.menu-contact dt{font:400 12px/1 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.menu-contact dd{margin:0;font:400 16px/1.5 "Switzer",sans-serif;color:var(--text);white-space:nowrap;}
.menu-contact a{color:inherit;display:inline-block;padding:10px 0;margin:-10px 0;}
.menu-contact .hud-tag{margin:0 0 4px;color:var(--cyan);}
.site-menu__hud{position:relative;display:flex;justify-content:space-between;gap:16px;padding:24px var(--edge) 32px;border-top:1px solid var(--line);
  font:400 12px/1 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

@media (max-width:1023.98px){
  .site-header{padding:0 40px;}
  .nav{display:none;}
  .site-menu__body{flex-direction:column;padding:40px;}
  .menu-link{padding:12px 0;}
  .menu-link__label{font-size:96px;}
  .menu-panel{width:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
  .site-menu__hud{padding:24px 40px 32px;}
}
@media (max-width:767.98px){
  .site-header{height:64px;padding:0 20px;}
  .hud-tag,.header__cta,.menu-toggle__label{display:none;}
  .menu-toggle{width:44px;height:44px;padding:0;justify-content:center;border:0;}
  .site-menu__body{padding:24px 24px 32px;}
  .menu-link{padding:12px 0;gap:16px;}
  .menu-link__idx{font-size:12px;}
  .menu-link__label{font-size:64px;}
  .menu-link__arrow { width: 16px; height: 16px; }
  .menu-link__arrow .arrow-desk { display: none; }
  .menu-link__arrow .arrow-mob { display: block; }
  .menu-cta .btn__icon { width: 16px; height: 16px; }
  .menu-cta .btn__icon .icon-20 { display: none; }
  .menu-cta .btn__icon .icon-16 { display: block; }
  .menu-panel{display:flex;flex-direction:column;}
  .menu-contact .hud-tag{display:inline-flex;}
  .site-menu__hud{padding:20px 20px 32px;}
  .hide-sm{display:none;}
}


/* === CHANGES-24 mega menu === */
/* Glass panel (header glass), header nav hidden at all widths (markup kept), video box.
   Motion: GSAP owns opacity/transform of .menu-link, .menu-panel > *, .site-menu__hud; CSS here only sets layout/colour. */
.nav{display:none;}
.site-menu{background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.menu-link__idx{font-size:12px;}
.menu-video{aspect-ratio:16/9;border:1px solid rgb(var(--ink-rgb) / .16);background:var(--bg);overflow:hidden;}
.menu-video video{display:block;width:100%;height:100%;object-fit:cover;}
@media (min-width:1024px){
  .site-menu{inset:0 0 auto 0;max-height:100svh;border-bottom:1px solid rgb(var(--ink-rgb) / .08);}
  .site-menu__glow{display:none;}
  .site-menu__body{flex:none;padding:32px var(--edge) 28px;align-items:center;}
  .menu-links{display:flex;flex-direction:column;align-self:stretch;}
  .menu-links li{flex:1;display:flex;flex-direction:column;justify-content:center;}
  .menu-link{padding:4px 0;}

  .menu-link__label{font-size:32px;line-height:40px;}
  .menu-panel{width:240px;gap:24px;}
  .menu-video{width:240px;}
  .menu-cta{display:none;}
}
@media (max-width:1023.98px){
  .site-menu__body{display:flex;flex-direction:column;}
  .menu-link{padding:8px 0;}
  .menu-link__label{font-size:48px;line-height:52px;}
  .menu-panel{margin-top:auto;display:flex;flex-direction:column;gap:24px;}
  .menu-video{order:1;width:100%;}
}
/* Active = current section (Figma 103-765/103-858): idx + label pink with glow; rest idx muted. */
.site-menu .menu-link__idx{color:var(--muted);}
.site-menu .menu-link[aria-current="true"],.site-menu .menu-link[aria-current="true"] .menu-link__idx{color:var(--pink);}
.site-menu .menu-link[aria-current="true"] .menu-link__label,
.site-menu .menu-link:hover .menu-link__label,.site-menu .menu-link:focus-visible .menu-link__label{text-shadow:0 0 24px color-mix(in srgb, var(--pink) 40%, transparent);}
/* Fit: page scrollbar space is reserved so locking scroll (overflow:hidden / Lenis stop) causes no width jump;
   the panel is sized to the viewport so it never needs its own scrollbar. */
html{scrollbar-gutter:stable;}
.site-menu{overflow:hidden;}
@media (min-width:1024px){
  .menu-link__label{font-size:min(32px, 4.2svh);line-height:min(40px, 5.2svh);}
}
@media (min-width:1024px) and (max-height:640px){
  .site-menu__hud{display:none;}
  .site-menu__body{padding-top:16px;padding-bottom:16px;}
}
@media (min-width:1024px) and (max-height:520px){ .menu-video{display:none;} }
@media (max-width:1023.98px){
  .site-menu{height:100svh;}
  .site-menu__body{flex:1 1 auto;min-height:0;}
  .menu-link__label{font-size:min(48px, 5.4svh);line-height:min(52px, 5.9svh);}
  .menu-panel{flex:0 1 auto;min-height:0;}
  .menu-video{flex:0 1 auto;min-height:0;max-height:min(192px, 22svh);aspect-ratio:auto;height:calc((100vw - 80px) * 9 / 16);}
}
@media (max-width:767.98px){
  .site-menu__hud{display:none;} /* not in Figma 103-648; frees ~64px */
  .menu-video{height:calc((100vw - 48px) * 9 / 16);}
}
@media (max-width:1023.98px) and (max-height:600px){ .menu-video{display:none;} .menu-link{padding:6px 0;} }
@media (max-height:540px){ .site-menu{overflow-y:auto;scrollbar-width:none;} .site-menu::-webkit-scrollbar{display:none;} } /* last resort: very short (landscape phone) */
/* HUD strip: same flicker as the hero HUD (hud-flicker 400ms steps(4,end), 80ms stagger). CSS owns the spans;
   GSAP owns the .site-menu__hud container fade. .is-hud-on is added on open, removed on close so it replays.
   Base delay 460ms = when the open timeline starts the container (0.1 + 0.06*4 + 0.12s). */
.site-menu.is-hud-on .site-menu__hud>span{animation:hud-flicker 400ms steps(4, end) 460ms both;}
.site-menu.is-hud-on .site-menu__hud>span:nth-child(2){animation-delay:540ms;}
.site-menu.is-hud-on .site-menu__hud>span:nth-child(3){animation-delay:620ms;}
.site-menu.is-hud-on .site-menu__hud>span:nth-child(4){animation-delay:700ms;}
@media (prefers-reduced-motion:reduce){ .site-menu.is-hud-on .site-menu__hud>span{animation:none;} }
html.reduced-motion .site-menu.is-hud-on .site-menu__hud>span{animation:none;}
@media (min-width:1024px){ .site-menu__hud{font:400 8px/12px "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;} } /* desktop HUD type; <1024 keeps 12px/1 */
/* === /CHANGES-24 mega menu === */
/* === menu-fix === */
/* Panel opens BELOW the header: starts at the header's bottom edge (--header-h, measured in JS), never under its glass,
   so the two glass layers don't stack. Header stays above (z 910 vs 900). GSAP owns the panel's opacity + clip-path. */
.site-menu{top:var(--header-h, var(--hdr));bottom:auto;padding-top:0;max-height:calc(100svh - var(--header-h, var(--hdr)));}
@media (max-width:1023.98px){ .site-menu{height:calc(100svh - var(--header-h, var(--hdr)));} }
/* === /menu-fix === */

/* CHANGES-05 */
.kw { color: var(--pink); }
h1, h2, h3, .tag, .faq-item button, .case__title { text-wrap: balance; hyphens: manual; }
.lead, .story p, .diff p, .faq-a p, .card p, .team-col p, .cta-lead p, .hero-lead > p { text-wrap: pretty; hyphens: manual; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); }

#problem { border-top: 0; background: transparent; }
#services, #work, .cta.section-alt { background: var(--section-alt); border-top: 1px solid var(--divider); }
#process { background: transparent; border-top: 1px solid var(--divider); }
#pricing { background: transparent; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
#faq { border-top: 0; background: transparent; }
.footer { background: var(--footer); border-top: 1px solid var(--divider); overflow-x: clip; } /* CHANGES-29 A.3: top border = --divider (was ink 6%) */
/* TBD CHANGES-05: closing CTA radial glow is not in the lean Figma. Removed. */
.cta-glow { display: none; }

.hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.hero-proof dt { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: 0; color: var(--cyan); }
.hero-proof dd { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.team-col { position: relative; display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 0; }
/* CHANGES-27: the permanent 4px pink bar is now the default 1px rule (4px at scaleY .25); pink only on hover/focus-within
   (CHANGES-27 block at the end). Label default --muted (was --cyan), 12/16. */
.team-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--line-strong); transform: scaleY(.25); transform-origin: top; }
.team-label { margin: 0; font: 500 12px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.team-value { font-family: var(--display); font-weight: 800; font-size: var(--fs-stat); line-height: var(--lh-heading); color: var(--text); }
.team-col p:last-child { font-size: 16px; line-height: var(--lh-body); color: var(--muted); }

.card--service, .card--pricing { border-color: var(--card-stroke); background: var(--surface); }
.card--pricing { padding: 40px 32px; gap: 32px; }
.price-grid .plus-list { flex: 1; }
/* CHANGES-21 Amendment A: the old 524px min-height at ≥1024 is replaced by --pc-h (523px) at ≥768, see the CHANGES-21 block */
.card--service h3, .step h3 { font-family: var(--display); font-weight: 800; font-size: var(--fs-h3); line-height: 1; text-transform: none; }
.step h3 { text-transform: uppercase; }
.card--service .card__deliverables { margin-top: auto; padding-top: 24px; border-top: 1px solid rgb(var(--ink-rgb) / .08); display: flex; flex-direction: column; gap: 12px; }
.card__deliverables-label { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--index); }
.card--service p.card__deliverables-label { color: var(--index); }
.card__deliverables-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.card__deliverables-list li { display: flex; align-items: flex-start; gap: 12px; font: 400 12px/1.4 var(--body); color: var(--muted); }
.card__deliverables-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 4.4px; background: var(--pink); } /* centred on the 16.8px first line */
@media (max-width: 767px) { .card--service .card__deliverables { margin-top: 0; } }
.card--service p, .step p { color: var(--muted); }
.card--service p.card-index,
.card--service:is(:hover, :focus-within) p.card-index { color: var(--cyan); } /* CHANGES-16: S/0x eyebrow cyan in both states */
.step { border-top: 2px solid var(--cyan-line); padding-top: 32px; }
.step__num { color: var(--text); -webkit-text-stroke: 0; font-weight: 900; }

.diff { display: flex; flex-direction: column; }
.diff { position: relative; gap: 16px; padding: 24px; background: var(--cyan-a06); border: 0; } /* CHANGES-29 */
.diff::before, .diff::after { content: ""; position: absolute; width: 24px; height: 24px; border: 0 solid var(--cyan-line); pointer-events: none; }
.diff::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.diff::after { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.story > p:not(.tag) { margin: 0; color: var(--muted); font-size: 16px; font-weight: 400; line-height: var(--lh-body); }
.story p + p { margin-top: 0; } /* TBD CHANGES-05: paragraph gap isn't designed */
.diff p:not(.diff__label) { margin: 0; color: var(--muted); /* CHANGES-29 A.1 (was --text) */ font-size: 16px; font-weight: 400; line-height: var(--lh-body); }
.diff__label { font: 500 12px/var(--lh-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }

.divider-project { display: flex; align-items: center; gap: 16px; height: 16px; }
.divider-project__marker { width: 8px; height: 8px; background: var(--pink); flex: none; }
.divider-project__label { font: 500 12px/var(--lh-label) var(--mono); letter-spacing: .08em; color: var(--index); }
.divider-project__rule { flex: 1; height: 1px; background: var(--line); }

.delivered__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-bottom: 11px; border-bottom: 1px solid rgb(var(--ink-rgb) / .12); box-sizing: border-box; } /* 44 toggle + 11 + 1 border = 56 (12px padding made it 57) */
.delivered__label { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/var(--lh-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.delivered__marker { width: 8px; height: 8px; background: var(--pink); flex: none; }
/* Delivered "Show all" toggle (Figma 238:1599). CSS owns the inner glyph rotation + glow, the label glow
   and the underline; GSAP owns only the .delivered__icon-wrap rotation/filter (scroll-in hint). */
.delivered__toggle {
  appearance: none; border: 0; background: none; box-shadow: none; border-radius: 0;
  padding: 0 12px; margin: 0; width: auto; min-height: 44px; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/16px var(--mono);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--pink-ui); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.delivered__toggle:focus-visible { outline: 2px solid var(--pink-ui); outline-offset: 4px; }
.delivered__icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; }
.delivered__icon { position: relative; width: 12px; height: 12px; transition: transform .2s ease-out, filter .2s ease-out; }
.delivered__icon::before, .delivered__icon::after { content: ""; position: absolute; background: currentColor; left: 0; top: 5px; width: 12px; height: 2px; }
.delivered__icon::after { transform: rotate(90deg); }
.delivered__toggle-label { position: relative; transition: text-shadow .2s ease-out; }
.delivered__toggle-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--pink-ui); transform: scaleX(0); transform-origin: left center; transition: transform .2s ease-out; }
/* Expanded 45deg lives on the wrapper (GSAP); the inner glyph only turns on hover/focus while collapsed. */
.delivered__toggle[aria-expanded="false"]:hover .delivered__icon, .delivered__toggle[aria-expanded="false"]:focus-visible .delivered__icon { transform: rotate(45deg); }
.delivered__toggle:hover .delivered__icon, .delivered__toggle:focus-visible .delivered__icon { filter: drop-shadow(0 0 12px rgb(var(--pink-rgb) / .4)); } /* CHANGES-29 */
.delivered__toggle:hover .delivered__toggle-label, .delivered__toggle:focus-visible .delivered__toggle-label { text-shadow: 0 0 12px rgb(var(--pink-rgb) / .4); } /* CHANGES-29 */
.delivered__toggle:hover .delivered__toggle-label::after, .delivered__toggle:focus-visible .delivered__toggle-label::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .delivered__icon, .delivered__toggle-label, .delivered__toggle-label::after { transition: none; }
  .delivered__toggle .delivered__icon, .delivered__toggle:hover .delivered__icon, .delivered__toggle:focus-visible .delivered__icon { transform: none; filter: none; }
  .delivered__toggle:hover .delivered__toggle-label, .delivered__toggle:focus-visible .delivered__toggle-label { text-shadow: none; }
}
html.reduced-motion .delivered__toggle .delivered__icon { transform: none; filter: none; transition: none; }
html.reduced-motion .delivered__toggle .delivered__toggle-label { text-shadow: none; }
/* Collapsed only once JS adds .delivered--js; no-JS keeps the full list. Fade matches the #work section bg. */
.delivered__panel { position: relative; overflow: hidden; }
.delivered { --delivered-peek: 32px; }
.delivered--js.is-collapsed .delivered__panel { height: var(--delivered-peek); }
/* Fade is a JS-injected span so GSAP can tween its opacity; no CSS transitions on height/fade/items. */
.delivered__fade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--section-alt-a00), var(--section-alt)); /* CHANGES-29 B */ pointer-events: none; opacity: 0; }
.delivered--js.is-collapsed .delivered__fade { opacity: 1; }
.delivered__list { list-style: none; margin: 0; padding: 0; }
.delivered__list li { display: flex; align-items: center; gap: 24px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--body); font-size: 12px; line-height: 1.4; }
.delivered__num { width: 48px; flex: none; font: 500 12px/var(--lh-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-ui); }

.price-xl { font-family: var(--display); font-weight: 800; font-size: var(--fs-price); line-height: 1; }
.faq-item { border-top: 1px solid var(--line-strong); border-bottom: 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item button { min-height: 44px; text-wrap: balance; }
.section-head { margin-bottom: var(--gap-head); }
.cta { padding-block: var(--section); }
/* CHANGES-32 A: `.cta .section-heading { grid-column: span 7; }` removed; .cta .cta-heading places the heading. */
@media (max-width: 767.98px) { /* CHANGES-32 A: was 1099.98; email button hugs on desktop/tablet, full width on phones */
  .cta .btn-row { flex-direction: column; align-items: stretch; }
  .cta .btn-row .btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .faq-row { display: flex; flex-direction: column; }
  .section-head { display: flex; flex-direction: column; align-items: stretch; }
}

@media (max-width: 767.98px) {
  .cover { box-shadow: 0 -12px 24px var(--bg-a60); /* CHANGES-29 B */ clip-path: inset(-24px 0 0 0); }
  .section-head { margin-bottom: 48px; }
  .hero { padding: 80px 24px; }
  .hero__hud { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 16px; }
  .hero-copy { gap: 32px; }
  .hero-row { gap: 24px; }
  .hero-lead { width: 100%; padding: 24px; gap: 40px; background: var(--glass); border: 1px solid var(--line-strong); }
  .hero-proof { display: flex; flex-direction: column; gap: 24px; }
  .hero-proof div { display: flex; flex-direction: column; gap: 8px; }
  .hero-proof dt { font-size: 18px; line-height: var(--lh-heading); }
  .hero-proof dd { margin: 0; font-size: 16px; line-height: 1.5; }
  .team-grid, .card-grid-4, .steps { grid-template-columns: 1fr; gap: 24px; }
  .story > p:not(.tag), .lead, .hero-lead > p { font-size: 16px; line-height: var(--lh-body); }
  .delivered__label { width: 162px; flex: none; white-space: normal; }
  .price-grid .card { padding: 40px; }
  .btn-row { flex-direction: column; gap: 12px; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .marquee { min-height: 0; height: 72px; padding-block: 16px; padding-inline-start: 0; } /* min-height: reset the desktop 96px leak. CHANGES-30: 72 = 16 + 40 + 16 (was 24) */
  .marquee__track { height: 40px; } /* CHANGES-30: was 24 */
  .marquee li { font-size: 24px; height: 24px; margin-inline-end: 40px; } /* CHANGES-30: 40 after every item (seamless loop) */
  .marquee li.marquee__logo { height: 40px; } /* CHANGES-30: 40px logo slot (Figma 1440 only; mobile is the spec's proposal, Q4) */
  .marquee__track::before { margin-inline-end: 40px; } /* CHANGES-30: inset seam "/" one mobile gap before the track */
  .faq-row { display: flex; flex-direction: column; gap: 24px; }
  .faq-item button { text-wrap: balance; }
  .cta .btn-row { flex-direction: column; gap: 12px; }
  .cta .btn-row .btn { width: 100%; }
  .footer { padding-block: 80px; }
  .footer-top, .footer-cols, .footer-bottom { gap: 32px; }
  .footer-bottom { border-top: 0; padding-top: 24px; gap: 24px; }
  .nav__logo, .nav__logo svg { width: 112px; height: 24px; }
  .site-header { padding: 0 16px 0 24px; }
  .header__cta { display: inline-flex; height: 36px; min-height: 36px; padding: 12px; font-family: var(--body); font-weight: 600; font-size: 12px; line-height: var(--lh-btn); }
  .menu-toggle { width: 40px; height: 40px; }
  .services .card, #services .card { padding: 40px; }
}
/* TBD CHANGES-05: small header button and toggle may not fit below 360px. Hide the button. */
@media (max-width: 359.98px) {
  .header__cta { display: none; }
}

/* CHANGES-11: keep H2 proportional to its column above 1440 (ratio = Figma font-size / column width at 1440,
   rounded up so the token still wins at 1440). Scoped to >=1440: on stacked mobile columns it would shrink the type. */
@media (min-width: 1440px) {
  .section-heading, .faq-intro { container-type: inline-size; }
  .section-heading h2      { font-size: min(var(--fs-h2), 9.346cqi); }  /* 80 / 856 */
  .faq-intro h2            { font-size: min(var(--fs-h2), 19.231cqi); } /* 80 / 416 */
}
/* CHANGES-32 A: CTA H2 sized to its 6-column heading from 1024 up, so "OUT WHAT YOUR" never wraps */
@media (min-width: 1024px) {
  .cta .cta-heading { container-type: inline-size; }
  .cta .cta-heading h2 { font-size: min(var(--fs-h2), 12.579cqi); } /* 80 / 636 */
}

/* ===== CHANGES-15 ===== */
/* Pricing cards: tokenised so GSAP can tween --pc-* (rest = default, hot = Growth look) */
.card.card--pricing {
  --pc-bg: var(--surface); --pc-bd: var(--card-stroke); --pc-plan: var(--cyan); --pc-hi: var(--text); --pc-mute: var(--muted);
  --pc-rule: var(--line); --pc-btn-bg: transparent; --pc-btn-bd: rgb(var(--ink-rgb) / .40);
  --pc-list: var(--muted); --pc-bullet: var(--pink);
  background: var(--pc-bg); border-color: var(--pc-bd);
}
html:not(.pc-gsap) .card.card--pricing.is-detailed { /* CHANGES-21: hot look = Details view only, not hover/focus */
  /* CHANGES-29 B: white = the --pc-hot-fg token (Figma pc-hot-fg); main.js HOTv() mirrors these values */
  --pc-bg: var(--pink); --pc-bd: var(--pink); --pc-plan: var(--pc-hot-fg); --pc-hi: var(--pc-hot-fg); --pc-mute: var(--pc-hot-fg);
  --pc-rule: rgb(var(--pc-hot-fg-rgb) / .32); --pc-btn-bg: var(--bg); --pc-btn-bd: transparent;
  --pc-list: var(--pc-hot-fg); --pc-bullet: var(--pc-hot-fg);
  --pc-link: var(--pc-hot-fg); --pc-item: var(--pc-hot-fg); --pc-box: rgb(var(--pc-hot-fg-rgb) / .10); --pc-rule-item: rgb(var(--pc-hot-fg-rgb) / .24);
  --pc-scroll-track: rgb(var(--pc-hot-fg-rgb) / .16); --pc-scroll-thumb: rgb(var(--pc-hot-fg-rgb) / .48);
}
.card.card--pricing .card-index { color: var(--pc-plan); }
.card.card--pricing .price-line,
.card.card--pricing .price-xl { color: var(--pc-hi); }
.card.card--pricing .per,
.card.card--pricing > p,
.card.card--pricing .pc-view--default > p { color: var(--pc-mute); }
.card.card--pricing .plus-list { border-top-color: var(--pc-rule); }
.card.card--pricing .card__deliverables-list { gap: 8px; padding-top: 24px; text-transform: none; } /* divider (1px top border, --pc-rule) → first row: 24px */
.card.card--pricing .card__deliverables-list li { color: var(--pc-list); }
.card.card--pricing .card__deliverables-list li::before { background: var(--pc-bullet); }
@media (min-width: 1024px) { .card.card--pricing > p, .card.card--pricing .pc-view--default > p { min-height: calc(3 * 1.5em); } } /* 3-line description so lists align */
.card.card--pricing .btn,
.card.card--pricing .btn:is(:hover, :active) {
  background: var(--pc-btn-bg); border-color: var(--pc-btn-bd); transform: none;
  transition: box-shadow 150ms var(--ease-power1-inout);
}
/* CHANGES-29 B.3: pricing follows the page theme; card button labels are theme tokens, never a fixed white.
   The button fill stays on --pc-btn-bg (transparent at rest, --bg on the hot card), so the label reads in both themes. */
.card.card--pricing .btn--ghost { color: var(--text); }
.card.card--pricing .btn--dark { color: var(--ink); }
/* No lift, scale, glow, brackets or glare on pricing hover */
html .card.card--pricing.price:is(:hover, :focus-within),
html.js-motion .card.card--pricing.price.reveal.is-in:is(:hover, :focus-within) { transform: none; box-shadow: none; border-color: var(--pc-bd); }
html .card.card--pricing.price :is(.brackets, .brackets *, .glare) { opacity: 0 !important; }

/* ==========================================================================
   CHANGES-19: page transition cover, footer legal link, Privacy Policy page
   ========================================================================== */
/* Cover-in (main.js initPageTransitions): the re-stamped preloader shows without is-preloading. No JS = never shown. */
.is-leaving .preloader{display:block;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:1000;pointer-events:auto;background:transparent;}
.preloader.is-covering .preloader__logo .logo-letter{fill:transparent;stroke:none;} /* unfilled: the write-on plays on the next page */
html.reduced-motion .preloader.is-covering .preloader__logo .logo-letter{fill:var(--pink);}
@media (prefers-reduced-motion:reduce){ .preloader.is-covering .preloader__logo .logo-letter{fill:var(--pink);} }

/* Footer: copyright + Privacy Policy (Figma 116:975 / 149:208) */
.footer-legal { display: flex; align-items: center; gap: 24px; }
.footer-legal p { margin: 0; }
.footer-legal__link { font: 400 12px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--index); text-decoration: none; position: relative; display: inline-block; }
.footer-legal__link[aria-current="page"] { color: var(--text); }
html:not(.footer-gsap) .footer-legal__link:focus-visible { color: var(--text); }
@media (hover: hover) { html:not(.footer-gsap) .footer-legal__link:hover { color: var(--text); } }
.footer-legal__link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 767px) {
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-legal__link { font: 400 16px/24px var(--body); letter-spacing: 0; text-transform: none; color: var(--text); }
}

/* Privacy page (Figma 251:1523 desktop / 251:1524 mobile) */
.legal-hero { display: flex; flex-direction: column; gap: 32px; padding-top: calc(var(--hdr) + 120px); padding-bottom: 96px; }
.legal-hero .tag { color: var(--cyan); }
.legal-hero__title { margin: 0; font: 900 128px/128px var(--display); text-transform: uppercase; color: var(--text); letter-spacing: 0; }
.legal-hero__intro { margin: 0; max-width: 720px; font: 400 16px/24px var(--body); color: var(--text); }
.legal-body { display: grid; grid-template-columns: 416px 720px; column-gap: 24px; align-items: start; padding-bottom: 160px; }
.legal-toc { position: sticky; top: calc(var(--hdr) + 48px); align-self: start; }
.legal-toc__label { margin: 0 0 16px; font: 500 12px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.legal-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.legal-toc__link { font: 500 12px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.legal-content { display: flex; flex-direction: column; gap: 80px; min-width: 0; }
.legal-section { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: calc(var(--hdr) + 32px); }
.legal-section__title { margin: 0; font: 900 40px/40px var(--display); text-transform: uppercase; color: var(--text); letter-spacing: 0; text-wrap: balance; }
.legal-section__body { display: flex; flex-direction: column; gap: 24px; font: 400 16px/24px var(--body); color: var(--muted); }
.legal-section__body p { margin: 0; text-wrap: pretty; }
.legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.legal-list li { display: flex; gap: 12px; }
.legal-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--pink); }
.legal-link { color: var(--pink-ui); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.legal-link:hover, .legal-link:focus-visible { color: var(--text); }
.legal-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 1023px) {
  .legal-toc { display: none; }
  .legal-body { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .legal .container { padding-inline: 24px; }
  .legal-hero { gap: 24px; padding-top: calc(64px + 64px); padding-bottom: 64px; }
  .legal-hero__title { font-size: 64px; line-height: 64px; }
  .legal-body { padding-bottom: 96px; }
  .legal-content { gap: 56px; }
  .legal-section { gap: 24px; }
  .legal-section__title { font-size: 32px; line-height: 32px; }
}

/* Preloader HUD row (Figma 257:63–257:238). Lives in the curtain, so it fades out with the v2 UI before the blade.
   Each state slot stacks all its variants in one grid cell, so the slot is always as wide as its longest text: no shift. */
.preloader__hud{position:absolute;top:48px;left:48px;right:48px;display:flex;justify-content:space-between;gap:24px;
  font:500 8px/12px "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;}
.preloader__hud span{display:block;}
.preloader__swap{display:grid !important;}
.preloader__swap i{grid-area:1/1;font-style:normal;visibility:hidden;}
.preloader__swap:last-child i{text-align:right;}
.preloader[data-hud="start"] .preloader__swap i[data-s="start"],
.preloader[data-hud="loading"] .preloader__swap i[data-s="loading"],
.preloader[data-hud="complete"] .preloader__swap i[data-s="complete"]{visibility:visible;}
.preloader__assets{font-weight:inherit;font-variant-numeric:tabular-nums;}
.preloader__counter,.preloader__num{font-variant-numeric:tabular-nums;}
.preloader.is-writing .preloader__hud span{animation:hud-flicker 400ms steps(4,end) both;}
.preloader.is-writing .preloader__hud span:nth-child(2){animation-delay:80ms;}
.preloader.is-writing .preloader__hud span:nth-child(3){animation-delay:160ms;}
.preloader.is-writing .preloader__hud span:nth-child(4){animation-delay:240ms;}
@media (max-width:767px){ .preloader__hud{left:24px;right:24px;} .preloader__hud .hide-sm{display:none !important;} }
@media (prefers-reduced-motion:reduce){ .preloader__hud span{animation:none !important;} }
html.reduced-motion .preloader__hud span{animation:none !important;}
.preloader__hud .preloader__sys{text-transform:none;}


/* ===== CHANGES-20: theme toggle ===== */
.theme-toggle {
  inline-size: 44px; block-size: 44px; flex: none;
  display: inline-grid; place-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--toggle-fg); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle__icon { grid-area: 1 / 1; inline-size: 18px; block-size: 18px; display: block; }
.theme-toggle__icon svg { inline-size: 18px; block-size: 18px; display: block; }
:root:not([data-theme="light"]) .theme-toggle__icon--moon,
:root[data-theme="light"] .theme-toggle__icon--sun { opacity: 0; visibility: hidden; } /* GSAP overrides once it runs */
@media (hover: hover) { .theme-toggle:hover { color: var(--toggle-fg-hover); } }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; color: var(--toggle-fg-hover); }
html:not(.theme-js) .theme-toggle { display: none; } /* JS off: no dead button */
@media (forced-colors: active) { .theme-toggle { color: ButtonText; } .theme-toggle:focus-visible { outline-color: Highlight; } }

/* Colour crossfade: CSS only, only for ~350ms after a click. GSAP-coloured elements are excluded. */
:root.theme-fading body,
:root.theme-fading body *:not(.theme-toggle):not(.theme-toggle *):not(.preloader *):not([data-gsap-color]):not([data-gsap-color] *):not(.pc-views):not(.pc-view):not(.pc-toggle):not(.pc-scroll-wrap) {
  transition:
    background-color var(--theme-fade), color var(--theme-fade),
    border-color var(--theme-fade), fill var(--theme-fade), stroke var(--theme-fade),
    box-shadow var(--theme-fade) !important;
}
/* CHANGES-20: the 44px toggle needs the spec's 8px mobile gap so logo + toggle + menu + small CTA fit at 390 */
@media (max-width: 767.98px) { .header__actions { gap: 8px; } }

/* ==========================================================================
   CHANGES-21: pricing Details view (in-place swap, Default ⇄ Detailed).
   GSAP owns transform/opacity on .pc-view and its children (slide) and, <768, height on .pc-views: no CSS transitions on them, on .pc-toggle or the fade.
   Amendment A: ≥768 every card is --pc-h tall; the Detailed body scrolls inside .pc-scroll, head + CTA stay put.
   ========================================================================== */
.card.card--pricing {
  position: relative;
  --pc-link: var(--pink-ui); --pc-item: var(--cyan); --pc-box: rgb(var(--ink-rgb) / .04); --pc-rule-item: var(--line);
  --pc-scroll-track: rgb(var(--ink-rgb) / .08); --pc-scroll-thumb: rgb(var(--ink-rgb) / .32); /* CHANGES-29: ink channel (same values) */
}
:root[data-theme="light"] .card.card--pricing { --pc-box: rgb(var(--ink-rgb) / .06); } /* CHANGES-29: track/thumb now come from the ink channel above (same values) */
html[data-theme="light"]:not(.pc-gsap) .card.card--pricing.is-detailed { --pc-rule-item: rgb(var(--ink-rgb) / .32); } /* CHANGES-29 */
@media (max-width: 767.98px) { .price-grid { align-items: flex-start; } } /* mobile: an open card grows on its own */

.pc-toggle {
  position: absolute; top: 40px; right: 33px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
  font: 500 12px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; /* = .delivered__toggle (homepage mono button) */
  color: var(--pc-link);
  transition: none;
}
.pc-toggle::before { content: ""; position: absolute; inset: -14px -8px; } /* 16px line + 2x14 = 44px hit area, no layout change */
.pc-toggle__icon { display: inline-flex; inline-size: calc(1em * 6 / 7); block-size: calc(1em * 6 / 7); flex: none; } /* 12px icon @14px text, kept in proportion = 10.29px @12px */
.pc-toggle svg { inline-size: 100%; block-size: 100%; flex: none; display: block; }
@media (hover: hover) { .pc-toggle:hover .pc-toggle__label { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }
.pc-toggle:focus { outline: none; }
.pc-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
html:not(.js-motion):not(.reduced-motion) .pc-toggle { display: none; } /* JS off: Default only, no dead button */
@media (forced-colors: active) { .pc-toggle { color: LinkText; } }

.card.card--pricing[data-pc-card] .price-head .card-index { padding-right: 120px; }
[data-pc-heading]:focus:not(:focus-visible) { outline: none; }
[data-pc-heading]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.pc-views { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pc-view { display: flex; flex-direction: column; gap: 32px; flex: 1 1 auto; min-width: 0; }
.pc-view[hidden] { display: none; }

/* Detailed view */
.price-line--sm { gap: 8px; }
.price-line--sm .price-xl { font-size: 48px; line-height: 1; }
.price-line--sm .per { font-size: 16px; line-height: 1.5; }
.card.card--pricing .pc-intro { margin: 0; font-size: 16px; line-height: 1.5; color: var(--pc-mute); text-wrap: pretty; }
.pc-details { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.pc-details > li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--pc-rule-item); }
.pc-details > li::before { content: none; }
.pc-details__title { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-item); }
.pc-details__desc { font-size: 14px; line-height: 1.5; color: var(--pc-mute); text-wrap: pretty; }
.pc-fit { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-left: 2px solid var(--pc-bullet); background: var(--pc-box); }
.card.card--pricing .pc-fit p { margin: 0; min-height: 0; }
.card.card--pricing .pc-fit__label { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-plan); }
.card.card--pricing .pc-fit__text { font-size: 16px; line-height: 1.5; color: var(--pc-mute); text-wrap: pretty; }

/* CHANGES-21 Amendment A: fixed height + inner scroll (≥768) */
.card.card--pricing .pc-scroll { min-width: 0; }
@media (min-width: 768px) {
  .price-grid { align-items: stretch; }
  /* --pc-h is a floor, not a clamp: the Default view in this build is taller than Figma's 523 (3-line summary rule), so a hard height would clip it.
     Rows stay level via stretch; the Detailed body never adds height because .pc-scroll is out of flow. */
  .price-grid .card.card--pricing { --pc-h: 523px; height: auto; min-height: var(--pc-h); display: flex; flex-direction: column; }
  .card--pricing .pc-views,
  .card--pricing .pc-view:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .card--pricing .pc-view > .price-head,
  .card.card--pricing > .btn { flex: none; }
  .card--pricing .pc-scroll-wrap { position: relative; flex: 1 1 0; min-height: 0; display: flex; }
  .card--pricing .pc-scroll {
    position: absolute; inset: 0;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 32px; padding: 0 14px 24px 0;
    scrollbar-width: thin; scrollbar-color: var(--pc-scroll-thumb) var(--pc-scroll-track);
  }
  .card--pricing .pc-scroll > * { flex: none; }
  .card--pricing .pc-scroll:focus { outline: none; }
  .card--pricing .pc-scroll:focus-visible { outline: 2px solid var(--pc-link); outline-offset: 4px; }
  .card--pricing .pc-scroll::-webkit-scrollbar { width: 2px; }
  .card--pricing .pc-scroll::-webkit-scrollbar-track { background: var(--pc-scroll-track); border-radius: 1px; }
  .card--pricing .pc-scroll::-webkit-scrollbar-thumb { background: var(--pc-scroll-thumb); border-radius: 1px; min-height: 32px; }
  .card--pricing .pc-scroll-wrap::after {
    content: ""; position: absolute; left: 0; right: 14px; bottom: 0; height: 48px; pointer-events: none; z-index: 1;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--pc-bg) 0%, transparent), var(--pc-bg));
    opacity: 1; transition: none;
  }
  .card--pricing .pc-scroll-wrap.is-end::after,
  .card--pricing .pc-scroll-wrap.no-overflow::after { opacity: 0; }
  @supports not (color: color-mix(in srgb, red, red)) {
    .card--pricing .pc-scroll-wrap::after { content: none; }
    .card--pricing .pc-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
    .card--pricing .pc-scroll-wrap:is(.is-end, .no-overflow) .pc-scroll { -webkit-mask-image: none; mask-image: none; }
  }
}
@media (max-width: 767.98px) {
  .card--pricing .pc-scroll-wrap { display: contents; }
  .card--pricing .pc-scroll { overflow: visible; padding: 0; display: flex; flex-direction: column; gap: 32px; }
  .card--pricing .pc-scroll-wrap::after { display: none; }
}

/* =====================================================================
   CHANGES-22: scroll-scrubbed story video behind #problem → #process.
   Wrapper is .scroll-story (not .story: that class is already used by the case-study copy in #work).
   Ownership: GSAP owns .scroll-story__sticky opacity when motion is allowed; CSS only sets the
   pre-JS state (0) and the static fallback (html.story-static → 1, GSAP never runs then).
   ===================================================================== */
:root {
  --story-pos-x: 50%;          /* desktop focal point */
  --story-pos-x-mobile: 50%;   /* mobile focal point: centred (Nico) */
}
.scroll-story { position: relative; isolation: isolate; }
.scroll-story__layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scroll-story__sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; opacity: 0; }
.scroll-story__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--story-pos-x) 50%; background: var(--bg); }
.scroll-story__shade { position: absolute; inset: 0; pointer-events: none; }
.scroll-story > section { position: relative; z-index: 1; background: transparent; }
.scroll-story #services { background: transparent; }   /* overrides the --section-alt fill; border-top stays */
@media (max-width: 767px) { .scroll-story__video { object-position: var(--story-pos-x-mobile) 50%; } }
html.story-static .scroll-story__sticky { opacity: 1; } /* fallback: poster only */

/* §4.1 legibility scrims removed (Nico, 30 Oct): the radial ::before halos read as drop shadows. The bottom gradient is the only aid. */

/* §6 Amendment A: glass service cards over the video ("How the team works"), both themes.
   Same glass as .hero-lead / header; border-color only, so the pink hover border from .card:hover still wins. */
.scroll-story .card--service {
  background: var(--glass);
  border-color: var(--line-strong);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.scroll-story .card--service:is(:hover, :focus-within) { border-color: var(--pink-hi); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scroll-story .card--service { background: var(--glass-mobile); }
}
/* Dark: small card text sits over the bright jellyfish, so lift it to --text (Amendment A §6). */
:root:not([data-theme="light"]) .scroll-story .card--service :is(p.card-index, p.card__deliverables-label, .card__deliverables-list li) { color: var(--text); }
/* CHANGES-29 A.1: the card body paragraph is no longer lifted; it stays --muted (base .card--service p) like all body copy. */
:root:not([data-theme="light"]) .scroll-story .card--service:is(:hover, :focus-within) p.card-index { color: var(--text); }

/* ---- LIGHT THEME (Amendment A, option B): all light-mode video treatment lives here -------
   Video plays under a solid --section-alt (#FFFFFF) 88% wash (CHANGES-29 B; was #FFFCFF), with page-colour fades at the band's top and bottom.
   To hide the video in light mode instead, replace this block with:
     :root[data-theme="light"] .scroll-story__layer { display: none; }
     :root[data-theme="light"] .scroll-story #services { background: var(--section-alt); }
   -------------------------------------------------------------------------------------------- */
:root[data-theme="light"] .scroll-story__shade { background: rgb(var(--section-alt-rgb) / .88); } /* CHANGES-29 B: light --section-alt (#FFFFFF) 88%, was #FFFCFF 88% */
:root[data-theme="light"] .scroll-story__shade::before,
:root[data-theme="light"] .scroll-story__shade::after {
  content: ""; position: absolute; left: 0; right: 0; height: 160px; pointer-events: none;
}
:root[data-theme="light"] .scroll-story__shade::before { top: 0;    background: linear-gradient(to bottom, var(--bg), var(--bg-a00)); } /* CHANGES-29 B */
:root[data-theme="light"] .scroll-story__shade::after  { bottom: 0; background: linear-gradient(to top,    var(--bg), var(--bg-a00)); }
@media (max-width: 767px) {
  :root[data-theme="light"] .scroll-story__shade::before,
  :root[data-theme="light"] .scroll-story__shade::after { height: 120px; }
}
/* Teal labels over the wash use cyan-dark (#005A75); plain cyan fails AA on the brightest wash pixels. */
:root[data-theme="light"] .scroll-story :is(.tag--accent, .card--service p.card-index, .team-intro__callout) { color: var(--cyan-dark); }
/* CHANGES-27: .team-label is --muted by default now, so cyan-dark only on the hot column (+ .team-intro__callout above). */
:root[data-theme="light"]:not(.coarse) .scroll-story .team-col:hover .team-label,
:root[data-theme="light"] .scroll-story .team-col:focus-within .team-label { color: var(--cyan-dark); }

/* CHANGES-22 · LED / screen-door dot mask over the hero loop AND the story video (Nico, 30 Oct). It hides the
   clips' compression blockiness and darkens them a little so the text on top reads better. The site had no
   grid/dot/scanline pattern to reuse, so this is new. Inline SVG (no request), solid black, full opacity;
   crispEdges + pixelated keep the squares sharp at DPR 1 and 2. Both videos share the same tokens, so the hand-off matches.
   Density: a 2×2 tile with one 1×1 CSS-px black dot (≈25% darker).
   Tune density with the tile, not opacity. */
:root {
  --mask-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  --mask-dot-tile: 2px;
}
/* Story: video → dots (::before, absolute) → .scroll-story__shade (later in DOM, so in light mode the dots sit
   under the light wash) → sections (z 1). */
.scroll-story__sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--mask-dots) 0 0 / var(--mask-dot-tile) var(--mask-dot-tile) repeat;
  image-rendering: pixelated;
}
/* Hero: the dots are the bottom layer of the existing .hero__bg::after scrim (z 2, above .hero__video z 1, below
   .hero-body). The scrim gradients stay on top, matching the story order. The hero loop itself is untouched. */
.hero__bg::after {
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb) / .92) 0%, var(--bg-a00) 80%),
    linear-gradient(0deg, var(--bg) 0%, var(--bg-a00) 40%),
    var(--mask-dots) 0 0 / var(--mask-dot-tile) var(--mask-dot-tile) repeat;
  image-rendering: pixelated;
}

/* CHANGES-22 · bottom legibility gradient over the pinned story video (Nico, 30 Oct). This replaces the text-shadow trial.
   It lives on .scroll-story__shade inside the sticky layer: above the video and dot mask (::before), below the
   sections. It stays pinned with the video and fades with it, because sticky opacity is GSAP-owned.
   Dark mode only. Light mode uses nothing extra, because its .88 wash plus the --bg edge fades already cover the clip (see the light block). */
:root:not([data-theme="light"]) .scroll-story__shade {
  background: linear-gradient(to top, rgb(var(--bg-rgb) / .92) 0%, rgb(var(--bg-rgb) / .7) 40%, rgb(var(--bg-rgb) / .25) 65%, rgb(var(--bg-rgb) / 0) 85%); /* CHANGES-29: scrim = --bg channel (was #000) */
}
/* === story video tint (feat/story-video-tint) ===
   Even black tint over the whole story video for content legibility, under the bottom gradient. Dark mode only.
   Knob: --story-tint (0 = off). */
:root:not([data-theme="light"]) .scroll-story__shade {
  --story-tint: .6;
  background:
    linear-gradient(to top, rgb(var(--bg-rgb) / .92) 0%, rgb(var(--bg-rgb) / .7) 40%, rgb(var(--bg-rgb) / .25) 65%, rgb(var(--bg-rgb) / 0) 85%),
    rgb(var(--bg-rgb) / var(--story-tint)); /* CHANGES-29: --bg channel (#0A0710, was #000); dark mode only */
}
/* === /story video tint === */

/* CHANGES-22 · no shadows in the scroll story (Nico, 30 Oct). This removes the pre-existing .card:hover/:focus-within glow
   (styles.css ~L820), the .btn--primary hover glow and any text-/drop-shadow. The JS tilt glow is skipped in main.js.
   The bottom gradient is the only readability aid. Keyboard focus rings (:focus-visible) are kept for accessibility. */
.scroll-story *:not(:focus-visible), .scroll-story *::before, .scroll-story *::after { box-shadow: none !important; text-shadow: none !important; }

/* ===== CHANGES-23 Work accordion (#work) =====
   Owners: CSS = layout, focus ring (outline), glass, fade colour. No row hover state.
   GSAP (initWork) = .work-acc__panel height, .work-acc__inner opacity, the .faq-v bar transform (inline).
   No CSS transitions on panel, inner or icon. */
/* CHANGES-28: --work-panel-rgb removed (the panel has no glass any more; fades use --section-alt-rgb). */
#work .work-acc .delivered { --delivered-peek: 120px; }
#work .work-acc { border-bottom: 1px solid var(--line-strong); }
#work .work-acc__heading { margin: 0; font: inherit; }
#work .work-acc__trigger {
  appearance: none; display: flex; align-items: center; gap: 48px; width: 100%; margin: 0; padding: 32px 0;
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent;
  color: var(--text); text-align: left; cursor: pointer;
}
/* Amendment B (2): open row = 1px top border in --pink (recolours the existing divider, no shift). */
#work .work-acc__item.is-open .work-acc__trigger { border-top-color: var(--pink); }
#work .work-acc__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#work .work-acc__client { flex: 0 0 420px; font: 800 40px/1 var(--display); text-transform: uppercase; color: var(--text); }
#work .work-acc__desc { flex: 1; min-width: 0; font: 400 16px/1.5 var(--body); color: var(--muted); }
#work .work-acc__tag {
  flex: none; padding: 8px 12px; border: 1px solid var(--cyan-a50); /* CHANGES-29: one rule for both themes */
  font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
}
#work .work-acc__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; color: var(--cyan); }
#work .work-acc__icon svg { display: block; width: 24px; height: 24px; }
#work .work-acc .faq-v { transform-origin: center; transform-box: fill-box; }
/* No JS: every panel shows (minus icon); JS adds html.work-js and only then hides closed panels. */
html:not(.work-js) #work .work-acc__panel[hidden] { display: block; }
html:not(.work-js) #work .work-acc .faq-v { transform: rotate(90deg) scaleY(0); }

#work .work-acc__panel { display: flow-root; overflow: hidden; }
/* display: flow-root above beats the UA [hidden] rule, so restore it (same as .faq-a[hidden]). */
html.work-js #work .work-acc__panel[hidden] { display: none; }
/* CHANGES-28: the glass .work-acc__inner, .work-acc__thumb / __crop, .work-acc__info / __summary / __label, the line-border
   .diff and the --work-panel-rgb fade were replaced by the flat panel in the CHANGES-28 block below. */

@media (max-width: 1023.98px) {
  #work .work-acc__client { flex-basis: 280px; }
}
@media (max-width: 767.98px) {
  #work .work-acc__trigger { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 16px; row-gap: 12px; align-items: start; padding: 24px 0; }
  #work .work-acc__tag { grid-column: 1; grid-row: 1; justify-self: start; }
  #work .work-acc__client { grid-column: 1; font-size: 32px; }
  #work .work-acc__desc { grid-column: 1; }
  #work .work-acc__icon { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-left: 0; }
}
/* Amendment B (3): row hover = top border to --pink-hi, fine pointers only. Colour change only, so no layout shift;
   open rows keep --pink, the :focus-visible outline is untouched. */
@media (hover: hover) and (pointer: fine) {
  #work .work-acc__trigger { transition: border-color 700ms ease; }
  #work .work-acc__item:not(.is-open) .work-acc__trigger:hover { border-top-color: var(--pink-hi); }
}
@media (prefers-reduced-motion: reduce) { #work .work-acc__trigger { transition: none; } }
html.reduced-motion #work .work-acc__trigger { transition: none; }

/* === CHANGES-28 work mockups === */
/* Scope: section#work only. Header (one-line H2, 3-paragraph intro), uppercase row descriptor, flat 12-col case panel
   (story cols 1–6: meta, title, 96px "Read more" peek | details cols 8–12: 120px "Show all" peek + The difference),
   full-row mockup figure (image cols 2–11, 1076×856 @1440). Figma 486:102 (peek) / 482:9973 (expanded).
   Toggles reuse .delivered (initDelivered opt-ins data-label-less / data-icon="minus" / data-peek-items="0"). */
#work .section-heading { grid-column: 1 / span 8; }
#work .work-intro { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: var(--lh-body); color: var(--muted); }
#work .work-intro p { margin: 0; }
#work .work-acc__desc { text-transform: uppercase; text-wrap: wrap; }      /* greedy wrap = Figma (h3 is balance) */
#work .work-acc__tag { padding: 7px 11px; line-height: 1; }              /* Figma stroke is inside: 1 + 7 + 12 + 7 + 1 = 28 tall (was 30.4) */

/* Panel: flat 12-col grid, no box (no padding, border, glass or blur). The row's 32px bottom padding is the gap. */
#work .work-acc__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin: 0; padding: 0; background: none; border: 0; }
#work .work-acc__story   { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
#work .work-acc__details { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 48px; min-width: 0; }
#work .work-acc__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
#work .work-acc__meta p { margin: 0; font: 500 12px/var(--lh-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#work .work-acc__client-label { color: var(--muted); }
#work .work-acc__case { color: var(--cyan); }
#work .work-acc__title { margin: 0; font: 800 32px/1.2 var(--display); letter-spacing: 0; text-transform: uppercase; color: var(--text); text-wrap: wrap; }
#work .work-acc__body { display: flex; flex-direction: column; gap: 12px; }
#work .work-acc__body p { margin: 0; font: 400 16px/var(--lh-body) var(--body); color: var(--muted); }
/* Story "Read more" peek: 96px (4 × 24 lines); (1,2,0) so it beats the list's #work .work-acc .delivered 120px. */
#work .work-acc .work-acc__read { --delivered-peek: 96px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
#work .work-acc__read .delivered__panel { align-self: stretch; }

/* Toggles: no box, flush (padding 0), Figma 120% line height; 44px hit height kept (min-height). Icon 12×12. */
#work .delivered__toggle { padding: 0; line-height: var(--lh-label); }
#work .work-acc__details .delivered__toggle { letter-spacing: .12em; }     /* Figma "SHOW ALL"; "READ MORE" keeps .04em (Q3) */
#work .delivered__icon-wrap { width: 12px; height: 12px; }
#work .delivered__num { letter-spacing: 0; line-height: 1; }
#work .work-acc .delivered__list li { min-height: 34px; }                 /* Figma rows 34 (8 + 17 + 8 + 1) */

/* Minus icon (data-icon="minus"): no 45° turn; the vertical bar collapses while expanded (and without JS). */
.delivered[data-icon="minus"] .delivered__icon::after { transition: transform .2s ease-out; }
.delivered[data-icon="minus"]:not(.is-collapsed) .delivered__icon::after,
html:not(.work-js) #work .delivered[data-icon="minus"] .delivered__icon::after { transform: rotate(90deg) scaleX(0); }
.delivered[data-icon="minus"] .delivered__toggle .delivered__icon { transform: none; }  /* no hover rotate; glow/underline stay */
@media (prefers-reduced-motion: reduce) { .delivered[data-icon="minus"] .delivered__icon::after { transition: none; } }
html.reduced-motion .delivered[data-icon="minus"] .delivered__icon::after { transition: none; }

/* The difference: no border, cyan 6% fill + 2px TL/BR brackets (base .diff), padding 24/24/26/24, label → 16 → body
   16/24 --text, 12 between body paragraphs. */
#work .work-acc .diff { gap: 16px; padding: 24px 24px 26px; background: var(--cyan-a06); border: 0; } /* CHANGES-29: one rule for both themes */
#work .work-acc .diff p:not(.diff__label) { font-size: 16px; line-height: var(--lh-body); color: var(--muted); /* CHANGES-29 A.1 (overrides CHANGES-28 §4) */ text-wrap: wrap; } /* greedy wrap = Figma (global .diff p is pretty) */
#work .work-acc .diff p:not(.diff__label) + p { margin-top: -4px; }       /* 16 flex gap → 12 between body paragraphs */

/* Peek fades in --section-alt (flat panel, not over the story video, so a colour overlay is fine). */
#work .work-acc .delivered__fade {
  background: linear-gradient(to bottom, var(--section-alt-a00) 0%, var(--section-alt-a00) 35%, var(--section-alt-a92) 100%); /* CHANGES-29 B */
}

/* Mockup: own block after the info grid, 48 / 0 padding, image cols 2–11 (1076 × 856 @1440), pre-cropped assets. */
#work .work-acc__mockup { margin: 0; padding: 48px 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
#work .work-acc__mockup picture { display: contents; }
#work .work-acc__mockup img { grid-column: 2 / span 10; display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1076 / 856; object-fit: contain; }

.br-desk { display: inline; }
@media (max-width: 1023.98px) {
  .br-desk { display: none; }
  #work .section-head { gap: 24px; }
  #work .work-intro { width: 100%; }
  #work .work-acc__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  #work .work-acc__story, #work .work-acc__details { grid-column: 1 / -1; }
  #work .work-acc__title { text-wrap: balance; }
  #work .work-acc__mockup { padding: 40px 0; }
  #work .work-acc__mockup img { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  #work .work-acc__inner { row-gap: 32px; }
  #work .work-acc__details { gap: 32px; }
  #work .work-acc__title { font-size: 24px; }
  #work .work-acc .diff { padding: 20px 20px 22px; }
  #work .work-acc__mockup { padding: 32px 0; }
}
/* === /CHANGES-28 === */

/* === CHANGES-25 pricing carousel === */
/* Only pricing layout (grid removed). Owners: GSAP = .price-grid--carousel (track) x only. CSS = everything else
   (card widths, bleed, controls, segment colours). Cards keep their .reveal transforms; the track never touches them.
   UNCONFIRMED DEFAULT (2 cards on tablet): --pc-vis-tablet below. JS reads the live --pc-vis, so this is the only knob. */
.pc-carousel { --pc-vis-tablet: 2; --pc-vis: 3; --pc-gap: 24px; --pc-pad: var(--pc-edge, 0px); }
@media (min-width: 768px) and (max-width: 1023.98px) { .pc-carousel { --pc-vis: var(--pc-vis-tablet); } }
/* === pricing mobile edge pad 24 (feat/pricing-mobile-pad-24) ===
   Mobile track edge padding 16px -> 24px to match the 24px container margin (--gutter). Card width (320px) unchanged. */
@media (max-width: 767.98px) { .pc-carousel { --pc-vis: 1; --pc-gap: 16px; --pc-pad: 24px; } }
/* === /pricing mobile edge pad 24 === */
/* Bleed to the screen edge: --pc-edge = the container's inline padding in px (set by initPricingCarousel). */
.pc-carousel__viewport { overflow: hidden; touch-action: pan-y; margin-inline: calc(-1 * var(--pc-edge, 0px)); }
.price-grid.price-grid--carousel { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; gap: var(--pc-gap); padding-inline: var(--pc-pad); }
.price-grid.price-grid--carousel > .card { flex: 0 0 calc((100% - (var(--pc-vis) - 1) * var(--pc-gap)) / var(--pc-vis)); max-width: none; min-width: 0; width: auto; }
@media (max-width: 767.98px) { .price-grid.price-grid--carousel > .card { flex-basis: min(320px, 100% - 38px); } } /* 320 + 38px peek at 390 */
.pc-carousel.is-dragging .pc-carousel__viewport { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.pc-carousel.is-dragging .pc-carousel__viewport img { pointer-events: none; }

.pc-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
@media (max-width: 767.98px) { .pc-carousel__controls { margin-top: 24px; } }
.pc-carousel.is-static .pc-carousel__controls { display: none; } /* tiers <= visible */
.pc-carousel__pos { display: flex; align-items: center; gap: 16px; }
.pc-carousel__count { font: 500 12px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-a72); /* CHANGES-29 B */ font-variant-numeric: tabular-nums; }
.pc-carousel__segs { display: flex; gap: 4px; }
.pc-carousel__segs i { display: block; width: 24px; height: 2px; background: rgb(var(--ink-rgb) / .24); }
.pc-carousel__segs i.is-on { background: var(--pink); }
.pc-carousel__btns { display: flex; gap: 4px; }
.pc-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.pc-carousel__btn svg { display: block; width: 20px; height: 20px; }
.pc-carousel__btn:hover:not(:disabled) { color: var(--pink); }
.pc-carousel__btn:focus-visible { outline: 2px solid var(--pc-link, var(--focus)); outline-offset: 4px; }
.pc-carousel__btn:disabled { opacity: .4; cursor: default; }
/* === /CHANGES-25 pricing carousel === */
/* === CHANGES-26 hero content === */
/* Scope: .hero-row only. Left column = H1 + lead + callout (span 6), right panel = buttons + signals (cols 8-12).
   Motion owners: H1 lines + .hero-lead keep the CSS intro; .hero-copy__lead / .hero-copy__callout = GSAP (initHeroContent).
   CSS only hides those two before site-ready under .js-motion; no CSS transitions/animations on them. */
.hero-copy > .tag[hidden] { display: none; } /* open question 1: kept in markup, hidden */
.hero-copy__lead { display: flex; flex-direction: column; gap: 0; }
.hero-copy__lead p { margin: 0; font: 400 var(--fs-lead)/var(--lh-body) var(--body); color: var(--muted); /* CHANGES-29 A.1 (was --text) */ text-wrap: pretty; }
.hero-copy__callout { margin: 0; font: 700 16px/var(--lh-body) var(--body); color: var(--cyan); }
.hero-proof dt { line-height: var(--lh-label); } /* Figma 20/24 */
.js-motion:not(.site-ready) .hero-copy__lead,
.js-motion:not(.site-ready) .hero-copy__callout { opacity: 0; }
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1 / span 6; gap: 32px; }
  .hero-lead { grid-column: 8 / span 5; }
  /* H1 fix: Figma's 2 lines (MARKETING / THAT MOVES.) at --fs-hero. From ~1600px the font grows to 168px while
     span 6 caps near 708px, so "THAT MOVES." wrapped to a 3rd line. Let the H1 size to its 2 lines and overhang
     into the empty col 7 (≤ ~100px, never reaches the panel); lead/callout keep the span-6 measure. */
  .hero-copy h1 { width: max-content; }
  .hero-copy h1 .line > span { white-space: nowrap; }
}
/* Tablet: existing ≤1023.98 rule stacks the row; keep the copy → panel gap at 24. */
@media (min-width: 768px) and (max-width: 1023.98px) { .hero-row { gap: 24px; } }
@media (max-width: 767.98px) {
  .hero-copy { gap: 32px; }
  .hero-lead { padding: 32px 24px; gap: 40px; }
  .hero-proof { display: flex; flex-direction: column; gap: 24px; } /* open question 2: one column */
  .hero-proof dt { font-size: 20px; line-height: var(--lh-label); }
  .hero-proof dd { margin: 0; font-size: 16px; line-height: var(--lh-body); }
}
/* Short landscape keeps its own 2-col grid: undo the desktop column placement. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-copy, .hero-lead { grid-column: auto; }
}
/* === /CHANGES-26 === */

/* === CHANGES-27 team section === */
/* Scope: section#problem (THE TEAM) only. Header span 7 | intro cols 8-12, pull quote, five discipline columns
   (label + 5-row/120px .delivered peek + Show more, initDelivered data-peek-items/data-label-more), footnote.
   Rhythm 80 between blocks (--gap-head). Hot column = hover / focus-within only (428:9564 is the example).
   The base .team-col::before / .team-label rules were edited in place (see CHANGES-27 note there). */
#problem .section-heading { grid-column: 1 / span 7; }
#problem .team-intro { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: var(--lh-body); color: var(--muted); }
#problem .team-intro p { margin: 0; }
.team-intro__callout { font-weight: 700; color: var(--cyan); }
/* === CHANGES-33: How the team works, Figma 508:11079 === */
#services .section-heading { grid-column: 1 / span 7; }
#services .team-intro { grid-column: 8 / span 5; padding-top: 60px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: var(--lh-body); color: var(--muted); }
#services .team-intro p { margin: 0; }
#services .team-intro .team-intro__callout { margin-top: 20px; } /* 12 gap + 20 = 32 (Figma Text gap) */
#services .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#services .card { padding: 40px; }
#services .card__deliverables { border-top-color: var(--divider); }
#services .card__deliverables-label { line-height: 1; }
/* Decisions 2 + 3: Figma colours in both themes. Body --text is Nico's explicit exception to the muted body rule (CHANGES-29 A.1), these cards only. */
#services .card--service :is(p.card-index, p.card__deliverables-label, .card__deliverables-list li, p:not([class])),
#services .card--service:is(:hover, :focus-within) p.card-index,
:root[data-theme="light"] .scroll-story #services .card--service p.card-index { color: var(--text); }
#services .footnote { margin-top: var(--gap-head); line-height: 1.5; }
/* H2 in the 7-column heading (746 @1440), same scaling as #problem / .cta (80 / 746) */
@media (min-width: 1440px) {
  #services .section-heading h2 { font-size: min(var(--fs-h2), 10.724cqi); }
}
@media (max-width: 1023.98px) {
  #services .section-head { gap: 24px; }
  #services .team-intro { width: 100%; padding-top: 0; }
  #services .card-grid-3 { grid-template-columns: 1fr; }
}
/* === /CHANGES-33 === */

/* === CHANGES-33: The process, Figma 564:1851 === */
.lead--paras { display: flex; flex-direction: column; gap: 16px; }
.lead--paras p { margin: 0; }
.step__body { display: flex; flex-direction: column; gap: 16px; }
.step__body p { margin: 0; color: var(--muted); }
/* === /CHANGES-33 === */
.team-pull { max-width: 856px; margin: 0 0 var(--gap-head); font-size: 20px; line-height: 32px; color: var(--text); text-wrap: pretty; }
.team-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; align-items: start; }
.team-col { gap: 20px; padding-top: 32px; }
.team-col::before { transition: transform 250ms var(--ease-power2-inout), background-color 250ms var(--ease-power2-inout); }
h3.team-label { font: 500 12px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-wrap: balance; transition: color 250ms var(--ease-power2-inout); }
.team-col__items { list-style: none; margin: 0; padding: 0; }
.team-col__items li { margin: 0; padding: 0; font-size: 16px; line-height: 24px; color: var(--muted-2); transition: color 250ms var(--ease-power2-inout); }
.team-col .delivered { --delivered-peek: 120px; display: flex; flex-direction: column; gap: 20px; }
/* Figma 449:10060: toggle hugs its content (89 wide), icon flush left (12px), label 8 after it. */
.team-col .delivered__toggle { align-self: flex-start; padding: 0; }
.team-col .delivered__icon-wrap { width: 12px; height: 12px; }
/* Fade = mask on the panel (Amendment A 3): the section sits over the moving story video, so no solid band overlay. */
#problem .delivered__fade { display: none; }
#problem .delivered--js.is-collapsed .delivered__panel {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgb(0 0 0 / .08) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgb(0 0 0 / .08) 100%);
}
/* Hot state */
.team-col:is(:hover, :focus-within)::before { background: var(--pink); transform: scaleY(1); }
.team-col:is(:hover, :focus-within) .team-label { color: var(--cyan); }
.team-col:is(:hover, :focus-within) .team-col__items li { color: var(--muted); }
html.coarse .team-col:hover:not(:focus-within)::before { background: var(--line-strong); transform: scaleY(.25); }
html.coarse .team-col:hover:not(:focus-within) .team-label { color: var(--muted); }
html.coarse .team-col:hover:not(:focus-within) .team-col__items li { color: var(--muted-2); }
.team-footnote { margin-top: var(--gap-head); line-height: 20px; }
/* CHANGES-11 H2 scaling >=1440: the heading column is span 7 here (746 @1440), so use 80 / 746 (= .cta). */
@media (min-width: 1440px) {
  #problem .section-heading h2 { font-size: min(var(--fs-h2), 10.724cqi); }
}
/* 1024-1439: long labels ("Sales & commercial material") wrap to 2 lines; reserve 2 lines so the peeks stay level. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .team-col .team-label { min-height: 32px; }
}
/* Tablet: header stacks (existing rules), intro full width 24 under the H2, columns 2-up. */
@media (max-width: 1023.98px) {
  #problem .section-head { gap: 24px; }
  #problem .team-intro { width: 100%; }
  .team-pull { max-width: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .team-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
/* Mobile (390 ref): 1 column, same 120 peek; pull quote 18/28; 48 gaps come from --gap-head (48 at <=767). */
@media (max-width: 767.98px) {
  .team-grid--5 { grid-template-columns: 1fr; gap: 24px; }
  .team-pull { font-size: 18px; line-height: 28px; }
}
/* Reduced motion: no colour / bar transitions (height tween + pulse are already handled in initDelivered). */
@media (prefers-reduced-motion: reduce) {
  .team-col::before, h3.team-label, .team-col__items li { transition: none; }
}
html.reduced-motion .team-col::before, html.reduced-motion h3.team-label, html.reduced-motion .team-col__items li { transition: none; }
/* === /CHANGES-27 team section === */

/* === CHANGES-29 heading accents ===
   One pink key word per 80px section H2: the existing span.kw, set in the ACF heading as *WORD* (sens_cyber_heading()).
   The heading colour is explicit (was inherited from body); the key word is colour-only, so it inherits the H2's
   face, weight, case and tracking. --pink (not --pink-ui / --pink-hi) is the Figma-bound variable. */
h2 { color: var(--text); }
h2 .kw {
  color: var(--pink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* === /CHANGES-29 === */

/* === CHANGES-34: mobile audit fixes === */
/* (1) Phones: the H1 lines fade in instead of sliding. The <768 rule `.hero h1 .line { overflow: visible }` drops the
   line mask, so the 100% slide carried "THAT MOVES." over the already-visible .hero-copy__lead for ~1 s.
   :not(.hero-intro-done) keeps the existing one-shot detach in charge once the intro has played. */
@keyframes hero-line-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767.98px) {
  html.js-motion.site-ready:not(.hero-intro-done) .hero h1 .line > span { animation-name: hero-line-fade; }
}
/* (3) Tablet 768–1023: .footer-brand (width:auto; flex:none) grew to one 972px line and pushed the link columns off
   screen under .footer { overflow-x: clip }. Stack brand above the columns. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .footer-top { flex-direction: column; gap: 48px; }
  .footer-brand { width: auto; max-width: 560px; min-width: 0; }
  .footer-cols { flex-wrap: wrap; gap: 64px; }
}
/* (4) Collapsed "Show more" lists: the items past the peek are hidden properly (no paint, no AT, no focus).
   main.js tags them .delivered__extra; .is-collapsed is removed at the start of expand and added after collapse. */
.delivered--js.is-collapsed .delivered__extra { visibility: hidden; }
/* === /CHANGES-34 === */