/* ============================================================================
   CUSTOM BOX AGENCY · DEMONSTRATION BUILD
   Unpaid concept. Not affiliated with, hosted by, or approved by Custom Box Agency.

   ANCHOR ........ "someone finally put the receipts on the table."
   METAPHOR ...... an evidence board: every figure sourced, on a hairline rule.

   BRAND FIDELITY. Nothing here is a redesign. Palette, radii (their live CSS
   ships 0 / 2px / 3px only), dark-premium ground, teal accent and small-caps
   eyebrow labels are all lifted from customboxagency.com. Type is Montserrat,
   which their own site already loads, standing in for Proxima Nova.

   TWO LOCKED RULES
   1. TEAL MEANS MOVEMENT. #00bcbe is reserved for change: delta arrows, the
      three Day-12 envelopes, the rule under a figure that moved, links, the
      primary action, focus. Never decoration. The meaning comes from the case
      study itself, where a colour change signalled the offer.
   2. LIME IS PROOF AND IT IS THE BUILDER'S VOICE. Originally lime was the
      consultant's annotation layer only and never touched the brand surface.
      The 2026-08-26 palette ruling relaxed that: lime now also carries every
      figure, because a number is the one thing on this page that has to be
      seen first. It still marks the builder's own voice in the banner and the
      signed note, so the two uses share a meaning: this is the evidence, and
      this is the person putting it in front of you.

   CONTRAST. Every pair below was computed, not estimated. Ratios in comments.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Ground ladder. #0a3132 and #083536 are their tokens and sit at almost
     identical luminance, so the card step is a derived midpoint toward their
     #0f5c64. Each step is ~1.37x the last: readable, never muddy. */
  --ink-0: #041314;        /* ground   */
  --ink-1: #0a3132;        /* their token: bands, header, cards on ground */
  --ink-2: #10484a;        /* derived: cards on ink-1 bands */
  --ink-black: #000000;    /* their token: footer */

  --paper:     #f9f9f9;    /* their token */
  --paper-card:#ffffff;    /* their token */

  --teal:      #00bcbe;    /* their primary. Fills and large glyphs only. */
  --teal-hi:   #2bc2c9;    /* their token. Teal TEXT on dark uses this. */
  --teal-deep: #096f79;    /* their token. Teal on light uses this. */
  --lime:      #add22d;    /* their token. DEMO LAYER ONLY. Never on light. */

  --white: #ffffff;
  --dim:   #8ba3a3;        /* inactive nav. 5.25:1 on ink-1, 7.9:1 on black */

  /* Spacing. 4px base, multiples only. Off-scale values are bugs. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Radius. Sharp family, matching their live 0/2/3px */
  --r1: 2px; --r2: 4px;

  --measure: 62ch;
  --font: "proxima-nova", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE SCALE. Eleven pairs, down from nineteen. Every font-size on this
     sheet resolves to one of these; anything else was an accident. */
  --fs-display-xl: clamp(2.125rem, 6.4vw, 3.75rem);   /* hero figures      */
  --fs-display-l:  clamp(1.75rem, 4.9vw, 3.375rem);   /* h1                */
  --fs-display-m:  clamp(1.5rem, 3.3vw, 2.375rem);    /* h2                */
  --fs-display-s:  clamp(1.5rem, 2.8vw, 1.875rem);    /* villain, figures, fees */
  --fs-quote-l:    clamp(1.1875rem, 2vw, 1.5rem);     /* pull-quote        */
  --fs-quote-s:    clamp(1rem, 1.5vw, 1.1875rem);     /* inline quote      */
  --fs-lede:       clamp(1.0625rem, 1.5vw, 1.3125rem);/* section lede      */
  --fs-body:       17px;                              /* all body copy     */
  --fs-cap:        14px;                              /* captions, labels  */
  --fs-label:      13px;                              /* cites, meta       */
  --fs-micro:      12px;                              /* eyebrows, source  */

  --t-fast: 130ms; --t-mid: 220ms; --t-slow: 360ms;
  --ease-in-out: cubic-bezier(.2, 0, 0, 1);

  /* Semantic tokens. Components read ONLY these; bands reassign them. */
  --surface: var(--ink-0);
  --card:    var(--ink-1);
  --fg:      var(--white);          /* 19.1:1 on ink-0 */
  --muted:   #cddadb;               /* 13.4:1 on ink-0, 7.2:1 on ink-2 */
  --faint:   #b3c6c6;               /* 10.8:1 on ink-0, 5.8:1 on ink-2 */
  --accent:  var(--teal);
  --accent-text: var(--teal-hi);    /* 8.8:1 on ink-0, 4.7:1 on ink-2 */
  --accent-ink:  var(--ink-0);      /* text on a teal fill: 8.2:1 */
  --line:    rgba(255,255,255,.12); /* decorative hairline */
  --line-strong: rgba(255,255,255,.42); /* control borders: 3.7:1 on ink-1 */
  --focus:   var(--teal-hi);
  --proof:   var(--lime);           /* 11.9:1 on ink-0, 8.4:1 on ink-1 */
}

.band--deep  { --surface: var(--ink-1); --card: var(--ink-2); }
.band--black { --surface: var(--ink-black); --card: var(--ink-1); }
.band--paper {
  --surface: var(--paper);
  --card: var(--paper-card);
  --fg: #2d2d2d;                    /* 13.1:1 on paper */
  --muted: #4f5a5a;                 /* 6.8:1 on paper, 7.1:1 on white */
  --faint: #4f5a5a;
  --accent: var(--teal-deep);       /* #00bcbe on white is 2.2:1. Never used. */
  --accent-text: var(--teal-deep);  /* 5.6:1 on paper */
  --accent-ink: var(--white);       /* on a deep-teal fill: 5.9:1 */
  --line: rgba(0,0,0,.13);
  --line-strong: rgba(0,0,0,.34);
  --focus: #0a3132;                 /* 13.3:1 on paper */
  --proof: var(--teal-deep);        /* lime is 1.7:1 on paper; teal-deep is 5.6:1 */
}

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

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

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -.018em; }
h3, h4 { font-weight: 700; letter-spacing: -.008em; line-height: 1.2; }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--fg); text-decoration-thickness: 2px; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--teal); color: var(--ink-0);
  padding: var(--s3) var(--s5); font-weight: 700; text-decoration: none;
  border-radius: var(--r1);
}
.skip:focus { top: var(--s3); }

/* ------------------------------------------------------- 3. THE DEMO LAYER */
/* Deliberately not part of the design system. System mono + lime, hard rules,
   no radius. A reader should never confuse commentary for the brand. */
.demo-banner {
  background: var(--ink-black);
  border-top: 2px solid var(--lime);
  border-bottom: 1px solid rgba(173,210,45,.34);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--white);            /* 21:1 on black */
  padding: var(--s3) 0;
}
.demo-banner .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; }
.demo-banner b {
  color: var(--lime);             /* 12:1 on black */
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.demo-banner span { max-width: 88ch; }

.demo-note {
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.55;
  color: var(--lime);
  border-left: 2px solid var(--lime);
  padding-left: var(--s4);
  max-width: 78ch;
}
.demo-note p { max-width: none; margin-bottom: var(--s3); color: var(--faint); }
.demo-note p:first-of-type { color: var(--lime); }
.demo-note h2 {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime); margin-bottom: var(--s3);
}
.demo-note code {
  font-family: var(--mono); background: rgba(173,210,45,.14);
  padding: 2px var(--s1); color: var(--lime);
}

.ph-tag {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--lime);
  border: 1px solid rgba(173,210,45,.5);
  padding: var(--s1) var(--s2);
  display: inline-block;
}

/* -------------------------------------------------------------- 4. LAYOUT */
.wrap { width: min(100% - var(--s6), 1200px); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--s6), 880px); margin-inline: auto; }

.band {
  background: var(--surface);
  color: var(--fg);
  padding: var(--s8) 0;
  border-top: 1px solid var(--line);
}
.band--flush { border-top: 0; }

.band--tight { padding: var(--s7) 0; }

[id] { scroll-margin-top: var(--s7); }

.stack > * + * { margin-top: var(--s5); }
.stack--lg > * + * { margin-top: var(--s7); }

/* ---------------------------------------------------------------- 5. TYPE */
.eyebrow {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
  margin: 0 0 var(--s4); max-width: none;
}
.eyebrow--quiet { color: var(--faint); }

h1 {
  font-size: var(--fs-display-l);
  max-width: 19ch;
}
.h1--long { max-width: 26ch; font-size: var(--fs-display-l); }

h2 { font-size: var(--fs-display-m); max-width: 22ch; }
h3 { font-size: var(--fs-quote-s); }
h4 { font-size: var(--fs-body); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55; color: var(--muted); max-width: 56ch;
}
.small { font-size: var(--fs-body); color: var(--muted); }
.tiny  { font-size: var(--fs-cap); line-height: 1.55; color: var(--faint); }

/* The provenance rule. The recurring shape of the whole build: a short teal
   tick, then a small-caps line saying who said the number. */
.src {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint);
  display: flex; align-items: baseline; gap: var(--s2);
  max-width: 46ch; margin: 0;
}
.src::before {
  content: ""; flex: 0 0 auto; width: var(--s4); height: 2px;
  background: var(--accent); transform: translateY(-4px);
}
.src--block { margin-top: var(--s4); }

/* ------------------------------------------------------------- 6. CONTROLS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 48px; padding: var(--s3) var(--s6);
  font-family: var(--font); font-size: var(--fs-body); font-weight: 700;
  letter-spacing: .01em; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r1); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-in-out),
              color var(--t-fast) var(--ease-in-out),
              transform var(--t-fast) var(--ease-in-out),
              border-color var(--t-fast) var(--ease-in-out);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--teal-hi); color: var(--ink-0); }
.band--paper .btn--primary:hover { background: #0a3132; color: var(--white); }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.btn--ghost:active { transform: translateY(1px); }

.btn--sm { min-height: 44px; padding: var(--s2) var(--s5); font-size: var(--fs-cap); }

.under-btn { font-size: var(--fs-cap); color: var(--faint); max-width: 46ch; margin: var(--s3) 0 0; }

.cta-pair { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

.inline-link {
  font-weight: 700; font-size: var(--fs-body);
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; border-bottom: 2px solid var(--accent);
  padding-bottom: 2px; color: var(--accent-text);
  transition: color var(--t-fast) var(--ease-in-out),
              border-color var(--t-fast) var(--ease-in-out), gap var(--t-fast) var(--ease-in-out);
}
.inline-link:hover { color: var(--fg); border-color: var(--fg); gap: var(--s3); text-decoration: none; }
.inline-link::after { content: "\2192"; }

/* --------------------------------------------------------------- 7. HEADER */
.site-header {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
}
.header-row {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center; justify-content: space-between;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; padding: var(--s1); }
.logo img { height: 28px; width: auto; }

.nav-list {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: center;
}
.nav-list li { margin: 0; }
.nav-list a, .nav-list span {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.nav-list a {
  color: var(--white); text-decoration: none;
  padding: var(--s2) 0; display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease-in-out), color var(--t-fast) var(--ease-in-out);
}
.nav-list a:hover { border-bottom-color: var(--accent); }
.nav-list a[aria-current="page"] { border-bottom-color: var(--accent); }

/* Inactive nav. Not a link, not focusable, not hover-responsive, and it says
   so out loud to a screen reader. Deleting these would hide the omission;
   the point is that the omission is deliberate. */
.nav-list .dead {
  color: var(--dim);           /* 5.25:1 on ink-1: legible, clearly off */
  cursor: default;
  padding: var(--s2) 0;
  display: inline-block;
  border-bottom: 2px dotted rgba(139,163,163,.4);
}

.nav-legend {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--faint);
  margin: var(--s3) 0 0; max-width: none;
}
.nav-legend b { color: var(--lime); font-weight: 700; }

/* ------------------------------------------------------------ 8. STAT WORK */
.strip-label { margin-bottom: var(--s4); }

.strip {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
  list-style: none; padding: 0; margin: 0; max-width: none;
}
.strip > li {
  margin: 0; padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
}

.figure-xl {
  font-size: var(--fs-display-xl);
  font-weight: 800; line-height: 1; letter-spacing: -.035em;
  color: var(--proof); margin: 0 0 var(--s3); max-width: none;
  font-variant-numeric: tabular-nums;
}
.figure-lg {
  font-size: var(--fs-display-s);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--proof); margin: 0 0 var(--s3); max-width: none;
  font-variant-numeric: tabular-nums;
}
/* Teal marks the movement, and only the movement. */
.delta { color: var(--accent); font-weight: 700; padding: 0 .08em; }

.figure-label { font-size: var(--fs-cap); line-height: 1.45; color: var(--muted); max-width: 30ch; margin: 0; }

/* --------------------------------------------------------------- 9. CARDS */
.cards {
  display: grid; grid-template-columns: 1fr; gap: var(--s5);
  list-style: none; padding: 0; margin: 0; max-width: none;
}
.cards > li { margin: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r1);
  padding: var(--s5);
  height: 100%;
  display: flex; flex-direction: column; gap: var(--s4);
}
.card--quiet { border-top-color: var(--line-strong); }

.card h3 { margin: 0; }
.card h3 .card-name { display: block; font-size: var(--fs-body); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.card h3 .card-meta { display: block; font-size: var(--fs-label); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-top: var(--s2); line-height: 1.45; }

.card-stats { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--s4); }
.card-stats > li { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.card-stats > li:first-child { padding-top: 0; border-top: 0; }

.card p { font-size: var(--fs-body); color: var(--muted); }
.card .stack-end { margin-top: auto; }

/* A card with nothing to click says why, rather than dangling a dead affordance. */
.no-link {
  font-size: var(--fs-label); color: var(--faint); font-style: normal;
  border-top: 1px solid var(--line); padding-top: var(--s3); margin: 0;
}

/* -------------------------------------------------------------- 10. QUOTES */
blockquote {
  margin: 0; padding: 0 0 0 var(--s5);
  border-left: 2px solid var(--accent);
  max-width: 54ch;
}
blockquote p {
  font-size: var(--fs-quote-s);
  line-height: 1.45; font-weight: 700; letter-spacing: -.012em;
  color: var(--fg); margin-bottom: var(--s3);
}
blockquote cite {
  font-style: normal; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  display: block;
}
blockquote cite b { color: var(--muted); font-weight: 700; }

.quote-slab {
  border-left: 0; border-top: 2px solid var(--accent);
  padding: var(--s6) 0 0; max-width: 40ch;
}
.quote-slab p {
  font-size: var(--fs-quote-l);
  line-height: 1.35;
}
.quote-set { display: grid; gap: var(--s5); max-width: none; }
.quote-set blockquote p { font-size: var(--fs-quote-s); }

/* ------------------------------------------------- 11. THE ENVELOPE FIGURE */
/* The signature object, and it is theirs: days 1-11 neutral, days 12-14 blue,
   with the $500 offer landing on Day 12. It is a diagram, drawn from their own
   case-study copy, and it is labelled as a diagram. */
.envelopes {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2);
  margin: 0 0 var(--s4);
}
.env {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r1);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--s1);
  font-size: var(--fs-cap); font-weight: 700; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.env::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 66%; aspect-ratio: 1;
  transform: translate(-50%, -52%) rotate(45deg);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.env--offer {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ink-0);                    /* 8.2:1 */
}
.env--offer::before { border-color: rgba(4,19,20,.42); }

.env-axis {
  display: flex; justify-content: space-between; gap: var(--s3);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  border-top: 1px solid var(--line); padding-top: var(--s2);
}

figure { margin: 0; }
figcaption { font-size: var(--fs-cap); line-height: 1.5; color: var(--faint); margin-top: var(--s3); max-width: 54ch; }

/* Authored stand-ins where a photograph belongs. Labelled, never passed off. */
.ph {
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  padding: var(--s5);
}
.ph img { width: 100%; }
.ph .ph-tag { margin-bottom: var(--s4); }
.ph figcaption { border-top: 1px solid var(--line); padding-top: var(--s3); }

/* ---------------------------------------------------------- 12. CLIENT LIST */
/* Nine names a reader can type into a search bar. Their live wall is nineteen
   PNGs whose alt text is the filename. */
.client-list {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--s3) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
}
.client-list li {
  margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--muted);
  letter-spacing: .02em; padding-right: var(--s5);
}
.client-list li + li { padding-left: var(--s5); border-left: 1px solid var(--line); }

/* ------------------------------------------------------- 13. SPEC ROWS */
/* Phases, prices, box contents. Left rail carries the label and the number;
   right side carries the detail. Reads like a rate card, which is the point. */
.spec { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--line); }
.spec > li {
  margin: 0; padding: var(--s5) 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: var(--s3);
}
.spec-rail { display: flex; flex-direction: column; gap: var(--s2); }
.spec-name {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text); margin: 0;
}
.spec-fee {
  font-size: var(--fs-display-s); font-weight: 800;
  line-height: 1.05; letter-spacing: -.025em; color: var(--fg); margin: 0;
  font-variant-numeric: tabular-nums;
}
.spec-fee small { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; color: var(--faint); margin-top: var(--s1); }
.spec-body { font-size: var(--fs-body); color: var(--muted); }
.spec-body p { max-width: 58ch; }

.spec--numbered { counter-reset: phase; }
.spec--numbered > li { counter-increment: phase; }
.spec--numbered .spec-name::before { content: counter(phase) " \00B7 "; color: var(--faint); }

.item-does {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 var(--s2); max-width: none;
}

/* ---------------------------------------------------------- 14. DATA TABLE */
.data-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-body);
  margin: 0 0 var(--s4);
}
.data-table caption { text-align: left; font-size: var(--fs-cap); color: var(--faint); padding-bottom: var(--s3); }
.data-table th, .data-table td {
  text-align: left; padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--line); vertical-align: baseline;
}
.data-table thead th {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}
.data-table tbody th { font-weight: 400; color: var(--muted); padding-right: var(--s4); }
.data-table td { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fg); }
.data-table td.is-after { color: var(--accent); }
.data-table td.is-none { font-weight: 400; color: var(--faint); }

/* ---------------------------------------------------------- 15. EMPTY STATE */
/* The shelf with two slots not yet filled. Their live page links "More case
   studies" back to the case study you are already reading. */
.shelf { display: grid; grid-template-columns: 1fr; gap: var(--s4); max-width: none; list-style: none; margin: 0; padding: 0; }
.shelf > li { margin: 0; }
.slot {
  border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s5); height: 100%;
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--card);
}
.slot--filled { border-top: 2px solid var(--accent); }
.slot--open {
  background: transparent;
  border: 1px dashed var(--line-strong);
}
.slot-status {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0;
}
.slot--filled .slot-status { color: var(--accent-text); }
.slot h3 { margin: 0; }
.slot p { font-size: var(--fs-body); color: var(--muted); margin: 0; }
.slot .stack-end { margin-top: auto; }

/* ----------------------------------------------------------------- 16. FORM */
.form-shell {
  background: var(--card); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); border-radius: var(--r1);
  padding: var(--s5);
}
.field { margin-bottom: var(--s5); }
.field:last-of-type { margin-bottom: var(--s4); }
.field label {
  display: block; font-size: var(--fs-cap); font-weight: 700;
  color: var(--fg); margin-bottom: var(--s2);
}
.field .req { color: var(--accent-text); }
.field .opt { font-weight: 400; color: var(--faint); }
.field .hint { font-size: var(--fs-cap); color: var(--faint); margin: 0 0 var(--s2); max-width: 52ch; }

.field input, .field textarea {
  width: 100%; font-family: var(--font); font-size: var(--fs-body); /* 16px: no iOS zoom */
  color: var(--fg); background: rgba(0,0,0,.28);
  border: 1px solid var(--line-strong); border-radius: var(--r1);
  padding: var(--s3) var(--s4); min-height: 48px;
  transition: border-color var(--t-fast) var(--ease-in-out),
              background-color var(--t-fast) var(--ease-in-out);
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: rgba(205,218,219,.75); }
.field input:hover, .field textarea:hover { border-color: var(--faint); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }

.field-error {
  display: none; font-size: var(--fs-cap); font-weight: 700;
  color: #ffd0cf;                      /* 12.1:1 on ink-2 */
  margin: var(--s2) 0 0; max-width: none;
}
.field:has(:user-invalid) .field-error { display: block; }
.field:has(:user-invalid) input,
.field:has(:user-invalid) textarea { border-color: #ff8f8c; background: rgba(255,80,76,.10); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form-foot .tiny { max-width: 42ch; }

/* Pending. The only motion on the page that is not a hover: it is tied to a
   state change that actually happened. */
.form-shell[data-state="pending"] .btn--primary { pointer-events: none; opacity: .82; }
.form-shell[data-state="pending"] .btn--primary::after {
  content: ""; width: var(--s4); height: var(--s4); border-radius: 50%;
  border: 2px solid rgba(4,19,20,.3); border-top-color: var(--ink-0);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { display: none; }
.form-shell[data-state="done"] .form-body { display: none; }
.form-shell[data-state="done"] .form-success { display: block; }
.form-success h3 { margin-bottom: var(--s3); }
.form-success p { color: var(--muted); font-size: var(--fs-body); }

/* --------------------------------------------------------------- 17. FOOTER */
.site-footer { padding: var(--s8) 0 var(--s7); }
.footer-cols {
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
  border-top: 1px solid var(--line); padding-top: var(--s6);
}
.footer-cols h2 {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--s3); max-width: none;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.footer-cols li { margin-bottom: var(--s2); font-size: var(--fs-body); }
.footer-cols a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-cols a:hover { color: var(--fg); border-bottom-color: var(--accent); }
.footer-cols .dead { color: var(--dim); }        /* 7.9:1 on black */
.footer-legal {
  border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s5);
  display: grid; gap: var(--s2);
}
.footer-mark img { height: 24px; width: auto; margin-bottom: var(--s5); }

/* ------------------------------------------------- 18. STICKY MOBILE ACTION */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink-1); border-top: 1px solid var(--line-strong);
  padding: var(--s2) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.mobile-cta .tiny { margin: 0; max-width: 15ch; display: none; }
.mobile-cta .btn { flex: 1 1 auto; }
@media (min-width: 400px) {
  .mobile-cta .tiny { display: block; }
  .mobile-cta .btn { flex: 0 0 auto; }
}
body { padding-bottom: 76px; }

/* ------------------------------------------------------- 19. RESPONSIVE */
@media (min-width: 560px) {
  .strip { grid-template-columns: repeat(2, 1fr); column-gap: var(--s6); }
  .shelf { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .band { padding: var(--s9) 0; }
  .band--tight { padding: var(--s8) 0; }
  [id] { scroll-margin-top: var(--s8); }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .envelopes { grid-template-columns: repeat(14, 1fr); gap: var(--s1); }
  .spec > li { grid-template-columns: 240px 1fr; gap: var(--s6); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .quote-set { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .form-shell { padding: var(--s6); }
  .footer-legal { grid-template-columns: 1fr auto; align-items: baseline; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .mobile-cta { display: none; }
  .site-header { position: sticky; top: 0; z-index: 50; }
  [id] { scroll-margin-top: 96px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .shelf { grid-template-columns: repeat(3, 1fr); }
  .spec > li { grid-template-columns: 300px 1fr; }
}

@media (min-width: 1080px) {
  .cards--six { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------ 20. MOTION / PRINT */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .form-shell[data-state="pending"] .btn--primary::after { animation: none; border-top-color: transparent; }
}

@media print {
  body { background: #fff; color: #000; padding-bottom: 0; }
  .mobile-cta, .site-header, .skip { display: none; }
  .band { background: #fff; color: #000; border-top: 1px solid #999; padding: 16pt 0; }
  .demo-banner { background: #fff; color: #000; border: 2px solid #000; }
  .demo-banner b, .demo-note, .demo-note h2, .ph-tag { color: #000; }
  a { color: #000; }
}

/* ===================================================== 21. COMPOSITION ==== */
/* Page-level rhythm. Sections breathe; prose inside them stays tight. */
.section-gap { margin-top: var(--s7); }
.prose { max-width: none; }
.prose h2, .prose h3 { margin-bottom: var(--s3); }
.prose ul, .prose ol { margin-bottom: var(--s4); }
.prose > :last-child { margin-bottom: 0; }

.quote-inline { margin: var(--s5) 0; }
.quote-inline p { font-size: var(--fs-quote-s); }
.quote-slab--wide { max-width: 68ch; }

.src--wide { max-width: 74ch; }
.strip-label { margin-bottom: var(--s5); }

/* "almost doubled" is a sentence, not a figure. It should not pretend to be one. */
.figure-xl--words {
  font-size: var(--fs-display-s);
  letter-spacing: -.02em; font-weight: 800; line-height: 1.15;
}
.spec-fee--none {
  font-size: var(--fs-quote-s);
  font-weight: 700; letter-spacing: 0; color: var(--muted);
}

/* --- hero ------------------------------------------------------------- */
.hero-grid { display: grid; gap: var(--s7); }

.hero-figure { align-self: start; }
.hero-act { display: grid; gap: var(--s6); }
.hero-act--single { display: block; }

/* --- sections --------------------------------------------------------- */
.client-head { margin: var(--s7) 0 var(--s4); font-size: var(--fs-quote-s); }

.mech-grid { display: grid; gap: var(--s7); }
.env-figure { align-self: start; }

.stat-line {
  list-style: none; max-width: none;
  margin: var(--s6) 0 var(--s3); padding: var(--s4) 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: var(--s2);
}
.stat-line li { margin: 0; }
.stat-line .figure-lg { margin: 0 0 var(--s2); }
.stat-line .figure-label { max-width: 24ch; }
@media (min-width: 620px) { .stat-line { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.runs { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--line); }
.runs > li {
  margin: 0; padding: var(--s5) 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: var(--s2);
}
.runs-name {
  margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text);
}
.runs-body { margin: 0; font-size: var(--fs-body); color: var(--muted); max-width: 62ch; }

.price-grid { display: grid; gap: var(--s6); }
.price-summary {
  font-size: var(--fs-lede); font-weight: 700;
  color: var(--fg); max-width: 56ch; margin: var(--s5) 0 var(--s4);
}
.paper-mark { margin: 0 0 var(--s4); }
.paper-mark img { height: 24px; width: auto; }

.close-grid { display: grid; gap: var(--s7); }
.close-cta { margin: var(--s6) 0 0; }

.scope { margin-bottom: var(--s7); }

/* A "no link" note is a designed dead end, not a broken one. */
span.no-link { border-top: 0; padding-top: 0; display: inline; }
.footer-cols .dead .tiny { color: var(--dim); font-size: var(--fs-micro); }

/* --- composition breakpoints ------------------------------------------ */
@media (min-width: 760px) {
  .hero-act:not(.hero-act--single) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s7); align-items: start;
  }
  .price-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s7); }
  .runs > li { grid-template-columns: 240px 1fr; gap: var(--s6); }
}

@media (min-width: 900px) {
  .cards--four { grid-template-columns: repeat(2, 1fr); }
  .close-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8); align-items: start;
  }
}

@media (min-width: 960px) {
  .mech-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s8); align-items: start;
  }
}

@media (min-width: 1000px) {
  /* The photograph sits beside the opening claim; the proof strip runs full
     width beneath both. Reading order stays claim, proof, ask, picture. */
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: var(--s8); row-gap: var(--s8);
  }
  .hero-intro  { grid-column: 1; grid-row: 1; }
  .hero-figure { grid-column: 2; grid-row: 1; align-self: end; }
  .hero-proof  { grid-column: 1 / -1; grid-row: 2; }
  .hero-act    { grid-column: 1 / -1; grid-row: 3; }
}

/* The before/after table is the only true tabular data in the build. It has to
   hold at 320px without a scroll region, so it loses padding before it loses
   legibility. */
@media (max-width: 520px) {
  .data-table { font-size: var(--fs-cap); }
  .data-table th, .data-table td { padding: var(--s2) var(--s2) var(--s2) 0; }
  .data-table tbody th { padding-right: var(--s3); }
}


/* ------------------------------------------------- 15. REAL PHOTOGRAPHY
   Custom Box Agency's own product shots, downsized. Most are cut out on
   white, so they sit on a light plate rather than fighting the dark ground. */
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r1);
  background: var(--paper-card);
}
.shot--plate img {
  background: #fff;
  padding: var(--s4);
  border: 1px solid var(--line);
}
.shot--bleed img { padding: 0; border: 0; }
.shot figcaption {
  margin: var(--s2) 0 0;
  font-size: var(--fs-label); line-height: 1.5; color: var(--muted); max-width: 54ch;
}
.shot-credit {
  display: block; margin-top: var(--s1);
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}
.shot-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: 1fr;
  margin: var(--s4) 0 0;
}
@media (min-width: 720px) { .shot-grid { grid-template-columns: repeat(3, 1fr); } }
.shot-grid img { aspect-ratio: 1 / 1; object-fit: cover; }

/* A face on the longest quote. Small, round, never a hero element. */
.cite-face { display: flex; align-items: center; gap: var(--s3); }
.cite-face img {
  width: 88px; height: 88px; flex: 0 0 88px;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-strong);
}

/* `.card p` (0,1,1) outranks `.figure-*` (0,1,0), so a figure inside a card was
   inheriting muted body colour. Figures are proof; they get the proof colour. */
.card .figure-xl,
.card .figure-lg,
.card .figure { color: var(--proof); }
/* ...and on font-size. "1 in 3" was rendering at body size, not as a statistic. */
.card .figure-xl { font-size: var(--fs-display-xl); }
.card .figure-lg { font-size: var(--fs-display-s); }
.card .figure-label { font-size: var(--fs-cap); color: var(--muted); }

/* ------------------------------------------------ 16. FOUNDER + GALLERY */
.founder { display: flex; gap: var(--s3); align-items: flex-start; }
.founder-portrait {
  width: 88px; height: 88px; flex: 0 0 88px;
  border-radius: var(--r1); object-fit: cover;
  border: 1px solid var(--line-strong);
}
.founder p { margin: 0; }

.gallery {
  list-style: none; margin: var(--s4) 0 var(--s3); padding: 0;
  display: grid; gap: var(--s3); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery > li { margin: 0; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
/* The gallery sits inside the two-column mech-grid; let it span and drop the
   prose measure cap, or it renders at half width in one column. */
.gallery-block { grid-column: 1 / -1; }
.gallery-block h3 { max-width: none; }
.gallery { max-width: none !important; }

/* The villain line. It carries the argument, so it gets weight rather than
   a heading level it does not deserve in the outline. */
.villain {
  font-size: var(--fs-display-s);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--fg); max-width: 24ch; margin: 0 0 var(--s3);
}

/* ------------------------------------------------------- 17. SPLIT LAYOUT
   A 1200px canvas carrying a 536px measure reads as empty, not composed.
   The fix is not longer lines (that hurts reading) but a second column:
   the claim holds the left rail, the argument runs down the right. */
.split { display: grid; gap: var(--s5) var(--s7); }
.split-head { align-self: start; }
.split-head .eyebrow { margin-bottom: var(--s3); }
.split-head h2 { max-width: 16ch; }
.split-body > *:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) var(--s8); }
  .split-head { position: sticky; top: calc(var(--s8) + 64px); }
}
@media (prefers-reduced-motion: reduce) { .split-head { position: static; } }

/* The close sat at 4% of page height directly after a 17% price table.
   A compact restatement of the one result gives the ask something to stand on. */
.close-recap {
  list-style: none; margin: var(--s5) 0 var(--s2); padding: var(--s4) 0 0;
  border-top: 1px solid var(--line); max-width: none;
  display: grid; gap: var(--s2);
}
.close-recap li { margin: 0; font-size: var(--fs-body); color: var(--muted); }
.close-recap b { color: var(--proof); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 620px) { .close-recap { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }

/* A found-object note. It is a sentence, not a label, so it does not take the
   uppercase micro treatment the .src provenance stamps use. */
.found-note {
  margin: var(--s3) 0 0;
  font-size: var(--fs-cap); line-height: 1.55;
  color: var(--faint); max-width: 58ch;
}

/* ------------------------------------------------------- 18. THE POSTER
   One signalled moment on a page whose whole argument is that a signalled
   moment is what moves people. Largest type on the site; nothing competes. */
.poster {
  position: relative; isolation: isolate;
  padding: var(--s10) 0;
  background: var(--ink-black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.poster-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  z-index: -2;
}
.poster::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(4,19,20,.97) 0%, rgba(4,19,20,.92) 42%, rgba(4,19,20,.55) 72%, rgba(4,19,20,.30) 100%);
}
.poster-inner { position: relative; }
.poster-line {
  margin: 0; max-width: 32ch;
  font-size: clamp(2.25rem, 6.6vw, 5.5rem);   /* 36px to 100px */
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  color: var(--white);
}
.poster-note {
  margin: var(--s5) 0 0; max-width: 46ch;
  font-size: var(--fs-cap); line-height: 1.55; color: var(--muted);
}
@media (max-width: 700px) {
  .poster { padding: var(--s8) 0; }
  .poster::after { background: linear-gradient(180deg, rgba(4,19,20,.90) 0%, rgba(4,19,20,.80) 60%, rgba(4,19,20,.92) 100%); }
}

/* The artifact was unsigned for seven rounds: twelve CTAs, all of them to the
   prospect's own contact page, and no return address. The note is the only
   part of this that speaks in the builder's voice. */
.demo-note.note { border-left-color: var(--lime); }
.note-sign { margin-top: var(--s4); }
.note-sign a { color: var(--lime); }
.demo-note.sources { margin-top: var(--s5); opacity: .82; }

/* At 1440x900 the first figure landed at y=904, four pixels below the fold, so
   the page's strongest asset needed a scroll on a common laptop. On wide
   viewports the strip label sits closer and the first row loses its top pad. */
@media (min-width: 1000px) {
  .strip-label { margin-bottom: var(--s3); }
  .strip > li { padding-top: var(--s4); }
}