/* ==========================================================================
   AP Collective — design system
   Release: 2026.07.29 · "Control Surface"
   Single source of truth. Replaces the inline + polish-* layers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand */
  --brand: #6755ff;
  --brand-deep: #533afd;
  --brand-lift: #8a7bff;
  --brand-pale: #c4bdff;
  --signal: #4fe3b0;
  --amber: #ffb547;

  /* Dark surfaces (default) */
  --bg: #06070f;
  --bg-2: #090b18;
  --surface: rgba(255, 255, 255, 0.028);
  --surface-2: rgba(255, 255, 255, 0.052);
  --surface-solid: #0d1022;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-brand: rgba(138, 123, 255, 0.34);

  --text: #f4f5fb;
  --text-2: #a9adcb;
  --text-3: #767ba0;
  --on-brand: #ffffff;

  --glow-a: rgba(103, 85, 255, 0.30);
  --glow-b: rgba(79, 227, 176, 0.13);
  --grid-line: rgba(255, 255, 255, 0.038);
  --shadow-lg: 0 40px 120px -30px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 24px 70px -32px rgba(0, 0, 0, 0.9);
  --img-fade: 1;

  /* Type */
  --font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.10rem, 1.02rem + 0.40vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.24rem + 1.05vw, 2.15rem);
  --step-3: clamp(1.95rem, 1.50rem + 2.25vw, 3.25rem);
  --step-4: clamp(2.55rem, 1.70rem + 4.25vw, 5.20rem);
  --step-5: clamp(3.10rem, 1.35rem + 8.00vw, 8.60rem);

  /* Space */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5.5rem;
  --sp-7: clamp(5rem, 9vw, 9.5rem);

  /* Geometry */
  --max: 1240px;
  --max-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --nav-h: 74px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 0.6s;
  --dur-fast: 0.24s;
  --dur-slow: 1.05s;

  /* Glass — shared recipe for the large blurred surfaces */
  --glass-blur: 22px;
  --glass-sat: 155%;
  --glass-bg: color-mix(in srgb, var(--surface-solid) 66%, transparent);

  /* Marquee — anim.js modulates --mq-dur for scroll-velocity reaction */
  --mq-dur: 42s;
  --mq-fade: 9%;

  /* Button shine sweep tint */
  --btn-shine: color-mix(in srgb, var(--text) 16%, transparent);
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #f7f7fb;
  --bg-2: #ffffff;
  --surface: rgba(12, 14, 40, 0.028);
  --surface-2: rgba(12, 14, 40, 0.052);
  --surface-solid: #ffffff;
  --border: rgba(12, 14, 40, 0.10);
  --border-strong: rgba(12, 14, 40, 0.20);
  --border-brand: rgba(83, 58, 253, 0.28);

  --text: #0b0d24;
  --text-2: #4b5070;
  --text-3: #767ba0;
  --brand-pale: #4a37c9;
  --brand-lift: #533afd;

  --glow-a: rgba(103, 85, 255, 0.16);
  --glow-b: rgba(79, 227, 176, 0.10);
  --grid-line: rgba(12, 14, 40, 0.05);
  --shadow-lg: 0 40px 110px -40px rgba(15, 18, 60, 0.30);
  --shadow-card: 0 24px 60px -30px rgba(15, 18, 60, 0.24);
  --img-fade: 1;

  --glass-bg: color-mix(in srgb, #ffffff 72%, transparent);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-feature-settings: 'ss01', 'cv05';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   2.1 Lenis — required stylesheet

   vendor/lenis.min.js (1.1.14) drives scrolling by assigning
   documentElement.scrollTop every frame. Per CSSOM-View, that assignment obeys
   the element's computed scroll-behavior — so with `scroll-behavior: smooth`
   above, each write starts a *native* smooth animation that the next frame
   restarts, while Lenis preventDefault()s the wheel event. Nothing lands and
   the page reads as frozen on desktop (Lenis is gated off on touch, which is
   why phones were unaffected).

   These are Lenis's own required rules, which had never been added. Do not
   drop `scroll-behavior: auto !important` — it is what makes the wheel work.
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body { height: auto; }

/* `.lenis` is present the whole time Lenis is instantiated, `.lenis-smooth`
   only during an in-flight scroll — so the persistent class is the one that
   has to carry the override, or the very first frame of a gesture still races
   the native animation. Nothing is lost: anim.js intercepts every in-page
   anchor and animates it with lenis.scrollTo(). Contexts where Lenis never
   starts — touch, coarse pointer, narrow viewports, reduced motion, no JS —
   never get the class, and keep the native smooth scrolling set above. */
html.lenis { scroll-behavior: auto !important; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 400;
  padding: 10px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 0.85rem; font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: none; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-wide { width: min(var(--max-wide), 100% - var(--gutter) * 2); margin-inline: auto; }

.section { position: relative; padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--flush-top { padding-top: 0; }

/* Hairline rule that reads as a system boundary */
.section--ruled { border-top: 1px solid var(--border); }

.grid { display: grid; gap: var(--sp-3); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Ambient background field, opt-in per section */
.field { position: relative; isolation: isolate; }
.field::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
/* Display sizes track tighter than body headings — the larger the type, the
   less air the letterforms need. */
h1 { font-size: var(--step-4); letter-spacing: -0.05em; line-height: 0.98; }
h2 { font-size: var(--step-3); letter-spacing: -0.046em; }
h3 { font-size: var(--step-2); letter-spacing: -0.032em; line-height: 1.12; }
h4 { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.2; }

.display { font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.055em; }
.hl { color: var(--brand-pale); }
.dim { color: var(--text-3); }

p { text-wrap: pretty; }
.lede {
  max-width: 62ch;
  color: var(--text-2);
  font-size: var(--step-1);
  line-height: 1.58;
  letter-spacing: -0.011em;
}
.body-2 { color: var(--text-2); font-size: var(--step-0); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.62em;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.66rem + 0.1vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-pale);
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--dot::before {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent);
  animation: pulse 2.6s var(--ease-io) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--signal) 0%, transparent); }
}

.text-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--brand-pale);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease), color 0.25s;
}
.text-link:hover { background-size: 100% 1px; color: var(--text); }
.text-link .arw { transition: transform 0.35s var(--ease); }
.text-link:hover .arw { transform: translate(3px, -3px); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 50px;
  padding: 0 1.55rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), border-color 0.3s, background-color 0.3s, box-shadow 0.4s var(--ease), color 0.3s;
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.btn:hover::before { opacity: 1; }

.btn--primary {
  --btn-bg: var(--brand-deep);
  --btn-fg: #fff;
  --btn-bd: transparent;
  box-shadow: 0 14px 40px -14px rgba(83, 58, 253, 0.75);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 52px -16px rgba(83, 58, 253, 0.9); }

.btn--ghost { --btn-bg: var(--surface); }
.btn--ghost:hover { --btn-bd: var(--border-brand); background: var(--surface-2); transform: translateY(-2px); }

.btn--quiet { --btn-bd: transparent; --btn-fg: var(--text-2); min-height: 40px; padding: 0 0.9rem; }
.btn--quiet:hover { --btn-fg: var(--text); background: var(--surface); }

.btn--lg { min-height: 58px; padding: 0 2rem; font-size: 0.95rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s, backdrop-filter 0.35s, transform 0.45s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--border);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  height: 100%;
}
.brand { display: block; width: 168px; flex: none; }
.brand img { width: 100%; }
.brand__light { display: none; }
[data-theme='light'] .brand__dark { display: none; }
[data-theme='light'] .brand__light { display: block; }

.nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link {
  position: relative;
  padding: 0.35rem 0;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.25s;
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--brand-lift);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: 0.65rem; }

.theme-toggle {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-2);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s, transform 0.4s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-brand); background: var(--surface); transform: rotate(18deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-sun { display: none; }
[data-theme='light'] .theme-toggle .i-sun { display: block; }
[data-theme='light'] .theme-toggle .i-moon { display: none; }

.nav__burger {
  display: none;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0;
}
.nav__burger i {
  display: block; width: 16px; height: 1.5px; margin: 4px auto;
  background: var(--text);
  transition: transform 0.32s var(--ease), opacity 0.2s;
}
.nav__burger[aria-expanded='true'] i:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav__burger[aria-expanded='true'] i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* In-menu CTA. Hidden by default, shown by the burger breakpoint in §24. */
.nav__cta-m { display: none; }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding-block: var(--sp-6) var(--sp-3);
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  overflow: hidden;
}
.footer__glow {
  position: absolute; left: 50%; top: -60%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow-a), transparent 62%);
  opacity: 0.5; pointer-events: none;
}
.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}
.footer__brandcol { max-width: 30ch; display: grid; gap: var(--sp-2); align-content: start; }
.footer__brandcol .brand { width: 176px; }
.footer__tag { color: var(--text-2); font-size: 0.9rem; }
.footer__col h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2); }
.footer__col ul { list-style: none; display: grid; gap: 0.6rem; }
.footer__col a { color: var(--text-2); font-size: 0.9rem; transition: color 0.25s, transform 0.3s var(--ease); display: inline-block; }
.footer__col a:hover { color: var(--text); transform: translateX(3px); }
.footer__base {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Reveal / motion utilities
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.85s var(--ease) var(--d, 0s),
    transform 0.95s var(--ease) var(--d, 0s),
    filter 0.95s var(--ease) var(--d, 0s);
  filter: blur(6px);
  will-change: opacity, transform;
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='left'] { transform: translate3d(-32px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(32px, 0, 0); }
.js [data-reveal='scale'] { transform: scale(0.955); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Line-by-line headline mask */
.split-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease) var(--d, 0s);
}
.js .split.is-in .split-line > span { transform: none; }
html:not(.js) .split-line > span { transform: none; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(680px, 96svh, 1000px);
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-6);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero__bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, #000 10%, transparent 75%);
}
.hero__aurora {
  position: absolute; inset: -25%;
  z-index: -4;
  background:
    radial-gradient(38% 44% at 22% 26%, var(--glow-a), transparent 62%),
    radial-gradient(34% 40% at 82% 22%, rgba(138, 123, 255, 0.20), transparent 66%),
    radial-gradient(42% 46% at 62% 84%, var(--glow-b), transparent 68%);
  filter: blur(28px);
  animation: drift 26s var(--ease-io) infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.02); }
}
/* Cursor spotlight — driven by --px/--py set in JS */
.hero__spot {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(460px circle at var(--px, 50%) var(--py, 40%), rgba(138, 123, 255, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.hero:hover .hero__spot { opacity: 1; }
.hero__fade {
  position: absolute; inset: auto 0 0; height: 200px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero__copy { max-width: 42ch; }
.hero h1 { margin-top: var(--sp-3); }
.hero__lede { margin-top: var(--sp-3); }
.hero .btn-row { margin-top: var(--sp-4); }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.55em; }
.hero__trust span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal);
}

/* Hero console panel */
.console {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.console::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(138, 123, 255, 0.55), transparent 42%, transparent 62%, rgba(79, 227, 176, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.console__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.console__bar b { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.console__live {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal);
}
.console__live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: pulse 2.4s var(--ease-io) infinite;
}
.console__rows { padding: 0.25rem 1.15rem; }
.console__row {
  display: grid;
  grid-template-columns: minmax(0, 96px) 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--border);
  transition: transform 0.4s var(--ease);
}
.console__row:last-child { border-bottom: 0; }
.console__row:hover { transform: translateX(4px); }
.console__row > .mono { color: var(--text-3); font-size: 0.64rem; letter-spacing: 0.11em; padding-top: 0.2em; }
.console__row b { display: block; font-size: 0.94rem; font-weight: 600; letter-spacing: -0.01em; }
.console__row small { display: block; margin-top: 0.25rem; color: var(--text-3); font-size: 0.76rem; line-height: 1.5; }
.console__foot {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.95rem 1.15rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.console__foot i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-lift); }

/* --------------------------------------------------------------------------
   10. Metrics strip
   -------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--border);
}
.metric {
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--border);
  transition: background-color 0.4s var(--ease);
}
.metric:last-child { border-right: 0; }
.metric:hover { background: var(--surface); }
.metric b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric span { display: block; margin-top: 0.65rem; color: var(--text-3); font-size: 0.82rem; line-height: 1.45; max-width: 24ch; }

/* --------------------------------------------------------------------------
   11. Section headers
   -------------------------------------------------------------------------- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-4) clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: var(--sp-5);
}
.head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.head--center .lede { text-align: center; }
.head--stack { grid-template-columns: 1fr; align-items: start; }
.head h2 { margin-top: var(--sp-2); }
.head .lede { max-width: 46ch; }

/* --------------------------------------------------------------------------
   12. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.card:hover { border-color: var(--border-brand); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }
.card__no {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  color: var(--brand-pale);
}
.card p { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }
.card--pad-lg { padding: clamp(1.9rem, 3vw, 3rem); }

.meta { display: grid; gap: 0; margin-top: var(--sp-1); }
.meta > div {
  display: grid;
  grid-template-columns: minmax(0, 108px) 1fr;
  gap: 1rem;
  padding: 0.72rem 0;
  border-top: 1px solid var(--border);
}
.meta dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.meta dd { color: var(--text-2); font-size: 0.86rem; line-height: 1.5; }

.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
}
.chip--live { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 32%, transparent); }
.chip--dev { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --------------------------------------------------------------------------
   13. Sticky capability rail
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.rail__aside { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); align-self: start; }
.rail__aside h2 { margin-top: var(--sp-2); }
.rail__aside .lede { margin-top: var(--sp-3); font-size: var(--step-0); }
.rail__aside .btn { margin-top: var(--sp-4); }
.rail__list { display: grid; gap: var(--sp-2); }

.rail__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.rail__item:hover { border-color: var(--border-brand); background: var(--surface-2); transform: translateX(6px); }
.rail__idx {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em;
  color: var(--brand-pale);
  padding-top: 0.35em;
}
.rail__item h3 { font-size: var(--step-1); }
.rail__item p { margin-top: 0.55rem; color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
.rail__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-2); }
.rail__tags span {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   14. Portfolio
   -------------------------------------------------------------------------- */
.folio {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}
.folio__item { grid-column: span 2; }
.folio__item--wide { grid-column: span 3; }
.folio__item--full { grid-column: span 6; }

.proj {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.5s var(--ease), transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.proj:hover { border-color: var(--border-brand); transform: translateY(-6px); box-shadow: var(--shadow-card); }

.proj__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.proj__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.92) contrast(1.02);
}
.proj:hover .proj__shot img { transform: scale(1.065); filter: saturate(1.05) contrast(1.03); }
.proj__shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 62%, transparent), transparent 55%);
  pointer-events: none;
}
.proj__badge {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}
.proj__body { display: grid; align-content: start; gap: 0.6rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.proj__kicker { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.proj__body h3 { font-size: var(--step-1); }
.proj__body p { color: var(--text-2); font-size: 0.88rem; line-height: 1.58; }
.proj__stats { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.2rem; }
.proj__stats span {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 0.45em;
}
.proj__stats span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--brand-lift); }
.proj__go { margin-top: 0.35rem; }
.proj__link { position: absolute; inset: 0; z-index: 3; }
.proj:hover .proj__go { background-size: 100% 1px; color: var(--text); }
.proj:hover .proj__go .arw { transform: translate(3px, -3px); }

/* Featured case study — split layout */
.case {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: border-color 0.5s var(--ease);
}
.case:hover { border-color: var(--border-brand); }
.case:nth-child(even) > .case__media { order: -1; }
.case__body { display: grid; align-content: start; gap: var(--sp-2); }
.case__body h3 { font-size: var(--step-2); }
.case__body > p { color: var(--text-2); }
.case__media {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.case__media img { width: 100%; transition: transform 1.2s var(--ease); }
.case:hover .case__media img { transform: scale(1.035); }
.case__cap {
  display: block;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}

/* --------------------------------------------------------------------------
   15. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: var(--sp-3);
  border-block: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, #000 var(--mq-fade), #000 calc(100% - var(--mq-fade)), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mq-fade), #000 calc(100% - var(--mq-fade)), transparent);
  user-select: none;
}
/* Both the original track and the aria-hidden clone ap.js appends read
   --mq-dur off .marquee, so anim.js only ever sets one value. */
.marquee__track {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  flex: none; min-width: 100%;
  padding-right: clamp(2rem, 5vw, 4.5rem);
  animation: slide var(--mq-dur) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }
.marquee__item {
  display: inline-flex; align-items: center; gap: 0.7rem;
  flex: none;
  color: var(--text-3);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.3s;
}
.marquee__item:hover { color: var(--text); }
.marquee__item img { width: 20px; height: 20px; opacity: 0.72; }
[data-theme='light'] .marquee__item img { filter: invert(1) brightness(0.35); }

/* --------------------------------------------------------------------------
   16. Engagements
   -------------------------------------------------------------------------- */
.tiers { display: grid; border-top: 1px solid var(--border); }
.tier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(0.5rem, 1.5vw, 1.5rem);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.4s var(--ease), padding-left 0.5s var(--ease);
}
.tier::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brand-lift);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.5s var(--ease);
}
.tier:hover { background: var(--surface); padding-left: clamp(1rem, 2.5vw, 2.25rem); }
.tier:hover::before { transform: scaleY(1); transform-origin: top; }
.tier__type { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-pale); }
.tier h3 { margin-top: 0.5rem; font-size: var(--step-1); }
.tier > p { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
.tier__price { text-align: right; display: grid; gap: 0.3rem; min-width: 170px; }
.tier__price b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; letter-spacing: -0.03em; }
.tier__price span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* --------------------------------------------------------------------------
   17. Spotlight / audit block
   -------------------------------------------------------------------------- */
.spotlight {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.9rem, 4vw, 3.6rem);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  overflow: hidden;
  isolation: isolate;
}
.spotlight::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 90% at 100% 100%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(70% 90% at 100% 100%, #000, transparent 70%);
}
.spotlight__body { display: grid; align-content: start; gap: var(--sp-2); }
.spotlight__body .btn { margin-top: var(--sp-2); justify-self: start; }

/* --------------------------------------------------------------------------
   18. Split media block
   -------------------------------------------------------------------------- */
.split-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split-media__fig {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.split-media__fig img { width: 100%; }
.split-media__fig figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.split-media__copy { display: grid; align-content: start; gap: var(--sp-2); }
.split-media__copy p { color: var(--text-2); }

/* --------------------------------------------------------------------------
   19. Process / flow
   -------------------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.flow__stage { display: grid; gap: 0.4rem; align-content: start; padding: clamp(1.1rem, 2vw, 1.6rem); background: var(--bg); transition: background-color 0.4s var(--ease); }
.flow__stage:hover { background: var(--surface-solid); }
.flow__stage > span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--brand-pale); }
.flow__stage b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.flow__stage small { color: var(--text-3); font-size: 0.78rem; line-height: 1.45; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.step { position: relative; display: grid; gap: 0.7rem; align-content: start; padding: clamp(1.5rem, 2.5vw, 2.2rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color 0.4s, transform 0.5s var(--ease); }
.step:hover { border-color: var(--border-brand); transform: translateY(-4px); }
.step p { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
.step__out { margin-top: 0.4rem; padding-top: 0.85rem; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); line-height: 1.6; }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) clamp(2rem, 5vw, 4rem); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.check__mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
  border-radius: 50%;
  color: var(--signal);
  font-size: 0.72rem;
}
.check h3 { font-size: 1.02rem; font-weight: 600; font-family: var(--font-body); letter-spacing: -0.01em; }
.check p { margin-top: 0.35rem; color: var(--text-2); font-size: 0.88rem; line-height: 1.58; }

/* --------------------------------------------------------------------------
   20. Page header (interior pages)
   -------------------------------------------------------------------------- */
.pagehead {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-6);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.pagehead__bg::before {
  content: '';
  position: absolute; inset: -40% -10% auto -10%; height: 150%;
  background:
    radial-gradient(40% 60% at 20% 0%, var(--glow-a), transparent 65%),
    radial-gradient(36% 52% at 88% 12%, var(--glow-b), transparent 68%);
  filter: blur(24px);
  animation: drift 30s var(--ease-io) infinite alternate;
}
.pagehead__bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 72%);
}
.pagehead h1 { margin-top: var(--sp-3); max-width: 18ch; }
.pagehead .lede { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   21. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
  padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
    var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: '';
  position: absolute; inset: -50% -20% auto; height: 160%; z-index: -1;
  background: conic-gradient(from 180deg at 50% 50%, transparent, color-mix(in srgb, var(--brand) 18%, transparent), transparent 55%);
  animation: spin 22s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta h2 { max-width: 20ch; }
.cta .lede { max-width: 54ch; text-align: center; }

/* --------------------------------------------------------------------------
   22. Forms
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-info { display: grid; align-content: start; gap: var(--sp-2); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.email-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  color: var(--brand-pale);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.45s var(--ease);
  width: fit-content;
}
.email-link:hover { background-size: 100% 1px; }
.contact-meta { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); color: var(--text-3); font-size: 0.85rem; }

.form { display: grid; gap: var(--sp-2); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.field-group { display: grid; gap: 0.5rem; }
.field-group label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.94rem;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.field-group textarea { min-height: 140px; resize: vertical; }
.field-group input::placeholder, .field-group textarea::placeholder { color: var(--text-3); opacity: 0.75; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus {
  outline: none;
  border-color: var(--brand-lift);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.field-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23767ba0' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.5rem; }
.form-help { color: var(--text-3); font-size: 0.76rem; line-height: 1.55; }
.form-status {
  display: none;
  padding: 0.9rem 1.1rem; margin-bottom: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  color: var(--signal);
  font-size: 0.88rem;
}
.form-status.is-visible { display: block; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   23. Misc blocks
   -------------------------------------------------------------------------- */
.quote {
  display: grid; gap: var(--sp-2);
  padding: clamp(1.9rem, 4vw, 3.2rem);
  border-left: 2px solid var(--brand-lift);
  background: var(--surface);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.quote blockquote { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; letter-spacing: -0.035em; line-height: 1.18; text-wrap: balance; }
.quote cite { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }

.prose { max-width: 68ch; display: grid; gap: var(--sp-3); }
.prose p { color: var(--text-2); font-size: var(--step-0); line-height: 1.68; }

.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.stack-item { display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.15rem; background: var(--bg); transition: background-color 0.35s; }
.stack-item:hover { background: var(--surface-solid); }
.stack-item img { width: 22px; height: 22px; opacity: 0.85; }
[data-theme='light'] .stack-item img { filter: invert(1) brightness(0.3); }
.stack-item span { font-size: 0.82rem; color: var(--text-2); }

.notice {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.notice__mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--brand-pale); }
.notice p { color: var(--text-2); font-size: 0.9rem; margin-top: 0.35rem; }

.band {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.band__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-pale); }
.band p { color: var(--text-2); font-size: 0.9rem; margin-top: 0.5rem; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.75rem; z-index: 2;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--text-3), transparent); animation: cue 2.4s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(34px); opacity: 0; } }

/* Scroll progress bar */
.progress {
  position: fixed; inset: 0 0 auto; z-index: 201;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-lift), var(--signal));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__copy { max-width: 56ch; }
  .rail { grid-template-columns: 1fr; }
  .rail__aside { position: static; }
  .folio__item { grid-column: span 3; }
  .folio__item--wide, .folio__item--full { grid-column: span 6; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { position: static; }
}

/* Nav collapses to the burger at 1000px — six links stop fitting before the
   layout breakpoint below, so it gets its own query. */
@media (max-width: 1000px) {
  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-125%);
    visibility: hidden;
    transition: transform 0.45s var(--ease), visibility 0.45s;
  }
  .nav__menu.is-open { transform: none; visibility: visible; }
  .nav__link { padding: 1rem 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__cta-m { display: inline-flex; margin-top: var(--sp-3); }
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .head { grid-template-columns: 1fr; align-items: start; }
  .case { grid-template-columns: 1fr; }
  .case > .case__media,
  .case:nth-child(even) > .case__media { order: -1; }
  .spotlight, .split-media, .checks { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 1fr; gap: var(--sp-2); }
  .tier__price { text-align: left; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brandcol { grid-column: 1 / -1; }
  .notice { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --nav-h: 66px; }
  .folio__item, .folio__item--wide, .folio__item--full { grid-column: span 6; }
  .flow { grid-template-columns: 1fr; }
  .console__row { grid-template-columns: 1fr; gap: 0.4rem; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--border); }
  .metric:last-child { border-bottom: 0; }
  .btn-row .btn { width: 100%; }
  .meta > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .quote { border-radius: var(--r-lg); }
  .scroll-cue { display: none; }
}

/* --------------------------------------------------------------------------
   25. Reduced motion & no-JS safety
   -------------------------------------------------------------------------- */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .js .split-line > span { transform: none; }
  .hero__aurora, .cta::before, .marquee__track { animation: none; }
}

@media print {
  .nav, .footer__glow, .progress, .scroll-cue { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   26. Word-mask headline (built by ap.js)
   -------------------------------------------------------------------------- */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.split-word > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease) var(--d, 0s);
  will-change: transform;
}
.split.is-in .split-word > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .split-word > i { transform: none !important; }
}

/* --------------------------------------------------------------------------
   27. Component adjustments
   -------------------------------------------------------------------------- */

/* Full-width portfolio card runs horizontally */
.folio__item--full .proj {
  grid-template-rows: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
}
.folio__item--full .proj__shot {
  aspect-ratio: auto;
  min-height: 320px;
  border-bottom: 0;
  border-right: 1px solid var(--border);
}
.folio__item--full .proj__body { align-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); gap: 0.75rem; }
.folio__item--full .proj__body h3 { font-size: var(--step-2); }
.folio__item--full .proj__body p { font-size: 0.95rem; max-width: 46ch; }

@media (max-width: 900px) {
  .folio__item--full .proj { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .folio__item--full .proj__shot {
    aspect-ratio: 16 / 10; min-height: 0;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
}

/* Two-up utility used on interior pages */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 760px) { .duo, .quad { grid-template-columns: 1fr; } }

/* Case list spacing */
.cases { display: grid; gap: var(--sp-3); }

/* Sticky offset helper */
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-center { text-align: center; justify-items: center; }
.u-maxw { max-width: 62ch; }

/* --------------------------------------------------------------------------
   28. Premium layer
   Release: 2026.08.01 · "£10k pass"

   Everything below is additive. It introduces no new dependency on JS: with
   scripting off, or with prefers-reduced-motion, every rule here either does
   nothing or resolves to the pre-upgrade appearance.

   CONTRACT WITH assets/anim.js
   - anim.js owns `transform` on every hook below. CSS here never sets
     `transform` on a hook — it uses the standalone `translate` property for
     centring, which composes with GSAP's `transform` instead of fighting it.
   - CSS here never hides a [data-gs*] element. anim.js sets its own from-state
     via gsap.set(), so a no-JS page renders complete and visible.
   - Do not bind anim.js to [data-reveal], [data-split], [data-magnetic] or
     [data-spotlight]. Those belong to ap.js, which is frozen.
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- 28.1 cursor
   Markup is injected by anim.js (nothing in the HTML, so no-JS gets no stray
   nodes):

     <div class="cursor" data-cursor aria-hidden="true">
       <div class="cursor__dot"></div>
       <div class="cursor__ring"><span class="cursor__label"></span></div>
     </div>

   anim.js drives .cursor__dot / .cursor__ring with GSAP (two different lerp
   speeds gives the trail) and toggles state classes on .cursor itself:
   is-ready · is-hover · is-down · is-label.
   Label text comes from [data-cursor-label] on the hovered element. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.cursor.is-ready { opacity: 1; }

.cursor__dot,
.cursor__ring {
  position: absolute; left: 0; top: 0;
  border-radius: 999px;
  /* Standalone `translate` — leaves `transform` free for GSAP. */
  translate: -50% -50%;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: var(--text);
  transition: width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.cursor__ring {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-strong);
  transition:
    width 0.42s var(--ease-expo), height 0.42s var(--ease-expo),
    border-color 0.3s, background-color 0.3s;
}
.cursor__label {
  font-family: var(--font-mono);
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.26s var(--ease), scale 0.26s var(--ease);
}

.cursor.is-hover .cursor__dot { width: 4px; height: 4px; }
.cursor.is-hover .cursor__ring {
  width: 54px; height: 54px;
  border-color: var(--border-brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.cursor.is-down .cursor__ring { width: 26px; height: 26px; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__ring {
  width: 78px; height: 78px;
  border-color: transparent;
  background: var(--brand-deep);
}
.cursor.is-label .cursor__label { opacity: 1; scale: 1; color: var(--on-brand); }

/* Native cursor only disappears once anim.js confirms a fine pointer and adds
   .has-cursor. Text entry always keeps its caret. */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor label,
  html.has-cursor summary,
  html.has-cursor [role='button'] { cursor: none; }

  html.has-cursor input,
  html.has-cursor select,
  html.has-cursor textarea { cursor: auto; }
}

/* Touch, coarse pointers and reduced motion never see it at all. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* --------------------------------------------------------- 28.2 button shine
   .btn::before is already the pointer-tracked light source from §5, so the
   sweep uses ::after. Scoped to the two prominent variants — a shine on every
   quiet button reads as noise. */
.btn--primary { --btn-shine: rgba(255, 255, 255, 0.30); }

.btn--primary::after,
.btn--ghost::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 38%, var(--btn-shine) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease-expo);
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--ghost:hover::after { transform: translateX(120%); }

/* ---------------------------------------------------------- 28.3 arrow nudge
   .arw already nudges inside .text-link (§4). Buttons use the same glyph on
   index.html and work.html but had no hover response. */
.btn .arw { transition: transform 0.35s var(--ease); }
.btn:hover .arw { transform: translate(3px, -3px); }

/* ------------------------------------------------------- 28.4 underline sweep
   Same gradient-background technique as .text-link, as a reusable utility.
   Applied to the footer link columns, which previously only shifted sideways. */
.sweep,
.footer__col a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease), color 0.25s, transform 0.3s var(--ease);
}
.sweep:hover,
.footer__col a:hover { background-size: 100% 1px; }

/* --------------------------------------------------------- 28.5 glass depth
   The large surfaces (.console §9, .spotlight §17, .cta §21, .case §14) blur
   what sits behind them. Deliberately NOT applied to .card / .proj: there are
   20+ of those on a page and stacking that many backdrop filters under a
   Lenis + ScrollTrigger scroll is the usual cause of scroll jank. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .spotlight, .cta, .case { background-color: var(--glass-bg); }
}

/* -------------------------------------------------- 28.6 scroll-anim hooks
   Bind anim.js to these. None of them are styled invisible here.

     [data-gs]                  section reveal target
     [data-gs-stagger]          reveal its direct children in sequence
     [data-gs-parallax="0.15"]  parallax factor, positive = slower than scroll
     [data-gs-hero]             hero group that fades out on scroll
     [data-cursor-label="View"] label shown inside the cursor ring
     [data-tilt]                tilt target — see 28.7

   [data-parallax] is ap.js's own parallax hook and is currently unused by any
   page, so it stays free; prefer [data-gs-parallax] to keep the two layers
   clearly separated. */
[data-gs],
[data-gs-parallax],
[data-gs-hero] { will-change: transform, opacity; }

/* Once anim.js has finished with an element it drops will-change to release
   the compositor layer. */
[data-gs].gs-done,
[data-gs-parallax].gs-done,
[data-gs-hero].gs-done { will-change: auto; }

/* ------------------------------------------------------------- 28.7 card tilt
   Tilt applies to .proj__shot, not .proj. .proj already carries a CSS hover
   transform (§14) and .card/.rail__item receive inline transforms from ap.js,
   so tilting those elements would overwrite work the frozen layer owns.
   .proj__shot has no transform of its own and its inner <img> keeps the
   existing hover zoom, which reads as the parallax-inside-the-frame effect. */
.proj { perspective: 900px; }
.proj__shot[data-tilt] { transform-style: preserve-3d; }

/* -------------------------------------------------- 28.8 page transitions
   Cross-document View Transitions. Chromium and Safari 18.2+ animate; every
   other browser performs an ordinary navigation, which is the current
   behaviour. Requires an http(s) origin — it does not run from file://. */
@view-transition { navigation: auto; }

/* Chrome keys these off the element, so the nav and footer ride through the
   navigation instead of crossfading with the page body. */
.nav { view-transition-name: ap-nav; }
.footer { view-transition-name: ap-footer; }

::view-transition-old(root) { animation: vt-out 0.26s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in 0.44s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------- 28.9 reduced motion & no-JS
   §25 already neutralises animation/transition durations globally, but the
   `*` selector does not reach view-transition pseudo-elements, and a few of
   the hooks above need an explicit resting state. */
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor label,
  html.has-cursor summary,
  html.has-cursor [role='button'] { cursor: auto; }

  .btn--primary::after,
  .btn--ghost::after { display: none; }

  .marquee__track { animation: none; }

  [data-gs],
  [data-gs-parallax],
  [data-gs-hero] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  ::view-transition-old(root) { animation: none; opacity: 0; }
  ::view-transition-new(root) { animation: none; opacity: 1; }
}

/* Scripting off: the hooks are inert markers, but make the guarantee explicit
   so a future change here cannot hide content from a crawler or a reader. */
html:not(.js) [data-gs],
html:not(.js) [data-gs-parallax],
html:not(.js) [data-gs-hero] {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .cursor { display: none; }