/* ==========================================================================
   Statnu — Data science for a better world
   Dark editorial techno-minimalism. Mobile-first.

   Palette (strict):
     #050505 Jet Black   · base background, text on light
     #1E1035 Deep Violet · depth sections
     #6D28D9 Royal Purple· interactive fills, accents (never as text on dark)
     #A78BFA Lavender    · lines, secondary accents, small text on dark
     #F5F3FF Pale Violet · text on dark, light inserts
   Tints below are the same five colours at reduced opacity, nothing new.

   Motion policy: only two "live" sections (Approach rail, Results numbers).
   Everything else is deliberately static. Hover micro-interactions only.
   ========================================================================== */

:root {
  /* Palette */
  --jet: #050505;
  --deep: #1E1035;
  --royal: #6D28D9;
  --lav: #A78BFA;
  --pale: #F5F3FF;

  /* Derived tints (opacity only). Contrast verified ≥ AA. */
  --ink-2: rgba(245, 243, 255, 0.72);      /* 9.5:1 on jet, 8.7:1 on deep */
  --ink-dark-2: rgba(5, 5, 5, 0.72);       /* 8.3:1 on pale */
  --line: rgba(167, 139, 250, 0.24);
  --line-strong: rgba(167, 139, 250, 0.55);
  --line-dark: rgba(5, 5, 5, 0.16);

  /* Type */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale — major third (1.25), fluid at the top end */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-lg: clamp(1.375rem, 1.2rem + 0.9vw, 1.953rem);
  --t-xl: clamp(1.875rem, 1.4rem + 2.2vw, 3.052rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 4.4vw, 5.96rem);
  --t-statement: clamp(2.25rem, 1.2rem + 5.6vw, 7rem);
  --t-mega: clamp(8.5rem, 34vw, 31rem);

  /* Spacing — 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  --gutter: clamp(1rem, 5vw, 5rem);
  --col-gap: clamp(1rem, 2vw, 2rem);
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);
  --header-h: 3.5rem;
}

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

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body, h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

body {
  background: var(--jet);
  color: var(--pale);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--pale); color: var(--jet);
  padding: var(--s-2) var(--s-4); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* ---------- Shared typographic parts ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-display);
  font-stretch: 75%;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lav);
}
.eyebrow__index {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0.15em 0.5em;
  border: 1px solid var(--line-strong);
  color: var(--pale);
  text-align: center;
  letter-spacing: 0.08em;
}
.eyebrow--dark { color: var(--royal); }
.eyebrow--dark .eyebrow__index { color: var(--jet); border-color: var(--line-dark); }

.section-title {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.section-title--sm { font-size: var(--t-lg); line-height: 1.1; }
@media (min-width: 1080px) {
  .section-title { font-stretch: 112%; }
}

.section-intro { color: var(--ink-2); font-size: var(--t-md); max-width: 34ch; }

figcaption {
  display: flex; gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
figcaption span {
  font-family: var(--f-display); font-stretch: 75%;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--lav);
}

.arrow { display: inline-block; transition: transform 0.2s ease; }
.arrow--up { transform: none; }

/* Text link with an arrow — the main CTA style across the site */
.link-arrow {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--pale);
  padding-bottom: 0.2em;
  border-bottom: 1px solid var(--lav);
}
.link-arrow:hover .arrow { transform: translateX(0.3em); }
.link-arrow:hover .arrow--up { transform: translateY(-0.25em); }
.link-arrow--xl { font-size: var(--t-lg); font-stretch: 100%; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: var(--royal); color: var(--pale);
  border: 0; border-radius: 0;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-base);
  letter-spacing: 0.01em;
}
.btn:hover .arrow { transform: translateX(0.3em); }
.btn:hover { background: var(--pale); color: var(--jet); }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch; justify-content: space-between;
  height: var(--header-h);
  padding-left: var(--gutter);
  background: var(--jet);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none;
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.wordmark__logo { width: auto; height: 1.25rem; }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--s-6); }
.site-nav a {
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.site-nav a:hover { color: var(--pale); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: var(--lav); }

.nav-toggle {
  display: inline-flex; align-items: center;
  padding: 0 var(--gutter);
  background: none; border: 0; border-left: 1px solid var(--line);
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
}

.header-cta { display: none; }

/* Mobile nav sheet */
.site-header[data-nav-open] .site-nav {
  display: block;
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--jet);
  padding: var(--s-7) var(--gutter);
  overflow-y: auto;
}
.site-header[data-nav-open] .site-nav ul { flex-direction: column; gap: 0; }
.site-header[data-nav-open] .site-nav li { border-bottom: 1px solid var(--line); }
.site-header[data-nav-open] .site-nav a {
  display: block; padding: var(--s-4) 0;
  font-family: var(--f-display); font-stretch: 112%; font-weight: 600;
  font-size: var(--t-xl); letter-spacing: -0.03em; color: var(--pale);
}

@media (min-width: 900px) {
  .site-nav, .site-header[data-nav-open] .site-nav {
    display: flex; align-items: center;
    position: static; padding: 0; background: none;
    margin-left: auto; margin-right: var(--s-7);
  }
  .site-header[data-nav-open] .site-nav ul { flex-direction: row; gap: var(--s-6); }
  .site-header[data-nav-open] .site-nav li { border: 0; }
  .site-header[data-nav-open] .site-nav a { display: inline; padding: 0; font: inherit; font-size: var(--t-sm); color: var(--ink-2); }
  .nav-toggle { display: none; }
}

@media (min-width: 720px) {
  .header-cta {
    display: inline-flex; align-items: center; gap: var(--s-4);
    padding: 0 var(--s-6);
    background: var(--royal); color: var(--pale);
    text-decoration: none;
    font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm);
    letter-spacing: 0.02em;
  }
  .header-cta:hover { background: var(--pale); color: var(--jet); }
  .header-cta:hover .arrow { transform: translateX(0.3em); }
  .nav-toggle { margin-left: auto; }
}
@media (min-width: 1080px) {
  .header-cta { padding: 0 var(--s-7); min-width: 15rem; justify-content: space-between; }
}

/* ==========================================================================
   01 · HERO (static)
   ========================================================================== */
.hero {
  display: grid;
  gap: var(--s-7);
  padding: var(--s-7) var(--gutter) var(--s-8);
}
.hero__copy { display: flex; flex-direction: column; gap: var(--s-6); }

.hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 6rem);
  line-height: 0.96;
  text-wrap: balance;
  letter-spacing: -0.04em;
}
.hero__line { display: block; }
.hero__line--muted { color: var(--lav); }

.hero__lede { max-width: 38ch; font-size: var(--t-md); color: var(--ink-2); }

.hero__cta { display: grid; gap: var(--s-3); justify-items: start; padding-top: var(--s-4); }
.hero__note { font-size: var(--t-sm); color: var(--ink-2); }

.hero__figure img { width: 100%; }

.hero__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.hero__facts li {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.hero__facts strong { display: block; color: var(--pale); font-family: var(--f-display); font-weight: 600; font-size: var(--t-base); }

@media (min-width: 720px) {
  .hero__facts { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .hero__facts li { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 0; }
  .hero__facts li + li { padding-left: var(--s-5); border-left: 1px solid var(--line); }
}

@media (min-width: 1080px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--s-8);
    padding-top: var(--s-8);
    min-height: calc(100svh - var(--header-h));
  }
  .hero__copy {
    grid-column: 1 / 9; grid-row: 1;
    justify-content: space-between;
    gap: var(--s-7);
  }
  .hero__title { font-stretch: 106%; font-size: clamp(3.5rem, 5.1vw, 6.25rem); }
  .hero__line { white-space: nowrap; }
  .hero__figure { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; margin-top: var(--s-9); }
  .hero__facts { grid-column: 1 / 9; grid-row: 2; align-self: end; }
}

/* ==========================================================================
   02 · STATEMENT — full-width typographic accent on a light insert (static)
   ========================================================================== */
.statement {
  background: var(--pale);
  color: var(--jet);
  padding: var(--section-y) var(--gutter);
}
.statement__title {
  margin-top: var(--s-6);
  font-family: var(--f-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: var(--t-statement);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.statement__title em { font-style: italic; color: var(--royal); }

.statement__quotes {
  display: grid; gap: var(--s-5);
  margin-top: var(--s-8);
}
.statement__quotes li {
  padding-top: var(--s-4);
  border-top: 1px solid var(--jet);
  font-size: var(--t-md);
  color: var(--ink-dark-2);
  max-width: 30ch;
}

@media (min-width: 720px) {
  .statement__quotes { grid-template-columns: repeat(2, 1fr); column-gap: var(--col-gap); }
}
@media (min-width: 1080px) {
  .statement { padding-block: var(--s-11) var(--s-10); }
  .statement__quotes {
    grid-template-columns: repeat(4, 1fr);
    margin-left: calc(100% / 3);
    margin-top: var(--s-9);
  }
}

/* ==========================================================================
   03 · SERVICES — index table + vertical side CTA (static)
   ========================================================================== */
.services { position: relative; padding: var(--section-y) var(--gutter); }

.side-cta { display: none; }

.section-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
@media (min-width: 1080px) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .section-head .eyebrow { grid-column: 1 / -1; }
  .section-head .section-title { grid-column: 1 / 8; }
  .section-head .section-intro { grid-column: 9 / 13; }
}

.services__figure { margin: 0 calc(-1 * var(--gutter)) var(--s-8) 0; }
.services__figure img { width: 100%; }
.services__figure figcaption { padding-right: var(--gutter); }

.svc-table { border-top: 1px solid var(--line-strong); }
.svc-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.svc-row--head { display: none; }
.svc-num {
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-sm); letter-spacing: 0.1em; color: var(--lav);
  padding-top: 0.3em;
}
.svc-name {
  font-family: var(--f-display);
  font-weight: 600; font-size: var(--t-lg);
  line-height: 1.1; letter-spacing: -0.02em;
}
.svc-desc, .svc-out { grid-column: 2; }
.svc-desc { color: var(--ink-2); max-width: 52ch; }
.svc-out { font-size: var(--t-sm); color: var(--lav); }
.svc-out::before {
  content: "You receive — ";
  font-family: var(--f-display); font-stretch: 75%;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-xs);
}

.services__mobile-cta { margin-top: var(--s-7); }

@media (min-width: 900px) {
  .svc-row {
    grid-template-columns: 3.5rem minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
    column-gap: var(--col-gap);
    padding: var(--s-6) 0;
    align-items: baseline;
    transition: background-color 0.2s ease;
  }
  .svc-row--head {
    display: grid; padding: var(--s-3) 0;
    font-family: var(--f-display); font-stretch: 75%;
    font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--lav);
  }
  .svc-desc, .svc-out { grid-column: auto; }
  .svc-out::before { content: none; }
  .svc-row:not(.svc-row--head):hover { background: var(--deep); }
  .svc-row:not(.svc-row--head):hover .svc-name { color: var(--lav); }
}

@media (min-width: 1080px) {
  .services { display: grid; grid-template-columns: 4rem minmax(0, 1fr); padding-left: 0; }
  .services__inner { padding-left: calc(var(--gutter) - 4rem); min-width: 0; }

  /* Vertical CTA in the left margin, sticky while the table scrolls */
  .side-cta {
    display: block;
    border-right: 1px solid var(--line);
  }
  .side-cta__link {
    position: sticky; top: 40vh;
    display: inline-flex; align-items: center; gap: var(--s-3);
    margin-left: 1.25rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: var(--s-5) 0;
    font-family: var(--f-display); font-stretch: 75%; font-weight: 600;
    font-size: var(--t-sm); letter-spacing: 0.18em; text-transform: uppercase;
    text-decoration: none; color: var(--pale);
    border-left: 2px solid var(--royal);
  }
  .side-cta__link .arrow { transform: rotate(90deg); }
  .side-cta__link:hover { color: var(--lav); }
  .side-cta__link:hover .arrow { transform: rotate(90deg) translateX(0.3em); }
  .services__mobile-cta { display: none; }
}

/* ==========================================================================
   04 · APPROACH — LIVE #1
   ========================================================================== */
.approach {
  background: var(--deep);
  padding: var(--section-y) var(--gutter);
}
.approach__head { display: grid; gap: var(--s-5); }
.approach__figure { margin: var(--s-8) calc(-1 * var(--gutter)); }
.approach__figure img { width: 100%; }

.stages {
  position: relative;
  display: grid; gap: var(--s-7);
  padding-left: var(--s-6);
}
/* The rail: vertical on mobile, horizontal on desktop */
.stages::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--lav);
  transform-origin: top;
  transform: scaleY(var(--rail, 1));
  transition: transform 1.4s cubic-bezier(.6, 0, .2, 1);
}
.stage { position: relative; display: grid; gap: var(--s-3); align-content: start; }
.stage::before {
  content: "";
  position: absolute; left: calc(-1 * var(--s-6) - 4px); top: 0.6em;
  width: 9px; height: 9px;
  background: var(--deep); border: 1px solid var(--lav);
  transition: background-color 0.3s ease;
}
.stage__num { font-family: var(--f-display); font-stretch: 75%; font-size: var(--t-sm); letter-spacing: 0.12em; color: var(--lav); }
.stage__title {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 600;
  font-size: var(--t-xl); line-height: 1; letter-spacing: -0.035em;
}
.stage__time { font-size: var(--t-sm); color: var(--lav); }
.stage p { color: var(--ink-2); max-width: 38ch; }
.stage .stage__out { color: var(--pale); font-size: var(--t-sm); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.stage__out span {
  display: block;
  font-family: var(--f-display); font-stretch: 75%;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--t-xs); color: var(--lav);
}

/* Live state, set by main.js when the section enters the viewport */
.js .stages:not(.is-live) { --rail: 0; }
.stages.is-live .stage::before { background: var(--lav); }
.stages.is-live .stage:nth-child(2)::before { transition-delay: 0.45s; }
.stages.is-live .stage:nth-child(3)::before { transition-delay: 0.9s; }
.stages.is-live .stage:nth-child(4)::before { transition-delay: 1.35s; }
.stages.is-live .stage:nth-child(5)::before { transition-delay: 1.8s; }
.stages--five::before { transition-duration: 2s; }

.rules {
  display: grid; gap: var(--s-5);
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
}
.rules__title {
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lav);
}
.rules__list { display: grid; gap: var(--s-5); counter-reset: rule; }
.rules__list li { counter-increment: rule; position: relative; padding-left: 2.25rem; color: var(--ink-2); max-width: 46ch; }
.rules__list li::before {
  content: counter(rule, upper-roman);
  position: absolute; left: 0; top: 0;
  font-family: var(--f-display); font-stretch: 75%; color: var(--lav); letter-spacing: 0.06em;
}
.rules__list strong { display: block; color: var(--pale); font-weight: 600; }

@media (min-width: 900px) {
  .stages { grid-template-columns: repeat(3, 1fr); column-gap: var(--col-gap); padding-left: 0; padding-top: var(--s-7); }
  .stages::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; transform-origin: left; transform: scaleX(var(--rail, 1)); }
  .stage::before { left: 0; top: calc(-1 * var(--s-7) - 4px); }
  .rules__list { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); row-gap: var(--s-6); }
}
@media (min-width: 1080px) {
  .approach__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .approach__head .eyebrow { grid-column: 1 / 4; align-self: start; padding-top: 0.8em; }
  .approach__head .section-title { grid-column: 4 / 12; }
  .stages { margin-left: calc(100% / 4); }
  /* Staircase offset; padding (not margin) keeps the markers on the rail */
  .stage:nth-child(2) { padding-top: var(--s-7); }
  .stage:nth-child(3) { padding-top: var(--s-9); }
  .rules { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .rules__title { grid-column: 1 / 4; }
  .rules__list { grid-column: 4 / 13; }
}

/* Five-step variant: vertical rail until there is room for five columns */
@media (min-width: 900px) and (max-width: 1079px) {
  .stages--five { grid-template-columns: 1fr; padding-left: var(--s-6); padding-top: 0; }
  .stages--five::before { right: auto; bottom: 0; width: 1px; height: auto; transform-origin: top; transform: scaleY(var(--rail, 1)); }
  .stages--five .stage::before { left: calc(-1 * var(--s-6) - 4px); top: 0.6em; }
}
@media (min-width: 1080px) {
  .stages--five { margin-left: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stages--five .stage:nth-child(2) { padding-top: var(--s-5); }
  .stages--five .stage:nth-child(3) { padding-top: var(--s-7); }
  .stages--five .stage:nth-child(4) { padding-top: var(--s-8); }
  .stages--five .stage:nth-child(5) { padding-top: var(--s-9); }
  .stages--five .stage__title { font-size: var(--t-lg); font-stretch: 100%; }
}

/* ==========================================================================
   05 · RESULTS — LIVE #2, full-width giant number
   ========================================================================== */
.results { padding: var(--section-y) var(--gutter); }
.results__head { display: grid; gap: var(--s-4); max-width: 40rem; }

.results__hero {
  display: grid; gap: var(--s-5);
  margin-top: var(--s-6);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-strong);
}
.mega {
  font-family: var(--f-display);
  font-stretch: 62%;
  font-weight: 700;
  font-size: var(--t-mega);
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mega__sign, .mega__unit { color: var(--lav); }
.mega__unit { font-weight: 500; }
.results__hero-text { max-width: 30ch; font-size: var(--t-md); color: var(--ink-2); }

.results__grid { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
.results__figure img { width: 100%; }

.stats { display: grid; border-top: 1px solid var(--line); }
.stat { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); }
.stat dt {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 600;
  font-size: clamp(3rem, 2rem + 3.6vw, 5rem); line-height: 0.9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat__small { font-size: 0.42em; letter-spacing: 0; color: var(--lav); font-weight: 500; }
.stat dd { color: var(--ink-2); max-width: 32ch; }

.footnote { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--ink-2); }

@media (min-width: 720px) {
  .stats { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
}
@media (min-width: 1080px) {
  .results__hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .mega { grid-column: 1 / 9; }
  .results__hero-text { grid-column: 9 / 13; padding-bottom: var(--s-5); }
  .results__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .results__figure { grid-column: 1 / 6; }
  .stats { grid-column: 7 / 13; }
  .footnote { margin-left: calc((100% + var(--col-gap)) / 2); }
}

/* ==========================================================================
   06 · CASES — magazine layout, light insert (static)
   ========================================================================== */
.cases {
  background: var(--pale);
  color: var(--jet);
  padding: var(--section-y) var(--gutter);
}
.cases__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.cases .section-intro { color: var(--ink-dark-2); }

.case { display: grid; gap: var(--s-5); padding-block: var(--s-7); border-top: 1px solid var(--line-dark); }
.case__figure img { width: 100%; }
.case__body { display: grid; gap: var(--s-4); align-content: start; }
.case__sector {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 500;
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--royal);
}
.case__title {
  font-family: var(--f-display); font-stretch: 100%; font-weight: 600;
  font-size: var(--t-lg); line-height: 1.1; letter-spacing: -0.025em;
  text-wrap: balance;
}
.case__dl { display: grid; gap: var(--s-1) var(--s-5); }
.case__dl dt {
  margin-top: var(--s-3);
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dark-2);
}
.case__dl dd { color: var(--ink-dark-2); max-width: 46ch; }
.case__dl strong { color: var(--jet); font-weight: 600; }

@media (min-width: 720px) {
  .case__dl { grid-template-columns: 8.5rem 1fr; }
  .case__dl dt { margin-top: 0.2em; }
}

@media (min-width: 1080px) {
  .cases__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .cases__head .eyebrow { grid-column: 1 / -1; }
  .cases__head .section-title { grid-column: 1 / 7; }
  .cases__head .section-intro { grid-column: 10 / 13; }

  .case { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .case--a .case__figure { grid-column: 1 / 8; }
  .case--a .case__body { grid-column: 8 / 13; margin-top: var(--s-9); }
  .case--b .case__body { grid-column: 2 / 7; grid-row: 1; padding-top: var(--s-6); }
  .case--b .case__figure { grid-column: 8 / 13; grid-row: 1; margin-top: calc(-1 * var(--s-9)); }
  .case--a .case__dl, .case--b .case__dl { grid-template-columns: 1fr; }

  .cases__pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .cases__pair .case { display: grid; grid-template-columns: 1fr; }
  .case--c { grid-column: 1 / 7; }
  .case--d { grid-column: 7 / 13; margin-top: var(--s-10); }
}

/* ==========================================================================
   07 · INDUSTRIES — running index (static)
   ========================================================================== */
.industries { padding: var(--section-y) var(--gutter); border-bottom: 1px solid var(--line); }
.industries__run {
  margin-top: var(--s-6);
  font-family: var(--f-display);
  font-stretch: 75%;
  font-weight: 500;
  font-size: clamp(2rem, 1.2rem + 4.2vw, 5.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.industries__run sup {
  font-size: 0.32em; font-weight: 500; letter-spacing: 0;
  color: var(--lav); vertical-align: super; margin-left: 0.1em;
}
.industries__run .sep { color: var(--royal); font-weight: 300; padding-inline: 0.1em; }

.industries__notes {
  list-style: decimal;
  margin-top: var(--s-8);
  padding-left: 1.5rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.industries__notes li { padding: var(--s-2) 0; break-inside: avoid; }
.industries__notes li::marker { color: var(--lav); font-family: var(--f-display); }

@media (min-width: 720px) { .industries__notes { columns: 2; column-gap: var(--s-7); } }
@media (min-width: 1080px) { .industries__notes { columns: 3; margin-left: calc(100% / 3); } }

/* ==========================================================================
   08 · ABOUT (static)
   ========================================================================== */
.about {
  background: var(--deep);
  padding: var(--section-y) var(--gutter);
  display: grid; gap: var(--s-7);
}
.about__figure { max-width: 26rem; }
.about__figure img { width: 100%; }
.about__body { display: grid; gap: var(--s-5); align-content: start; }
.about__body > p:not(.eyebrow) { color: var(--ink-2); max-width: 60ch; }
.about__body .about__lede { color: var(--pale); font-size: var(--t-md); }
.about__sub {
  margin-top: var(--s-5);
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lav);
}

.team-mix { border-top: 1px solid var(--line); }
.team-mix > div {
  display: grid; gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.team-mix dt { font-family: var(--f-display); font-weight: 600; font-size: var(--t-md); }
.team-mix dd { color: var(--ink-2); font-size: var(--t-sm); }


@media (min-width: 720px) {
  .team-mix > div { grid-template-columns: 12rem 1fr; align-items: baseline; }
}
@media (min-width: 1080px) {
  .about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .about__figure { grid-column: 1 / 5; max-width: none; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .about__body { grid-column: 6 / 12; }
}

/* ==========================================================================
   09 · FAQ (static)
   ========================================================================== */
.faq { padding: var(--section-y) var(--gutter); display: grid; gap: var(--s-7); }
.faq__head { display: grid; gap: var(--s-4); justify-items: start; align-content: start; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0;
  list-style: none; cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-md);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--f-display); font-weight: 400; color: var(--lav);
  font-size: 1.4em; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--lav); }
.faq details p { padding: 0 0 var(--s-5); color: var(--ink-2); max-width: 62ch; }

@media (min-width: 1080px) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .faq__head { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
  .faq__list { grid-column: 6 / 13; }
}

/* ==========================================================================
   10 · CONTACT
   ========================================================================== */
.contact { border-top: 1px solid var(--line); }
.contact__banner { position: relative; }
.contact__banner img { width: 100%; min-height: 14rem; object-fit: cover; object-position: 75% center; }
.contact__banner-text { display: grid; gap: var(--s-4); padding: var(--s-6) var(--gutter) 0; }
.contact__intro { color: var(--ink-2); font-size: var(--t-md); max-width: 40ch; }
.contact__title {
  font-family: var(--f-display); font-stretch: 100%; font-weight: 600;
  font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem); line-height: 0.98; letter-spacing: -0.04em;
  max-width: 18ch;
}

@media (min-width: 900px) {
  .contact__banner-text {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 64%;
    align-content: start;
    padding-top: clamp(2rem, 4.5vw, 4.5rem);
  }
  .contact__title { font-stretch: 112%; }
}

.contact__grid {
  display: grid; gap: var(--s-8);
  padding: var(--s-8) var(--gutter) var(--section-y);
}

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-2); }
.form label {
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lav);
}
.form .optional { text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.form input:not([type="checkbox"]), .form select, .form textarea {
  width: 100%;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: var(--t-md);
  color: var(--pale);
}
.form select { appearance: none; background: var(--jet); padding-right: var(--s-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--lav) 50%), linear-gradient(135deg, var(--lav) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat; }
.form select option { background: var(--jet); color: var(--pale); }
.form textarea { resize: vertical; min-height: 8rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--lav); box-shadow: 0 1px 0 0 var(--lav); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--lav); outline-offset: 4px; }
.form [aria-invalid="true"] { border-bottom-color: var(--pale) !important; box-shadow: 0 2px 0 0 var(--pale); }

.form__check { display: flex; gap: var(--s-3); align-items: flex-start; }
.form__check input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; accent-color: var(--royal); }
.form__check label { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-stretch: 100%; font-size: var(--t-sm); color: var(--ink-2); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-3); }
.form__status { font-size: var(--t-sm); color: var(--lav); }

@media (min-width: 720px) {
  .form { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
  .form__row--full, .form__foot { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .form { grid-column: 1 / 8; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  overflow-x: clip;
  padding: var(--s-8) var(--gutter) var(--s-7);
  border-top: 1px solid var(--line);
}
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; }
.footer-h {
  font-family: var(--f-display); font-stretch: 75%;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lav); margin-bottom: var(--s-3);
}
.footer-grid ul { display: grid; gap: var(--s-2); }
.footer-grid a { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--pale); text-decoration: underline; text-underline-offset: 0.3em; }
.footer-grid p { font-size: var(--t-sm); color: var(--ink-2); }
.footer-grid .link-arrow { color: var(--pale); font-size: var(--t-base); }
.footer-copy { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-2); }

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .footer-grid > :nth-child(1) { grid-column: 1 / 4; }
  .footer-top { grid-column: 10 / 13; justify-self: end; align-self: end; }
}

/* ==========================================================================
   MOBILE STICKY BAR
   ========================================================================== */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: var(--jet);
  border-top: 1px solid var(--line-strong);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.5rem;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-base);
  text-decoration: none;
}
.mobile-bar__cta { flex: 1; background: var(--royal); color: var(--pale); }

@media (max-width: 719px) {
  body { padding-bottom: 3.5rem; }
}
@media (min-width: 720px) {
  .mobile-bar { display: none; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}