/* ── 00 FONTS ─────────────────────────────────────────────────────────
   Self-hosted rather than loaded from Google. Three reasons: it removes a
   third-party processor and a US transfer from the privacy story, it drops
   two DNS and TLS handshakes (fonts.googleapis.com and fonts.gstatic.com)
   from the critical path, and it lets the CSP lose two hosts.

   Only the latin and latin-ext subsets are shipped. The unicode-range on
   each rule means an English page fetches the four latin files, about
   188KB, and only reaches for latin-ext if a glyph actually needs it, which
   in practice means an accented name typed into the contact form.

   These declarations are Google's own, with the URLs pointed at
   assets/fonts. Weights that share a variable file point at the same file,
   so the browser downloads it once. Regenerate by refetching the css2 URL
   with a modern user agent if a family or weight changes. */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/audiowide-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/audiowide-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════
   CODEWINKS — TECHNICAL SPEC-SHEET DESIGN SYSTEM
   See docs/superpowers/specs/2026-08-06-spec-sheet-redesign-design.md

   01 TOKENS          06 SECTIONS        11 MOTION
   02 SUBSTRATE       07 CARDS           12 DEPTH
   03 PRIMITIVES      08 STATS           13 GROUNDS / IMAGERY
   04 NAV             09 FORM            14 HERO FIELD
   05 HERO            10 FOOTER          15 PROCESS SCRUB
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01 TOKENS ───────────────────────────────────────────────────── */
:root {
  /* --ink-deep is the floor; --paper is now a RAISED surface sitting on it.
     Nothing else moves: every color-mix() against --paper still resolves to
     the value it always did, so no existing contrast pair changes. */
  --ink-deep: #050505;
  --paper: #0e0e0e;
  --paper-2: #141414;
  --sheet: #070707;
  --ink: #f2efe6;
  /* Both tiers are measured against --paper, not eyeballed. --ink-faint
     carries the 28 .leadrow dt labels, the character counter and input
     placeholders, all of which are content and need AA at 10px.
     #55554f was 2.63:1 (fail), #77776f was 4.28:1 (still fail). */
  --ink-dim: #9a9a94; /* 6.8:1 */
  --ink-faint: #838379; /* 4.9:1, measured on the card fill not bare paper */
  /* --rule draws dashes and dividers; --rule-2 draws structure that has to
     be legible (panel edges, dotted leaders). The old single #2a2a2a token
     was 1.35:1 against paper, so every container read as a smudge. */
  --rule: #3a3a3a;
  --rule-2: #4d4d4d;
  --signal: #e8622a;
  /* Cream on an ink ground, for TIER D slabs. NOT --ink at full alpha:
     #f2efe6 glares against near-black, and anything below ~0.90 composites
     toward a mid-grey that reads as neither paper nor ink. Stay 0.90-0.97. */
  --slab: rgba(233, 228, 216, 0.94);
  /* The signal retuned for the slab: --signal is 3.4:1 on cream, so index
     numerals and 12px labels inside a slab use this. Same hue, same role. */
  --signal-slab: #c4491a;

  /* hoisted so the inverted band can reuse the same grain */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");

  --gut: clamp(1.25rem, 3.5vw, 3rem);
  --strip: 68px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: "Audiowide", var(--disp);
  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

img,
svg {
  max-width: 100%;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

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

/* ── 02 SUBSTRATE ────────────────────────────────────────────────── */
.substrate {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Grain composites at NORMAL blend. `mix-blend-mode: overlay` collapses
   to nothing on a near-black base — tried and rejected. */
.grain {
  position: absolute;
  inset: -20%;
  background-image: var(--noise);
  background-repeat: repeat;
  opacity: 0.105;
  will-change: transform;
}
.grain--coarse {
  background-size: 460px 460px;
  opacity: 0.06;
}

.bloom {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      60% 45% at 22% 12%,
      rgba(242, 239, 230, 0.055),
      transparent 70%
    ),
    radial-gradient(
      50% 40% at 88% 78%,
      rgba(242, 239, 230, 0.03),
      transparent 70%
    );
}

.rules {
  position: absolute;
  inset: 0;
  max-width: 1560px;
  margin-inline: auto;
}
/* Two weights. Majors land on quarter points, which is exactly where the
   service-card, flow-column and stat boundaries fall, so the grid explains
   the layout instead of sitting behind it as noise. Minors are the true
   12 columns, which is what the 12_COL_MODULAR label claims. The old
   single-weight 100%/6 grid coincided with content on 1 boundary in 5. */
.rules::before {
  content: "";
  position: absolute;
  inset: 0 var(--gut);
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(242, 239, 230, 0.085) 0 1px,
      transparent 1px calc(100% / 4)
    ),
    repeating-linear-gradient(
      to right,
      rgba(242, 239, 230, 0.035) 0 1px,
      transparent 1px calc(100% / 12)
    );
}
.rules::after {
  content: "";
  position: absolute;
  inset: 0 var(--gut) 0 auto;
  width: 1px;
  background: rgba(242, 239, 230, 0.062);
}

/* ── DOCUMENT PAGES ───────────────────────────────────────────────────
   On the index the major rules land on card, step and stat boundaries, so
   the grid explains the layout. A legal or support page has none of those:
   it is a single prose column, and the same lines run straight through the
   running text at reading size. Reading wins, so the grid drops back to a
   hint rather than a reference. The grain and bloom are unchanged, so the
   page still sits on the same substrate. */
.doc .rules {
  opacity: 0.26;
}

/* ── 03 PRIMITIVES ───────────────────────────────────────────────── */
.shell {
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 2;
}

.mono {
  font-family: var(--mono);
  /* labels like 12_COL_MODULAR are a single unbreakable token and will
     push past their container once type scales up */
  overflow-wrap: anywhere;
  /* 0.75rem, not 10px. px ignores the browser's default font size, which
     froze 74% of this page's text for anyone who raises it. Tracking eases
     off slightly at the larger size so the labels don't sprawl. */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.45;
}
.mono--ink {
  color: var(--ink);
}
.mono--faint {
  color: var(--ink-faint);
}
/* The references set micro-type to a measure and let the word spaces open
   up, rather than running it as a short left-aligned label. */
.mono--spread {
  display: block;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
}

.capsule > * {
  min-width: 0;
}
.capsule {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7em;
  border: 1px dashed var(--rule);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  background: rgba(242, 239, 230, 0.012);
}

.invert {
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
}

.idx {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--signal);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
}

.glyph {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.15;
  color: var(--ink-dim);
}

.rule-h {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule-h--dash {
  height: 0;
  border-top: 1px dashed var(--rule);
  background: none;
}

/* dotted-leader row — the workhorse of the spec-sheet look */
.leadrow {
  display: flex;
  align-items: baseline;
  /* both terms are flex:none by design (the dotted leader does the
     stretching), so with no wrap the value overflows the column as soon as
     the user raises their font size. Wrapping drops it to its own line. */
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-block: 0.32rem;
}
/* The leader used to be an <i> element between the dt and the dd. That made
   every one of these lists invalid: a <dl>, and a <div> grouping inside one,
   may contain only dt and dd, so axe flagged all 44 of them. It is a
   pseudo-element on the term now, which draws the identical line and leaves
   the markup a clean dt/dd pair. */
.leadrow dt,
.leadrow > :first-child {
  color: var(--ink-faint);
  margin: 0;
  /* was flex: none, with the old <i> doing the stretching */
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.leadrow dt::after,
.leadrow > :first-child::after {
  content: "";
  flex: 1;
  /* the dotted leader is the signature device of this language; at --rule
     it was 1.35:1 against paper, which is to say it was not drawn */
  border-bottom: 1px dotted var(--rule-2);
  transform: translateY(-3px);
  min-width: 1.5rem;
}
.leadrow dd,
.leadrow > :last-child {
  color: var(--ink);
  margin: 0 0 0 auto;
  flex: none;
  text-align: right;
}

/* ── 04 NAV ──────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--ink) 18%, transparent);
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--strip);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

/* ── LOGO ──────────────────────────────────────────────────────────
   The source PNG is white-on-transparent, so it would disappear on the
   cream inverted band. Loading it as a mask filled with currentColor
   makes it take the surrounding ink colour instead, which means one
   asset works on both value planes.

   Height is the only size set; aspect-ratio derives the width from the
   art's real 160x114, so a future re-crop cannot silently squash it. */
.mark__logo {
  --logo-h: 2.125rem;
  height: var(--logo-h);
  aspect-ratio: 160 / 114;
  width: auto;
  flex: none;
  color: var(--ink);
  background-color: currentColor;
  -webkit-mask: url("../assets/images/logo.png") no-repeat center / contain;
  mask: url("../assets/images/logo.png") no-repeat center / contain;
}

/* Audiowide is the brand wordmark face and predates this design system.
   It is deliberately scoped to the wordmark only, in the nav and footer;
   every other display setting stays on Archivo. */
.mark__text {
  font-family: var(--brand);
  /* 2rem at desktop. Audiowide is a wide face, so at 390px a flat 2rem
     wordmark plus the logo and the menu button overflows the bar; the
     clamp lower bound keeps it inside without changing the desktop size. */
  font-size: clamp(1.35rem, 4.6vw, 2rem);
  letter-spacing: 0.005em;
  text-transform: lowercase;
  line-height: 1;
}
.mark__reg {
  font-family: var(--mono);
  font-size: 0.625rem;
  vertical-align: super;
  color: var(--ink-dim);
  letter-spacing: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav__link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding-block: 0.35rem;
  transition: color 0.25s var(--ease);
}
.nav__link i {
  font-style: normal;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--ink);
}
.nav__link:hover i {
  color: var(--signal);
}

.nav__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.nav__menu {
  display: none;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 1px dashed var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.nav__menu-bars {
  display: grid;
  gap: 3px;
  width: 13px;
}
.nav__menu-bars span {
  height: 1px;
  background: var(--ink);
  display: block;
}
.nav__menu-bars span:last-child {
  width: 8px;
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: var(--strip) 0 auto 0;
  z-index: 55;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem var(--gut) 1.25rem;
  display: none;
}
.drawer.is-open {
  display: block;
}
.drawer a {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.9rem 0;
  border-bottom: 1px dashed var(--rule);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.drawer a i {
  font-style: normal;
  color: var(--signal);
}

@media (max-width: 899px) {
  .nav__links,
  .nav__status {
    display: none;
  }
  .nav__menu {
    display: inline-flex;
  }
}

/* ── 05 HERO ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--strip) + clamp(1.5rem, 5vh, 3.5rem));
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* minmax(0, 1fr) throughout, not 1fr. A bare 1fr track is minmax(auto, 1fr),
   whose auto floor refuses to shrink below its content, so one wide label
   stretches the whole track and overflows the page once type scales up. */
.hero__grid {
  display: grid;
  /* Single column until the 12-col layout is actually used. A 12-track grid
     with a 1.5rem gap needs 11 gaps = 396px of gutter alone at a 24px root,
     which cannot fit a 330px content box no matter how far the tracks
     collapse, so the grid overflowed the page. */
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.hero__main,
.hero__side {
  min-width: 0;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .hero__main {
    grid-column: 1 / span 8;
  }
  .hero__side {
    grid-column: 10 / span 3;
    padding-top: 0.6rem;
  }
}
/* The H1 needs a wider measure to grow into. Widening the column is the
   right lever here, not raising the vw coefficient — see the scale rule. */
@media (min-width: 1180px) {
  .hero__main {
    grid-column: 1 / span 9;
  }
  .hero__side {
    grid-column: 10 / span 3;
  }
}

.eyebrow {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

/* Sized against the column measure it occupies, NOT the viewport. An earlier
   11.5vw pushed the whole hero below the fold; the fix for a headline that
   needs to be bigger is to widen its column, which is what the 900/1180
   breakpoints above now do. H1:H2 is ~2:1 so the page has an apex. */
.h1 {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 76,
    "wght" 800;
  font-size: clamp(2.6rem, 7.4vw, 8.4rem);
  line-height: 0.87;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  margin: 0;
}
.h1 span {
  display: block;
}
.h1 .invert {
  display: inline-block;
  padding: 0 0.13em 0.04em;
  margin-left: -0.035em;
}

/* A lede at 16.6px against 16px body is a rounding error, not a tier. */
.lede {
  margin: clamp(1.3rem, 3vh, 1.9rem) 0 0;
  max-width: 44ch;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 72%, var(--paper));
  font-weight: 300;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.1rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  transition: transform 0.35s var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px dashed var(--rule);
}
.btn--ghost:hover {
  border-color: var(--ink);
  border-style: solid;
}
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* .spec box styling lives with TIER A in section 07 */
.spec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
}
.spec__rows {
  display: grid;
  gap: 0.1rem;
  padding: 0.75rem 0;
  margin: 0;
}
.spec__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding-top: 0.8rem;
}
.spec__glyphs {
  display: flex;
  gap: 0.65rem;
}

.plate {
  margin-top: 1.15rem;
}
.plate__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-block: 0.85rem;
}
.plate__cell {
  text-align: center;
  min-width: 0;
}
.plate__num {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 66,
    "wght" 800;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1;
  display: block;
}
.plate__tag {
  display: inline-block;
  margin-top: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
}

.hero__foot {
  margin-top: clamp(2rem, 5.5vh, 3.5rem);
}
/* A frame, not a row. The reference pins these marks to the corners of an
   invisible rectangle with the pill floating between; space-between on a
   single line flattened that into a caption strip. */
.hero__foot-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: clamp(0.75rem, 2vh, 1.4rem);
  padding-top: 0.85rem;
}
.hero__foot-row > * {
  min-width: 0;
}
@media (max-width: 460px) {
  /* the three-column frame cannot fit; stack it rather than overflow */
  .hero__foot-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: start;
  }
  .hero__foot-row > * {
    grid-area: auto !important;
    justify-self: start !important;
  }
}
.hero__foot-row > :nth-child(1) {
  grid-area: 1 / 1;
}
.hero__foot-row > :nth-child(2) {
  grid-area: 1 / 2 / span 2 / span 1;
  justify-self: center;
}
.hero__foot-row > :nth-child(3) {
  grid-area: 1 / 3;
  justify-self: end;
}
.hero__foot-row > :nth-child(4) {
  grid-area: 2 / 3;
  justify-self: end;
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}
.scroll-cue__bar {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(to right, var(--ink-dim), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform-origin: left;
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  35% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
    transform-origin: right;
  }
}

@media (max-width: 899px) {
  .hero {
    min-height: auto;
    padding-bottom: 3rem;
  }
  .hero__side {
    margin-top: 0.75rem;
  }
  .leadrow {
    padding-block: 0.2rem;
    font-size: 0.75rem;
  }
  .spec__rows {
    padding: 0.5rem 0;
  }
  .lede {
    font-size: 1rem;
  }
  .hero__foot-row {
    row-gap: 1rem;
    justify-content: flex-start;
  }
  .actions .btn {
    flex: 1 1 auto;
  }
}

/* ── 06 SECTIONS ─────────────────────────────────────────────────── */
.seam {
  border-block: 1px solid var(--rule);
  padding-block: 0.7rem;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: var(--paper-2);
}
.seam__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: drift 42s linear infinite;
}
.seam__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}

.sec {
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
  position: relative;
  z-index: 2;
  /* the nav is fixed — without this, anchor jumps bury the section head */
  scroll-margin-top: calc(var(--strip) + 1.5rem);
}

.sec__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sec__head .rule-h {
  flex: 1;
}
/* justify needs a real measure to open the word spaces into; as a plain
   flex item the label would size to its content and never justify */
.sec__head .mono--spread {
  flex: 0 0 clamp(9rem, 14vw, 13rem);
}

.h2 {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 76,
    "wght" 790;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
}

.sec__lede {
  margin: 1.25rem 0 0;
  max-width: 48ch;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 70%, var(--paper));
}

/* The missing middle register. The scale ran 16px body straight to 54px
   display with nothing between, so no single sentence could act as a
   statement. Sentence case on purpose — it is prose, not a label. */
/* `.prose p` is (0,0,1,1) and would otherwise win over a bare `.statement`
   class, silently rendering the statement smaller than body copy. */
.statement,
.prose .statement {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 80,
    "wght" 700;
  font-size: clamp(1.6rem, 2.9vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
  max-width: 18ch;
  margin: 0;
}

.sec__body {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

/* ── 07 CARDS ────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}
/* ── CONTAINER TIERS ───────────────────────────────────────────────────
   One recipe repeated ~20 times is what made the page read as a template.
   Three tiers now, and TIER B works by REMOVING the box: subtracting seven
   rounded rectangles is what makes the wide card dominant, without touching
   a single grid span. Do not "fix" emptiness by adding containers back. */

/* TIER A — dominant. One per section, maximum. Single-corner radius is the
   signature of this reference language; uniform radii read as template. */
.card--wide,
.spec {
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 22px 3px 3px 3px;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  background: rgba(242, 239, 230, 0.028);
}

.card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition:
    border-color 0.35s var(--ease),
    background 0.35s var(--ease);
}

/* TIER B — data. No box. Hairline above, square, flush to the grid. */
.card:not(.card--wide),
.principle {
  border: 0;
  border-top: 1px solid var(--rule-2);
  border-radius: 0;
  background: none;
  padding: 1.5rem 0 0;
}
.card:not(.card--wide):hover {
  background: none;
  border-top-color: var(--ink);
}

@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .card {
    grid-column: span 6;
  }
  .card--wide {
    grid-column: span 12;
  }
}
@media (min-width: 1180px) {
  .card {
    grid-column: span 3;
  }
  .card--wide {
    grid-column: span 12;
  }
  /* vertical dividers only once the cards are 4-up, otherwise the rule
     lands mid-row in the 2-up range */
  .card:not(.card--wide) {
    padding-right: clamp(1rem, 1.8vw, 1.6rem);
  }
  .card:not(.card--wide) + .card:not(.card--wide) {
    border-left: 1px dashed var(--rule);
    padding-left: clamp(1rem, 1.8vw, 1.6rem);
  }
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card__title {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 78,
    "wght" 760;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.card--wide .card__title {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}

.card__body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 68%, var(--paper));
  flex: 1;
}
.card--wide .card__body {
  max-width: 58ch;
  font-size: 1rem;
}

/* the wide card is two columns of its own so the right half isn't dead space */
.card__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .card__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }
}
.card__colmain {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.card__colside {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.card__spec {
  display: grid;
  gap: 0;
  margin: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tag {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.card:hover .tag {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* ── 08 STATS ────────────────────────────────────────────────────── */
/* The Process step columns (.flow) that shared this section were replaced
   by the pinned .scrub band in section 15. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px dashed var(--rule);
  border-left: 1px dashed var(--rule);
}
@media (min-width: 760px) {
  /* "Zero compromises on quality" is the strongest claim on the page and was
     sized identically to "24/7". Give it the column and the scale. */
  .stats {
    grid-template-columns: 1.9fr 1fr 1fr 1fr;
  }
  .stat:first-child .stat__num {
    font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  }
}
.stat {
  min-width: 0;
  border-right: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
}
.stat__num {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 72,
    "wght" 800;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1;
  display: block;
  margin-bottom: 0.75rem;
}

.principles {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* box styling comes from TIER B above; this only sets internal layout */
.principle {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.principle__title {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 78,
    "wght" 760;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
}
.principle__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 66%, var(--paper));
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 980px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  }
}

.prose {
  max-width: 62ch;
  display: grid;
  gap: 1.15rem;
}
.prose p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 72%, var(--paper));
}
.prose strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── 09 FORM ─────────────────────────────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 980px) {
  .contact__grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}

.form {
  display: grid;
  gap: 1.1rem;
}
.form__row {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: 0.5rem;
}
.field > label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field > label span {
  color: var(--signal);
}

.input {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(242, 239, 230, 0.02);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}
.input::placeholder {
  color: var(--ink-faint);
}
.input:hover {
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
}
.input:focus {
  outline: none;
  border-color: var(--ink);
  background: rgba(242, 239, 230, 0.04);
}
.input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
textarea.input {
  resize: vertical;
  min-height: 8rem;
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238a8a85' stroke-width='1.4'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.5rem;
}
select.input option {
  background: var(--paper-2);
  color: var(--ink);
}

.input.is-invalid {
  border-color: var(--signal);
}

.err {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
.err:empty {
  display: none;
}

.field__meta {
  display: flex;
  justify-content: flex-end;
}

/* the form is a grid — without this the submit stretches the full column */
.form > .btn {
  justify-self: start;
  min-width: 14rem;
}
@media (max-width: 619px) {
  .form > .btn {
    justify-self: stretch;
  }
}

/* honeypot — off-screen, never focusable */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__msg {
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.form__msg:empty {
  display: none;
}
.form__msg.is-ok {
  border-color: color-mix(in srgb, var(--ink) 40%, transparent);
  color: var(--ink);
}
.form__msg.is-err {
  border-color: var(--signal);
  color: var(--signal);
}

.contact__aside {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.contact__mail {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 82,
    "wght" 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  transition: border-color 0.3s var(--ease);
  word-break: break-word;
}
.contact__mail:hover {
  border-color: var(--signal);
}

/* ── 10 FOOTER ───────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vh, 4rem);
  position: relative;
  z-index: 2;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr auto 1fr;
  }
}
/* Two even columns on a phone. Seven links flex-wrapping at 1.5rem left a
   ragged 4 + 3 with an orphan on the second row; a grid aligns them. */
.footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}
@media (min-width: 900px) {
  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }
}
.footer__links a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.footer__links a:hover {
  color: var(--ink);
}
/* The footer lockup was pixel identical to the one in the nav: same logo
   height, same wordmark clamp, 190x34 in both places. On a phone the sticky
   nav sits about 100px above the footer, so the page ended with the same
   lockup twice at the same size, which reads as a mistake. The footer is a
   sign-off, not a second header, so it takes a smaller mark.

   display:flex rather than the inherited inline-flex, so the tagline stacks
   underneath instead of flowing beside it and orphaning its last word. */
.footer .mark {
  display: flex;
  /* The lockup is a link to the homepage. flex keeps the tagline stacked
     underneath, and fit-content stops the anchor stretching the full column
     so the click target hugs the logo and wordmark instead of covering the
     empty space beside them. */
  width: fit-content;
  margin-bottom: 0.6rem;
}
.footer .mark__logo {
  --logo-h: 1.5rem;
}
.footer .mark__text {
  font-size: 1.1rem;
}

.footer__end {
  display: grid;
  gap: 0.4rem;
}
@media (min-width: 900px) {
  .footer__end {
    justify-items: end;
    text-align: right;
  }
}
.footer__glyphs {
  display: flex;
  gap: 0.65rem;
}
@media (min-width: 900px) {
  .footer__glyphs {
    justify-content: flex-end;
  }
}

/* ── 11 MOTION ───────────────────────────────────────────────────────
   Parallax writes `transform`. Reveals write `translate`. These are
   separate CSS properties, so both systems compose on one element.
   DO NOT merge them — an earlier draft used `translate` for both and
   they silently clobbered each other.

   `--par` is an element's total drift in px across one viewport of
   scroll. Every animated property is transform or opacity; nothing
   here can trigger layout or paint. */

.par {
  will-change: transform;
  transform: translate3d(0, calc(var(--p, 0) * var(--par, 0px)), 0);
}

@supports (animation-timeline: scroll()) {
  .par {
    transform: none;
    animation: par-drift linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  @keyframes par-drift {
    to {
      transform: translate3d(0, var(--par, 0px), 0);
    }
  }
}

.rise {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity 0.9s var(--ease),
    translate 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .rise,
.rise.is-in {
  opacity: 1;
  translate: 0 0;
}

.wipe {
  overflow: hidden;
  display: block;
}
.wipe > span {
  display: block;
  translate: 0 100%;
  transition: translate 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.is-in .wipe > span {
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  .par,
  .grain {
    transform: none !important;
    animation: none !important;
  }
  .rise,
  .wipe > span {
    opacity: 1 !important;
    translate: 0 !important;
  }
}

/* ── ERROR PAGE ──────────────────────────────────────────────────── */
.err-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--strip) + 3rem);
  padding-bottom: 3rem;
}
.err-code {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 70,
    "wght" 850;
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  margin: 0;
}

/* ── LEGAL / LONG-FORM ───────────────────────────────────────────── */
.legal {
  max-width: 68ch;
  display: grid;
  /* Was 1.5rem, which put a 24px gap between paragraphs against a 26px line
     height: very nearly a full blank line, on top of a generous 1.7 leading.
     0.7 of a line reads as a paragraph break without the copy drifting apart. */
  gap: 1.15rem;
}
.legal h2 {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 80,
    "wght" 760;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  /* Display type must set its own leading. Inheriting the body's 1.55 put
     about 17px of invisible half-leading above and below every heading, which
     is why the gaps measured smaller than they looked. */
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  /* Deliberately asymmetric: the space above a heading belongs to the section
     that ended, the space below belongs to the heading's own text. */
  margin: 1.9rem 0 0;
}
.legal h3 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 1.35rem 0 0;
}
/* h4 had no rule at all and was falling through to the browser default: bold
   16px with symmetric 21px margins, which is neither the design system's type
   nor its rhythm. */
.legal h4 {
  font-family: var(--body);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0.6rem 0 0;
}
.legal p,
.legal li {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 72%, var(--paper));
}
.legal ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal a:hover {
  color: var(--signal);
}

/* ── 12 DEPTH ────────────────────────────────────────────────────────
   Four idioms. Depth comes from overlap, edge and value — never from a
   soft drop shadow, which reads as web template rather than ink on
   paper. See DESIGN.md section 12.

   Two of these draw a second box behind an existing one, which is a
   deliberate exception to the TIER B "remove the box" rule in 07: a
   ghost outline is not a container. It holds no content and takes no
   padding. Do not use it to reintroduce containers TIER B removed. */

/* 12.1 Registration offset — a dashed ghost, down and right. Blueprint
   layering. Two per viewport maximum. */
.registered {
  position: relative;
}
.registered::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 12px 12px;
  border: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 22px 3px 3px 3px;
  pointer-events: none;
}

/* 12.2 Recessed well — inner top hairline over a darker floor. This is the
   third value plane the page lacked: --ink-deep floor, --paper raised,
   well recessed into it. */
.well {
  background: linear-gradient(var(--ink-deep), var(--paper-2));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    inset 0 -40px 80px rgba(0, 0, 0, 0.6);
}

/* .well carries a value plane and nothing else, so on its own it paints a
   shape with no edges. .form--panel borrows the TIER A box above rather than
   declaring a second one, and .well then replaces the raised background with
   the recessed floor. Section 04 is the only section with no TIER A element,
   so this spends the one-per-section budget rather than exceeding it. */
.form--panel {
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 22px 3px 3px 3px;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* 12.3 Die-cut window — a hole punched through a plane, holding an image.
   Hard 1px edge, no radius, no shadow: imagery is cut into the sheet, it
   never floats on top of it. */
.window {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--ink-deep);
}

/* 12.4 Cast type — oversized display numeral at 5% ink, drifting slower
   than the content in front of it. Depth out of the type system itself, so
   it costs no new material. One per section, always aria-hidden. */
.cast {
  position: absolute;
  right: -2%;
  top: -4%;
  user-select: none;
  pointer-events: none;
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 62,
    "wght" 900;
  font-size: min(46vh, 520px);
  line-height: 0.72;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--ink) 5%, transparent);
  will-change: transform;
}

/* 12.5 TIER D — paper slab on ink. Where a panel must LEAD rather than
   recede it takes the cream fill, the inverse of 12.2. This is how the
   page keeps a light plane without a full light section — see the rejected
   mid-tone ground in DESIGN.md section 14.4. */
.slab {
  --signal: var(--signal-slab);
  --ink: #0e0e0e;
  --ink-dim: #33332e;
  --ink-faint: #4d4d46;
  --rule: rgba(14, 14, 14, 0.2);
  --rule-2: rgba(14, 14, 14, 0.42);
  position: relative;
  background: var(--slab);
  color: var(--ink);
  border-radius: 22px 3px 3px 3px;
  padding: clamp(1.4rem, 3.4vh, 2.5rem) clamp(1.5rem, 2.6vw, 2.75rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.slab ::selection {
  background: var(--ink);
  color: var(--slab);
}
/* the signal notch that ties a slab to the sheet edge above it */
.slab__notch {
  position: absolute;
  top: -1px;
  left: 32px;
  width: 70px;
  height: 3px;
  background: var(--signal);
}

/* ── 13 GROUNDS / IMAGERY ────────────────────────────────────────────
   Imagery is a section GROUND, not an element dropped into a column.
   Every ground is one photographic layer plus one scrim that returns the
   section to --ink-deep at both edges. See DESIGN.md section 13 for the
   slot inventory and the two subject families.

   A section with a ground drops .shell and wraps its content in
   .sec__pad instead, so the ground can fill the section edge to edge
   while the content keeps its measure.

   The ground is "inset: 0" and nothing else. An earlier draft bled it
   with inset: 0 calc(50% - 50vw), but 50vw counts the scrollbar where the
   section width does not, so every ground was ~15px wider than its parent
   and the page scrolled sideways. clip-path did not fix it either: it
   clips painting, not scrollable overflow. */
.ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ground__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.3;
}
/* Returns both edges to the floor colour, so consecutive grounds read as
   one continuous page rather than a stack of photographic bands. */
.ground__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--ink-deep) 0%,
    color-mix(in srgb, var(--ink-deep) 82%, transparent) 26%,
    color-mix(in srgb, var(--ink-deep) 82%, transparent) 74%,
    var(--ink-deep) 100%
  );
}
.sec--ground {
  position: relative;
  isolation: isolate;
}
.sec__pad {
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* full-bleed plate band — the one place a photograph is the subject */
.band {
  position: relative;
  z-index: 2;
  height: clamp(220px, 32vh, 340px);
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: var(--ink-deep);
}
.band__img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
}
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ink-deep) 88%, transparent),
    color-mix(in srgb, var(--ink-deep) 25%, transparent) 45%,
    color-mix(in srgb, var(--ink-deep) 75%, transparent)
  );
}
.band__in {
  position: absolute;
  inset: 0;
  max-width: 1560px;
  margin-inline: auto;
  padding: 0 var(--gut) clamp(1.25rem, 3vh, 2rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.band__title {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 76,
    "wght" 780;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 22ch;
  margin: 0;
}

/* every window and band caption sits bottom-left over its own scrim */
.plate-cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
}

/* ── 14 HERO FIELD ───────────────────────────────────────────────────
   The one canvas on the site. CLAUDE.md records deleting three particle
   systems in the August 2026 redesign; this is a deliberate, scoped
   exception for the hero only. It draws only while the hero is on screen,
   and DESIGN.md section 14.2 states the budget it has to stay inside. */
/* NOT .field — that is the form field wrapper in section 09, and this rule
   sits later in the cascade at equal specificity. Naming this .field made
   every form field position:absolute + pointer-events:none, which collapsed
   the contact form into one stack and made it unclickable. */
.hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      52% 40% at 24% 12%,
      color-mix(in srgb, var(--ink) 8%, transparent),
      transparent 70%
    ),
    radial-gradient(
      46% 38% at 88% 88%,
      color-mix(in srgb, var(--signal) 8%, transparent),
      transparent 72%
    );
}
.hero--field .hero__grid,
.hero--field .hero__foot {
  position: relative;
  z-index: 3;
}

/* ── 15 PROCESS SCRUB ────────────────────────────────────────────────
   Replaces .flow. Four steps on a drafting sheet, pinned while the
   reader scrubs through them.

   Progressive enhancement, in this order:
   1. No JS, or no support: four slabs stacked in normal flow. All four
      steps are real DOM with real copy, so the section is complete and
      indexable without a single line of script.
   2. JS and >=900px: .is-live pins the sheet and overlays the steps.

   Below 900px it never pins. A 340vh pin is about three phone screens
   before the section releases, and iOS Safari resizes the viewport
   mid-gesture as its toolbar collapses, which retriggers sticky. */
.scrub {
  position: relative;
  z-index: 2;
  scroll-margin-top: calc(var(--strip) + 1.5rem);
}
.scrub__sheet {
  position: relative;
  overflow: hidden;
  background: var(--sheet);
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
}
.scrub__photo {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0.13;
  filter: grayscale(1) contrast(1.15);
}
.scrub__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    var(--ink-deep) 0%,
    color-mix(in srgb, var(--ink-deep) 70%, transparent) 45%,
    color-mix(in srgb, var(--ink-deep) 92%, transparent) 100%
  );
}
/* The drafting grid: minors every 60px, majors every 300px — the same
   two-weight logic as .rules, in signal rather than ink, because this
   section is a drawing rather than a page. */
.scrub__grid {
  position: absolute;
  inset: 0 -20%;
  will-change: transform;
  background-image:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--signal) 11%, transparent) 0 1px,
      transparent 1px 60px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--signal) 7%, transparent) 0 1px,
      transparent 1px 60px
    ),
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--signal) 20%, transparent) 0 1px,
      transparent 1px 300px
    );
}
.scrub__frame {
  position: absolute;
  inset: 20px;
  border: 1px solid color-mix(in srgb, var(--signal) 26%, transparent);
}
.scrub__corner {
  position: absolute;
  width: 26px;
  height: 26px;
}
.scrub__corner--tl {
  left: 20px;
  top: 20px;
  border-right: 1px solid color-mix(in srgb, var(--signal) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 26%, transparent);
}
.scrub__corner--br {
  right: 20px;
  bottom: 20px;
  border-left: 1px solid color-mix(in srgb, var(--signal) 26%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--signal) 26%, transparent);
}
.scrub__sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  will-change: transform;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--signal) 85%, transparent),
    transparent
  );
}
.scrub__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 0;
  background: var(--signal);
}
.scrub__in {
  position: relative;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.scrub__steps {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  margin-top: clamp(1rem, 2.6vh, 1.9rem);
}
.scrub__step {
  min-width: 0;
}
.scrub__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
}
.scrub__num {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 62,
    "wght" 900;
  font-size: clamp(3rem, 9.4vh, 7.25rem);
  line-height: 0.76;
  letter-spacing: -0.03em;
  color: var(--signal);
  flex: none;
}
.scrub__titlewrap {
  min-width: 0;
  flex: 1;
}
.scrub__title {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 76,
    "wght" 820;
  font-size: clamp(1.75rem, 4.8vh, 3.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Full ink at 400, not 300-weight dimmed: this copy is the section
   argument, and on a slab it can carry the weight. */
.scrub__body {
  margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
  max-width: 46ch;
  font-size: clamp(0.95rem, 2vh, 1.25rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  border-left: 3px solid var(--signal);
  padding-left: clamp(0.875rem, 1.2vw, 1.25rem);
}
.scrub__deliver {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
}
@media (min-width: 620px) {
  .scrub__deliver {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.scrub__deliver li {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  border-top: 2px solid var(--signal);
  padding-top: clamp(0.625rem, 1.6vh, 0.875rem);
  margin-top: -1px;
}
/* the step index rail is the scrub affordance, so it exists only when
   there is a scrub to afford */
.scrub__strip {
  display: none;
}
.scrub__rail {
  position: relative;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  margin-top: clamp(1.25rem, 3.4vh, 2.5rem);
}
.scrub__rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--signal);
}
.scrub__knob {
  position: absolute;
  top: -5px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 20%, transparent);
}
.scrub__tick {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 10px;
  background: color-mix(in srgb, var(--signal) 50%, transparent);
}
.scrub__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 0.875rem;
}
@media (max-width: 619px) {
  /* four labels cannot share a phone width; the numerals already carry it */
  .scrub__legend {
    display: none;
  }
}

/* ── the pinned state: desktop only, JS-gated ───────────────────────── */
@media (min-width: 900px) {
  .scrub.is-live {
    height: var(--scrub-h, 340vh);
  }
  .scrub.is-live .scrub__sheet {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: clamp(2.75rem, 8vh, 6.5rem);
    display: grid;
    /* three grid children: head, steps, rail. The eight decoration layers
       and .cast are absolutely positioned and are not grid items. A fourth
       track here would hand the slack to an empty row and leave the step
       slab at min-content. */
    grid-template-rows: auto 1fr auto;
  }
  /* .scrub__in carries margin-inline: auto for its measure. Auto inline
     margins suppress a grid item's default justify-self: stretch, so
     without this the block shrinks to content width and the rail, ticks
     and legend end up about a quarter of the sheet wide. */
  .scrub.is-live .scrub__in {
    width: 100%;
  }
  .scrub.is-live .scrub__body-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(1.75rem, 3vw, 3.5rem);
    align-items: center;
    min-height: 0;
  }
  /* steps overlay in one grid cell; only the current one is shown */
  .scrub.is-live .scrub__steps {
    grid-template-areas: "step";
    gap: 0;
    margin-top: 0;
  }
  /* NO visibility here. visibility: hidden makes an element unrendered, and
     neither a transition nor an animation ticks on an unrendered element —
     so a step's opacity froze at whichever end it was on when visibility
     flipped, and the sheet rendered no step at all for most of the scrub.
     Opacity hides the paint, pointer-events removes the hit target, and
     setStep() carries aria-hidden for the a11y tree. */
  .scrub.is-live .scrub__step {
    grid-area: step;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
  }
  .scrub.is-live .scrub__step.is-current {
    opacity: 1;
    pointer-events: auto;
  }
  .scrub.is-live .scrub__titlemask {
    overflow: hidden;
  }
  /* An ANIMATION, not a transition. The title slides up inside its
     overflow: hidden mask when its step becomes current. An animation
     restarts on class add and does not depend on the element having been
     rendered at the moment the class flipped — a transition here was
     created and then never ticked, parking the title out of frame. */
  .scrub.is-live .scrub__title {
    will-change: transform;
  }
  .scrub.is-live .scrub__step.is-current .scrub__title {
    animation: scrub-wipe 0.55s var(--ease) both;
  }
  @keyframes scrub-wipe {
    from {
      transform: translate3d(0, 100%, 0);
    }
  }
  .scrub.is-live .scrub__strip {
    display: block;
    height: min(404px, 36vh);
    overflow: hidden;
    position: relative;
    border-left: 1px dashed color-mix(in srgb, var(--signal) 34%, transparent);
    padding-left: 1.875rem;
  }
  .scrub.is-live .scrub__strip-track {
    display: grid;
    will-change: transform;
    transition: transform 0.55s var(--ease);
  }
  .scrub.is-live .scrub__row {
    height: 101px;
    display: grid;
    align-content: center;
    gap: 7px;
    border-bottom: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  }
  .scrub.is-live .scrub__row-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  /* Inactive rows are the affordance, not decoration, so they take a real
     colour at full opacity. Dimming --ink to 42% measured 1.69:1. */
  .scrub.is-live .scrub__row-num {
    font-family: var(--disp);
    font-variation-settings:
      "wdth" 66,
      "wght" 800;
    font-size: 2.125rem;
    line-height: 1;
    color: #7d7d76;
  }
  .scrub.is-live .scrub__row.is-current .scrub__row-num,
  .scrub.is-live .scrub__row.is-current .mono {
    color: var(--ink);
  }
  .scrub.is-live .scrub__row-bar {
    height: 3px;
    width: 100%;
    background: color-mix(in srgb, var(--ink) 14%, transparent);
    position: relative;
    overflow: hidden;
  }
  .scrub.is-live .scrub__row-bar i {
    position: absolute;
    inset: 0;
    background: var(--signal);
    transform-origin: left;
    transform: scaleX(0);
  }
  .scrub.is-live .scrub__rail {
    align-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrub__grid,
  .scrub__sweep,
  .scrub__strip-track,
  .cast {
    transform: none !important;
  }
  /* never pin: without motion cues there is nothing to scrub */
  .scrub.is-live {
    height: auto !important;
  }
  .scrub.is-live .scrub__sheet {
    position: static !important;
    height: auto !important;
    display: block !important;
  }
  .scrub.is-live .scrub__steps {
    grid-template-areas: none !important;
    gap: clamp(0.75rem, 1.5vw, 1.1rem) !important;
  }
  .scrub.is-live .scrub__step {
    grid-area: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .scrub.is-live .scrub__strip,
  .scrub__sweep {
    display: none !important;
  }
}

/* The section title is demoted to a mono eyebrow so the STEP title leads.
   Two same-size uppercase Archivo headings competed here and neither won;
   the accessible name still lives on this h2. */
.scrub__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: clamp(0.875rem, 2.4vh, 1.375rem) 0 0;
}
.scrub__dash {
  width: 22px;
  height: 3px;
  background: var(--signal);
  flex: none;
}