/* =========================================================================
The Growth Transfer — design system
-------------------------------------------------------------------------
One stylesheet, no build step, no dependencies. Hand authored.
The system is two surfaces, not two themes. `color-scheme: light` is
declared once and never revisited; a dark passage is a `.band`, which is a
markup decision, not a media query. Every component that can sit on both
surfaces carries its `.band` override immediately beneath it, in the same
block, so the two can never drift apart.
Identity: ink / paper / gold. Squared corners everywhere. No shadows, no
gradients, no rounded anything. One gold accent per composition.
Contract: docs/BUILD-CONTRACT.md. Reference: docs/BRAND-SYSTEM.md.
If this file and BRAND-SYSTEM.md disagree, this file is right.
========================================================================= */
/* =========================================================================
1. SELF-HOSTED TYPE
-------------------------------------------------------------------------
These three families were previously pulled from fonts.googleapis.com: a
render-blocking third-party request on the critical path and a privacy
exposure for EU visitors. Now they are latin-subset woff2 files in fonts/.
Archivo and Source Serif 4 are variable fonts, so one file covers the whole
weight range each is used at. IBM Plex Mono ships as three static cuts
because the mono is only ever used at 400, 500 and 600 and three subset
files are smaller than one variable one.
All three are SIL Open Font License 1.1. The licence text ships in fonts/,
which is what the OFL requires of anyone redistributing the binaries.
NOTE for whoever maintains fonts/: archivo.woff2 and source-serif.woff2
MUST be the variable cuts. A static 400-weight file behind a `font-weight:
400 700` descriptor renders every heading at 400 with no synthesis, which
reads as "the bold went missing" rather than as an error.
========================================================================= */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/archivo.woff2") format("woff2");
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/plex-mono-500.woff2") format("woff2");
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/plex-mono-600.woff2") format("woff2");
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../fonts/source-serif.woff2") format("woff2");
}
/* =========================================================================
2. TOKENS
-------------------------------------------------------------------------
Contrast measured, not eyeballed (scripts in the build scratch area, WCAG
2.1 relative-luminance formula, alpha values composited against their real
ground before measuring):
--ink-92 on --paper 13.32:1 AA
--ink-72 on --paper 6.87:1 AA <- default body text
--ink-66 on --paper 5.59:1 AA <- meta/caption ramp
--ink-66 on --paper-alt 5.47:1 AA
--ink-66 on --tile 5.28:1 AA
--paper-88 on --ink 12.68:1 AA
--paper-60 on --ink 6.48:1 AA
--gold-ink on --paper 5.24:1 AA <- the darkened twin
--gold-ink on --tile 4.59:1 AA (the tightest ground it sits on)
--gold on --ink 7.35:1 AA
--gold on --paper 2.22:1 BANNED, and why the twin exists
Non-text (WCAG 1.4.11, 3:1 floor). Hairline dividers are decorative and may
sit below it; the boundary of a CONTROL may not, so form fields and ghost
buttons take their own token rather than the hairline:
--control on --paper 3.36:1 AA (input + ghost borders on paper)
--control-ink on --ink 3.79:1 AA (input + ghost borders on ink)
--line on --paper 1.34:1 decorative divider only
--line-paper on --ink 1.57:1 decorative divider only
The old body colour rgba(23,21,18,.45) measured 2.89:1 and was the dominant
text colour on the site. It is banned. Do not reintroduce it.
The meta ramp was rgba(23,21,18,.55) (3.91:1) until the pre-ship audit:
contract section 1 named it, but section 4 makes 4.5:1 a blocking floor and
every consumer of it (.label, .figure-cap, .spec-k, .gauge-cap, .debt-kicker,
.field label) is 10-11px mono, which is not WCAG "large text". Section 4
wins over section 1; the token is now .66.
========================================================================= */
:root{
color-scheme: light;
--ink:#171512;
--ink-92:rgba(23,21,18,.92); /* headings on paper */
--ink-72:rgba(23,21,18,.72); /* body on paper — AA (≈6:1) */
--ink-66:rgba(23,21,18,.66); /* meta/captions on paper — AA at 10-11px mono */
--paper:#f5f2ea;
--paper-alt:#f0ece2; /* alternating section fill */
--tile:#e8e3d9; /* photo/diagram tile fill */
--paper-88:rgba(245,242,234,.88); /* body on ink — AA */
--paper-60:rgba(245,242,234,.60); /* meta on ink */
--line:rgba(23,21,18,.14); /* hairlines on paper — decorative dividers only */
--line-paper:rgba(245,242,234,.16); /* hairlines on ink — decorative dividers only */
--control:rgba(23,21,18,.50); /* control boundaries on paper — 3.36:1, WCAG 1.4.11 */
--control-ink:rgba(245,242,234,.42); /* control boundaries on ink — 3.79:1 */
--gold:#c2a05a; /* accent on ink ONLY */
--gold-ink:#7d602b; /* accent on paper — darkened twin; measures 5.24:1 on --paper */
--gold-soft:rgba(194,160,90,.5);
--sans:'Archivo',-apple-system,system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
--serif:'Source Serif 4',Georgia,serif;
}
/* -------------------------------------------------------------------------
Surface layer.
Every component below paints with these six names instead of reaching for
a raw colour. `.band` and `.section--alt` reassign them, so a component
dropped onto an ink ground recolours itself without knowing it moved. The
explicit `.band .x` overrides that follow each component exist for the
cases this cannot cover: inverted buttons, grid-cell fills, focus rings,
and anywhere `.band a` (0,1,1) would out-specify a component class (0,1,0).
------------------------------------------------------------------------- */
:root{
--ground: var(--paper); /* the section's own background */
--fill: var(--paper); /* tiles, cells and cards sitting on it */
--fill-alt: var(--paper-alt); /* the alternate cell in a zebra run */
--text-strong: var(--ink-92); /* headings */
--text: var(--ink-72); /* body */
--text-dim: var(--ink-66); /* meta, captions, mono labels */
--hairline: var(--line); /* decorative dividers */
--control-line: var(--control);/* interactive boundaries (inputs, ghost buttons) */
--accent: var(--gold-ink);
--focus: var(--gold-ink);
--ease: cubic-bezier(0.22,0.61,0.36,1);
}
/* =========================================================================
3. RESET + BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
/* the sticky nav is ~72px tall; 90px keeps an anchored heading clear of it */
scroll-padding-top: 90px;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--paper);
color: var(--ink-72);
font-family: var(--sans);
font-size: 17px;
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
min-height: 100dvh;
}
/* A page whose content is shorter than the viewport still paints `body` under
the footer. On a page that ends in the ink footer that leaves a cream band
below it, reading as though the footer detached. 404.html is the only such
page today; the class exists so the next short page has one. */
body.page-ink { background: var(--ink); }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; border-radius: 0; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
/* squared corners are the identity, not a default to be overridden */
* { border-radius: 0; }
/* `main` is focusable via the skip link (tabindex="-1"). It deliberately does
NOT get `outline: none` here: landing a keyboard user on an unmarked region
is worse than one extra ring, and `outline: none` appears nowhere in this
file by contract. The global :focus-visible rule covers it. */
/* =========================================================================
4. TYPOGRAPHY
========================================================================= */
h1, h2, h3, h4 {
font-family: var(--sans);
color: var(--text-strong);
letter-spacing: -0.02em;
font-weight: 600;
}
h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.08; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.band h1, .band h2, .band h3, .band h4 { color: var(--paper); }
/* Outline-vs-visual decoupling: a card title that belongs at h2/h3 in the
document outline but should not shout at h2/h3 size. Component classes that
restyle a promoted heading (.stat-label, .stage-name) are declared after
this rule so they win on source order at equal specificity. */
.h-sub {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text-strong);
}
/* ---- rag control, globally ----------------------------------------------
DESIGN-PRINCIPLES section 1: a headline may not strand a lone word at ANY
width, and the structural fix is `text-wrap: balance` rather than a hand
placed break, because balance minimises the longest line and therefore
holds at widths nobody screenshotted.
Before this block the whole stylesheet carried exactly two text-wrap
declarations: `.hero h1 .hero-line` and `.hero-sub`. Every other h1 and h2
on all seven pages wrapped greedily, which is how methodology stranded
"machine", 404 stranded "exist." and the funnel intro stranded "you." — the
punch word of the product — at 390, 430 and 768 simultaneously.
balance is capped by the engine at a handful of lines (Chrome stops at 6),
so it is spent on display type and on the short utility classes that behave
like display type. Everything that runs to real paragraph length takes
`pretty` instead, which only reserves the last line and therefore cannot
orphan a final word.
The funnel selectors are here rather than in score/index.html's inline
sheet on purpose. That sheet loads AFTER this file, but it sets no
text-wrap of its own, so there is nothing to lose the cascade to and the
rule belongs with every other page's. */
h1, h2, h3, h4,
.h-sub, .lede, .stat-num, .stage-name, .faq-q, .pull, .gauge-cap,
.fn-intro h1, .fn-gate h1, .fn-qright h1, .fn-close h2, .fn-block > h2,
.fn-dive h3, .fn-fcard h3, .fn-qleft-sub {
text-wrap: balance;
}
p, li, dd,
.note, .fine, .spec-v, .stat-note, .stage-note, .debt-note, .faq-a,
.tquote, .prose-serif, .fn-serif, .fn-dive-body, .fn-opt-text {
text-wrap: pretty;
}
/* The trademark glyph in display type. `™` inherits the heading's font
size, so at the 64px h1 ceiling it renders as roughly 40px of "TM" bolted
to the side of a word. At 0.42em on a raised baseline it reads as the mark
it is. Wrap it in the markup: `Score™`. */
.tm {
font-size: 0.42em;
vertical-align: 0.5em;
letter-spacing: 0;
font-weight: 500;
line-height: 0;
}
p { color: var(--text); }
strong, b { font-weight: 600; color: var(--text-strong); }
.band strong, .band b { color: var(--paper); }
/* ---- default vertical rhythm --------------------------------------------
The reset zeroes every margin. Without a default rhythm a page agent has
to reach for inline `style="margin-top:..."` on every heading, which the
markup rules forbid, so the spacing between a kicker, its heading and the
paragraph under it lives here.
Adjacent-sibling only, and every component that already manages its own
spacing (flex `gap`, an explicit margin-bottom, or a grid row where a
top margin would offset one column against the other) is neutralised
immediately below. Two paragraphs in a row still get their gap. */
.kicker + h1, .kicker + h2, .kicker + h3, .kicker + .h-sub { margin-top: 16px; }
h1 + p, h2 + p, h3 + p, .h-sub + p,
h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 18px; }
p + p { margin-top: 18px; }
/* components that space themselves */
.card > p + p,
.stat .stat-label + .stat-note,
.stage .stage-name + .stage-note,
.faq-q + .faq-a,
.step-body .h-sub + p, .step-body h3 + p,
.spec-row > p + p,
.footer-bottom p + p { margin-top: 0; }
/* the sentence under a heading: one size up from body, never a second heading */
.lede {
font-size: clamp(17px, 2vw, 19px);
line-height: 1.6;
color: var(--text);
max-width: 58ch;
}
.hero .lede, .band .lede { color: var(--paper-88); }
/* .note and .fine are small SANS prose, so they take the 6.9:1 body ramp, not
the --ink-66 meta ramp. Both ramps clear AA; the split is a hierarchy
decision, not a contrast one. */
.note { font-size: 14px; line-height: 1.6; color: var(--text); }
.band .note { color: var(--paper-88); }
.fine { font-size: 13px; line-height: 1.6; color: var(--text); }
.band .fine { color: var(--paper-88); }
/* ---- mono labels ---------------------------------------------------------
.kicker sits above a heading. .label is the same voice at cell/table scale.
Both carry 500 weight: at 10-11px the 400 cut goes thin enough that the
--ink-66 ramp stops being comfortably readable. */
.kicker {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.4;
color: var(--accent);
}
.band .kicker { color: var(--gold); }
/* A kicker for a composition whose one gold accent is somewhere else. The home
hero colours its punch line in gold, and a gold kicker above a gold headline
reads as two accents fighting rather than as a label introducing a headline.
Takes the meta ramp: --ink-66 on paper (5.59:1), --paper-60 on ink (6.48:1).
Use it only when the accent has genuinely moved, never to quiet a kicker
that is still the composition's only gold.
Each ground that carries an explicit `.kicker` colour override also needs an
explicit quiet twin at matching specificity, declared after it — see
`.hero .kicker--quiet` in the hero block. */
.kicker--quiet { color: var(--text-dim); }
.band .kicker--quiet { color: var(--paper-60); }
.label {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.5;
color: var(--text-dim);
}
.band .label { color: var(--paper-60); }
.label--accent { color: var(--accent); }
.band .label--accent { color: var(--gold); }
.mono { font-family: var(--mono); }
/* ---- serif -------------------------------------------------------------
Source Serif earns its download on reflective passages only: pull quotes,
the "why a loop" prose, testimonial quotes, and the funnel report prose.
Body copy stays in the sans. */
.prose-serif {
font-family: var(--serif);
font-weight: 400;
font-size: 19px;
line-height: 1.7;
color: var(--text);
}
.prose-serif p + p { margin-top: 20px; }
.band .prose-serif { color: var(--paper-88); }
.pull {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.42;
color: var(--text-strong);
border-left: 2px solid var(--accent);
padding-left: 28px;
max-width: 42ch;
}
.band .pull { color: var(--paper); border-left-color: var(--gold); }
/* ---- rules --------------------------------------------------------------- */
.rule-gold {
border: none;
border-top: 1px solid var(--accent);
width: 56px;
margin: 0;
}
.band .rule-gold { border-top-color: var(--gold); }
.rule-line { border: none; border-top: 1px solid var(--hairline); margin: 0; }
/* ---- links --------------------------------------------------------------- */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
.band a { color: var(--gold); }
.band a:hover { color: var(--paper); }
/* a link that reads as body text and underlines on the hairline */
.link-quiet {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
}
.link-quiet:hover { color: var(--text-strong); border-bottom-color: var(--accent); }
.band .link-quiet { color: var(--paper-88); border-bottom-color: var(--line-paper); }
.band .link-quiet:hover { color: var(--paper); border-bottom-color: var(--gold); }
/* =========================================================================
5. ACCESSIBILITY PRIMITIVES
========================================================================= */
/* NEVER outline:none. The keyboard path is the one nobody tests and everybody
inherits. Gold is 2.22:1 on paper, so the light ground takes the darkened
twin (5.24:1) and ink grounds take paper (16.29:1). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.band :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: var(--paper); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--ink);
color: var(--paper);
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
padding: 14px 22px;
border: 2px solid var(--gold);
}
.skip-link:focus { left: 8px; top: 8px; color: var(--paper); }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Safari drops list semantics from a list-style:none list, which is why every
such list in the markup carries role="list". This is the styling half. */
[role="list"], .list-plain { list-style: none; }
/* =========================================================================
6. CONTAINERS + SECTIONS + SURFACES
========================================================================= */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
/* `.reading` centres itself. It was `max-width` only, and `.center .reading`
auto-margined it, so the ONE page that uses a narrow measure without
centring its text — privacy — ran its entire 5,113px policy column flush
left in a 1040px wrap with 320px of blank paper down the right edge at
1440. A narrow measure is a typographic decision, not a left-alignment
one; the two were coupled by accident. */
.reading { max-width: 720px; margin-inline: auto; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .rule-gold, .center .depmap, .center .gauge { margin-left: auto; margin-right: auto; }
.center .lede, .center .measure, .center .reading { margin-left: auto; margin-right: auto; }
.section { padding: 88px 0; background: var(--ground); color: var(--text); }
.section--tight { padding: 56px 0; }
.section--line { border-bottom: 1px solid var(--hairline); }
/* the second surface: same paper family, one step down, for alternation */
.section--alt {
--ground: var(--paper-alt);
--fill: var(--paper); /* cells lift off the alt ground rather than vanish */
/* the zebra twin steps DOWN from --fill rather than up, because --paper-alt
is this section's own ground and a cell painted in it would disappear */
--fill-alt: var(--tile);
}
/* -------------------------------------------------------------------------
.band — the ink ground.
Reassigning the surface tokens is what recolours the twenty components
inside it. The explicit `.band .x` rules elsewhere in this file handle the
three things token reassignment cannot: inverted buttons, the focus ring,
and any place `.band a` (specificity 0,1,1) would beat a bare component
class (0,1,0). That last one is not hypothetical — it is exactly how a gold
button inside a dark band ends up with 1.07:1 label text.
------------------------------------------------------------------------- */
.band {
--ground: var(--ink);
--fill: var(--ink);
--text-strong: var(--paper);
--text: var(--paper-88);
--text-dim: var(--paper-60);
--hairline: var(--line-paper);
--control-line: var(--control-ink);
--accent: var(--gold);
--focus: var(--paper);
--fill-alt: rgba(245,242,234,0.05);
background: var(--ink);
color: var(--paper-88);
}
.band p { color: var(--paper-88); }
/* two-column editorial split: copy beside a diagram, gauge pair or photo */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
.split--top { align-items: start; }
/* the hairline that separates the two halves, matching the grid system */
.split--rule > :last-child {
border-left: 1px solid var(--hairline);
padding-left: 56px;
}
/* `.split--panel` gives the second column a FLOOR. Four consecutive phase
sections on methodology each ran their right-hand Outputs list out of
content about 60% up, leaving four identical empty rectangles bottom right;
an unbounded column cannot end, so it just stops. A bounded hairline panel
ends on purpose.
`align-self: start`, NOT `stretch`. Stretch was the original spelling and
it traded one empty rectangle for another: at 1440 a panel holding four
short list items drew to 355px for 210px of content, so about 130px of
blank paper sat INSIDE the drawn box, four times down the page. A panel
that hugs its content is a floor that ends on purpose; a stretched one is
the same unfinished column with a border on it. It was already correct on
the phone, where the column stacks and stretch has nothing to stretch to.
(A `.split--flip` visual-order modifier lived here too, for alternating the
run. Zero uses, and unsafe as written — no order reset at the single-column
breakpoint, so a collapsed column would have put the second column above
its own heading. Deleted at fix time rather than fixed, because its own
comment ruled it out for the one run it was written for: the Outputs panel
reads as a consequence of the phase description beside it, not as its
peer.) */
.split--panel > :last-child {
border: 1px solid var(--hairline);
background: var(--fill);
padding: 30px 28px;
align-self: start;
}
/* a stack of blocks with consistent rhythm, for prose sections */
.stack > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }
/* the standard gap between a section's intro block and its content */
.section-head { margin-bottom: 56px; }
.section-head .kicker { margin-bottom: 18px; }
.section-head h2 + .lede, .section-head h1 + .lede { margin-top: 18px; }
.section-head .rule-gold { margin-top: 24px; }
/* =========================================================================
7. NAV
-------------------------------------------------------------------------
Paper ground, bottom hairline, sticky. `.nav--stuck` is added by site.js
past scrollY > 60 and does two things: a translucent backdrop so long-form
copy scrolling under it stays legible, and a stronger hairline so the bar
reads as a separate plane rather than as the top of the page.
THE STICKY LIVES ON `header`, NOT ON `.nav`. It was on `.nav` until fix
time, and it was inert everywhere: `header` has no styling of its own, so
its height equals the nav's height exactly, a sticky box cannot travel
past the bottom of its own containing block, and the bar scrolled straight
off screen on all seven pages. `.nav--stuck` was therefore dead code that
could never paint. The banner landmark stays a real box (`display:contents`
would remove it), so the offset parent for the mobile panel is unchanged —
`.nav-inner` is `position:relative` and is still the panel's containing
block. If you move the stickiness back down a level, re-read this.
========================================================================= */
header {
position: sticky;
top: 0;
z-index: 60;
}
.nav {
background: var(--paper);
border-bottom: 1px solid var(--line);
transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav--stuck {
background: rgba(245,242,234,0.92);
backdrop-filter: blur(10px) saturate(1.15);
-webkit-backdrop-filter: blur(10px) saturate(1.15);
border-bottom-color: rgba(23,21,18,0.24);
}
.nav-inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 18px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* the logo is a link home on every page, so it is a tap target: the mark is
28px tall and the box is padded to 44 rather than the mark being scaled up */
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav-logo img { height: 28px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 26px; }
/* The nav CTA never wraps while the desktop row is on screen. `.nav-link`
already carries nowrap; the button did not, so between 761px (the hamburger
has not appeared yet) and ~820px "TAKE THE FREE DIAGNOSTIC" broke over two
lines and grew the sticky bar by ~20px on every page. Content buttons keep
wrapping — this is scoped to the nav, and released again at <=760 where the
CTA sits in the full-width dropdown panel and a narrow phone needs it. */
.nav-menu .btn { white-space: nowrap; }
.nav-link {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-72);
text-decoration: none;
white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
/* "Book a Call" sits in a row of mono uppercase labels, so it is a mono
uppercase label. It previously overrode font-family to --sans, dropped the
uppercase and the letter-spacing, and ran at 13px, on the reasoning that a
booking is an invitation rather than a destination. On the page that reads
as a mistake, not as an invitation: it is the only mixed-case item in the
bar and the eye lands on it as unstyled text. Corrected 2026-08-25 after the
operator flagged it.
The distinction it was reaching for is already carried, twice: this is the
only nav item that leaves the site, and the filled button beside it is the
primary action. It does not also need a second typeface. */
.nav-link--plain {
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
.nav-link--plain:hover,
.nav-link--plain:focus-visible { border-bottom-color: var(--gold-ink); }
/* current page: a 2px gold-ink underline, offset so it does not crowd the caps */
.nav-link.is-active, .nav-link[aria-current="page"] {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--gold-ink);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.nav-link--plain.is-active, .nav-link--plain[aria-current="page"] {
text-decoration: none;
border-bottom: 2px solid var(--gold-ink);
}
/* hamburger — 44px box from the first pixel, not only at the breakpoint */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex: none;
margin-right: -10px;
}
.nav-toggle-bars { display: block; width: 22px; }
.nav-toggle-bars span {
display: block;
height: 2px;
background: var(--ink);
transition: background 0.2s var(--ease);
}
.nav-toggle-bars span + span { margin-top: 5px; }
/* =========================================================================
8. BUTTONS
-------------------------------------------------------------------------
Mono caps, squared, no shadow. Three roles only: primary (the diagnostic),
ghost (a secondary action), and the text CTA (a link that is really a
button in intent). Vertical padding never drops below 13px, which is what
holds the 44px tap target at mobile widths without a media query.
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.2;
padding: 14px 28px;
border: 1px solid transparent;
text-decoration: none;
text-align: center;
transition: background 0.15s var(--ease), color 0.15s var(--ease),
border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
/* TACTILE PRESS. A button that does nothing between mousedown and navigation
reads as a link with a border; two percent of scale reads as a button. The
duration is 0.1s rather than the 0.15s above deliberately: a press has to
feel instant, and anything a person is touching should resolve faster than
anything they are only looking at.
Not applied to :focus-visible, which stays a ring rather than a squash, and
cleared under reduced motion with everything else. */
.btn:active { transform: scale(0.98); }
.btn--lg { font-size: 12px; padding: 17px 36px; }
.btn--sm { font-size: 10px; padding: 11px 18px; }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #262320; color: var(--paper); border-color: #262320; }
/* on ink the primary inverts. `.band a` is (0,1,1) and `.btn--primary` is
(0,1,0), so without these two selectors the label takes the link colour. */
.band .btn--primary, .hero .btn--primary {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.band .btn--primary:hover, .hero .btn--primary:hover {
background: #fffdf7;
color: var(--ink);
border-color: #fffdf7;
}
/* the ghost button's border IS the button, so it takes the 3:1 control token
rather than the decorative hairline (WCAG 1.4.11) */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--control); }
.btn--ghost:hover { color: var(--ink); border-color: var(--gold-ink); background: transparent; }
.band .btn--ghost, .hero .btn--ghost { color: var(--paper); border-color: var(--control-ink); }
.band .btn--ghost:hover, .hero .btn--ghost:hover { color: var(--paper); border-color: var(--gold); }
/* the quiet second CTA beside a primary: a link with a hairline under it */
.btn-text {
display: inline-block;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--hairline);
padding: 13px 0 3px;
}
.btn-text:hover { color: var(--text-strong); border-bottom-color: var(--accent); }
.band .btn-text { color: var(--paper-88); border-bottom-color: var(--line-paper); }
.band .btn-text:hover { color: var(--paper); border-bottom-color: var(--gold); }
.actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.center .actions { justify-content: center; }
/* =========================================================================
9. HAIRLINE GRIDS
-------------------------------------------------------------------------
gap:1px over a hairline-coloured container background, with opaque cells.
The dividers are the gaps, so there is no border-collapse arithmetic, no
doubled edges, and no last-child exception to write.
grid-template-columns is NEVER set inline in the markup. An inline value
cannot be overridden by a media query, which is exactly how a four-up grid
ends up horizontally scrolling a phone.
========================================================================= */
.grid-hairline {
display: grid;
gap: 1px;
background: var(--hairline);
border: 1px solid var(--hairline);
list-style: none;
}
.grid-hairline > * { background: var(--fill); padding: 36px 30px; min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* one inverted cell inside a paper grid (Stage 3 on the home page). It resets
the surface tokens the same way `.band` does, so everything inside it —
kicker, heading, body, hairlines — recolours without a per-element rule. */
.cell--ink {
--fill: var(--ink);
--text-strong: var(--paper);
--text: var(--paper-88);
--text-dim: var(--paper-60);
--hairline: var(--line-paper);
--control-line: var(--control-ink);
--accent: var(--gold);
--focus: var(--paper);
background: var(--ink);
color: var(--paper-88);
}
.cell--ink h2, .cell--ink h3, .cell--ink h4, .cell--ink .h-sub { color: var(--paper); }
.cell--ink p { color: var(--paper-88); }
.cell--ink :focus-visible { outline-color: var(--paper); }
.band .grid-hairline { background: var(--line-paper); border-color: var(--line-paper); }
.band .grid-hairline > * { background: var(--ink); }
/* `.grid-hairline--zebra` alternates the cell fill so a long run of cells
reads as a rhythm rather than as one grey field. It is scoped to the phone
in section 13, and deliberately: at two or more columns the alternation
lands as vertical stripes (odd cells are always the left column), which is
noise. At one column it lands as rows, which is the thing diagnostic.html's
five-area run actually needs — 2080px of five identical paper cells is the
"flat, uniformly grey page" principle 2 calls a failure state. */
/* =========================================================================
10. COMPONENTS
========================================================================= */
/* ---- the value-colour contract ------------------------------------------
THE BOUNDARY IS 60. It is the Stage 2 (Systemized) threshold, it is where
the funnel's classColor() switches, and from here on it is written down in
exactly one place instead of three.
Below 60 a value is still a constraint, so it takes the accent. At 60 and
above it has cleared the line, so it takes the strong text colour and the
accent goes back to meaning "this is the thing to fix". Gold that means
"low" on one card and "we tagged this one" on the next is a colour language
that contradicts itself, which is exactly what shipped before: diagnostic
painted four sub-60 numbers in ink and one in gold, and the funnel's focus
cards hard-coded gold onto a score of 85.
How it works. `.is-low` / `.is-high` set ONE custom property, `--val`, and
every value-bearing component (the gauge arc, the meter fill and number,
the chips, the funnel's dive and focus numbers) paints with `var(--val)`.
Nothing else changes, so a value class can be dropped on any element
without side effects, and because --accent and --text-strong are surface
tokens the same class does the right thing on paper and on ink.
js/site.js derives the class from the number at runtime (applyValue), so a
hand-authored class can only ever be the no-JS fallback, never the source
of a disagreement between the colour and the label. Author it anyway: it is
what a no-JS visitor sees. Override the boundary per element with
`data-boundary` when a scale genuinely has a different midpoint. */
.is-low { --val: var(--accent); }
.is-high { --val: var(--text-strong); }
/* the funnel's existing class names, kept as aliases so its renderers can
move over one at a time. Prefer .is-low / .is-high in new markup. */
.is-gold { --val: var(--accent); }
.is-paper { --val: var(--text-strong); }
/* the utility for a bare number that should carry its own value colour */
.val-num { color: var(--val, var(--text-strong)); font-variant-numeric: tabular-nums; }
/* ---- card ---------------------------------------------------------------
A standalone hairline box, for anywhere a grid cell is not the shape. */
.card {
background: var(--fill);
border: 1px solid var(--hairline);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.card > .kicker + h3, .card > .kicker + .h-sub { margin-top: -2px; }
.card p { font-size: 16px; }
.band .card { background: var(--ink); border-color: var(--line-paper); }
/* a card whose left edge carries the single gold accent */
.card--accent { border-left: 2px solid var(--accent); }
/* ---- stat tile ----------------------------------------------------------
The big number is a
: it is a value, not a section title. The tile's
real heading is the mono line beneath it, marked up as an h3 carrying
.h-sub .stat-label, so the document outline stays sequential while the
composition still leads with the number. */
.stat { display: flex; flex-direction: column; }
.stat-num {
font-family: var(--sans);
font-weight: 700;
/* 50px, not 52. about's ink strip runs "$1M to $5M" beside "16 wks" and
"30 days"; at 52px that range measured 270px against a 267px content box
in a 3-up cell, wrapped to two lines, and pushed its label 62px below the
other two, so the row's three labels stopped sharing a baseline on the
highest-contrast surface on the page. It missed by three pixels. A 2em
min-height would also have held the baseline, at the cost of 52px of dead
air under every one-line value on every stat strip on the site; two
points off the ceiling costs nothing anybody can see and removes the wrap
itself. Re-measure this if a longer value is ever added to a 3-up strip. */
font-size: clamp(38px, 4.4vw, 50px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
margin-bottom: 6px;
}
.stat-label {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.5;
color: var(--accent);
margin-bottom: 18px;
}
.stat-note { display: block; font-size: 14px; line-height: 1.6; color: var(--text); }
.band .stat-num { color: var(--paper); }
.band .stat-label { color: var(--gold); }
.band .stat-note { color: var(--paper-88); }
/* ---- stage card ---------------------------------------------------------- */
.stage { display: flex; flex-direction: column; }
.stage-n {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.stage-name {
display: block;
font-family: var(--sans);
font-weight: 700;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text-strong);
margin-bottom: 12px;
}
.stage-note { display: block; font-size: 14px; line-height: 1.6; color: var(--text); }
.band .stage-n, .cell--ink .stage-n { color: var(--gold); }
.band .stage-name, .cell--ink .stage-name { color: var(--paper); }
.band .stage-note, .cell--ink .stage-note { color: var(--paper-88); }
/* ---- testimonial card ---------------------------------------------------
The quote is serif: it is somebody else speaking, and the shift in voice
does more work than any quotation mark ornament would. */
.tcard { display: flex; flex-direction: column; gap: 22px; break-inside: avoid; }
.tcard blockquote { margin: 0; }
.tquote {
font-family: var(--serif);
font-weight: 400;
font-size: 17px;
line-height: 1.62;
color: var(--text-strong);
/* some captured quotes carry their own line breaks; honour them */
white-space: pre-line;
}
.tperson { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tavatar {
width: 48px;
height: 48px;
flex: none;
object-fit: cover;
background: var(--tile);
border: 1px solid var(--hairline);
}
.tname { display: block; font-size: 15px; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
/* a job title is content, not chrome, so it takes the body ramp rather than
the meta one even though it is set in the meta voice */
.trole {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
line-height: 1.4;
margin-top: 3px;
}
.band .tquote, .band .tname { color: var(--paper); }
.band .trole { color: var(--paper-88); }
.band .tavatar { background: rgba(245,242,234,0.08); border-color: var(--line-paper); }
/* ---- D.E.B.T. list ------------------------------------------------------- */
.debt-list { list-style: none; }
.debt-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 20px;
align-items: start;
padding-bottom: 20px;
border-bottom: 1px solid var(--hairline);
}
.debt-item + .debt-item { padding-top: 20px; }
.debt-letter {
font-family: var(--sans);
font-weight: 700;
font-size: 26px;
line-height: 1;
color: var(--accent);
}
/* display:block on the parts that always own a line, so the component works
whether a page agent reaches for
, or
. Without it a pair of
spans renders as "DIAGNOSEMap the bottleneck." and looks like a typo. */
.debt-name {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
.debt-note { display: block; font-size: 15px; line-height: 1.55; color: var(--text); }
.debt-letter { display: block; }
.band .debt-letter { color: var(--gold); }
.band .debt-name { color: var(--paper-60); }
.band .debt-note { color: var(--paper-88); }
/* `.debt-list--cycle` opts the list into the phase loop it shares with the
diagram (see the D.E.B.T. loop block below and section 12). Its only
non-animated effect is the resting letter colour: four gold letters
permanently lit is four accents in one composition, and it leaves the loop
nothing to light UP to. At rest the letters take the body ramp (6.6:1 on
paper-alt) and the active phase is the one that goes gold.
Gated on `.js` for the same reason every other motion rule is. Without the
loop running there is nothing to distinguish, and the original all-gold set
is the better still image, so a no-JS visitor keeps it. Reduced motion gets
it back too, via a matching-specificity rule in section 14. */
.js .debt-list--cycle .debt-letter { color: var(--text); }
.js .band .debt-list--cycle .debt-letter { color: var(--paper-88); }
/* ---- numbered steps (how it works) -------------------------------------- */
.steps { list-style: none; display: grid; gap: 28px; }
.steps > li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-items: start; }
.step-n {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--accent);
width: 46px;
height: 46px;
border: 1px solid var(--hairline);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.step-body h3, .step-body .h-sub { margin-bottom: 6px; }
.step-body p { font-size: 15px; line-height: 1.65; }
/* the marker box is the one gold accent in a steps list, so on ink it takes
the soft gold hairline rather than the neutral one */
.band .step-n { color: var(--gold); border-color: var(--gold-soft); }
/* ---- spec table (the practice / what it costs) --------------------------- */
.spec { border-top: 1px solid var(--hairline); }
.spec-row {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 48px;
padding: 28px 0;
border-bottom: 1px solid var(--hairline);
}
.spec-k {
display: block;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
padding-top: 3px;
}
.spec-v { display: block; font-size: 15px; line-height: 1.7; color: var(--text); }
.band .spec-v { color: var(--paper-88); }
/* ---- FAQ ----------------------------------------------------------------
`.faq-q` / `.faq-a` are the pair. The `.faq` list wrapper and its `> li`
rule were deleted at fix time with zero uses on any page: methodology
builds its four Q&As as a 2x2 `.grid-hairline`, which is the system's own
container, so a second list chrome for the same job was a pattern the site
invented and never deployed (principle 6). The two text classes stay,
because the grid cells use them. */
.faq-q { display: block; font-size: 19px; font-weight: 600; color: var(--text-strong); margin-bottom: 10px; letter-spacing: -0.01em; }
.faq-a { display: block; font-size: 16px; line-height: 1.7; color: var(--text); max-width: 68ch; }
.band .faq-a { color: var(--paper-88); }
/* ---- photo / diagram tile ------------------------------------------------ */
.tile-fill { background: var(--tile); }
.portrait {
width: 100%;
height: auto;
background: var(--tile);
border: 1px solid var(--hairline);
}
.figure-cap {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 16px;
}
.band .figure-cap { color: var(--paper-60); }
/* ---- donut gauge --------------------------------------------------------
ONE gauge, data driven, used by the home page, the diagnostic samples and
the funnel's live report. Before this pass there were two: index drew r=52
and diagnostic drew r=60, both with a hand-computed stroke-dasharray and a
hand-picked colour class, so the "same" component disagreed with itself on
two pages and the colour encoded the author's opinion rather than the value.
THE CONTRACT (page agents build to this exactly):
Stage 0 · Trapped
THE BASELINES ARE 72 AND 88, measured optically against the 28px default
`.gauge-num`, and index.html and diagnostic.html both ship them. (This
comment said 73 / 89 until fix time and nothing on the site used those.) A
gauge that OVERRIDES the number's font-size has to re-derive its own pair:
`.fn-score-gauge` runs `.gauge-num` at 44px and therefore sits at 76 / 96.
Change the size, re-measure the baselines; they are not portable.
ONE RADIUS SITE-WIDE: r=56 in a 136 viewBox. Circumference 351.86. The
static dasharray is `C*score/100` then `C*(1-score/100)`, and it ships in
the markup so a no-JS or reduced-motion visitor sees a finished, correct
ring rather than an empty one — the same discipline the count-up follows by
shipping the finished string.
The value class on the ARC (not the svg) is the no-JS colour. site.js
re-derives it from data-score every frame of the fill, so on the JS path
the colour physically travels with the number: an 82 starts gold, crosses
the 60 boundary partway round the ring, and lands in ink. A low score and a
high score are therefore different states you can see from across a room,
and the arc can never contradict the stage label underneath it.
Geometry stays in the markup as presentation attributes because it is data.
Colour lives here, so a gauge dropped on a band recolours with the system.
------------------------------------------------------------------------- */
.gauge { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gauge-svg { width: 136px; height: 136px; overflow: visible; }
.gauge--sm .gauge-svg { width: 104px; height: 104px; }
.gauge--lg .gauge-svg { width: 176px; height: 176px; }
.gauge-track { fill: none; stroke: rgba(23,21,18,0.10); stroke-width: 8; }
/* The arc paints from --val, so the value classes above are the only thing
that decides its colour. The stroke transition is what makes the boundary
crossing read as a colour travelling with the fill rather than as a snap;
it is well inside the 1400ms fill, so it has resolved before the ring
finishes. Same easing curve as everything else. */
.gauge-arc {
fill: none;
stroke: var(--val, var(--accent));
stroke-width: 8;
stroke-linecap: butt;
transition: stroke 0.45s var(--ease);
}
/* The value contract, at (0,2,0) so the class site.js writes every frame
always out-orders anything an author could hand-set on the arc. That is the
invariant the component rests on: the colour is a function of the number,
never of the author. (A deprecated `.gauge-arc--ink` compatibility class
lived here until fix time; zero uses, deleted.) */
.gauge-arc.is-low { --val: var(--accent); }
.gauge-arc.is-high { --val: var(--text-strong); }
.gauge-num {
font-family: var(--sans);
font-weight: 700;
font-size: 28px;
fill: var(--ink-92);
font-variant-numeric: tabular-nums;
}
/* opt-in: let the number carry the value colour too, for a report where the
score IS the composition rather than a figure beside a caption */
.gauge-num--val { fill: var(--val, var(--text-strong)); transition: fill 0.45s var(--ease); }
.gauge-den {
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
fill: var(--ink-72);
}
.gauge-cap {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
text-align: center;
}
.band .gauge-track { stroke: rgba(245,242,234,0.14); }
.band .gauge-num { fill: var(--paper); }
.band .gauge-den { fill: var(--paper-60); }
.band .gauge-cap { color: var(--paper-60); }
.gauges { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; }
/* ---- meter (the horizontal twin of the gauge) ---------------------------
ONE bar for "an area score out of 100", replacing two inventions: the ten
raw `