:root{--prussian:#030F26;--imperial:#082767;--pacific:#00A1AF;--porcelain:#F7F7F3;--green:#A0CC3A; /* Two colours were repeated all over the stylesheet without ever being named: the hero stage navy (9 uses) and the pale teal the eyebrows and key swatches use (6). A brand colour written out by hand in nine places is nine places to miss when it changes. rgba() values are deliberately NOT tokenised — carrying alpha would need relative-colour syntax that is too new to put in front of a launch. */ --stage:#04173B;--mint:#7FD0D7; /* The fixed header's own height: 14px padding + a 68px cap. It condenses to 9 + 58 = 76px past 40px of scroll, so reserving the tall state is always enough. Anything pinned and vertically centred must subtract this, or it centres against the viewport and slides under the nav. */ --head-h:82px; /* ── CORNER SCALE ──────────────────────────────────────────────── Eight distinct radii had accumulated — 3, 10, 14, 16, 20, 22, 26 and the pill — and they were not eight decisions. Two families were each doing one job at two or three sizes: photographic tiles at 14 and 16, panels at 20, 22 and 26. Nobody can name the difference between a 20px and a 22px corner, but a stack card at 22 above a mosaic plate at 14 beside a panel at 20 reads as unresolved. Four steps, each with a job: --r-xs hairline chrome (a legend swatch) --r-sm small floating chrome (the map tooltip) --r-md anything holding a photograph --r-lg anything that is a panel or a card Circles stay 50% and pills stay 999px; both are shapes, not sizes. */ --r-xs:3px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-pill:999px; /* ── TYPE SCALE ────────────────────────────────────────────────── Only the ramps that were the SAME SIZE written differently are merged here. The homepage carried clamp(38px,5.1vw,74px) and clamp(37px,5.1vw, 73px) in adjacent rules — a one-pixel difference nobody chose — and three overlay ledes sat at 19px, 18.5px and 18px max. Two of those three were mine, added this week. Ramps that differ for a reason keep their own values and are NOT in this block: the parallax opener is smaller than the sequenced one because its stage is 250px shorter, and the Leadership statement is larger than everything because it is the only thing on a white screen. */ --t-stmt:clamp(38px,5.1vw,74px); /* homepage statements */ /* ONE H1 RAMP (audit, 13 Aug 2026). Five were in use: 84px on the standard masthead, 84 on the expanding and sequenced openers but from a different floor, 96 on Leadership's statement and 72 on the market parallax. At 390px that spread read 34 / 36 / 38 for the same element. Home keeps its own ramp because the scrollytelling opener is a different animal; every page h1 now derives from here. */ --t-h1:clamp(38px,6vw,84px); /* ONE BODY LEADING. The size was already near-constant at 16.5px but the leading was not: 1.6, 1.62, 1.66 and 1.68 rendered as 26.4 / 26.73 / 27.39 / 27.72px on different pages. A four-value spread that small does not read as a decision, it reads as drift. */ --lh-body:1.64; /* ── SECTION RHYTHM ────────────────────────────────────────────── Named rather than renumbered. Measured across the interior pages the values were already one system — 63/63 on every body section, 63/81 on the closing CTA, and the masthead's header clearance on top — so the audit's "four systems" was counting the homepage's pinned sections alongside them. Those are load-bearing: #record, #services and #leadership are tuned against the ground journey's stop table and the pin heights, and re-numbering them moves the colour crossings. They keep their own values deliberately. What was missing was a NAME. Three literals repeated down the file drift the first time someone nudges one; three tokens cannot. */ --sp-sec:clamp(48px,7vh,86px); /* every interior body section */ --sp-close:clamp(64px,9vh,110px);/* the closing CTA, before the footer */ --sp-open:clamp(36px,5vh,64px); /* masthead clearance under the fixed cap */ --sp-open-b:clamp(74px,10vh,118px); /* ── CONTROLS ──────────────────────────────────────────────────── Measured, the buttons were already systematic BY ROLE rather than inconsistent: one page pill (.pill), one nav pill (.cta), one filter chip (.lc-chip on the map) and a set of icon-only controls. The audit counted them together and read four sizes as drift. The one real accident was the pair: 15.5px on the page pill and 14.5px on the nav pill, a single pixel apart for no reason anyone chose — the same fault as the homepage's 37/38px headline twins. Both now read from --t-btn. The chip stays smaller because a filter is not a call to action, and that is a decision rather than a leftover. */ --t-btn:15.5px; /* ── MOTION ────────────────────────────────────────────────────── Three durations for interaction, not twenty-three. .28s was already carrying 71 of them; the rest were a long tail of single uses within a few hundredths of each other — .18, .2, .25, .3, .34, .35, .38 all doing the same job at almost the same speed, which is what made similar elements feel subtly out of step. ANIMATION timings are untouched. Those are ten values in the sequenced hero's beat table, timed to each other and released by script; they are choreography, not drift, and snapping them to a scale would desynchronise the deal from the reveal. The same goes for the three deliberate long moves (.9s, 1.15s, 1.4s) on the drawer and the ground crossing. */ --mo-ui:.28s; /* hover, colour, focus — anything answering a pointer */ --mo-move:.55s; /* something changing place or size */ --mo-slow:.8s; /* a large, deliberate move */ --t-h2:clamp(26px,3.4vw,46px); /* section heading */ --t-h3:clamp(26px,3.2vw,44px); /* sub-heading */ --t-lede:clamp(15px,1.5vw,19px)} /* lede over a photograph */ *{box-sizing:border-box} /* Form controls do not inherit type from their ancestors — that is a browser default, not a choice — so every