/* ═══════════════════════════════════════════════════════════════════
   AVÈRO DESIGN SYSTEM · v5.1
   Firm site + Caliber marketing · July 2026

   COLOR ROLES (strict — no random swaps)
   ─────────────────────────────────────
   Navy   #0B1C30   dark surfaces, primary text, dark headings
   White  #FFFFFF   light surfaces
   Mist   #F2F4F7   alternate light bands (neutral, not sky)
   Orange #D46F28   primary CTA + spine + ONE accent mark only
   Mute   #5B6B7C   secondary text

   On dark: white / white@70% / white@45% — never sky for every label.
   Em italics: same color as parent, italic weight only.
   Links: navy → orange on hover.

   Surfaces alternate: white ↔ mist. Dark is intentional (hero, product, close).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --navy: #0B1C30;
  --navy-800: #122A45;
  --navy-700: #1B3A5C;
  --brand-navy: #1B3A5C;
  --ground: #0B1C30;
  --navy-900: #0B1C30;
  --surface-navy: #0B1C30;
  --surface-navy-mid: #1B3A5C;
  --ink: #0B1C30;
  --ink-soft: #1A2F45;

  /* Kept for legacy refs — map into the system, not used as free accents */
  --blue-deep: #0B1C30;
  --blue-royal: #0B1C30;
  --blue-brand: #1B3A5C;
  --blue-mid: #5B6B7C;
  --sky: #D46F28;           /* demoted: maps to action so old sky refs don't introduce cyan */
  --ice: rgba(255, 255, 255, 0.72);
  --mist: #F2F4F7;

  --orange: #D46F28;          /* display only: spine, rules, eyebrow dash, markers */
  --orange-action: #A8541C;   /* anything that IS text or carries text — 5.32:1 on white */
  --copper: #D46F28;
  --copper-bright: #E07A32;
  --copper-deep: #A8541C;
  --brand-orange: #D46F28;
  --orange-warm: #E07A32;
  --amber: #C58A3A;

  --white: #FFFFFF;
  --paper-white: #FFFFFF;
  --paper: #F2F4F7;
  --bond: #F2F4F7;
  --bond-deep: #E8ECF1;
  --surface-cream: #F2F4F7;
  --surface-cream-deep: #E8ECF1;
  --bond-ink: #0B1C30;
  --sky-soft: rgba(255, 255, 255, 0.72);
  --ice-wash: #F2F4F7;
  --blue-mist: #F2F4F7;

  --text: #1A2433;
  --text-soft: #5B6B7C;
  --text-faint: #5F6C7B;      /* 4.63:1 on white (was #7A8796, 3.66:1) */
  --heading: #0B1C30;
  --label: #5B6B7C;
  --muted: #5B6B7C;
  --muted-soft: #6B7787;      /* 4.05:1 — used at >=13px only */

  --on-navy: rgba(255, 255, 255, 0.96);
  --on-navy-soft: rgba(255, 255, 255, 0.72);
  --on-navy-faint: rgba(255, 255, 255, 0.62);  /* 6.0:1 on navy (was 0.45, 4.41:1) */

  --rule: rgba(11, 28, 48, 0.10);
  --rule-soft: rgba(11, 28, 48, 0.06);
  --rule-strong: rgba(11, 28, 48, 0.16);
  --rule-on-dark: rgba(255, 255, 255, 0.12);
  --rule-on-dark-soft: rgba(255, 255, 255, 0.07);
  --rule-copper: rgba(212, 111, 40, 0.45);
  --rule-sky: rgba(11, 28, 48, 0.12);
  --card-bg: #FFFFFF;
  --card-border: rgba(11, 28, 48, 0.08);

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Public Sans', system-ui, sans-serif;

  --fs-display: clamp(44px, 6.5vw, 84px);
  --fs-heading: clamp(32px, 4.2vw, 48px);
  --fs-subheading: clamp(24px, 3vw, 34px);
  --fs-standfirst: clamp(17px, 1.7vw, 20px);
  --fs-lede: clamp(22px, 2.5vw, 30px);
  --fs-body-lg: 17px;
  --fs-body: 16px;
  --fs-body-sm: 14.5px;
  --fs-eyebrow: 12px;
  --fs-caption: 12px;

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
  --sp-6: 64px; --sp-7: 96px; --sp-8: 120px; --sp-9: 160px;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --container-max: 1480px;
  --section-py: 100px;
  --spine: 4px;
  --nav-h: 72px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.32s;
  --dur-slow: 0.6s;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  border-left: var(--spine) solid var(--orange);
  min-height: 100vh;
}
::selection { background: var(--navy); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
/* A component's own display rule outranks the UA sheet's [hidden]{display:none},
   so JS filters that toggle .hidden must be honoured explicitly. */
[hidden] { display: none !important; }
a { color: var(--navy); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--orange-action); }
button { font-family: inherit; }

/* ── Type ── */
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-sans); }

.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--heading);
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}
.display em { font-style: italic; font-weight: 400; color: inherit; }

.heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-heading);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--heading);
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1;
}
.heading em { font-style: italic; font-weight: 400; color: inherit; }

.subheading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-subheading);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--heading);
  text-wrap: balance;
}

.standfirst {
  font-family: var(--font-sans);
  font-size: var(--fs-standfirst);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-soft);
}

.lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
}
.lede em { font-style: italic; color: inherit; }

.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.35;
  color: var(--heading);
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--orange);
  margin: 36px 0;
  max-width: 36ch;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 16px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--on-navy-soft); }
.eyebrow.on-dark::before { background: var(--orange); }

.caption, .dateline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  line-height: 1.55;
}

.record-line {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.record-line .rec-no { color: var(--navy); font-weight: 600; }
.record-line .sep { color: var(--muted-soft); }

.seal { display: none; }
.oxrule {
  border: 0; height: 2px; margin: 0;
  background: var(--rule);
}

/* ── Layout ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
}

.section {
  padding: var(--section-py) 0;
  background: var(--white);
  position: relative;
}

/* One dark surface treatment only */
.section--ink,
.section--navy {
  background: var(--navy);
  color: var(--on-navy);
  --heading: #fff;
  --text: var(--on-navy);
  --text-soft: var(--on-navy-soft);
  --text-faint: var(--on-navy-faint);
  --label: var(--on-navy-soft);
  --rule: var(--rule-on-dark);
  --rule-soft: var(--rule-on-dark-soft);
  --rule-strong: var(--rule-on-dark);
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.10);
}
.section--ink .display em,
.section--ink .heading em,
.section--ink .lede em,
.section--navy .display em,
.section--navy .heading em,
.section--navy .lede em { color: inherit; }

.section--cream,
.section--cream-deep,
.section--sky {
  background: var(--mist);
  --heading: var(--navy);
  --text: var(--text);
  --text-soft: var(--text-soft);
  --text-faint: var(--text-faint);
  --label: var(--text-faint);
  --card-bg: #fff;
  --card-border: var(--rule-soft);
}
.section--cream-deep { background: var(--bond-deep); }

.section .display,
.section .heading,
.section .subheading,
.section .lede { color: var(--heading); }
.section .standfirst { color: var(--text-soft); }
.section .pullquote { color: var(--heading); }
.section .eyebrow { color: var(--label); }
.section--ink .eyebrow,
.section--navy .eyebrow { color: var(--on-navy-soft); }
.section .record-line { color: var(--text-faint); }
.section .record-line .rec-no { color: var(--heading); }

/* ── Section heads ── */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 56px;
  align-items: end;
  margin-bottom: 52px;
}
.section-head .heading { margin-top: 14px; max-width: 20ch; }
.section-head .standfirst {
  margin: 0;
  max-width: 36ch;
  justify-self: end;
  text-align: left;
  padding-bottom: 2px;
}
/* Retained for one-column heads; the marketing and case-study pages all use the
   two-column .section-head, which fills the width instead of stranding the block
   at 46% of the container on a wide screen. */
.section-head--stack {
  grid-template-columns: 1fr;
  max-width: 680px;
  margin-bottom: 44px;
}
.section-head--stack:not(:has(.standfirst)) { margin-bottom: 36px; }
.section-head--stack .standfirst {
  text-align: left;
  justify-self: start;
  margin-top: 16px;
  max-width: 54ch;
}
.section-head .btn { justify-self: end; align-self: end; }

/* ── Nav (dark — works over navy hero and scrolls cleanly) ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  padding: 0 48px 0 calc(48px + var(--spine));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(11, 28, 48, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand img { height: 30px; width: auto; }
.nav-brand:hover { color: inherit; }
.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
  position: relative;
}
.nav-link:hover { color: #fff; }
.nav-link.current {
  color: #fff;
  font-weight: 600;
}

/* Nested nav group. About holds Careers, so the top bar keeps six items.
   CSS-only: hover for pointers, :focus-within so tabbing opens it too. The group
   stretches to the full nav height, which means the panel sits flush against the
   nav's bottom edge and there is no dead gap for the pointer to fall through. */
.nav-group {
  position: relative;
  display: flex;
  align-items: center;
  /* Full nav height, so the panel's top:100% lands exactly on the nav's bottom
     border rather than cutting through it, and the pointer never crosses a gap. */
  height: var(--nav-h);
  gap: 6px;
}
.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--dur-fast) var(--ease),
              margin-top var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  flex: none;
}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret {
  border-color: #fff;
  transform: rotate(225deg);
  margin-top: 3px;
}
.nav-submenu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 196px;
  padding: 8px;
  background: rgba(11, 28, 48, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur-fast);
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility 0s;
}
.nav-submenu a {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.nav-submenu a.current {
  color: #fff;
  font-weight: 600;
}
.nav-link.current::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--orange);
  border-radius: 1px;
}
.nav-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  margin-left: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  vertical-align: 1px;
  line-height: 1.4;
}
.nav-cta {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--orange-action);
  padding: 10px 16px;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--copper-bright); color: #fff; transform: translateY(-1px); }
.nav-cta:active { transform: scale(0.97); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-sm);
}

/* ── Buttons ── */
.btn {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.25;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn--primary {
  background: var(--orange-action);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.btn--primary:hover {
  background: var(--copper-bright);
  border-color: var(--copper-bright);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px rgba(212, 111, 40, 0.55);
}
.btn--primary:active {
  transform: scale(0.97);
  box-shadow: none;
}
.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: rgba(11, 28, 48, 0.22);
}
.btn--secondary:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--secondary:active { transform: scale(0.97); }
.btn--light {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.btn--light:hover {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--blue {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--blue:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
  line-height: 1;
}
.btn:hover .arrow { transform: translateX(3px); }

.section--ink .btn--secondary,
.section--navy .btn--secondary,
.close .btn--secondary,
.hero .btn--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.section--ink .btn--secondary:hover,
.section--navy .btn--secondary:hover,
.close .btn--secondary:hover,
.hero .btn--secondary:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.section--cream .btn--secondary,
.section--cream-deep .btn--secondary {
  color: var(--navy);
  border-color: rgba(11, 28, 48, 0.2);
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.badge--beta { color: var(--text-faint); }
.section--ink .badge--beta,
.section--navy .badge--beta,
.hero .badge { color: var(--on-navy-soft); border-bottom-color: rgba(255,255,255,0.2); }
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
}

/* ── Hero ── */
/* Back link — lives in the navy hero on case studies and posts.
   Had no rule at all, so it inherited a{color:var(--navy)} onto a navy
   background: invisible on 111 pages. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-navy-soft);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.back-link:hover { color: #fff; gap: 11px; }
.section:not(.hero) .back-link { color: var(--text-soft); }
.section:not(.hero) .back-link:hover { color: var(--navy); }

.hero {
  display: block;
  padding: calc(var(--nav-h) + 60px) 0 0;
  background: var(--navy);
  color: var(--on-navy);
  position: relative;
  --heading: #fff;
  --text: var(--on-navy);
  --text-soft: var(--on-navy-soft);
  --text-faint: var(--on-navy-faint);
  --label: var(--on-navy-soft);
  --rule: var(--rule-on-dark);
}
.hero .container { padding-bottom: 48px; }
.hero .eyebrow { color: var(--on-navy-soft); }
.hero .display {
  max-width: 18ch;
  margin-top: 20px;
  color: #fff;
}
.hero .display em { color: inherit; }
.hero .standfirst {
  margin-top: 24px;
  max-width: 54ch;
  color: var(--on-navy-soft);
}
.hero .standfirst strong { color: #fff; font-weight: 600; }
.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-proof-item {
  padding: 28px 28px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-proof-item:first-child {
  padding-left: 0;
}
.hero-proof-item:last-child {
  border-right: 0;
  padding-right: 0;
}
.hero-proof-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-proof-item span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-navy-soft);
  line-height: 1.4;
  max-width: 18ch;
}

/* legacy */
.hero-main { padding: 0; }
.hero-panel { display: none; }
.hero-record { margin-bottom: 14px; }
.hero-deck {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 40px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.hero-colophon { display: flex; align-items: flex-start; gap: 16px; justify-content: flex-end; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.hero-stats > div { padding: 20px 16px 0 0; }
.hero-stats strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--heading);
}
.hero-stats span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-faint);
}

/* ── Statement ── */
.statement {
  padding: 76px 0 68px;
  background: var(--white);
  border-bottom: 1px solid var(--rule-soft);
}
.statement-quote {
  margin: 0;
  /* The measure has to be capped against the display type, not the blockquote's
     inherited body size — 60ch resolved to 587px here, about 34 characters of
     the 38px serif, which stranded the block in the left third of the band. */
  max-width: min(100%, 900px);
  padding-left: 32px;
  border-left: 3px solid var(--orange);
}
.statement p {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.statement p em { font-style: italic; color: inherit; }
.statement-attr {
  margin-top: 22px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.statement-attr span {
  display: block;
  color: var(--text-soft);
  font-weight: 500;
  font-size: 13px;
}

/* ── Client rail ── */
.client-rail {
  padding: 18px 0;
  background: var(--mist);
  border-bottom: 1px solid var(--rule-soft);
}
.client-rail-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 0 48px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.client-rail-inner::-webkit-scrollbar { display: none; }
.client-rail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
  white-space: nowrap;
}
.client-rail-names {
  display: flex;
  flex-wrap: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.client-rail-names span,
.client-rail-names a {
  white-space: nowrap;
  opacity: 0.8;
  padding: 0 18px;
  border-left: 1px solid var(--rule);
}
.client-rail-names > :first-child { border-left: 0; padding-left: 0; }
.client-rail-names span::after,
.client-rail-names a::after { display: none; }
/* Named clients link through to their case study. The rail stays quiet until
   hover — it is proof, not a navigation bar. */
.client-rail-names a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.client-rail-names a:hover {
  opacity: 1;
  color: var(--orange-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.client-rail-names a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; opacity: 1; }

/* ── Manifesto ── */
.manifesto {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
}
.manifesto-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  position: sticky;
  top: 100px;
  align-self: start;
}
.manifesto-label .section-num { display: block; color: var(--orange-action); margin-bottom: 8px; }
.manifesto-body p {
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 58ch;
}
.manifesto-body p.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  color: var(--heading);
  margin-bottom: 24px;
  line-height: 1.32;
  letter-spacing: -0.015em;
  max-width: 620px;   /* aligns with the 603px sans body column below it */
}
.manifesto-sig {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  color: var(--text-faint);
}
.manifesto-sig strong { color: var(--heading); font-weight: 600; }

/* ── Work cards ── */
.work-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.work-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 26px;
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.work-row:hover {
  border-color: rgba(11, 28, 48, 0.14);
  box-shadow: 0 18px 40px -28px rgba(11, 28, 48, 0.2);
  transform: translateY(-2px);
  color: inherit;
}
.work-row-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.work-row-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 500;
  color: var(--heading);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.work-row-body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-soft);
  flex: 1;
}
.work-row-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--rule-soft);
  letter-spacing: 0.01em;
}

/* ── Cards ── */
.bgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.bgrid--2 { grid-template-columns: repeat(2, 1fr); }
.bgrid--3 { grid-template-columns: repeat(3, 1fr); }
.bgrid--4 { grid-template-columns: repeat(4, 1fr); }
.bgrid-cell {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-med) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              background var(--dur-med) var(--ease);
  position: relative;
  overflow: hidden;
}
.bgrid-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.bgrid-cell:hover {
  border-color: rgba(11, 28, 48, 0.14);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -24px rgba(11, 28, 48, 0.18);
  color: inherit;
}
.bgrid-cell:hover::before { opacity: 1; }
.bgrid-cell:focus-visible {
  border-color: rgba(11, 28, 48, 0.2);
}
.bgrid-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.bgrid-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--heading);
  margin-bottom: 10px;
  max-width: 18ch;
  text-wrap: balance;
}
.bgrid-body {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-soft);
  margin-bottom: 16px;
  flex: 1;
  max-width: 42ch;
}
.bgrid-meta {
  display: flex;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
}
.caliber-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 12px;
  padding-left: 14px;
  position: relative;
}
.caliber-tag::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  background: var(--orange);
  transform: translateY(-50%);
  border-radius: 1px;
}
.caliber-tag span { color: var(--text-faint); font-weight: 500; }

/* Dark cards (modules on navy) */
.section--ink .bgrid-cell,
.section--navy .bgrid-cell {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.section--ink .bgrid-cell:hover,
.section--navy .bgrid-cell:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.section--ink .bgrid-title,
.section--navy .bgrid-title { color: #fff; }
.section--ink .bgrid-body,
.section--navy .bgrid-body { color: var(--on-navy-soft); }
.section--ink .bgrid-num,
.section--navy .bgrid-num { color: var(--on-navy-soft); }
.section--ink .bgrid-meta,
.section--navy .bgrid-meta {
  color: var(--on-navy-faint);
  border-top-color: rgba(255, 255, 255, 0.1);
}

.section--cream .bgrid-cell,
.section--cream-deep .bgrid-cell {
  background: #fff;
  border-color: var(--rule-soft);
}

/* ── Impact ── */
.impact {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  align-items: stretch;
}
.impact-featured {
  background: var(--navy);
  color: #fff;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  border-radius: var(--r-xl);
}
.impact-featured .eyebrow { color: var(--on-navy-soft); }
.impact-featured h3 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin: 18px 0 12px;
  color: #fff;
  max-width: 14ch;
  text-wrap: balance;
}
.impact-featured p {
  font-size: 15px;
  line-height: 1.58;
  color: var(--on-navy-soft);
  max-width: 38ch;
  margin-bottom: 22px;
}
.impact-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-navy-soft);
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}
.impact-metrics {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.impact-metrics strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.impact-metrics span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-navy-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.impact-list {
  background: var(--mist);
  border-radius: var(--r-xl);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
}
.impact-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  transition: background var(--dur-fast) var(--ease);
}
.impact-list a:hover {
  background: #fff;
  color: inherit;
}
.impact-list a:focus-visible {
  background: #fff;
}
.impact-list-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--heading);
  letter-spacing: -0.012em;
}
.impact-list-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── Register ── */
.register { border-top: 1px solid var(--rule); margin-top: 8px; }
.register-head,
.register-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 0 4px;
}
.register-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
}
.register-row {
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease);
  border-radius: var(--r-sm);
}
.register-row:hover { background: var(--mist); }
.reg-no { font-weight: 600; color: var(--text-faint); font-size: 13px; }
.reg-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.reg-state, .reg-vertical, .reg-year {
  font-size: 13px;
  color: var(--text-faint);
}
.reg-year { text-align: right; }

/* ── Pipeline ── */
.pipeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  position: relative;
}
.pipeline::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--rule);
  z-index: 0;
}
.pipeline-node { position: relative; z-index: 1; padding: 0 4px; }
.pipeline-num {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.pipeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  margin-bottom: 18px;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--orange);
}
.section--cream .pipeline-dot,
.section--cream-deep .pipeline-dot,
.section--sky .pipeline-dot {
  border-color: var(--mist);
}
.section--ink .pipeline-dot,
.section--navy .pipeline-dot {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
  background: #fff;
}
.pipeline-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--heading);
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}
.pipeline-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.pipeline-caliber {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
}
.pipeline-caliber .cal { color: var(--orange-action); }

/* ── Product ── */
.caliber-shot {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 28px 56px -32px rgba(11, 28, 48, 0.4);
  border: 1px solid var(--rule-soft);
  background: #fff;
  margin: 0;
}
.caliber-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--navy);
}
.caliber-shot-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.caliber-shot-bar span:nth-child(1) { background: #FF5F57; }
.caliber-shot-bar span:nth-child(2) { background: #FEBC2E; }
.caliber-shot-bar span:nth-child(3) { background: #28C840; }
.caliber-shot-bar em {
  margin-left: 10px;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.caliber-shot img {
  width: 100%;
  display: block;
}

.product-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 52px;
  align-items: center;
}
.product-band .heading { margin-top: 14px; max-width: 16ch; }
.product-band .standfirst { margin-top: 16px; max-width: 42ch; }
.product-band figure { margin: 0; }
.section--ink .caliber-shot,
.section--navy .caliber-shot {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.5);
}

/* ── Close ── */
.close {
  padding: 100px 0 96px;
  background: var(--navy);
  text-align: center;
  position: relative;
}
.close-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}
.close h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 auto 18px;
  max-width: 16ch;
  text-wrap: balance;
}
.close h2 em { font-style: italic; color: inherit; font-weight: 400; }
.close-sub {
  font-size: 17px;
  line-height: 1.58;
  color: var(--on-navy-soft);
  margin: 0 auto 32px;
  max-width: 40ch;
}
.close .eyebrow {
  justify-content: center;
  color: var(--on-navy-soft);
  margin-bottom: 22px;
}
.close .btn { margin-top: 4px; }
.close-cta { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ── Creds ── */
.creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.creds-col {
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  padding: 24px;
}
.creds-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.creds-label::before {
  content: '';
  width: 8px; height: 2px;
  background: var(--orange);
}
.creds-entry { padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.creds-entry:first-of-type { border-top: 0; padding-top: 0; }
.creds-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.creds-meta { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.creds-name.is-tbd, .creds-meta.is-tbd { color: var(--text-faint); }
.creds-link { color: inherit; text-decoration: none; }
.creds-link:hover .creds-name { color: var(--orange-action); }

/* ── Footer ── */
.site-footer {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding: 52px 48px 36px calc(48px + var(--spine));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 36px;
}
.footer-brand {
  font-size: 14px;
  line-height: 1.55;
  max-width: 34ch;
}
.footer-logo { height: 30px; width: auto; margin-bottom: 14px; }
.footer-brand strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}
.footer-honor {
  display: block;
  margin-top: 10px;
  color: var(--on-navy-soft);
  font-weight: 600;
  font-size: 13px;
}
.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a {
  color: var(--on-navy-soft);
  transition: color var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
}
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  max-width: 52ch;
  justify-content: flex-end;
}
.footer-links a {
  color: var(--on-navy-soft);
  transition: color var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.footer-links a:hover { color: #fff; }
.footer-meta {
  width: 100%;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-on-dark-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--on-navy-faint);
  line-height: 1.5;
}


/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--orange-action);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 24px -12px rgba(11, 28, 48, 0.4);
}
.skip-link:focus {
  left: calc(var(--spine) + 16px);
  outline: 2px solid #fff;
  outline-offset: 2px;
  color: #fff;
}

/* ── Polish utilities ── */
.mt-actions { margin-top: 28px; }
.mt-tight { margin-top: 16px; }
.impact-featured .btn { margin-top: 20px; align-self: flex-start; }
.product-band .hero-cta { margin-top: 28px; }
.footer-meta a { color: inherit; text-decoration: none; }
.footer-meta a:hover { color: #fff; }

/* Keyboard focus — visible, brand-aligned */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 3px;
}
.site-nav a:focus-visible {
  outline-color: #fff;
  outline-offset: 4px;
}
.nav-link.current:focus-visible::after { display: none; }

/* Card title hierarchy */
.bgrid-cell h3.bgrid-title,
.bgrid-cell h4.bgrid-title { margin-bottom: 10px; }

/* Pipeline numbers */
.pipeline-num { font-variant-numeric: tabular-nums; }

/* Buttons never inherit link underline / global link color */
.btn:hover { text-decoration: none; }
.btn--primary,
.btn--primary:hover,
.btn--primary:focus-visible { color: #fff; }
.btn--secondary:hover { color: #fff; }
.hero .btn--secondary:hover,
.section--ink .btn--secondary:hover,
.section--navy .btn--secondary:hover,
.close .btn--secondary:hover { color: var(--navy); }
.btn--light:hover { color: #fff; }
.btn--blue,
.btn--blue:hover { color: #fff; }
.nav-cta,
.nav-cta:hover { color: #fff; text-decoration: none; }

/* Creds polish */
.creds-col--wide { grid-column: 1 / -1; }
.creds-lede { font-size: 15px; line-height: 1.6; color: var(--text-soft); margin: 10px 0 0; max-width: 62ch; }
.creds-vehicles { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.creds-vehicles span {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--navy); background: var(--mist);
  border: 1px solid var(--rule); border-radius: 100px; padding: 8px 16px; white-space: nowrap;
}
.creds-col {
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.creds-col:hover {
  border-color: rgba(11, 28, 48, 0.12);
  box-shadow: 0 12px 28px -24px rgba(11, 28, 48, 0.16);
}

/* Sticky nav safe area on iOS */
@supports (padding: max(0px)) {
  .site-nav {
    padding-left: max(48px, calc(var(--spine) + env(safe-area-inset-left)));
    padding-right: max(48px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-left: max(48px, calc(var(--spine) + env(safe-area-inset-left)));
    padding-right: max(48px, env(safe-area-inset-right));
    padding-bottom: max(36px, env(safe-area-inset-bottom));
  }
}

/* Reduce hover lift on touch devices */
@media (hover: none) {
  .btn--primary:hover,
  .btn--secondary:hover,
  .nav-cta:hover,
  .work-row:hover,
  .bgrid-cell:hover,
  .acard:hover,
  .wp-card:hover,
  .creds-col:hover {
    transform: none;
    box-shadow: none;
  }
  .btn--primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset; }
}

/* Mid-width: keep cards readable before full stack */
@media (max-width: 1180px) and (min-width: 961px) {
  .bgrid--3 { grid-template-columns: repeat(2, 1fr); }
  .pipeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px;
  }
  .pipeline::before { display: none; }
  .nav-right { gap: 18px; }
  .nav-link { font-size: 13.5px; }
  .product-band { gap: 40px; }
  .section-head { gap: 20px 36px; }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  body { border-left-width: 3px; }
  .site-nav {
    padding: 0 20px 0 24px;
  }
  .nav-link.current::after { display: none; }
  .nav-right {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(11, 28, 48, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility 0s linear var(--dur-fast);
  }
  .nav-right.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility 0s;
  }
  .nav-right .nav-link {
    display: block;
    width: 100%;
    padding: 12px 4px;
  }
  /* No hover on a burger menu: show the nested items inline, indented. */
  .nav-group {
    display: block;
    height: auto;
    width: 100%;
  }
  .nav-caret { display: none; }
  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0 14px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 4px 4px;
  }
  .nav-submenu a { padding: 10px 4px; font-size: 14px; }
  .nav-right .nav-cta {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    justify-content: center;
    display: inline-flex;
  }
  .nav-toggle { display: block; }
  .container { padding: 0 24px; }
  .section { padding: 72px 0; }
  .hero { padding: calc(var(--nav-h) + 40px) 0 0; }
  .hero .display { max-width: none; }
  .hero-proof {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }
  .hero-proof-item {
    padding: 22px 16px 24px;
  }
  .hero-proof-item:nth-child(odd) { padding-left: 0; }
  .hero-proof-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .hero-proof-item:nth-child(1),
  .hero-proof-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .hero-deck { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .section-head {
    grid-template-columns: 1fr;
    margin-bottom: 36px;
    gap: 16px;
  }
  .section-head .heading { max-width: none; }
  .section-head .standfirst,
  .section-head .btn { text-align: left; justify-self: start; }
  .statement { padding: 56px 0; }
  .statement-quote { max-width: none; }
  .work-rows { grid-template-columns: 1fr; }
  .bgrid, .bgrid--2, .bgrid--3, .bgrid--4 { grid-template-columns: 1fr; }
  .impact { grid-template-columns: 1fr; }
  .impact-featured { min-height: 0; }
  .product-band { grid-template-columns: 1fr; gap: 32px; }
  .product-band .heading { max-width: none; }
  .pipeline { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .pipeline::before { display: none; }
  .creds { grid-template-columns: 1fr; }
  .manifesto { grid-template-columns: 1fr; gap: 20px; }
  .manifesto-label { position: static; }
  .register-head { display: none; }
  .register-row {
    grid-template-columns: 36px 1fr;
    gap: 4px 12px;
  }
  .register-row .reg-year { display: none; }
  .client-rail-inner { padding: 0 24px; gap: 20px; }
  .close { padding: 72px 0; }
  .close-inner { padding: 0 24px; }
  .site-footer { padding: 44px 24px 28px; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-links {
    justify-content: flex-start;
    max-width: none;
    gap: 14px 18px;
  }
}

@media (max-width: 600px) {
  .pipeline { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; width: 100%; }
  .hero .display {
    font-size: clamp(36px, 9.5vw, 48px);
    letter-spacing: -0.024em;
  }
  .close h2 {
    font-size: clamp(30px, 8vw, 40px);
  }
  .statement-quote { padding-left: 18px; }
  .statement p {
    font-size: clamp(22px, 6vw, 28px);
  }
  .hero-proof-item strong {
    font-size: clamp(26px, 7vw, 32px);
  }
  .client-rail-names span,
  .client-rail-names a { padding: 0 14px; font-size: 13.5px; }
  .work-row, .bgrid-cell { padding: 24px 22px; }
  .impact-featured { padding: 28px 24px; }
  .footer-meta { flex-direction: column; gap: 8px; }
}

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

/* Print: clean document, no chrome */
@media print {
  .site-nav,
  .skip-link,
  .nav-toggle,
  .hero-cta,
  .close .btn { display: none !important; }
  body {
    border-left: 0;
    background: #fff;
    color: #000;
  }
  .hero,
  .close,
  .section--ink,
  .section--navy,
  .impact-featured,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hero .display,
  .close h2,
  .section--ink .heading,
  .impact-featured h3 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .bgrid-cell, .work-row, .creds-col {
    box-shadow: none !important;
    break-inside: avoid;
  }
}


/* ─────────────────────────────
   FAQ — answer-first blocks, built to be quoted
   Plain semantic markup so crawlers and language models
   can extract each question and its answer cleanly.
   ───────────────────────────── */
.faq { border-top: 1px solid var(--rule); margin-top: 8px; }
.faq-item { border-bottom: 1px solid var(--rule-soft); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 44px 26px 0;
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
  transition: color var(--dur-fast) var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--orange-action); }
.faq-item > summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform var(--dur-med) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-answer { padding: 0 60px 30px 0; max-width: 74ch; }
.faq-answer p { font-size: 16.5px; line-height: 1.68; color: var(--text); }
.faq-answer p + p { margin-top: 14px; }
.faq-answer a { color: var(--orange-action); font-weight: 500; }
.section--ink .faq, .section--navy .faq { border-top-color: var(--rule-on-dark); }
.section--ink .faq-item, .section--navy .faq-item { border-bottom-color: var(--rule-on-dark-soft); }
.section--ink .faq-item > summary, .section--navy .faq-item > summary { color: #fff; }
.section--ink .faq-answer p, .section--navy .faq-answer p { color: var(--on-navy-soft); }
@media (max-width: 700px) {
  .faq-item > summary { padding: 22px 36px 22px 0; }
  .faq-answer { padding-right: 12px; }
}


/* ─────────────────────────────
   PROSE — long-form article body
   Used by insight posts. Measure held at ~68ch for readability.
   ───────────────────────────── */
.article { padding: 72px 0 96px; }
.article-inner { max-width: 760px; margin: 0 auto; }
.prose { font-size: 17.5px; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 24px; }
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 33px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin-top: 52px;
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--heading);
  margin-top: 40px;
}
.prose h4 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--heading); margin-top: 32px; }
.prose p { color: var(--text); }
.prose a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--orange-action); text-decoration-color: var(--orange-action); }
.prose ul, .prose ol { padding-left: 26px; }
.prose li { margin-top: 10px; }
.prose li::marker { color: var(--orange); }
.prose strong, .prose b { font-weight: 600; color: var(--heading); }
.prose blockquote {
  border-left: 3px solid var(--orange);
  padding: 4px 0 4px 24px;
  margin: 36px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  color: var(--heading);
}
.prose figure { margin: 36px 0; }

/* Document status callout. For a policy or legal page that is not final yet, so the
   reader knows before they act on it. Deliberately not the pullquote treatment: this
   is a status flag, not emphasis. */
.doc-note {
  background: var(--mist);
  border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 0 0 44px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
.doc-note strong { color: var(--heading); }
.prose img { border-radius: var(--r-lg); width: 100%; }
.prose figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-faint); }
.prose table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 15.5px; display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 700px) { .prose table { display: table; white-space: normal; } }
.prose, .prose p, .prose li, .prose a, .prose h2, .prose h3 { overflow-wrap: anywhere; word-break: break-word; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
.prose th { font-weight: 600; color: var(--heading); border-bottom: 2px solid var(--navy); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }
.embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 36px 0; border-radius: var(--r-lg); overflow: hidden; background: var(--mist); }
.embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.embed--audio { padding-bottom: 0; height: 180px; }

/* Post meta + index */
.post-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: var(--text-faint); margin-top: 20px; }
.post-meta .sep { color: var(--muted-soft); }
.post-list { border-top: 1px solid var(--rule); margin-top: 8px; }
.post-item { display: grid; grid-template-columns: 132px 1fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; text-decoration: none; }
.post-item:hover { background: var(--mist); }
.post-item:hover .post-item-title { color: var(--orange-action); }
.post-item-date { font-size: 13.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.post-item-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--heading);
  transition: color var(--dur-fast) var(--ease);
  text-wrap: balance;
}
.post-item-excerpt { margin-top: 8px; font-size: 15.5px; color: var(--text-soft); max-width: 74ch; }
@media (max-width: 700px) {
  .post-item { grid-template-columns: 1fr; gap: 8px; }
  .article { padding: 48px 0 72px; }
}

/* ─────────────────────────────
   PRODUCT SHOWCASE — alternating screenshot + copy rows
   ───────────────────────────── */
.showcase { display: grid; gap: 88px; margin-top: 64px; }
.showcase-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
.showcase-row:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.showcase-row:nth-child(even) .showcase-copy { order: 2; }
.showcase-row:nth-child(even) .caliber-shot { order: 1; }
.showcase-num { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-action); margin-bottom: 14px; }
.showcase-title { font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 1.16; letter-spacing: -0.02em; color: var(--heading); margin: 0 0 16px; max-width: 22ch; }
.showcase-title em { font-style: italic; color: inherit; font-weight: 400; }
.showcase-copy p { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--text-soft); margin: 0; max-width: 48ch; }
.showcase-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.showcase-meta span { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-faint); border: 1px solid var(--rule-strong); border-radius: 100px; padding: 6px 13px; }
@media (max-width: 900px) {
  .showcase { gap: 56px; }
  .showcase-row { grid-template-columns: 1fr; gap: 28px; }
  .showcase-row:nth-child(even) .showcase-copy { order: 1; }
  .showcase-row:nth-child(even) .caliber-shot { order: 2; }
}

/* ─────────────────────────────
   QUOTE GRID — client testimonials
   ───────────────────────────── */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.quote-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r-xl); padding: 32px 30px 28px; }
.quote-card blockquote { font-family: var(--font-serif); font-size: 19px; font-weight: 400; line-height: 1.44; letter-spacing: -0.01em; color: var(--heading); margin: 0 0 22px; flex: 1; }
.quote-card blockquote::before { content: '\201C'; display: block; font-size: 42px; line-height: 0.6; color: var(--orange); margin-bottom: 12px; }
.quote-attr { padding-top: 16px; border-top: 1px solid var(--rule-soft); font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); line-height: 1.5; }
.quote-attr strong { display: block; color: var(--heading); font-weight: 600; font-size: 13.5px; letter-spacing: 0.02em; text-transform: none; margin-bottom: 3px; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

/* Scope list — compact deliverable labels beneath case-study cards */
.scope-list { margin-top: 28px; grid-column: 1 / -1; }
.scope-list ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scope-list li { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-soft); border: 1px solid var(--rule-strong); border-radius: 100px; padding: 7px 14px; }

/* ─────────────────────────────
   CLIENT DIRECTORY — filterable engagement roster
   ───────────────────────────── */
.cdir-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 32px; }
.cfilter { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-soft); background: transparent; border: 1px solid var(--rule-strong); border-radius: 100px; padding: 9px 16px; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cfilter span { color: var(--text-faint); font-weight: 500; margin-left: 3px; }
.cfilter:hover { color: var(--navy); border-color: var(--navy); }
.cfilter:active { transform: scale(0.97); }
.cfilter.is-active { color: #fff; background: var(--navy); border-color: var(--navy); }
.cfilter.is-active span { color: rgba(255,255,255,0.6); }

.cdir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; border-top: 1px solid var(--rule); }
.cdir-item { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 74px; padding: 16px 4px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--navy); position: relative; transition: color var(--dur-fast) var(--ease); }
a.cdir-item:hover { color: var(--navy); }
a.cdir-item:hover .cdir-name, a.cdir-item:hover .cdir-meta { transform: translateX(6px); }
.cdir-name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; transition: transform var(--dur-fast) var(--ease); }
.cdir-meta { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--text-faint); transition: transform var(--dur-fast) var(--ease); }
.cdir-go { position: absolute; right: 4px; bottom: 18px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange-action); opacity: 0; transition: opacity var(--dur-fast) var(--ease); white-space: nowrap; pointer-events: none; }
a.cdir-item:hover .cdir-go { opacity: 1; }
div.cdir-item { color: var(--text-soft); }
div.cdir-item .cdir-name { color: var(--text); }

@media (max-width: 900px) { .cdir { grid-template-columns: 1fr 1fr; gap: 0 24px; } }
@media (max-width: 560px) { .cdir { grid-template-columns: 1fr; } }
@media (hover: none) {
  a.cdir-item:hover { padding-left: 4px; }
  /* No hover on touch: reveal the link affordance permanently instead. */
  a.cdir-item .cdir-go { opacity: 1; position: static; margin-top: 4px; }
}

/* Small phones: the display headline was breaking to 3-4 lines at <=375px,
   splitting parallel constructions across lines. Ease the size and leading. */
@media (max-width: 400px) {
  .hero .display { font-size: clamp(29px, 8.4vw, 34px); line-height: 1.12; }
}
@media (max-width: 560px) {
  .footer-meta a, .site-footer a { min-height: 24px; display: inline-flex; align-items: center; }
}

/* ─────────────────────────────
   ENGAGEMENT REGISTER — named work as an index, not a card wall.
   Sibling of .cdir; used where entries carry a description as well as meta.
   ───────────────────────────── */
.reg { border-top: 1px solid var(--rule); margin-top: 44px; }
.reg-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2.1fr) minmax(150px, 0.8fr);
  gap: 32px;
  align-items: baseline;
  padding: 26px 4px 24px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--navy);
  transition: padding-left var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
a.reg-row:hover { padding-left: 12px; background: rgba(11, 28, 48, 0.015); color: var(--navy); }
.reg-name { font-family: var(--font-serif); font-size: 23px; font-weight: 500; line-height: 1.18; letter-spacing: -0.015em; }
.reg-body { font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.reg-meta { font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em; color: var(--text-faint); text-align: right; }
@media (max-width: 900px) {
  .reg-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 4px 20px; }
  .reg-meta { text-align: left; }
}

/* ─────────────────────────────
   CONTACT FORM — for people who want to write rather than book a slot.
   ───────────────────────────── */
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 44px; max-width: 760px; }
.cform .f-wide { grid-column: 1 / -1; }
.cform label {
  display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.cform label .req { color: var(--orange-action); margin-left: 2px; }
.cform input, .cform textarea, .cform select {
  width: 100%; font-family: var(--font-sans); font-size: 15.5px; line-height: 1.5;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cform textarea { min-height: 132px; resize: vertical; }
.cform input:focus, .cform textarea:focus, .cform select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11, 28, 48, 0.08);
}
.cform input:focus-visible, .cform textarea:focus-visible { outline: none; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--text-faint); opacity: 1; }
/* honeypot — off-screen rather than display:none so bots still fill it */
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.cform-note { font-size: 13.5px; line-height: 1.6; color: var(--text-faint); max-width: 46ch; }
.cform-status { grid-column: 1 / -1; font-size: 15px; line-height: 1.6; margin: 0; }
.cform-status[hidden] { display: none !important; }
.cform-status.is-ok { color: var(--navy); font-weight: 500; }
.cform-status.is-err { color: #A8341C; }
@media (max-width: 720px) { .cform { grid-template-columns: 1fr; gap: 18px; } }

/* ─────────────────────────────
   ASSESSMENT MATRIX — a real data table for research output.
   Scrolls inside its own well so the page body never scrolls sideways.
   ───────────────────────────── */
.matrix-wrap { overflow-x: auto; margin-top: 40px; -webkit-overflow-scrolling: touch; }
.matrix { width: 100%; min-width: 1080px; border-collapse: collapse; font-family: var(--font-sans); }
/* Let the notes column keep its width instead of wrapping to five lines and
   dragging every row tall; the well scrolls sideways, the page does not. */
.matrix td:last-child, .matrix th:last-child { min-width: 340px; padding-right: 4px; }
.matrix caption { caption-side: bottom; padding-top: 20px; text-align: left; font-size: 13px; line-height: 1.6; color: var(--text-faint); }
.matrix th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 0 20px 12px 0; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.matrix td {
  padding: 15px 20px 15px 0; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; font-size: 14px; line-height: 1.55; color: var(--text-soft);
}
.matrix tbody tr { transition: background var(--dur-fast) var(--ease); }
.matrix tbody tr:hover { background: rgba(11, 28, 48, 0.02); }
.section--ink .matrix tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.m-tool { font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--heading); white-space: nowrap; }
.m-cat { white-space: nowrap; font-size: 13px; }
.m-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ordinal rating. The word carries the value; the pips only speed up scanning,
   so nothing is encoded in colour alone. */
.rate { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.rate-pips { display: inline-flex; gap: 3px; }
.rate-pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--rule); }
.rate-pips i.on { background: var(--orange); }
.rate-word { font-size: 13px; }
.rate--3 .rate-word { color: var(--heading); font-weight: 600; }

@media (max-width: 700px) {
  .matrix-wrap { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}
@media (hover: none) { a.reg-row:hover { padding-left: 4px; background: none; } }