/* =========================================================================
   ORIGINAL LIMITED — Design System
   Concept: "Gold Standard."
   Carbon #101820 · White #FFFFFF · Steelers Gold #FFB612
   Type: Reeler for headings, Archivo (variable width) for body declarations,
   Space Mono for technical labels. Flat by default; depth comes from fields,
   rules, and scale.
   ========================================================================= */

/* Reeler — headings.
   Source: Reeler.otf (Måns Grebäck / Aring Typeface; design by Noah Kinard and
   Måns Grebäck). 364 glyphs, 360 codepoints, CFF outlines, real numerals.
   Subset to 112 glyphs / 109 codepoints and emitted as woff2 (13.5 kB) with a
   ttf fallback. Self-hosted, so the site has no third-party font dependency.

   Verify the numerals before trusting this file. An earlier Personal Use build
   looked complete -- cmap and glyph names intact -- but mapped every digit to a
   single 982-point watermark outline. A cmap-presence check passes on that
   file; only comparing glyph outlines catches it:

     distinct outlines across 0-9  == 10  -> real numerals
     distinct outlines across 0-9  == 1   -> watermarked demo build */
@font-face {
  font-family: "Reeler";
  /* woff2 only. The old second source pointed at reeler.woff, a corrupt file
     from the download site that produced a NetworkError; it is deleted. */
  src: url("assets/fonts/reeler.woff2") format("woff2");
  /* The file is a single static cut. Reading its OS/2 fsSelection gives bit 5
     (BOLD) set and bit 6 (REGULAR) clear, so this is the bold display cut --
     but the face was declared at weight 400, which meant every `font-weight:
     700` in the stylesheet matched nothing and the browser synthesised bold on
     top of already-bold condensed glyphs. On Reeler that synthesis came out
     visibly slanted, so all headings across the site were rendering as a
     faux-bold oblique instead of the real lettering.
     There is exactly one cut, so it is mapped across the whole range: any
     requested weight resolves to the real glyphs and nothing is synthesised.
     Reeler is a display face and is only ever used as one. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --gold:        #ffb612;
  --gold-bright: #ffc63a;
  --gold-deep:   #e09a00;
  --gold-ink:    #7a5200;   /* gold-family text that passes AA on light */
  --carbon:      #101820;   /* Steelers black */
  --carbon-deep: #080c11;
  --carbon-lift: #17202b;
  --white:       #ffffff;

  /* Neutrals derived from the two ends */
  --paper:       #f5f3ee;   /* warm stock, light sections */
  --ink:         #101820;
  --ink-muted:   #55606d;
  --on-dark:     rgba(255, 255, 255, 0.94);
  --on-dark-dim: rgba(255, 255, 255, 0.58);
  /* Light-surface equivalents. --on-light-dim was used in 11 rules across
     components.css (prose, industry lede/body, result cards, proof keys, the
     contact form privacy note) but was NEVER DEFINED, so every one of them
     fell back to inherited white and rendered white-on-cream at 1.11:1.
     rgba(16,24,32,.74) composites to ~7:1 against --paper. */
  --on-light:      rgba(16, 24, 32, 0.94);
  --on-light-dim:  rgba(16, 24, 32, 0.74);
  --on-dark-faint: rgba(255, 255, 255, 0.46); /* 4.63:1 on carbon — AA for body text */
  --rule-dark:   rgba(255, 255, 255, 0.14);
  --rule-light:  rgba(16, 24, 32, 0.14);
  --rule-gold:   rgba(255, 182, 18, 0.34);

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --heading: "Reeler", var(--display);
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --gutter: clamp(20px, 5vw, 96px);
  --section: clamp(76px, 10vw, 168px);

  /* --- named vertical rhythm -------------------------------------------
     Five shells each hand-rolled their own clamp() for section padding and
     drifted 4-10px from the shell nine pages use. The VALUES below are
     byte-identical to what each shell already had -- check-rhythm.py proves
     every section keeps its computed padding -- but each intent now has a
     name, so one edit moves everything that breathes at the same rate.

       --section        canonical band rhythm, 9 pages
       --section-tight  dense summary bands (work triage, home "not for")
                      These were two separate clamps 14px apart on desktop
                      for no reason -- both are a short summary on a dark
                      surface. Measured 70px vs 84px. Now one value.
       --section-air    deliberately airier (cross-promo)
       --section-deep   asymmetric top/bottom (method, proof)               */
  --section-tight: clamp(40px, 5vw, 72px);   /* triage, nfy */
  --section-air:   clamp(56px, 7vw, 104px);  /* robots  */
  --section-deep:  clamp(72px, 8vw, 120px);  /* method, proof */
  --maxw: 1500px;

  /* Shape — square by default, pills only for actions */
  --pill: 999px;

  /* Motion */
  --fast: 180ms;
  --med: 280ms;
  --slow: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 172px;
}
  html { scroll-padding-top: clamp(128px, 18vh, 200px); }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--on-dark);
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-size: clamp(16px, 1.02vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* `clip` instead of `hidden`. `overflow-x: hidden` made BODY a scroll
     container, and a sticky element resolves its nearest scrolling ancestor --
     so every position:sticky on this site (the scope rail, the calc panel,
     the header) was silently dead and just scrolled away. `clip` clips
     horizontally without creating a scroll container, so sticky works.
     Supported in all current engines; the `hidden` line stays as a fallback
     for anything older, declared first so `clip` wins where supported. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.022em; }
p { margin: 0 0 1.1em; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
strong { font-weight: 800; color: inherit; }
/* Was: color var(--white). That is surface-blind -- it assumed every
   surface was dark. On .band-light (paper background) white-on-paper
   measured 1.109:1 and the emphasised words were invisible. Components
   that genuinely need white or gold on dark declare it themselves
   (.hero-lede, .faq-a, .narr-block, .return-row, .nfy-foot). */
em { font-style: normal; }

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

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--gold); color: var(--carbon);
  padding: 12px 20px; font-weight: 800; letter-spacing: 0.04em;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Type scale ---------- */
.section-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 850;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.section-title em { color: var(--gold); }

.section-title .index {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 1.4em;
  font-variation-settings: normal;
}

/* ---------- Buttons ---------- */
.button {
  /* Every metric here is a token. They were literals, which is how
     .robots-btn ended up on 56px / 1.6em / 0.92rem / wght 780 / track 0.02
     while .button sat on 54px / 1.5em / 0.9rem / wght 750 / track 0.01 --
     two buttons, same component, visibly different. A literal cannot be
     compared against another literal; a token can. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--display);
  font-variation-settings: "wdth" var(--btn-wdth), "wght" var(--btn-wght);
  font-size: var(--btn-size);
  font-weight: var(--btn-wght);
  letter-spacing: var(--btn-track);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; flex: 0 0 auto; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button-gold  { background: var(--gold); color: var(--carbon); }
.button-gold:hover { background: var(--gold-bright); }

.button-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.34); }
.button-ghost:hover { border-color: var(--gold); color: var(--gold); }

.button-block { width: 100%; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  background: var(--carbon);
  transition: background var(--med) var(--ease),
              backdrop-filter var(--med) var(--ease),
              border-color var(--med) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8, 12, 17, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule-dark);
}
.brand { flex: 0 0 auto; display: block; overflow: visible; }
/* Wordmark set in the brand display face as real text.
   Replaced a PNG that was fully white with a variable alpha channel and no
   legible letterforms -- it rendered as glyph noise over the carbon hero. */
.brand-word {
  display: block; flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 96, "wght" 900;
  font-size: 1.42rem;
  line-height: .92;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.brand-word b { display: block; font-weight: inherit; }
.brand-word .lim {
  display: flex; align-items: center; gap: .42em;
  color: var(--gold);
}
/* The gold rule standing in for the original bar accent. */
.brand-word .lim::before {
  content: ""; display: block;
  width: .30em; height: .30em;
  background: var(--gold);
  flex: 0 0 auto;
}

.primary-nav {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
  margin-left: auto;
}
.primary-nav a {
  position: relative;
  font-size: 0.78rem; font-weight: 700;
  font-variation-settings: "wdth" 92, "wght" 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark-dim);
  padding: 6px 0;
  transition: color var(--fast) var(--ease);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--white); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); }

.primary-nav .nav-cta {
  /* Reads as part of the nav row, not as a button dropped into it.
   *
   * It used to carry the .button tokens -- 54px tall, 0.9rem, 0.01em tracking,
   * title case -- against nav words at 0.78rem / 0.1em / uppercase / ~25px tall.
   * Different size, different tracking, different case, twice the height. Next
   * to the words it read as an unrelated object parked in the header, which is
   * what kept making this effect feel off no matter how the motion was tuned.
   *
   * So it now matches .primary-nav a on every typographic axis and differs only
   * in colour and the gold outline, which is what still marks it as the CTA.
   *
   * Deliberately NOT the site button tokens any more. Matching .button made it
   * inline-in-the-wrong-way: it could never belong to this row. */
  font-size: 0.78rem;
  font-weight: 700;
  font-variation-settings: "wdth" 92, "wght" 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 13px;
  min-height: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--carbon);
  white-space: nowrap;
}
.primary-nav .nav-cta::after { display: none; }
.primary-nav .nav-cta:hover { background: var(--gold-bright); color: var(--carbon); }

.menu-toggle {
  display: none;
  margin-left: auto;
  align-items: center; gap: 10px;
  background: transparent; border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--pill);
  padding: 10px 16px; min-height: 44px;
  color: var(--white); cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.menu-toggle i {
  width: 16px; height: 1.5px; background: currentColor; position: relative; display: block;
}
.menu-toggle i::after {
  content: ""; position: absolute; inset: 5px 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform var(--fast) var(--ease);
}
.menu-toggle[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(45deg); }

/* A single gold horizon wash — atmospheric, not a decorative grid */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 76% at 78% 6%, rgba(255,182,18,0.15), transparent 62%),
    radial-gradient(90% 60% at 4% 96%, rgba(255,182,18,0.06), transparent 66%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-bottom: clamp(24px, 4vw, 44px);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(255,182,18,0.16);
}

.hero-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 72, "wght" 860;
  /* Reeler has no width axis, so it sets wider than the condensed Archivo it
     replaced. The old 10.4vw/9.4rem and 17ch measure pushed "YOUR PROCESS DID."
     onto a second line. Both are stepped down to hold the three-line lockup. */
  font-size: clamp(2.9rem, 10.2vw, 8.6rem);
  line-height: 0.92;
  /* Review: the headline was set at -0.038em on a narrow width axis (wdth 72),
     which crushed the counters until the words ran together. Loosen the tracking
     and let word-spacing do the separating, so each word reads as a unit while
     the letters inside a word stay tight. */
  letter-spacing: 0.006em;  /* slightly positive so Reeler's chunky forms breathe */
  word-spacing: 0.22em;   /* raised from 0.16em: words read as units */
  /* No text-wrap:balance here. It balances each block's line lengths, which
     split "Your process did." after "Your" even though the 1340px container is
     wider than the line's 1229px natural width. */
  white-space: nowrap;
}
.hero-title .line { white-space: nowrap; }
@media (max-width: 900px) {
  .hero-title, .hero-title .line { white-space: normal; }
}

/* A hair more air between the three stacked lines than the old 0.855 gave --
   at 0.855 the lines visually collided. */
.hero-title .line { display: block; }
/* Slightly looser inside the gold line so it does not read as a solid slab. */
.hero-title .gold { color: var(--gold); letter-spacing: 0.004em; }
@media (max-width: 900px) {
  .hero-title { font-size: clamp(2.5rem, 6.6vw, 5.2rem); }
}

.hero-title em {
  color: var(--gold);
  font-variation-settings: "wdth" 72, "wght" 300;
  letter-spacing: -0.012em;
}

.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(28px, 3.4vw, 46px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.hero-lede {
  font-size: clamp(1.06rem, 1.42vw, 1.3rem);
  line-height: 1.56;
  color: var(--on-dark);
  max-width: 56ch;
  margin-bottom: 1.5em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note {
  font-family: var(--mono);
  font-size: 0.82rem; line-height: 1.62; letter-spacing: 0.02em;
  color: var(--on-dark-dim);
  border-left: 1px solid var(--gold);
  padding-left: 16px;
  margin: 22px 0 0; max-width: 46ch;
}

/* Proof figures — real archive counts, deliberately modest in scale */
.hero-proof {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--rule-dark);
}
.hero-proof dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.hero-proof dl > div {
  padding: 26px clamp(12px, 2vw, 30px) 30px;
  border-right: 1px solid var(--rule-dark);
}
.hero-proof dl > div:first-child { padding-left: 0; }
.hero-proof dl > div:last-child { border-right: 0; }
.hero-proof dt {
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 850;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--gold);
  margin-bottom: 10px;
}
.hero-proof dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem; line-height: 1.5;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark-dim);
}

/* Hero art — real artifact photography, cropped hard */
.hero-art {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(16px, 2.4vw, 40px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.art { margin: 0; position: relative; }
.art img {
  width: 100%; height: clamp(240px, 34vw, 480px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--slow) var(--ease);
}
.art-a img { object-position: 50% 42%; }
.art-b img { object-position: 50% 55%; }
.art:hover img, .art:focus-within img { filter: grayscale(0) contrast(1); }

.art figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(8,12,17,0.92), rgba(8,12,17,0));
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-dim);
}
.art figcaption b { color: var(--gold); font-weight: 700; }

/* =========================================================================
   MANIFESTO  (light)
   ========================================================================= */
.manifesto {
  background: var(--paper); color: var(--ink);
  padding: var(--section) var(--gutter);
}
.manifesto .section-title { max-width: 20ch; }
.manifesto .section-title em { color: var(--gold-ink); }
.manifesto-body {
  margin: clamp(34px, 5vw, 62px) auto 0;
  padding-left: clamp(0px, 8vw, 220px);
  max-width: var(--maxw);
  columns: 2; column-gap: clamp(28px, 4vw, 64px);
}
.manifesto-body p {
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.68;
  color: #222b35;
  break-inside: avoid;
}
.manifesto-body strong { color: var(--ink); }
.manifesto-body .accent-line {
  font-family: var(--display);
  font-variation-settings: "wdth" 82, "wght" 800;
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: var(--ink);
  border-top: 3px solid var(--gold);
  padding-top: 22px;
  margin-top: 1.2em;
  break-inside: avoid;
}

/* =========================================================================
   AI AUDIT
   ========================================================================= */
.audit-head { max-width: var(--maxw); margin: 0 auto; }
.audit-intro {
  max-width: 60ch; margin: 26px 0 0;
  font-size: clamp(1.02rem, 1.24vw, 1.18rem);
  color: var(--on-dark-dim);
}

.audit-grid {
  max-width: var(--maxw); margin: clamp(38px, 5vw, 68px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 48px);
  align-items: start;
}

.audit-form {
  background: var(--carbon-lift);
  border: 1px solid var(--rule-dark);
  padding: clamp(22px, 3vw, 40px);
}
.audit-step { border: 0; padding: 0; margin: 0 0 30px; }
.audit-step legend {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px; padding: 0;
}
.step-num { color: var(--gold); }

.chip-set { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { cursor: pointer; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: flex; align-items: center;
  padding: 10px 15px;
  min-height: 44px;
  border: 1px solid var(--rule-dark);
  border-radius: var(--pill);
  font-size: 0.85rem;
  font-variation-settings: "wdth" 95, "wght" 600;
  color: var(--on-dark-dim);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.chip:hover span { border-color: rgba(255,255,255,0.4); color: var(--white); }
.chip input:checked + span {
  background: var(--gold); border-color: var(--gold);
  color: var(--carbon); font-variation-settings: "wdth" 88, "wght" 750;
}
.chip input:focus-visible + span { outline: 3px solid var(--white); outline-offset: 2px; }

.audit-hint {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.08em; color: var(--on-dark-faint);
  text-align: center; margin: 14px 0 0;
}

/* Result panel */
.audit-result { position: sticky; top: 100px; }
/* ---------- Empty-state spec plate (was 1.2:1 ghost text — unreadable) ---------- */
.result-empty,
.calc-empty {
  border: 1px dashed var(--rule-dark);
  background: var(--carbon);
  padding: clamp(24px, 3vw, 40px);
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.result-label {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.result-hint {
  color: var(--on-dark-dim); max-width: 40ch; font-size: 1rem; line-height: 1.55;
  margin-bottom: 26px;
}
/* Real preview of what the tool returns — legible, purposeful, no ghost text. */
.result-ghost {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule-dark);
}
.result-ghost span {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
}
.result-ghost span b {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 850;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1; letter-spacing: -0.022em;
  color: var(--gold);
  flex: 0 0 auto;
}
.result-ghost span em {
  font-style: normal; font-weight: 400; letter-spacing: 0.06em;
  color: var(--on-dark-dim); font-size: 0.62rem;
  margin-left: auto; text-align: right;
}

.diagnosis {
  background: var(--gold); color: var(--carbon);
  padding: clamp(22px, 3vw, 40px);
  animation: diag-in 420ms var(--ease) both;
} from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; }

.diag-head { border-bottom: 2px solid rgba(16,24,32,0.24); padding-bottom: 18px; margin-bottom: 20px; }
.diag-severity {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(16,24,32,0.66); margin-bottom: 10px;
}
.diag-headline {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 850;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  line-height: 0.98; text-transform: uppercase; letter-spacing: -0.028em;
  margin: 0;
}

.diag-row { padding: 16px 0; border-bottom: 1px solid rgba(16,24,32,0.16); }
.diag-row:last-of-type { border-bottom: 0; }
.diag-row dt {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(16,24,32,0.62); margin-bottom: 8px;
}
.diag-row dd {
  margin: 0;
  font-size: 0.98rem; line-height: 1.52;
  font-variation-settings: "wdth" 96, "wght" 550;
  color: #0b1118;
}
.diag-row dd strong { color: var(--carbon); }

.diag-move {
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 850;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.1; text-transform: uppercase; letter-spacing: -0.022em;
  color: var(--carbon);
}
.diag-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.diagnosis .button-ghost { border-color: rgba(16,24,32,0.4); color: var(--carbon); }
.diagnosis .button-ghost:hover { border-color: var(--carbon); color: var(--carbon); background: rgba(16,24,32,0.07); }
.diagnosis .diag-copy {
  background: transparent; border: 1px solid rgba(16,24,32,0.4); color: var(--carbon);
}
.diagnosis .diag-copy:hover { background: var(--carbon); color: var(--gold); }
.diag-fine {
  font-family: var(--mono); font-size: 0.62rem; line-height: 1.6;
  letter-spacing: 0.05em; color: rgba(16,24,32,0.6);
  margin: 18px 0 0; max-width: 46ch;
}

/* =========================================================================
   CAPABILITIES  (light)
   ========================================================================= */
.cap-head {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
}
.cap-head .section-title em { color: var(--gold-ink); }
.cap-lede { font-size: clamp(1rem, 1.16vw, 1.12rem); color: #38424e; max-width: 44ch; margin: 0 0 6px; }

.cap-list { max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0; border-top: 3px solid var(--ink); }
.cap-list > li {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 60px);
  padding: clamp(26px, 3vw, 44px) 0;
  border-bottom: 1px solid var(--rule-light);
  transition: background var(--fast) var(--ease);
}
.cap-list > li:hover { background: rgba(255,182,18,0.1); }

.cap-verb {
  font-family: var(--display);
  font-variation-settings: "wdth" 72, "wght" 860;
  font-size: clamp(1.5rem, 3.1vw, 2.7rem);
  line-height: 0.94; text-transform: uppercase; letter-spacing: -0.03em;
  color: var(--gold-ink);
}
.cap-body h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 86, "wght" 800;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cap-body p { color: #38424e; max-width: 74ch; margin-bottom: 1em; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cap-tags li {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--rule-light); border-radius: var(--pill);
  color: #55606d;
}

/* =========================================================================
   PROOF
   ========================================================================= */
.proof { background: var(--carbon); padding: var(--section) var(--gutter); }
.proof-head { max-width: var(--maxw); margin: 0 auto clamp(34px, 5vw, 64px); }
.proof-head p { max-width: 62ch; color: var(--on-dark-dim); font-size: 1.04rem; }

.case {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3.4vw, 68px); align-items: center;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--rule-dark);
}
.case-media { position: relative; }
.case-media img {
  width: 100%; height: clamp(260px, 34vw, 460px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--slow) var(--ease);
}
.case-media::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.16); pointer-events: none;
}
.case:hover .case-media img, .case:focus-within .case-media img { filter: grayscale(0) contrast(1); }
.case:hover .case-media::after { border-color: var(--gold); }

.case-type {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.case-copy h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 850;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 0.94; text-transform: uppercase; letter-spacing: -0.03em;
  margin-bottom: 18px; color: var(--white);
}
.case-lede { font-size: clamp(1.04rem, 1.3vw, 1.2rem); color: var(--white); line-height: 1.52; }
.case-copy p { color: var(--on-dark-dim); max-width: 60ch; }
.case-list { margin-top: 20px; border-top: 1px solid var(--rule-dark); }
.case-list li {
  padding: 11px 0 11px 24px;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 0.92rem; color: var(--on-dark);
  position: relative;
}
.case-list li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 9px; height: 9px; background: var(--gold);
}
.case-note {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.6;
  letter-spacing: 0.04em; color: var(--on-dark-faint);
}
.case-note strong { color: var(--gold); }

.brand-register { margin-top: 26px; padding: 20px 0; border-top: 2px solid var(--gold); }
.brand-register-label {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.brand-register ul { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-register li {
  font-size: 0.82rem; font-variation-settings: "wdth" 92, "wght" 650;
  padding: 8px 13px; border: 1px solid var(--rule-gold); border-radius: var(--pill);
  color: var(--white);
}

.case-pair {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.4vw, 68px);
}
.case-pair .case { grid-template-columns: 1fr; align-content: start; }

.case-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.case-media-compact img { height: clamp(180px, 22vw, 320px); }

/* Ledger */
.ledger {
  max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0;
  border-top: 3px solid var(--gold);
  padding-top: clamp(28px, 3.4vw, 48px);
}
.ledger-head {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 60px); margin-bottom: 34px;
}
.ledger-head h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 850;
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  line-height: 0.98; text-transform: uppercase; letter-spacing: -0.028em;
  color: var(--white);
}
.ledger-head p { color: var(--on-dark-dim); margin: 0; }
.ledger-rows { border-top: 1px solid var(--rule-dark); }
.ledger-rows article {
  display: grid;
  grid-template-columns: 108px minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.7fr);
  gap: clamp(12px, 2vw, 32px);
  align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule-dark);
}
.ledger-badge {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--carbon); background: var(--gold);
  padding: 5px 9px; border-radius: var(--pill);
  text-align: center; margin: 0;
}
.ledger-rows h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 84, "wght" 780;
  font-size: 1.14rem; line-height: 1.14; text-transform: uppercase;
  letter-spacing: -0.018em; color: var(--white); margin: 0;
}
.ledger-rows p { margin: 0; font-size: 0.9rem; color: var(--on-dark-dim); }
.ledger-tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--on-dark-faint);
}

/* =========================================================================
   CLIENTS  (the gold field)
   ========================================================================= */
.clients-head { max-width: var(--maxw); margin: 0 auto clamp(34px, 4vw, 56px); }
.clients-head .section-title em { color: var(--gold); }
.clients-head p { max-width: 60ch; color: var(--on-dark-dim); font-size: 1.04rem; }

.marquee {
  background: var(--gold); color: var(--carbon);
  padding: 20px 0; overflow: hidden;
  border-block: 1px solid rgba(16,24,32,0.2);
}
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; } from { transform: translateX(0); } to { transform: translateX(-50%); }
.marquee-group { display: flex; align-items: center; }
.marquee-group li {
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 840;
  font-size: clamp(1.3rem, 2.7vw, 2.2rem);
  line-height: 1; text-transform: uppercase; letter-spacing: -0.025em;
  white-space: nowrap;
  padding: 0 clamp(16px, 2vw, 34px);
  border-right: 1px solid rgba(16,24,32,0.22);
}

.roster {
  max-width: var(--maxw); margin: clamp(38px, 5vw, 66px) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
.roster-col h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 850;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  text-transform: uppercase; letter-spacing: -0.022em;
  color: var(--white);
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 2px solid var(--gold);
}
.roster-h3 { margin-top: 34px; }
.roster-hint {
  font-family: var(--mono); font-size: 0.64rem; line-height: 1.6;
  letter-spacing: 0.06em; color: var(--on-dark-faint);
  margin-bottom: 18px;
}
.roster-list { border-top: 1px solid var(--rule-dark); }
.roster-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-dark);
}
.roster-list b {
  font-variation-settings: "wdth" 94, "wght" 720;
  font-size: 0.95rem; color: var(--white); line-height: 1.28;
}
.roster-list span {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--on-dark-faint);
}
.roster-list-compact li { padding: 8px 0; }

.roster-footnote {
  max-width: var(--maxw); margin: clamp(28px, 3vw, 44px) auto 0;
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.65;
  letter-spacing: 0.05em; color: var(--on-dark-faint);
  border-top: 1px solid var(--rule-dark); padding-top: 20px;
}

/* =========================================================================
   PRICING  (light)
   ========================================================================= */
.pricing-head { max-width: var(--maxw); margin: 0 auto clamp(34px, 4vw, 56px); }
.pricing-head .section-title { max-width: 22ch; }
.pricing-head .section-title em { color: var(--gold-ink); }
.pricing-head p { max-width: 62ch; color: #38424e; }

.tiers {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule-light);
  border-top: 4px solid var(--ink);
  padding: clamp(22px, 2.4vw, 34px);
}
.tier-featured {
  background: var(--carbon); color: var(--on-dark);
  border-color: var(--carbon); border-top-color: var(--gold);
  transform: translateY(-10px);
}
.tier-flag {
  position: absolute; top: -1px; right: 0;
  background: var(--gold); color: var(--carbon);
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 12px;
}
.tier-name {
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 850;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  line-height: 1; text-transform: uppercase; letter-spacing: -0.026em;
  color: var(--ink); margin-bottom: 20px;
}
.tier-featured .tier-name { color: var(--white); }
.tier-price {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--display);
  font-variation-settings: "wdth" 68, "wght" 860;
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  line-height: 0.9; letter-spacing: -0.038em;
  color: var(--ink); margin-bottom: 16px;
}
.tier-featured .tier-price { color: var(--gold); }
.tier-price .currency { font-size: 0.44em; font-variation-settings: "wdth" 80, "wght" 800; }
.tier-price .per {
  font-family: var(--mono); font-size: 0.24em; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  margin-left: 6px;
}
.tier-featured .tier-price .per { color: var(--on-dark-dim); }
.tier-for { font-size: 0.94rem; color: #38424e; margin-bottom: 22px; min-height: 3em; }
.tier-featured .tier-for { color: var(--on-dark-dim); }
.tier-list { border-top: 1px solid var(--rule-light); margin-bottom: 24px; flex: 1; }
.tier-featured .tier-list { border-color: var(--rule-dark); }
.tier-list li {
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--rule-light);
  font-size: 0.88rem; color: #2b343f; position: relative; line-height: 1.5;
}
.tier-featured .tier-list li { border-color: var(--rule-dark); color: var(--on-dark); }
.tier-list li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 7px; height: 7px; background: var(--gold);
}
.tier .button-ghost { border-color: rgba(16,24,32,0.34); color: var(--ink); }
.tier .button-ghost:hover { border-color: var(--gold-ink); background: var(--gold); color: var(--carbon); }
.tier-note {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--ink-muted); margin: 14px 0 0;
}
.tier-featured .tier-note { color: var(--on-dark-faint); }

.math {
  max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0;
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(22px, 3vw, 60px);
  border-top: 3px solid var(--ink); padding-top: clamp(24px, 3vw, 40px);
}
.math h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 850;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1; text-transform: uppercase; letter-spacing: -0.026em;
  color: var(--ink);
}
.math-body p { color: #38424e; max-width: 62ch; }
.math-body strong { color: var(--ink); }

/* =========================================================================
   HISTORY
   ========================================================================= */
.history-head { max-width: var(--maxw); margin: 0 auto clamp(34px, 4vw, 56px); }
.history-head p { max-width: 60ch; color: var(--on-dark-dim); font-size: 1.04rem; }

.timeline { max-width: var(--maxw); margin: 0 auto; border-top: 3px solid var(--gold); }
.timeline > li {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 56px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--rule-dark);
}
.timeline time {
  font-family: var(--display);
  font-variation-settings: "wdth" 68, "wght" 850;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height: 0.92; letter-spacing: -0.03em;
  color: var(--white);
}
.timeline h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 86, "wght" 780;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--gold); margin-bottom: 10px;
}
.timeline p { color: var(--on-dark-dim); max-width: 76ch; margin: 0; }
.timeline .is-now time { color: var(--gold); }

.about {
  max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0;
  border-top: 1px solid var(--rule-dark); padding-top: clamp(30px, 4vw, 56px);
}
.about-body-wrap {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 68px); align-items: center;
}
.about-mark {
  border-left: 1px solid var(--gold);
  padding-left: clamp(16px, 2vw, 28px);
}
.about-mark-line {
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 860;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 0.96; text-transform: uppercase; letter-spacing: -0.03em;
  color: var(--white); margin: 0 0 4px;
}
.about-mark-line.gold { color: var(--gold); }
.about-mark-note {
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.7;
  letter-spacing: 0.05em; color: var(--on-dark-faint);
  margin: 16px 0 0; max-width: 30ch;
}
.about-label {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.about-body h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 860;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: -0.03em;
  color: var(--white); margin-bottom: 6px;
}
.about-role {
  font-family: var(--display);
  font-variation-settings: "wdth" 90, "wght" 650;
  font-size: 0.92rem; letter-spacing: 0.02em;
  color: var(--gold); margin-bottom: 18px;
}
.about-body p { color: var(--on-dark-dim); max-width: 70ch; }

/* =========================================================================
   START / BOOKING
   ========================================================================= */
/* .start is normally a top-level section and owns its own --section padding.
   On contact.html it is nested INSIDE .band-deep, which already applies the
   same padding: 140px + 140px at 1400px stacked into a ~300px black void
   between the hero and the first bullet. When .start is a child of .band the
   parent owns the padding. This is the only page in the site that nests it. */
.band .start { padding: 0; }
.start {
  background: var(--carbon-deep); color: var(--on-dark);
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px); align-items: start;
}
.start-copy { width: 100%; }
.start-copy p { color: var(--on-dark-dim); max-width: 48ch; }
.start-expect { margin-top: 26px; border-top: 1px solid var(--rule-dark); }
.start-expect li {
  padding: 13px 0 13px 26px; border-bottom: 1px solid var(--rule-dark);
  position: relative; font-size: 0.95rem; color: var(--on-dark);
}
.start-expect li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 9px; height: 9px; background: var(--gold);
}
.start-domain {
  margin-top: 30px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 800;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -0.02em; color: var(--gold);
}
.start-domain-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-faint);
}

.brief {
  background: var(--carbon-lift);
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--gold);
  padding: clamp(22px, 3vw, 40px);
  width: 100%;
}
.brief-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 76, "wght" 850;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  text-transform: uppercase; letter-spacing: -0.026em;
  color: var(--white); margin: 0 0 8px;
}
.brief-sub {
  font-family: var(--mono); font-size: 0.66rem; line-height: 1.6;
  letter-spacing: 0.05em; color: var(--on-dark-faint);
  margin-bottom: 26px;
}
.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 2px solid var(--rule-dark);
  padding: 11px 0; min-height: 44px;
  color: var(--white); font-size: 0.98rem;
  transition: border-color var(--fast) var(--ease);
  border-radius: 0;
}
.field select { cursor: pointer; }
.field select option { background: var(--carbon-lift); color: var(--white); }
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-faint); }
.field input:hover, .field textarea:hover, .field select:hover { border-bottom-color: rgba(255,255,255,0.36); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--gold);
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.form-status {
  font-family: var(--mono); font-size: 0.66rem; line-height: 1.65;
  letter-spacing: 0.05em; color: var(--on-dark-faint);
  margin: 16px 0 0; min-height: 2.4em;
}
.form-status.is-ok { color: var(--gold); }
.form-status.is-err { color: #ff8f6b; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: #05080b; padding: clamp(40px, 5vw, 72px) var(--gutter) 32px; }
.footer-top {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
  padding-bottom: 28px; border-bottom: 1px solid var(--rule-dark);
}
/* Footer wordmark: the real logotype again, so it matches the archived original
   (img.footer-mark, height 88px, width auto) rather than the text substitute. */
.footer-wordmark-glow { display: block; }
img.footer-mark {
  height: 88px; width: auto; max-width: none;
  object-fit: contain; display: block;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px); }
.footer-nav a {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-dim); transition: color var(--fast) var(--ease);
}
.footer-nav a:hover { color: var(--gold); }
.footer-bottom {
  max-width: var(--maxw); margin: 28px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: clamp(14px, 2.4vw, 40px); align-items: start;
}
.footer-bottom p { font-size: 0.84rem; color: var(--on-dark-dim); margin: 0; max-width: 44ch; }
.footer-fine {
  font-family: var(--mono); font-size: 0.62rem !important;
  line-height: 1.7; letter-spacing: 0.04em; color: var(--on-dark-faint) !important;
}
.back-top {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}

/* =========================================================================
   REVEAL
   ========================================================================= */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
@media (max-width: 1180px) {
  .roster { grid-template-columns: 1fr 1fr; }
  .roster-col:last-child { grid-column: 1 / -1; }
  .roster-col:last-child .roster-list { columns: 2; column-gap: 32px; }
  .roster-col:last-child .roster-list li { break-inside: avoid; }
  .ledger-rows article { grid-template-columns: 100px minmax(0, 1fr); row-gap: 8px; }
  .ledger-rows .ledger-tag { grid-column: 2; }
}
@media (max-width: 1024px) {
  .hero-lower { grid-template-columns: 1fr; }
  .hero-art { grid-template-columns: 1fr 1fr; }
  .case { grid-template-columns: 1fr; }
  .case-wide { grid-template-columns: 1fr; }
  .case-pair { grid-template-columns: 1fr 1fr; }
  .cap-head { grid-template-columns: 1fr; align-items: start; }
  .math { grid-template-columns: 1fr; }
  .start { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .tier-featured { transform: none; }
  .audit-grid { grid-template-columns: 1fr; }
  .audit-result { position: static; }
  .footer-bottom { grid-template-columns: 1fr; }
  .back-top { justify-self: start; }
  .manifesto-body { padding-left: 0; }
}
@media (max-width: 900px) {
  /* Keep the toggle above the overlay so the menu can always be closed. */
  .menu-toggle { display: inline-flex; position: relative; z-index: 3; }
  .primary-nav {
    position: fixed; inset: 0; z-index: 2;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: clamp(14px, 2.4vw, 22px);
    padding: 96px var(--gutter) 48px;
    background: var(--carbon-deep);
    transform: translateX(100%);
    transition: transform var(--med) var(--ease);
    margin-left: 0;
    overflow-y: auto;
  }
  .primary-nav.open { transform: translateX(0); }
  .primary-nav a {
    font-family: var(--display);
    font-variation-settings: "wdth" 72, "wght" 850;
    font-size: clamp(2rem, 9vw, 3.4rem);
    line-height: 1; letter-spacing: -0.03em;
    color: var(--white);
  }
  .primary-nav a::after { display: none; }
  /* Gold outline on gold fill would be unreadable — invert to gold line + gold ink. */
  .primary-nav .nav-cta {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    padding: 0.34em 1.1em;
    margin-top: 6px;
  }
  .primary-nav .nav-cta:hover { background: var(--gold); color: var(--carbon); }
  .site-header { padding: 14px var(--gutter); }
  .brand { position: relative; z-index: 3; }
  /* Header wordmark size is owned by the ladder in components.css, which
   loads later. Kept here only so the mark still has a height if that
   stylesheet is ever unavailable. */
.brand .ol-wordmark { height: 54px; width: auto; display: block; }
}
@media (max-width: 780px) {
  .hero-proof dl { grid-template-columns: 1fr 1fr; }
  .hero-proof dl > div { padding: 20px 18px; }
  .hero-proof dl > div:nth-child(2n) { border-right: 0; }
  .hero-proof dl > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dark); }
  .hero-proof dl > div:first-child { padding-left: 18px; }
  .case-pair { grid-template-columns: 1fr; }
  .roster { grid-template-columns: 1fr; }
  .roster-col:last-child { grid-column: auto; }
  .roster-col:last-child .roster-list { columns: 1; }
  .manifesto-body { columns: 1; }
  .ledger-head { grid-template-columns: 1fr; }
  .field-pair { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  :root { --section: 74px; }
  .hero { padding-top: 120px; }
  /* Let condensed display type use the full measure instead of breaking early. */
  .hero-title { max-width: none; font-size: clamp(2.7rem, 15vw, 4rem); }
  .eyebrow { font-size: 0.62rem; letter-spacing: 0.14em; }
  .hero-art { grid-template-columns: 1fr; }
  .art img { height: 250px; }
  .cap-list > li { grid-template-columns: 1fr; gap: 12px; }
  .timeline > li { grid-template-columns: 1fr; gap: 8px; }
  .ledger-rows article { grid-template-columns: 1fr; }
  .ledger-rows .ledger-tag { grid-column: auto; }
  .about-body-wrap { grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .diag-cta .button { width: 100%; }
  .audit-form .button-block { width: 100%; }
  .chip span { padding: 9px 13px; font-size: 0.82rem; }
}
@media (min-width: 2560px) {
  :root {
    font-size: clamp(18px, calc(0.36687vw + 9.93px), 32px);
    --maxw: clamp(1760px, calc(42.977vw + 814.5px), 3400px);
  }
  /* font-size and --maxw now interpolate from the 2200 block above. */
  html { scroll-padding-top: 206px; }
  .site-header { padding-left: clamp(32px, 3vw, 72px); padding-right: clamp(32px, 3vw, 72px); }
  html { scroll-padding-top: 232px; }
  .header-rail { height: 34px; }
  .site-header { top: 34px !important; }
  .rail-track { font-size: 13px; gap: 30px; }
}
@media (min-width: 3840px) {
  /* :root hits its clamp ceiling (32px / 3400px) exactly here. */
  .header-rail { height: 44px; }
  .site-header { top: 44px !important; padding-left: 64px; padding-right: 64px; }
  .rail-track { font-size: 15px; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .art:hover img, .case:hover .case-media img { filter: grayscale(1) contrast(1.05); }
}

/* =========================================================================
   BENCHMARK BAR — the attributed industry evidence
   ========================================================================= */
.bench-head { max-width: var(--maxw); margin: 0 auto clamp(34px, 4.4vw, 58px); }
.bench-eyebrow {
  display: block;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #101820;
  margin-bottom: 18px;
}
.bench-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 800;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.06; text-transform: uppercase; letter-spacing: -0.028em;
  max-width: 30ch; margin: 0;
}

.bench-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(16, 24, 32, 0.22);
  border: 1px solid rgba(16, 24, 32, 0.22);
}
.bench-card {
  background: var(--gold); color: var(--carbon);
  padding: clamp(20px, 2.2vw, 32px);
  display: flex; flex-direction: column;
}
.bench-card-key { background: var(--carbon); color: var(--gold); }
.bench-card-key .bench-copy { color: rgba(255,255,255,0.94); }
.bench-card-key .bench-copy strong { color: var(--gold); }
.bench-card-key .bench-src { color: rgba(255,255,255,0.74); }
.bench-card-key .bench-src em { color: rgba(255,255,255,0.88); }

.bench-num {
  font-family: var(--display);
  font-variation-settings: "wdth" 62, "wght" 870;
  font-size: clamp(3.1rem, 7vw, 5.6rem);
  line-height: 0.84; letter-spacing: -0.045em;
  margin: 0 0 16px;
  font-feature-settings: "tnum";
}
.bench-num .pct { font-size: 0.44em; vertical-align: 0.62em; letter-spacing: -0.02em; }
.bench-copy {
  font-size: 1rem; line-height: 1.55;
  font-variation-settings: "wdth" 96, "wght" 500;
  color: #101820;
  margin: 0 0 14px;
}
.bench-copy strong { color: var(--carbon); }
.bench-src {
  font-family: var(--mono); font-size: 0.74rem; line-height: 1.7;
  letter-spacing: 0.04em; color: #101820;
  margin: auto 0 0; padding-top: 14px;
  border-top: 1px solid rgba(16, 24, 32, 0.18);
}
.bench-src em { font-style: italic; }

.bench-pull {
  max-width: var(--maxw); margin: clamp(30px, 4vw, 52px) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: start;
  border-top: 2px solid rgba(16, 24, 32, 0.32); padding-top: clamp(20px, 2.6vw, 32px);
}
.bench-pull p {
  font-family: var(--display);
  font-variation-settings: "wdth" 98, "wght" 550;
  font-size: clamp(1.06rem, 1.26vw, 1.2rem);
  line-height: 1.6; color: #101820;
  margin: 0; max-width: 62ch;
}
.bench-pull strong { color: var(--carbon); font-variation-settings: "wdth" 92, "wght" 800; }
.bench-pull .bench-action {
  font-variation-settings: "wdth" 80, "wght" 850;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.14; text-transform: uppercase; letter-spacing: -0.022em;
}
.bench-action a { border-bottom: 3px solid var(--carbon); }
.bench-card:hover { background: var(--gold-bright); }
.bench-action a:hover { border-bottom-color: rgba(16, 24, 32, 0.35); }

/* =========================================================================
   METHOD
   ========================================================================= */
.method { background: var(--carbon); padding: var(--section) var(--gutter); }
.method-head {
  max-width: var(--maxw); margin: 0 auto clamp(36px, 4.6vw, 62px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(22px, 3.6vw, 64px); align-items: end;
}
.method-head p { color: var(--on-dark-dim); max-width: 48ch; margin: 0 0 4px; }

.phase-list { max-width: var(--maxw); margin: 0 auto; border-top: 3px solid var(--gold); }
.phase {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(20px, 3vw, 60px);
  padding: clamp(26px, 3.2vw, 46px) 0;
  border-bottom: 1px solid var(--rule-dark);
}
.phase-head { position: relative; }
.phase-num {
  display: block;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.22em; color: var(--gold); margin-bottom: 12px;
}
.phase-head h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 72, "wght" 860;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: -0.032em;
  color: var(--white); margin-bottom: 10px;
}
.phase-when {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-faint); margin: 0;
}
.phase-body p { color: var(--on-dark-dim); max-width: 68ch; }
.phase-body ul { display: flex; flex-wrap: wrap; gap: 7px; }
.phase-body ul li {
  font-family: var(--mono); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--rule-gold); border-radius: var(--pill);
  color: var(--white);
}

.timeline-strip {
  max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0;
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--gold);
  padding: clamp(24px, 3vw, 42px);
}
.timeline-strip h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 850;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  text-transform: uppercase; letter-spacing: -0.026em;
  color: var(--white); margin-bottom: 22px;
}
.timeline-strip ol {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
.timeline-strip li {
  background: var(--carbon); padding: clamp(16px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 7px;
}
.ts-week {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.ts-what {
  font-family: var(--display);
  font-variation-settings: "wdth" 90, "wght" 700;
  font-size: 0.98rem; line-height: 1.24; letter-spacing: -0.014em; color: var(--white);
}
.timeline-note {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--on-dark-dim); margin: 20px 0 0;
}

/* =========================================================================
   ROI CALCULATOR
   ========================================================================= */
.calc { background: var(--paper); color: var(--ink); padding: var(--section) var(--gutter); }
.calc-head {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(22px, 3.6vw, 64px); align-items: end;
}
.calc-head .section-title em { color: var(--gold-ink); }
.calc-intro { color: #38424e; max-width: 46ch; margin: 0 0 4px; }

.calc-grid {
  max-width: var(--maxw); margin: clamp(34px, 4.4vw, 58px) auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.8vw, 52px); align-items: start;
}
.calc-form {
  background: var(--white);
  border: 1px solid var(--rule-light);
  border-top: 4px solid var(--ink);
  padding: clamp(22px, 3vw, 40px);
}
.slider-field { margin-bottom: 28px; }
.slider-field label {
  display: block;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: 6px;
}
.slider-field output {
  display: block; margin-bottom: 14px;
  font-family: var(--display);
  font-variation-settings: "wdth" 70, "wght" 850;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1; letter-spacing: -0.032em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* The track was invisible (1.25:1). Now: visible rail + gold fill + tall hit area. */
.slider-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; margin: 0 0 10px;
  border-radius: var(--pill);
  background: #c9c4b8;
  border: 1px solid rgba(16, 24, 32, 0.28);
  cursor: pointer;
  display: block;
}
.slider-field input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--pill); background: transparent;
}
.slider-field input[type="range"]::-moz-range-track {
  height: 8px; border-radius: var(--pill); background: transparent;
}
.slider-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--gold); border: 4px solid var(--carbon);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.28);
  cursor: grab;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.slider-field input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); border: 4px solid var(--carbon);
  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.28);
  cursor: grab;
}
.slider-field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.slider-field input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.16); cursor: grabbing;
}
.slider-field input[type="range"]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 5px;
}
.slider-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--ink);
}
.calc-hint {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--ink-muted); text-align: center; margin: 14px 0 0;
}

.calc-out { position: sticky; top: 100px; }
.calc-empty { border-color: var(--rule-light); }
.calc-empty .result-label { color: var(--gold-ink); }
.calc-empty .result-hint { color: #38424e; }
.calc-empty .result-ghost { border-top-color: var(--rule-light); }
.calc-empty .result-ghost span { color: var(--ink); border-bottom-color: var(--rule-light); }
.calc-empty .result-ghost span b { color: var(--gold-ink); }
.calc-empty .result-ghost span em { color: var(--ink-muted); }

.return {
  background: var(--carbon); color: var(--on-dark);
  padding: clamp(22px, 3vw, 40px);
  animation: diag-in 420ms var(--ease) both;
}
.return-head { border-bottom: 2px solid var(--gold); padding-bottom: 18px; margin-bottom: 20px; }
.return-severity {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.return-headline {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 860;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 0.98; text-transform: uppercase; letter-spacing: -0.028em;
  margin: 0; color: var(--white);
}
.return-hero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule-dark);
  border: 1px solid var(--rule-dark); margin-bottom: 18px;
}
.return-hero > div { background: var(--carbon); padding: 16px 14px; }
.return-hero .rh-label {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark-dim); margin: 0 0 8px;
}
.return-hero .rh-num {
  font-family: var(--display);
  font-variation-settings: "wdth" 70, "wght" 860;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1; letter-spacing: -0.032em;
  color: var(--gold); margin: 0; font-variant-numeric: tabular-nums;
}
.return-hero .rh-num.good { color: #7fd48a; }
.return-hero .rh-num.bad  { color: #ff8f6b; }

.return-row { padding: 14px 0; border-bottom: 1px solid var(--rule-dark); }
.return-row:last-of-type { border-bottom: 0; }
.return-row dt {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px;
}
.return-row dd {
  margin: 0; font-size: 0.94rem; line-height: 1.5;
  font-variation-settings: "wdth" 96, "wght" 500; color: var(--on-dark);
}
.return-row dd strong { color: var(--white); }
.return-tier {
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 850;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  text-transform: uppercase; letter-spacing: -0.022em; color: var(--white);
}
.return-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.return .return-copy { background: transparent; border: 1px solid rgba(255,255,255,0.34); color: var(--white); }
.return .return-copy:hover { background: var(--gold); border-color: var(--gold); color: var(--carbon); }

.calc-disclaimer {
  max-width: var(--maxw); margin: clamp(32px, 4vw, 52px) auto 0;
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.8;
  letter-spacing: 0.04em; color: #55606d;
  border-top: 1px solid var(--rule-light); padding-top: 22px;
  max-width: min(var(--maxw), 108ch);
}
.calc-disclaimer strong { color: var(--ink); font-family: var(--mono); }

/* =========================================================================
   COMPARE
   ========================================================================= */
.compare { background: var(--carbon-deep); padding: var(--section) var(--gutter); }
.compare-head {
  max-width: var(--maxw); margin: 0 auto clamp(34px, 4.4vw, 58px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(22px, 3.6vw, 64px); align-items: end;
}
.compare-head p { color: var(--on-dark-dim); max-width: 46ch; margin: 0 0 4px; }

.compare-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 40px);
}
.compare-col {
  padding: clamp(22px, 2.8vw, 38px);
  border: 1px solid var(--rule-dark);
}
.compare-for { background: rgba(255, 182, 18, 0.07); border-color: var(--rule-gold); }
.compare-against { background: rgba(255,255,255,0.03); }
.compare-col h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 850;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  text-transform: uppercase; letter-spacing: -0.026em;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 2px solid var(--gold);
  color: var(--white);
}
.compare-against h3 { border-bottom-color: var(--rule-dark); }
.compare-col ul li {
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
  font-size: 0.95rem; line-height: 1.5; color: var(--on-dark);
}
.compare-col ul li:last-child { border-bottom: 0; }
.compare-col ul li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 9px; height: 9px; background: var(--gold);
}
.compare-against ul li::before { background: var(--on-dark-faint); }
.compare-col em { color: var(--gold); }

.compare-table { max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0; }
.compare-table h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 850;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  text-transform: uppercase; letter-spacing: -0.026em;
  color: var(--white); margin-bottom: 22px;
}
.ctable-scroll { overflow-x: auto; border: 1px solid var(--rule-dark); }
.compare-table table {
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: var(--carbon);
}
.compare-table th, .compare-table td {
  text-align: left; padding: 16px 18px;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 0.9rem; line-height: 1.45;
}
.compare-table thead th {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--rule-dark);
}
.compare-table tbody th {
  font-family: var(--display);
  font-variation-settings: "wdth" 84, "wght" 780;
  font-size: 1rem; text-transform: uppercase; letter-spacing: -0.016em;
  color: var(--white); white-space: nowrap;
}
.compare-table tbody td { color: var(--on-dark-dim); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.ctable-us th, .ctable-us td {
  background: var(--gold); color: var(--carbon); border-bottom-color: rgba(16,24,32,0.24);
}
.ctable-us th { color: var(--carbon); }
.ctable-us td { color: #101820; font-variation-settings: "wdth" 96, "wght" 600; }
.ctable-note {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.72;
  letter-spacing: 0.05em; color: var(--on-dark-dim); margin: 18px 0 0;
}

/* =========================================================================
   TRUST
   ========================================================================= */
.trust { background: var(--carbon); padding: var(--section) var(--gutter); }
.trust-head {
  max-width: var(--maxw); margin: 0 auto clamp(34px, 4.4vw, 58px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(22px, 3.6vw, 64px); align-items: end;
}
.trust-head p { color: var(--on-dark-dim); max-width: 46ch; margin: 0 0 4px; }
.trust-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
.trust-card { background: var(--carbon); padding: clamp(22px, 2.6vw, 36px); }
.trust-card h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 840;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  text-transform: uppercase; letter-spacing: -0.024em;
  color: var(--gold); margin-bottom: 12px;
}
.trust-card p { color: var(--on-dark-dim); font-size: 0.92rem; margin: 0; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { background: var(--carbon-deep); padding: var(--section) var(--gutter); }
.faq-head { max-width: var(--maxw); margin: 0 auto clamp(32px, 4vw, 54px); }
.faq-list { max-width: 1000px; margin: 0 auto; border-top: 3px solid var(--gold); }
.faq-item { border-bottom: 1px solid var(--rule-dark); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--display);
  font-variation-settings: "wdth" 86, "wght" 750;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.22; letter-spacing: -0.02em;
  color: var(--white);
  transition: color var(--fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; margin-left: auto; flex: 0 0 auto;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--gold); }
.faq-body { padding-right: 40px; } .faq-body { padding-right: 0; }
.faq-body p {
  color: var(--on-dark-dim); font-size: 0.98rem; line-height: 1.66;
  max-width: 74ch; margin: 0;
}

/* ---------- screen-reader only ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
  .bench-grid { grid-template-columns: 1fr 1fr; }
  .bench-pull { grid-template-columns: 1fr; }
  .timeline-strip ol { grid-template-columns: 1fr 1fr; }
  .method-head, .calc-head, .compare-head, .trust-head { grid-template-columns: 1fr; align-items: start; }
  .phase { grid-template-columns: 1fr; gap: 14px; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .compare-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .bench-grid { grid-template-columns: 1fr; }
  .bench-card { border: 0; }
  .bench-pull { border-top: 1px solid rgba(16,24,32,0.24); }
  .trust-grid { grid-template-columns: 1fr; }
  .timeline-strip ol { grid-template-columns: 1fr; }
  .faq-body { padding-right: 0; }
  .return-hero { grid-template-columns: 1fr; }
  .calc-disclaimer { font-size: 0.64rem; }
}


/* =========================================================================
   READING PROGRESS — subtle gold motion
   ========================================================================= */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255, 255, 255, 0.07);
  z-index: 120; pointer-events: none;
}
.read-progress i {
  display: block; height: 100%; width: 0;
  background: var(--gold);
  /* was: box-shadow 0 0 10px gold -- the site now carries no drop shadows */
  transition: width 90ms linear;
}

/* =========================================================================
   OPERATOR CONSOLE — coded imagery with a job to do
   Illustrates the five phases and the 90-day build rather than decorating.
   ========================================================================= */
.console {
  max-width: var(--maxw); margin: 0 auto clamp(30px, 4vw, 52px);
  background: var(--carbon-deep);
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--gold);
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--rule-dark);
}
.console-bar .dot-r, .console-bar .dot-y, .console-bar .dot-g {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
}
.console-bar .dot-r { background: rgba(255,255,255,0.22); }
.console-bar .dot-y { background: var(--gold); }
.console-bar .dot-g { background: rgba(255,255,255,0.22); }
.console-title {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--on-dark-dim); margin: 0 0 0 12px;
}
.console-live {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; color: var(--gold); margin: 0 0 0 auto;
}
.console-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  animation: pulse 1.8s ease-in-out infinite;
}
  0%, 100% { opacity: 1; transform: scale(1); }
@media (max-width: 900px) {
  50% { opacity: 0.35; transform: scale(0.82); }
}


.console-body { padding: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) 8px; min-height: 216px; }
.console-cmd {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--white); margin: 0 0 14px;
}
.console-caret {
  display: inline-block; width: 9px; height: 1.05em;
  background: var(--gold); vertical-align: text-bottom;
  animation: blink 1.05s steps(2, start) infinite;
} 50% { opacity: 0; }

.console-log li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  font-family: var(--mono); font-size: 0.74rem; line-height: 1.75;
  color: var(--on-dark-dim);
  animation: log-in 380ms var(--ease) both;
}
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
.console-log .lg-tag { color: var(--gold); font-weight: 700; letter-spacing: 0.1em; }
.console-log .lg-ok  { color: #7fd48a; font-weight: 700; letter-spacing: 0.1em; }
.console-log .lg-run { color: var(--gold); font-weight: 700; letter-spacing: 0.1em; }
.console-log b { color: var(--white); font-weight: 700; }

.console-foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2vw, 26px); align-items: center;
  padding: 14px clamp(16px, 2vw, 26px);
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--rule-dark);
}
.console-phase {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-dim); margin: 0; white-space: nowrap;
}
.console-phase b, .console-phase span { color: var(--gold); }
.console-bar-track {
  height: 6px; background: rgba(255, 255, 255, 0.12);
  border-radius: var(--pill); overflow: hidden;
}
.console-bar-track i {
  display: block; height: 100%; width: 0;
  background: var(--gold);
  transition: width 620ms var(--ease);
}
.console-pct {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  color: var(--white); margin: 0; font-variant-numeric: tabular-nums;
}

/* =========================================================================
   CODED TEXTURE — faint, purposeful, never wallpaper
   ========================================================================= */
.method {
  position: relative;
  background:
    radial-gradient(80% 44% at 88% 6%, rgba(255,182,18,0.07), transparent 62%),
    var(--carbon);
}
/* The old hero carried a hardcoded binary strip here. It read as a generic
   "tech company" tell and, once the canvas behind it went dark, as a glitch
   artifact. The node network now carries the texture. */
.hero::after {
  content: none;
  position: absolute; right: -40px; bottom: 26%;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em;
  color: rgba(255, 182, 18, 0.16);
  white-space: nowrap; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* =========================================================================
   COUNT-UP numerals
   ========================================================================= */
.count-up { font-variant-numeric: tabular-nums; }

/* =========================================================================
   BENCH CARD — subtle lift on hover
   ========================================================================= */
.bench-card { transition: background var(--med) var(--ease); }
/* The inverted card must NOT flip to gold on hover — its text is gold. */
.bench-card { transition: box-shadow var(--med) var(--ease); }
.bench-card:not(.bench-card-key):hover { box-shadow: inset 0 -5px 0 var(--gold-bright); }
.bench-card-key:hover { box-shadow: inset 0 -5px 0 var(--gold); }
/* =========================================================================
   PRINT
   =========================================================================
   These rules were orphaned onto the screen stylesheet when a dead-code purge
   deleted the "@media print {" line above them: a rule sharing a selector list
   with the at-rule opener was removed, taking the wrapper with it. The result
   was `body { background: #fff; color: #000 }` applying to SCREEN, which made
   every inherited heading black on a dark band -- the contact page title was
   unreadable. check-css-parse could not see it: braces balanced and no comment
   was broken. Only measuring the rendered result found it.
   ====================================================================== */
@media print {
  .site-header, .marquee, .hero-art, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .proof, .start, .hero { background: #fff; color: #000; }
}
.css-parse-sentinel { --css-parse-sentinel: 1; }