/* ============================================================
   Valutus.com, desk register
   Built to valutus-identity-decisions v3.3 (July 30, 2026)
   and valutus-messaging-architecture v2.2 (Aug 23, 2026).

   Binding constraints applied here:
   - IBM Plex only (Serif, Sans, Mono).
   - Italic is reserved to the wordmark. Nothing else slants.
   - Wordmark terminal period is INK, never the accent.
   - Two amber steps, one accent. --amber #D97706 is the mark:
     rules, hatches, chart strokes, and text on navy. --amber-ink
     #B45309 is for amber as text on white, where #D97706 fails
     contrast at 3.19:1 and #B45309 passes at 5.02:1. Same hue,
     darker value, not a second accent.
   - Copper never appears on white or navy. Tool register only,
     per v3.3 D's cross-register rule.
   - Hero figure is --amber-ink, upright Plex Serif, tabular. This
     revises v3.3 D, which kept heroes in ink solely because amber
     failed contrast on white. Pending D's sign-off.
   - Navy is a full-bleed GROUND only, never an element inside a
     white page. On navy: cream text ladder, amber allowed as text.
   - The Plex Mono signature line (§L) sits under the hero
     figure only, in the fixed METHOD · SCOPE · BASIS grammar.
   - No gradients, shadows, glow, radius, or floating cards.
   ============================================================ */

:root {
  /* Ground + ink */
  --white:    #FFFFFF;
  --panel:    #FAF8F4;   /* tonal panel, warm near-white */
  --ink:      #1A1513;   /* full ink */
  --muted:    #5C5449;   /* body, and the mono signature tone */
  --faint:    #6B6358;   /* metadata: eyebrows, runheads, dates.
                            Was #938B80, which measured 3.36:1 on white and
                            3.17:1 on the panel: below AA for text this small.
                            #797166 is 4.81:1 and 4.53:1, clearing AA on both. */

  /* Single accent. Semantic: revealed value / the answer.
     --amber is the mark: rules, hatches, chart strokes, and text ON NAVY
     (4.65:1 there, passes). --amber-ink is the same accent one value step
     down, for the rare case where amber must be TEXT ON WHITE: 5.02:1,
     which clears the normal-text floor that #D97706 fails at 3.19:1.
     Not a second accent. Same hue, darker value, white ground only. */
  --amber:      #D97706;
  --amber-ink:  #B45309;
  --amber-wash: #FDF6EC;

  /* Navy ground, v3.3 C. Used full-bleed on page heads and closers only.
     Never as an element, rule, or link color inside a white page (v3.3 D). */
  --navy:         #1A2744;
  --cream:        #E8E3D5;   /* primary text on navy, 11.6:1 */
  --cream-muted:  #C3BDAE;   /* citations and signatures only, 7.9:1 */
  --cream-rule:   rgba(232, 227, 213, 0.22);

  /* Rules */
  --rule:     rgba(26, 21, 19, 0.18);
  --hairline: rgba(26, 21, 19, 0.09);

  /* Grid */
  --gutter:     clamp(20px, 5vw, 64px);
  --margin-col: 148px;
  --measure:    64ch;

  /* Type scale */
  --t-hero:   clamp(2.4rem, 5.8vw, 4rem);
  --t-h2:     clamp(1.75rem, 3.4vw, 2.5rem);
  --t-h3:     clamp(1.125rem, 1.6vw, 1.3125rem);
  --t-body:   1.0625rem;
  --t-small:  0.9375rem;  /* 15px */
  --t-label:  0.75rem;    /* was 0.6875rem/11px, too small to read comfortably */
  --t-figure: clamp(3.5rem, 8.5vw, 6rem);
}

/* Single-ground design by decision: the desk register is white.
   Every color is painted explicitly so the page holds on any host. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
::selection { background: var(--amber-wash); color: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.skip {
  position: absolute; left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--ink); color: var(--white);
  padding: 12px 18px; z-index: 100; text-decoration: none;
  font: 500 var(--t-small)/1 "IBM Plex Sans", sans-serif;
}
.skip:focus { transform: none; }

/* ---------- Shell: the ledger grid ---------------------------- */

.shell { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.band       { border-top: 1px solid var(--hairline); }
.band--rule { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  gap: 0 40px;
  padding: clamp(48px, 7vw, 92px) 0;
}
@media (max-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
}

/* Marginalia: mono runheads and upright serif section numerals.
   Rule under the numeral is an ink hairline, NOT amber: the short
   horizontal amber rule was retired as an accent home in v3.2. */
.margin {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.7;
  padding-top: 10px;
}
.margin .num {
  display: block;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.margin .num::after {
  content: "";
  display: block;
  width: 32px; height: 1px;
  background: var(--rule);
  margin-top: 12px;
}
@media (max-width: 860px) {
  .margin { padding-top: 0; display: flex; align-items: baseline; gap: 14px; }
  .margin .num { margin-bottom: 0; font-size: 1.125rem; }
  .margin .num::after { display: none; }
}

/* ---------- Type ---------------------------------------------- */

h1, h2, h3 {
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.012em;
}
h1 { font-size: var(--t-hero); line-height: 1.06; letter-spacing: -0.026em; }
h2 { font-size: var(--t-h2);   line-height: 1.15; }
h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: var(--t-h3); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.005em;
}

p { margin: 0; max-width: var(--measure); }
.stack   > * + * { margin-top: 20px; }
.stack-s > * + * { margin-top: 12px; }
.stack-l > * + * { margin-top: 36px; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.58; color: var(--muted); max-width: 58ch;
}
.body  { color: var(--muted); }
/* Full-ink lede. For an opening paragraph that carries argument rather than
   setting the scene: --muted reads as secondary and costs contrast on the
   line most likely to be read. */
.lede--ink { color: var(--ink); }
.small { font-size: var(--t-small); line-height: 1.55; color: var(--muted); }

/* Emphasis on white, §E: two inks. Never italic, never a second color. */
.lede strong, .body strong, .small strong, .step__body strong {
  color: var(--ink); font-weight: 500;
}

/* Metadata voice: Plex Mono, faint. Eyebrows, runheads, dates, tags. */
.meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The house signature, §L. Hero figure only. Plex Mono at muted tone,
   fixed grammar METHOD · SCOPE · BASIS, middot delimiter. */
.sig {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

/* Non-signature notes stay sans so they cannot be mistaken for it. */
.note { font-size: 0.875rem; line-height: 1.5; color: var(--faint); max-width: 46ch; }

a.link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
}
a.link:hover { text-decoration-color: var(--ink); }

sup.fn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.62em; font-weight: 500;
  color: var(--faint);
  vertical-align: super; line-height: 0; margin-left: 1px;
}
sup.fn a { text-decoration: none; }
sup.fn a:hover { color: var(--ink); }

/* ---------- Wordmark + masthead -------------------------------- */

.masthead { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 1px solid var(--hairline); }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }

/* The only italic in the system. Terminal period is ink (v3.0). */
.wordmark {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600; font-style: italic;
  font-size: 1.4375rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.nav a {
  font-size: var(--t-small); font-weight: 450; color: var(--muted);
  text-decoration: none; padding: 6px 0;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.nav .tel {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem; letter-spacing: 0.02em; color: var(--faint); border-bottom: none;
}
.nav .tel:hover { color: var(--ink); border-bottom-color: transparent; }
@media (max-width: 780px) { .nav .tel { display: none; } .nav { gap: 16px; } .nav a { font-size: 0.8125rem; } }
@media (max-width: 640px) {
  .masthead { position: static; }
  .masthead__in { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 14px 10px; }
  .nav { flex-wrap: wrap; width: 100%; gap: 18px; }
}

/* ---------- Buttons: flat, square ------------------------------ */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--t-small)/1 "IBM Plex Sans", sans-serif;
  padding: 14px 22px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--white);
  text-decoration: none; border-radius: 0;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.btn:hover { background: var(--white); color: var(--ink); }
.btn .arw { font-family: "IBM Plex Mono", monospace; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); }

/* ---------- Hero ----------------------------------------------- */

.hero { padding-block: clamp(52px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.hero h1 { max-width: 16ch; margin-top: 20px; }
.hero .lede { margin-top: 26px; }
.hero .actions { margin-top: 34px; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px); align-items: end;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; } }

/* AMBER MARK 1 of 3: the vertical rule beside the hero figure.
   The endorsed desk emphasis device (v3.2). */
.figure { border-left: 2px solid var(--amber); padding-left: 22px; }
.figure__n {
  display: block;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;                 /* upright, never italic (v3.3) */
  font-size: var(--t-figure);
  line-height: 0.92; color: var(--amber-ink);
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
}
.figure__label { margin-top: 16px; font-size: var(--t-small); line-height: 1.45; color: var(--ink); max-width: 30ch; }
.figure .sig { margin-top: 12px; }

/* ---------- The measurement line ------------------------------- */

.ice { max-width: 480px; margin: 0; }
.ice__row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0 22px; }
.ice__row--top { align-items: end; }
.ice__row--bot { align-items: start; }
.ice__bar { width: 100%; }
.ice__row--top .ice__bar { height: 78px; display: flex; align-items: flex-end; }
.ice__row--bot .ice__bar { height: 312px; }

.ice__fill { width: 100%; height: 0; transition: height 1100ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.ice__fill--vis { background: var(--ink); }              /* counted */
.ice__fill--sub {                                        /* present, uncounted */
  background-color: var(--amber-wash);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(217,119,6,0.30) 6px 7px);
  border: 1.5px solid var(--amber); border-top: none;
}
.is-drawn .ice__fill { height: 100%; }
@media (prefers-reduced-motion: reduce) { .ice__fill { transition: none; height: 100%; } }

/* AMBER MARK 2 of 3: the measurement line itself. */
.ice__line { border-top: 1px dashed var(--amber); position: relative; margin: 0; height: 26px; }
.ice__line span {
  position: absolute; left: 0; top: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--faint);              /* label is ink-family, not amber text */
}
.ice__x { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.09em; color: var(--faint); font-variant-numeric: tabular-nums; }
.ice__t { font-size: var(--t-small); font-weight: 500; color: var(--ink); margin-top: 3px; }
.ice__d { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; max-width: 26ch; margin-top: 3px; }

.sig__f { white-space: nowrap; }

/* Prose beside the diagram on wide screens. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px) { .split { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- Pull quote ----------------------------------------- */

.quote { margin: 4px 0 0; padding-left: 22px; border-left: 1px solid var(--rule); }
.quote__t {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  line-height: 1.34; letter-spacing: -0.014em;
  color: var(--ink); max-width: 36ch; margin: 0;
}
.quote__a {
  margin-top: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Mechanism ------------------------------------------ */

.mech-line {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(1.5rem, 3.1vw, 2.375rem);
  line-height: 1.2; letter-spacing: -0.018em;
  color: var(--faint); max-width: 22ch;
}
.mech-line b { font-weight: 400; color: var(--ink); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--rule); }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { padding: 28px 32px 32px 0; border-right: 1px solid var(--hairline); }
.step:last-child { border-right: none; padding-right: 0; }
@media (max-width: 860px) {
  .step { border-right: none; border-bottom: 1px solid var(--hairline); padding-right: 0; }
  .step:last-child { border-bottom: none; }
}
.step__n { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 500; font-size: 1.125rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.step__verb { font-family: "IBM Plex Serif", Georgia, serif; font-size: 1.625rem; line-height: 1.1; margin: 10px 0 6px; letter-spacing: -0.015em; }
.step__claim { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.step__body { font-size: var(--t-small); color: var(--muted); line-height: 1.58; }

/* ---------- Tonal panel ---------------------------------------- */

.panel { background: var(--panel); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(26px, 3.6vw, 40px); }
.panel--tight { padding: 22px 26px; }

/* AMBER MARK 3 of 3: vertical rule on the positioning panel. */
.panel--stance { border-left: 2px solid var(--amber); border-top: none; border-bottom: none; }

.pull { font-family: "IBM Plex Serif", Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.875rem); line-height: 1.12; letter-spacing: -0.022em; max-width: 18ch; color: var(--faint); }
.pull b { font-weight: 400; color: var(--ink); }

/* ---------- CORE ledger ---------------------------------------- */

.core { border-top: 1px solid var(--rule); }
.core__row { display: grid; grid-template-columns: 72px minmax(0, 200px) minmax(0, 1fr); gap: 0 32px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
@media (max-width: 760px) {
  .core__row { grid-template-columns: 48px minmax(0, 1fr); gap: 0 20px; }
  .core__row .core__d { grid-column: 2; margin-top: 6px; }
}
/* Anchor variant of the row, for where the whole row is a destination.
   Mirrors a.ledger__row so the two behave identically. */
a.core__row { text-decoration: none; color: inherit; transition: background 160ms ease-out; }
a.core__row:hover { background: var(--panel); }
.core__k { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 500; font-size: 2.125rem; line-height: 0.95; color: var(--ink); }
.core__t { font-weight: 600; font-size: 1.0625rem; color: var(--ink); padding-top: 6px; }
.core__d { font-size: var(--t-small); color: var(--muted); line-height: 1.55; padding-top: 7px; }

/* ---------- Data strip (left aligned, never centered) ----------- */

.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .strip, .strip--2 { grid-template-columns: minmax(0, 1fr); } }
.stat { padding: 26px 28px 26px 0; border-right: 1px solid var(--hairline); }
.stat:last-child { border-right: none; }
@media (max-width: 760px) {
  .stat { border-right: none; border-bottom: 1px solid var(--hairline); padding-right: 0; }
  .stat:last-child { border-bottom: none; }
}
.stat__n { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 600; font-size: clamp(2.25rem, 4.2vw, 3rem); line-height: 0.98; color: var(--ink); letter-spacing: -0.026em; font-variant-numeric: tabular-nums; }
.stat__t { margin-top: 12px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }

/* ---------- Quotes -------------------------------------------- */

.quotes { max-width: 62ch; }
.quotes__stage { min-height: 1px; }

.q { margin: 0; }
.q[hidden] { display: none; }
.q__t {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  line-height: 1.36; letter-spacing: -0.014em;
  color: var(--ink); margin: 0;
}
.q__a {
  margin-top: 20px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label); letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--faint); line-height: 1.7;
}
.q__a b { display: block; color: var(--ink); font-weight: 500; letter-spacing: 0.11em; }

.js .quotes__stage .q { opacity: 0; transition: opacity 320ms ease-out; }
.js .quotes__stage .q.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .quotes__stage .q { transition: none; opacity: 1; }
}

.quotes__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.quotes__count {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label); letter-spacing: 0.13em; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.quotes__nav { display: flex; gap: 8px; }
.qbtn {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.875rem; line-height: 1;
  width: 40px; height: 36px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
  cursor: pointer;
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.qbtn:hover { border-color: var(--ink); background: var(--panel); }

/* ---------- Service ledger ------------------------------------- */

.ledger { border-top: 1px solid var(--rule); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 300px) 128px minmax(0, 1fr); gap: 0 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: background 160ms ease-out; }
a.ledger__row:hover { background: var(--panel); }
@media (max-width: 860px) { .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.ledger__t { font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.ledger__tag { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); }
.ledger__d { font-size: var(--t-small); color: var(--muted); line-height: 1.5; }

/* ---------- Insights ------------------------------------------- */

.posts { border-top: 1px solid var(--rule); }
.post { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 32px; padding: 26px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: background 160ms ease-out; }
.post:hover { background: var(--panel); }
@media (max-width: 760px) { .post { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.post__d { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); padding-top: 6px; }
.post__t { font-family: "IBM Plex Serif", Georgia, serif; font-size: 1.375rem; line-height: 1.24; letter-spacing: -0.015em; color: var(--ink); }
.post__x { margin-top: 8px; font-size: var(--t-small); color: var(--muted); max-width: 62ch; line-height: 1.55; }

/* ---------- Credentials, typeset (never a logo wall) ----------- */

.creds { font-size: var(--t-small); color: var(--muted); max-width: 60ch; }
.creds b { color: var(--ink); font-weight: 500; }

/* ---------- Closing + footer ----------------------------------- */

.closer { padding-block: clamp(52px, 7.5vw, 96px); border-top: 1px solid var(--rule); }
/* The tagline sets in full ink. The two load-bearing words take the accent.
   This is a narrow, deliberate exception to v3.3 D ("amber as text on white:
   no"), granted by D on 24 Aug 2026 and bounded by size: --t-tagline runs
   28px to 48px, which is WCAG large text, where amber on white measures
   3.19:1 against a 3:1 floor. Amber as text stays banned below display size,
   which is where the 4.5:1 floor bites. Copper is not an option here: v3.3 D
   scopes it to the tool register and states it never appears on white. */
.tagline { font-family: "IBM Plex Serif", Georgia, serif; font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -0.024em; max-width: 20ch; color: var(--ink); }
.tagline b { font-weight: 400; color: var(--ink); }
.tagline .hl { color: var(--amber-ink); }

.footnotes { border-top: 1px solid var(--hairline); padding-block: 30px; }
.footnotes ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: fn; }
.footnotes li { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; line-height: 1.6; color: var(--faint); max-width: 96ch; padding-left: 26px; position: relative; counter-increment: fn; }
.footnotes li::before { content: counter(fn); position: absolute; left: 0; top: 0; color: var(--muted); }
.footnotes a { color: var(--muted); }

.foot { border-top: 1px solid var(--rule); padding-block: 30px 44px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: baseline; justify-content: space-between; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot a { font-size: var(--t-small); color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.foot__c { font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; color: var(--faint); letter-spacing: 0.04em; }

.mono-inline { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.92em; }

/* ---------- Inner-page utilities ------------------------------- */

.pagehead { padding-block: clamp(44px, 6.5vw, 84px) clamp(26px, 4vw, 44px); }
.pagehead h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); max-width: 20ch; margin-top: 20px; }
.pagehead .lede { margin-top: 24px; }

.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.twocol--tight { gap: clamp(20px, 2.5vw, 32px); }

.field { display: grid; gap: 7px; }
.field label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
}
.field input, .field textarea, .field select {
  font: 400 var(--t-body)/1.5 "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--rule); border-radius: 0;
  padding: 12px 14px; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); border-bottom-width: 2px;
}
.field textarea { min-height: 150px; resize: vertical; }

/* ---------- Navy grounds ---------------------------------------- */
/* v3.3 C, the separator-and-body split, applied to a scrolling page:
   the page head is the cover and the closer closes the frame it opened.
   Everything carrying the argument stays white. Ground-keyed rules apply
   inside: cream text ladder, amber permitted AS text, signature at
   --cream-muted. "Content is never gray", so only citations dim. */

.ground { width: 100%; }
.ground--navy { background: var(--navy); color: var(--cream); }

.ground--navy h1,
.ground--navy h2,
.ground--navy h3,
.ground--navy .lede,
.ground--navy .body,
.ground--navy .tagline,
.ground--navy .quote__t { color: var(--cream); }

/* Amber as text is allowed here and only here. */
.ground--navy .meta { color: var(--amber); }
.ground--navy .tagline .hl { color: var(--amber); }

/* Skippable material only. */
.ground--navy .sig,
.ground--navy .note,
.ground--navy .small,
.ground--navy .quote__a,
.ground--navy .figure__label { color: var(--cream-muted); }

.ground--navy .quote { border-left-color: var(--cream-rule); }
.ground--navy .figure { border-left-color: var(--amber); }
.ground--navy .figure__n { color: var(--cream); }

.ground--navy a.link { color: var(--cream); text-decoration-color: var(--cream-rule); }
.ground--navy a.link:hover { text-decoration-color: var(--cream); }

.ground--navy .btn { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.ground--navy .btn:hover { background: transparent; color: var(--cream); }
.ground--navy .btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream-rule); }
.ground--navy .btn--ghost:hover { border-color: var(--cream); }

.ground--navy :focus-visible { outline-color: var(--amber); }

/* A navy band carrying one line. The cover role reduced to its smallest
   useful form: the headline gets the ground, everything around it stays
   white. Cheaper than a full navy head and it puts the color where the
   eye lands first. */
.headband { padding-block: clamp(34px, 4.6vw, 58px); margin-top: 22px; }
.headband h1 { max-width: 24ch; }

/* ---------- The EARN equation ----------------------------------- */
/* Demand Realization's computation, set as the equation it is:
   E x A x R = N. Letter tiles carry the accent because this is the
   named method, drawn from the existing EARN slide. Hairline boxes,
   no radius, no shadow. */

.earn { margin: 0; }
.earn__row { display: flex; align-items: stretch; flex-wrap: nowrap; }
.earn__box { flex: 1 1 0; min-width: 0; border: 1px solid var(--hairline); padding: 20px 18px 22px; }
.earn__op {
  display: flex; align-items: center; padding: 0 clamp(8px, 1.4vw, 18px);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.0625rem; color: var(--faint);
}
.earn__k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--amber); color: var(--white);
  font-family: "IBM Plex Serif", Georgia, serif; font-weight: 600; font-size: 1.75rem;
}
.earn__t { margin-top: 16px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.earn__d { margin-top: 5px; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 860px) {
  .earn__row { flex-direction: column; }
  .earn__op { padding: 10px 0; }
}

/* ---------- Preference charts ----------------------------------- */
/* Redrawn from the NRS case study. Ink is the measured baseline,
   amber hatch is the lift, exactly as the waterline uses them. */

.prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 56px); margin: 0; }
@media (max-width: 760px) { .prefs { grid-template-columns: minmax(0, 1fr); } }

.prefs__plot { display: grid; gap: 10px; align-items: end; height: 190px; border-bottom: 1px solid var(--rule); margin-top: 16px; }
.prefs__labels { display: grid; gap: 10px; margin-top: 10px; }
.prefs__labels span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); line-height: 1.35;
}
.prefs__labels span.is-key { color: var(--ink); }
.prefs--4 .prefs__plot, .prefs--4 .prefs__labels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prefs--2 .prefs__plot, .prefs--2 .prefs__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A column built from a counted base plus a surfaced increment. The axis
   starts at zero and the increment is to scale, so no break is needed. */
.prefs__stack { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.prefs--3 .prefs__plot, .prefs--3 .prefs__labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.prefs__bar { height: var(--h); }
.prefs__bar--base { background: var(--ink); }
.prefs__bar--lift {
  background-color: var(--amber-wash);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(217,119,6,0.32) 6px 7px);
  border: 1.5px solid var(--amber); border-bottom: none;
}
.js .prefs__bar { transform: scaleY(0); transform-origin: bottom; transition: transform 950ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.is-drawn .prefs__bar { transform: none; }

/* ---------- The ask ladder -------------------------------------- */
/* Ordered by how hard the ask is, not by measured size. Horizontal so
   it cannot be mistaken for one of the column charts above it. */

.ladder { margin: 0; display: grid; gap: 10px; }
.ladder__step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 18px; align-items: center; }
.ladder__n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem; color: var(--faint); font-variant-numeric: tabular-nums;
}
.ladder__bar { height: 40px; display: flex; align-items: center; padding-left: 16px; width: var(--w); background: var(--ink); color: var(--white); }
.ladder__bar--peak {
  background-color: var(--amber-wash);
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(217,119,6,0.32) 6px 7px);
  border: 1.5px solid var(--amber); color: var(--ink);
}
.ladder__t { font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
.js .ladder__bar { transform: scaleX(0); transform-origin: left; transition: transform 800ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.is-drawn .ladder__bar { transform: none; }
@media (max-width: 620px) {
  .ladder__bar { width: 100% !important; }
  .ladder__t { white-space: normal; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .prefs__bar, .js .ladder__bar { transition: none; transform: none; }
}

/* ---------- Charts --------------------------------------------- */
/* Tufte-flat. Ink carries the measured baseline, amber marks the revealed
   value, exactly as in the waterline diagram. No gridlines beyond a hairline
   zero rule, no fills except the amber hatch, no legends the labels can carry.
   This is the desk-register answer to the open chart-stroke question, v3.3 G-4,
   made consistent with the precedent already set on the homepage. */

.chart { max-width: 660px; margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart figcaption { margin-top: 18px; }

.ch-axis { stroke: var(--rule);     stroke-width: 1; fill: none; }
.ch-zero { stroke: var(--hairline); stroke-width: 1; fill: none; }
.ch-ctrl { stroke: var(--faint);    stroke-width: 1; fill: none; opacity: 0.5; }
.ch-ink  { stroke: var(--ink);      stroke-width: 1.75; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ch-lift { stroke: var(--amber);    stroke-width: 2.25; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ch-cut  { stroke: var(--amber);    stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.ch-bar  { fill: var(--ink); }
.ch-inc  { fill: url(#hatch); stroke: var(--amber); stroke-width: 1.5; }
.ch-brk  { stroke: var(--rule); stroke-width: 1; fill: none; }
.ch-mask { fill: var(--white); }

/* SVG text sits in user units, so it shrinks with the viewBox as the container
   narrows. Both charts share one 640-unit viewBox, so one set of steps keeps
   labels at roughly 10px rendered from a phone up to the full measure. */
.chart { --ch-t: 10px; --ch-n: 12.5px; }
@media (max-width: 640px) { .chart { --ch-t: 14px; --ch-n: 17.5px; } }
@media (max-width: 480px) { .chart { --ch-t: 19px; --ch-n: 24px; } }

.ch-t { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--ch-t); letter-spacing: 0.11em; text-transform: uppercase; fill: var(--faint); }
.ch-n { font-family: "IBM Plex Sans", sans-serif; font-size: var(--ch-n); font-weight: 500; fill: var(--ink); }

/* Data reveal only, per v3.3 I. Bars grow, series wipe in, once, then stop. */
.chart .grow { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box;
               transition: transform 900ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.chart .wipe { transform: scaleX(0); transform-origin: left center; transform-box: fill-box;
               transition: transform 1150ms cubic-bezier(0.16, 0.84, 0.44, 1); }
.is-drawn .grow, .is-drawn .wipe { transform: none; }
.chart .after { opacity: 0; transition: opacity 260ms ease-out 720ms; }
.is-drawn .after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .chart .grow, .chart .wipe { transition: none; transform: none; }
  .chart .after { transition: none; opacity: 1; }
}

/* ---------- Case study ----------------------------------------- */

/* "At a glance" is a spec ledger, not a card grid. Hairlines only,
   mono keys in the metadata voice, entries in ink. No boxes, per v3.3. */
.spec { border-top: 1px solid var(--rule); }
.spec__row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0 40px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.spec__k {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.7;
}
.spec__v { font-size: var(--t-small); line-height: 1.55; color: var(--ink); max-width: 68ch; }
.spec__v b { font-weight: 500; }
@media (max-width: 640px) {
  .spec__row { grid-template-columns: minmax(0, 1fr); gap: 3px 0; padding: 14px 0; }
}

/* Case study head. Same grid as the homepage hero so the outcome figure
   and its signature line sit in the same place on every case study. */
.cshead { padding-block: clamp(40px, 6vw, 78px) clamp(30px, 4vw, 52px); }
.cshead h1 { max-width: 17ch; margin-top: 18px; }
.cshead .lede { margin-top: 24px; }

/* ---------- Reveal --------------------------------------------- */

.js .rv { opacity: 0; transform: translateY(8px); }
.js .rv.is-in { opacity: 1; transform: none; transition: opacity 380ms ease-out, transform 380ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .js .rv.is-in { transition: none; }
}

/* ---------------------------------------------------------------- photographs
   Used only on archive pages that are reportage. The rest of the site is
   typographic and carries no images. Credit sits in the faint register so the
   caption reads first and the photographer is still properly named. */
.ph { margin: 0; }
.ph img {
  display: block; width: 100%; height: auto;
  background: var(--panel); border: 1px solid var(--hairline);
}
.ph__c {
  margin-top: 12px; font-size: var(--t-small); line-height: 1.5;
  color: var(--muted); max-width: 52ch;
}
.ph__c .cr { color: var(--faint); }
.ph-pair { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .ph-pair { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Amber as emphasis inside a navy headline band. v3.3 measures amber on navy at
   4.65:1, so it clears AA for large text. Used to lift one phrase in an H1, never
   a whole line. On white, .hl already resolves to --amber-ink (5.02:1). */
.ground--navy h1 .hl,
.ground--navy h2 .hl { color: var(--amber); }
.hl { color: var(--amber-ink); }

/* ================================================================
   COLOR PASS, 25 Aug 2026, at D's direction.

   SUPERSEDES the "three amber marks" rule recorded above. That rule
   scoped amber to three homepage components, which is why Who We Are
   and the way-pages carried none at all and read as black and white.
   D raised this three times. The resolution is not more amber, it is
   the same discipline applied to each page's own structure: the
   numbering that already organises every page now carries the mark.

   Text uses --amber-ink (#B45309, 5.02:1 on white). --amber (#D97706)
   is 3.19:1 and is used only for rules and borders, never for type.
   ================================================================ */

/* The numbering that runs down every page. */
.margin .num { color: var(--amber-ink); }
.core__k     { color: var(--amber-ink); }
.step__n     { color: var(--amber-ink); }

/* Card head rule on the Surface / Architect / Bank steps. The device D
   asked for: a structural bar, not decoration. */
.steps { border-top: 2px solid var(--amber); }
.step  { border-top: none; }

/* Tonal panels get the same head rule so a callout reads as a unit. */
.panel--tight { border-top: 2px solid var(--amber); }

/* On navy, amber-ink is too dark. v3.3 measures --amber on navy at 4.65:1. */
.ground--navy .margin .num,
.ground--navy .core__k,
.ground--navy .step__n { color: var(--amber); }

/* ---------------------------------------------------------------- client credits
   The named clients carry their own testimonial. Hover reveals it, and so does
   keyboard focus and a tap, because it is a real <button>: hover alone would hide
   the content from anyone not using a mouse. aria-describedby ties each quote to
   the name for screen readers.

   The popup anchors to the paragraph, not to the word. Anchoring per word looked
   tidier but clipped at the right edge on whichever page put the credits in a
   narrower column, and the fix differed per page. One anchor behaves everywhere. */
.creds { position: relative; }
.cred { position: static; display: inline; }
.cred__n {
  font: inherit; font-weight: 600; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: help;
  border-bottom: 1px dotted var(--amber);
}
.cred__n:hover, .cred__n:focus-visible { color: var(--amber-ink); }
.cred__pop {
  position: absolute; left: 0; top: calc(100% + 12px); z-index: 40;
  max-width: min(430px, 100%);
  background: #fff; padding: 16px 18px;
  border: 1px solid var(--hairline); border-top: 2px solid var(--amber);
  box-shadow: 0 6px 22px rgba(26, 21, 19, 0.10);
  /* display, not visibility: a hidden absolutely positioned box still counts
     toward document scroll width and was widening the page. */
  display: none;
}
.cred:hover .cred__pop,
.cred:focus-within .cred__pop { display: block; }
.cred__q { display: block; font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.cred__a { display: block; margin-top: 10px; font-size: 0.8125rem; line-height: 1.4; color: var(--faint); }

/* ---------------------------------------------------------------- fishing line
   Who the firm is for, stated before anything else. Fields puts this first on a
   consultant's site: a visitor who cannot tell whether the problem is theirs
   leaves. Sits between lede and headline in weight, so it reads as a statement
   rather than body copy. */
.fishline {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: clamp(1.125rem, 2.1vw, 1.4375rem);
  line-height: 1.35; letter-spacing: -0.012em;
  color: var(--muted); max-width: 34ch;
  padding-left: 18px; border-left: 2px solid var(--amber);
}
.fishline strong { font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------- portrait
   "Include pictures of yourself - this is a people business." The source file is
   400px square, so it is capped well below that to stay sharp on retina. */
.portrait { margin: 0 0 22px; }
.portrait img {
  display: block; width: 100%; max-width: 190px; height: auto;
  border: 1px solid var(--hairline);
}

/* Placeholder text. Unstyled, browsers apply their own gray, which Lighthouse
   flags for contrast. Pinned to --faint so it matches the metadata tone and
   clears AA. */
::placeholder { color: var(--faint); opacity: 1; }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); opacity: 1; }