/* ==========================================================================
   ITHAKA — MONOCHROME / NAVY / DARK YELLOW
   --------------------------------------------------------------------------
   Colour has exactly three jobs and never more:
     ink   — navy-black. All type and all rules. Replaces black entirely.
     navy  — true structural navy. Institutional marks only.
     mark  — dark yellow. Marks MOVEMENT. Always a fill under ink type,
             never type on white (that direction fails contrast at 2.9:1).
   ========================================================================== */

:root {
  /* — type ————————————————————————————————————————————————— */
  --f-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-data:    'IBM Plex Mono', ui-monospace, monospace;

  /* — colour ————————————————————————————————————————————————— */
  --paper:      #FFFFFF;
  --paper-2:    #F6F7F9;   /* recessed panels                        */
  --ink:        #101A2E;   /* 18.6:1 on paper — all type, all rules  */
  --ink-2:      #3E4A61;   /*  8.9:1 — secondary prose               */
  --ink-3:      #6B7689;   /*  4.6:1 — metadata, still AA            */
  --rule:       #101A2E;
  --rule-faint: #D8DCE3;

  --navy:       #1B3A6B;   /* 11.3:1 on paper                        */
  --mark:       #D99C00;   /* fill only — ink on mark = 6.9:1        */
  --mark-ink:   #8A6200;   /* 5.5:1 — the rare case yellow is type   */
  --on-ink:     #FFFFFF;

  /* — metrics ———————————————————————————————————————————————— */
  --wrap:  1180px;
  --gutter: 28px;
  --hair:  1px;
  --sec-y: clamp(72px, 9vw, 128px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t:    0.2s var(--ease);
}

/* Same system, navy ground. Exploration only: index.html?theme=inverse */
[data-theme="inverse"] {
  --paper:      #0C1526;
  --paper-2:    #14203A;
  --ink:        #F2F5FA;
  --ink-2:      #A9B4C7;
  --ink-3:      #7E8CA3;   /* 4.9:1 on this ground */
  --rule:       #F2F5FA;
  --rule-faint: #2A3A58;
  --navy:       #9FB8E0;
  --mark:       #E8B10A;
  --mark-ink:   #E8B10A;
  --on-ink:     #0C1526;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
em { font-style: italic; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--mark-ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 999;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
  transition: top var(--t);
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   LAYOUT PRIMITIVES
   Everything on the page aligns to the left edge of .wrap. No exceptions —
   that single rule is what makes a document read as a document.
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: var(--sec-y);
  border-top: var(--hair) solid var(--rule);
  scroll-margin-top: 84px;
}
.hero { border-top: 0; }

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); }

h2 {
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head h2 { margin-bottom: 18px; max-width: 20ch; }

.footnote {
  font-family: var(--f-data);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 28px;
}
.fn-ref { color: inherit; text-decoration: none; border-bottom: var(--hair) solid currentColor; }

/* ==========================================================================
   THE MARK — yellow only ever means "this moved"
   ========================================================================== */
.mark {
  font-family: var(--f-data);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 1.15em;
  padding-inline: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   BUTTONS
   .nav-cta is given the same specificity as .nav-list a so colour can't be
   stolen back by the nav's own link rule.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border: var(--hair) solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}

.btn-primary,
.nav .btn-primary {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 4px 4px 0 var(--mark);
}
.btn-primary:hover,
.nav .btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mark);
}
.btn-primary:active,
.nav .btn-primary:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--mark);
}

.btn-quiet,
.nav .btn-quiet {
  background: transparent;
  color: var(--ink);
}
.btn-quiet::after { content: "→"; font-family: var(--f-data); }
.btn-quiet:hover { background: var(--paper-2); }

.btn-sm { padding: 10px 18px; font-size: 0.875rem; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--hair) solid var(--rule);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.brand-tag {
  font-family: var(--f-data);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-left: var(--hair) solid var(--rule-faint);
  padding-left: 12px;
}

.nav { display: flex; align-items: center; gap: 32px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-list a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav-list a:hover { color: var(--ink); border-bottom-color: var(--mark); }
.nav-list a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--mark); }

/* Language selector. Mono, uppercase, tiny — structural notation, not a control
   panel. No flags (Portuguese has two of them) and no globe icon. The current
   language carries the same yellow underline the current nav item does, so the
   two states are learned once. Lives outside .nav-list, so `.nav-list a` (0-1-1)
   can't reach it — see the note above .btn. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang a,
.lang span[aria-current] {
  padding-block: 6px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.lang a { color: var(--ink-3); }
.lang a:hover { color: var(--ink); border-bottom-color: var(--mark); }
.lang span[aria-current] { color: var(--ink); border-bottom-color: var(--mark); }
.lang-sep { color: var(--rule); }

.foot-lang { font-size: 0.72rem; }
.foot-lang a,
.foot-lang span[aria-current] { padding-block: 0; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: var(--hair) solid var(--ink);
  color: var(--ink);
  font-family: var(--f-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 16px; height: 2px;
  background: currentColor;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top: 5px; }

/* ==========================================================================
   HERO — one statement, set full width. The title page of the document.
   ========================================================================== */
.hero { padding-block: clamp(72px, 10vw, 132px) clamp(80px, 11vw, 148px); }

.hero-claim h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  max-width: 17ch;
  margin-bottom: 32px;
}
.hero-claim .lead { max-width: 58ch; }

/* ==========================================================================
   WHY NOW — the 88/12 split, drawn to scale
   ========================================================================== */
.split { margin: 0; }
.split-cap { margin-bottom: 20px; }

/* The two ends, each anchored over its own segment of the bar. */
.split-ends {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.split-bar {
  display: flex;
  height: 52px;
  border: var(--hair) solid var(--ink);
}
.split-seg-passive {
  flex: 88;
  background:
    repeating-linear-gradient(-45deg,
      var(--rule-faint) 0 1px, transparent 1px 7px);
}
.split-seg-marked {
  flex: 12;
  background: var(--mark);
  border-left: var(--hair) solid var(--ink);
}

/* The argument: everything above is a starting point and a destination,
   and the arrow between them is what Ithaka sells. */
.split-move {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.split-move-label {
  font-family: var(--f-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.split-move-rule {
  flex: 1;
  height: var(--hair);
  background: var(--ink);
}
.split-move-arrow {
  width: 0;
  height: 0;
  margin-left: -14px;
  border-left: 9px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.split-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: 40px;
}
.split-item p { color: var(--ink-2); font-size: 0.97rem; max-width: 46ch; }
.split-pct {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.split-pct .mark { background-size: 100% 0.82em; background-position: 0 62%; }
.split-item h3 { margin-bottom: 10px; }

/* The marked legend item is the destination the 12% names. Yellow is the only
   thing that ties them together — the bar's proportions put the 12% segment at
   the far right, nowhere near the column that explains it. So the mark carries
   the link: three yellow things on this side of the figure, none on the other.
   The heading keeps display type; only the fill is borrowed from .mark. */
.split-item-marked h3 .mark {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background-size: 100% 0.9em;
  background-position: 0 64%;
}

/* ==========================================================================
   APPROACH — three steps under one bracket
   ========================================================================== */
.spine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: 2px solid var(--rule);
}
.spine-step {
  padding: 30px 32px 40px 0;
  border-right: var(--hair) solid var(--rule-faint);
}
.spine-step:first-child { padding-left: 0; }
.spine-step:not(:first-child) { padding-left: 32px; }
.spine-step:last-child { border-right: 0; padding-right: 0; }

.step-no {
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.spine-step h3 { margin-bottom: 12px; }
.spine-step p { color: var(--ink-2); font-size: 0.97rem; }

/* The bracket DESIGN.md asked for: one span across all three steps. */
.bracket {
  height: 14px;
  border: var(--hair) solid var(--ink);
  border-top: 0;
}
.bracket-label {
  margin-top: 14px;
  text-align: center;
  font-family: var(--f-data);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   WHO WE SERVE — two doors, equal weight, both with a way through
   ========================================================================== */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: var(--hair) solid var(--ink);
  border-top: 4px solid var(--navy);
  padding: clamp(28px, 3vw, 40px);
}
.door h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 16px; }
.door > p { color: var(--ink-2); margin-bottom: 24px; }

.door-note {
  border-top: var(--hair) solid var(--rule-faint);
  padding-top: 16px;
  margin-bottom: 28px;
}
.door-note dt {
  font-family: var(--f-data);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.door-note dd { font-size: 0.94rem; color: var(--ink-2); }

.door-cta {
  margin-top: auto;
  font-family: var(--f-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--mark);
  padding-bottom: 2px;
}
.door-cta::after { content: " →"; }
.door-cta:hover { background: var(--mark); }

/* ==========================================================================
   PROOF — case records
   One block per engagement: who it was on the left, the numbers that
   engagement moved on the right, grouped so a case reads as one piece of work.
   ========================================================================== */
.records { border-top: 2px solid var(--rule); }

.rec {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: 12px clamp(28px, 4vw, 56px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: var(--hair) solid var(--rule-faint);
}

.rec-id { display: flex; flex-direction: column; gap: 6px; }
.rec-id h3 { font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
.rec-mandate {
  font-family: var(--f-data);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rec-body { display: flex; flex-direction: column; gap: 16px; }

.rec-metrics { display: flex; flex-direction: column; gap: 9px; }
.rec-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.rec-metric dt {
  flex: 0 0 clamp(180px, 20vw, 230px);
  font-size: 0.94rem;
  color: var(--ink-2);
}

.rec-note { font-size: 0.94rem; color: var(--ink-2); max-width: 58ch; }

.rec-owner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  font-family: var(--f-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 2px solid var(--rule);
}

/* The consulting years carry real figures, but they were advice, not owned
   outcomes — so they sit outside the marked column deliberately. */
.prior {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: var(--hair) solid var(--rule-faint);
  max-width: 74ch;
}
.prior .eyebrow { margin-bottom: 10px; }
.prior p { font-size: 0.97rem; color: var(--ink-2); }
.prior strong {
  font-family: var(--f-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.bio { max-width: 68ch; }
.bio h3 { margin-bottom: 20px; }
.bio-role {
  display: block;
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}
.bio p { color: var(--ink-2); margin-bottom: 18px; }
.bio-note { margin-top: 32px; margin-bottom: 0; }

/* ==========================================================================
   START — three ways to reach a person, as full-width records
   ========================================================================== */
.contact { list-style: none; border-top: 2px solid var(--rule); }

.contact a {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 4vw, 48px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: var(--hair) solid var(--rule-faint);
  text-decoration: none;
  transition: background-color var(--t), padding-inline var(--t);
}
.contact a:hover {
  background: var(--paper-2);
  padding-inline: 16px;
}

.contact-label {
  flex: 0 0 clamp(96px, 12vw, 160px);
  font-family: var(--f-data);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-value {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: break-word;
}

.contact a::after {
  content: "→";
  margin-left: auto;
  font-family: var(--f-data);
  font-size: 1.1rem;
  color: var(--ink-3);
  transition: color var(--t), transform var(--t);
}
.contact a:hover::after { color: var(--ink); transform: translateX(4px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot {
  border-top: var(--hair) solid var(--rule);
  padding-block: 48px;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
}
.foot-brand {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.foot-line { color: var(--ink-2); font-size: 0.9rem; }
.foot-legal {
  margin-left: auto;
  font-family: var(--f-data);
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* ==========================================================================
   MOTION — one orchestrated moment: the mark wipes in under the number
   --------------------------------------------------------------------------
   Everything below is opt-in. The resting state of the page IS the finished
   state, so no-JS and reduced-motion visitors are never left with a hidden
   element — and no override can lose a specificity fight to a hiding rule.
   JS adds [data-anim] to <html> only when motion is welcome.
   ========================================================================== */
[data-anim] .reveal .mark { background-size: 0% 1.15em; }

[data-anim] .reveal.is-in .mark {
  background-size: 100% 1.15em;
  transition: background-size 0.55s var(--ease);
}

[data-anim] .split-bar.reveal .split-seg-marked {
  transform: scaleX(0);
  transform-origin: left;
}
[data-anim] .split-bar.is-in .split-seg-marked {
  transform: scaleX(1);
  transition: transform 0.6s var(--ease) 0.1s;
}

/* Stagger the marks within a record so its column reads top-to-bottom. */
[data-anim] .rec .rec-metric:nth-child(2) .mark { transition-delay: 0.07s; }
[data-anim] .rec .rec-metric:nth-child(3) .mark { transition-delay: 0.14s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover,
  .nav .btn-primary:hover { transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* — nav collapses well before it can overflow ——————————————————— */
@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--hair) solid var(--rule);
    padding: 8px var(--gutter) 24px;
  }
  .site-head[data-open="true"] .nav { display: flex; }
  .site-head { position: sticky; }
  .head-inner { position: relative; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block;
    padding-block: 14px;
    font-size: 1.05rem;
    border-bottom: var(--hair) solid var(--rule-faint);
  }
  .nav-list a:hover { border-bottom-color: var(--mark); }
  .nav-cta { margin-top: 24px; justify-content: center; }
  .nav .lang { margin-top: 18px; justify-content: flex-start; }
}

@media (max-width: 900px) {
  .hero-claim h1 { max-width: 18ch; }

  .spine { grid-template-columns: minmax(0, 1fr); }
  .spine-step {
    padding: 26px 0 30px;
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule-faint);
  }
  .spine-step:not(:first-child) { padding-left: 0; }
  .spine-step:last-child { border-bottom: 0; }
  .bracket { display: none; }
  .bracket-label { text-align: left; margin-top: 24px; }

  .doors { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .brand-tag { display: none; }
  .split-legend { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot-legal { margin-left: 0; }

  /* Label above value — the row can't hold both side by side. */
  .contact a { flex-wrap: wrap; gap: 4px 16px; }
  .contact-label { flex: 0 0 100%; }
  .contact a::after { margin-left: auto; }

  /* Records stack: mandate, then metrics label-over-value. */
  .rec { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rec-metric dt { flex: 0 0 100%; }
  .rec-owner { flex-direction: column; gap: 4px; }
}