/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'ABC Arizona Flare';
  src: url('../fonts/arizona-flare-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Arizona Flare';
  src: url('../fonts/arizona-flare-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Arizona Flare';
  src: url('../fonts/arizona-flare-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Arizona Flare';
  src: url('../fonts/arizona-flare-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS

   Brand palette — the five core swatches, by their friendly names:
     Black  #000000  -> --pure-black
     Grey   #141419  -> --surface-dark   (blue-tinted charcoal)
     Blue   #CADFFF  -> --brand-accent   (pale "ice" blue)
     White  #F9F7F4  -> --cream          (warm off-white, not #FFFFFF)
     Blood  #3B0721  -> --brand-blood    (deep maroon)
   ============================================================ */
:root {
  /* Brand */
  --brand-purple:     #2D0A2E;
  --brand-purple-hi:  #4A1A4F;
  --brand-blood:      #3B0721;  /* "Blood" */
  --brand-accent:     #CADFFF;  /* "Blue"  */

  /* Surfaces */
  --near-black:       #0B0B0F;
  --surface-dark:     #141419;  /* "Grey"  */
  --pure-black:       #000000;  /* "Black" */
  --brand-gray:       #EDEFF2;
  --cream:            #F9F7F4;  /* "White" */
  --white:            #FFFFFF;

  /* Ink */
  --ink:                 #0B0B0C;
  --ink-on-dark:         #FFFFFF;
  --ink-near-on-dark:    rgba(255,255,255,0.85);
  --ink-muted-on-dark:   rgba(255,255,255,0.72);
  --ink-faint-on-dark:   rgba(255,255,255,0.55); /* min 4.5:1 on every dark surface (WCAG AA) */
  --ink-muted-on-light:  rgba(11,11,12,0.65);
  --ink-faint-on-light:  rgba(11,11,12,0.58); /* min 4.5:1 on cream/brand-gray (WCAG AA) */
  --rule-on-dark:        rgba(255,255,255,0.14);
  --rule-on-light:       rgba(11,11,12,0.12);
  --surface-hover-on-dark: rgba(255,255,255,0.08);

  /* Type families */
  --font-display: 'ABC Arizona Flare', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Type scale — discrete steps, no clamp */
  --text-display-xl: 92px;
  --text-display-lg: 64px;
  --text-display-md: 44px;
  --text-display-sm: 22px;
  --text-body-lg:    18px;
  --text-body:       16px;
  --text-body-sm:    14px;
  --text-eyebrow:    11px;

  /* Section vertical rhythm — discrete per DESIGN.md */
  --space-section-lg: 120px;
  --space-section-md: 80px;
  --space-section-sm: 64px;

  /* Shared micro-rhythm — gap under a section eyebrow before its heading,
     and the pin offset for sticky split-grid heads (clears the floating nav).
     Documented exceptions live in DESIGN.md. */
  --eyebrow-gap: 20px;
  --sticky-top: 120px;

  /* Horizontal gutters — chosen to match .container's effective left/right
     inset at the same breakpoint so sections that pad themselves
     (statusquo, gap) stay vertically aligned with sections that use
     .container (stats, etc.). .container = 24px outer + 24px inner = 48px,
     growing only after the 1680px cap kicks in (≈ vw > 1728). */
  --gutter-mobile:  24px;
  --gutter-tablet:  48px;
  --gutter-desktop: max(48px, calc((100vw - 1680px) / 2 + 24px));

  /* Radii */
  --radius-sm:    8px;
  --radius-pill:  999px;
  --radius-round: 50%;

  /* Layout */
  --max-content: 1680px;

  /* Motion */
  --reveal-ease:     cubic-bezier(0.43, 0.195, 0.02, 1);
  --reveal-duration: 1.2s;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Skip link: visually hidden until keyboard-focused. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ============================================================
   GRID / FULL-BLEED PATTERN
   - Sections span 100vw (full bleed)
   - .container caps inner content at 1440px with 24px gutters
   ============================================================ */
.section { width: 100%; position: relative; }
.container {
  max-width: min(100vw - 48px, 1680px);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

/* ============================================================
   TYPE SCALE
   ============================================================ */
/* Unified small-caps eyebrow — used above every section header for consistency.
   Apply with surface modifier .eyebrow--on-dark or .eyebrow--on-light;
   per-section classes are only allowed to override layout (margin), not color. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
}
.eyebrow--on-dark  { color: var(--ink-faint-on-dark); }
.eyebrow--on-light { color: var(--ink-faint-on-light); }
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 {
  font-size: var(--text-display-lg);
  line-height: 1.04;
}
h2 {
  font-size: var(--text-display-lg);
  line-height: 1.12;
}
h3 {
  font-size: var(--text-display-sm);
  line-height: 1.25;
  letter-spacing: -0.012em;
}
p { margin: 0; }

/* Heading ramps — discrete per breakpoint, no clamp. Hero H1's desktop
   base size lives in this block (not in the .hero section below) so the
   media-query overrides come after it in source order and the cascade
   resolves correctly at same specificity. */
.hero h1 { font-size: var(--text-display-xl); }
@media (max-width: 1024px) {
  h1, h2 { font-size: var(--text-display-md); }
  .hero h1 { font-size: 56px; }
}
@media (max-width: 768px) {
  h1, h2 { font-size: 32px; }
  .hero h1 { font-size: 40px; }
}

/* ============================================================
   BUTTONS
   One base + variant grammar. All buttons are pill-shaped.
   Mix one variant (--primary/--secondary/--ghost) with one surface
   (--on-dark/--on-light), plus optional --sm for the nav.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--sm {
  padding: 10px 20px;
  font-size: var(--text-body-sm);
}

/* Primary: solid fill, no border-color tweak. */
.btn--primary.btn--on-dark {
  background: var(--white);
  color: var(--surface-dark);
  border-color: var(--white);
}
.btn--primary.btn--on-dark:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.88);
}

/* Button hover physics. JS sets per-button custom props:
   --mx/--my/--spot-a (cursor spotlight), --btn-rx/--btn-ry (3-D tilt),
   --btn-ripple (ripple rgb per surface). Each surface variant supplies its own
   spotlight colour so the effect reads on white, black, and outline buttons alike.
   The transform rule uses .btn-prefixed selectors (specificity 0,3,0) so it
   wins over .reveal-*.in-view { transform: none } on revealed CTAs. */
.btn.btn--primary.btn--on-dark,
.btn.btn--primary.btn--on-light,
.btn.btn--secondary.btn--on-dark {
  position: relative;
  overflow: hidden;
  transform: perspective(600px)
             rotateX(var(--btn-rx, 0deg))
             rotateY(var(--btn-ry, 0deg));
  will-change: transform;
}

/* White pill on dark — blood-red spotlight stains the surface. */
.btn--primary.btn--on-dark,
.btn--primary.btn--on-dark:hover {
  --btn-ripple: 20, 20, 25;
  background:
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(59, 7, 33, var(--spot-a, 0)),
                    rgba(59, 7, 33, 0) 70%),
    var(--white);
  border-color: var(--white);
}

.btn-ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: rgba(var(--btn-ripple, 20, 20, 25), 0.22);
  transform: translate(-50%, -50%) scale(0);
  animation: btn-ripple-anim 600ms ease-out forwards;
}
@keyframes btn-ripple-anim {
  to { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-ripple { animation-duration: 1ms; }
}

.btn--primary.btn--on-light {
  background: var(--brand-blood);
  color: var(--white);
  border-color: var(--brand-blood);
}
/* Blood pill on light — a warm ember spotlight glows across the deep burgundy
   fill, reading like embers on the dark surface. */
.btn--primary.btn--on-light,
.btn--primary.btn--on-light:hover {
  --btn-ripple: 255, 255, 255;
  background:
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(255, 176, 120, var(--spot-a, 0)),
                    rgba(255, 176, 120, 0) 70%),
    var(--brand-blood);
  border-color: var(--brand-blood);
}

/* Secondary: outline. */
.btn--secondary.btn--on-dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
  --btn-ripple: 255, 255, 255;
}
.btn--secondary.btn--on-dark:hover {
  background: var(--surface-hover-on-dark);
  border-color: var(--white);
}
/* Outline pill on dark — no surface to stain, so the edge lights up toward
   the cursor: a glowing ring segment from a masked gradient border. The ring
   itself fades via opacity so it eases in/out smoothly (driven by --spot-a)
   while still tracking the cursor live through --mx/--my. */
.btn--secondary.btn--on-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.95),
              rgba(255, 255, 255, 0) 70%);
  opacity: var(--spot-a, 0);
  transition: opacity .35s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.btn--secondary.btn--on-light {
  background: transparent;
  color: var(--ink);
  border-color: rgba(11,11,12,0.3);
}
.btn--secondary.btn--on-light:hover {
  background: rgba(11,11,12,0.06);
  border-color: var(--ink);
}

/* Ghost: text only. */
.btn--ghost.btn--on-dark {
  background: transparent;
  color: var(--ink-near-on-dark);
}
.btn--ghost.btn--on-dark:hover { color: var(--white); }
.btn--ghost.btn--on-light {
  background: transparent;
  color: var(--ink);
}
.btn--ghost.btn--on-light:hover { text-decoration: underline; }

.hero ::selection { background: var(--brand-purple); color: var(--white); }
.hero ::-moz-selection { background: var(--brand-purple); color: var(--white); }
.hero .btn:focus-visible,
.hero a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   NAV
   ============================================================ */
/* Fixed glass bar. It spans the content measure (matches .container) so its
   logo and CTA line up with the page content's left/right edges. Borderless and
   near-square; separated from content by blur + a soft shadow only. Hides on
   scroll-down and reveals on scroll-up (toggled by the nav script). The
   light/dark theme is driven at runtime from the luminance of whatever sits
   behind the bar, so it stays legible over every section. */
.site-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 60;
  pointer-events: none;
  transition: transform .35s ease, opacity .3s ease;
}
.site-nav.is-hidden {
  transform: translateY(-140%);
  opacity: 0;
}
.site-nav__bar {
  pointer-events: auto;
  position: relative;
  max-width: min(100vw - 48px, 1680px);
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* No background panel — the logo, links and CTA float over the content. The
     adaptive light/dark theming keeps the text legible over any section. */
  background: transparent;
}

.nav-logo {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em; /* serif wordmark — tracks tight, like the footer display */
  line-height: 1;
  white-space: nowrap;
  transition: font-size .4s ease, letter-spacing .4s ease;
}

.nav-links {
  grid-column: 2;
  justify-self: center;
  position: relative; /* anchors the sliding .nav-indicator */
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 350;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  transition: color .2s ease;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--white); }

/* Ice-blue CTA pill with a circular arrow, anchored to the right zone. */
.nav-cta {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm);
  line-height: 1;
  white-space: nowrap;
  transition: filter .25s ease;
}
.nav-cta:hover { filter: brightness(1.06); }
.nav-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand-accent);
}
.nav-cta__icon svg { width: 13px; height: 13px; display: block; transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-cta:hover .nav-cta__icon svg { transform: translateX(4px); }

/* Adaptive: over light backgrounds the text flips to ink. */
.site-nav--light .nav-logo { color: var(--ink); }
.site-nav--light .nav-links a { color: rgba(11, 11, 12, 0.62); }
.site-nav--light .nav-links a:hover,
.site-nav--light .nav-links a[aria-current="page"] { color: var(--ink); }
.site-nav--light .nav-toggle { color: var(--ink); }

/* Desktop-only refinements: frosted glass past 60px of scroll, bar compression,
   and the shared sliding underline. The mobile bar (≤768px) keeps its own
   height/behavior untouched. */
@media (min-width: 769px) {
  .site-nav__bar {
    height: 72px;
    transition: height .4s ease;
  }
  .site-nav--scrolled .site-nav__bar { height: 58px; }
  .site-nav--scrolled .nav-logo { font-size: 1.15rem; }

  /* Glass lives on a pseudo so its opacity can fade independently of the bar's
     contents (fading an element that carries backdrop-filter fades the blur). */
  .site-nav__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 18px;
    background: rgba(10, 10, 10, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity .4s ease, background-color .3s ease;
  }
  .site-nav--scrolled .site-nav__bar::before { opacity: 1; }
  .site-nav--light .site-nav__bar::before { background: rgba(249, 247, 244, 0.72); }
  @supports not (backdrop-filter: blur(1px)) {
    .site-nav__bar::before { background: rgba(10, 10, 10, 0.92); }
    .site-nav--light .site-nav__bar::before { background: rgba(249, 247, 244, 0.95); }
  }

  /* Single shared underline that slides between links (positioned by site.js):
     rests on the aria-current link, follows hover/focus, hidden when neither. */
  .nav-indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 1px; /* unit width; scaleX(n) makes it n px wide */
    height: 1px;
    background: var(--white);
    transform-origin: 0 50%;
    opacity: 0;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease;
    pointer-events: none;
  }
  .site-nav--light .nav-indicator { background: var(--ink); }
}

/* Staggered entrance on load. opacity:0 sits in the same guarded rule as the
   animation, so elements are hidden from first paint with no FOUC, and
   reduced-motion/mobile users never get the hidden state. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .nav-logo,
  .nav-links a,
  .nav-cta {
    opacity: 0;
    animation: nav-enter .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .nav-links a:nth-of-type(1) { animation-delay: 100ms; }
  .nav-links a:nth-of-type(2) { animation-delay: 160ms; }
  .nav-links a:nth-of-type(3) { animation-delay: 220ms; }
  .nav-links a:nth-of-type(4) { animation-delay: 280ms; }
  .nav-cta { animation-delay: 340ms; }
}
@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Focus rings. Two-class selectors so they beat the `.hero a:focus-visible`
   white ring on the home page, where the nav sits inside .hero. */
.site-nav .nav-logo:focus-visible,
.site-nav .nav-links a:focus-visible,
.site-nav .nav-cta:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.site-nav .nav-cta:focus-visible { border-radius: var(--radius-pill); }
/* Accent ring is invisible over the cream glass — flip to ink. */
.site-nav--light .nav-logo:focus-visible,
.site-nav--light .nav-links a:focus-visible { outline-color: rgba(11, 11, 12, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__bar, .site-nav__bar::before,
  .nav-logo, .nav-indicator, .nav-cta, .nav-cta__icon svg { transition: none; }
}

.nav-toggle { display: none; }
.mobile-nav-panel { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* pure black so the video's black fade-in/out + loop seam blend seamlessly */
  background: #000;
  color: var(--white);
  overflow: hidden;
  display: grid;
  /* Single flexible row centres the hero content. (The nav used to occupy a
     leading auto row; it's now a fixed floating capsule, out of flow.) */
  grid-template-rows: 1fr;
  margin-bottom: 0;
  padding: 0;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 20, 25, 0.45);
  z-index: 1;
}

.purple-band {
  background: var(--surface-dark);
}
.hero-content-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}
.hero-content {
  max-width: 880px;
}
.hero h1 {
  max-width: 15ch;
  color: var(--white);
  text-wrap: balance;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero-lead {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: var(--text-body-lg);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  text-wrap: pretty;
  hyphens: none;
}
.hero-ctas {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   LOGO BAR — thin trust strip immediately below the hero. Sits on the purple-band gradient that the hero fades into, hairlined top/bottom so it reads as its own band.
   ============================================================ */
.logobar-section {
  background: transparent;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logobar-section .container {
  display: flex;
  align-items: center;
  gap: 48px;
}
.logobar-label {
  white-space: nowrap;
}
.logobar-logos {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.logobar-logo {
  display: inline-flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.logobar-logo:hover { opacity: 0.7; }
.logobar-logo img,
.logobar-logo svg {
  height: 28px;
  width: auto;
  display: block;
  /* Force monochrome white regardless of the asset's source colors. */
  filter: brightness(0) invert(1);
}
.logobar-link {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--ink-muted-on-dark);
  transition: color .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.logobar-link::after {
  content: "\2192";
  transform: translateX(var(--arrow-x, 0px));
  transition: transform .2s ease;
}
.logobar-link:hover { color: var(--white); --arrow-x: 3px; }

/* ============================================================
   STATS SECTION — transparent over the purple band, continuous with the logo bar above
   ============================================================ */
.stats-section {
  position: relative;
  background: transparent;
  color: var(--white);
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
}
.stats-body {
  position: relative;
  z-index: 1;
  padding: var(--space-section-lg) 0;
}
.stats-intro {
  max-width: 56ch;
}
.stats-body h2 {
  margin-top: 24px;
  line-height: 1.08;
  padding-bottom: 0.12em;
  text-wrap: balance;
  background: linear-gradient(180deg,
    var(--ink-on-dark) 0%,
    rgba(255, 255, 255, 0.65) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stats-bridge {
  margin-top: 24px;
  color: var(--ink-muted-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  text-wrap: pretty;
}
.stats-stack {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  width: 100%;
}
.stat-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Right-anchor the third column. justify-self: end on the grid item shrinks the .stat-row to its widest child and pins it to the cell's right edge; children inside stretch+left-align as default, so the number and caption share the same left edge. */
.stats-stack > :last-child {
  justify-self: end;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink-on-dark);
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: -2px;
}
.stat-number .unit,
.stat-number .plus {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 40px;
  color: var(--ink-muted-on-dark);
  letter-spacing: 0;
  text-transform: none;
  display: inline;
  transform: none;
  margin-left: 0.06em;
}
.stat-caption {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-faint-on-dark);
  max-width: 28ch;
}
/* Scroll reveal — fade up + lift, staggered */
.stat-item-1, .stat-item-2, .stat-item-3 {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.stat-item-1.is-in { transition-delay: 0ms; }
.stat-item-2.is-in { transition-delay: 120ms; }
.stat-item-3.is-in { transition-delay: 240ms; }
.stat-item-1.is-in,
.stat-item-2.is-in,
.stat-item-3.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   STATUS QUO SECTION — near-black surface
   ============================================================ */
.statusquo-section {
  position: relative;
  background-color: transparent;
  color: var(--cream);
  overflow: hidden;
  padding: var(--space-section-lg) var(--gutter-desktop);
  display: grid;
  grid-template-columns: 1fr minmax(320px, 400px);
  column-gap: 48px;
  align-items: end;
}
/* Atmospheric centered spotlight — barely-there depth, no animation. */
.statusquo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 70% at 50% 45%,
    rgba(245, 243, 238, 0.04) 0%,
    rgba(245, 243, 238, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}
.statusquo-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  /* Left-anchored to the section gutter so the 'CUSTOMER STORY' eyebrow shares a vertical axis with 'EXPERIENCE' (stats above) and 'THE AETONIX APPROACH' (Approach below). */
  margin: 0;
  align-self: start;
}
/* Right column: a single 3:4 product image, top-aligned with the customer-story
   column on the left. */
.statusquo-aside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: start;
}
/* Supporting image — 3:4 frame matching the native ratio so nothing crops.
   Top-aligned with the customer story; it's the only element in the column. */
.statusquo-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.statusquo-media video,
.statusquo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(0.96) brightness(0.95);
}
/* Scroll-in reveal — each element fades + lifts when section enters viewport. */
.statusquo-eyebrow,
.statusquo-body,
.statusquo-credit {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.statusquo-section.is-revealed .statusquo-eyebrow,
.statusquo-section.is-revealed .statusquo-body,
.statusquo-section.is-revealed .statusquo-credit {
  opacity: 1;
  transform: translateY(0);
}
.statusquo-section.is-revealed .statusquo-eyebrow { transition-delay: 0ms; }
.statusquo-section.is-revealed .statusquo-body    { transition-delay: 120ms; }
.statusquo-section.is-revealed .statusquo-credit  { transition-delay: 280ms; }
/* Scroll-driven exit fade — content quietens as the section approaches its boundary.
   Progressive enhancement; older browsers simply skip this. */
@supports (animation-timeline: view()) {
  .statusquo-inner {
    animation: statusquo-exit-fade linear both;
    animation-timeline: view();
    animation-range: exit 10% exit 70%;
  }
  @keyframes statusquo-exit-fade {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0.85; transform: translateY(14px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .statusquo-inner { animation: none; }
  }
}

.statusquo-eyebrow {
  margin-bottom: 40px;
}
.statusquo-body {
  margin: 0 0 56px;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--cream);
  max-width: 28ch;
  text-wrap: balance;
}
/* Per-word scroll-tied reveal — words go from muted to full as the quote scrolls into reading position. */
.statusquo-body .reveal-word {
  color: rgba(245, 243, 238, 0.18);
  transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: color;
}
.statusquo-body .reveal-word.is-lit {
  color: rgba(245, 243, 238, 1);
}
/* Keep the final cluster of words on one line to prevent a "scale." orphan. */
.statusquo-body .reveal-group {
  white-space: nowrap;
}
/* Attribution under the quote — overlapping avatars on the left, names
   inline with a thin separator, org line below. Reads as caption to the
   quote, not standalone UI. */
.statusquo-credit {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
}
.statusquo-credit-photos { display: flex; flex-shrink: 0; }
.statusquo-credit-photos img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--near-black);
  display: block;
  transform: scale(0.9);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.statusquo-credit-photos img + img { margin-left: -10px; }
/* On section reveal: avatars scale to full size + emit a soft ring that fades out. Staggered between the two so they feel individual. */
.statusquo-section.is-revealed .statusquo-credit-photos img {
  animation: avatar-reveal 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 280ms forwards;
}
.statusquo-section.is-revealed .statusquo-credit-photos img:nth-child(2) {
  animation-delay: 440ms;
}
@keyframes avatar-reveal {
  0%   { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  35%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14); }
  100% { transform: scale(1);   box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .statusquo-credit-photos img { transform: none; transition: none; }
  .statusquo-section.is-revealed .statusquo-credit-photos img,
  .statusquo-section.is-revealed .statusquo-credit-photos img:nth-child(2) { animation: none; }
}
.statusquo-credit-meta { min-width: 0; }
.statusquo-credit-names {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(245, 243, 238, 0.85);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.statusquo-credit-sep { color: rgba(245, 243, 238, 0.4); }
.statusquo-credit-org {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(245, 243, 238, 0.55);
}
@media (max-width: 860px) {
  /* On smaller screens we lose the bottom-fade + overlap; sections sit flush. */
  .statusquo-section {
    padding: var(--space-section-md) var(--gutter-tablet);
    background-image: none;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .gap-section { margin-top: 0; }
  .statusquo-body { font-size: 28px; max-width: none; }
  .statusquo-credit { flex-wrap: wrap; gap: 12px; margin-bottom: 0; }
  .statusquo-aside { align-self: stretch; }
  .statusquo-media { width: 100%; max-width: 360px; aspect-ratio: 3 / 4; margin-top: 0; }
}

/* ============================================================
   HOW WE CLOSE THE GAP — light surface, brand-gray
   ============================================================ */
.gap-section {
  background: var(--white);
  color: var(--ink);
  /* Mirror Status Quo above: section-gutter on the horizontal so the eyebrow
     shares the same left axis ("WHAT CHANGED" ↔ "THE AETONIX APPROACH").
     Using .container here would add an extra 24px inset and push content right. */
  padding: var(--space-section-lg) var(--gutter-desktop);
  position: relative;
  /* Overlap the previous (dark) section so the boundary feels continuous. */
  margin-top: -72px;
  z-index: 2;
  /* Contain the full-bleed (100vw) gap video so it can't add horizontal scroll. */
  overflow-x: clip;
}
/* The .container wrapper is neutralized — the section already owns the
   horizontal gutter. This keeps the existing markup but moves the alignment
   axis to match the section above. */
.gap-section .container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gap-intro {
  /* Slightly left-aligned within the inner column so the heading reads
     editorially, not poster-style. The outcomes below share this same column. */
  max-width: 760px;
}
.gap-intro .eyebrow {
  margin: 0 0 24px;
  display: block;
}
.gap-intro h2 {
  line-height: 1.08;
  padding-bottom: 0.12em;
  text-wrap: balance;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(11, 11, 12, 0.65) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gap-lead {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--ink-muted-on-light);
  max-width: 520px;
  text-wrap: pretty;
}
.gap-media {
  /* --shrink: 1 = contained (default / no-JS / reduced-motion). JS drives it
     0 -> 1 on scroll so the video starts full-bleed and insets to its frame. */
  --shrink: 1;
  margin-top: 80px;
  width: calc(100vw - (100vw - 100%) * var(--shrink));
  margin-left: calc((50% - 50vw) * (1 - var(--shrink)));
  border-radius: calc(var(--radius-sm) * var(--shrink));
  overflow: hidden;
  /* Wide, short banner so the frame doesn't dominate the section; a height cap
     keeps it from getting tall on wide monitors. object-fit: cover + centered
     position keeps the subject centred as the crop tightens. */
  aspect-ratio: 2.15 / 1;
  max-height: 700px;
  background: var(--pure-black);
  will-change: width, margin-left;
}
.gap-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.gap-outcomes {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 40px matches the DESIGN.md 3-up gap; tighter than 48px gives each column
     a few more characters of width so all three bodies wrap to 2 lines. */
  gap: 40px;
}
.gap-outcome {
  /* Text-led: no card, no fill. The bracketed icon at top sets the visual
     anchor and aligns all three columns on the same horizontal axis. */
}
.hwd-index {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted-on-light);
}
.gap-outcome-icon-frame {
  /* Block-level flex (not inline-flex): inline-flex picks up the leading
     whitespace in the HTML as a ~4-5px space character, which indents the
     icon to the right of the title below it. Most visible on mobile. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 32px;
  border: 0.5px solid var(--ink-faint-on-light);
  border-radius: var(--radius-sm);
}
.gap-outcome-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--ink-muted-on-light);
  shape-rendering: crispEdges;
  transition: transform 160ms ease-out;
  will-change: transform;
}
.gap-outcome-icon .accent {
  fill: var(--brand-purple);
  stroke: none;
  transition: filter 160ms ease-out;
}
.gap-outcome-icon.icon-grid .signal {
  fill: transparent;
  transition: fill 160ms ease-out;
}
.gap-outcome-icon.icon-bars {
  /* The chart body sits in y=3-17 of the 24-unit viewBox with only a small
     stand below, so the visual mass reads above center. Nudge down 2px so
     the body centers in the frame. */
  transform: translateY(2px);
}
.gap-outcome-icon.icon-bars .bar-rises {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 160ms ease-out;
}
.gap-outcome-icon.icon-clock .minute-hand {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 160ms ease-out;
}
@media (hover: hover) {
  .gap-outcome:hover .gap-outcome-icon { transform: translateY(-2px); }
  /* icon-bars sits at translateY(2px) at rest; hover ends at translateY(0)
     so the lift delta is still 2px upward, consistent with the other icons. */
  .gap-outcome:hover .gap-outcome-icon.icon-bars { transform: translateY(0); }
  .gap-outcome:hover .gap-outcome-icon .accent { filter: brightness(1.45); }
  .gap-outcome:hover .icon-grid .signal { fill: rgba(0, 0, 0, 0.4); }
  .gap-outcome:hover .icon-bars .bar-rises { transform: scaleY(1.5); }
  .gap-outcome:hover .icon-clock .minute-hand { transform: rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gap-outcome-icon,
  .gap-outcome-icon * { transition: none !important; }
  .gap-outcome:hover .gap-outcome-icon,
  .gap-outcome:hover .gap-outcome-icon * { transform: none !important; filter: none !important; }
  .gap-outcome:hover .icon-grid .signal { fill: transparent !important; }
}
.gap-outcome-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-display-sm);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.gap-outcome-body {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink-muted-on-light);
  text-wrap: pretty;
}

/* ============================================================
   FINAL CTA — warm off-white, editorial scale, single CTA.
   Top half of the closing brand moment; flows into .closing-band.
   ============================================================ */
.cta-section {
  position: relative;
  overflow: hidden;
  /* Fade in from white at top to the brand off-white, so the section
     emerges from the white section above instead of meeting it as a hard edge. */
  background: linear-gradient(
    to bottom,
    var(--white) 0%,
    var(--brand-gray) 20%
  );
  color: var(--ink);
  padding: var(--space-section-lg) 0;
  border-top: 0;
  text-align: left;
}
/* Line-grid texture — masked to fade IN at the top (so lines don't show
   against the white wash) and fade OUT at the bottom (so they dissolve
   into the .closing-band gradient below). */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #C8CDD5 1px, transparent 1px),
    linear-gradient(to bottom, #C8CDD5 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 20%,
    #000 50%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 20%,
    #000 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Live canvas layer — mouse-follow spotlight + faint pulsing nodes over the
   same grid coordinates as ::before. JS adds .js-grid-active to hide the
   static grid when the canvas is running; reduced-motion / coarse-pointer
   users fall back to the static ::before. */
.cta-grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 15%,
    #000 75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 15%,
    #000 75%,
    transparent 100%
  );
}
.cta-section.js-grid-active::before { display: none; }
.cta-section .container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
/* .cta-section .built-for kept as a hook for future layout overrides;
   typography + color come from .eyebrow + .eyebrow--on-light. */
.cta-section h2 {
  margin: 56px auto 0;
  max-width: 16ch;
  line-height: 1.08;
  padding-bottom: 0.12em;
  text-wrap: balance;
  color: var(--near-black);
}
.cta-section .lead {
  margin: 40px auto 0;
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-muted-on-light);
  text-wrap: pretty;
}
.cta-ctas {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}
/* ============================================================
   CLOSING BAND — cool atmospheric gradient that bridges the off-white
   CTA above and the pure-black footer below. Built from the brand
   palette: a washed #CADFFF light haze near the top, a recessed
   --brand-blood (#3B0721) undertone in the mid, resolving into #000000.
   No imagery; CSS gradients + SVG grain.
   ============================================================ */
.closing-band {
  width: 100%;
  height: 280px;
  position: relative;
  background:
    /* Subtle washed light-blue haze, recessed so it can't bleed past the top edge */
    radial-gradient(ellipse 90% 55% at 50% 40%,
      rgba(202, 223, 255, 0.40) 0%,
      rgba(202, 223, 255, 0)    70%),
    /* Restrained blood mid-tone, recessed so it reads as ambient brand presence */
    radial-gradient(ellipse 90% 70% at 50% 62%,
      rgba(59, 7, 33, 0.55) 0%,
      rgba(59, 7, 33, 0)    75%),
    /* Main vertical fade: cool off-white → muted blue-grey → desaturated blood → pure black.
       Endpoints reference brand tokens; midpoint stops stay literal as a one-off
       decorative composition. */
    linear-gradient(180deg,
      var(--brand-gray) 0%,
      var(--brand-gray) 6%,
      #D6DCE5 22%,
      #7E6B85 45%,
      #2A0824 75%,
      var(--pure-black) 100%);
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
}
/* Grain overlay — turbulence noise gives the band a tactile feel without
   using photography. Slightly lower opacity than the warm version so the
   cooler, more delicate gradient doesn't get crunchy. */
.closing-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Soft horizon haze — a thin #CADFFF wash across the upper-mid of the band,
   the explicit "washed light-blue" beat. Felt, not seen as a stripe. */
.closing-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  height: 35%;
  background: linear-gradient(180deg,
    rgba(202, 223, 255, 0)    0%,
    rgba(202, 223, 255, 0.15) 50%,
    rgba(202, 223, 255, 0)    100%);
  pointer-events: none;
}

/* ============================================================
   FOOTER — warm near-black; positioning + links above, oversized
   wordmark moment below, fine baseline rule for legal/copyright.
   ============================================================ */
.site-footer {
  background: var(--pure-black);
  border-top: 0;
  color: var(--ink-muted-on-dark);
  font-family: var(--font-body);
  overflow: hidden;
  position: relative;
}
.site-footer .container { padding-top: 96px; padding-bottom: 32px; }

/* Top grid: positioning column + Navigate + Contact (3-up) */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 96px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-col .eyebrow {
  margin: 0 0 16px;
}
.footer-col a {
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-near-on-dark);
  text-decoration: none;
  transition: opacity 160ms ease;
}
.footer-col a:hover { opacity: 0.6; }

/* Positioning — serif statement of what Aetonix does, alongside the link columns. */
.footer-positioning { max-width: 38ch; }
.footer-positioning .footer-tag {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink-on-dark);
  margin: 0;
  text-wrap: balance;
}

/* Oversized wordmark — the closing brand moment. Arizona display at viewport
   scale; subtle vertical gradient so it sits in the atmosphere, not on top of it. */
.footer-wordmark-display {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(5rem, 21vw, 21rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 16px 0 64px;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Registration mark on the display wordmark — small superscript raised to sit
   beside the top of the final "x" (x-height, not the cap line) so it hugs the
   letter. Offset is in em, so it tracks the responsive wordmark size. Inherits
   the wordmark's gradient text-fill via background-clip. */
.footer-wordmark-reg {
  font-size: 0.2em;
  vertical-align: 1.7em;
  line-height: 1;
  letter-spacing: 0;
  margin-left: 0.02em;
}

/* Baseline tier — copyright + legal links, fine 1px rule above */
.footer-baseline {
  border-top: 1px solid var(--surface-hover-on-dark);
  padding: 24px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint-on-dark);
}
/* Legal cluster — copyright + Privacy Policy link, paired on the left of the
   baseline row. */
.footer-baseline-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-baseline-legal a {
  color: var(--ink-faint-on-dark);
  text-decoration: none;
  transition: color 160ms ease;
}
.footer-baseline-legal a:hover { color: var(--ink-on-dark); }
/* Compliance badges — sit in the empty right slot of the baseline row
   (space-between pushes them opposite the copyright). Rendered as flat white
   silhouettes at ~50% opacity so they read as a quiet trust mark, not a logo
   wall. The brightness/invert filter forces each source SVG (dark-blue HIPAA,
   multi-tone SOC 2) to a uniform white. */
.footer-compliance {
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer-compliance img {
  height: 40px;
  width: auto;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  transition: opacity 160ms ease;
}
.footer-compliance img:hover { opacity: 0.75; }
/* Scroll reveal — duplicates the .stat-item-* pattern (lines 463–477) */
.footer-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.footer-reveal.is-in { opacity: 1; transform: translateY(0); }
.footer-reveal-1.is-in { transition-delay: 0ms; }
.footer-reveal-2.is-in { transition-delay: 120ms; }
.footer-reveal-3.is-in { transition-delay: 240ms; }
.footer-reveal-4.is-in { transition-delay: 360ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .hero { padding: 140px 0 0; }
}

@media (max-width: 1024px) {
  .stats-body { padding: var(--space-section-md) 0; }
  .stats-stack { gap: 24px; margin-top: 64px; }
  .stat-number { font-size: 96px; line-height: 0.9; }
  .stat-number .unit, .stat-number .plus { font-size: 32px; }
  /* Tablet: tighten section padding, soften headline scale, but keep
     the three outcomes side-by-side — the row still reads at this width.
     Mirror Status Quo's tablet padding so the eyebrows align. */
  .gap-section { padding: var(--space-section-md) var(--gutter-tablet); }
  .gap-media { margin-top: 56px; }
  .gap-outcomes { margin-top: 56px; gap: 32px; }
  .cta-section { padding: var(--space-section-md) 0; }
  .closing-band { height: 220px; }
  /* Tablet: positioning copy spans full width up top, Navigate + Contact pair beneath. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    row-gap: 56px;
    padding-bottom: 72px;
  }
  .footer-positioning {
    grid-column: 1 / -1;
    max-width: 56ch;
  }
}

/* Status Quo tablet only — keep the minmax 2-col layout but tighten padding + gap. */
@media (min-width: 861px) and (max-width: 1024px) {
  .statusquo-section {
    padding: var(--space-section-md) var(--gutter-tablet);
    gap: 56px;
  }
}

@media (max-width: 1024px) {
  .logobar-section .container { gap: 32px; }
  .logobar-logos { gap: 40px; }
}

@media (max-width: 768px) {
  /* Align all section content to the same 24px-from-edge as statusquo / gap-section on phone. The base container does 24px outer gutter + 24px inner padding (48px from edge); on phone, drop the outer-gutter math and let the inner padding do the work alone, matching how .cta-section .container already behaves. */
  .container { max-width: 100%; }
  /* Hero headline on phone: looser line-height + wider max-width so a long sentence wraps to 4 lines, not 6+. Size is set by the global heading ramp (40px). */
  .hero h1 { line-height: 1.08; max-width: 22ch; }
  /* Testimonial author names: stack one per line on phone, hide separator. */
  .statusquo-credit-names { flex-direction: column; gap: 2px; }
  .statusquo-credit-sep { display: none; }
  .site-nav { top: 10px; }
  .site-nav__bar {
    grid-template-columns: 1fr auto;
    gap: 12px;
    height: 56px;
    /* Span the full width so the logo's left edge lands on the same 24px
       gutter as the page content (was inset ~48px via the desktop auto-margin
       + padding). */
    max-width: 100%;
  }
  /* Adaptive frosted-glass backdrop — same behavior as desktop (lines 506-534)
     but enabled on phones so the bar reads over any background instead of
     floating transparently. Transparent at the top of the page, fades in once
     scrolled; flips light/dark with the luminance-driven .site-nav--light. */
  .site-nav__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 16px;
    background: rgba(10, 10, 10, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity .4s ease, background-color .3s ease;
  }
  .site-nav--scrolled .site-nav__bar::before { opacity: 1; }
  .site-nav--light .site-nav__bar::before { background: rgba(249, 247, 244, 0.72); }
  @supports not (backdrop-filter: blur(1px)) {
    .site-nav__bar::before { background: rgba(10, 10, 10, 0.92); }
    .site-nav--light .site-nav__bar::before { background: rgba(249, 247, 244, 0.95); }
  }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .logobar-section {
    padding: 24px 0;
    border-bottom: 0;
  }
  .logobar-section .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  .logobar-logos { margin-top: 16px; gap: 0; }
  .logobar-link {
    margin-left: 0;
    margin-top: 20px;
    font-size: 0.95rem;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    grid-column: 2;
    justify-self: end;
    min-width: 44px; min-height: 44px;
    /* No right padding so the hamburger's right edge lands on the same 24px
       gutter as the page content / logo on the left. */
    padding: 0 0 0 8px;
    background: transparent;
    border: 0;
    color: var(--ink-near-on-dark);
    cursor: pointer;
    position: relative;
  }
  .nav-toggle__label {
    /* Replicates .eyebrow without its line-height: 1.4 which breaks vertical
       centering in this flex row. Do NOT replace with class="eyebrow" — the
       line-height regression will return. */
    font: 500 var(--text-eyebrow)/1 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
  }
  .nav-toggle__icon {
    display: block;
    position: relative;
    width: 18px; height: 14px;
  }
  .nav-toggle__icon::before,
  .nav-toggle__icon::after,
  .nav-toggle__icon > span {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 1.5px;
    background: currentColor;
    display: block;
  }
  .nav-toggle__icon::before { top: 0; }
  .nav-toggle__icon > span  { top: 50%; transform: translateY(-50%); }
  .nav-toggle__icon::after  { top: 100%; transform: translateY(-100%); }

  /* Pre-emptive contrast: trigger sits over the hero video at rest. Shadow
     disappears once the panel is open (cream background, no longer needed). */
  body:not(.is-nav-open) .nav-toggle__label {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  body:not(.is-nav-open) .nav-toggle__icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  }

  /* Open state: lift trigger above the panel and recolor for cream backdrop */
  body.is-nav-open .nav-toggle { z-index: 70; color: var(--ink); }
  body.is-nav-open .nav-toggle__label { display: none; }

  /* Full-screen takeover panel */
  .mobile-nav-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: var(--cream);
    z-index: 50;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 80px var(--gutter-mobile) calc(32px + env(safe-area-inset-bottom));
    transform: translateY(-100%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-panel.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Decorative logo inside the panel — matches the closed-state header position/metrics.
     The real header .nav-logo gets covered by the panel; this copy takes over visually. */
  .mobile-nav-panel__logo {
    position: absolute;
    top: 22px;
    left: var(--gutter-mobile);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
  }

  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .mobile-nav-list a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-display-sm);
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-decoration: none;
    display: block;
  }

  .mobile-nav-rule {
    border: 0;
    height: 1px;
    background: var(--rule-on-light);
    margin: 40px 0;
  }

  .mobile-nav-contact {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body-sm);
    line-height: 1.5;
    color: var(--ink-muted-on-light);
  }
  .mobile-nav-contact a { color: inherit; text-decoration: none; }

  .mobile-nav-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
  }

  /* Burger-to-X morph — state applies regardless of motion preference;
     only the transition (in the no-preference block below) is gated. */
  body.is-nav-open .nav-toggle__icon::before { top: 50%; transform: rotate(45deg); }
  body.is-nav-open .nav-toggle__icon::after  { top: 50%; transform: rotate(-45deg); }
  body.is-nav-open .nav-toggle__icon > span  { opacity: 0; }

  /* Hero: nav lives in the grid now, so the old 120px top-pad created a dead band above the nav. Snap to scale (40px) for nav breathing room without the empty zone. */
  .hero { padding: 40px 0 0; }
  .hero-lead { font-size: 1.05rem; }
  .statusquo-section { padding: var(--space-section-sm) var(--gutter-mobile); }
  .stats-stack { grid-template-columns: 1fr; row-gap: 40px; column-gap: 0; margin-top: 32px; }
  .stats-stack > :last-child { justify-self: start; }
  .stat-number { font-size: 80px; letter-spacing: -1px; }
  .stat-number .unit, .stat-number .plus { font-size: 28px; }
  .stat-caption { max-width: none; }
  .stats-body { padding: var(--space-section-sm) 0; }
  /* Phone: tighten section rhythm, keep narrative order (intro → video → outcomes). */
  .gap-section { padding: var(--space-section-sm) var(--gutter-mobile); }
  .gap-intro h2 { line-height: 1.04; }
  .gap-lead { font-size: var(--text-body); margin-top: 20px; }
  .gap-media { margin-top: 40px; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
  .gap-outcomes { margin-top: 48px; grid-template-columns: 1fr; gap: 32px; }
  .gap-outcome-icon-frame { margin-bottom: 24px; }
  .gap-outcome-title { font-size: 20px; }
  .cta-section { padding: var(--space-section-sm) 0; }
  .closing-band { height: 160px; }
  .site-footer .container { padding-top: 64px; padding-bottom: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .footer-positioning { grid-column: auto; max-width: none; }
  .footer-wordmark-display {
    font-size: 26vw;
    letter-spacing: -0.05em;
    margin: 8px 0 48px;
  }
  .footer-baseline { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Mobile nav panel — motion-allowed users get the slide, item stagger,
   and burger-to-X tween. Reduced-motion users skip this entire block and
   the panel snaps open/closed with no transition. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mobile-nav-panel {
    transition: transform 220ms ease-in;
  }
  .mobile-nav-panel.is-open {
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Panel children share the same blur-fade-up reveal the homepage uses on
     scroll (.reveal-blur, see lines 1500–1521): filter blur(12px) + opacity 0
     + translateY(8%), released to defaults with --reveal-ease over
     --reveal-duration. Close direction stays snappy at 220ms ease-in so the
     menu dismisses fast; only the open direction gets the cinematic curve. */
  .mobile-nav-panel__logo,
  .mobile-nav-panel .mobile-nav-list li,
  .mobile-nav-panel .mobile-nav-rule,
  .mobile-nav-panel .mobile-nav-contact,
  .mobile-nav-panel .mobile-nav-cta {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(8%);
    transition: opacity 220ms ease-in, filter 220ms ease-in, transform 220ms ease-in;
    will-change: opacity, transform, filter;
  }
  .mobile-nav-panel.is-open .mobile-nav-panel__logo,
  .mobile-nav-panel.is-open .mobile-nav-list li,
  .mobile-nav-panel.is-open .mobile-nav-rule,
  .mobile-nav-panel.is-open .mobile-nav-contact,
  .mobile-nav-panel.is-open .mobile-nav-cta {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition-duration: var(--reveal-duration);
    transition-timing-function: var(--reveal-ease);
  }
  /* Staggered entrance — logo arrives first, list cascades down, then the
     supporting elements. Spacing tuned for the 1.2s curve so each item is
     individually perceptible without the cascade feeling sluggish. */
  .mobile-nav-panel.is-open .mobile-nav-panel__logo { transition-delay: 100ms; }
  .mobile-nav-panel.is-open .mobile-nav-list li     { transition-delay: calc(180ms + var(--i) * 80ms); }
  .mobile-nav-panel.is-open .mobile-nav-rule        { transition-delay: 540ms; }
  .mobile-nav-panel.is-open .mobile-nav-contact     { transition-delay: 600ms; }
  .mobile-nav-panel.is-open .mobile-nav-cta         { transition-delay: 680ms; }
  .nav-toggle__icon::before,
  .nav-toggle__icon::after,
  .nav-toggle__icon > span {
    transition: transform 200ms ease-out, opacity 200ms ease-out, top 200ms ease-out;
  }
}

@media (max-width: 375px) {
  .hero { padding: 32px 0 0; }
  .hero-ctas { gap: 10px; }
  .btn { padding: 12px 22px; font-size: var(--text-body-sm); }
}

/* Subtle entry */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.9s ease-out forwards;
}
.fade-in.delay-1 { animation-delay: 0.1s; }
.fade-in.delay-2 { animation-delay: 0.22s; }
.fade-in.delay-3 { animation-delay: 0.34s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; animation: none; }
  .hero-video { display: none; }
  .hero { background: var(--ink); }
  .statusquo-eyebrow,
  .statusquo-body,
  .statusquo-credit { opacity: 1; transform: none; transition: none; }
  .statusquo-body .reveal-word { color: rgba(245, 243, 238, 1); transition: none; }
  .stat-item-1, .stat-item-2, .stat-item-3 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Content reveal on enter ---------- */
.reveal-blur,
.reveal-up,
.reveal-fade,
.reveal-scale {
  transition-property: opacity, transform, filter;
  transition-duration: var(--reveal-duration);
  transition-timing-function: var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.reveal-blur  { opacity: 0; filter: blur(12px); transform: translateY(8%); }
.reveal-up    { opacity: 0; transform: translateY(16px); }
.reveal-fade  { opacity: 0; }
.reveal-scale { opacity: 0; transform: scale(0.96); }
.reveal-blur.in-view,
.reveal-up.in-view,
.reveal-fade.in-view,
.reveal-scale.in-view {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-blur,
  .reveal-up,
  .reveal-fade,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ---- Image / video swipe-up reveal (global) ----
   A framed media element masks its image/video with a clip-path that opens
   from the bottom edge upward (a rising curtain), while the media inside
   starts slightly lower and scaled-in, then settles — so it feels like it
   swipes up into frame. Driven by the same .in-view toggle as the other
   reveals. Ported from the Point of View page so the homepage and How It
   Works share the same load treatment. Apply .reveal-wipe to the framing
   element (figure / media frame), not the <img>/<video> itself. */
.reveal-wipe { overflow: hidden; }
.reveal-wipe img,
.reveal-wipe video {
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px) scale(1.06);
  transition: clip-path 1.1s var(--reveal-ease), transform 1.1s var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path, transform;
}
.reveal-wipe.in-view img,
.reveal-wipe.in-view video {
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-wipe img,
  .reveal-wipe video {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   TYPE-AS-EVENT — POV-direction treatment ported to the homepage.
   Scale-contrast hero + key-section headlines (oversized ABC Arizona
   Flare, per-line kinetic stagger, ice-blue accent / muted second
   line). Strict tokens only.
   ============================================================ */

/* --- Hero: scale-contrast stacked title --- */
.hero h1.home-hero-title {
  max-width: 18ch;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 300;
  /* Loudest type moment on the page — larger + tighter than the default ramp. */
  font-size: clamp(40px, 6.4vw, 100px) !important;
  line-height: 0.99;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.home-hero-line { display: block; }
.home-hero-line--accent { color: inherit; }

/* --- "Close the gap" key section: scale-contrast with muted second line.
   .gap-intro h2 normally clips an ink gradient to text (transparent fill);
   we keep that look on the first line and give the muted line a solid faint
   fill so the scale contrast reads. Explicit text-fill overrides the parent
   transparent fill the spans would otherwise inherit. */
.gap-intro h2.home-gap-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  background: none;
  -webkit-text-fill-color: currentColor;
          text-fill-color: currentColor;
  color: var(--ink);
}
.home-gap-line { display: block; color: var(--ink); -webkit-text-fill-color: currentColor; }
.home-gap-line--muted { color: var(--ink); -webkit-text-fill-color: currentColor; }

/* --- Per-line kinetic stagger (rise + un-blur in sequence on enter) --- */
.reveal-stagger .home-hero-line,
.reveal-stagger .home-gap-line {
  display: block;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 0.9s var(--reveal-ease), transform 0.9s var(--reveal-ease), filter 0.9s var(--reveal-ease);
}
.reveal-stagger .home-hero-line:nth-child(1),
.reveal-stagger .home-gap-line:nth-child(1) { transition-delay: 60ms; }
.reveal-stagger .home-hero-line:nth-child(2),
.reveal-stagger .home-gap-line:nth-child(2) { transition-delay: 180ms; }
.reveal-stagger .home-hero-line:nth-child(3) { transition-delay: 300ms; }
.reveal-stagger .home-hero-line:nth-child(4) { transition-delay: 420ms; }
.reveal-stagger.in-view .home-hero-line,
.reveal-stagger.in-view .home-gap-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger .home-hero-line,
  .reveal-stagger .home-gap-line {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

/* Mobile: tighten the hero/section scale so lines never crowd the viewport. */
@media (max-width: 768px) {
  .hero h1.home-hero-title { font-size: clamp(34px, 11vw, 52px) !important; line-height: 1.0; max-width: none; }
  .home-gap-title { font-size: clamp(34px, 11vw, 52px); }
}

/* ============================================================
   MEDIA PLACEHOLDER — intentional grey frame for not-yet-supplied
   imagery. Hairline outline, low-alpha ink fill, centered caption
   label ("Image — Sarah, Director, Partnerships"). Swap by replacing
   the inner label with an <img>/<video>. No box-shadow (DESIGN.md).
   ============================================================ */
.media-placeholder {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-on-light);
  border-radius: var(--radius-sm);
  background: rgba(11, 11, 12, 0.05);
  overflow: hidden;
}
.media-placeholder[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.media-placeholder[data-ratio="3:4"]  { aspect-ratio: 3 / 4; }
.media-placeholder[data-ratio="4:5"]  { aspect-ratio: 4 / 5; }
.media-placeholder[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.media-placeholder[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.media-placeholder[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.media-placeholder__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint-on-light);
  text-align: center;
  padding: 0 24px;
}
/* Dark-surface variant (About leadership section). */
.media-placeholder--on-dark {
  border-color: var(--rule-on-dark);
  background: rgba(255, 255, 255, 0.06);
}
.media-placeholder--on-dark .media-placeholder__label { color: var(--ink-faint-on-dark); }

/* ============================================================
   REVEAL-DELAY RHYTHM — start 80ms, step 60ms. Prefer these
   utility classes over inline style="--reveal-delay: …" so the
   stagger cadence stays consistent across pages (DESIGN.md
   "Motion & rhythm"). They only set the custom property; the
   reveal-* classes consume it as before.
   ============================================================ */
.rd-1 { --reveal-delay: 80ms; }
.rd-2 { --reveal-delay: 140ms; }
.rd-3 { --reveal-delay: 200ms; }
.rd-4 { --reveal-delay: 260ms; }
.rd-5 { --reveal-delay: 320ms; }
.rd-6 { --reveal-delay: 380ms; }
.rd-7 { --reveal-delay: 440ms; }
.rd-8 { --reveal-delay: 500ms; }

/* Placeholder frames share the media entrance: the same rising-curtain
   wipe as .reveal-wipe img/video. As with img/video, .reveal-wipe goes on
   the FRAMING element and the placeholder inside is what clips — never
   clip the observed element itself: a fully-inset clip-path collapses its
   intersection rect and the IntersectionObserver can fail to fire. When
   real media lands, swap the placeholder for an <img>/<video> inside the
   same frame and the entrance is unchanged. */
.reveal-wipe .media-placeholder {
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px) scale(1.02);
  transition: clip-path 1.1s var(--reveal-ease), transform 1.1s var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: clip-path, transform;
}
.reveal-wipe.in-view .media-placeholder {
  clip-path: inset(0 0 0 0);
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-wipe .media-placeholder {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   HAIRLINE LIST — the numbered editorial list used across the
   site (DESIGN.md): 44px number column (32px mobile), 24px row
   padding, hairline top rules + final bottom rule, Inter 500
   faint tabular numerals. Rule color can be retinted per section
   via --hairline-rule. Item typography (h3/p) is set by the
   page-scoped class on the same <ol>. --serif modifier: oversized
   display statements (the POV "future" scale).
   ============================================================ */
.hairline-list { list-style: none; margin: 0; padding: 0; }
.hairline-list__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--hairline-rule, var(--rule-on-light));
}
.hairline-list__item:last-child { border-bottom: 1px solid var(--hairline-rule, var(--rule-on-light)); }
.hairline-list__n {
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint-on-light);
}
.hairline-list__text { min-width: 0; }
@media (max-width: 768px) {
  .hairline-list__item { grid-template-columns: 32px 1fr; gap: 16px; }
}

/* Serif statements variant — wider gutter, taller rows, display type. */
.hairline-list--serif .hairline-list__item {
  grid-template-columns: 64px 1fr;
  gap: 32px;
  padding: 32px 0;
}
.hairline-list--serif .hairline-list__item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 30ch;
  text-wrap: balance;
}
@media (max-width: 768px) {
  .hairline-list--serif .hairline-list__item { grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; }
  .hairline-list--serif .hairline-list__item h3 { font-size: 22px; }
}