/* ==========================================================================
   COMMBLUE — main.css
   Design-system tokens + static site styles. No build step, no framework.
   Source of truth: the token files under _ds/commblue-design-system-.../tokens/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted woff2, latin subset, font-display: swap
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* colours ------------------------------------------------------------- */
  --void: #070709;
  --void-lift: #0b0c11;
  --depth: #10131c;
  --depth-2: #161a26;
  --hairline: #1c2230;
  --hairline-hi: #2a3345;

  --electric-500: #0057ff;
  --electric-400: #2e7bff;
  --electric-600: #0043c7;
  --electric-glow: rgba(0, 87, 255, 0.34);
  --electric-wash: rgba(0, 87, 255, 0.1);

  --text-hi: #edeff5;
  --text-mid: #a8b0bf;
  /* Floor for secondary copy and mono captions on Void. Was #7E8797 (5.56:1);
     lifted so no informational text sits below ~8:1 on the dark theme. */
  --text-lo: #9aa4b2;
  /* The serif whisper reads at a light weight and a shallow angle, so it gets
     its own, brighter value rather than borrowing --text-mid. */
  --text-serif: #c9cfda;
  --text-dim: #4e5666;

  --surface-page: var(--void);
  --surface-band: var(--void-lift);
  --surface-panel: var(--depth);
  --surface-panel-nested: var(--depth-2);

  --text-on-signal: #ffffff;
  /* Electric #0057FF on void is 3.65:1 — AA for large text only.
     Small mono marks use Electric 400 (#2E7BFF, 5.17:1) so every text
     mark in the system clears WCAG AA. */
  --signal-text: var(--electric-400);

  --border-subtle: var(--hairline);
  --border-strong: var(--hairline-hi);
  --grid-line: rgba(237, 239, 245, 0.055);
  --scanline: rgba(237, 239, 245, 0.045);
  --redaction: var(--electric-500);
  --focus-ring: 0 0 0 2px var(--void), 0 0 0 4px var(--electric-400);
  --grain-opacity: 0.05;

  /* type ---------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-display-1: clamp(40px, 8.5vw, 132px);
  --fs-display-2: clamp(32px, 5.2vw, 78px);
  --fs-display-3: clamp(26px, 3.2vw, 46px);
  --fs-heading: clamp(22px, 2.2vw, 26px);
  --fs-subheading: 20px;
  --lh-display: 0.94;
  --lh-display-loose: 1.06;
  --ls-display: -0.035em;
  --ls-display-tight: -0.055em;

  --fs-body-lg: 19px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --lh-body: 1.62;
  --lh-body-tight: 1.4;

  --fs-eyebrow: 11px;
  --fs-mono: 13px;
  --fs-mono-sm: 11px;
  --fs-mono-xs: 10px;
  --ls-mono: 0.14em;
  --ls-mono-wide: 0.22em;
  --lh-mono: 1.4;

  --fs-serif-lg: clamp(26px, 2.6vw, 40px);
  --fs-serif: clamp(19px, 2vw, 22px);
  --ls-serif: -0.01em;
  --lh-serif: 1.22;

  --fs-metric: clamp(40px, 4.6vw, 64px);
  --fs-metric-sm: 32px;
  --ls-metric: -0.05em;

  /* space --------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  /* Section rhythm, tightened. At 1440 this went from 158px to 104px per
     edge; across ~18 section edges that is most of a screen back. */
  --section-y: clamp(64px, 7vw, 104px);
  --section-y-tight: clamp(44px, 4.6vw, 72px);
  --gutter: clamp(20px, 4.5vw, 64px);
  --container: 1320px;
  --nav-h: 64px;

  /* lines & motion ------------------------------------------------------ */
  --radius-sm: 2px;
  --rule: 1px solid var(--border-subtle);
  --grid-size: 88px;
  --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;
  --dur-reveal: 1100ms;
  --motion-transition: color var(--dur-fast) var(--ease-heavy),
    background-color var(--dur-fast) var(--ease-heavy),
    border-color var(--dur-fast) var(--ease-heavy),
    box-shadow var(--dur-fast) var(--ease-heavy),
    opacity var(--dur-fast) var(--ease-heavy);
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--surface-page);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* body already hides its own overflow; html needs it too or a few stray
     pixels from the scrollable nav row still let the page pan sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface-page);
  color: var(--text-lo);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  cursor: crosshair;
}

/* Film grain — 5%, fixed, non-interactive, SVG fractal noise (no bitmap). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--electric-500);
  color: #fff;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--electric-500);
  color: var(--text-on-signal);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 12px;
}

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

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Every anchor target clears the sticky bar, not just <section>. #deliverables
   is a <ul>, #faq and #cierre are <div>s, and the service cards are <li>s —
   without this they land under the header. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.section {
  position: relative;
  padding: var(--section-y) 0;
}
.section--tight {
  padding: var(--section-y-tight) 0;
}
.section--band {
  background: var(--surface-band);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.section--close {
  padding: var(--section-y-tight) 0 var(--section-y);
}

.grid-bg {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}

/* THE DEAD PIXEL — exactly one per page, slightly wrong. */
.deadpixel {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--electric-500);
  z-index: 5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. TYPE VOICES
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-wide);
  color: var(--text-lo);
  line-height: var(--lh-mono);
  margin-bottom: var(--space-7);
}
.eyebrow__num {
  color: var(--signal-text);
  flex: 0 0 auto;
}
.eyebrow__rule {
  width: var(--space-6);
  height: 1px;
  background: var(--border-subtle);
  flex: 0 0 auto;
}
.eyebrow--tight {
  margin-bottom: var(--space-5);
}

/* THE MACHINE — mono provenance / meta lines */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-wide);
  color: var(--text-lo);
  line-height: var(--lh-mono);
}

/* Wordmarks keep their own casing inside uppercased mono lines. "menzIA" is
   spelled that way everywhere, including where text-transform would shout it. */
.nocase {
  text-transform: none;
}

/* THE HUMAN — serif italic asides, off-grid */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--ls-serif);
  color: var(--text-serif);
  text-transform: none;
  max-width: 26ch;
}
.serif--left {
  margin-left: -26px;
  transform: rotate(-1deg);
  margin-top: var(--space-6);
}
.serif--right {
  margin-right: -26px;
  margin-left: auto;
  text-align: right;
  transform: rotate(0.8deg);
  max-width: 30ch;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.lead--lo {
  color: var(--text-lo);
}

.h-display-1 {
  font-size: var(--fs-display-1);
  letter-spacing: var(--ls-display-tight);
  line-height: var(--lh-display);
}
.h-display-2 {
  font-size: var(--fs-display-2);
  letter-spacing: var(--ls-display-tight);
  line-height: var(--lh-display);
}
.h-display-3 {
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display-tight);
  line-height: var(--lh-display);
}

/* --------------------------------------------------------------------------
   6. REDACTION BAR
   Progressive enhancement: with no JS the word simply reads. The bar and its
   left-to-right wipe only exist once .js is on <html>.
   -------------------------------------------------------------------------- */
.redaction {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.redaction__word {
  color: var(--electric-500);
}
.js .redaction__word {
  color: transparent;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-heavy);
}
.js .redaction::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 0.1em;
  bottom: 0.12em;
  background: var(--redaction);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--dur-reveal) var(--ease-heavy);
}
.js .redaction.is-revealed .redaction__word {
  color: var(--electric-500);
  opacity: 1;
  transition-delay: 180ms;
}
.js .redaction.is-revealed::after {
  transform: scaleX(0);
}

/* --------------------------------------------------------------------------
   7. LINKS & BUTTONS
   -------------------------------------------------------------------------- */
a {
  color: var(--text-hi);
  cursor: crosshair;
  transition: var(--motion-transition);
}

.link-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border-strong);
  padding: 2px 4px 3px;
}
.link-mono:hover,
.link-mono:focus-visible {
  color: var(--text-on-signal);
  background: var(--electric-500);
  border-bottom-color: var(--electric-500);
  box-shadow: 0 0 0 3px var(--electric-500);
}
.link-mono:focus-visible {
  box-shadow: var(--focus-ring);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--electric-500);
  color: var(--text-on-signal);
  padding: 14px 22px;
  min-height: 46px;
  cursor: crosshair;
  transition: var(--motion-transition), transform var(--dur-fast) var(--ease-heavy);
}
.btn:hover {
  background: var(--electric-400);
  box-shadow: 0 0 24px var(--electric-glow);
}
.btn:active {
  background: var(--electric-600);
  transform: translateY(1px);
}
.btn--lg {
  font-size: var(--fs-mono);
  padding: 18px 30px;
  min-height: 56px;
}
.btn--sm {
  font-size: var(--fs-mono-sm);
  padding: 9px 16px;
  min-height: 36px;
}
.btn--outline {
  background: transparent;
  color: var(--text-hi);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  background: var(--electric-500);
  border-color: var(--electric-500);
  color: var(--text-on-signal);
}
.btn--block {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   8. NAV
   -------------------------------------------------------------------------- */
/* Fully opaque, no blur. Display type at 158px scrolling under a translucent
   bar read as a rendering fault, not as depth. The bar also gets out of the
   way: main.js adds .nav--hidden once the visitor is heading down the page
   and takes it off at the first upward scroll and at the top. With no JS the
   class never appears and this is a plain opaque sticky header. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface-page);
  border-bottom: var(--rule);
  transition: transform 200ms var(--ease-heavy);
  will-change: transform;
}
.nav--hidden {
  transform: translateY(-100%);
}
.nav__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  color: var(--text-lo);
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  padding: 2px 6px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-wide);
  white-space: nowrap;
  text-decoration: none;
  padding: 6px 6px;
  color: var(--text-lo);
}
.nav__links a:hover,
.nav__links a:focus-visible {
  background: var(--electric-500);
  color: var(--text-on-signal);
}
.nav__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.lang {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-lo);
  padding: 6px 2px;
}
.lang:hover {
  color: var(--text-hi);
}
.lang__on {
  color: var(--text-hi);
}
.lang__sep {
  margin: 0 6px;
  color: var(--text-dim);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text-hi);
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  white-space: nowrap;
  user-select: none;
  text-transform: none;
}
.wordmark__blue {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--electric-500);
  padding: 0.14em 0.16em 0.2em;
  overflow: hidden;
}
.wordmark__blue > span {
  position: relative;
  z-index: 2;
  color: #fff;
  transition: color var(--dur-base) var(--ease-heavy);
}
.wordmark__blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--void);
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-heavy);
  z-index: 1;
}
.nav__brand:hover .wordmark__blue::before,
.nav__brand:focus-visible .wordmark__blue::before {
  transform: translateX(0);
}
.nav__brand:hover .wordmark__blue > span,
.nav__brand:focus-visible .wordmark__blue > span {
  color: var(--electric-400);
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--section-y) 0 var(--space-9);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: var(--space-9);
  align-items: end;
}
.hero__col {
  min-width: 0;
}
.hero__h1 {
  max-width: 16ch;
}
.hero__h1--long {
  font-size: clamp(34px, 6.4vw, 96px);
  max-width: 18ch;
}
.hero__sub {
  margin-top: var(--space-6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-lo);
  max-width: 52ch;
}
.hero__meta {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   10. TERMINAL QUERY PANEL
   -------------------------------------------------------------------------- */
.terminal {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  animation: cb-flicker 7.5s linear infinite;
  min-width: 0;
}
.terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--scanline) 0 1px,
    transparent 1px 3px
  );
}
.terminal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--text-lo);
}
.terminal__dot {
  width: 6px;
  height: 6px;
  background: var(--electric-500);
  flex: 0 0 auto;
}
.terminal__body {
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 2;
  color: var(--text-lo);
  position: relative;
}
.terminal__line {
  display: flex;
  gap: 8px;
  white-space: pre-wrap;
}
.terminal__line--signal {
  color: var(--signal-text);
}
.terminal__prompt {
  color: var(--signal-text);
  flex: 0 0 auto;
}
.caret {
  display: inline-block;
  width: 0.52em;
  height: 1.02em;
  background: var(--electric-500);
  vertical-align: -0.12em;
  margin-left: 6px;
  animation: cb-blink 1.05s steps(1, end) infinite;
}

/* --------------------------------------------------------------------------
   11. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-lo);
}
.marquee__inner {
  display: flex;
  width: max-content;
  animation: cb-marquee var(--marquee-speed, 52s) linear infinite;
}
.marquee--reverse .marquee__inner {
  animation-direction: reverse;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: var(--space-5);
  flex: 0 0 auto;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
}
.marquee__track span::after {
  content: "·";
  color: var(--text-lo);
}
.marquee__track .is-signal {
  color: var(--signal-text);
}

/* --------------------------------------------------------------------------
   12. METRICS / STAT STRIP
   -------------------------------------------------------------------------- */
.statstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.statstrip > * {
  background: var(--surface-page);
  padding: var(--space-7) var(--space-6);
}
.section--band .statstrip > * {
  background: var(--surface-band);
}
.metric__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-metric);
  letter-spacing: var(--ls-metric);
  line-height: 0.9;
  color: var(--text-hi);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.metric__value--sm {
  font-size: var(--fs-metric-sm);
}
.metric__unit {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--signal-text);
  letter-spacing: 0;
}
.metric__label {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
  line-height: var(--lh-body-tight);
  max-width: 32ch;
}
.metric__src {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-wide);
  color: var(--text-lo);
}

/* --------------------------------------------------------------------------
   12b. AI CHAT — the interface everybody already recognises
   Deliberately NOT the terminal: no scanlines, no CRT flicker, no crosshair
   cursor inside it. The familiarity is the whole effect, so this is the one
   place the 2px-radius rule is set aside. Generic on purpose — no product
   name, no logo, no wordmark belonging to anyone.
   Token-driven, so the Education pages get the light version for free.
   -------------------------------------------------------------------------- */
.chat {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  box-shadow: var(--chat-shadow, none);
}
.chat__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.chat__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}
.chat__thread {
  padding: var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-5);
  font-family: var(--font-body);
}
.chat__msg--user {
  justify-self: end;
  /* Fluid, and never wider than a comfortable measure. Long Spanish queries
     wrap instead of running at the bubble edge. */
  max-width: min(84%, 44ch);
  background: var(--surface-panel-nested);
  color: var(--text-hi);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 18px;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}
.chat__msg--bot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.chat__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: var(--signal-text);
}
.chat__avatar svg {
  width: 14px;
  height: 14px;
  display: block;
}
.chat__body {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}
.chat__line {
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 62ch;
}
/* Three dots. Purely ornamental — the answer is already in the DOM. */
.chat__typing {
  display: none;
  gap: 5px;
  align-items: center;
  height: 14px;
}
.gsap-on .chat__typing,
.edu-anim .chat__typing {
  display: inline-flex;
}
.chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-lo);
  animation: cb-dots 1.2s ease-in-out infinite;
}
.chat__typing i:nth-child(2) {
  animation-delay: 0.16s;
}
.chat__typing i:nth-child(3) {
  animation-delay: 0.32s;
}
.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-2);
}
.chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.08em;
  color: var(--text-lo);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 5px 11px 5px 6px;
  transition: var(--motion-transition);
}
.chat__chip b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-panel-nested);
  color: var(--signal-text);
  font-weight: 500;
  font-size: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.chat__chip.is-on {
  color: var(--text-hi);
  border-color: var(--electric-500);
}
.chat__chip.is-on b {
  background: var(--electric-500);
  color: var(--text-on-signal);
}
.chat__input {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 var(--space-5) var(--space-5);
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-lo);
  font-size: var(--fs-body-sm);
}
.chat__send {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--electric-500);
  color: var(--text-on-signal);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.chat__send svg {
  width: 15px;
  height: 15px;
  display: block;
}
.chat__sim {
  margin-top: var(--space-4);
}
.chat--compact .chat__thread {
  padding: var(--space-5);
  gap: var(--space-4);
}

@keyframes cb-dots {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   13. STRUCTURAL BRACKET
   -------------------------------------------------------------------------- */
.bracket {
  position: relative;
  padding: clamp(32px, 5vw, 72px) calc(clamp(24px, 4vw, 64px) + clamp(32px, 5vw, 72px));
}
.bracket__arm {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 4vw, 64px);
  border-top: 2px solid var(--electric-500);
  border-bottom: 2px solid var(--electric-500);
  pointer-events: none;
}
.bracket__arm--l {
  left: 0;
  border-left: 2px solid var(--electric-500);
}
.bracket__arm--r {
  right: 0;
  border-right: 2px solid var(--electric-500);
}

/* --------------------------------------------------------------------------
   14. FRAMEWORK STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.steps > li {
  padding: var(--space-7) var(--space-5);
  border-left: var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.steps > li:first-child {
  border-left: none;
}
.step__rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  color: var(--signal-text);
}
.step__line {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.step__node {
  width: 6px;
  height: 6px;
  background: var(--electric-500);
  flex: 0 0 auto;
}
.step h3 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-display-loose);
}
.step p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-lo);
}
.step__out {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   15. PANELS: service cards, pricing, principles
   -------------------------------------------------------------------------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  align-items: stretch;
}
.panel-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  position: relative;
  background: var(--surface-page);
  border-radius: var(--radius-sm);
  padding: var(--space-7) var(--space-6);
  transition: var(--motion-transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
}
.section--band .card {
  background: var(--surface-band);
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  background: var(--electric-500);
  transition: width var(--dur-base) var(--ease-heavy);
}
.card:hover {
  background: var(--surface-panel);
}
.card:hover::before {
  width: 100%;
}
.card__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  color: var(--signal-text);
}
.card h3 {
  font-size: var(--fs-heading);
  line-height: var(--lh-display-loose);
  max-width: 20ch;
}
.card p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-lo);
}
.card__meta {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: var(--rule);
}

.bullets {
  display: grid;
  gap: var(--space-2);
}
.bullets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
  color: var(--text-mid);
  line-height: 1.55;
}
/* Was content: "[" counter(list-item) "]" and it rendered "[0]" on every row.
   The `list-item` counter is only incremented by boxes whose display IS
   `list-item`; the rule above sets display:grid on the same element, which
   drops that box type, so the counter never advanced and every item resolved
   to 0. Measured A/B on the rendered DOM: with display:grid all twelve probe
   items painted a single glyph, with display:list-item the counter ran.
   The fix removes the dependency altogether — these are "what's included"
   rows, so they take [+], the deliberate mirror of the [–] in "what we
   don't do". Only Principles still carries real ordinals, and those are
   literal text in the HTML. */
.bullets li::before {
  content: "[+]";
  color: var(--signal-text);
}

.price {
  position: relative;
  background: var(--surface-page);
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.price--lead {
  background: var(--surface-panel);
  outline-color: var(--electric-500);
}
.price__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  line-height: 1.1;
  background: var(--electric-500);
  color: var(--text-on-signal);
  border: 1px solid var(--electric-500);
}
.price h3 {
  font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display);
  max-width: 16ch;
}
.price__from {
  margin-bottom: 8px;
}
.price__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-metric);
  letter-spacing: var(--ls-metric);
  color: var(--text-hi);
  line-height: 0.9;
}
.price__unit {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--signal-text);
  letter-spacing: var(--ls-mono);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.price__desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-lo);
}
.price .bullets {
  padding-top: var(--space-5);
  border-top: var(--rule);
}
.price__cta {
  margin-top: auto;
  padding-top: var(--space-6);
}
.price__foot {
  margin-top: var(--space-5);
}

/* The named-specialist line. Lives in the #geo card and in the retainer
   panel, so it has to read the same in a flex card and under a bullet list. */
.specialist {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-lo);
}
.specialist strong {
  color: var(--text-hi);
  font-weight: 600;
}

.principle {
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
  padding: clamp(24px, 3vw, 40px);
}
.principle__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  color: var(--signal-text);
  margin-bottom: var(--space-4);
}
.principle p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   16. FAQ — native <details>, readable with JS off
   -------------------------------------------------------------------------- */
.faq {
  border-top: var(--rule);
}
.faq__item {
  border-bottom: var(--rule);
}
.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  cursor: crosshair;
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--ls-mono-wide);
  color: var(--signal-text);
  flex: 0 0 auto;
}
.faq__q h3 {
  flex: 1;
  font-weight: 500;
  font-size: var(--fs-subheading);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-loose);
  color: var(--text-mid);
  transition: color var(--dur-fast) var(--ease-heavy);
}
.faq__item[open] .faq__q h3,
.faq__q:hover h3 {
  color: var(--text-hi);
}
.faq__plus {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--signal-text);
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-heavy);
}
.faq__item[open] .faq__plus {
  transform: rotate(45deg);
}
.faq__a {
  padding: 0 0 var(--space-6) calc(var(--space-5) + 24px);
  max-width: 66ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-lo);
}

/* --------------------------------------------------------------------------
   17. DASHBOARD (education)
   -------------------------------------------------------------------------- */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-9);
  align-items: center;
}
.dash__panel {
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
  background: var(--surface-panel);
  padding: clamp(20px, 2.5vw, 32px);
}
.dash__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
}
.dash__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.dash__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6);
}
.dash__rows {
  margin-top: var(--space-6);
}
.dash__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.08em;
  color: var(--text-lo);
}
.dash__row > span {
  text-transform: lowercase;
}
.dash__row b {
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 400;
}
.dash__row b.is-hi {
  color: var(--signal-text);
}
.dash__row b.is-mid {
  color: var(--text-mid);
}

.ring {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ring__wrap {
  position: relative;
  width: 160px;
  height: 160px;
}
.ring svg {
  display: block;
  transform: rotate(-90deg);
}
.ring__track {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}
.ring__arc {
  fill: none;
  stroke: var(--electric-500);
  stroke-width: 3;
  stroke-linecap: butt;
  animation: cb-ring var(--dur-slow) var(--ease-heavy) both;
}
.ring__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: var(--ls-metric);
  color: var(--text-hi);
}
.ring__label {
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
  max-width: 24ch;
}

.plate {
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
  border-top: 2px solid var(--electric-500);
  background: var(--surface-panel);
  padding: clamp(24px, 3vw, 40px);
  margin-top: 1px;
}
.plate p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-hi);
  max-width: 40ch;
}

.scope-list {
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
  background: var(--surface-panel);
  padding: clamp(20px, 2.5vw, 32px);
}
.scope-list li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.scope-list li::before {
  content: "[ – ] ";
  color: var(--text-lo);
}
.scope-list p {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-mid);
}

/* --------------------------------------------------------------------------
   18. CLOSER
   -------------------------------------------------------------------------- */
.closer {
  margin-top: var(--section-y-tight);
  border-top: var(--rule);
  padding-top: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.closer h2 {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--surface-page);
  border-top: var(--rule);
  padding-top: var(--space-9);
  overflow: hidden;
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding-bottom: var(--space-9);
}
.footer__tagline {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-lo);
  max-width: 34ch;
}
.footer__locale {
  margin-top: var(--space-6);
}
.footer__col-t {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono-wide);
  color: var(--text-lo);
  margin-bottom: var(--space-5);
}
.footer__col ul {
  display: grid;
  gap: var(--space-4);
}
.footer__legal {
  border-top: var(--rule);
  padding: var(--space-5) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}
/* The whole wordmark, whole. Two earlier attempts cropped it — off the bottom
   edge, then off the sides — and both read as a rendering bug rather than as
   art direction. It is now one line on one baseline, never clipped in any
   direction, sized so it fills the container width and stops there.

   "commblue" in Space Grotesk 700 at -0.06em tracking measures ~3.70x its own
   font-size. The container is min(1320px, 100vw) minus two gutters, so
   min(24vw, 320px) lands just inside it from 360px up to 1920px and beyond.
   If the tracking or the family ever changes, re-measure that 3.70 ratio.

   KNOWN AUDIT FLAG — do not "fix" the colour on the dark theme.
   #39445C on Void is 2.07:1 and axe reports it as a colour-contrast failure.
   It is a false positive: the mark is aria-hidden, carries no information and
   duplicates the wordmark already in the nav, so WCAG 1.4.3 exempts it as
   pure decoration. On the light theme the mark keeps #252C3A, which lands at 13.28:1, and no
   tool complains. Documented in README.md under "Known audit flags". */
.footer__mark {
  max-width: var(--container);
  margin: var(--space-7) auto 0;
  padding: 0 var(--gutter) var(--space-6);
  pointer-events: none;
  user-select: none;
}
.footer__mark-text {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(24vw, 320px);
  letter-spacing: -0.06em;
  line-height: 1.06;
  white-space: nowrap;
  color: #39445c;
}
.footer__mark-text em {
  font-style: normal;
  color: var(--electric-500);
}

/* --------------------------------------------------------------------------
   20. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes cb-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes cb-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes cb-flicker {
  0%,
  96%,
  100% {
    opacity: 1;
  }
  97% {
    opacity: 0.82;
  }
  98% {
    opacity: 1;
  }
  99% {
    opacity: 0.9;
  }
}
@keyframes cb-ring {
  from {
    stroke-dashoffset: var(--ring-c);
  }
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .two-col,
  .dash {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps > li:nth-child(2n + 1) {
    border-left: none;
  }
  .steps > li:nth-child(n + 3) {
    border-top: var(--rule);
  }
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .serif--left,
  .serif--right {
    margin-left: 0;
    margin-right: 0;
  }
  .serif--right {
    margin-left: auto;
  }
}

@media (max-width: 860px) {
  /* A wrapped 3-row bar would eat a third of a phone viewport if it stuck. */
  .nav {
    position: static;
  }
  .nav__inner {
    gap: var(--space-4);
  }
  .nav__links {
    order: 3;
    flex-basis: 100%;
    gap: var(--space-2);
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .nav__end {
    gap: var(--space-4);
  }
  .panel-grid,
  .panel-grid--3,
  .panel-grid--services {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }
}

@media (max-width: 700px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps > li {
    border-left: none;
    border-top: none;
  }
  .steps > li + li {
    border-top: var(--rule);
  }
  .bracket {
    padding: var(--space-7) var(--space-6);
  }
  .btn {
    width: 100%;
    white-space: normal;
  }
  .nav__end .btn {
    width: auto;
  }
  .faq__a {
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION — decode, flicker, marquee, wipe all stand down
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .marquee__inner {
    animation: none !important;
    width: 100%;
  }
  .marquee {
    overflow-x: auto;
  }
  /* The auto-hide still works, it just snaps instead of sliding. */
  .nav {
    transition: none !important;
  }
  .js .redaction__word {
    color: var(--electric-500);
    opacity: 1;
  }
  .js .redaction::after {
    display: none;
  }
}