/* Digital Army — shared design system
   Extracted from the source single-page index.html.
   Used by every page (home, partners, cases, team, methodology, why, contact). */

  :root {
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --motion-fast: 120ms;
    --motion-default: 200ms;
    --motion-slow: 600ms;
    --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --step-0: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --step-1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-3: clamp(1.95rem, 1.74rem + 0.9vw, 2.44rem);
    --step-4: clamp(2.5rem, 2.1rem + 1.5vw, 3.5rem);
    --step-5: clamp(2.8rem, 2.38rem + 1.85vw, 3.81rem);
    --step-6: clamp(3.5rem, 2.8rem + 3vw, 5rem);
    --step-mega: clamp(3.5rem, 2.8rem + 4vw, 6rem);
    --step-numeral: clamp(3rem, 2.4rem + 4vw, 5.75rem);

    font-size: clamp(15px, 0.875rem + 0.25vw, 17px);
    --page-pad-x: clamp(16px, 4vw, 32px);
    scroll-behavior: smooth;
  }

  /* DARK */
  /* Dark mode is the only mode. Tokens live on :root. */
  :root {
    --bg: oklch(0.115 0.008 235);
    --surface: oklch(0.165 0.012 235);
    --surface-elevated: oklch(0.205 0.014 235);
    --surface-band: oklch(0.135 0.010 235);
    --surface-deep: oklch(0.085 0.006 235);
    --border: oklch(0.265 0.014 235);
    --border-strong: oklch(0.345 0.018 235);
    --border-soft: oklch(0.215 0.012 235);
    --text-primary: oklch(0.975 0.005 230);
    --text-secondary: oklch(0.745 0.012 230);
    --text-tertiary: oklch(0.555 0.014 230);
    --accent: oklch(0.785 0.145 230);
    --accent-bright: oklch(0.835 0.155 225);
    --accent-hover: oklch(0.825 0.155 230);
    --accent-soft: oklch(0.785 0.145 230 / 0.14);
    --accent-faint: oklch(0.785 0.145 230 / 0.06);
    --accent-glow: oklch(0.785 0.145 230 / 0.45);
    /* Waterfall colours: start/end bars are accent; gain bars are slightly different hue
       to show they're additions; loss bars (none here) would be danger. */
    --gain: oklch(0.745 0.145 158);
    --gain-soft: oklch(0.745 0.145 158 / 0.18);
    --gain-glow: oklch(0.745 0.145 158 / 0.4);
    --loss: oklch(0.665 0.180 25);
    --shadow-card: 0 8px 32px -10px rgb(0 0 0 / 0.6);
    --shadow-glow: 0 0 32px -4px var(--accent-glow);
    --font-weight-display: 600;
    --font-weight-body: 400;
    --font-weight-strong: 600;
    --letter-spacing-body: -0.005em;
    --letter-spacing-display: -0.025em;
  }

  /* Reset */
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
  ul { list-style: none; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }

  html {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Clip horizontal overflow at the html level — putting it on body
       would create a scroll container and break any position:sticky
       descendant on the page. clip is paint-only, doesn't trap scroll. */
    overflow-x: clip;
  }
  body {
    font-size: var(--step-1);
    font-weight: var(--font-weight-body);
    letter-spacing: var(--letter-spacing-body);
    line-height: 1.55;
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
    transition: background var(--motion-default), color var(--motion-default);
  }
  .num, .tabnum { font-variant-numeric: tabular-nums; }
  ::selection { background: var(--accent); color: var(--bg); }

  .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
  }
  .band { position: relative; padding: var(--space-16) 0; }

  /* Anchor scroll offset — sticky nav is ~70px, so when a hash link
     fires we offset the target by ~90px so its eyebrow lands just
     below the nav rather than behind it. Applied to every section
     with an id. */
  section[id], footer[id] { scroll-margin-top: 92px; }

  /* ─── SCHEMATIC BACKDROP ─────────────────────────────────────
     Faint circuit-board pattern behind every section — sparse
     right-angle traces with small nodes, plus a handful of
     "neurons" that pulse on staggered timers. Procedurally
     generated by JS at init so each load looks slightly different.
     Sits behind everything via fixed-position + z-index: -1.    */
  .schematic-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
  }
  .schematic-bg svg { width: 100%; height: 100%; display: block; }
  /* Schematic boosted so it survives being layered behind translucent
     section bands — at 92% band opacity the schematic only showed at
     ~1.5% effective visibility (alpha × bg-let-through). Bumping the
     stroke and fill alphas + lowering the band opacities below brings
     it back to a clearly readable level. */
  .schematic-traces {
    filter: drop-shadow(0 1px 0 oklch(0.45 0.05 230 / 0.35));
  }
  .schematic-traces path {
    fill: none;
    stroke: oklch(0.72 0.08 230 / 0.32);
    stroke-width: 1;
    stroke-linecap: square;
  }
  .schematic-nodes {
    filter: drop-shadow(0 1px 0 oklch(0.4 0.05 230 / 0.5));
  }
  .schematic-nodes circle {
    fill: oklch(0.75 0.10 230 / 0.50);
  }
  .schematic-neurons .schematic-neuron {
    fill: oklch(0.75 0.10 230 / 0.55);
    transform-origin: center;
    transform-box: fill-box;
    animation: neuron-pulse var(--cycle, 6s) ease-in-out var(--delay, 0s) infinite;
    filter: drop-shadow(0 1px 0 oklch(0.4 0.05 230 / 0.5));
  }
  @keyframes neuron-pulse {
    0%, 78%, 100% {
      fill: oklch(0.75 0.10 230 / 0.55);
      transform: scale(1);
      filter: drop-shadow(0 1px 0 oklch(0.4 0.05 230 / 0.5));
    }
    84% {
      fill: oklch(0.90 0.19 230 / 1);
      transform: scale(2.6);
      filter: drop-shadow(0 0 8px oklch(0.90 0.19 230 / 0.7));
    }
    92% {
      fill: oklch(0.78 0.13 230 / 0.7);
      transform: scale(1.5);
      filter: drop-shadow(0 0 3px oklch(0.88 0.18 230 / 0.35));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .schematic-neurons .schematic-neuron { animation: none; }
  }

  /* ── Adjacent-band padding collapse ───────────────────────────
     Without this, two bands abutting stack their padding (e.g. 6rem
     bottom + 6rem top = 12rem dead space). With this, the second
     band's top padding halves — one breath, not two. */
  .band + .band,
  .band + .partners-band,
  .partners-band + .band,
  .partners-band + .pl-band,
  .pl-band + .chapter,
  .chapter + .band,
  .band + .meth-band,
  .demos-band + .meth-band {
    padding-top: var(--space-8);
  }
  .meth-band + .cta-band,
  .cta-band + .contact-band {
    padding-top: var(--space-12);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  /* Tighten eyebrow tracking on narrow viewports — uppercase + 0.18em
     on multi-segment strings ("FIG 1.0 · THE ECONOMIC CASE · ESTIMATE")
     wraps to 3 lines at 360px otherwise. Named anti-pattern in mobile
     guardrails. */
  @media (max-width: 600px) {
    .eyebrow { letter-spacing: 0.1em; font-size: 0.68rem; }
  }
  .chapter-headline {
    font-size: var(--step-5);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--letter-spacing-display);
    line-height: 1.05;
    margin-bottom: var(--space-6);
    color: var(--text-primary);
  }
  .chapter-headline .headline-accent {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .skip {
    position: absolute; left: -9999px;
    background: var(--surface); color: var(--text-primary);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  }
  .skip:focus { left: var(--space-4); top: var(--space-4); z-index: 100; }

  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s var(--motion-easing);
  }
  [data-reveal].in { opacity: 1; transform: none; }

  /* ─── TIME-STRIP ─────────────────────────────────────── */
  .timestrip {
    position: relative;
    height: 36px;
    background: var(--surface-deep);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    z-index: 60;
  }
  .timestrip-track {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    padding: 0 var(--page-pad-x);
    gap: var(--space-4);
    white-space: nowrap;
    overflow: hidden;
  }
  .timestrip-now {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    text-shadow: 0 0 8px var(--accent-glow);
  }
  .timestrip-now::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse-now 1.6s ease-in-out infinite;
  }
  @keyframes pulse-now { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
  .timestrip-rail {
    flex: 1;
    display: flex;
    gap: var(--space-6);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  }
  .timestrip-mote {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-secondary);
    flex-shrink: 0;
    animation: drift 32s linear infinite;
  }
  @keyframes drift {
    from { transform: translateX(100vw); }
    to   { transform: translateX(-100%); }
  }
  .timestrip-mote .t { color: var(--text-tertiary); }
  .timestrip-mote .a { color: var(--accent); opacity: 0.7; }

  @media (max-width: 600px) {
    .timestrip { height: 28px; font-size: 9px; }
  }

  /* ─── NAV ──────────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklch, var(--bg) 80%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--page-pad-x);
    max-width: 1240px; margin: 0 auto;
    gap: var(--space-4);
  }
  .brand {
    display: flex; align-items: center; gap: var(--space-3);
    font-weight: 600; font-size: 1.0rem; letter-spacing: -0.015em;
  }
  /* Brand mark slot. Helmet logo is roughly square (136×141 source), so the
     slot is sized to ~36×36. object-fit:contain ensures any future logo
     swap (with different aspect ratio) fits without distortion. */
  .brand-mark { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
  .brand-text { color: var(--text-primary); display: flex; align-items: baseline; }
  .brand-text .dot { color: var(--accent); }
  .nav-links {
    display: none;
    gap: var(--space-6); font-size: var(--step-0); color: var(--text-secondary);
  }
  @media (min-width: 768px) { .nav-links { display: flex; } }
  .nav-links a { transition: color var(--motion-default); padding: var(--space-2) 0; }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-actions { display: flex; gap: var(--space-3); align-items: center; }
  .nav-cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    border-radius: var(--radius-md);
    background: var(--accent); color: var(--surface-deep);
    font-size: var(--step-0); font-weight: 600;
    transition: all var(--motion-default) var(--motion-easing);
  }
  .nav-cta:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 20px -4px var(--accent-glow);
  }
  /* Hide inline nav-cta on mobile — the drawer carries its own Contact CTA.
     Keeps the nav bar uncluttered: brand + hamburger only on small screens. */
  @media (max-width: 767px) {
    .nav-cta { display: none; }
  }

  /* ── Hamburger button — mobile only ─────────────────────
     Three-bar toggle. Visible under 768px (where .nav-links hides),
     hidden at 768px+ where the inline links re-appear. */
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    transition: all var(--motion-default) var(--motion-easing);
  }
  .nav-burger:hover { border-color: var(--accent); }
  .nav-burger .burger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s var(--motion-easing);
  }
  /* Animate to X when drawer is open */
  .nav-burger[aria-expanded="true"] { border-color: var(--accent); }
  .nav-burger[aria-expanded="true"] .burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: var(--accent);
  }
  .nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-burger[aria-expanded="true"] .burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--accent);
  }
  @media (min-width: 768px) {
    .nav-burger { display: none; }
  }

  /* ── Slide-in drawer ────────────────────────────────────
     position:fixed panel that slides in from the right when burger
     is tapped. Backdrop dims the page. Drawer is mobile-only — at
     768px+ the inline nav-links handle navigation. */
  .nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--motion-easing);
  }
  .nav-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100svh;
    width: min(320px, 85vw);
    background: var(--bg);
    border-left: 1px solid var(--border-strong);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s var(--motion-easing);
    box-shadow: -16px 0 48px -12px rgb(0 0 0 / 0.7);
    /* Respect notched devices */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-drawer.show {
    transform: translateX(0);
  }
  .nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border);
  }
  .nav-drawer-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .nav-drawer-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    transition: all var(--motion-default) var(--motion-easing);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-drawer-close:hover {
    border-color: var(--accent);
    color: var(--text-primary);
  }
  .nav-drawer-links {
    display: flex;
    flex-direction: column;
    padding: var(--space-4) 0;
    flex: 1;
    overflow-y: auto;
  }
  .nav-drawer-links a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: var(--space-4) var(--space-6);
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border-soft);
    transition: all var(--motion-default) var(--motion-easing);
    text-decoration: none;
  }
  .nav-drawer-links a:hover,
  .nav-drawer-links a:focus-visible {
    background: var(--surface);
    color: var(--accent);
    padding-left: var(--space-7);
    outline: none;
  }
  .nav-drawer-cta {
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--border);
  }
  /* Drawer is mobile-only */
  @media (min-width: 768px) {
    .nav-drawer-backdrop,
    .nav-drawer {
      display: none;
    }
  }
  /* ─── HERO (no min-height — content sizes the band) ───── */
  .hero {
    padding: var(--space-12) 0 var(--space-16);
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 100%,
      var(--accent-soft) 0%, transparent 60%);
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
    max-width: 1240px; margin: 0 auto;
    padding: 0 var(--page-pad-x);
    position: relative;
  }
  /* Critical: min-width: 0 lets fr tracks actually shrink to share space.
     Without this, long headline words inflate the left track past its share. */
  .hero-grid > * { min-width: 0; }
  @media (min-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-16); align-items: center; }
  }
  .hero-headline {
    /* Tighter cap so the headline never inflates the column past its share */
    font-size: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.0;
    margin-bottom: var(--space-6);
    /* Allow word-break inside super-narrow columns as a last resort */
    overflow-wrap: break-word;
  }
  .hero-headline .accent { color: var(--accent); }
  .hero-deck {
    font-size: var(--step-2);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 32em;
    margin-bottom: var(--space-8);
  }
  .hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    min-height: 44px;
    border-radius: var(--radius-md);
    font-size: var(--step-0); font-weight: 600;
    transition: all var(--motion-default) var(--motion-easing);
    border: 1px solid transparent;
    cursor: pointer; font-family: var(--font-display);
  }
  .btn-primary { background: var(--accent); color: var(--surface-deep); }
  .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px var(--accent-glow);
  }
  .btn-secondary {
    background: transparent; color: var(--text-primary);
    border-color: var(--border-strong);
  }
  .btn-secondary:hover {
    background: var(--surface);
    border-color: var(--accent); color: var(--accent);
  }

  /* ─── HERO TASK-FLOW (lifted from interactive-09-drill rhythm) ─── */
  .task-flow {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-deep) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .task-flow-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.7rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-tertiary);
  }
  .task-flow-head .live {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent);
  }
  .task-flow-head .live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
    animation: pulse-now 1.6s ease-in-out infinite;
  }

  .task-flow-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
  }
  @media (min-width: 700px) {
    .task-flow-grid {
      grid-template-columns: 1fr 1.2fr 1fr;
      grid-template-rows: auto;
    }
  }

  .tf-col {
    padding: var(--space-6);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    min-height: 280px;
  }
  .tf-col + .tf-col {
    border-top: 1px solid var(--border);
  }
  @media (min-width: 700px) {
    .tf-col + .tf-col {
      border-top: none;
      border-left: 1px solid var(--border);
    }
  }

  .tf-col-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
  }

  /* INBOX side */
  .tf-msg {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
    transition: all 0.5s var(--motion-easing);
  }
  .tf-msg.active {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent-soft) 60%, var(--surface));
    box-shadow: 0 0 16px -4px var(--accent-glow);
  }
  .tf-msg.done {
    opacity: 0.4;
  }
  .tf-msg-from {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .tf-msg.active .tf-msg-from { color: var(--accent); }
  .tf-msg-body {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
  }

  /* PROCESS spine */
  .tf-process {
    display: flex; flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    align-items: stretch;
    text-align: center;
    position: relative;
  }
  .tf-process-step {
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: transparent;
    transition: all 0.4s var(--motion-easing);
    opacity: 0.35;
  }
  .tf-process-step.active {
    opacity: 1;
    background: color-mix(in oklch, var(--accent-soft) 50%, var(--surface));
    border: 1px solid var(--accent);
    box-shadow: 0 0 24px -8px var(--accent-glow);
  }
  .tf-process-step .verb {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .tf-process-step.active .verb { color: var(--accent); }
  .tf-process-step .meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 2px;
  }
  .tf-arrow {
    height: 1px;
    background: var(--border);
    margin: 0 var(--space-4);
    position: relative;
    overflow: hidden;
  }
  .tf-arrow::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s var(--motion-easing);
  }
  .tf-arrow.active::before { transform: translateX(100%); }

  /* OUTPUTS side */
  .tf-out {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
    transition: all 0.5s var(--motion-easing);
    opacity: 0.35;
  }
  .tf-out.appear {
    opacity: 1;
    border-color: var(--gain);
    background: color-mix(in oklch, var(--gain-soft) 50%, var(--surface));
  }
  .tf-out-key {
    color: var(--gain);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .tf-out-val {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
  }

  /* Foot bar */
  .task-flow-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: var(--surface-deep);
  }
  .task-flow-foot .key {
    color: var(--text-tertiary); font-size: 0.62rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-right: var(--space-2);
  }
  .task-flow-foot .val {
    color: var(--accent); font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 8px var(--accent-glow);
  }
  @media (max-width: 699px) {
    .task-flow-head {
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-4);
      align-items: flex-start;
      padding: var(--space-4);
      letter-spacing: 0.12em;
    }
    .task-flow-grid,
    .task-flow-grid > * {
      min-width: 0;
    }
    .tf-col {
      min-height: 0;
      padding: var(--space-4);
      gap: var(--space-2);
    }
    .tf-col-label {
      letter-spacing: 0.14em;
      margin-bottom: var(--space-1);
    }
    .tf-msg,
    .tf-out {
      padding: var(--space-3);
      font-size: 0.72rem;
    }
    .tf-process {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
      text-align: left;
    }
    .tf-process .tf-col-label {
      grid-column: 1 / -1;
      text-align: left !important;
    }
    .tf-process-step {
      opacity: 0.8;
      padding: var(--space-3);
      border: 1px solid var(--border-soft);
      background: color-mix(in oklch, var(--surface) 84%, var(--surface-deep));
    }
    .tf-process-step .meta {
      letter-spacing: 0.08em;
    }
    .tf-arrow {
      display: none;
    }
    .task-flow-foot {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: var(--space-2) var(--space-4);
      padding: var(--space-3) var(--space-4);
      font-size: 0.66rem;
    }
  }

  /* ─── PILLARS ──────────────────────────────────────── */
  .pillars-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-6); margin-top: var(--space-12);
  }
  @media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } }
  .pillar {
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--motion-default) var(--motion-easing);
    position: relative; overflow: hidden;
    /* Flex column so the example footer can be pinned to the bottom
       regardless of body-copy length — keeps section dividers in line
       across all four cards. */
    display: flex;
    flex-direction: column;
  }
  .pillar::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.5s var(--motion-easing);
  }
  .pillar:hover { border-color: var(--border-strong); transform: translateY(-2px); }
  .pillar:hover::before { transform: scaleX(1); }
  .pillar .num-tag {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--accent); letter-spacing: 0.18em;
    margin-bottom: var(--space-4);
    text-transform: uppercase; font-weight: 500;
  }
  .pillar h3 {
    font-size: var(--step-2); font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3); color: var(--text-primary);
  }
  .pillar p {
    color: var(--text-secondary); font-size: var(--step-0); line-height: 1.55;
    /* Body grows so cards with shorter copy still push the example
       footer to the bottom. */
    flex: 1;
  }
  .pillar .pillar-example {
    /* margin-top: auto belt-and-braces with flex:1 on .pillar p above —
       guarantees footer alignment across all four practice cards. */
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--text-tertiary); line-height: 1.6;
  }
  .pillar .pillar-example strong { color: var(--accent); font-weight: 500; }

  /* ─── P&L WATERFALL ─────────────────────────────────── */
  /* The signature finance chart per project doc.
     Six bars: Traditional R30M → +R10M revenue → +R12M direct cost
     → +R4.5M indirect cost → R56.5M AI-Driven. */
  .pl-band {
    background: color-mix(in oklch, var(--surface-deep) 68%, transparent);
    /* Asymmetric padding: full top, trimmed bottom. Top reads as
       "section opens" with breathing room; bottom is trimmed because the
       waterfall card already provides a clean, bordered visual termination
       — extra padding-bottom here just reads as dead space. */
    padding: var(--space-24) 0 var(--space-16);
    position: relative;
    overflow: hidden;
  }
  .pl-band::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 60%;
    background: radial-gradient(ellipse 50% 80% at 30% 0%,
      var(--accent-soft) 0%, transparent 60%);
    pointer-events: none;
  }
  .pl-band::after {
    content: ''; position: absolute;
    top: 0; left: -10%;
    width: 120%; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%, var(--accent) 35%, var(--accent-bright) 50%,
      var(--accent) 65%, transparent 100%);
    transform: rotate(-1.4deg); transform-origin: 50% 50%;
    box-shadow: 0 0 16px var(--accent-glow), 0 0 32px var(--accent-glow);
  }
  .pl-band .container { position: relative; }

  .pl-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-12);
  }
  @media (min-width: 1024px) {
    .pl-layout { grid-template-columns: 0.7fr 1.3fr; gap: var(--space-16); }
  }

  .pl-headline-block {
    font-family: var(--font-display);
  }
  .pl-headline-block .delta-tag {
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--accent); letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 500;
    margin-bottom: var(--space-3);
  }
  .pl-headline-block .delta-num {
    font-family: var(--font-mono);
    /* Tighter cap (was 6.5rem, now 5rem) so "+R 26.5M" stays on one line
       in the narrower left column at desktop. white-space:nowrap belt-and-
       braces so the +R never breaks off from the digits. */
    font-size: clamp(2.5rem, 1.8rem + 2.5vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin-bottom: var(--space-4);
    color: var(--accent);
    text-shadow: 0 0 32px var(--accent-glow), 0 0 64px var(--accent-glow);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .pl-headline-block .delta-sub {
    color: var(--text-secondary);
    font-size: var(--step-1);
    line-height: 1.55;
    margin-bottom: var(--space-6);
    max-width: 22em;
  }
  .pl-headline-block .delta-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-soft);
    font-family: var(--font-mono);
  }
  .pl-headline-block .delta-meta .k {
    font-size: 0.62rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-tertiary);
    margin-bottom: 4px;
  }
  .pl-headline-block .delta-meta .v {
    font-size: 1rem; color: var(--text-primary);
    font-variant-numeric: tabular-nums; font-weight: 500;
    /* Keep value transitions like "R 30M → R 56.5M" on one line where
       possible — wraps as a unit if column is too narrow. */
    white-space: nowrap;
  }
  .pl-headline-block .delta-meta .v.up {
    color: var(--accent);
  }

  /* The waterfall chart itself — pure SVG */
  .waterfall-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .waterfall-head {
    display: flex; justify-content: space-between;
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.68rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-tertiary);
  }
  .waterfall-head .left { color: var(--text-secondary); }
  .waterfall-svg {
    width: 100%;
    height: auto;
    /* Squatter than 16:10 — saves ~80px of dead vertical space below
       the chart bars before the footnote line. Caps absolute height too
       so the SVG never overshoots its container. */
    aspect-ratio: 16 / 9;
    max-height: 420px;
    overflow: visible;
  }
  .waterfall-svg .bar {
    transition: transform 0.9s var(--motion-easing),
                opacity 0.6s var(--motion-easing);
    transform-origin: bottom center;
    opacity: 0;
  }
  .waterfall-svg.in .bar {
    opacity: 1;
  }
  .waterfall-svg .bar.start,
  .waterfall-svg .bar.end {
    fill: var(--accent);
  }
  .waterfall-svg .bar.gain { fill: var(--gain); }
  .waterfall-svg .bar.glow-bg {
    fill: var(--accent);
    opacity: 0.18;
    filter: blur(8px);
  }
  .waterfall-svg.in .bar.glow-bg {
    opacity: 0.18;
  }
  .waterfall-svg .bar.glow-gain {
    fill: var(--gain);
    opacity: 0.18;
    filter: blur(8px);
  }
  .waterfall-svg .connector {
    stroke: var(--border-strong);
    stroke-dasharray: 2 3;
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.5s var(--motion-easing);
  }
  .waterfall-svg.in .connector { opacity: 0.6; }
  .waterfall-svg .bar-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--text-tertiary);
    text-anchor: middle;
    opacity: 0;
    transition: opacity 0.4s var(--motion-easing);
  }
  .waterfall-svg.in .bar-label { opacity: 1; }
  .waterfall-svg .bar-label.driver { fill: var(--text-secondary); }
  .waterfall-svg .bar-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    fill: var(--text-primary);
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity 0.4s var(--motion-easing);
  }
  .waterfall-svg.in .bar-value { opacity: 1; }
  .waterfall-svg .bar-value.delta {
    fill: var(--gain);
    font-size: 12px;
  }
  .waterfall-svg .bar-value.start-end { fill: var(--accent); }
  .waterfall-svg .axis {
    stroke: var(--border);
    stroke-width: 1;
  }
  .waterfall-svg .gridline {
    stroke: var(--border-soft);
    stroke-width: 1;
    stroke-dasharray: 1 4;
  }
  .waterfall-svg .axis-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--text-tertiary);
    text-anchor: end;
    font-variant-numeric: tabular-nums;
  }

  .waterfall-foot {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    line-height: 1.55;
  }
  .waterfall-foot strong {
    color: var(--text-secondary); font-weight: 500;
  }
  /* Source attribution sits inside the chart card, directly under the
     "Read left to right..." caption. Previously it lived in a standalone
     .footnote div below the .pl-layout grid — which left a tall empty band
     beneath it because the left column (headline-block) ended much higher
     than the right column (waterfall), producing visible dead space. By
     anchoring the source to the chart it sources, we kill that dead zone. */
  .waterfall-source {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-tertiary);
    line-height: 1.55;
    opacity: 0.75;
  }

  /* ─── HUMAN BRIDGE ─────────────────────────────────── */
  .chapter { padding: var(--space-16) 0; position: relative; }
  .sticky-chart-wrap {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-8); margin-top: var(--space-12);
  }
  @media (min-width: 1024px) {
    .sticky-chart-wrap { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  }
  .sticky-chart {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; overflow: hidden;
  }
  @media (min-width: 1024px) {
    .sticky-chart { position: sticky; top: 100px; height: 70vh; }
  }
  .stage-visual {
    width: 100%; max-width: 440px;
    aspect-ratio: 1.35;
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    padding: var(--space-6);
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--text-secondary); line-height: 1.7;
    position: relative; overflow: hidden;
  }
  .stage-visual .stage-mode {
    position: absolute; top: var(--space-3); right: var(--space-3);
    padding: 3px 10px; border-radius: var(--radius-sm);
    font-size: 0.6rem; letter-spacing: 0.18em;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-tertiary); text-transform: uppercase;
    font-weight: 500;
  }
  .stage-visual .stage-line {
    display: flex; justify-content: space-between;
    padding: 5px 0;
    transition: all var(--motion-slow) var(--motion-easing);
  }
  .stage-visual .stage-line.active {
    color: var(--accent);
    text-shadow: 0 0 6px var(--accent-glow);
  }
  .stage-visual .stage-line.done { color: var(--text-secondary); opacity: 0.55; }
  .stage-visual .stage-status {
    position: absolute; bottom: var(--space-4);
    left: var(--space-6); right: var(--space-6);
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--space-3); border-top: 1px solid var(--border);
    color: var(--text-tertiary); font-size: 0.7rem;
  }
  .stage-visual .stage-status .elapsed {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }

  .step-list { display: flex; flex-direction: column; gap: var(--space-4); }
  .step {
    padding: var(--space-6);
    border-left: 2px solid var(--border);
    transition: all var(--motion-default);
    opacity: 0.45; cursor: pointer;
    background: transparent; text-align: left;
    width: 100%; font-family: inherit;
  }
  .step.active {
    border-left-color: var(--accent); opacity: 1;
    box-shadow: -2px 0 12px -4px var(--accent-glow);
  }
  .step:hover { opacity: 0.85; }
  .step .step-num {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--accent); letter-spacing: 0.18em;
    margin-bottom: var(--space-2);
    text-transform: uppercase; font-weight: 500;
  }
  .step h4 {
    font-size: var(--step-2); font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2); color: var(--text-primary);
  }
  .step p { color: var(--text-secondary); font-size: var(--step-0); line-height: 1.55; }

  /* ── Time comparison block ── the kicker per step ── */
  .step-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    align-items: stretch;
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--surface-deep);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-default) var(--motion-easing);
  }
  .step.active .step-compare {
    border-color: var(--border-strong);
  }
  .step-compare .side {
    display: flex; flex-direction: column;
    gap: var(--space-1);
    text-align: center;
  }
  .step-compare .side .lbl {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .step-compare .side .val {
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .step-compare .side.human .val {
    color: var(--loss);
  }
  .step.active .step-compare .side.human .val {
    color: var(--loss);
    text-shadow: 0 0 12px oklch(0.665 0.180 25 / 0.4);
  }
  .step-compare .side.digital .val {
    color: var(--accent);
  }
  .step.active .step-compare .side.digital .val {
    text-shadow: 0 0 12px var(--accent-glow);
  }
  .step-compare .gap {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    padding: 0 var(--space-2);
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
  }
  .step-compare .gap .arrow {
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    font-size: 0.85rem;
    line-height: 1;
  }
  .step.active .step-compare .gap .arrow { color: var(--accent); }
  .step-compare .gap .ratio {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .step.active .step-compare .gap .ratio {
    color: var(--accent);
    font-weight: 600;
  }
  @media (max-width: 767px) {
    .chapter {
      padding: var(--space-12) 0;
    }
    .sticky-chart-wrap {
      gap: var(--space-6);
      margin-top: var(--space-8);
    }
    .sticky-chart {
      padding: var(--space-5);
    }
    .stage-visual {
      max-width: none;
      aspect-ratio: auto;
      padding: var(--space-4);
      font-size: 0.72rem;
    }
    .stage-visual .stage-line {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-2);
      align-items: start;
      padding: 4px 0;
    }
    .stage-visual .stage-status {
      position: static;
      margin-top: var(--space-4);
      padding-top: var(--space-3);
      flex-wrap: wrap;
      gap: var(--space-2);
    }
    .step {
      padding: var(--space-5);
      opacity: 1;
    }
    .step-compare {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }
    .step-compare .gap {
      flex-direction: row;
      justify-content: space-between;
      border-left: 0;
      border-right: 0;
      border-top: 1px solid var(--border-soft);
      border-bottom: 1px solid var(--border-soft);
      padding: var(--space-2) 0;
    }
  }

  /* ─── CASES (drill physics) ────────────────────────── */
  /* 4 detailed case cards live in the grid. The other five in-production
     deployments — for which we have only partial info — sit beneath in
     a compact dropdown list (.overflow-deployments). Grid columns divide
     4 cleanly at every breakpoint: 1 / 2 / 4. */
  .case-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
  }
  @media (min-width: 560px)  { .case-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .case-grid { grid-template-columns: repeat(4, 1fr); } }

  /* Single padding + gap pair across all viewports — every card is
     evenly weighted regardless of column count. */
  .case-card {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    min-height: 300px;
    transition: all 0.55s var(--motion-easing);
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .case-card.active::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
  }
  .case-card.active:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 12px 32px -10px rgb(0 0 0 / 0.6);
  }
  .case-card.placeholder { border-style: dashed; background: transparent; cursor: default; }
  .case-card .case-sector {
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-tertiary); letter-spacing: 0.18em;
    text-transform: uppercase; font-weight: 500;
  }
  .case-card.placeholder .case-sector { color: var(--text-tertiary); }
  .case-card .case-title {
    font-size: var(--step-2); font-weight: 600;
    letter-spacing: -0.025em; line-height: 1.15;
  }
  .case-card.placeholder .case-title { color: var(--text-tertiary); }
  /* Legacy stat-grid kept in stylesheet only — visible cards now use
     .case-kpi (single headline KPI). Drill modal has its own
     .drill-headline so it doesn't depend on .case-stats either. */
  .case-card .case-stats {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-6);
    border-top: 1px solid var(--border);
  }
  .case-stat {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-3);
    font-family: var(--font-mono); font-size: 0.85rem;
  }
  .case-stat .key {
    color: var(--text-tertiary); font-size: 0.7rem;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .case-stat .val {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums; font-weight: 500;
  }
  .case-card.active .case-stat .val.headline {
    color: var(--accent); font-weight: 700;
  }
  /* .case-blurb base styles live with the rest of the compact
     card definitions below (kpi block) so flex behaviour is in
     one place. Placeholder override stays here. */
  .case-card.placeholder .case-blurb { color: var(--text-tertiary); }

  /* Single headline KPI — sits directly under the title as the
     visual punch. Numeral big and accent-toned; mono key beneath.
     For overflow cases without published metrics .muted downsizes
     and de-saturates ("In production"). No top border — the KPI
     is part of the head, not a footer.                          */
  .case-card .case-kpi {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: var(--space-1);
  }
  .case-kpi .kpi-val {
    font-size: var(--step-4);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.03em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
  }
  .case-kpi .kpi-val.muted {
    color: var(--text-secondary);
    font-size: var(--step-2);
    font-weight: 600;
    font-variant-numeric: normal;
    letter-spacing: -0.01em;
  }
  .case-kpi .kpi-key {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 2px;
  }
  /* Blurb takes the slack between the KPI and the bottom-pinned
     CTA, so cards in a row stretch evenly regardless of blurb
     length. */
  .case-card .case-blurb { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; flex: 1; }
  .case-card .case-cta {
    color: var(--text-secondary); font-size: 0.7rem;
    font-family: var(--font-mono); letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    transition: color var(--motion-default) var(--motion-easing);
  }
  .case-card.active:hover .case-cta { color: var(--accent); }

  /* Placeholder cards (the unnamed overflow deployments) — dashed
     border in audit mode only. In production they read as normal. */
  body.audit .case-card[data-placeholder] {
    border-style: dashed;
    border-color: oklch(0.78 0.13 75 / 0.45);
  }

  /* ─── OTHER DEPLOYMENTS · compact dropdown rows ──────────────
     Five in-production agents for which we have only partial info.
     Each row collapses to a single line; clicking expands inline
     to show what we can publish + a contact CTA. No popup modal —
     the row is the surface, the popup is reserved for the four
     detailed case studies above.                                */
  .overflow-deployments {
    margin-top: var(--space-8);
    border-top: 1px solid var(--border);
    padding-top: var(--space-8);
  }
  .overflow-deployments-head {
    max-width: 38em;
    margin-bottom: var(--space-6);
  }
  .overflow-deployments-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .overflow-deployments-eyebrow::before {
    content: '';
    width: 24px; height: 1px; background: var(--accent);
  }
  .overflow-deployments-sub {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .overflow-list {
    border-top: 1px solid var(--border);
  }
  .overflow-row {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .overflow-row-summary {
    display: grid;
    grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
    column-gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-4) var(--space-2);
    cursor: pointer;
    outline: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: inherit;
    transition: background var(--motion-default) var(--motion-easing);
  }
  @media (max-width: 800px) {
    .overflow-row-summary {
      grid-template-columns: 28px 1fr auto;
      row-gap: 4px;
      padding: var(--space-3) var(--space-1);
    }
    .overflow-row-summary .overflow-row-fn { grid-column: 2 / span 1; }
  }
  .overflow-row-summary:hover { background: color-mix(in oklch, var(--surface) 50%, transparent); }
  .overflow-row-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .overflow-row-idx {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
  }
  .overflow-row-name {
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
  }
  .overflow-row-sector {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 2px;
  }
  .overflow-row-fn {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .overflow-row-chevron {
    width: 9px; height: 9px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(45deg);
    transform-origin: 65% 65%;
    transition: transform 0.32s var(--motion-easing),
                border-color var(--motion-default) var(--motion-easing);
    align-self: center;
  }
  .overflow-row:hover .overflow-row-chevron { border-color: var(--accent); }
  .overflow-row.is-open .overflow-row-chevron { transform: rotate(-135deg); }
  .overflow-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--motion-easing),
                opacity 0.32s var(--motion-easing),
                padding 0.32s var(--motion-easing);
    opacity: 0;
  }
  .overflow-row.is-open .overflow-detail {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-bottom: var(--space-5);
  }
  .overflow-detail-inner {
    min-height: 0;
    overflow: hidden;
    padding-left: 38px;
    padding-right: var(--space-4);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .overflow-detail-inner p { margin: 0 0 var(--space-3); }
  .overflow-detail-cta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
  }
  .overflow-detail-cta a {
    color: var(--accent);
    border-bottom: 1px solid currentColor;
    margin-left: 4px;
  }
  .overflow-detail-cta a:hover { color: var(--accent-bright); }
  body.audit .overflow-row[data-placeholder] { background: oklch(0.78 0.13 75 / 0.04); }

  /* DRILL OVERLAY — v5.2 redesign
     -----------------------------
     Previous versions (v5, v5.1) wrestled with making the OVERLAY the scroll
     container. That introduced a chain of failure modes — flexbox margin:auto
     centring breaking when card > viewport, place-items:center on a grid
     wrapper not behaving as expected with overflow content, and so on.

     This version inverts the responsibility: the OVERLAY is just a fixed
     full-screen backdrop that centres the card; the CARD is the scroll
     container, with explicit max-height tied to viewport. When content
     exceeds the card's max-height, the card scrolls internally — bulletproof
     across browsers, predictable, and impossible for scroll to bleed to the
     page behind.

     Page-scroll lock: overflow:hidden on <html> only. Simpler than the
     position:fixed body trick (which caused close-jump). --sbw reserves
     scrollbar gutter. */
  html.drill-lock { overflow: hidden; }
  html.drill-lock body { padding-right: var(--sbw, 0px); }

  .drill-overlay {
    position: fixed; inset: 0;
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 200;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s var(--motion-easing);
    /* Centre the card. Overlay never scrolls — the card scrolls internally. */
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--page-pad-x);
    padding-top: max(var(--space-6), env(safe-area-inset-top));
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .drill-overlay.show { opacity: 1; pointer-events: auto; }

  .drill-card {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xl);
    max-width: 720px; width: 100%;
    /* The card is the scroll container. max-height = viewport minus the
       overlay's top+bottom padding (space-6 = 24px each = 48px total).
       100dvh on supporting browsers handles iOS Safari's dynamic viewport. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 80px -12px rgb(0 0 0 / 0.7), var(--shadow-glow);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.45s var(--motion-easing);
    position: relative;
    /* Internal padding lives on .drill-card-content so it doesn't push the
       sticky scroll-down arrow into the wrong position. */
  }
  .drill-overlay.show .drill-card { transform: none; }

  .drill-card-content {
    padding: var(--space-12);
  }
  @media (max-width: 600px) {
    .drill-card-content { padding: var(--space-8) var(--space-5); }
  }

  /* Close button — fixed inside the card top-right corner. Stays put when
     the card scrolls because position:sticky on the card's first child
     would push other content down. We use position:absolute relative to
     the card, then a sticky wrapper to keep it visible during scroll. */
  .drill-close-wrap {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
  }
  .drill-close {
    position: absolute;
    top: var(--space-3); right: var(--space-3);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer;
    font-size: 1.4rem; line-height: 1;
    transition: all var(--motion-default) var(--motion-easing);
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.4);
  }
  .drill-close:hover { color: var(--text-primary); border-color: var(--accent); }

  /* Scroll-down arrow — sticky to the card's BOTTOM edge. Visible only when
     the card has scrollable content below the current viewport. JS toggles
     .has-overflow on the card based on scrollHeight vs clientHeight; CSS
     fades the arrow in/out, and the arrow itself ALSO hides when scrolled
     to the bottom (controlled via .at-bottom class set by JS). */
  .drill-scroll-down-wrap {
    position: sticky;
    bottom: var(--space-4);
    height: 0;
    z-index: 2;
    pointer-events: none;
  }
  .drill-scroll-down {
    /* Centred horizontally via left:50% + translateX(-50%). The wrap is
       height:0 and the button is position:absolute so flex justify-content
       wouldn't center it (absolute items aren't laid out by flex). */
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface-deep);
    border: 1px solid var(--accent);
    cursor: pointer;
    font-family: var(--font-mono); font-size: 1.2rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    box-shadow: 0 4px 16px var(--accent-glow), 0 2px 8px rgb(0 0 0 / 0.4);
    opacity: 0;
    /* Hidden state: nudged down 8px and centred. Visible state below
       overrides the Y to 0. translateX(-50%) is constant in both. */
    transform: translate(-50%, 8px);
    transition: opacity var(--motion-default) var(--motion-easing),
                transform var(--motion-default) var(--motion-easing),
                background var(--motion-default) var(--motion-easing);
  }
  /* Show only when card has overflow AND user hasn't scrolled to bottom */
  .drill-card.has-overflow:not(.at-bottom) .drill-scroll-down {
    opacity: 1;
    /* Animation below drives the visible Y position; this transform sets
       the resting state. The bob animation overrides while running. */
    transform: translate(-50%, 0);
  }
  .drill-scroll-down:hover {
    background: var(--accent-bright, var(--accent));
  }
  /* Bounce hint to draw the eye. The animation's transform must include
     translateX(-50%) too — animation values fully replace the resting
     transform while the animation is running. */
  @keyframes drill-arrow-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 3px); }
  }
  .drill-card.has-overflow:not(.at-bottom) .drill-scroll-down {
    animation: drill-arrow-bob 1.6s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .drill-card.has-overflow:not(.at-bottom) .drill-scroll-down {
      animation: none;
    }
  }

  /* Inner content typography — same as before, scoped to .drill-card-content
     so the sticky wrappers don't inherit padding shifts. */
  .drill-card-content .case-sector { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }
  .drill-card-content h3 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: var(--space-3) 0 var(--space-6); padding-right: var(--space-12); /* Reserve space so close button never overlaps title */ }
  .drill-card-content p { color: var(--text-secondary); font-size: var(--step-1); line-height: 1.6; margin-bottom: var(--space-4); }
  .drill-card-content .drill-headline {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
    margin: var(--space-8) 0;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .drill-card-content .drill-stat .key {
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--text-tertiary); letter-spacing: 0.15em;
    text-transform: uppercase; margin-bottom: var(--space-2);
  }
  .drill-card-content .drill-stat .val {
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--accent);
    text-shadow: 0 0 16px var(--accent-glow);
    font-variant-numeric: tabular-nums;
  }
  .drill-card-content ul {
    list-style: none; padding: 0; margin: var(--space-4) 0;
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .drill-card-content ul li {
    color: var(--text-secondary); font-size: var(--step-0);
    padding-left: var(--space-6); position: relative; line-height: 1.55;
  }
  .drill-card-content .drill-cta {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--surface-deep);
  }
  .drill-card-content .drill-cta a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
  }
  .drill-card-content .drill-cta a:hover { color: var(--accent-bright); }

  .drill-card-content ul li::before {
    content: "→"; position: absolute; left: 0;
    color: var(--accent); font-family: var(--font-mono);
  }

  /* ─── PARTNERS · the capability stack ─── */
  .partners-band {
    /* Translucent so the fixed schematic backdrop remains visible
       through every section, not just the hero. ~92% opacity keeps
       the section colour clearly readable while letting the
       circuit traces and pulses slip through. */
    background: color-mix(in oklch, var(--surface-band) 70%, transparent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  /* Five uniform partner cards. Auto-fit lets the grid pick the
     row count from viewport width: 5 across at 1240+, 4 across
     near 1080, 3 across at tablet, 2 at narrow tablet, 1 on phone.
     Min 220px keeps body copy legible; max 1fr keeps cards equal. */
  .partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-12);
    align-items: stretch;
  }
  @media (min-width: 560px) {
    .partners-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
  }

  /* ─── TOOLS · sticky-bottom marquee ──────────────────────────
     Thin viewport-fixed strip showing the tools we deploy. JS
     toggles .is-visible based on scroll: appears once #partners
     enters view, hides when #cta enters view so the contact /
     footer aren't crowded. Body reserves a 44px gutter from
     partners onward so chips never occlude content.            */
  .tools-marquee {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;  /* below nav (50) and drill-overlay (100+) */
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Frosted-glass overlay: lower opacity + stronger blur means
       content beneath remains legible as it scrolls under, rather
       than reading as a solid bar abruptly cutting cards in half. */
    background: color-mix(in oklch, var(--surface-deep) 65%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    padding: 0 var(--page-pad-x);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--motion-easing),
                opacity 0.45s var(--motion-easing);
    /* Reuse the timestrip mask language — same 60px fade. */
    mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  }
  .tools-marquee.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  /* Reserve gutter once marquee is in play so it never occludes
     content. Toggled by JS the first time the strip is shown. */
  body.has-sticky-marquee { padding-bottom: 40px; }
  .tools-track {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    white-space: nowrap;
    will-change: transform;
    height: 100%;
  }
  .tools-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    transition: color var(--motion-default) var(--motion-easing);
  }
  .tools-chip::before {
    content: '·';
    color: var(--accent);
    font-family: var(--font-mono);
    margin-right: var(--space-2);
    opacity: 0.6;
  }
  .tools-chip:first-of-type::before { content: ''; margin-right: 0; }
  .tools-marquee:hover .tools-chip { color: var(--text-primary); }
  .tools-chip .chip-meta {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.32s var(--motion-easing),
                transform 0.32s var(--motion-easing);
    transition-delay: 0ms;
    max-width: 0;
    overflow: hidden;
    margin-left: 0;
  }
  .tools-marquee:hover .tools-chip .chip-meta {
    opacity: 0.8;
    transform: none;
    max-width: 240px;
    margin-left: var(--space-2);
    transition-delay: calc(var(--i, 0) * 40ms);
  }
  @media (max-width: 600px) {
    .tools-marquee { height: 36px; padding: 0 var(--space-3); }
    body.has-sticky-marquee { padding-bottom: 36px; }
    .tools-chip { font-size: 0.62rem; letter-spacing: 0.06em; }
    .tools-chip .chip-meta { font-size: 0.55rem; }
  }
  @media (max-width: 767px) {
    .tools-marquee {
      display: none !important;
    }
    body.has-sticky-marquee {
      padding-bottom: 0 !important;
    }
  }

  .partner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: all var(--motion-default) var(--motion-easing);
    position: relative;
    overflow: hidden;
  }
  .partner-card::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--motion-easing);
  }
  .partner-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
  }
  .partner-card:hover::before { transform: scaleX(1); }
  .partner-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Most cards have a single meta row (URL link). Microsoft has two: the
       partner URL plus a "via" credit. The grid's align-items:stretch makes
       all cards match the tallest head, so a small variation in head height
       is absorbed without breaking the dividers below. */
  }
  .partner-name {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.05;
  }
  .partner-meta-row {
    /* Where the link or "via" credit lives. Always present, always one line,
       always below the name. Standardises all four cards. */
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.4;
    min-height: 1.4em;
  }
  .partner-link {
    color: var(--accent);
    transition: color var(--motion-default);
  }
  .partner-link:hover { color: var(--accent-bright); }
  .partner-link .partner-via {
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
    margin-left: 4px;
  }
  .partner-via {
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
  }
  .partner-tagline {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
    min-height: calc(2 * 1.4em + var(--space-3) + 1px);
    line-height: 1.45;
    display: block;
    /* Keep multi-word product names (Copilot Studio, Azure AI Foundry)
       intact at narrow column widths — let the · separators be the
       only break points. */
    word-spacing: 0.04em;
  }
  .partner-tagline .nb { white-space: nowrap; }
  .partner-body {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    /* flex:1 grows body to push the cap to the bottom across all cards */
    flex: 1;
  }
  .partner-cap {
    /* margin-top: auto belt-and-braces with flex:1 above — guarantees the
       cap sits at the bottom edge, aligned across all four cards regardless
       of body-copy length. */
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .partner-cap .cap-key {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .partner-cap .cap-val {
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 500;
  }

  /* ─── Partner cards · tabs + shared detail panel ────────────
     Five cards behave as tabs along the top. One card is .is-active
     at a time. A single shared .partners-detail-panel below the
     grid renders the active partner's body + cap full-width.
     Clicking another card swaps the panel content. Default state:
     Stubber active. Active card gets an accent top edge and a
     subtle background lift to identify it as the current tab. */
  .partners-grid { align-items: stretch; }
  .partner-card { padding: var(--space-5); gap: 0; }
  .partner-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    outline: none;
    /* Reset native <button> chrome — the tab reads as a card, not a button. */
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
  }
  /* Spans inside the flex-column summary-body need block-level stacking. */
  .partner-summary-body > * { display: block; }
  .partner-summary-body .partner-link { display: inline-flex; align-items: baseline; }
  /* Active tab visual: keep the top accent line shown, deepen the
     surface, raise the border to accent. */
  .partner-card.is-active { background: color-mix(in oklch, var(--accent-soft) 22%, var(--surface)); border-color: var(--accent); }
  .partner-card.is-active::before { transform: scaleX(1); }
  .partner-card.is-active .partner-chevron { display: none; }
  .partner-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
  }
  /* Small mono index numeral — "01" through "05" — gives the
     collapsed state visual weight and an implicit reading order. */
  .partner-idx {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    line-height: 1;
    flex-shrink: 0;
    padding-top: 10px;
    min-width: 22px;
  }
  .partner-summary-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .partner-summary-body .partner-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
  }
  .partner-chevron {
    flex-shrink: 0;
    margin-top: 10px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(45deg);
    transform-origin: 65% 65%;
    transition: transform 0.32s var(--motion-easing),
                border-color var(--motion-default) var(--motion-easing);
  }
  .partner-card:hover .partner-chevron { border-color: var(--accent); }
  .partner-card.is-open .partner-chevron { transform: rotate(-135deg); }
  /* Override the tagline divider — it acted as a separator between
     head and body in the old layout. Now the body lives inside the
     collapse so the divider only makes sense when open. */
  .partner-tagline {
    border-bottom-color: transparent;
    padding-bottom: 0;
    min-height: 0;
    transition: border-color var(--motion-default) var(--motion-easing),
                padding-bottom var(--motion-default) var(--motion-easing);
  }
  .partner-card.is-open .partner-tagline {
    border-bottom-color: var(--border-soft);
    padding-bottom: var(--space-3);
  }
  /* Shared detail panel sits below the .partners-grid row. Always
     present. Renders the active partner's body + cap full-width
     so the body paragraph is comfortable to read instead of
     squeezed inside a narrow card column.                        */
  .partners-detail-panel {
    margin-top: var(--space-6);
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-6) var(--space-8) var(--space-7);
    overflow: hidden;
  }
  .partners-detail-panel::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    opacity: 0.85;
  }
  .partner-panel { display: none; }
  .partner-panel.is-active {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    /* Fade in the swapped content. */
    animation: partner-panel-in 0.45s var(--motion-easing) both;
  }
  @keyframes partner-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  @media (min-width: 900px) {
    .partner-panel.is-active {
      grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
      gap: var(--space-12);
    }
  }
  .partner-panel-head {
    display: flex; flex-direction: column; gap: var(--space-1);
    margin-bottom: var(--space-3);
  }
  .partner-panel-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .partner-panel-name {
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text-primary);
  }
  .partner-panel-body {
    color: var(--text-secondary);
    font-size: var(--step-1);
    line-height: 1.6;
    max-width: 38em;
  }
  .partner-panel-aside {
    border-left: 1px solid var(--border-soft);
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-3);
    align-self: start;
  }
  @media (max-width: 899px) {
    .partner-panel-aside {
      border-left: 0;
      border-top: 1px solid var(--border-soft);
      padding: var(--space-4) 0 0;
    }
  }
  @media (max-width: 767px) {
    .partner-card {
      padding: var(--space-4);
    }
    .partner-summary {
      gap: var(--space-2);
    }
    .partner-summary-body .partner-link {
      margin-bottom: var(--space-1);
    }
    .partners-detail-panel {
      padding: var(--space-5);
    }
  }
  .partner-panel-aside .cap-key {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .partner-panel-aside .cap-val {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-primary);
    font-weight: 500;
  }
  /* Reduced-motion: skip the panel fade animation. */
  @media (prefers-reduced-motion: reduce) {
    .partner-panel.is-active { animation: none; }
  }

  /* ─── DEMOS · Stubber YouTube tile grid ─── */
  .demos-band {
    padding: var(--space-16) 0 var(--space-24);
    background: color-mix(in oklch, var(--surface-band) 70%, transparent);
  }
  .demos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }
  @media (min-width: 600px) { .demos-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .demos-grid { grid-template-columns: repeat(3, 1fr); } }

  .demo-tile {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--surface-deep);
    /* When inline style sets background-image to a YouTube thumb, this
       sizes it to cover the tile cleanly. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-5);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--motion-default) var(--motion-easing);
    cursor: pointer;
  }
  /* Dark gradient bottom-up so thumbnail is dimmed where meta text lives,
     but the upper half stays visible. Replaces the pure cyan radial of v8. */
  .demo-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.45) 55%,
      rgba(0,0,0,0.85) 100%);
    transition: opacity var(--motion-default);
    pointer-events: none;
    z-index: 1;
  }
  /* Subtle cyan tint on hover for brand consistency */
  .demo-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%,
      var(--accent-soft) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--motion-default);
    pointer-events: none;
    z-index: 1;
  }
  .demo-tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -10px rgb(0 0 0 / 0.6), var(--shadow-glow);
  }
  .demo-tile:hover::after { opacity: 0.4; }
  .demo-tile .play-icon {
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transform: translate(-50%, -50%);
    transition: all var(--motion-default) var(--motion-easing);
    box-shadow: 0 0 24px var(--accent-glow);
    z-index: 2;
  }
  .demo-tile:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .demo-tile .play-icon svg { display: block; }
  .demo-tile .demo-meta {
    position: relative;
    z-index: 2;
  }
  .demo-tile .demo-source {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  }
  .demo-tile .demo-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--text-primary);
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  }
  .demo-tile .demo-cta {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
  }
  .demo-tile:hover .demo-cta { color: var(--accent); }

  /* Playing state — when JS swaps in the iframe, the thumbnail/play
     overlays disappear and the iframe occupies the whole tile. */
  .demo-tile.playing {
    cursor: default;
    background-image: none !important;
    padding: 0;
  }
  .demo-tile.playing::before,
  .demo-tile.playing::after,
  .demo-tile.playing .play-icon,
  .demo-tile.playing .demo-meta {
    display: none;
  }
  .demo-tile .demo-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: black;
  }

  .demos-foot {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
  }
  .demos-more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all var(--motion-default) var(--motion-easing);
  }
  .demos-more-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }


  /* Five Fix-First cards. v5: replaced horizontal-slider/immersive-pin with
     click-to-advance card navigation. v5.5: replaced bottom prev/pills/next
     row with side-flanking arrow buttons that sit in the empty band on
     either side of the centred 760px card — frees the eye, kills redundant
     pagination chrome (the card already shows "01 / 05" in its corner).
     Desktop: one card visible at a time + side arrows. Mobile: native
     horizontal scroll-snap with swipe gesture; arrows hidden. */
  .meth-band {
    background: color-mix(in oklch, var(--surface-band) 70%, transparent);
    border-top: 1px solid var(--border);
    overflow-x: clip;
  }
  .meth-band-intro {
    padding: var(--space-16) 0 var(--space-8);
  }
  .meth-stage {
    /* Holds the single visible card on desktop. Card sits centred. */
    position: relative;
    padding: 0 var(--page-pad-x);
  }
  .meth-track-wrap {
    /* On desktop: one card visible at a time, controlled by JS.
       On mobile: native scroll-snap carousel (overrides below). */
    overflow: hidden;
    margin: 0 auto;
    max-width: 760px;
  }
  .meth-track {
    display: flex;
    gap: var(--space-6);
    transition: transform 0.55s var(--motion-easing);
    will-change: transform;
  }
  /* State-based translation — JS sets data-step on the track.
     Each card occupies the full track-wrap width, so step N = -N * 100%
     plus the gap. Implemented via custom properties so the calc is clean. */
  .meth-track[data-step="0"] { transform: translateX(0); }
  .meth-track[data-step="1"] { transform: translateX(calc(-1 * (100% + var(--space-6)))); }
  .meth-track[data-step="2"] { transform: translateX(calc(-2 * (100% + var(--space-6)))); }
  .meth-track[data-step="3"] { transform: translateX(calc(-3 * (100% + var(--space-6)))); }
  .meth-track[data-step="4"] { transform: translateX(calc(-4 * (100% + var(--space-6)))); }

  .meth-card {
    flex: 0 0 100%;
    width: 100%;
    min-height: 440px;
    padding: var(--space-10, var(--space-8)) var(--space-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    display: flex; flex-direction: column;
    gap: var(--space-4);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s var(--motion-easing),
                box-shadow 0.3s var(--motion-easing);
  }
  .meth-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 24px -8px var(--accent-glow);
  }
  .meth-card .step-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .meth-card .step-number {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 24px var(--accent-glow);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
  }
  .meth-card .step-title {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text-primary);
  }
  .meth-card .step-body {
    color: var(--text-secondary);
    font-size: var(--step-1);
    line-height: 1.55;
  }
  .meth-card .step-pull {
    margin-top: auto;
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.55;
  }
  .meth-card .step-pull strong {
    color: var(--accent);
    font-weight: 600;
  }
  .meth-card .card-of {
    position: absolute;
    top: var(--space-4); right: var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
  }

  /* Side-flanking nav arrows. Positioned absolutely on .meth-stage (which
     is position:relative). The track-wrap is max-width 760px centred, so
     on wide viewports there's empty band on either side and the arrows
     naturally fall in that band. On narrower viewports the arrows overlay
     the card edge — but the translucent blurred backdrop makes that read
     as an intentional carousel control rather than a clash.
     On mobile (<768px) they're hidden — track becomes a swipe carousel. */
  .meth-side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in oklch, var(--surface) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--motion-default) var(--motion-easing),
                color var(--motion-default) var(--motion-easing),
                background var(--motion-default) var(--motion-easing),
                box-shadow var(--motion-default) var(--motion-easing),
                opacity var(--motion-default) var(--motion-easing);
    z-index: 3;
  }
  /* Default desktop offset — sits in the side band of typical viewports */
  .meth-side-arrow--prev { left: var(--space-6); }
  .meth-side-arrow--next { right: var(--space-6); }
  /* On viewports wider than the card (760px) plus generous breathing room,
     pull the arrows in toward the card edge so they read as "card controls"
     rather than floating at the page edge. The expression sits the arrow
     ~60px outside the centred 760px card, but never closer to the page
     edge than var(--space-6). */
  @media (min-width: 1024px) {
    .meth-side-arrow--prev { left: max(var(--space-6), calc(50% - 380px - 116px)); }
    .meth-side-arrow--next { right: max(var(--space-6), calc(50% - 380px - 116px)); }
  }
  .meth-side-arrow:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 24px -4px var(--accent-glow), 0 4px 16px rgb(0 0 0 / 0.4);
  }
  .meth-side-arrow:active:not(:disabled) {
    /* Combine with translateY(-50%) since we still need the centring. */
    transform: translateY(-50%) scale(0.96);
  }
  .meth-side-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }
  .meth-side-arrow:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  /* Hide arrows on mobile — replaced by swipe gesture on the carousel */
  @media (max-width: 767px) {
    .meth-side-arrow { display: none; }
  }

  /* Mobile-only swipe hint sits below the carousel. Subtle — disappears
     after first interaction (handled in JS). */
  .meth-mobile-hint {
    display: none;
    text-align: center;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-tertiary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: opacity 0.4s var(--motion-easing);
  }
  @media (max-width: 767px) {
    .meth-mobile-hint { display: block; }
  }
  .meth-mobile-hint.is-faded { opacity: 0; pointer-events: none; }

  /* Mobile: drop the click-nav-only pattern. Keep navigation buttons (so
     they still work) but make the track natively scroll-snappable so swipe
     feels right. JS auto-syncs the active state on scroll. */
  @media (max-width: 767px) {
    .meth-track-wrap {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
      padding-bottom: var(--space-2);
    }
    .meth-track {
      transform: none !important;
      gap: var(--space-4);
      padding: 0;
    }
    .meth-card {
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
      min-height: 0;
      padding: var(--space-6) var(--space-5);
    }
    .meth-card .step-number {
      font-size: clamp(3.1rem, 2.6rem + 4vw, 4.75rem);
    }
    .meth-card .step-title {
      font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    }
    .meth-card .step-pull {
      margin-top: var(--space-2);
      font-size: 0.72rem;
    }
  }

  /* ── Implementation Approach strip — 4 short numbered cards ── */
  .impl-strip {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--surface-band);
  }
  .impl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-8);
  }
  @media (min-width: 768px) { .impl-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
  .impl-card {
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    transition: transform var(--motion-default) var(--motion-easing);
  }
  .impl-card:hover { transform: translateY(-2px); }
  .impl-card .step-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-3);
    font-weight: 500;
  }
  .impl-card h4 {
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
  }
  .impl-card p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
  }

  /* ─── CONTACT FORM ──────────────────────────────────────── */
  .contact-band {
    padding: var(--space-24) 0;
    position: relative;
    overflow: hidden;
    background: color-mix(in oklch, var(--surface-deep) 68%, transparent);
  }
  .contact-band::before {
    content: ''; position: absolute;
    top: 0; left: -10%;
    width: 120%; height: 1px;
    background: linear-gradient(90deg,
      transparent, var(--accent), var(--accent-bright), var(--accent), transparent);
    transform: rotate(-1.2deg);
    box-shadow: 0 0 16px var(--accent-glow);
  }
  .contact-band::after {
    content: ''; position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 30% 30%,
      var(--accent-soft) 0%, transparent 60%);
    pointer-events: none;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    position: relative;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); }
  }
  .contact-headline h2 {
    font-size: var(--step-6);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.0;
    margin-bottom: var(--space-6);
  }
  .contact-headline h2 .accent { color: var(--accent); }
  .contact-headline p {
    color: var(--text-secondary);
    font-size: var(--step-2);
    line-height: 1.5;
    margin-bottom: var(--space-8);
    max-width: 28em;
  }
  .contact-meta {
    display: flex; flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }
  .contact-meta-row { display: flex; gap: var(--space-3); align-items: baseline; }
  .contact-meta-row .key {
    color: var(--text-tertiary);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    min-width: 88px;
  }
  .contact-meta-row .val {
    color: var(--text-primary);
  }
  .contact-meta-row .val a {
    color: var(--accent);
    transition: color var(--motion-default) var(--motion-easing);
  }
  .contact-meta-row .val a:hover { text-decoration: underline; }

  /* The form */
  .contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column;
    gap: var(--space-5);
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  @media (min-width: 600px) {
    .form-row.two { grid-template-columns: 1fr 1fr; }
  }
  .form-field {
    display: flex; flex-direction: column;
    gap: var(--space-2);
  }
  .form-field label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
  }
  .form-field label .req { color: var(--accent); margin-left: 4px; }
  .form-field input,
  .form-field textarea {
    background: var(--surface-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 16px; /* iOS no-zoom-on-focus floor */
    line-height: 1.45;
    transition: all var(--motion-default) var(--motion-easing);
    width: 100%;
    min-height: 44px;
  }
  .form-field textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-body);
  }
  .form-field input:focus,
  .form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: var(--text-tertiary);
  }
  .form-field.error input,
  .form-field.error textarea {
    border-color: var(--loss);
  }
  .form-field .err-msg {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--loss);
    display: none;
  }
  .form-field.error .err-msg { display: block; }

  .form-submit {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
    flex-wrap: wrap;
  }
  .form-status {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-tertiary);
  }
  .form-status.ok { color: var(--gain); }
  .form-status.err { color: var(--loss); }
  .form-recaptcha-note {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
  }
  .form-recaptcha-note a {
    color: var(--accent);
  }

  .cta-band {
    text-align: center;
    padding: var(--space-24) var(--page-pad-x);
    position: relative; overflow: hidden;
    background: color-mix(in oklch, var(--surface-deep) 68%, transparent);
  }
  .cta-band::before {
    content: ''; position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at center,
      var(--accent-soft) 0%, transparent 65%);
    pointer-events: none;
  }
  .cta-band::after {
    content: ''; position: absolute;
    top: 0; left: -10%;
    width: 120%; height: 1px;
    background: linear-gradient(90deg,
      transparent, var(--accent), var(--accent-bright), var(--accent), transparent);
    transform: rotate(-1.2deg);
    box-shadow: 0 0 16px var(--accent-glow);
  }
  .cta-band-inner { position: relative; max-width: 38em; margin: 0 auto; }
  .cta-band h2 {
    font-size: var(--step-6); font-weight: 700;
    letter-spacing: -0.04em; line-height: 1.0;
    margin-bottom: var(--space-6);
  }
  .cta-band h2 .accent { color: var(--accent); }
  .cta-band p {
    color: var(--text-secondary); font-size: var(--step-2);
    margin-bottom: var(--space-8); line-height: 1.5;
  }
  .cta-band .ctas { justify-content: center; display: flex; gap: var(--space-3); flex-wrap: wrap; }

  .footer {
    background: color-mix(in oklch, var(--surface-deep) 68%, transparent);
    padding: var(--space-12) 0;
    color: var(--text-tertiary); font-size: var(--step-0);
    border-top: 1px solid var(--border);
  }
  .footer-inner {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-4);
  }
  .footer .meta {
    font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.15em; text-transform: uppercase;
  }

  /* ─── AUDIT MODE ─────────────────────────────────────────────
     Toggled by JS when URL contains ?audit=1. Reveals all
     [data-placeholder] markers so a reviewer can see what's
     pending confirmation. Off by default (production view).    */
  [data-placeholder] { /* invisible until audit mode */ }
  body.audit [data-placeholder] {
    display: inline-block;
    padding: 1px 6px;
    border: 1px dashed oklch(0.78 0.13 75);
    border-radius: var(--radius-sm);
    color: oklch(0.78 0.13 75);
    background: oklch(0.78 0.13 75 / 0.06);
    font-style: italic;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .hero::before { display: none; }
    .timestrip-mote { animation: none; }
    .waterfall-svg .bar { opacity: 1; }
    /* Marquee freezes at base position; meta-reveal still works on
       hover because that's a discrete interaction, not motion. */
    .tools-track { transform: none !important; }
  }
  @media (pointer: coarse) {
    .pillar:hover, .case-card.active:hover, .btn-primary:hover {
      transform: none !important;
    }
  }

  /* ═══════════════════════════════════════════════════════════
     NEW SECTIONS — Architecture · Team · Fix-First · Anti-patterns
     Built to the same editorial-technical register as the rest
     of the page. Hairlines, mono caps, restrained motion. No
     decorative chrome.
     ═══════════════════════════════════════════════════════════ */

  /* ─── ARCHITECTURE DIAGRAM (Slide 4) ─────────────────────────
     Three pillars wrapped inside a dashed "constraint" frame.
     Reads as a system blueprint: Brain at the reasoning core,
     Ears&Mouth and Hands&Feet as I/O. The outer dashed boundary
     IS "the constraint" — only your IP, nothing else. */
  .architecture-band { background: color-mix(in oklch, var(--surface-band) 70%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .architecture-diagram {
    margin-top: var(--space-12);
    position: relative;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8) var(--space-8);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-deep) 100%);
  }
  /* Field-label sitting on the top edge of the dashed frame, like
     a fieldset legend on engineering drawings. */
  .architecture-frame-label {
    position: absolute;
    top: -0.65em;
    left: var(--space-8);
    padding: 0 var(--space-3);
    background: var(--surface-band);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .architecture-frame-label::before { content: '\2510'; margin-right: var(--space-2); color: var(--text-tertiary); }
  .architecture-frame-label::after  { content: '\250C'; margin-left: var(--space-2); color: var(--text-tertiary); }
  /* Caption inside the dashed frame that explains the constraint.
     Not a footnote — sized as proper body copy so the diagram
     reads as self-explanatory rather than relying on fine print. */
  .architecture-frame-foot {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px dashed var(--border-soft);
    text-align: center;
  }
  .architecture-rule-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-3);
    display: inline-block;
  }
  .architecture-rule-statement {
    font-size: var(--step-2);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text-primary);
    max-width: 36em;
    margin: 0 auto var(--space-4);
  }
  .architecture-rule-statement strong { color: var(--accent); font-weight: 700; }
  .architecture-rule-foot {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-transform: uppercase;
  }
  .architecture-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  @media (min-width: 768px)  { .architecture-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

  .arch-pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--motion-default) var(--motion-easing),
                transform var(--motion-default) var(--motion-easing);
  }
  .arch-pillar:hover { border-color: var(--accent); transform: translateY(-2px); }
  .arch-pillar .arch-idx {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.18em; color: var(--text-tertiary); line-height: 1;
  }
  .arch-pillar .arch-name {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.05;
  }
  .arch-pillar .arch-role {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: -2px;
  }
  .arch-pillar .arch-body {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .arch-pillar .arch-list {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .arch-pillar .arch-list span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
  }

  /* ─── TEAM (FIG 2.5) ─────────────────────────────────────────
     Hero numeral + collapsible single-row ledger. Same accordion
     mechanic as partners but with a different visual register:
     no boxes around the rows, hairline rules between, large idx
     numeral as the anchor.                                       */
  .team-band { background: color-mix(in oklch, var(--surface-band) 70%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .team-hero {
    margin-top: var(--space-8);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: end;
  }
  @media (min-width: 900px) {
    .team-hero { grid-template-columns: auto 1fr; gap: var(--space-12); }
  }
  .team-numeral {
    font-size: clamp(5rem, 4rem + 8vw, 11rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--accent);
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
  }
  .team-numeral .team-numeral-suffix {
    font-size: 0.4em;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    font-weight: 500;
  }
  .team-hero-sub {
    font-size: var(--step-2);
    line-height: 1.35;
    color: var(--text-primary);
    max-width: 28em;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .team-credentials {
    margin-top: var(--space-8);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    line-height: 1.8;
  }
  .team-credentials strong { color: var(--text-secondary); font-weight: 500; }
  .team-list {
    margin-top: var(--space-8);
    border-top: 1px solid var(--border);
  }
  .team-row {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  /* Grid columns are FIXED for the small bits (idx, year label, chevron)
     and flexible for the name + description. This ensures every row's
     year label ("22 yrs", "24 yrs", "38 yrs") starts at the same x —
     they stack vertically aligned across the whole list.            */
  .team-row-summary {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1.1fr) 68px minmax(0, 1.4fr) auto;
    column-gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-5) var(--space-2);
    cursor: pointer;
    outline: none;
    transition: background var(--motion-default) var(--motion-easing);
  }
  @media (max-width: 900px) {
    .team-row-summary {
      grid-template-columns: 28px 1fr auto;
      row-gap: 6px;
      padding: var(--space-4) var(--space-1);
    }
    .team-row-summary .team-yrs-label,
    .team-row-summary .team-yrs-desc {
      grid-column: 2 / span 1;
    }
    .team-row-summary .team-yrs-label { padding-top: 2px; }
  }
  .team-row-summary:hover { background: color-mix(in oklch, var(--surface) 50%, transparent); }
  .team-row-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .team-idx {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
  }
  .team-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    align-self: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .team-avatar.is-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    background: color-mix(in oklch, var(--surface) 70%, transparent);
  }
  @media (max-width: 900px) {
    .team-avatar { width: 28px; height: 28px; }
    .team-avatar.is-placeholder { font-size: 0.62rem; }
  }
  .team-name-block {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
  }
  .team-name {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
  }
  .team-role {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .team-yrs-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
  }
  .team-yrs-desc {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: left;
  }
  .team-chevron {
    width: 10px; height: 10px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(45deg);
    transform-origin: 65% 65%;
    transition: transform 0.32s var(--motion-easing),
                border-color var(--motion-default) var(--motion-easing);
    align-self: center;
  }
  .team-row:hover .team-chevron { border-color: var(--accent); }
  .team-row.is-open .team-chevron { transform: rotate(-135deg); }
  .team-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--motion-easing),
                opacity 0.32s var(--motion-easing),
                padding 0.32s var(--motion-easing);
    opacity: 0;
  }
  .team-row.is-open .team-detail {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-bottom: var(--space-6);
  }
  .team-detail-inner {
    min-height: 0;
    overflow: hidden;
    padding-left: 38px;
    padding-right: var(--space-4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  @media (min-width: 800px) {
    .team-detail-inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  }
  .team-arc { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7; letter-spacing: 0.02em; color: var(--text-secondary); }
  .team-arc-title {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
    display: block;
  }
  .team-arc-item {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-4);
    padding: 4px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .team-arc-item:last-child { border-bottom: 0; }
  .team-arc-item .arc-role { color: var(--text-primary); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.7rem; }
  .team-arc-item .arc-where { color: var(--text-tertiary); white-space: nowrap; }
  .team-extras { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }
  .team-extras p { margin-bottom: var(--space-3); }
  .team-extras p:last-child { margin-bottom: 0; }
  .team-tags {
    margin-top: var(--space-3);
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .team-tags span {
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary);
    padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 999px;
  }

  /* ─── FIX-FIRST PRINCIPLE (Slide 9) ──────────────────────────
     A diptych. Eyebrow declares it as a principle, headline lands
     hard, two numbered statements side-by-side carry the rule and
     its reason. Sits as punctuation before Methodology.          */
  .principle-band {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--surface-deep) 68%, transparent);
    padding: var(--space-16) 0;
  }
  .principle-band .container { max-width: 1100px; }
  .principle-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-2);
  }
  .principle-eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--accent);
  }
  .principle-headline {
    font-size: clamp(1.95rem, 1.6rem + 1.8vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text-primary);
    max-width: 16em;
    margin-bottom: var(--space-8);
  }
  .principle-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  @media (min-width: 800px) {
    .principle-pair { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  }
  .principle-item { display: flex; flex-direction: column; gap: var(--space-3); }
  .principle-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--accent);
  }
  .principle-statement {
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
  }
  .principle-body { color: var(--text-secondary); font-size: var(--step-0); line-height: 1.6; }

  /* ─── ANTI-PATTERNS (Slide 22) ───────────────────────────────
     "The technology works. The architecture does not."
     Three failure modes presented as diagnostic entries. Compact,
     scannable, sharp. Lives right after Methodology as a contrast
     to "this is what we do." Diagnostic register — mono caps,
     numeric labels, tight rules.                                 */
  .antipatterns-band {
    background: color-mix(in oklch, var(--bg) 65%, transparent);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .antipatterns-head { max-width: 38em; margin-bottom: var(--space-12); }
  .antipatterns-statement {
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text-primary);
  }
  .antipatterns-statement .strike {
    color: var(--text-tertiary);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in oklch, var(--accent) 70%, transparent);
  }
  .antipatterns-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  @media (min-width: 800px) {
    .antipatterns-grid { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .antipatterns-grid .antipattern { border-right: 1px solid var(--border); padding: var(--space-6) var(--space-5); }
    .antipatterns-grid .antipattern:last-child { border-right: 0; }
  }
  .antipattern {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  @media (min-width: 800px) {
    .antipattern { border-bottom: 0; }
  }
  .antipattern-num {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
  }
  .antipattern-name {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
  }
  .antipattern-body {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .antipatterns-foot {
    margin-top: var(--space-8);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    max-width: 50em;
  }
  .antipatterns-foot strong { color: var(--text-secondary); }

/* ─── INNER PAGE HERO ────────────────────────────────────────
   Canonical component for all non-home pages. Replaces the
   per-page why-hero / team-hero / brief variants with one
   consistent structure. Page-specific modifiers (team-hero,
   contact-hero) may override where the layout genuinely differs. */
.page-hero {
  padding: var(--space-12) 0 var(--space-16);
  position: relative;
}
.page-hero .container {
  display: grid;
  gap: var(--space-8);
}

/* Progressive connector trace — grows one step per page in nav order */
[data-page="partners"]    .page-hero-connector::before { width: 2rem; }
[data-page="cases"]       .page-hero-connector::before { width: 3.5rem; }
[data-page="team"]        .page-hero-connector::before { width: 5rem; }
[data-page="methodology"] .page-hero-connector::before { width: 6.5rem; }
[data-page="why"]         .page-hero-connector::before { width: 8rem; }
[data-page="services"]    .page-hero-connector::before { width: 8rem; }
[data-page="contact"]     .page-hero-connector::before { width: 9.5rem; }

/* Schematic connector — a short circuit-trace + node dot that
   visually bridges the background schematic into the headline.
   Add <div class="page-hero-connector" aria-hidden="true">
   directly before the .eyebrow in each hero. */
.page-hero-connector {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  height: 10px;
}
.page-hero-connector::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1.5px;
  background: var(--accent);
  opacity: 0.7;
}
.page-hero-connector::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
  box-shadow: 0 0 8px var(--accent-glow);
  flex-shrink: 0;
}

.page-hero-headline {
  font-size: var(--step-6);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--text-primary);
  max-width: 20ch;
  margin: var(--space-3) 0 var(--space-5);
}
.page-hero-headline .accent { color: var(--accent); }

.page-hero-deck {
  color: var(--text-secondary);
  font-size: var(--step-2);
  line-height: 1.55;
  max-width: 38em;
}
@media (max-width: 767px) {
  .page-hero {
    padding: var(--space-10) 0 var(--space-12);
  }
  .page-hero-headline {
    max-width: 12ch;
    margin: var(--space-2) 0 var(--space-4);
  }
  .page-hero-deck {
    font-size: var(--step-1);
  }
}