/* Benchmark Lab - site styles.
   Values are the design handoff's (docs/design/README.md, v4), which is high
   fidelity: colours, type, spacing and copy are final. Radius is 0 and there is
   no animation or gradient fill anywhere; that is the design, not an omission.
   Two things only look like exceptions: the ruler ticks are
   repeating-linear-gradient strips (hard 1px stops, so they draw lines, not
   blends), and the partner dashboard carries one hard offset shadow, v4's own.

   Fonts are self-hosted latin subsets so no page makes a third-party request.
   Both families are served from one variable file each. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/archivo-700.woff2) format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans.woff2) format('woff2');
}

:root {
  --base: #F6F2EA;
  --tint: #FBF8F1;
  --paper: #FFFFFF;
  --ink: #1B1917;
  --body: #37332C;
  --muted: #57534A;
  --faint: #6E675C;
  --rust: #C8471C;
  /* THE RUST AS SMALL TEXT (2 October 2026). The handoff's rust is 4.30:1 on
     the cream, below WCAG AA's 4.5:1 for text under 24px, and 3.65:1 on ink.
     These are the smallest moves that pass, hue kept: --rust-ink for small rust
     text on the cream (4.52:1 on --base, 4.76:1 on --tint, 5.05:1 on white) and
     for the fill behind cream text on a hovered button (4.52:1), and
     --rust-on-dark for small rust text on --ink (4.52:1). --rust itself stays
     for large type, rules, dots, bars and the focus outline, where 3:1 is the
     bar and it already clears it. The deep red of 25 October 2026 (#964) was
     taken back out on 26 October 2026 (Finlay). */
  --rust-ink: #C2451B;
  --rust-on-dark: #D0603B;
  --rule-soft: #D8D0C0;
  --track: #EFE9DC;
  /* On dark: the v3 handoff's two values. The consent banner keeps v2's, which
     is a different surface and was never part of this design. */
  --dark-text: #D8D0C0;
  --dark-muted: #B5AD9E;
  --faint-dark: #8F8778;
  --consent-text: #D8D2C4;
  /* v4's ruler ticks: minor ticks on light grounds, minor ticks on the dark
     section, and the dashboard's offset shadow. */
  --tick: #8F8778;
  --tick-dark: #57534A;
  --shadow: #E4DCCB;
  --display: 'Archivo', sans-serif;
  --text: 'IBM Plex Sans', sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  font-family: var(--text);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--rust-ink); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pad { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }

/* ---- Skip link ---- */
.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 20;
  background: var(--ink); color: var(--base);
  padding: 10px 18px; font: 600 14px var(--text); text-decoration: none;
}
.skip:focus { left: 12px; color: var(--base); }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  background: var(--ink); color: var(--base);
  font: 600 15px var(--text); text-decoration: none;
  padding: 15px 30px;
}
.btn:hover { background: var(--rust-ink); color: var(--base); }
.btn--nav { font-size: 14px; padding: 11px 20px; }
/* "Your hub" (6 October 2026 handoff, 1b): the outlined partner of "Discuss
   your index". 9.5px of padding plus the 1.5px rule is the 11px the filled
   button has, but a standard-resolution screen draws a 1.5px rule as 1px, so
   the pair's height is not left to that sum: .site-nav__actions stretches
   both to the taller one (about 40px; the handoff's "44px" assumed a taller
   line than the font's own) and centres each label. The handoff's
   hover is rust text on the cream; that is --rust-ink, because --rust is
   below AA for 14px text (see :root). The rule itself takes --rust. */
.btn--hub { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 9.5px 18px; }
.btn--hub:hover { background: transparent; color: var(--rust-ink); border-color: var(--rust); }
.btn--cta { padding: 16px 32px; }
.btn--light { background: var(--base); color: var(--ink); padding: 13px 26px; }
.btn--light:hover { background: var(--rust-ink); color: var(--base); }

.text-link { font: 600 15px var(--text); }

.actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---- Header ---- */
.site-header { position: relative; border-bottom: 1px solid var(--ink); background: var(--base); }
/* Locked to the top while the page scrolls, as The AI Lab's nav is, at every
   width: one row of 73px on a desktop, and since 27 September 2026 one row of
   77px on a phone, where the nav folds behind the menu button (further down)
   and the panel it opens hangs from this header, so the menu is a tap away
   from anywhere on the page (Finlay, 27 September 2026). Before the button
   existed the nav wrapped to three or four rows on a phone and could not be
   locked without covering most of the screen; that was the old 60em floor.
   A short window (split screen, landscape) keeps the static header, and the
   floor is in em so that enlarged text moves it too.
   It stays opaque: the design has no blur or transparency.
   scroll-padding-top keeps anchor jumps and keyboard focus clear of it: 5rem is
   the taller header plus room for the focus outline. It is not derived from the
   header, so re-measure if the header's padding, logo, .btn--nav or the menu
   button changes.
   The skip link sits above it (z-index 20) so it is never drawn underneath. */
@media (min-height: 37.5em) {
  html { scroll-padding-top: 5rem; }
  .site-header { position: sticky; top: 0; z-index: 10; }
}
.site-header__inner {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo__name { font: 700 19px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.site-nav { display: flex; align-items: center; }
.site-nav__list { display: flex; align-items: center; gap: 12px 26px; font: 500 14px var(--text); flex-wrap: wrap; }
/* v5's row: plain links, ruled beneath on hover only where a pointer can
   hover, so a tap in the phone panel leaves no mark stuck on the row it
   touched. Since the 6 October handoff (1b) the hover mark is a 2px ink rule
   under the word and the word stays ink, not the rust underline every other
   link takes. No mark for the current page: it carries aria-current for a
   screen reader, and the phone panel below bolds it. The handoff's notes
   also underline the current page, but its own 1b drawing does not, and the
   single row has drawn nothing for it since 1 October, so it still draws
   nothing. The two buttons are the list's last item, as a pair, 48px after
   the links (26px of gap plus 22px). */
.site-nav__list a:not(.btn) { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
@media (hover: hover) {
  .site-nav__list a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--ink); }
}
.site-nav__actions { display: flex; align-items: stretch; gap: 10px; }
.site-nav__actions .btn { display: flex; align-items: center; white-space: nowrap; }
/* The extra 22px only on the single row: on the wrapped row a page without
   JavaScript draws, it would indent the pair from the links above it. */
@media (min-width: 76em) {
  .site-nav__actions { margin-left: 22px; }
}
/* THE MENU BUTTON, below 75em. The v4 handoff says the nav
   "wraps on narrow screens", and it did, to two or three rows on a phone that
   took a third of the screen before the hero began; this is the one place the
   build departs from the handoff's layout, decided 27 September 2026. Every
   rule here hangs off html.js, which assets/menu.js sets before the first
   paint: without JavaScript the button stays hidden and the list is the
   wrapped row it always was. The button is the partner hub's: a 44px ruled
   square with three bars that become a cross when open, and no transition,
   because the design has no animation. The open list is a panel under the
   header, cream with the header's own ink rule beneath it, each link a 44px
   row ruled with the soft hairline, and the button last. It is positioned
   over the page rather than in the flow so that opening it does not shove
   the hero down and closing it does not snap it back, and it hangs from the
   header, so where the header is locked to the top the panel is too. */
.site-nav__toggle { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 76em, not the 60em it was until 1 October 2026: the v5 row held the logo,
   six links and the button on one line only from about 1180px, and below that
   it wrapped to two rows, and at 960px to three, which is the tall header the
   single row was brought back to get rid of. Since 6 October it holds five
   links and the "Your hub" pair from about 1170px, measured with about 44px of
   slack at 1216px, so the fold stayed put. It sits where even a classic 17px
   scrollbar leaves the 1200px container at its full width. Re-measure if the
   links, their gap, .btn--nav or .btn--hub change. menu.js watches this exact query, character for
   character, so the two can never disagree about a fractional width;
   scripts/check.js fails if they differ. */
@media (max-width: 75.99em) {
  .js .site-nav__toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    box-sizing: border-box; width: 44px; height: 44px; padding: 0;
    background: var(--base); border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  }
  /* Hover only where a pointer can hover: on a touch screen :hover sticks to
     the button after the tap that opened the menu, and the rust cross then
     reads as a state rather than a pointer. */
  @media (hover: hover) {
    .js .site-nav__toggle:hover { border-color: var(--rust); }
    .js .site-nav__toggle:hover .site-nav__bar { background: var(--rust); }
  }
  .site-nav__bar { display: block; width: 18px; height: 2px; background: var(--ink); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(2) { visibility: hidden; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .js .site-nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 24px 24px; background: var(--base); border-bottom: 1px solid var(--ink);
    font-size: 16px;
  }
  .js .site-nav--open .site-nav__list { display: flex; }
  .js .site-nav__list a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
  .js .site-nav__list a[aria-current="page"] { font-weight: 600; }
  @media (hover: hover) {
    .js .site-nav__list a:not(.btn):hover { color: var(--rust-ink); border-bottom-color: var(--rule-soft); text-decoration: underline; }
  }
  .js .site-nav__actions { flex-wrap: wrap; margin: 20px 0 12px; }
}
/* ---- Sections ----
   .section is the other pages': a 1px ink rule under each. The last one leaves
   its rule to the footer, which draws its own heavier one above the ticks. */
.section { border-bottom: 1px solid var(--ink); }
main > .section:last-child { border-bottom: 0; }
.section--tint { background: var(--tint); }

/* .band is the homepage's (v4): each section is ruled from the top, 1.5px, and
   1px where the dashboard continues the platform's tint. The hero, the dark
   section and the commercials that follow it carry no rule at all. */
.band--rule { border-top: 1.5px solid var(--ink); }
.band--rule-thin { border-top: 1px solid var(--ink); }
.band--dark { background: var(--ink); color: var(--base); }

.eyebrow {
  font: 600 13px var(--text); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.eyebrow--hero { margin-bottom: 20px; }
.eyebrow--dark { color: var(--dark-muted); }

/* The section-label rule: the eyebrow, then a strip of minor ticks filling the
   rest of the line. The strip is a pseudo-element, so it is never read out. */
.eyebrow--rule {
  display: flex; align-items: flex-end; gap: 18px;
  line-height: 1; white-space: nowrap; margin-bottom: 20px;
}
.eyebrow--rule::after {
  content: ""; flex: 1; height: 12px;
  background-image: repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px);
  background-position: bottom left; background-repeat: repeat-x;
}
.eyebrow--dark::after {
  background-image: repeating-linear-gradient(90deg, var(--tick-dark) 0 1px, transparent 1px 8px);
}
/* v6's eyebrows run longer ("How it works for your organisation"), and on a
   narrow phone the one-line label was wider than the screen. Below 40em it
   wraps, and the tick strip keeps a short stub beside it. */
@media (max-width: 40em) {
  .eyebrow--rule { white-space: normal; line-height: 1.3; }
  .eyebrow--rule::after { min-width: 24px; }
}
/* The hero's is a scale: major ink ticks every 56px over the minor ones. */
.eyebrow--major { margin-bottom: 28px; }
.eyebrow--major::after {
  height: 14px;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px);
  background-size: auto 14px, auto 7px;
  background-position: bottom left, bottom left;
}

/* Major scales: full-height major ticks over shorter minor ones, both hanging
   from the same edge. Empty aria-hidden elements; decoration only. */
.scale {
  background-repeat: repeat-x;
  background-position: bottom left, bottom left;
  border-bottom: 1.5px solid var(--ink);
}
.scale--stages {
  margin-top: 14px; height: 18px;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 64px),
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px);
  background-size: auto 18px, auto 8px;
}
.scale--footer {
  height: 16px; border-bottom: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px);
  background-size: auto 16px, auto 7px;
  background-position: top left, top left;
}

.h2 { font: 700 clamp(30px, 3.8vw, 48px)/1.05 var(--display); letter-spacing: -0.024em; }
.h2--offer { font-size: clamp(30px, 3.8vw, 52px); }
.h2--caps { margin-bottom: 28px; }
.h2--audiences {
  margin-bottom: clamp(44px, 5vw, 64px); max-width: 900px;
  font-size: clamp(32px, 4.4vw, 60px); letter-spacing: -0.026em; text-wrap: balance;
}
.h2--example { margin-bottom: 20px; color: var(--base); }
.h2--commercials { margin-bottom: 16px; max-width: 720px; }
.h2--enquire { margin-bottom: 20px; }

.lead {
  margin-top: 28px; font: 400 clamp(16px, 1.5vw, 19px)/1.65 var(--text);
  color: var(--body); max-width: 620px; text-wrap: pretty;
}
.section__lead { margin-bottom: 32px; font: 400 16px/1.65 var(--text); color: var(--body); max-width: 640px; text-wrap: pretty; }
.section__lead--rates { margin-bottom: 44px; }
.section__lead--enquire { margin-bottom: 0; max-width: 480px; }

.note { font: 400 14px/1.6 var(--text); color: var(--muted); }
.note--caps { margin-top: 20px; max-width: 520px; }

/* ---- Hero ---- */
.hero { padding-top: clamp(64px, 9vw, 130px); }
.hero__title {
  font: 700 clamp(48px, 7.2vw, 104px)/1.0 var(--display);
  letter-spacing: -0.032em; max-width: 1080px; text-wrap: balance; overflow-wrap: anywhere;
}
/* Every page's hero title, the homepage's included. The floor keeps the
   longer page headings from splitting single words on the narrowest phones.
   Remeasure line counts and word splits at 320, 390 and 1440 if a headline
   or this size changes. */
@media (max-width: 22.5em) { .hero__title { font-size: 40px; } }
/* Large text (40px and up, bold), so rust on cream needs 3:1 and gets 4.30:1. */
.hero__accent { color: var(--rust); }

/* ---- How it works: two routes, then three stages ---- */
.intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px 64px; align-items: start; margin-bottom: clamp(40px, 5vw, 56px);
}
.intro__lead {
  align-self: end; max-width: 480px;
  font: 400 clamp(16px, 1.4vw, 18px)/1.65 var(--text); color: var(--body); text-wrap: pretty;
}
.eyebrow--stages { margin-bottom: 0; }
.stages {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px 48px; padding-top: 24px;
}
.stage__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
/* Large text (36px and up, bold), so the cream needs 3:1 of it and gets 4.30:1. */
.stage__num {
  font: 700 clamp(36px, 3.6vw, 52px)/1 var(--display); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--rust);
}
.stage__word { font: 600 clamp(19px, 1.8vw, 22px) var(--display); letter-spacing: -0.01em; }
.stage__title { font: 600 16px var(--text); margin-bottom: 8px; }
.stage__body { font: 400 15px/1.6 var(--text); color: var(--body); }

.caps { border-top: 1.5px solid var(--ink); font: 400 15px/1.5 var(--text); }
.caps li { display: flex; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.caps li > span:last-child { min-width: 0; }
.caps__num {
  flex: none; min-width: 24px; font: 700 13px var(--display);
  font-variant-numeric: tabular-nums; color: var(--rust-ink);
}

/* ---- Partner dashboard (fictional; the panel says so in its own header) ---- */
.dash-intro { display: flex; flex-wrap: wrap; gap: 12px 48px; align-items: baseline; margin-bottom: 40px; }
.dash-intro__lead { flex: 1 1 320px; max-width: 520px; font: 400 16px/1.65 var(--text); color: var(--body); text-wrap: pretty; }
/* The panel label, small caps in muted ink (also /custom-benchmarks/). */
.panel__label {
  font: 600 11px var(--text); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* THE PORTFOLIO PANELS (26 October 2026, Finlay, from the v8 work, #968):
   the client book and an Account Manager Report, the hub's own screens
   rebuilt by hand at legible size, never screenshots. They replace the
   dashboard drawn from the v6 handoff, which no screen in the hub looks
   like. A panel is a .shot: the frame is the screen, with a 1px ink border
   and v4's hard offset shadow (the one shadow on the site), radius 0; its
   story beneath. Every frame is fictional and says so on itself
   (.shot__flag) and beneath the pair (check.js). */
.duo { display: grid; gap: 48px 32px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
/* A frame and its story share a row each, so the frames are one height and
   the stories start level. */
.shot { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 18px; min-width: 0; }
.shot__frame {
  position: relative; min-width: 0; background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow); padding: 22px 24px 18px;
}
.shot__story { min-width: 0; }
.shot__flag { font: 500 10px/1.4 var(--text); letter-spacing: 0.04em; color: var(--faint); }
.shot__flag--foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.shot__cap { margin-top: 28px; font: 400 13px/1.5 var(--text); color: var(--muted); }
.shot__kicker { font: 600 10px/1.3 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.shot__step { font: 600 11px/1.3 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-ink); }
.shot__title { margin-top: 8px; font: 700 clamp(19px, 1.7vw, 22px)/1.2 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.shot__text { margin-top: 10px; font: 400 15px/1.6 var(--text); color: var(--body); text-wrap: pretty; }
.pill {
  display: inline-block; flex: none; padding: 3px 8px; border: 1px solid var(--ink);
  font: 700 9px/1.3 var(--text); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
/* A fictional partner's own mark. Its serif is the reader's own Georgia: a
   partner's logo, not our type. */
.pmark { display: inline-flex; align-items: center; gap: 8px; }
.pmark__tile { width: 18px; height: 18px; flex: none; }
.pmark__name { font: 700 14px/1 Georgia, 'Times New Roman', serif; color: #24493D; }
.bl-mark { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--display); color: var(--ink); }

/* The client book, as the hub's partner page draws it: a banded count of
   people, never an exact one (B59, C6), and the figures as plain scores. */
.book { padding: 20px 20px 16px; }
.book__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.book__title { font: 700 16px/1.3 var(--display); }
.book__find { flex: none; min-width: 140px; padding: 6px 12px; border: 1px solid var(--ink); font: 400 12px var(--text); color: var(--muted); }
.book__table { width: 100%; margin-top: 14px; border-collapse: collapse; font: 400 13px/1.4 var(--text); font-variant-numeric: tabular-nums; }
.book__table thead th {
  padding: 8px 8px 8px 0; border-bottom: 1px solid var(--ink); text-align: left;
  font: 600 10px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.book__table tbody th, .book__table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: top; }
.book__table tbody th { width: 40%; font-weight: 600; }
/* The sector sits under the name, as the hub sets a client's profile note,
   rather than in a column of its own: the hub's table has the page's full
   width, and this one has half of it, where four columns left the figures and
   the date wrapping onto four lines a row. */
.book__sector { display: block; margin-top: 2px; font-weight: 400; }
.book__table td > span { display: block; }
.book__fig, .book__band, .book__when { white-space: nowrap; }
.book__table strong { font-weight: 700; }
.book__index { font-weight: 600; }
.book__muted { color: var(--muted); }
.book__count { margin-top: 10px; font: 400 12px var(--text); color: var(--muted); }
.book__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink); font: 400 12px/1.5 var(--text); color: var(--muted); }
.book__unshared { font: 700 14px/1.35 var(--display); color: var(--ink); }
.book__ask { display: inline-block; margin: 10px 0; padding: 5px 12px; border: 1px solid var(--ink); font: 600 12px var(--text); color: var(--ink); }
/* Beneath the book, the cohort as the partner page draws a closed round
   (hub/partner.js cellStatCard, cellAreaPanel, in its CELL colours): each
   headline's median and middle half, then the area medians strongest first,
   in the data colour, the laggard in ink and named in the takeaway beneath,
   so colour is never the only mark. Medians only, never a mark per
   organisation. The .book frame's padding is 20px, so the bleed matches it. */
.book .cohort { margin: 22px -20px 0; padding: 16px 20px 0; }
.cohort__lead { margin-top: 6px; font: 400 12px/1.5 var(--text); color: var(--muted); }
.cohort__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.cohort__stats .amr__card { margin-top: 0; }
.cohort__fig { margin-top: 8px; font: 700 40px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.cohort__note { margin-top: 6px; font: 400 12px/1.4 var(--text); color: var(--muted); }
.cohort__track { display: block; width: 100%; height: 6px; margin-top: 12px; }
.cohort__rail { fill: var(--base); }
.cohort__band { fill: var(--rule-soft); }
.cohort__mark { fill: var(--rust); }
.cohort__scale { display: flex; justify-content: space-between; margin-top: 4px; font: 400 10px var(--text); color: var(--muted); }
.cohort__areas { display: grid; gap: 8px; margin-top: 12px; font: 400 13px/1.3 var(--text); font-variant-numeric: tabular-nums; }
/* A wrapping row, as the hub's: where there is no room the bar and its
   figure drop under the name rather than shrink to a stub. */
.cohort__areas li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cohort__areas li > span:first-child { flex: 0 0 9.5em; }
.cohort__areas svg { flex: 1 1 8em; display: block; height: 8px; }
.cohort__areas li > span:last-child { flex: 0 0 2em; text-align: right; font-weight: 600; }
.cohort__fill { fill: var(--rust); }
.cohort__areas .is-lag .cohort__fill { fill: var(--ink); }
.cohort__takeaway { margin-top: 14px; font: 400 13px/1.5 var(--text); color: var(--ink); }
.cohort__takeaway span { color: var(--muted); }
/* On a phone the hub stacks each row; here Last response goes, so the table
   fits a 320px screen with no sideways scroll. */
@media (max-width: 40em) {
  .book__table .book__opt { display: none; }
}

/* The Account Manager Report's first page. */
.amr__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.amr__brands { display: flex; align-items: center; gap: 10px; }
.amr__sep { width: 1px; height: 16px; background: var(--ink); }
.amr__title { margin-top: 4px; font: 700 clamp(22px, 2.2vw, 28px)/1.1 var(--display); letter-spacing: -0.025em; }
.amr__grid { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 0; border: 1px solid var(--rule-soft); }
.amr__grid div { padding: 10px 12px; min-width: 0; }
.amr__grid div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
.amr__grid dt { font: 600 9px var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.amr__grid dd { margin: 3px 0 0; font: 600 13px/1.35 var(--text); }
.amr__section { margin: 18px -24px 0; padding: 16px 24px 0; border-top: 1px solid var(--ink); }
.amr__head { margin-top: 6px; font: 700 16px var(--display); }
.amr__list { margin-top: 10px; display: grid; gap: 10px; font: 400 13px/1.5 var(--text); color: var(--ink); }
.amr__list li { position: relative; padding-left: 16px; }
.amr__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--rust); }
.amr__list span { color: var(--muted); }
/* Its first two sections, as the report draws them (report-layout.js
   orgFigures, orgAreas): the two figures beside the quadrant, then the areas
   as a radar, the areas to look at in the data colour. SVG drawn at build
   (src/_data/amrSpecimen.js), so classes, never inline style. */
.amr__stand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: start; margin-top: 12px; }
.amr__figs { display: grid; gap: 14px; margin: 0; }
.amr__figs dt { font: 600 9px var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.amr__figs dd { margin: 2px 0 0; font: 700 40px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.amr__card { margin-top: 12px; padding: 12px 14px 14px; border: 1px solid var(--rule-soft); }
.amr__stand .amr__card { margin-top: 0; }
.amr__cardhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 12px/1.3 var(--text); color: var(--ink); }
.amr__cardhead span + span { font-weight: 400; color: var(--muted); }
.amr__beta { margin-top: 4px; font: 600 9px/1.3 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-ink); }
.amr__map { display: block; width: 100%; max-width: 190px; height: auto; margin: 10px auto 0; overflow: visible; font-family: var(--text); }
.amr__box { fill: var(--tint); stroke: var(--ink); stroke-width: 1; }
.amr__cut { stroke: var(--tick); stroke-width: 1; stroke-dasharray: 4 3; }
.amr__q { font-size: 14px; font-weight: 500; fill: var(--faint); }
.amr__q.is-here { font-weight: 700; fill: var(--ink); }
.amr__dot { fill: var(--rust); stroke: var(--paper); stroke-width: 2; }
.amr__axis { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; fill: var(--muted); }
.amr__cap { margin-top: 10px; font: 400 12px/1.45 var(--text); color: var(--muted); }
.amr__radar { display: block; width: 100%; max-width: 360px; height: auto; margin: 4px auto 0; overflow: visible; font: 600 17px var(--text); }
.amr__ring { fill: none; stroke: var(--rule-soft); stroke-width: 1; }
.amr__label { fill: var(--muted); }
.amr__label.is-look { fill: var(--rust-ink); }
.amr__shape { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; }
.amr__pt { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.amr__pt.is-look { fill: var(--rust); }
@media (max-width: 30em) {
  .amr__stand { grid-template-columns: 1fr; }
  .amr__figs { grid-template-columns: 1fr 1fr; }
}

/* ---- Who it's for ---- */
.defs { border-top: 1.5px solid var(--ink); }
.defs__row {
  display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft); align-items: baseline;
}
.defs__row:last-child { border-bottom: 1.5px solid var(--ink); }
/* max-width caps the fixed column at the container: at a 320px viewport the
   .wrap content box is 272px, and a flex item with `flex: none` does not shrink,
   so a bare 300px eats into the right gutter. */
.defs__label { flex: none; width: 300px; max-width: 100%; font: 600 clamp(19px, 1.9vw, 23px) var(--display); letter-spacing: -0.01em; }
.defs__desc { flex: 1 1 340px; min-width: 0; max-width: 560px; font: 400 15px/1.65 var(--text); color: var(--body); }

/* ---- In action (dark) ---- */
.example {
  padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 64px; align-items: center;
}
.example__body { margin-bottom: 16px; font: 400 16px/1.65 var(--text); color: var(--dark-text); max-width: 520px; text-wrap: pretty; }
.example__note { margin-bottom: 28px; font: 400 15px/1.65 var(--text); color: var(--dark-muted); max-width: 520px; }
.example__caption { font: 400 13px var(--text); color: var(--faint-dark); }

/* Specimen report card. Every size inside it is the design's fixed pixel value:
   the card reads as a miniature document, so the type does not scale with the
   page. FICTIONAL DATA ONLY - the label on the card and the caption beneath it
   are both required by scripts/check.js. */
.specimen { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.specimen__card {
  width: min(360px, 100%); aspect-ratio: 595/842; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); box-sizing: border-box; padding: 6.5% 7.5%;
  display: flex; flex-direction: column;
}
.specimen__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.specimen__issuer { flex: none; font: 700 9px/1 var(--display); white-space: nowrap; }
.specimen__flag {
  font: 600 7px var(--text); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rust); text-align: right;
}
.specimen__intro { padding-top: 26px; }
.specimen__kicker {
  font: 600 8px var(--text); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.specimen__title { font: 700 28px/1.05 var(--display); letter-spacing: -0.025em; }
.specimen__score { margin-top: 24px; display: flex; align-items: flex-end; gap: 14px; }
.specimen__num {
  font: 700 60px/0.9 var(--display); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--rust);
}
.specimen__scale { font: 400 8.5px/1.5 var(--text); color: var(--body); padding-bottom: 4px; }
.specimen__realuse { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
/* margin-bottom keeps the areas off the footer rule on the narrowest phones,
   where the card grows past its A4 ratio to fit them; wider, margin-top: auto on
   .specimen__meta absorbs it. */
.specimen__bars {
  margin-top: 22px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 9px;
  font: 400 8px var(--text); font-variant-numeric: tabular-nums;
}
.specimen__bar-label { display: flex; justify-content: space-between; margin-bottom: 3px; font-weight: 600; }
.specimen__bar-val { font-weight: 700; }
.specimen__track { height: 7px; background: var(--track); position: relative; }
.specimen__fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.specimen__meta {
  margin-top: auto; border-top: 1px solid var(--ink); padding-top: 8px;
  display: flex; justify-content: space-between; gap: 12px;
  font: 400 7px/1.5 var(--text); color: var(--body);
}
.specimen__powered { display: flex; align-items: center; gap: 4px; }
.specimen__caption { font: 400 12px var(--text); color: var(--dark-muted); }

/* Bar fills as a percentage, in steps of 5: each area of the Index is scored
   0-100. Classes rather than inline widths, because the CSP has no
   'unsafe-inline' and a style attribute would be blocked. */
.fill--0 { width: 0; }       .fill--5 { width: 5%; }    .fill--10 { width: 10%; }
.fill--15 { width: 15%; }    .fill--20 { width: 20%; }  .fill--25 { width: 25%; }
.fill--30 { width: 30%; }    .fill--35 { width: 35%; }  .fill--40 { width: 40%; }
.fill--45 { width: 45%; }    .fill--50 { width: 50%; }  .fill--55 { width: 55%; }
.fill--60 { width: 60%; }    .fill--65 { width: 65%; }  .fill--70 { width: 70%; }
.fill--75 { width: 75%; }    .fill--80 { width: 80%; }  .fill--85 { width: 85%; }
.fill--90 { width: 90%; }    .fill--95 { width: 95%; }  .fill--100 { width: 100%; }

.fine {
  margin-top: 32px; display: flex; flex-direction: column; gap: 10px;
  max-width: 680px; font: 400 14px/1.6 var(--text); color: var(--muted);
}
.fine strong { color: var(--ink); }

/* ==== v6 (30 September 2026) ====
   Components for the six pages of the v6 handoff
   (docs/design/source/design_handoff_strategy_pages). Every value is the
   handoff's own; where a v4 component already drew the same thing (.intro,
   .stages, .defs, .panel, .specimen) it is reused and only extended here. */

/* ---- Shared small parts ---- */
.h2--lg { font-size: clamp(30px, 3.8vw, 52px); }
.h2--gap { margin-bottom: 16px; text-wrap: balance; }
.h2--light { color: var(--base); }
.h2--steps { margin-bottom: clamp(40px, 5vw, 56px); }
.h2--build { margin-bottom: clamp(36px, 4vw, 48px); max-width: 960px; }
.h2--small { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.eyebrow--wrap { white-space: normal; }
.lead--flush { margin-top: 0; max-width: 560px; }
.section__lead--flush { margin-bottom: 0; }
.section__lead--narrow { max-width: 500px; }
.section__lead--build { margin-bottom: 20px; max-width: 520px; }
.section__after { margin-top: 32px; max-width: 640px; font: 400 15px/1.6 var(--text); color: var(--body); }
.section__after--muted { margin-top: 20px; color: var(--muted); }
.note--small { font-size: 13px; }
.text-link--sm { font-size: 14px; }
.text-link--dark { color: var(--base); }
.text-link--dark:hover { color: var(--rust-on-dark); }
.text-link--muted { font-size: 14px; color: var(--muted); }
.btn--card { padding: 13px 26px; }
.btn--big { font-size: 16px; padding: 17px 34px; }
.btn--light.btn--big { padding: 17px 34px; }
/* The secondary button: cream, ink-ruled, ink on hover. Used for "Register
   interest", which is not a purchase and must not look like one. */
.btn--outline { background: var(--base); color: var(--ink); border: 1.5px solid var(--ink); padding: 12px 26px; }
.btn--outline:hover { background: var(--ink); color: var(--base); }
.stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.stack--wide { max-width: 480px; }
.stack--tight { gap: 12px; }
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px 64px; align-items: start;
}
.split--center { align-items: center; }
.split--wide-gap { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; }
.split--ruled { gap: 24px 64px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1.5px solid var(--ink); }
.split--after { padding-top: clamp(40px, 5vw, 64px); }
.pad--dark { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.intro__lead--dark { color: var(--dark-text); }
/* A small uppercase rust label at the head of a card: on white, 4.80:1. */
.card-tag { font: 600 11px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust); }
.card-tag--gap { margin-bottom: 12px; }
/* The numbered points' rust numerals (01, 02, 03), on white. */
.num-tag { flex: none; min-width: 20px; padding-top: 3px; font: 700 13px var(--display); color: var(--rust); }

/* The lifecycle mark ("Research beta · v0.9"): a 1px ink outline, 10px small
   caps, and a square whose colour is the state. The same mark on index lists,
   route cards, specimen reports and the status table. */
.state-mark {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ink);
  padding: 6px 10px; font: 600 10px var(--text); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.state-mark--dark { border-color: var(--dark-muted); color: var(--base); }
.state-mark--mini { gap: 5px; padding: 3px 6px; font-size: 6.5px; }
.state { flex: none; width: 6px; height: 6px; }
.state-mark--mini .state { width: 4px; height: 4px; }
.state--lg { width: 8px; height: 8px; }
.state--draft { background: var(--tick); }
.state--beta { background: var(--rust); }
.state--live { background: var(--ink); }
.state--retired { background: var(--rule-soft); }
.state-mark--dark .state--live { background: var(--base); }
/* Research beta: the research beta device (docs/brand-identity.md). The same
   mark, its outline dashed in --tick and a flask where the square was. The
   dashed stroke is the only thing that changes, so the row still reads as an
   index with a state; the stroke says the state is research. */
.state-mark--beta { border: 1px dashed var(--tick); }
.state-mark--dark.state-mark--beta { border-color: rgba(246, 242, 234, .55); }
.state-mark__flask { flex: none; display: block; width: 12px; height: 12px; }
.state-mark--mini .state-mark__flask { width: 7px; height: 7px; }

/* A sentence set as a rule: the Standard's "Not two of three" and the routes'
   trade-off, between heavy rules. */
.rule-line {
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  font: 700 clamp(22px, 2.8vw, 36px)/1.25 var(--display); letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---- Heroes ---- */
/* The homepage pairs the free-partner application with a Personal AI Index
   experience (25 October 2026). Each offer stays next to its own button. */

/* Homepage: live headline, partner-first hierarchy, two distinct offers. */
.hero--homepage { padding-top:clamp(40px,5.5vw,76px); padding-bottom:clamp(44px,5vw,68px); }
.hero__summary { max-width:800px; margin-top:28px; font-size:clamp(17px,1.5vw,19px); line-height:1.6; }
.hero__choices { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:40px; max-width:900px; margin-top:32px; align-items:start; }
.hero__choice { min-width:0; }
.hero__choice--personal { padding-left:40px; border-left:1px solid var(--rule-soft); }
.hero__button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; max-width:100%; box-sizing:border-box; padding:14px 24px; text-align:center; line-height:1.4; }
.hero__offer { margin-top:12px; font:500 14px/1.5 var(--text); color:var(--body); }
@media(max-width:45em) {
  .hero__choices { grid-template-columns:1fr; gap:20px; margin-top:28px; }
  .hero__summary { font-size:19px; line-height:1.55; }
  .hero__button { width:100%; min-height:56px; padding:14px 16px; border-width:1.5px; border-style:solid; font-size:16px; }
  .hero__button:not(.btn--outline) { border-color:transparent; }
  .hero__offer { margin-top:10px; font-size:15px; font-weight:400; text-wrap:pretty; }
  .hero__choice--personal { padding:20px 0 0; border-left:0; border-top:1px solid var(--rule-soft); }
}

/* The other pages' hero: the eyebrow scale, the big heading, then the lead
   and the actions side by side, bottom-aligned. */
.page-hero { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(48px, 6vw, 80px); }
.page-hero__grid {
  margin-top: 36px; display: grid; gap: 24px 64px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.page-hero__claim { max-width: 600px; font: 400 clamp(17px, 1.6vw, 21px)/1.55 var(--text); color: var(--ink); text-wrap: pretty; }
.page-hero__aside { font: 400 15px/1.6 var(--text); color: var(--body); text-wrap: pretty; }
.page-hero__test { margin-top: 18px; max-width: 560px; font: 600 16px/1.55 var(--text); color: var(--ink); text-wrap: pretty; }

/* ---- Steps ---- */
.stages--four { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px 40px; }
.stages--two { padding-top: 32px; }
.stage__head--wrap { flex-wrap: wrap; }
.stage__aside { font: 400 15px var(--text); color: var(--muted); }
.stage__body--intro { max-width: 640px; margin-bottom: 28px; }
.stage__body--narrow { max-width: 480px; }
.scale--open { margin-top: 0; }

/* ---- The four tier cards (homepage) ----
   One grid, eight shared row tracks: each card is a subgrid spanning them, so
   the labels, name, sub-heading rule, three points and price line align across
   cards where subgrid is supported. The min-heights keep them close where it is
   not. Partners' cards carry a rust top rule; Portfolio, the featured card, the
   hard offset shadow. */
.tiers {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
/* One, two, then four across: never three over one (Finlay, 26 October
   2026), which left Portfolio alone on a row: 260px a card at least, so two
   need 540px and four 1100px, plus .wrap's 48px of padding. The container
   query that shrank the names at four across went with it: it was for
   "Business Memory: Improve", and the four names now fit one line at their
   usual size. */
@media (min-width: 36.75em) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 71.75em) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tier {
  background: var(--paper); border: 1.5px solid var(--ink); border-top: 4px solid var(--ink);
  padding: 26px 26px 30px; display: grid; grid-template-rows: subgrid; grid-row: span 9; row-gap: 0; /* nine shared rows: the Portfolio card adds a link under its button */
}
.tier--partner { border-top-color: var(--rust); }
.tier--featured { box-shadow: 8px 8px 0 var(--shadow); }
.tier__labels, .card__labels {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  margin-bottom: 14px; white-space: nowrap;
}
.card__labels--wrap { flex-wrap: wrap; align-items: center; white-space: normal; }
.card__labels--wrap .state-mark { min-width: 0; max-width: 100%; white-space: normal; }
.tier__price-tag { font: 600 11px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tier__name { margin-bottom: 6px; font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -0.02em; }
.tier__sub {
  min-height: 40px; margin-bottom: 18px; border-bottom: 1px solid var(--ink);
  font: 600 14px/1.4 var(--text); color: var(--muted);
}
.tier__point {
  display: flex; gap: 16px; align-items: flex-start; min-height: 74px; padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft); box-sizing: border-box;
  font: 400 15px/1.55 var(--text); color: var(--body);
}
.tier__point > span:last-child { min-width: 0; }
.tier__point--last { border-bottom-color: var(--ink); }
.tier__price { min-height: 44px; padding-top: 22px; font: 600 15px/1.45 var(--text); color: var(--ink); }
.tier__action { display: flex; align-items: flex-end; padding-top: 12px; }
.tier__more { padding-top: 14px; }
.tiers__note { margin-top: 28px; }

/* ---- Cards with a numbered list (Measure/Improve, Overview/Portfolio, the
   two routes) ---- */
.cards { display: grid; gap: 24px; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cards--two { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cards--routes { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card {
  background: var(--paper); border: 1.5px solid var(--ink); border-top: 4px solid var(--ink);
  padding: 26px 26px 30px; display: flex; flex-direction: column;
}
.card--roomy { padding: 30px 30px 34px; }
/* --accent: the same rule on a card that is not a partner's, the free score
   route on /for-your-organisation/. */
.card--partner, .card--accent { border-top-color: var(--rust); }
.card--featured { box-shadow: 8px 8px 0 var(--shadow); }
.card__name { margin-bottom: 14px; font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -0.02em; }
.card__name--tight { margin-bottom: 6px; }
.card__sub { margin-bottom: 14px; font: 600 14px/1.4 var(--text); color: var(--muted); }
.card__body { margin-bottom: 22px; font: 400 15px/1.6 var(--text); color: var(--body); text-wrap: pretty; }
.card__body--flush { margin-bottom: 0; }
.points { border-top: 1px solid var(--ink); font: 400 15px/1.55 var(--text); color: var(--body); }
.points li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.points li:last-child { border-bottom-color: var(--ink); }
.card__foot { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.card__foot--block { display: block; }
.card__figure { font: 700 clamp(26px, 2.4vw, 32px)/1 var(--display); letter-spacing: -0.03em; }
.card__price { max-width: 320px; font: 600 15px/1.45 var(--text); color: var(--ink); }
.card__small { font: 400 13px/1.5 var(--text); color: var(--muted); }

/* The routes' prices: the licence and the per-index fee side by side (route
   two's design fee on its own row above them), then the year's total. */
.route-price { display: flex; flex-wrap: wrap; gap: 16px 20px; margin: 0; font-variant-numeric: tabular-nums; }
.route-price > div { flex: 1 1 0; min-width: min-content; max-width: 100%; }
.route-price dt, .route-total__label {
  margin-bottom: 6px; font: 600 10px var(--text); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.route-price dd { margin: 0; font: 700 clamp(26px, 2.4vw, 32px)/1 var(--display); letter-spacing: -0.03em; }
.route-price dd span, .route-total__sum span {
  margin-left: 4px; font: 500 13px var(--text); letter-spacing: 0; color: var(--muted);
}
.route-total {
  margin-top: 16px; margin-bottom: 22px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; align-items: last baseline;
  flex-wrap: wrap;
}
.route-total__label { margin-bottom: 0; color: var(--rust); }
.route-total__sum { font: 700 20px var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.route-total__sum span { margin-left: 6px; font-weight: 400; }
/* A "from" price is the figure, not its caption: it keeps the figure's size
   beside the licence, so the design fee is never drawn smaller than the price
   next to it (Finlay, 23 October 2026). */
.route-price dd .price-from, .route-total__sum .price-from {
  margin-left: 0; font: inherit; letter-spacing: inherit; color: inherit;
}
/* The design fee takes its own row, above the licence and per-index fee it is
   paid on top of. */
.route-price > .route-price__whole { flex-basis: 100%; }

/* ---- Register interest (Improve) ----
   Shown only while it is the page's :target, which the Improve buttons make it:
   the design's inline form, opened without a script. */
.register {
  display: none; margin-top: 24px; border: 1.5px solid var(--ink); background: var(--paper);
  padding: clamp(24px, 3vw, 36px);
}
.register:target { display: block; }
.register__grid {
  display: grid; gap: 24px 48px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.register__title { margin-bottom: 10px; font: 700 clamp(22px, 2.4vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; }
.form__row--four { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
/* The partner/organisation toggle: two radio buttons drawn as the design's
   segmented control. The inputs stay in the page (and focusable) under the
   labels; the checked one's label is filled ink. */
.segmented { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; font: 600 14px var(--text); }
.segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented__label { padding: 10px 18px; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer; }
.segmented__label + .segmented__input + .segmented__label { border-left: 0; }
.segmented__input:checked + .segmented__label { background: var(--ink); color: var(--base); }
/* Too narrow for the pair side by side: stack them, and move the shared rule
   from the left edge to the top. */
@media (max-width: 30em) {
  .segmented { flex-direction: column; align-items: stretch; }
  .segmented__label + .segmented__input + .segmented__label { border-left: 1.5px solid var(--ink); border-top: 0; }
}
.segmented__input:focus-visible + .segmented__label { outline: 2px solid var(--rust); outline-offset: 3px; }
.form__check { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--text); color: var(--body); }
.form__check input { margin-top: 4px; accent-color: var(--ink); }

/* ---- Six plain answers ---- */
.answers {
  margin: 0; display: grid; gap: 0 48px; border-top: 1.5px solid var(--ink);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.answers__item { padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.answers__q { margin-bottom: 8px; font: 600 16px var(--display); letter-spacing: -0.01em; }
.answers__a { margin: 0; font: 400 15px/1.6 var(--text); color: var(--body); text-wrap: pretty; }

/* ---- Our indices, on the dark homepage section ---- */
.example__body--gap { margin-bottom: 28px; }
.example__body--flush { margin-bottom: 0; }
.example__note--list { margin-top: 18px; }
.ix-list { border-top: 1px solid var(--tick-dark); }
.ix-list__row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--tick-dark);
}
.ix-list__name { font: 600 18px var(--display); letter-spacing: -0.01em; color: var(--base); }
a.ix-list__name:hover { color: var(--rust-on-dark); }

/* ---- Our indices, the page's status table ---- */
.ix-table { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.ix-table thead th {
  padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ink); text-align: left;
  font: 600 10px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.ix-table tbody th, .ix-table td { padding: 24px 16px 24px 0; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: middle; }
.ix-table__name { width: 50%; font: 700 clamp(20px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -0.02em; }
.ix-table__desc { font: 400 14px/1.5 var(--text); color: var(--body); }
.ix-table .ix-table__state { padding-right: 0; text-align: right; }
@media (max-width: 40em) {
  .ix-table thead { display: none; }
  .ix-table tr { display: block; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
  .ix-table tbody th, .ix-table td { display: block; width: auto; padding: 0 0 10px; border: 0; }
  .ix-table .ix-table__state { text-align: left; padding: 4px 0 0; }
}

/* ---- The Standard's status table ---- */
.status-table { background: var(--paper); border: 1.5px solid var(--ink); }
.status-table table { width: 100%; border-collapse: collapse; }
.status-table th, .status-table td { padding: 18px 12px 18px 0; text-align: left; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
.status-table th:first-child { padding-left: 22px; }
.status-table td:last-child { padding-right: 22px; }
.status-table thead th {
  padding-top: 14px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink);
  font: 600 10px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.status-table tbody th { font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.status-table__ver { font: 500 15px var(--text); font-variant-numeric: tabular-nums; }
.status-table .state-mark { white-space: normal; }
.status-table__state { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--text); }
.status-table__note { padding: 14px 22px; font: 400 13px/1.55 var(--text); color: var(--muted); }

@media (max-width: 40em) {
  .status-table th, .status-table td { padding-right: 8px; }
  .status-table th:first-child { padding-left: 14px; }
  .status-table td:last-child { padding-right: 14px; }
  .status-table__note { padding-left: 14px; padding-right: 14px; }
}

/* ---- The Standard: three layers, four states, the tooling ---- */
.layers { display: grid; gap: 0 48px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.layers__item { padding: 32px 0 36px; border-bottom: 1px solid var(--rule-soft); }
.layers__item .stage__body { margin-bottom: 14px; }
.layers__check { font: 500 13px/1.5 var(--text); color: var(--muted); }
/* The four states tidied (Finlay, 30 September 2026): every box the same
   height and the four gate notes starting on one line beneath them, with no
   rule between box and gate. Each column is a two-row subgrid of the list, so
   the boxes share a row track and so do the gates. Without subgrid the column
   is a plain two-row grid and the boxes stretch to the tallest in their row. */
.states {
  display: grid; gap: 0 16px; grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.states__col { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 18px; margin-bottom: 24px; }
.states__box {
  min-height: 150px; padding: 22px 22px 24px; border: 1.5px solid var(--base);
  display: flex; flex-direction: column; gap: 10px;
}
@supports not (grid-template-rows: subgrid) {
  .states__col { grid-template-rows: 1fr auto; }
}
.states__box--live { background: var(--base); color: var(--ink); }
.states__box--retired { border-color: var(--tick-dark); }
.states__num { font: 700 13px var(--display); font-variant-numeric: tabular-nums; color: var(--dark-muted); }
.states__box--live .states__num { color: var(--rust-ink); }
.states__name { font: 700 clamp(22px, 2.2vw, 28px)/1.05 var(--display); letter-spacing: -0.02em; }
.states__body { font: 400 14px/1.55 var(--text); color: var(--dark-text); text-wrap: pretty; }
.states__box--live .states__body { color: var(--body); }
.states__gate { font: 400 13px/1.55 var(--text); color: var(--dark-muted); }
.states__gate-name {
  display: block; margin-bottom: 6px; font: 600 10px var(--text); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rust-on-dark);
}
.states__gate--end, .states__gate--end .states__gate-name { color: var(--faint-dark); }
.defs__layer {
  flex: none; width: 150px; max-width: 100%; font: 600 11px var(--text); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rust-ink);
}
.defs--tools .defs__row { padding: 24px 0; }
.defs--tools .defs__row:last-child { border-bottom: 1px solid var(--rule-soft); }
.defs__label--tool { width: 260px; font-size: clamp(18px, 1.7vw, 21px); }
.defs__desc--wide { flex-basis: 320px; max-width: 600px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chips li { border: 1.5px solid var(--ink); padding: 8px 14px; font: 600 13px var(--text); }
.boxnote { background: var(--paper); border: 1.5px solid var(--ink); padding: 28px 30px; box-shadow: 8px 8px 0 var(--shadow); }
.boxnote__list { display: flex; flex-direction: column; gap: 10px; font: 400 15px/1.6 var(--text); color: var(--body); }
.boxnote__list li { position: relative; padding-left: 18px; }
.boxnote__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--rust); }
.boxnote__list strong { color: var(--ink); }

/* ---- Founding rates: three numbered lines ---- */
.rates { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.rates__line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px;
  padding: 30px 0; border-bottom: 1px solid var(--rule-soft);
}
.rates__line:last-child { border-bottom: 0; }
.rates__num { padding-top: 6px; font: 700 15px/1 var(--display); color: var(--rust-ink); }
.rates__group { min-width: 0; }
.rates__item { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-start; min-width: 0; }
.rates__item--sub { padding: 18px 0; border-top: 1px solid var(--rule-soft); }
.rates__item--sub:last-child { padding-bottom: 0; }
.rates__what { flex: 1 1 320px; min-width: 0; }
.rates__kicker {
  margin-bottom: 10px; font: 600 11px var(--text); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.rates__name { font: 700 clamp(20px, 2vw, 26px)/1.15 var(--display); letter-spacing: -0.015em; }
.rates__name--group { margin-bottom: 22px; }
.rates__subname { font: 600 17px/1.3 var(--text); }
.rates__desc { margin-top: 8px; max-width: 560px; font: 400 15px/1.6 var(--text); color: var(--muted); text-wrap: pretty; }
.rates__subname + .rates__desc { margin-top: 6px; }
.rates__price { flex: 0 1 240px; min-width: 0; font-variant-numeric: tabular-nums; }
.rates__figure { display: block; font: 700 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -0.025em; }
.rates__unit { display: block; margin-top: 8px; font: 400 15px/1.5 var(--text); color: var(--muted); }
.totals-block { margin-top: clamp(48px, 6vw, 72px); }
.totals-block .eyebrow { margin-bottom: 24px; }
.totals { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.totals__card { background: var(--paper); border: 1.5px solid var(--ink); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.totals__title { margin-bottom: 18px; font: 700 18px/1.2 var(--display); letter-spacing: -0.01em; }
.totals__lines { margin: 0; border-top: 1px solid var(--rule-soft); font: 400 14px/1.5 var(--text); color: var(--body); font-variant-numeric: tabular-nums; }
.totals__line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.totals__line:last-child { border-bottom-color: var(--ink); }
.totals__line dd { margin: 0; }
/* The LAST baseline: a label that wraps (the own-index card's) would lift its
   total to the first line, out of step with the other cards'. It wraps the
   row, too, so a narrow card puts the total under its label rather than past
   the border. */
.totals__sum {
  margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline; align-items: last baseline; flex-wrap: wrap;
}
.totals__label { font: 600 14px var(--text); }
.totals__total { font: 700 26px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* "From £6,000" (Finlay, 22 October 2026): the word and its figure never part,
   so a "from" price wraps as one unit, never with "From" alone on a line. */
.price-from { white-space: nowrap; }
.fine--rates { margin-top: 36px; gap: 12px; max-width: 720px; font-size: 15px; line-height: 1.65; color: var(--body); }

/* ---- Custom benchmarks: the design stage in detail, and the small print ---- */
.design-stage { padding: 32px 0 36px; border-bottom: 1px solid var(--rule-soft); }
.design-stage__cols { display: grid; gap: 24px 40px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.design-stage__col { border-top: 1.5px solid var(--ink); padding-top: 16px; }
.panel__label--gap { margin-bottom: 12px; }
/* The design's bullets are an em-dash glyph; this site's copy carries no em
   dashes, so the dash is drawn: a short rust rule, not a character. */
.dashes { display: flex; flex-direction: column; gap: 8px; font: 400 15px/1.6 var(--text); color: var(--body); }
.dashes li { position: relative; padding-left: 27px; }
.dashes li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 15px; height: 1px; background: var(--rust); }
.smallprint { max-width: 520px; font: 400 16px/1.65 var(--text); color: var(--body); text-wrap: pretty; }
.smallprint p + p { margin-top: 12px; }
.smallprint strong { color: var(--ink); }

/* ---- What a participant gets (/indices/): the numbered list with a title
   on each step ---- */
.caps--steps { font: 400 15px/1.55 var(--text); color: var(--body); }
.caps--steps li { padding: 18px 0; }
.caps--steps li:last-child { border-bottom: 1.5px solid var(--ink); }
.caps__title { display: block; margin-bottom: 4px; font: 600 16px var(--text); color: var(--ink); }


/* ---- Specimen extensions ----
   The homepage card keeps v4's A4 miniature. The result card (a participant's
   own result on /indices/, and the bespoke example on /custom-benchmarks/) is
   the v6 shape: a free-height card, the partner's initial in an ink square, and
   on /indices/ the Index's two headline figures side by side. */
.specimen__kicker--row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; }
.specimen__kicker--row > span:first-child { white-space: nowrap; }
.specimen__card--result { width: min(380px, 100%); aspect-ratio: auto; border-width: 1.5px; padding: 28px 30px; }
.specimen__caption--light { color: var(--muted); }
#participant .specimen__card--result { box-shadow: 8px 8px 0 var(--shadow); }
.specimen__badge { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.specimen__initial {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--base); font: 700 11px var(--display);
}
.specimen__issuer--result { flex: 0 1 auto; min-width: 0; font-size: 12px; line-height: 1.1; letter-spacing: -0.01em; white-space: normal; overflow-wrap: anywhere; }
.specimen__powered--quiet { font: 500 8px var(--text); color: var(--muted); white-space: nowrap; }
.specimen__intro--result { padding-top: 22px; }
.specimen__stamp { margin-bottom: 8px; }
.specimen__title--result { font-size: 26px; }
.specimen__pair { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 0; }
.specimen__stat { border-top: 3px solid var(--ink); padding-top: 10px; }
.specimen__stat--accent { border-top-color: var(--rust); }
.specimen__stat-label { display: block; font: 600 9px var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.specimen__stat-num { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 6px; }
.specimen__num--ink { color: var(--ink); }
.specimen__stat .specimen__num, .specimen__realuse--big { font: 700 48px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.specimen__of { margin-left: 3px; font: 500 12px var(--text); color: var(--muted); }
.specimen__scale--result { font-size: 9px; }
.specimen__scale--result strong { color: var(--ink); }
.specimen__verdict { margin-top: 16px; font: 400 10.5px/1.55 var(--text); color: var(--body); }
.specimen__bars--result { margin-top: 18px; margin-bottom: 0; gap: 8px; font-size: 9px; }
.specimen__track--thin { height: 6px; }
.specimen__fill--low { background: var(--rust); }
.specimen__next {
  margin-top: 18px; padding: 12px 14px; background: var(--tint); border: 1px solid var(--rule-soft);
  font: 400 10px/1.5 var(--text); color: var(--body);
}
.specimen__next strong { color: var(--ink); }
.specimen__meta--result { margin-top: 18px; font-size: 8px; }

/* ---- Footer ----
   A 1.5px rule with a scale hanging from it, then the logo and links on one
   row and the about-and-legal paragraph beneath. Links are muted and turn ink,
   not rust, when pointed at. */
.site-footer { background: var(--base); border-top: 1.5px solid var(--ink); }
.site-footer__inner { padding-top: 28px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }
.site-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.logo--footer .logo__name { font-size: 16px; }
.site-footer__nav { display: flex; gap: 24px; font: 500 13px var(--text); flex-wrap: wrap; }
.site-footer__nav a { color: var(--muted); text-decoration: none; }
.site-footer__nav a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__about { font: 400 13px/1.7 var(--text); color: var(--muted); max-width: 720px; text-wrap: pretty; }
.site-footer__about a { color: var(--muted); }
.site-footer__about a:hover { color: var(--ink); }

/* ---- Holding pages (routes the handoff names but does not design) ---- */
.holding, .doc { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.holding__title, .doc__title {
  font: 700 clamp(34px, 4.6vw, 62px)/1.06 var(--display); letter-spacing: -0.025em;
  max-width: 840px; text-wrap: balance;
}
.holding__body { margin-top: 28px; font: 400 clamp(16px, 1.5vw, 19px)/1.65 var(--text); color: var(--body); max-width: 620px; }
.holding .actions { margin-top: 40px; }

/* ---- Document pages (privacy notice, terms, accessibility statement) ----
   The handoff designs none of these, so every value below is one the
   homepage already uses: body copy at the Data and privacy section's
   16px/1.7, section headings at the AI Lab section's h2 size under the same
   1px ink rule that separates sections, and sub-headings at the dimension
   titles' 600 17px. */
.doc__updated { margin-top: 20px; }
.prose { margin-top: 40px; max-width: 660px; }
.prose p, .prose li { font: 400 16px/1.7 var(--text); color: var(--body); text-wrap: pretty; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 16px; }
.prose h2 {
  font: 700 clamp(24px, 2.6vw, 34px)/1.15 var(--display); letter-spacing: -0.02em;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink); margin-bottom: 20px;
}
.prose h3 { font: 600 17px var(--text); margin-top: 32px; margin-bottom: 8px; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: 10px; }
.prose strong { font-weight: 600; color: var(--ink); }
/* A decision still owed. Visible on purpose, and `check:golive` fails any
   page that still carries one. */
.confirm { font-weight: 600; color: var(--ink); }

/* ---- Cookie consent (rendered only when site.gaId is set) ----
   Not in the handoff, so it borrows the footer's type and the dark sections'
   colours, and stays flat: no radius, shadow or animation. It sits in the flow
   above the header, so it never covers content or focus. Hidden until
   consent.js shows it. Link hover stays cream: rust on ink is 3.65:1. */
.consent { background: var(--ink); color: var(--consent-text); }
.consent[hidden] { display: none; }
.consent__inner {
  padding-top: 18px; padding-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
}
.consent__body { flex: 1 1 320px; max-width: 640px; }
.consent__text { font: 400 14px/1.6 var(--text); }
.consent__text a, .consent__text a:hover { color: var(--base); }
/* Both are hidden on a first visit and filled in by the footer's "Cookie
   settings" button, so the reopened banner announces itself as the place your
   choice is changed rather than looking like the page you were already on. */
.consent__heading { font: 700 16px/1.4 var(--display); color: var(--base); margin-bottom: 6px; }
.consent__heading[hidden], .consent__state[hidden] { display: none; }
.consent__state { margin-top: 6px; color: var(--base); }
.consent__actions { display: flex; gap: 12px; }
.consent__btn { font: 600 14px var(--text); padding: 10px 20px; border: 1px solid var(--base); cursor: pointer; }
.consent__btn--reject { background: transparent; color: var(--base); }
.consent__btn--accept { background: var(--base); color: var(--ink); }
.consent__btn:hover { background: var(--rust-ink); border-color: var(--rust-ink); color: var(--base); }
@media (max-width: 480px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; }
}
.site-footer__button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
.site-footer__button:hover { color: var(--ink); text-decoration: underline; }

/* ---- Enquiry form (/enquire/) ----
   Not in the handoff, so it borrows the handoff's own vocabulary: square
   corners, 1px ink rules, Plex labels, the black button. Inputs are 16px so
   iOS does not zoom on focus. */
.enquire {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 48px 72px; align-items: start;
}
.enquire__intro { min-width: 0; }
/* /enquire/ is its own page and sets its own vertical rhythm; the homepage
   section already carries .pad. */
.enquire--page { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.form { display: flex; flex-direction: column; gap: 20px; border-top: 1.5px solid var(--ink); padding-top: 28px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Keep paired inputs aligned when one label wraps onto another line. */
.form__row .form__input { margin-top: auto; }
.form__label { font: 600 14px var(--text); }
.form__opt { font-weight: 400; color: var(--muted); margin-left: 6px; }
.form__input {
  box-sizing: border-box; width: 100%;
  font: 400 16px/1.5 var(--text); color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  padding: 11px 14px;
}
textarea.form__input { resize: vertical; min-height: 120px; }
.form__submit { align-self: flex-start; border: 0; cursor: pointer; margin-top: 4px; }
.form__fine { font: 400 13px/1.6 var(--text); color: var(--muted); }
.form__fine a { color: var(--muted); }
/* The homepage's version (v4): heading and lead beside the form, three fields,
   and no rule above the form. Labels are the design's 13px; the inputs keep
   16px text rather than its 15px, because iOS zooms on focus below 16px. */
.enquire--home {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px 64px; align-items: start;
}
.form--compact { border-top: 0; padding-top: 0; gap: 16px; }
.form--compact .form__row { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.form--compact .form__field { gap: 6px; }
.form--compact .form__label { font-size: 13px; }
.form--compact .form__submit { margin-top: 0; }
.form--compact textarea.form__input { min-height: 96px; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }