/* ─────────────────────────────────────────────────────────────────────────
   Aequus Money — site layer
   Built on the Aequus Money · StableMap design system token layer
   (css/tokens/colors.css, typography.css, spacing.css).

   Every value here comes from the design handoff. Nothing is hard-coded that
   has a token; the few literals that remain (the lifted #4A1A50 / #5A2262
   hover tints, the darkened #8a5c2e / #1f6b67 hero-cloud variants, the
   browser-chrome dots) are off-token by design.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Base ──────────────────────────────────────────────────────────────── */
:root { --font-wordmark: 'Barlow Semi Condensed', sans-serif; }

/* The handoff's action colour is #6366f1 indigo — a generic interface blue that
   belongs to none of the six brand colours, and the last off-brand hue on the
   site. Repointed at --brand-1 (#37123C) so buttons, links, focus rings and the
   expertise icon tiles all sit on the brand palette.
   The tints are --brand-1 mixed with white at 8 / 14 / 35 %, written out rather
   than computed with color-mix() so they resolve everywhere. The token file
   ships verbatim from the design system, hence the override here. */
:root {
  --action-color:  #37123C;
  --action-hover:  #EFECEF;
  --action-light:  #E3DEE4;
  --action-border: #B9ACBB;
  --action-ring:   #37123C;
}

/* Candidate typeface, switchable on preview only — see js/font-switch.js.
   The token file is shipped verbatim from the design system, so the
   alternative is expressed as an override here rather than by editing it.
   IBM Plex Serif tops out at 700, so --weight-black has to come down with it,
   and a serif needs less negative tracking than a condensed grotesque.
   --font-wordmark is deliberately not overridden: the logo does not change. */
:root[data-font="plex"] {
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans: var(--font-body);
  --weight-black: 700;
  --tracking-tight: -0.01em;
}
/* Barlow Semi Condensed carries both the headings and the interface — nav,
   buttons, badges, labels. A serif cannot: setting only --font-display would
   put the navigation and every button in IBM Plex Serif and compare the
   pairing against a strawman. Under Plex the chrome moves to the sans and only
   headings stay serif, which is the pairing actually being judged. */
:root[data-font="plex"] :is(
  .eyebrow, .meta-line, .link-arrow, .link-icon, .btn, .chip, .badge, .pill,
  .site-nav a, .footer-col__title, .keywords span, .bridge-centre__tagline,
  .logo-wall__count, .wall-foot__note, .person__role, .contact-link,
  .field label, .event-past__date, .event-row__year, .stat__label
) { font-family: var(--font-body); }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--brand-5); }

img { display: block; max-width: 100%; }
a { color: var(--action-color); text-decoration: none; }
/* Lifted from --brand-1, not darkened — #37123C is already near-black. */
a:hover { color: #5A2262; }

/* Vertical rhythm comes from the classes below, never from UA defaults. */
p { margin: 0; }

/* A class that sets `display` otherwise outranks the UA's [hidden] rule, so
   toggling `hidden` on a flex/grid element would silently do nothing. */
[hidden] { display: none !important; }

/* The prototype relied on browser defaults; production needs explicit rings. */
:focus-visible { outline: 2px solid var(--action-ring); outline-offset: 2px; border-radius: 2px; }

/* Clear the 64px sticky header when jumping to an anchor. */
[id] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.page { min-height: 100vh; background: var(--brand-5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
.section {
  max-width: var(--content-xl);
  margin: 0 auto;
  padding: clamp(1.25rem, 3.5vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
}
.section--hero { padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 1.5rem) var(--space-5); }
.section--tight { padding-block: var(--space-3); }
.section--flush-top { padding-top: 0; }
.section--pt-10 { padding-top: var(--space-5); }
.section--pt-12 { padding-top: var(--space-6); }

/* Alternating white band with hairline rules, top and bottom. */
.band {
  background: var(--surface-card);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr));
}
.grid--150 { --grid-min: 150px; }
.grid--220 { --grid-min: 220px; }
.grid--240 { --grid-min: 240px; }
.grid--260 { --grid-min: 260px; }
.grid--300 { --grid-min: 300px; }
.grid--320 { --grid-min: 320px; }
/* Forces three columns at desktop. auto-fit only collapses tracks that are
   empty in every row, so six cards across four tracks leaves two dead cells in
   the second row; 3 × 2 fills exactly. */
.grid--340 { --grid-min: 340px; }
.grid--stretch { align-items: stretch; }
.grid--center { align-items: center; }
.grid--start { align-items: start; }
.grid--gap-4 { gap: var(--space-4); }
.grid--gap-8 { gap: var(--space-8); }
.grid--gap-10-16 { gap: var(--space-10) var(--space-16); }
.grid--gap-12 { gap: var(--space-12); }
.grid--gap-16 { gap: var(--space-16); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ─── Section headers ───────────────────────────────────────────────────── */
/* Eyebrow, heading and intro stay stacked in one column. An earlier attempt
   put the heading and its intro side by side; because the heading is
   `text-wrap: balance`d it ended 190–340px short of its column edge, so the
   intro read as detached from the title it belongs to. */
.section-head { display: flex; flex-direction: column; gap: var(--space-3); }
.section-head__cols { display: flex; flex-direction: column; gap: var(--space-3); }
.section-head__cols > .h2 { margin-top: 0; }
.section-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
/* The column's gap already sets the rhythm; the paragraph's own top margin
   would stack on top of it. */
.section-head .intro { margin-top: 0; }

/* A bare heading with a trailing link — not a full section header. */
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* The header is a cell in the section's own card grid, so the cards fill the
   rest of its row and then run full width beneath it. A float cannot do this:
   a grid or flex container establishes a block formatting context and refuses
   to overlap a float, so the cards would stay narrow for their whole height
   instead of reflowing underneath.
   Bare — no border or padding — so it reads as a heading, not as a card that
   lost its border. */
.section-head--cell { align-self: start; }

/* One section resists this: "Why Aequus", whose header is *taller* than its
   content — a three-part diagram, not a card wall. There is no dead column
   under a header that already outruns its section, and narrowing it to one grid
   cell only made it taller (384px → 516px measured). It keeps a two-column
   split, header beside content. Wrapping flex with a min() floor, so it stacks
   on narrow screens without a media query. */
.section-split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  align-items: flex-start;
}
.section-split > .section-head { flex: 1 1 17rem; min-width: min(100%, 17rem); }
.section-split > .grid { flex: 2 1 30rem; min-width: min(100%, 30rem); }
/* Header on the right, for variety. Explicit placement rather than
   `direction: rtl`, which would also reverse the cards' reading order. At one
   column `-2 / -1` resolves to the only column, and the cards cannot share row
   1 with it, so the stacked order is unchanged. */
.section-head--end { grid-column: -2 / -1; grid-row: 1; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-6);
}
.eyebrow--gold { color: var(--brand-4); }

.h1 {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-1);
  text-wrap: balance;
  max-width: 18ch;
}
/* The design specified 22ch, sized for the longest heading — the expertise
   page's. Applied uniformly it measured 636px against 1280px of available
   width, so "Research and writing on digital money" wrapped with half the
   line empty. 40ch is the point where every heading that fits on one line
   does, while still capping below the container so the measure stays
   controlled; wider only lengthens lines. The homepage h1 stays at 18ch —
   it shares its row with the hero visual and must stay narrow. */
.h1--page {
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.08;
  max-width: 40ch;
}
.h1--article {
  font-size: clamp(1.85rem, 5.5vw, 2.75rem);
  line-height: 1.1;
  max-width: none;
}

.h2 {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-1);
  text-wrap: balance;
}
.h2--sm { font-size: var(--text-2xl); margin: 0; }
.h2--light { color: var(--brand-5); }
/* The quoted long word in the Mission heading overflows at 360px otherwise. */
.h2--break { overflow-wrap: break-word; }

.h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--text-primary);
}
.h3--xl { font-size: var(--text-xl); }
.h3--light { color: var(--brand-5); }
.h3--muted { color: var(--text-muted); }

.lede {
  margin: var(--space-5) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 48ch;
}
.lede--wide { font-size: var(--text-base); max-width: 72ch; }

/* Left at the design's values deliberately: measured, they render 63–64
   real characters per line, the middle of the 45–75 band that keeps prose
   readable. Widening them does not reduce the line count — the Bridge
   paragraph is 192 characters, so two lines would need ~96 per line — it
   only pushes neighbouring intros past 80. Note `ch` is the width of "0";
   Outfit averages far narrower, so 64ch holds ~64 characters, not 64ch
   worth of them. */
.intro {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
}
.intro--64 { max-width: 64ch; }
.intro--56 { max-width: 56ch; }
.intro--52 { max-width: 52ch; }
.intro--light { color: var(--brand-3); }

.body-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.body-text--light { color: var(--brand-3); }
.body-text--muted { color: var(--text-muted); }

.note {
  margin: var(--space-6) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.note--center { text-align: center; }

.meta-line {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.link-arrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--action-color);
  white-space: nowrap;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}
.btn--lg { padding: 0.625rem 1.5rem; font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn--primary { background: var(--action-color); color: #ffffff; }
.btn--primary:hover { background: #4A1A50; color: #ffffff; }

.btn--secondary {
  background: var(--action-hover);
  color: var(--action-color);
  border-color: var(--action-border);
}
.btn--secondary:hover { background: var(--action-light); color: var(--action-color); }

.btn--gold { background: var(--brand-4); color: var(--brand-1); }
.btn--gold:hover { opacity: 0.85; color: var(--brand-1); }

.btn--outline-light { background: transparent; color: var(--brand-5); border-color: var(--brand-3); }
.btn--outline-light:hover { background: rgba(169, 159, 150, 0.15); color: var(--brand-5); }

/* ─── Pills ─────────────────────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill-row--tight { gap: 6px; }
.pill-row--center { justify-content: center; }

.pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.pill--alt { background: var(--surface-content); padding: 2px 10px; }
.pill--wide { background: var(--surface-content); padding: 4px 12px; }
.pill--dark {
  background: rgba(169, 159, 150, 0.15);
  border-color: rgba(169, 159, 150, 0.3);
  color: var(--brand-3);
}
.pill--teal { background: rgba(46, 143, 138, 0.12); border-color: transparent; color: #1f6b67; }

/* Anchor chips on the expertise page. */
.chip {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: border-color 200ms ease, color 200ms ease;
}
.chip:hover { border-color: var(--action-border); color: var(--action-color); }

/* ─── Badge (ported from the design system's Badge component) ───────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}
.badge--neutral { background: var(--surface-content); color: var(--text-secondary); border-color: var(--border-color); }
.badge--trad    { background: var(--surface-content); color: var(--text-secondary); border-color: var(--border-color); }
.badge--info    { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
.badge--success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.badge--brand   { background: var(--brand-1); color: var(--brand-5); }
.badge--gold    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.badge--teal    { background: #ccfbf1; color: #065f46; border-color: #a7f3d0; }
.badge--crypto  { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card--soft { background: var(--surface-content); }
.card--dashed { background: var(--surface-content); border-style: dashed; }
.card--dark { background: var(--brand-1); border-color: transparent; }
.card--flush { padding: 0; overflow: hidden; }
.card--between { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); }
/* Full-width call to action closing a card grid: copy and button side by side
   when there is room, stacked when there is not. */
.card--cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}
.card--cta > div { flex: 1 1 min(100%, 20rem); }
/* Top right, level with the title row — not vertically centred against the
   copy, which floated it downwards as soon as the description wrapped. */
.card--cta > .btn { align-self: flex-start; }
.card--middle { display: flex; flex-direction: column; justify-content: center; }

.card--link {
  display: block;
  color: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.card--link:hover {
  color: inherit;
  border-color: var(--action-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

/* Plain list under a solutions card. */
.value-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  background: var(--action-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile--gold { background: rgba(221, 167, 123, 0.18); }

.dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.dot--mauve { background: var(--brand-2); }
.dot--teal { background: var(--brand-6); }

.card-head { display: flex; align-items: center; gap: var(--space-3); }
/* Title left, its label pushed to the right corner. The title wraps inside its
   own box (min-width:0) rather than the badge dropping to a line of its own —
   letting the row wrap put the badge below the title in the narrowest cards,
   which is the one place it should never be. Baseline alignment keeps the
   badge's text on the title's first line. */
.card-head--split {
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
}
.card-head--split > .h3 { min-width: 0; }
.card-head--split > .badge { flex-shrink: 0; }

/* ─── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-color);
}
.site-header__inner {
  max-width: var(--content-xl);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) clamp(1rem, 4vw, 1.5rem);
  flex-wrap: wrap;
  min-height: 64px;
}
/* Below this width the nav could no longer sit between the wordmark and the
   Contact button, and the button — last in the flex order — was the thing that
   wrapped, leaving it stranded on a row of its own. The sticky header grew from
   66px to 178px at 390px, eating a fifth of the viewport on every page.
   The nav is what should drop to the second row, not the call to action. Grid
   areas say that directly; a wrapping flex row cannot, because it always breaks
   at the last item rather than the middle one. This is the site's only layout
   media query — a navigation bar has a genuine breakpoint, unlike the content
   grids, which resolve themselves with auto-fit. */
@media (max-width: 52rem) {
  .site-header__inner {
    display: grid;
    /* minmax(0, …) rather than auto: the nav spans both tracks, and an `auto`
       track would grow to the nav's max-content width and push the header
       wider than the viewport. */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .site-header__brand { grid-area: brand; }
  .site-header__actions { grid-area: actions; justify-self: end; }
  .site-nav { grid-area: nav; min-width: 0; }
  /* The wordmark is nowrap at 24px, which together with the button exceeds a
     360px viewport. Scaling it down is what buys the shared row; the footer
     wordmark is untouched. */
  .site-header__brand .wordmark { font-size: clamp(18px, 5vw, 24px); }

  /* Once the page scrolls, the nav row folds away and the header becomes a
     single translucent line: wordmark left, Contact right. On a 360px screen
     the two-row header costs 116px of a ~640px viewport, which is a lot to
     spend on chrome the reader has already used.
     `data-scrolled` is set by js/header.js. Without JavaScript the header
     simply never collapses, which is the safe failure. */
  .site-header { transition: background-color 200ms ease; }
  :root[data-scrolled="true"] .site-nav { display: none; }
  :root[data-scrolled="true"] .site-header__inner { grid-template-areas: "brand actions"; }
  :root[data-scrolled="true"] .site-header {
    background-color: rgb(255 255 255 / 0.82);
    background-color: color-mix(in srgb, var(--surface-card) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.site-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.site-nav a {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color 200ms ease;
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a[aria-current="page"] { color: var(--text-primary); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* ─── Wordmark (ported from the design system's Wordmark component) ─────── */
.wordmark { display: inline-flex; align-items: center; gap: 0.125em; line-height: 1; font-size: 24px; }
.wordmark__glyph { display: block; flex-shrink: 0; height: 1.73em; width: 2.831em; margin-right: -0.16em; }
/* The wordmark is type-set rather than outlined, so it followed --font-display
   and changed with it. It is the logo, not a heading: pin it to its own
   variable so a change of heading typeface never redraws the brand. */
.wordmark__text {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-bold);
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.01em;
}
.wordmark__money { font-weight: var(--weight-medium); margin-left: 0.18em; }
/* Lavender field — light backgrounds (nav). */
.wordmark--lav .wordmark__aequus { color: #37123C; }
.wordmark--lav .wordmark__money { color: #2E8F8A; }
/* Purple field — dark backgrounds (footer, bridge tile). */
.wordmark--pur .wordmark__aequus { color: #EDE3F0; }
.wordmark--pur .wordmark__money { color: #7EBAB5; }
/* Mark-only lockup. */
.wordmark--mark { font-size: 36px; }
.wordmark--mark .wordmark__glyph { margin-right: 0; }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--brand-1); color: var(--brand-5); }
.site-footer__inner {
  max-width: var(--content-xl);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 1.5rem) var(--space-4);
}
/* The design specifies a 190px column floor, but the 24px wordmark in the
   first column is ~260px wide and never wraps — at 3- and 4-column counts it
   ran into the next column's heading. Widening the floor to the wordmark's
   own width keeps the lockup at its specified size and drops a column instead. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-10);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.footer-brand p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-3);
  line-height: var(--leading-relaxed);
  max-width: 32ch;
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-3);
}
.footer-col a { font-family: var(--font-body); font-size: var(--text-sm); color: var(--brand-5); transition: color 200ms ease; }
.footer-col a:hover { color: var(--brand-4); }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(169, 159, 150, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--brand-3);
}
.footer-legal { display: flex; gap: var(--space-4); }
.footer-legal a { font-family: var(--font-body); font-size: var(--text-xs); color: var(--brand-3); transition: color 200ms ease; }
.footer-legal a:hover { color: var(--brand-4); }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; }
.hero__blob--teal { top: -120px; left: -100px; width: 480px; height: 480px; background: var(--brand-6); opacity: 0.16; }
.hero__blob--gold { top: 40px; right: -140px; width: 520px; height: 520px; background: var(--brand-4); opacity: 0.2; }
.hero__inner {
  position: relative;
  max-width: var(--content-xl);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  align-items: center;
  justify-content: space-between;
}
.hero__copy { flex: 1 1 17rem; min-width: min(100%, 17rem); }
.hero__actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.stats {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-8);
  justify-content: start;
}
.stat__figure { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 2rem; line-height: 1; color: var(--brand-1); }
.stat__label { margin-top: 6px; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); }

/* Hero visual — the whole composition is sized in em off one root font-size,
   which is what makes it responsive without a single media query. */
.hero__visual {
  flex: 0 1 auto;
  font-size: clamp(8px, 1.35vw, 16px);
  display: flex;
  align-items: center;
  gap: 1em;
  min-width: 0;
}

.plates { position: relative; flex: 0 0 20em; width: 20em; height: 18.75em; perspective: 62.5em; pointer-events: none; }
.plates__layer { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(45deg); }
.plates__layer > i {
  position: absolute;
  left: 4.6875em;
  top: 4.0625em;
  width: 10.625em;
  height: 10.625em;
  border-radius: 0.625em;
}
.plates__layer > i:nth-child(1)  { background: #6366F1; opacity: 0.20; transform: translateZ(7.875em); }
.plates__layer > i:nth-child(2)  { background: #6366F1; opacity: 0.30; transform: translateZ(6.125em); }
.plates__layer > i:nth-child(3)  { background: #DDA77B; opacity: 0.28; transform: translateZ(4.375em); }
.plates__layer > i:nth-child(4)  { background: #DDA77B; opacity: 0.42; transform: translateZ(2.625em); }
.plates__layer > i:nth-child(5)  { background: #2E8F8A; opacity: 0.24; transform: translateZ(0.875em); }
.plates__layer > i:nth-child(6)  { background: #2E8F8A; opacity: 0.36; transform: translateZ(-0.875em); }
.plates__layer > i:nth-child(7)  { background: #945D5E; opacity: 0.24; transform: translateZ(-2.625em); }
.plates__layer > i:nth-child(8)  { background: #945D5E; opacity: 0.36; transform: translateZ(-4.375em); }
.plates__layer > i:nth-child(9)  { background: #37123C; opacity: 0.20; transform: translateZ(-6.125em); }
.plates__layer > i:nth-child(10) { background: #37123C; opacity: 0.34; transform: translateZ(-7.875em); }

/* Ambient keyword cloud. `top` is a percentage of the container height on
   purpose — em resolves against each span's own font-size and pushes the
   large words out of the box. */
.keywords {
  position: relative;
  flex: 0 0 12.5em;
  width: 12.5em;
  height: 18.75em;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}
.keywords > span { position: absolute; white-space: nowrap; }
.keywords > span:nth-child(1)  { left: 0; top: 0;       color: #6366F1; opacity: 0.54; font-size: 2.2em; }
.keywords > span:nth-child(2)  { right: 0; top: 13.333%; color: #6366F1; opacity: 0.28; font-size: 1.05em; }
.keywords > span:nth-child(3)  { right: 0; top: 23.467%; color: #8a5c2e; opacity: 0.51; font-size: 1.75em; }
.keywords > span:nth-child(4)  { left: 0; top: 33.291%; color: #1f6b67; opacity: 0.46; font-size: 1.35em; }
.keywords > span:nth-child(5)  { right: 0; top: 42.699%; color: #945D5E; opacity: 0.46; font-size: 1.55em; }
.keywords > span:nth-child(6)  { left: 0; top: 52.800%; color: #37123C; opacity: 0.47; font-size: 1.6em; }
.keywords > span:nth-child(7)  { right: 0; top: 65.600%; color: #6366F1; opacity: 0.45; font-size: 1.35em; }
.keywords > span:nth-child(8)  { left: 0; top: 73.317%; color: #6366F1; opacity: 0.38; font-size: 1.05em; }
.keywords > span:nth-child(9)  { left: 0; top: 81.125%; color: #8a5c2e; opacity: 0.51; font-size: 1.25em; }
.keywords > span:nth-child(10) { right: 0; top: 88.000%; color: #37123C; opacity: 0.39; font-size: 1.9em; }

/* ─── Dark panels ───────────────────────────────────────────────────────── */
.panel-dark {
  background: var(--brand-1);
  border-radius: var(--radius-2xl);
  padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3rem);
}
.bridge-centre {
  background: var(--brand-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.bridge-centre__tagline {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-4);
}
.cta-panel {
  background: var(--brand-1);
  border-radius: var(--radius-2xl);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 5vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.stat-tile {
  background: rgba(169, 159, 150, 0.12);
  border: 1px solid rgba(169, 159, 150, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.stat-tile__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1;
}
.stat-tile__figure--gold { color: var(--brand-4); }
.stat-tile__figure--teal { color: var(--brand-6); }
.stat-tile__label { margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); color: var(--brand-3); }

/* ─── Stablemap browser mock + logo wall ────────────────────────────────── */
.browser {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  background: var(--surface-content);
  border-bottom: 1px solid var(--border-color);
}
.browser__dots { display: flex; gap: 6px; flex-shrink: 0; }
.browser__dots span { width: 10px; height: 10px; border-radius: 50%; }
.browser__dots span:nth-child(1) { background: #f87171; }
.browser__dots span:nth-child(2) { background: #fbbf24; }
.browser__dots span:nth-child(3) { background: #4ade80; }
.browser__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  min-width: 0;
}
.browser__url span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__url svg { flex-shrink: 0; }
.browser__body { padding: var(--space-6); }

.logo-wall { position: relative; }
.logo-wall__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-height: 340px;
  overflow: hidden;
}
/* Each tile carries a colored monogram; the real logo fades in over it, so a
   tile is never blank. */
.logo-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 15px;
  color: #ffffff;
}
.logo-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  opacity: 0;
  transition: opacity 200ms ease;
}
.logo-tile img.is-loaded { opacity: 1; }
.logo-wall__more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: var(--space-4);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, #ffffff 100%);
  pointer-events: none;
}
.logo-wall__count {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-1);
  text-align: center;
}
.logo-wall__hint { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); text-align: center; }
.wall-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.wall-foot__note {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

/* ─── Team ──────────────────────────────────────────────────────────────── */
.person__photo { width: 72px; height: 72px; border-radius: var(--radius-xl); object-fit: cover; }
.person__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: var(--brand-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.person__name { margin: 0; }
/* Name and role stack beside the photo rather than under it. min-width:0 lets a
   long name wrap instead of forcing the flex row wider than its card. */
.person__id { min-width: 0; }
.person__role {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-2);
}
.link-icon {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--action-color);
}

/* ─── Mission ───────────────────────────────────────────────────────────── */
.value-row {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}
.value-row__num { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-xl); color: var(--brand-4); }
.value-row__term { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-primary); }
.value-row__text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); }

/* ─── Locations ─────────────────────────────────────────────────────────── */
.media-card__image { width: 100%; height: 160px; object-fit: cover; }
.media-card__body { padding: var(--space-5); }
.media-card__address { margin-top: 2px; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }

/* ─── Events ────────────────────────────────────────────────────────────── */
.event-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; }
.event-row__date { flex: 0 0 8.5rem; }
.event-row__day { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-xl); color: var(--brand-1); }
.event-row__year { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }
.event-row__body { flex: 1 1 16rem; min-width: 0; }
.event-row__body p { margin: var(--space-1) 0 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* Past events: the same information as an .event-row minus the description, so
   a long back catalogue stays a list rather than a wall. Two columns at
   desktop, one below — auto-fit with a min() floor, no media query. The row
   gap is deliberately zero so the top borders read as one continuous rule down
   each column. */
.event-past-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  column-gap: var(--space-8);
}
.event-past {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-color);
  text-decoration: none;
}
.event-past__date { flex: 0 0 8rem; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }
.event-past__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--brand-1); }
.event-past__place { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); }
a.event-past:hover .event-past__title { color: var(--brand-6); }

/* ─── Expertise page ────────────────────────────────────────────────────── */
.practice {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: var(--space-12);
}
.practice__num { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-xl); color: var(--brand-4); }
.practice__title { margin: 0; }
/* The number reads as a label on the title, not as a line of its own. Baseline
   alignment rather than centre so the digits sit on the heading's baseline. */
.practice__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.covers {
  background: var(--surface-content);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  align-self: start;
}

/* ─── Publications page ─────────────────────────────────────────────────── */
.book-panel {
  background: var(--brand-1);
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-12);
  align-items: center;
}
/* 8.5 × 11 — the book's trim size, so the cover is never cropped. */
.book-cover {
  aspect-ratio: 8.5 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-content);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Echoes the rule-and-quote treatment on the book's back cover. */
.book-note {
  border-left: 2px solid var(--brand-4);
  padding-left: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--brand-5);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
}

/* ─── Debrief article ───────────────────────────────────────────────────── */
.article {
  max-width: var(--content-md);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 1.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
}
.article__meta { margin-top: var(--space-6); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.article__standfirst {
  margin: var(--space-5) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.article h2 {
  margin: var(--space-10) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-1);
}
.article__body {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
/* Longform lists — the debrief had none, the legal pages do. */
.article__list {
  margin: var(--space-4) 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.article__list strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

.takeaways {
  margin: var(--space-10) 0;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.takeaways ol {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.article blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border-left: 3px solid var(--brand-4);
  background: var(--surface-content);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.article blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--brand-1);
  line-height: var(--leading-snug);
}
.article__foot {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.byline__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-primary); }
.byline__role { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

/* ─── Contact form ──────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--action-border);
  box-shadow: 0 0 0 3px var(--action-hover);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--action-color);
}

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

.form-status {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.form-status--error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}
.form-status--ok {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.form-success {
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--brand-6);
  padding-left: var(--space-5);
}

/* ─── Utilities ─────────────────────────────────────────────────────────────
   Last in the cascade so they win over the component defaults they adjust.
   The design's rhythm is the 4px token scale, so one-off offsets are
   expressed as tokens rather than literals. */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.self-start { align-self: flex-start; }
.span-all { grid-column: 1 / -1; }
.measure-52 { max-width: 52ch; }
.measure-60 { max-width: 60ch; }

/* ─── Typeface switcher (preview only) ──────────────────────────────────── */
/* Injected by js/font-switch.js and absent on the production hostname. Its own
   type is pinned to the system stack so the control reads the same whichever
   candidate is being judged. Delete this block with the script when the
   typeface is settled. */
.font-switch {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  max-width: calc(100vw - 2 * var(--space-4));
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  box-shadow: 0 6px 24px rgb(55 18 60 / 0.16);
  font-family: system-ui, sans-serif;
}
.font-switch__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.font-switch__btn {
  font-family: inherit;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.font-switch__btn[aria-pressed="true"] {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--brand-5);
}