/* =============================================================================
   lfgrow.net — stylesheet
   -----------------------------------------------------------------------------
   WHY THIS FILE LOOKS LIKE THIS (R6: document the build, not just the result)

   Three sources, all on this box, none of them a template:

   1. QUIET AMBER, the accepted skin. Tokens lifted verbatim from the shipped
      baseline (bin/jarvis.py:2568-2679): field #060709, a NEUTRAL five-rung ink
      ladder, and exactly one accent, champagne amber #e7c88f. Surfaces are white
      alpha over the field so nesting composes arithmetically.

   2. THE DIALEDWEB GRAMMAR, measured (design/dialedweb-study/VISUAL-MAP.md).
      Stolen deliberately: the radius LADDER as a grammar (interactive = capsule,
      container = 20, nested = 14/10/5) so a screenshot is parseable without
      colour; ring+bloom instead of borders (§0 "Material"); the two-step type
      cliff; the chip -> headline -> one-liner cadence on every section; metric
      cards where the number IS the artwork; the one-light-card contrast spend.
      Refused deliberately (their §4 "Skip"): scroll-jack, text-fill reveals on
      every heading, JS-gated visibility with no CSS fallback, autoplay video
      walls, and SF Pro (which is why the display face here is Fraunces).

   3. THE FOUR 2010 SMELL TESTS are automatic rejects
      (design/insane-pipeline/PROCESS.md:98, enforced by bin/designlint X03/X05/
      X07/X08). This file is built to fail all four deliberately:
        - the hero is an asymmetric two-column with a left-aligned h1 over a flat
          field + a radial spotlight, NEVER a centred h1 over a linear-gradient;
        - no row of exactly three equal cards exists anywhere (rows are 4-up, or
          2-up with unequal spans, or full-width hairline rows);
        - border-radius is a five-step LADDER, never one value everywhere;
        - the palette is achromatic neutrals + amber (h 38) + green (h 152): two
          unrelated hues, not one hue rotated. Amber is the accent and is spent
          ONCE per page; green is a separate semantic axis meaning "checked" —
          the passing rows of the /work/ ledger, the gate labels on /services/,
          the commitments on /contact/. A cyan token used to be declared here as
          a third hue; it was referenced by exactly nothing, so it is gone. On a
          site that sells measured claims, a stylesheet that describes a palette
          it does not have is the one comment we cannot afford.

   TYPE. Two faces, self-hosted, real @font-face (see the block below). Every
   previous design on this box rendered in a CJK fallback because no @font-face
   ever existed; that failure is the reason the gate asserts the loaded family by
   measuring document.fonts, not by reading this file. Figures are Inter with
   font-variant-numeric: tabular-nums — an instrument texture without paying
   40,404 B for a third face.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONTS — self-hosted, variable, latin. SIL OFL 1.1 (licences ship beside
   the files). font-display:swap + preload in the document head: swap avoids the
   invisible-text penalty, preload means the swap almost never becomes visible.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/Inter-var-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-var-latin.woff2) format('woff2');
}

/* ---------------------------------------------------------------------------
   2. TOKENS. A raw hex, a raw px font-size or a raw curve below this block is a
   bug (the rule Quiet Amber ships under).
   --------------------------------------------------------------------------- */
:root {
  /* field + surfaces: only --bg is opaque, the rest is white alpha over it */
  --bg: #060709;
  --lvl-1: rgba(255,255,255,.025);
  --lvl-2: rgba(255,255,255,.05);
  --lvl-3: rgba(255,255,255,.08);
  --state-hover: rgba(255,255,255,.03);

  /* ink ladder, neutral, APCA-graded against the field */
  --ink-1: #f1f1f3;
  --ink-2: #c7c8cd;
  --ink-3: #a2a3a9;
  --ink-4: #85868c;
  --ink-5: #67686e;   /* NON-TEXT: dividers and rules only */

  /* the one accent, plus two semantic hues that are a separate axis */
  --amber: #e7c88f;
  --amber-t: #f2ddb3;          /* the Lc-75 text rung; never set the base as text */
  --green-t: #6ee1a7;          /* the "checked" axis; see the palette note above */

  --line: rgba(255,255,255,.07);
  --line-soft: rgba(255,255,255,.045);

  /* ring + bloom, the material — DIRECTIONAL, not uniform.
     SYSTEM.md §10.5 / param 6-8: the scene is lit from the upper-left (the light
     rays rake down-right), so a uniform four-edge ring contradicts the key light
     and reads flat/stickered. dialedweb's OWN better recipe (.glass-effect__*) is
     directional and they use it on 5 elements while 31 get the flat one; we make
     the good material the default. Top edge catches the light (.10), the perimeter
     is a faint seat (.05), the base sinks into shadow (black/.35). The bloom is
     top-biased and FIXED (px, not vw) so a small card and a wide panel read the
     same — their 5vw bloom covers half a 288px card and barely touches an 1152px
     panel, a bug they never noticed. */
  --ring: inset 0 1px 0 rgba(255,255,255,.10),
          inset 0 0 0 1px rgba(255,255,255,.05),
          inset 0 -1px 0 rgba(0,0,0,.35);
  --ring-hi: inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 0 0 1px rgba(255,255,255,.09),
             inset 0 -1px 0 rgba(0,0,0,.35);
  --bloom: inset 0 24px 48px -24px rgba(255,255,255,.06);
  /* the 'raised' tier gets a real cast shadow — theirs has none on any card, so
     nothing sits above the canvas (§5.2, param 8) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px -2px rgba(0,0,0,.34);
  --shadow-2: 0 1px 2px rgba(0,0,0,.6), 0 12px 32px -8px rgba(0,0,0,.5),
              0 24px 48px -12px rgba(0,0,0,.34);

  /* RADIUS LADDER (smell test 3) — SYSTEM.md param 11-15: 999 / 18 / 8 / 2 + 50%.
     18 is nowhere near their 25, and the nested step is generated (r_parent minus
     the padding edge), not chosen by eye like their drifted 25/20/15/10/8/6/5.
     999 is the real capsule token — the earlier build shipped 980, a near-miss. */
  --r-micro: 2px;
  --r-chip: 8px;
  --r-item: 8px;
  --r-card: 18px;
  --r-frame: 18px;
  --r-pill: 999px;

  /* type — a cliff, not a ramp. clamp() keeps every breakpoint proportional
     with no media-query sprawl (VISUAL-MAP.md steal 3, vw swapped for clamp so
     it cannot run away on ultrawide) */
  --fs-display: clamp(2.6rem, 1.3rem + 4.4vw, 4.4rem);
  --fs-h2:      clamp(1.9rem, 1.05rem + 2.9vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.02rem + 0.78vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.28vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-micro:   .75rem;
  --fs-figure:  clamp(2.5rem, 1.4rem + 3.6vw, 4rem);

  --w-thin: 300; --w-normal: 400; --w-medium: 510; --w-semibold: 590;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* spacing — 4px unit, no exceptions */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;
  /* huge negative space is part of the composition, not leftover margin */
  --band: clamp(5rem, 2.5rem + 9vw, 10.5rem);

  --measure: 62ch;
  --shell: 1180px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  --t-fast: .15s; --t-pop: .22s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(231,200,143,.6);
}

/* ---------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------- */
*, *::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(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: var(--w-normal);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink-1); text-wrap: balance; }
p { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* every focusable thing gets the same visible ring — the amber is spent here
   on purpose, it is the one place the accent has a job beyond decoration */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-chip);
}

.skip {
  position: absolute; left: var(--s-4); top: calc(var(--s-4) * -4);
  z-index: 100; padding: var(--s-3) var(--s-6);
  background: var(--amber); color: #211905;
  border-radius: var(--r-pill); font-weight: var(--w-semibold);
  text-decoration: none; transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: var(--s-4); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
   4. NAV — DOCKED, not a floating capsule. SYSTEM.md §10.0 bans "a capsule nav
   pill floating over a hero" — it is dialedweb's single most recognisable atom
   and the strongest clone tell (codex, 2026-08-07: "the oversized floating
   capsule nav hovering over a black void reproduces Dialed's silhouette before
   anyone notices the serif"). The control-room concept wants an instrument
   header, not a jewel: a full-bleed bar seated on a single hairline rule, brand
   hard-left, links hard-right, no pill silhouette anywhere. The rule line is the
   first instance of the "one continuous rule" the concept is built on (§10.0).
   --------------------------------------------------------------------------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 40;
  /* the docked bar: a scrim + a hairline baseline, blurred so the field reads
     through it but the header never looks like a floating object */
  background: linear-gradient(to bottom, rgba(6,7,9,.86), rgba(6,7,9,.72));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}
.nav {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-3) var(--gutter);
}
.brand {
  font-family: var(--display); font-weight: var(--w-semibold);
  font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink-1);
  text-decoration: none; white-space: nowrap;
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
}
.brand .dot { color: var(--amber); }
.nav-links { display: flex; gap: var(--s-2); margin-left: auto; list-style: none; padding: 0; }
/* min-height is the TAP TARGET, not a look: at 35px these failed the 40px floor
   on every page. The anchor itself has to carry the size — an ::after overlay
   would fake the hit area while assistive tooling and the gate still measure a
   35px control. 44px is the WCAG 2.5.5 AAA figure. The capsule does not grow:
   the brand lockup, not the links, sets the nav's height. */
.nav-links a {
  position: relative;
  display: flex; align-items: center; min-height: 44px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-small); color: var(--ink-3); text-decoration: none;
  border-radius: var(--r-item); transition: color var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--ink-1); }
/* current page = a gauge tick under the label, NOT a pill background — the
   docked-instrument grammar, and it keeps the pill shape off the header
   entirely (the capsule was the clone tell) */
.nav-links a[aria-current="page"] { color: var(--ink-1); }
.nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 6px;
  height: 2px; background: var(--amber); border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   5. BUTTONS — the ONE contrast spend per page is the solid amber capsule.
   Everything else is a ring. (VISUAL-MAP.md steal 8: spend contrast once.)
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6);
  border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--fs-small); font-weight: var(--w-medium);
  border: 0; cursor: pointer; font-family: inherit;
  transition: transform var(--t-pop) var(--ease), background var(--t-fast) var(--ease);
}
.btn .arrow {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: var(--fs-small); line-height: 1;
}
.btn-primary { background: var(--amber); color: #211905; font-weight: var(--w-semibold); }
.btn-primary .arrow { background: #211905; color: var(--amber); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: var(--lvl-1); color: var(--ink-1); box-shadow: var(--ring); }
.btn-ghost .arrow { background: var(--lvl-3); color: var(--ink-1); }
.btn-ghost:hover { background: var(--lvl-2); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   6. SECTION CADENCE — chip -> headline -> one-liner, on EVERY section
   (VISUAL-MAP.md steal 4). Navigation by rhythm.
   --------------------------------------------------------------------------- */
.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * .62); }

/* SYSTEM.md §10.8 / param 62: NOT a capsule chip (their most recognisable atom).
   A rule-mark + micro-caps label does the same job — labels the section, sets the
   rhythm — with zero shared silhouette, and it is the control-room grammar: a
   gauge tick against a hairline. The old capsule .chip is gone; the pill shape
   never appears as a static label anywhere on the site. */
.chip, .rule-label {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding-left: var(--s-3);
  border-left: 2px solid var(--amber);
  font-size: var(--fs-micro); font-weight: var(--w-medium);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1;
}
/* the .tick (old amber dot) collapses into the rule mark — kept as a no-op span
   so existing markup on every page needs no edit */
.chip .tick, .rule-label .rule-mark { display: none; }

.section-head { max-width: 46rem; }
.section-head h2 {
  margin-top: var(--s-6);
  font-family: var(--display);
  font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.025em;
  font-weight: var(--w-semibold);
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 1;
}
.section-head .lede {
  margin-top: var(--s-6); max-width: var(--measure);
  font-size: var(--fs-lead); color: var(--ink-3); line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   7. HERO — asymmetric. Left column of type, right column carrying the render.
   NOT a centred h1 over a linear-gradient (smell test 1). The only gradient in
   the hero is a RADIAL spotlight behind the object, which is what a real studio
   light does; it is motivated, not decorative.
   --------------------------------------------------------------------------- */
/* overflow-x: clip contains the spotlight below. It is NOT cosmetic and it is
   NOT `overflow: hidden`: the ::before bleeds -20% past the right edge, which
   made the document scroll sideways by 79px at 390, 114px at 1440 and 194px at
   1280. The render gate only ever asked at 390, so the desktop half of that bug
   shipped invisible — measured 2026-08-07, see BUILD.md "the overflow".
   `clip` on one axis with the other left visible does not create a scroll
   container, so the sticky nav and the glow's vertical bleed both survive;
   `hidden` would have made this element a scroller and broken both. */
.hero { position: relative; overflow-x: clip;
        padding-block: clamp(2rem, 0.9rem + 3.2vw, 3.4rem) var(--band); }
/* the spotlight sits BEHIND the turbine (right), motivated by the object, and a
   second cool wash lifts the whole right column so the render reads as a lit
   world rather than a floating product shot (codex: "not a world worth
   entering") */
.hero::before {
  content: ''; position: absolute; inset: -6% -14% 8% 44%;
  background:
    radial-gradient(closest-side circle at 62% 46%,
      rgba(231,200,143,.10) 0%, rgba(231,200,143,.035) 44%, transparent 72%),
    radial-gradient(60% 70% at 74% 40%,
      rgba(120,150,200,.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid {
  display: grid; gap: var(--s-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  /* the render is the spectacle, so give it the larger track: .92fr text / 1.08fr
     stage. The type column is capped so the headline breaks on meaning, not on a
     random column edge (codex: "breaks awkwardly into six lines"). */
  .hero-grid { grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 4vw, 4.5rem); }
}
.hero h1 {
  margin-top: var(--s-6);
  max-width: 15ch;                 /* meaningful line breaks, not a ragged wall */
  font-family: var(--display);
  font-size: var(--fs-display);
  line-height: .98; letter-spacing: -.032em;
  font-weight: var(--w-semibold);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .lede {
  margin-top: var(--s-8); max-width: 40ch;
  font-size: var(--fs-lead); color: var(--ink-3);
}
.hero-cta { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* the render frame: container radius, ring material, and a real aspect box so
   nothing shifts while the poster decodes (CLS = 0 by construction) */
.stage {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--r-frame); overflow: hidden;
  background: #030405;
  box-shadow: var(--ring), var(--bloom), var(--shadow-2);
}
/* let the render fill more of the frame and lift toward optical centre — a taller
   4:5 stage with the object scaled up reads as the subject of the page, not a
   thumbnail parked bottom-right (codex craft note #1 and #2) */
@media (min-width: 900px) {
  .stage { aspect-ratio: 5 / 6; align-self: center; }
}
.stage video, .stage img { width: 100%; height: 100%; object-fit: cover; }
.stage figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--fs-micro); color: var(--ink-3);
}
.stage-tag {
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: rgba(6,7,9,.55); box-shadow: var(--ring);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   8. PROOF STRIP — the number IS the artwork (VISUAL-MAP.md steal 5), but ours
   are facts, so they do not count up: a count-up animation on a measured value
   is theatre, and theatre is what this whole site argues against. FOUR across,
   never three (smell test 2).
   --------------------------------------------------------------------------- */
.proof {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: var(--s-8) var(--s-6) var(--s-6);
  border-radius: var(--r-card);
  background: var(--lvl-1);
  box-shadow: var(--ring), var(--bloom);
  /* the 1px grid texture inside the card, their tell, one line of CSS */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}
.stat .fig {
  display: block;
  font-size: var(--fs-figure); line-height: 1;
  font-weight: var(--w-thin); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(170deg, var(--ink-1) 12%, var(--ink-4) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .fig .unit { font-size: .42em; letter-spacing: 0; margin-left: .12em; color: var(--ink-4);
                   -webkit-text-fill-color: var(--ink-4); }
.stat .lab { display: block; margin-top: var(--s-4); font-size: var(--fs-small);
             font-weight: var(--w-medium); color: var(--ink-1); }
.stat .src { display: block; margin-top: var(--s-2); font-size: var(--fs-micro);
             color: var(--ink-4); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   9. HAIRLINE ROWS — their Industries pattern (VISUAL-MAP.md:176). A list of
   services as full-width rows beats a card grid: no equal-card smell, and the
   negative space to the right of each label is the composition.
   --------------------------------------------------------------------------- */
.rows { margin-top: var(--s-16); border-top: 1px solid var(--line); }
.row {
  display: grid; gap: var(--s-4) var(--s-6);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
  .row { grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); align-items: center; }
}
.row-tile {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-card);
  background: var(--lvl-2); box-shadow: var(--ring);
  color: var(--amber); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; font-weight: var(--w-medium);
}
.row h3 { font-size: var(--fs-h3); font-weight: var(--w-medium); letter-spacing: -.018em; }
/* grid-column here is load-bearing. Below 820px the row is `auto 1fr`, meant to be
   a 44px tile plus a wide content column. Without this the paragraph auto-places
   into column 1 ROW 2 and its max-content demand sizes the `auto` track: measured
   242.594px vs 83.406px at a 390px viewport, which squeezed the h3 into an 83px
   column and stranded "Websites" against the right edge while the copy sat narrow
   on the left. Nothing overflowed, no text was too small and every tap target was
   fine, so all four service rows passed every gate looking wrong. Found by reading
   the rendered crop, then measured before touching anything. */
.row p { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--fs-small); max-width: 54ch; }
.row .meta { display: block; margin-top: var(--s-3); font-size: var(--fs-micro);
             color: var(--ink-4); font-variant-numeric: tabular-nums; }
/* The gate label carries the SAME green as `.ledger td.good` on /work/, because
   it is the same claim: a condition that has been checked. The page's headline
   promise is "each one has a number that says when it is finished" — until this
   existed that number was set in the same muted grey as the surrounding prose
   and read as a footnote. It also restores the palette this stylesheet declares
   at the top: /services/ and /contact/ were measured at ONE hue cluster (amber
   alone), which is smell test 4. /home/ and /work/ only ever passed that test on
   the strength of the cool metal in their renders, not on their UI. */
.row .meta .gate { color: var(--green-t); font-weight: var(--w-medium); }

/* Hands the paragraph back to its own track on the 3-column desktop row. This
   MUST come after `.row p` above, not inside the earlier `min-width: 820px`
   block where it naturally belongs: the two selectors have identical
   specificity, so the later one in source order wins regardless of the media
   query. Written there first, and the desktop paragraph silently dropped to
   row 2 under the tile — caught by measuring BOTH breakpoints after the fix,
   not just the one that was broken. */
@media (min-width: 820px) {
  .row p { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   10. CASE CARDS — asymmetric spans. Row 1 is 7/5, row 2 is 5/7, so no two
   rows are the same shape and nothing is ever three-equal.
   -------------------------------------------------------------------------- */
.cases { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-16); }
@media (min-width: 900px) {
  .cases { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .case-a { grid-column: span 7; }
  .case-b { grid-column: span 5; }
  .case-c { grid-column: span 5; }
  .case-d { grid-column: span 7; }
  .case-wide { grid-column: span 12; }
}
.case {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-frame); overflow: hidden;
  background: var(--lvl-1); box-shadow: var(--ring), var(--bloom);
  text-decoration: none; color: inherit;
  transition: transform var(--t-pop) var(--ease), background var(--t-fast) var(--ease);
}
a.case:hover { background: var(--lvl-2); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { a.case:hover { transform: none; } }
.case-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #030405; }
.case-art img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: var(--s-6) var(--s-6) var(--s-8); }
.case-body h3 {
  font-family: var(--display); font-size: var(--fs-h3);
  font-weight: var(--w-semibold); letter-spacing: -.02em; line-height: 1.15;
  font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 0;
}
.case-body p { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--fs-small); }
.case-kicker { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase;
               color: var(--ink-4); }
.case-figs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.case-figs span {
  padding: var(--s-1) var(--s-3); border-radius: var(--r-chip);
  background: var(--lvl-2); box-shadow: var(--ring);
  font-size: var(--fs-micro); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* THE ONE LIGHT CARD (VISUAL-MAP.md steal 8). Exactly one per page, and it is
   always the card carrying the offer — the contrast budget buys attention where
   attention converts. */
.case-light { background: #ecece9; color: #101114; box-shadow: none; }
.case-light .case-kicker { color: #5b5c62; }
.case-light h3 { color: #101114; }
.case-light p { color: #3b3c42; }
.case-light .case-figs span { background: rgba(16,17,20,.06); box-shadow: inset 0 0 0 1px rgba(16,17,20,.1); color: #24252a; }
a.case-light:hover { background: #f6f6f4; }

/* --------------------------------------------------------------------------
   11. LONGFORM — case-study bodies and the method essay
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-6); }
.prose h3 {
  margin-top: var(--s-16); font-family: var(--display); font-size: var(--fs-h3);
  font-weight: var(--w-semibold); letter-spacing: -.02em;
  font-variation-settings: 'opsz' 60, 'SOFT' 0, 'WONK' 0;
}
.prose p { color: var(--ink-3); }
.prose strong { color: var(--ink-1); font-weight: var(--w-medium); }
.prose ul { margin: 0; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: var(--s-6); color: var(--ink-3); }
.prose li + li { margin-top: var(--s-3); }
.prose li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--amber);
}
/* A commitment we can be held to gets the green rule instead of the amber one —
   same semantic as the gate label and the passing rows of the /work/ ledger.
   The list of things we will NOT do deliberately keeps the neutral amber dash:
   the colour marks "checkable", not "good news". */
.prose ul.commit li::before { background: var(--green-t); width: 10px; }
/* The checkable half of each promise, in the same green. This is the part a
   client can hold us to — a date, a deliverable, a pricing basis — so it gets
   the "verified" hue rather than the plain ink emphasis. Note the dash above is
   a ::before, and the smell-4 probe only reads real elements: a page whose only
   second hue lives in a pseudo-element measures as single-hue no matter how it
   LOOKS. Marking the text is what makes the palette true in both the DOM and
   the pixels, which is the point of the rule in the first place. */
.prose ul.commit strong { color: var(--green-t); font-weight: var(--w-medium); }

/* a measured-value table: this is the site's whole argument, so it gets a real
   component instead of a paragraph of adjectives */
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ledger caption { text-align: left; color: var(--ink-4); font-size: var(--fs-micro);
                  padding-bottom: var(--s-3); }
.ledger th, .ledger td { text-align: left; padding: var(--s-3) var(--s-4);
                         border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger th { color: var(--ink-4); font-weight: var(--w-medium); font-size: var(--fs-micro);
             letter-spacing: .06em; text-transform: uppercase; }
.ledger td { color: var(--ink-2); }
.ledger td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-1); }
.ledger td.bad { color: var(--amber-t); }
.ledger td.good { color: var(--green-t); }
.table-scroll { overflow-x: auto; margin-top: var(--s-8); }

/* --------------------------------------------------------------------------
   12. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-6); max-width: 34rem; margin-top: var(--s-12); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-small); color: var(--ink-2); font-weight: var(--w-medium); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--s-3) var(--s-4);
  background: var(--lvl-1); color: var(--ink-1);
  border: 0; border-radius: var(--r-item);
  box-shadow: var(--ring);
  font-family: inherit; font-size: var(--fs-body);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field .hint { font-size: var(--fs-micro); color: var(--ink-4); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-5); }

/* --------------------------------------------------------------------------
   13. CALLOUT + FOOTER
   -------------------------------------------------------------------------- */
.callout {
  position: relative; overflow: hidden;
  border-radius: var(--r-frame); padding: var(--band) var(--gutter);
  background: var(--lvl-1); box-shadow: var(--ring), var(--bloom); text-align: center;
}
.callout::before {
  content: ''; position: absolute; inset: -60% 20% 30%;
  background: radial-gradient(closest-side circle, rgba(231,200,143,.10), transparent 70%);
  pointer-events: none;
}
.callout > * { position: relative; }
.callout h2 {
  font-family: var(--display); font-size: var(--fs-h2); line-height: 1.05;
  letter-spacing: -.025em; font-weight: var(--w-semibold);
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 1;
  max-width: 22ch; margin-inline: auto;
}
.callout p { margin: var(--s-6) auto 0; max-width: 48ch; color: var(--ink-3); }
.callout .hero-cta { justify-content: center; }

.site-foot { border-top: 1px solid var(--line); padding-block: var(--s-16) var(--s-12); }
.foot-grid { display: grid; gap: var(--s-12); grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid h2 { font-size: var(--fs-small); color: var(--ink-4); font-weight: var(--w-medium);
                letter-spacing: .08em; text-transform: uppercase; }
.foot-grid ul { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.foot-grid li + li { margin-top: var(--s-3); }
.foot-grid a { color: var(--ink-3); text-decoration: none; font-size: var(--fs-small); }
.foot-grid a:hover { color: var(--ink-1); }
.foot-blurb { margin-top: var(--s-4); color: var(--ink-4); font-size: var(--fs-small);
              max-width: 34ch; }
/* THE PAGE-WEIGHT BADGE — leapfrog move #2 (SYSTEM.md §10.11). Nobody in this
   category states their transfer size in public because almost nobody could
   survive it: their home page is 33.3 MB. Ours is stated, verifiable by anyone
   in DevTools in four seconds, and it converts an engineering discipline into a
   status signal. The green dot is the "checked" hue — this is a passing gate. */
.weight-badge {
  margin-top: var(--s-16);
  display: inline-flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-item);
  background: var(--lvl-1); box-shadow: var(--ring), var(--bloom);
  font-size: var(--fs-small); color: var(--ink-3);
}
.weight-badge .wb-dot {
  align-self: center; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-t); box-shadow: 0 0 0 4px rgba(110,225,167,.14);
}
.weight-badge .wb-num { font-variant-numeric: tabular-nums; font-weight: var(--w-medium);
                        color: var(--ink-1); font-size: var(--fs-body); letter-spacing: -.01em; }
.weight-badge .wb-sep { color: var(--ink-5); }
.weight-badge .wb-lab { color: var(--ink-4); }

.foot-legal {
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--fs-micro); color: var(--ink-5);
}

/* --------------------------------------------------------------------------
   14. PAGE HEADER for subpages
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--s-16); }
.page-head h1 {
  margin-top: var(--s-6); font-family: var(--display);
  font-size: clamp(2.4rem, 1.2rem + 3.9vw, 4.25rem);
  line-height: 1.02; letter-spacing: -.03em; font-weight: var(--w-semibold);
  font-variation-settings: 'opsz' 120, 'SOFT' 0, 'WONK' 1;
  max-width: 18ch;
}
.page-head .lede { margin-top: var(--s-8); max-width: var(--measure);
                   font-size: var(--fs-lead); color: var(--ink-3); }
.crumbs { font-size: var(--fs-micro); color: var(--ink-5); }
.crumbs a { color: var(--ink-4); text-decoration: none; }
.crumbs a:hover { color: var(--ink-2); }

/* a hairline rule that is a rule, not a border on a box */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   15. MOTION — only transform and opacity are ever animated (craft gate), and
   the reveal is CSS-first: content is VISIBLE by default and the class only
   ever adds motion. dialedweb's about page renders pitch-black without scroll
   events (VISUAL-MAP.md skip 3); this fails open instead.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px);
          transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .rise.in, .no-js .rise { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. MOBILE — one override pass at 390 and below, the way their scale does it
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .nav { padding-left: var(--s-4); gap: var(--s-3); }
  .nav-links { gap: 0; }
  .nav-links a { padding: var(--s-2) var(--s-3); font-size: var(--fs-micro); }
  .nav-links li:first-child { display: none; } /* Home is the brand mark on small screens */
  .hero-cta .btn { width: 100%; justify-content: space-between; }
  .stat { padding: var(--s-6) var(--s-4) var(--s-4); }
  .foot-legal { flex-direction: column; gap: var(--s-2); }
}
@media (max-width: 400px) {
  .nav-links a { padding: var(--s-2); }
}

/* print: the ledger tables are the reason anyone would print this */
@media print {
  body { background: #fff; color: #000; }
  .nav-wrap, .hero::before, .callout::before, .site-foot { display: none; }
}