/* Self hosted fonts. Removes a render blocking third party request and the
   cross origin round trip to fonts.gstatic.com, which no longer benefits from a
   shared browser cache since cache partitioning. 145KB total, latin subset. */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/libre-franklin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/libre-franklin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/libre-franklin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   VELOCITY REVENUE PARTNERS — DESIGN SYSTEM
   Concept: "Instrumentation"
   Velocity is speed with direction. Direction requires instruments.
   The visual language is measurement: baselines, rules, tick marks,
   tabular figures, scored matrices. Precise, quiet, technical.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
/* Palette is taken directly from VRP-Logo-Kit. #002140 is the wordmark navy,
   #4D6479 and #8C9BA9 are the two ascending bars, #3FB6DC is the arrow on the
   reversed lockup. Nothing here is invented. */
:root {
  /* Brand, straight from the logo files */
  --navy:           #002140;   /* wordmark + primary brand */
  --navy-deep:      #001729;   /* one step down, for large dark grounds */
  --navy-soft:      #0B3055;   /* hover / raised state on navy */
  --steel:          #4D6479;   /* mid bar */
  --steel-light:    #8C9BA9;   /* light bar */
  --cyan:           #3FB6DC;   /* arrow, reversed lockup accent */
  --cyan-deep:      #0E6E8E;   /* AA-safe cyan for text on light grounds */

  /* Ink & ground */
  --ink:            #0C1B2A;
  --ink-2:          #1E3247;
  --paper:          #FCFCFD;
  --paper-2:        #F2F5F8;
  --surface:        #FFFFFF;
  --rule:           #DFE5EC;
  --rule-strong:    #C4CEDA;
  --slate:          #24384F;   /* body copy on light grounds, near-ink */
  --slate-2:        #45596F;   /* secondary only: meta, captions, small labels */

  /* Semantic */
  --fg:             var(--ink);
  --fg-muted:       var(--slate);
  --fg-faint:       var(--slate-2);
  --bg:             var(--paper);
  --bg-alt:         var(--paper-2);
  --bg-card:        var(--surface);
  --accent:         var(--navy);        /* fills: buttons, bars, rules */
  --accent-text:    #00396B;            /* AA-safe interactive text */
  --accent-hover:   var(--navy-soft);
  --accent-wash:    #EBF1F7;
  --border:         var(--rule);
  --border-strong:  var(--rule-strong);
  --on-dark:        #F1F6FB;   /* body copy on dark grounds */
  --on-dark-muted:  #C3D3E2;   /* secondary on dark grounds */
  --amber:          #C8891F;
  --amber-text:     #8A5A10;

  /* Type — Libre Franklin carries the headline voice (Franklin Gothic lineage:
     editorial, corporate, trusted). IBM Plex Sans and Mono are a designed
     superfamily, engineered rather than trendy. */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Libre Franklin", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Scale — tightened. The old top end (80px) read startup; executive display
     copy sits nearer 48 to 56px and lets the content carry the page. */
  --t-xs:   0.8125rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.0625rem, 0.35vw + 0.98rem, 1.1875rem);
  --t-xl:   clamp(1.2rem, 0.7vw + 1.02rem, 1.4rem);
  --t-2xl:  clamp(1.45rem, 1.2vw + 1.1rem, 1.8rem);
  --t-3xl:  clamp(1.75rem, 1.9vw + 1.25rem, 2.4rem);
  --t-4xl:  clamp(2.05rem, 2.7vw + 1.35rem, 3rem);
  --t-5xl:  clamp(2.3rem, 3.4vw + 1.45rem, 3.5rem);

  /* Space — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.75rem;  --s-7: 2.25rem;  --s-8: 2.75rem;
  --s-9: 3.5rem;   --s-10: 4.25rem; --s-11: 5.25rem; --s-12: 6.5rem;

  /* Vertical rhythm — deliberately tighter than the first build. Sections now
     breathe without the large empty bands between them. */
  --section-y: clamp(2.75rem, 4.4vw, 4.5rem);
  --gutter: clamp(1.25rem, 3.5vw, 2.25rem);
  --max: 1180px;
  --measure: 68ch;

  --radius: 3px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(0,33,64,.05), 0 1px 3px rgba(0,33,64,.04);
  --shadow-md: 0 2px 4px rgba(0,33,64,.04), 0 8px 20px -8px rgba(0,33,64,.12);
  --shadow-lg: 0 4px 8px rgba(0,33,64,.05), 0 20px 40px -14px rgba(0,33,64,.18);

  --ease: cubic-bezier(.2,.6,.35,1);
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.014em;
  color: var(--navy);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
h2 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.019em; line-height: 1.14; }
h3 { font-size: var(--t-xl); letter-spacing: -0.012em; line-height: 1.25; }
h4 { font-size: var(--t-lg); letter-spacing: -0.008em; }
p  { margin: 0 0 var(--s-4); text-wrap: pretty; }
a  { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: break-word; }
a:hover { color: var(--accent-hover); }
strong { font-weight: 600; color: var(--navy); }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--fg-faint); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-8) 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--navy); color: #fff; }

/* Tabular figures everywhere numbers matter — the core brand detail */
.num, .stat__value, table, .metric, time, .toc__num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 3. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.wrap--wide { max-width: 1400px; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2rem, 3.2vw, 3rem); }
.section--dark { background: var(--navy); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark); }
.section--alt { background: var(--bg-alt); }
.section--bordered { border-top: 1px solid var(--border); }
.grid { display: grid; gap: var(--s-4); }
/* Grid/flex children must be allowed to shrink below content width, otherwise a
   min-width table blows the whole column out on mobile. */
.grid > *, .split > *, .article-layout > *, .stats > *, .net-grid > *,
.process > *, .case__body > *, .cta-band__inner > *, .footer-top > *,
.footer-nav > *, .hero__grid > * { min-width: 0; }
.prose, .toc { min-width: 0; }
@media (min-width: 700px)  { .g-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px)  { .g-3 { grid-template-columns: repeat(3, 1fr); } }
/* Four up needs real width to work. Below 1180px the cards drop to ~226px, which is
   too narrow for a card heading, so four items compose better as a 2x2. */
@media (min-width: 1180px) { .g-4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1179px) and (min-width: 560px) { .g-4 { grid-template-columns: repeat(2, 1fr); } }
.stack > * + * { margin-top: var(--s-4); }

/* ---------- 4. SECTION HEADERS ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--s-3);
  display: block; min-width: 0;
}
/* The rule leads the first line rather than occupying a line of its own, so a
   long eyebrow wraps as ordinary text. */
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 1px; margin-right: .65rem; margin-bottom: 2px;
  background: var(--accent);
}
.section--dark .eyebrow { color: var(--cyan); }
.section--dark .eyebrow::before { background: var(--cyan); }
.section-head { max-width: 760px; margin-bottom: var(--s-7); }
.section-head--sub { margin-bottom: var(--s-5); }
.section-head--sub h2 { font-size: var(--t-2xl); }
.svc-group + .svc-group { margin-top: var(--s-8); }
.section-head p { font-size: var(--t-lg); color: var(--ink-2); margin-bottom: 0; line-height: 1.58; }
.section--dark .section-head p { color: var(--on-dark); }

/* ---------- 5. BUTTONS ---------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans);
  font-family: var(--font-display);
  font-size: .975rem; font-weight: 600; letter-spacing: -.004em;
  padding: .72rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; transition: transform .18s var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--border-strong); }
.btn--ghost:hover { --btn-bg: var(--surface); --btn-fg: var(--navy); --btn-bd: var(--navy); color: var(--navy); }
.section--dark .btn, .cta-band .btn, .inline-cta .btn, .card--dark .btn {
  --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff;
}
.section--dark .btn:hover, .cta-band .btn:hover,
.inline-cta .btn:hover, .card--dark .btn:hover {
  --btn-bg: var(--accent-wash); --btn-fg: var(--navy); --btn-bd: var(--accent-wash); color: var(--navy);
}
.section--dark .btn--ghost, .cta-band .btn--ghost, .inline-cta .btn--ghost, .card--dark .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.34); }
.section--dark .btn--ghost:hover, .cta-band .btn--ghost:hover, .inline-cta .btn--ghost:hover, .card--dark .btn--ghost:hover { --btn-bg: rgba(255,255,255,.10); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); color:#fff; }
.btn--lg { padding: .85rem 1.65rem; font-size: 1.03rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* Stacked CTAs on small screens read as deliberate only when they share a width. */
@media (max-width: 519px) {
  .btn-row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .btn-row .btn { width: 100%; justify-content: center; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 560; font-size: var(--t-base); text-decoration: none;
  color: var(--accent-text);
}
.link-arrow::after { content: "→"; transition: transform .18s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 6. HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: 0 6px 24px -12px rgba(0,33,64,.55);
}
.nav { display: flex; align-items: center; gap: var(--s-5); height: 72px; }
/* Official lockup. Height is fixed and width follows the artwork's own ratio,
   so it can never stretch or distort. Clear space is held by the flex gap and
   the header's own padding, never less than the mark's height on any side. */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
/* An SVG in an <img> with width:auto resolves differently in WebKit than in
   Blink when it sits in a flex container. Declaring the ratio explicitly gives
   every engine a definite width to compute from, and flex:none stops the
   lockup being squeezed by a sibling. Ratios match the files' own attributes. */
.logo__full {
  height: 30px; width: auto; aspect-ratio: 368 / 63;
  display: block; flex: none; max-width: 100%;
}
.logo__mark {
  display: none; height: 30px; width: auto; aspect-ratio: 55 / 56; flex: none;
}
@media (max-width: 640px) { .logo__full { height: 26px; } }
@media (max-width: 339px) {
  .logo__full { display: none; }
  .logo__mark { display: block; height: 26px; }
}
.site-footer .logo__full { height: 36px; }
.mobile-menu .logo__full { height: 30px; }
.nav__menu { display: none; align-items: center; gap: .15rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
@media (min-width: 1060px) { .nav__menu { display: flex; } }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .7rem; border-radius: var(--radius);
  font-size: .975rem; font-weight: 500; color: var(--on-dark); text-decoration: none; letter-spacing: -.003em;
  transition: color .15s var(--ease), background .15s var(--ease);
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.10); }
.nav__link[aria-current="page"] { color: var(--cyan); }
.nav__cta { margin-left: var(--s-2); --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.nav__cta:hover { --btn-bg: var(--cyan); --btn-fg: var(--navy); --btn-bd: var(--cyan); color: var(--navy); }
@media (max-width: 599px) {
  .nav__cta { padding: .6rem .85rem; font-size: .875rem; }
  .logo__text { font-size: .95rem; }
  .logo__text span { font-size: .56rem; letter-spacing: .11em; }
  .nav { gap: var(--s-3); }
}
@media (max-width: 400px) { .nav__cta { padding: .55rem .75rem; font-size: .82rem; } }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
@media (min-width: 1060px) { .nav__actions { margin-left: 0; } }
.dropdown { position: relative; }
.dropdown__panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 480px; padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.dropdown[data-open="true"] .dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown__item { display: block; padding: .6rem .75rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: background .14s var(--ease); }
.dropdown__item:hover { background: var(--bg-alt); color: var(--ink); }
.dropdown__item strong { display: block; font-size: .93rem; font-weight: 580; margin-bottom: .1rem; }
.dropdown__item span { display: block; font-size: .8rem; color: var(--fg-muted); line-height: 1.45; }
.dropdown__item--feature { grid-column: 1 / -1; background: var(--accent-wash); margin-top: var(--s-2); }
.dropdown__item--feature:hover { background: #E1EAF3; }
.dropdown__item--feature strong { color: var(--accent-text); }

.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 9px;
  background: none; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius); cursor: pointer;
}
@media (min-width: 1060px) { .nav__toggle { display: none; } }
.nav__toggle span { display: block; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 72px 0 0; z-index: 79;
  background: var(--navy); overflow-y: auto;
  padding: var(--s-5) var(--gutter) var(--s-9);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  visibility: hidden;
}
.mobile-menu[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
@media (min-width: 1060px) { .mobile-menu { display: none; } }
.mobile-menu__group { border-bottom: 1px solid rgba(255,255,255,.12); padding-block: var(--s-3); }
.mobile-menu__label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s-2); }
.mobile-menu a:not(.btn) { display: block; padding: .58rem 0; font-size: 1.02rem; font-weight: 500; color: var(--on-dark); text-decoration: none; }
.mobile-menu a:not(.btn):hover { color: var(--cyan); }
.mobile-menu .btn { width: 100%; justify-content: center; margin-top: var(--s-5);
  --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; color: var(--btn-fg); }

/* ---------- 7. HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--surface); color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 4.6vw, 4rem) clamp(2rem, 3vw, 2.75rem);
}
.hero::before {
  /* Instrument grid, now drawn in navy at low opacity on a light ground. */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,33,64,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,33,64,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 75% at 78% 42%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 78% 42%, #000 18%, transparent 76%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; top: -34%; right: -8%;
  width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,182,220,.13) 0%, rgba(0,33,64,.04) 46%, transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.18fr .82fr; gap: var(--s-8); } }
.hero h1 { color: var(--navy); font-size: var(--t-5xl); max-width: 24ch; }
/* Inner pages step down a level. The homepage carries the largest statement on
   the site; every other hero is deliberately quieter. */
.hero--page { padding-block: clamp(2rem, 3.2vw, 2.75rem) clamp(1.75rem, 2.6vw, 2.25rem); }
.hero--page h1 { font-size: var(--t-4xl); max-width: 20ch; }
.hero--page .hero__lede { font-size: var(--t-md); max-width: 62ch; }
.hero__body { max-width: 780px; }
.hero__lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 56ch; margin-bottom: var(--s-5); line-height: 1.58; }
.hero__lede strong { color: var(--navy); font-weight: 600; }
.hero .eyebrow { color: var(--accent-text); }
.hero .eyebrow::before { background: var(--cyan-deep); }
.hero__note { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--s-4); line-height: 1.5; }
.hero__note svg { display: inline-block; vertical-align: -2px; margin-right: .4rem; color: var(--cyan-deep); }
.hero .breadcrumb { color: var(--fg-faint); }
.hero .breadcrumb a { color: var(--fg-muted); }
.hero .breadcrumb a:hover { color: var(--accent-text); }
.hero .breadcrumb li + li::before { color: var(--border-strong); }

/* Hero scorecard — the signature component */
.scorecard {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  backdrop-filter: blur(8px);
}
.scorecard__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.13); }
.scorecard__title { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.scorecard__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--on-dark-muted); white-space: nowrap; }
@media (max-width: 400px) { .scorecard__meta { display: none; } }
/* Proportional columns keep the bar visually tied to its label at every width,
   and the panel is capped so it never stretches into a banner on tablet. */
.scorecard { max-width: 520px; }
.scorecard__row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(90px,1fr) 30px; align-items: center; gap: var(--s-3); padding-block: .42rem; }
.scorecard__label { font-size: .875rem; color: var(--on-dark); }
.scorecard__track { height: 5px; background: rgba(255,255,255,.11); border-radius: 3px; overflow: hidden; position: relative; }
.scorecard__track::after {
  content: ""; position: absolute; inset-block: 0; left: 0;
  width: var(--w, 50%); border-radius: 3px;
  background: linear-gradient(90deg, var(--steel), var(--cyan));
  transform-origin: left; animation: barGrow .9s var(--ease) both; animation-delay: var(--d, 0s);
}
.scorecard__row[data-low="true"] .scorecard__track::after { background: linear-gradient(90deg, #A8702A, var(--amber)); }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scorecard__score { font-family: var(--font-mono); font-size: .82rem; color: var(--on-dark-muted); text-align: right; font-variant-numeric: tabular-nums; }
.scorecard__row[data-low="true"] .scorecard__score { color: var(--amber); }
.scorecard__foot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.13); font-size: var(--t-sm); color: var(--on-dark-muted); }
.scorecard__foot strong { color: #fff; font-weight: 560; }


/* Light-ground variant of the scorecard. The component is authored dark-first
   (it lives in the hero); these overrides make it legible on paper grounds. */
.section:not(.section--dark) .scorecard,
.hero .scorecard,
.section--alt .scorecard {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}
.section:not(.section--dark) .scorecard__head, .hero .scorecard__head,
.section:not(.section--dark) .scorecard__foot, .hero .scorecard__foot { border-color: var(--border); }
.section:not(.section--dark) .scorecard__title, .hero .scorecard__title { color: var(--accent-text); }
.section:not(.section--dark) .scorecard__meta, .hero .scorecard__meta,
.section:not(.section--dark) .scorecard__score, .hero .scorecard__score { color: var(--fg-faint); }
.section:not(.section--dark) .scorecard__label, .hero .scorecard__label { color: var(--ink); }
.section:not(.section--dark) .scorecard__track, .hero .scorecard__track { background: var(--bg-alt); }
.section:not(.section--dark) .scorecard__foot, .hero .scorecard__foot { color: var(--fg-muted); }
.section:not(.section--dark) .scorecard__foot strong, .hero .scorecard__foot strong { color: var(--ink); }
.section:not(.section--dark) .scorecard__row[data-low="true"] .scorecard__score, .hero .scorecard__row[data-low="true"] .scorecard__score { color: var(--amber-text); }

/* ---------- 8. PROOF STRIP ---------- */
.proof-strip { border-block: 1px solid var(--border); background: var(--surface); padding-block: var(--s-4); }
.proof-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-5); }
.proof-strip__label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; }
.proof-strip__item { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -.012em; color: var(--slate); opacity: .82; transition: opacity .2s var(--ease), color .2s var(--ease); }
.proof-strip__item:hover { opacity: 1; color: var(--ink); }
.proof-strip__rating { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--fg-muted); white-space: nowrap; }
.proof-strip__rating strong { color: var(--ink); }

/* ---------- 9. STATS ---------- */
.stats { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface); padding: var(--s-5); }
.section--dark .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.section--dark .stat__label, .section--dark .stat__note { color: var(--on-dark-muted); }
.section--dark .card__index, .section--dark .ceiling__num, .section--dark .section--dark .net-item__loc, .section--dark .timeline__years, .section--dark .case__block h3,
.section--dark .takeaways h2, .section--dark .tag { color: var(--cyan); }
.section--dark a:not(.btn):not(.card):not(.post-card) { color: var(--cyan); }
.section--dark .stat { background: var(--navy); }
.stat__value { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--ink); display: block; }
.section--dark .stat__value { color: #fff; }
.stat__label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-top: var(--s-2); display: block; }
.stat__note { font-size: var(--t-sm); color: var(--fg-muted); margin-top: var(--s-2); line-height: 1.5; }

/* ---------- 10. CARDS ---------- */
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5); position: relative;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  display: flex; flex-direction: column;
}
a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--fg-muted); font-size: var(--t-base); line-height: 1.58; margin-bottom: var(--s-4); }
.card > .link-arrow { margin-top: auto; }
.card__index { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--accent-text); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-3); display: block; }
/* ---- Iconography -------------------------------------------------------
   Line icons sit in a navy tile with a cyan glyph, the same pairing as the
   arrow in the logo. Every card gets a fixed visual anchor, which is what the
   text-only sections were missing. */
.card__icon { width: 20px; height: 20px; color: var(--navy); }
.card--icon .card__icon {
  box-sizing: content-box; width: 20px; height: 20px; padding: 10px;
  margin-bottom: var(--s-4); border-radius: var(--radius);
  background: var(--navy); color: var(--cyan);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
a.card--icon:hover .card__icon { background: var(--cyan); color: var(--navy); transform: translateY(-1px); }
.section--dark .card--icon .card__icon { background: rgba(63,182,220,.16); color: var(--cyan); }
.hero__badge {
  width: 22px; height: 22px; box-sizing: content-box; padding: 11px;
  border-radius: var(--radius); background: var(--navy); color: var(--cyan);
  margin-bottom: var(--s-4); display: block;
}
.card--dark { background: var(--ink); border-color: rgba(255,255,255,.1); color: var(--on-dark); }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--on-dark); }
/* A dark card can sit inside a light section, so its link colour must not
   depend on the section modifier. */
.card--dark .link-arrow, .card--dark a { color: var(--cyan); }
.card--dark .eyebrow { color: var(--cyan); }
.card--dark .eyebrow::before { background: var(--cyan); }

/* Ceiling cards — numbered diagnostic */
.ceiling {
  position: relative; padding-left: 62px; padding-block: var(--s-1);
  border-left: 0;
}
.ceiling__num {
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: 0;
  color: var(--cyan); background: var(--navy);
  margin: 0;
}
.section--dark .ceiling__num { background: rgba(63,182,220,.14); }
.ceiling h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.ceiling p { line-height: 1.55; }
.ceiling p { font-size: var(--t-base); color: var(--fg-muted); margin: 0; }

/* ---------- 11. CHECKLIST ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.checks li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; font-size: var(--t-base); line-height: 1.6; color: var(--ink); }
.checks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .22rem; border-radius: 50%;
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none' stroke='%2300396B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.4l3 3 6-6.8'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section--dark .checks li::before { background-color: rgba(63,182,220,.18); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none' stroke='%233FB6DC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.4l3 3 6-6.8'/%3E%3C/svg%3E"); }
.section--dark .checks li { color: var(--on-dark); }
.section--dark .note, .section--dark .lede { color: var(--on-dark-muted); }
.section--dark .card--dark .link-arrow, .section--dark a.link-arrow { color: var(--cyan); }
@media (min-width: 760px) { .checks--2 { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-6); } }

/* ---------- 12. PROCESS ---------- */
.process { display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 860px) { .process--4 { grid-template-columns: repeat(4, 1fr); } .process--3 { grid-template-columns: repeat(3,1fr);} }
.process__step { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--border); }
.process__step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: -.9rem; left: 0;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em;
  color: var(--accent-text); background: var(--bg); padding-right: .6rem;
}
.section--alt .process__step::before { background: var(--bg-alt); }
.section--dark .process__step { border-top-color: rgba(255,255,255,.16); }
.section--dark .process__step::before { color: var(--cyan); background: var(--navy); }
.process__step h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.process__step p { font-size: var(--t-base); color: var(--fg-muted); margin: 0; }
.section--dark .process__step p { color: var(--on-dark-muted); }
.section--dark .process__step h3 { color: #fff; }

/* ---------- 13. TABLES ---------- */
.table-scroll { overflow-x: auto; margin-bottom: var(--s-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-base); min-width: 520px; }
thead th {
  text-align: left; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-faint);
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-alt); }
tbody td:first-child { font-weight: 560; color: var(--ink); }

/* ---------- 14. TESTIMONIALS ---------- */
.quote { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--cyan-deep); border-radius: var(--radius-lg); padding: var(--s-5); display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 var(--s-4); font-size: var(--t-base); line-height: 1.6; color: var(--ink); }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: .75rem; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); display: grid; place-items: center; font-weight: 640; font-size: .95rem; flex: none; font-family: var(--font-display); }
.quote__name { font-weight: 580; font-size: .93rem; color: var(--ink); display: block; line-height: 1.3; }
.quote__role { font-size: var(--t-sm); color: var(--fg-muted); }

/* ---------- 15. FORMS ---------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 560; color: var(--ink); }
.field label .opt { font-weight: 440; color: var(--fg-faint); }
.field input, .field select, .field textarea {
  width: 100%; padding: .72rem .9rem;
  font-family: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23465B72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.3rem; }
.form__note { font-size: var(--t-sm); color: var(--fg-muted); margin: 0; }
@media (min-width: 640px) { .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } }
.form .btn { justify-content: center; }

/* ---------- 16. ARTICLE ---------- */
.article-head { padding-block: var(--s-7) var(--s-5); border-bottom: 1px solid var(--border); }
.article-head h1 { font-size: var(--t-4xl); max-width: 20ch; }
.article-head .lede { font-size: var(--t-lg); color: var(--ink-2); max-width: var(--measure); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; font-size: var(--t-sm); color: var(--fg-faint); margin-bottom: var(--s-4); list-style: none; padding: 0; }
.breadcrumb li { margin: 0; display: flex; gap: .45rem; align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }

.article-layout { display: grid; gap: var(--s-7); padding-block: var(--s-7) var(--s-9); }
@media (min-width: 1040px) { .article-layout { grid-template-columns: 216px minmax(0,1fr); gap: var(--s-8); align-items: start; } }
.toc { position: sticky; top: 96px; font-size: var(--t-sm); display: none; }
@media (min-width: 1040px) { .toc { display: block; } }
.toc__title { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: var(--s-3); }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a { display: block; padding: .38rem 0 .38rem .85rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--fg-muted); text-decoration: none; line-height: 1.4; transition: color .15s var(--ease), border-color .15s var(--ease); }
.toc a:hover { color: var(--ink); }
.toc a[data-active="true"] { color: var(--accent-text); border-left-color: var(--accent); font-weight: 540; }

/* One measure governs the whole article column, so the takeaways card, the
   prose, the inline CTA and the footer all share the same left and right edge. */
.article-body { max-width: var(--measure); }
.prose { max-width: none; font-size: 1.15rem; line-height: 1.72; }
.prose > h2 { font-size: var(--t-2xl); margin-top: var(--s-8); margin-bottom: var(--s-4); scroll-margin-top: 100px; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { font-size: var(--t-lg); margin-top: var(--s-6); margin-bottom: var(--s-3); scroll-margin-top: 100px; }
.prose p { margin-bottom: var(--s-4); }
.prose ul, .prose ol { margin-bottom: var(--s-4); padding-left: 1.3rem; }
.prose li { margin-bottom: .55rem; padding-left: .2rem; }
.prose a { font-weight: 520; overflow-wrap: anywhere; }
.prose .table-scroll { max-width: none; }
.prose table { font-size: var(--t-base); }
.prose > *:last-child { margin-bottom: 0; }

.takeaways { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-5); margin-bottom: var(--s-7); }
.takeaways h2 { font-family: var(--font-mono); font-size: var(--t-xs) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--s-4) !important; font-weight: 500; }
.takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.takeaways li { display: flex; gap: .7rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin: 0; padding: 0; }
.takeaways li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: .62rem; }

.author-line { display: flex; align-items: center; gap: .85rem; margin-top: var(--s-5); }
.author-line .avatar { width: 44px; height: 44px; }
.author-line__name { font-weight: 580; font-size: .95rem; color: var(--ink); display: block; }
.author-line__meta { font-size: var(--t-sm); color: var(--fg-muted); }

.inline-cta {
  background: var(--navy); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6); margin-block: var(--s-7);
  display: grid; gap: var(--s-4); align-items: center;
}
@media (min-width: 680px) { .inline-cta { grid-template-columns: 1fr auto; gap: var(--s-6); } }
.inline-cta .eyebrow { color: var(--cyan); margin-bottom: var(--s-2); }
.inline-cta h2, .inline-cta h3 { color: #fff; font-size: var(--t-lg); letter-spacing: -.015em; margin-bottom: .3rem; }
.inline-cta p { color: var(--on-dark); margin: 0; font-size: var(--t-base); }

.article-foot { border-top: 1px solid var(--border); padding-top: var(--s-6); margin-top: var(--s-8); }

.progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--steel), var(--cyan)); width: 0; z-index: 90; transition: width .1s linear; }

/* ---------- 17. ARTICLE CARDS / LIBRARY ---------- */
.post-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .18s var(--ease); }
.post-card:hover { background: var(--bg-alt); box-shadow: -12px 0 0 var(--bg-alt), 12px 0 0 var(--bg-alt); }
.post-card h3 { font-size: var(--t-xl); margin: 0; transition: color .16s var(--ease); }
.post-card:hover h3 { color: var(--accent-text); }
.post-card p { color: var(--fg-muted); margin: 0; font-size: var(--t-base); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--fg-faint); text-transform: uppercase; }
.tag { display: inline-block; padding: .18rem .5rem; border-radius: 2px; background: var(--accent-wash); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; font-weight: 500; }
.tag--muted { background: var(--bg-alt); color: var(--fg-muted); }

.library-controls { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
@media (min-width: 760px) { .library-controls { grid-template-columns: minmax(0,340px) 1fr; align-items: center; } }
.search-field { position: relative; }
.search-field input { padding-left: 2.5rem; }
.search-field svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--fg-faint); pointer-events: none; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter {
  padding: .38rem .8rem; border: 1px solid var(--border-strong); border-radius: 100px;
  background: var(--surface); font-family: var(--font-sans); font-size: .84rem; font-weight: 520; color: var(--fg-muted);
  cursor: pointer; transition: all .15s var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.empty-state { padding: var(--s-9) 0; text-align: center; color: var(--fg-muted); }

/* ---------- 18. FAQ ---------- */
.faq { border-top: 1px solid var(--border); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 580; letter-spacing: -.015em;
  color: var(--ink); transition: color .16s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: .28rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23465B72' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--s-4); max-width: var(--measure); color: var(--fg-muted); line-height: 1.65; font-size: var(--t-base); }
.faq__answer > *:last-child { margin-bottom: 0; }

/* ---------- 19. NETWORK / LOGO GRIDS ---------- */
.net-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 620px) { .net-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .net-grid { grid-template-columns: repeat(3, 1fr); } }
.net-item { background: var(--surface); padding: var(--s-4) var(--s-5); }
.net-item h3 { font-size: var(--t-base); font-weight: 600; margin-bottom: .25rem; letter-spacing: -.01em; }
.net-item__loc { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: var(--s-3); }
.net-item p { font-size: 1rem; color: var(--fg-muted); margin: 0; line-height: 1.6; }

/* Press cards: a grid of equal cards reads complete, where the previous
   two-column list left a 190px label column starving the headline. */
.press-card { border-left: 2px solid var(--cyan-deep); }
.press-card__src {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s-3);
}
.press-card__src span { color: var(--fg-faint); }
.press-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.press-card p { margin-bottom: 0; }

/* ---------- 20. CASE STUDY ---------- */
.case { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.case__head { padding: var(--s-5); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.case__head h3 { margin-bottom: var(--s-2); }
.case__body { padding: var(--s-5) var(--s-6); display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .case__body { grid-template-columns: 1fr 1fr; } }
.case__block h3 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s-3); font-weight: 500; }
.case__block p { font-size: var(--t-base); color: var(--fg-muted); margin: 0; max-width: 70ch; line-height: 1.6; }
.case__metrics { display: grid; gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
@media (min-width: 620px) { .case__metrics { grid-template-columns: repeat(3, 1fr); } }
.case--wide .case__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.case--wide .case__head h3 { margin-bottom: 0; width: 100%; }
.case--wide .case__metric { padding: var(--s-5) var(--s-6); }
.case__metric { background: var(--surface); padding: var(--s-4) var(--s-5); }

/* ---------- 21. TIMELINE ---------- */
.timeline { border-left: 1px solid var(--border); padding-left: var(--s-5); display: grid; gap: var(--s-6); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) - 4.5px); top: .55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.timeline__years { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .11em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: var(--s-2); }
.timeline__item h3 { font-size: var(--t-lg); margin-bottom: .25rem; }
.timeline__org { font-size: .93rem; color: var(--fg-muted); font-weight: 540; display: block; margin-bottom: var(--s-3); }
.timeline__item p { font-size: var(--t-base); color: var(--fg-muted); margin: 0; }

/* ---------- 22. FOOTER ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-muted); padding-block: var(--s-8) var(--s-5); font-size: 1rem; }

/* Row one: identity on the left, a real contact card on the right. Separating
   contact details from navigation was the main structural fix here. */
.footer-top { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); }
@media (min-width: 880px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-9); align-items: start; }
}
.footer-brand .logo { margin-bottom: var(--s-4); }
/* Clear space so the arrow never reads as crowding the copy beneath it. */
.site-footer .logo__full { height: 34px; margin-bottom: var(--s-1); }
.footer-brand p { max-width: 42ch; font-size: 1rem; line-height: 1.6; margin-bottom: var(--s-4); color: var(--on-dark); }
.footer-proof { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: .45rem; font-size: .95rem; }
.footer-proof li { display: flex; align-items: flex-start; gap: .55rem; margin: 0; color: var(--on-dark-muted); }
.footer-proof li::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: .2rem; border-radius: 50%;
  background: rgba(63,182,220,.16) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 12 12' fill='none' stroke='%233FB6DC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.4l3 3 6-6.8'/%3E%3C/svg%3E") center/9px no-repeat;
}

.footer-contact-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: var(--s-5); width: 100%;
}
.footer-contact-card h2 {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: #fff; letter-spacing: -.012em; margin-bottom: var(--s-4);
  text-transform: none;
}
.footer-contact-card__line {
  display: flex; align-items: flex-start; gap: .6rem;
  padding-block: .38rem; color: var(--on-dark); text-decoration: none;
  font-style: normal; line-height: 1.5;
  transition: color .15s var(--ease);
}
.footer-contact-card__line svg { flex: none; margin-top: .18rem; color: var(--cyan); }
a.footer-contact-card__line:hover { color: var(--cyan); }
.footer-contact-card .btn {
  margin-top: var(--s-4); width: 100%; justify-content: center;
  --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff;
}
.footer-contact-card .btn:hover { --btn-bg: var(--cyan); --btn-fg: var(--navy); --btn-bd: var(--cyan); color: var(--navy); }

/* Row two: navigation, three equal columns, divided from row one by a rule. */
.footer-nav {
  display: grid; gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 620px) { .footer-nav { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.footer-col h2 {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan); font-weight: 500; margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-col li { margin: 0; }
.footer-col a { color: var(--on-dark-muted); text-decoration: none; transition: color .15s var(--ease); }
.footer-col a:hover { color: #fff; }

.footer-bottom { padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); justify-content: space-between; align-items: center; font-size: .92rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-bottom a { color: var(--on-dark-muted); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.social { display: flex; gap: .55rem; }
.social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); color: var(--on-dark-muted); transition: all .16s var(--ease); }
.social a:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(63,182,220,.08); }

/* ---------- 23. CTA BAND ---------- */
.cta-band { background: var(--navy); color: var(--on-dark); position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000, transparent 72%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band__inner { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: var(--s-8); } }
.cta-band h2 { color: #fff; margin-bottom: var(--s-3); max-width: 22ch; }
.cta-band p { color: var(--on-dark); margin: 0; max-width: 52ch; font-size: var(--t-lg); }
.cta-band__phone { display: block; margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--on-dark-muted); text-decoration: none; }
.cta-band__phone:hover { color: var(--cyan); }

/* ---------- 23b. READING MEASURE GUARDS ---------- */
/* Any body copy that sits in a full-width column needs a measure cap, or the
   line length runs past 100 characters and readability collapses on wide
   screens. 66 to 75 characters is the target across the site. */
.timeline__item p,
.note,
.callout p,
.process__step p,
.card p,
.faq__answer p,
.net-item p,
.stat__note,
.quote blockquote,
.hero--page .hero__lede { max-width: 72ch; }
.card p, .process__step p, .net-item p { max-width: 60ch; }
.note { max-width: 80ch; }
.checks li { max-width: 74ch; }
/* Prose inside a split column still needs a cap at the tablet width, where the
   split collapses to one column and the text would otherwise span the page. */
.split > div > p { max-width: 72ch; }

/* ---------- 24. MISC ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--s-5); }
.pill { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; padding: .3rem .7rem; border: 1px solid var(--border-strong); border-radius: 100px; color: var(--fg-muted); }
.section--dark .pill { border-color: rgba(255,255,255,.2); color: var(--on-dark-muted); }
.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: var(--measure); }
.note { font-size: var(--t-sm); color: var(--fg-faint); }
.skip-link { position: fixed; left: 0; top: 0; z-index: 200; padding: .75rem 1.25rem; background: var(--ink); color: #fff; text-decoration: none; border-radius: 0 0 var(--radius) 0; transform: translateY(-120%); transition: transform .15s var(--ease); }
.skip-link:focus { transform: translateY(0); color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.callout { border: 1px solid var(--border); border-left: 2px solid var(--amber); background: var(--surface); border-radius: var(--radius-lg); padding: var(--s-5); margin-bottom: var(--s-5); }
.callout p:last-child { margin-bottom: 0; }
.split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .split--sticky > :first-child { position: sticky; top: 104px; } }

/* Reveal on scroll */
/* Reveal is opt-in and JS-gated: without JS, or with reduced motion, everything is
   visible from the start. Content must never depend on a script to be readable. */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- 25. PRINT ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .inline-cta, .toc, .progress, .mobile-menu { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .prose { max-width: none; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

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

.stars { display: inline-flex; gap: 2px; margin-bottom: var(--s-3); }
.stars svg { width: 15px; height: 15px; fill: #F5A623; flex: none; }
.stars--lg { margin-bottom: var(--s-2); }
.stars--lg svg { width: 19px; height: 19px; }

.quote--review figcaption { gap: .7rem; }
.avatar--img { border-radius: 50%; object-fit: cover; width: 38px; height: 38px; flex: none; }
.quote__src { margin-left: auto; display: grid; place-items: center; flex: none; opacity: .85; min-width: 24px; min-height: 24px; }
.quote__src svg { display: block; }

.reviews-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); align-items: start; }
.rating-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
}
.rating-card__score { margin: 0; font-size: var(--t-lg); color: var(--ink); font-family: var(--font-display); }
.rating-card__score strong { font-size: var(--t-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.rating-card__meta { margin: .35rem 0 var(--s-4); font-size: var(--t-sm); color: var(--fg-muted); }

@media (min-width: 880px) {
  .reviews-head { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-8); }
}

/* Map embed: responsive, no layout shift, never wider than its column */
.map-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Shown only when the embed itself does not paint: ad blockers, privacy extensions
   and some corporate networks block the Maps iframe, and an empty bordered box is a
   worse answer than the address. The iframe sits above this and covers it when it loads. */
.map-embed__fallback { position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; gap: .75rem; padding: var(--s-5); background: var(--surface-2); }
.map-embed__fallback p { margin: 0; color: var(--ink); }
@media (min-width: 880px) { .map-embed { aspect-ratio: 4 / 3; } }

/* Four reviews, two up. Long reviews are clamped visually only: the full text
   stays in the HTML so crawlers and AI engines still read every word. */
.reviews-grid { grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 760px) { .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quote--review blockquote.is-long {
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 760px) { .quote--review blockquote.is-long { -webkit-line-clamp: 7; } }

.quote__more { font-size: var(--t-sm); font-weight: 560; color: var(--accent-text); text-decoration: none; margin: -.5rem 0 var(--s-4); align-self: flex-start; border-bottom: 1px solid currentColor; min-height: 26px; display: inline-flex; align-items: center; }
.quote__more:hover { color: var(--cyan-deep); }

/* Contextual link from an article to the audience page it serves. */
.seg-link { border-left: 2px solid var(--cyan-deep); background: var(--surface-2);
  padding: var(--s-4) var(--s-5); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 0 0 var(--s-5); }
.seg-link .eyebrow { margin-bottom: .4rem; }
.seg-link p:last-child { margin: 0; font-size: var(--t-base); color: var(--ink); }

/* Honeypot: hidden from people, visible to bots that fill every field. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note.is-ok { color: var(--accent-text); font-weight: 560; }

/* Stat figures live in containers of very different widths (full band vs a narrow
   split column). A container query steps the figure down rather than letting a
   long value like $420M+ clip, which is what happened when the self hosted static
   weights replaced the variable font. */
.stats { container-type: inline-size; }
@container (max-width: 640px) { .stat__value { font-size: var(--t-2xl); letter-spacing: -.028em; } }
@container (max-width: 420px) { .stat__value { font-size: var(--t-xl); letter-spacing: -.02em; } }

/* Tap targets. WCAG 2.2 SC 2.5.8 asks for 24x24 CSS px on discrete controls.
   Links inline in a sentence are exempt, so this targets navigational links only:
   breadcrumbs, footer navigation, menu items and tel/mailto links. */
@media (max-width: 900px) {
  .breadcrumb a, .breadcrumb li,
  .footer-nav a,
  .nav__drop a,
  a[href^="tel:"]:not(.footer-contact-card__line),
  a[href^="mailto:"]:not(.footer-contact-card__line) {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }
  .footer-contact-card__line { min-height: 24px; }
  /* External client link on a case study is a discrete control, not inline prose. */
  .note a[href^="http"] { min-height: 24px; display: inline-flex; align-items: center; max-width: 100%; }
  .footer-nav a { padding-block: 2px; }
  .footer-bottom a, .author-line a { min-height: 26px; display: inline-flex; align-items: center; }
}

/* Long email and URL strings must be allowed to break rather than clip on a 360px screen. */
a[href^="mailto:"], .footer-contact-card__line, .inquiry-direct a { overflow-wrap: anywhere; }

/* About: portrait beside the bio. Photo leads on desktop, sits above the text on
   mobile, and reserves its box at every width so nothing shifts as it loads. */
.bio { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); align-items: start; }
.bio__portrait { margin: 0; }
.bio__portrait img { width: 200px; height: auto; aspect-ratio: 1; border-radius: var(--radius-lg);
  object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }
.bio__portrait figcaption { margin-top: .85rem; font-family: var(--font-display); font-weight: 620;
  font-size: var(--t-base); color: var(--ink); line-height: 1.3; }
.bio__portrait figcaption span { display: block; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .09em; text-transform: uppercase; color: var(--cyan-deep); font-weight: 500; margin-top: .3rem; }
.bio__text { max-width: 68ch; min-width: 0; }
@media (min-width: 560px) { .bio__portrait img { width: 260px; } }
@media (min-width: 900px) {
  .bio { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); }
  .bio__portrait img { width: 300px; }
}

/* Byline portrait. Slightly larger than the initial avatar it replaces. */
.author-line .avatar--img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }

/* Network and partner names link to the organization's own site. */
.net-item__link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline;
  gap: .4rem; min-height: 26px; border-bottom: 1px solid transparent;
  transition: border-color .15s var(--ease), color .15s var(--ease); }
.net-item__link:hover, .net-item__link:focus-visible { color: var(--accent-text); border-bottom-color: currentColor; }
.net-item__ext { flex: none; opacity: .55; align-self: center; }
.net-item__link:hover .net-item__ext { opacity: 1; }

/* ---------------------------------------------------------------- Leadership */
.leadership { display: grid; gap: var(--s-7); margin-bottom: var(--s-7); }
.lead { display: grid; gap: var(--s-5); align-items: start; }
.lead__portrait { display: block; width: min(230px, 68%); flex: none; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .18s var(--ease), transform .18s var(--ease); }
.lead__portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
a.lead__portrait:hover, a.lead__portrait:focus-visible { border-color: var(--cyan-deep); transform: translateY(-2px); }
.lead__initial { display: grid; place-items: center; aspect-ratio: 1; font-family: var(--font-display);
  font-size: var(--t-3xl); font-weight: 660; color: var(--accent-text); background: var(--accent-wash); }
.lead__body { min-width: 0; max-width: 68ch; }
.lead__body h3 { font-size: var(--t-xl); margin-bottom: .2rem; }
.lead__role { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .09em;
  text-transform: uppercase; color: var(--cyan-deep); font-weight: 500; margin-bottom: var(--s-4); }
.lead__owns { border-left: 2px solid var(--border); padding-left: var(--s-4);
  font-size: var(--t-sm); color: var(--slate-2); margin-top: var(--s-4); }
.lead__li { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s-4);
  font-size: var(--t-sm); font-weight: 560; color: var(--accent-text); text-decoration: none;
  min-height: 26px; border-bottom: 1px solid transparent; }
.lead__li:hover, .lead__li:focus-visible { border-bottom-color: currentColor; }
.lead__li svg { flex: none; }
@media (min-width: 560px) {
  .lead { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); }
  .lead__portrait { width: 220px; }
}
@media (min-width: 900px) {
  .lead { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-8); }
  .lead__portrait { width: 260px; }
}

/* Overview link at the head of each nav dropdown, so the hub page is reachable
   from the global navigation rather than only from the footer. */
.dropdown__item--all { border-bottom: 1px solid var(--border); margin-bottom: .35rem; padding-bottom: .7rem; }
.dropdown__item--all strong { color: var(--accent-text); }

/* Press headline links out to the article when we have a verified URL. */
.press-card__link { color: inherit; text-decoration: none; display: inline;
  border-bottom: 1px solid transparent; transition: border-color .15s var(--ease), color .15s var(--ease); }
.press-card__link:hover, .press-card__link:focus-visible { color: var(--accent-text); border-bottom-color: currentColor; }
.press-card__ext { display: inline-block; vertical-align: baseline; margin-left: .35rem; opacity: .55; flex: none; }
.press-card__link:hover .press-card__ext { opacity: 1; }

/* Expert attribution: routes a page to the person accountable, and on to contact. */
.expert { display: flex; gap: var(--s-4); align-items: flex-start; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 2px solid var(--cyan-deep);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--s-5); margin-top: var(--s-6); }
.expert__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.expert__label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .09em;
  text-transform: uppercase; color: var(--cyan-deep); font-weight: 500; margin-bottom: .35rem; }
.expert__name { font-family: var(--font-display); font-weight: 620; color: var(--ink); margin-bottom: .3rem; }
.expert__name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); min-height: 26px; display: inline-flex; align-items: center; }
.expert__name a:hover { border-bottom-color: currentColor; }
.expert__line { font-size: var(--t-sm); color: var(--slate-2); margin-bottom: var(--s-3); }
.lead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-4); }
.lead__actions .lead__li { margin-top: 0; }
.btn--sm { padding: .55rem 1rem; font-size: var(--t-sm); }

/* ---------------------------------------------------------------- Final typography polish */
/* Headings balance their lines instead of stranding a single word on the last one.
   Browsers without support simply keep the previous behaviour. */
h1, h2, h3, h4, .lead__body h3, .rating-card__score, blockquote { text-wrap: balance; }
/* Paragraphs avoid a one word last line without rebalancing the whole block. */
p, li, figcaption, .lede, .hero__lede { text-wrap: pretty; }

/* A lone card left on the final row of a grid reads as an accident. Letting it
   span the row turns the remainder into a deliberate feature card. The card keeps
   its own vertical structure; only its internal layout widens, so nothing is
   squeezed into a narrow column. */
.grid.g-2 > :last-child:nth-child(odd),
.grid.g-3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }

@media (min-width: 900px) {
  /* With a checklist: two columns, pitch on the left, detail on the right. */
  .grid > .card--icon:last-child:nth-child(odd):has(.checks),
  .grid.g-3 > .card--icon:last-child:nth-child(3n + 1):has(.checks) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-content: start;
  }
  .grid > .card--icon:last-child:nth-child(odd):has(.checks) > .card__icon,
  .grid.g-3 > .card--icon:last-child:nth-child(3n + 1):has(.checks) > .card__icon { grid-column: 1; }
  .grid > .card--icon:last-child:nth-child(odd):has(.checks) > .checks,
  .grid.g-3 > .card--icon:last-child:nth-child(3n + 1):has(.checks) > .checks {
    grid-column: 2; grid-row: 1 / 6; margin-top: 0;
  }
  /* Without a checklist: stay vertical, but cap the measure so text does not
     stretch the full width of the grid. */
  .grid > .card--icon:last-child:nth-child(odd):not(:has(.checks)) > p,
  .grid.g-3 > .card--icon:last-child:nth-child(3n + 1):not(:has(.checks)) > p { max-width: 62ch; }
}

/* The network grid has an odd member count, so the same rule keeps its last row honest. */
@media (min-width: 640px) {
  .net-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Card headings step down with the card. A four up grid gives each card ~265px,
   which is too narrow for the three up heading size and strands the last word. */
.grid.g-4 .card h3, .grid.g-4 .press-card h3 { font-size: var(--t-lg); }

/* ================================================================ EDITORIAL VISUALS
   Inline SVG and CSS only. No libraries, no image requests. Every mark states
   something the copy also says, so nothing here is decoration. */

.viz { margin: 0; }
.viz svg { width: 100%; height: auto; display: block; }
.viz__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; font-weight: 500; }
.viz__axis  { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; }
.viz figcaption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--slate-2);
  border-left: 2px solid var(--cyan-deep); padding-left: var(--s-4); max-width: 62ch; }
.viz--dark figcaption { color: var(--on-dark-muted); border-left-color: var(--cyan); }

/* Process flow: a connected run, not four detached blocks. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: flow; }
.flow__step { position: relative; padding-top: var(--s-5); }
.flow__node { position: absolute; top: 0; left: 0; display: block; line-height: 0; }
.flow__num { display: block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em;
  color: var(--cyan-deep); margin: var(--s-3) 0 .35rem; font-variant-numeric: tabular-nums; }
.flow__step h4 { font-size: var(--t-base); margin-bottom: .35rem; }
.flow__step p { font-size: var(--t-sm); color: var(--slate-2); margin: 0; }
.flow--dark .flow__num { color: var(--cyan); }
.flow--dark .flow__step p { color: var(--on-dark-muted); }
@media (min-width: 760px) {
  .flow { grid-template-columns: repeat(var(--flow-n), minmax(0, 1fr)); gap: var(--s-5); }
  /* the rule between nodes is the argument: these are sequential */
  .flow__step::before { content: ""; position: absolute; top: 11px; left: 30px; right: calc(-1 * var(--s-5));
    height: 1px; background: var(--border); }
  .flow__step:last-child::before { display: none; }
  .flow--dark .flow__step::before { background: rgba(255,255,255,.16); }
}

/* Metric strip: the figures a segment is actually run on. */
.mstrip { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 620px) { .mstrip { grid-template-columns: repeat(3, 1fr); } }
.mstrip__item { background: var(--surface); padding: var(--s-5); display: flex; flex-direction: column; gap: .3rem; }
.mstrip__label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .11em;
  text-transform: uppercase; color: var(--cyan-deep); }
.mstrip__value { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 700;
  color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.mstrip__sub { font-size: var(--t-sm); color: var(--slate-2); }
.mstrip__note { grid-column: 1 / -1; background: var(--surface); margin: 0; padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm); color: var(--slate-2); }
.mstrip--dark .mstrip__item, .mstrip--dark .mstrip__note { background: var(--navy); }
.mstrip--dark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.mstrip--dark .mstrip__value { color: #fff; }
.mstrip--dark .mstrip__label { color: var(--cyan); }
.mstrip--dark .mstrip__sub, .mstrip--dark .mstrip__note { color: var(--on-dark-muted); }

/* Drop-off: bars, because a tapering funnel shape distorts the area it encodes. */
.fnl { display: grid; gap: var(--s-3); }
.fnl__row { display: grid; grid-template-columns: minmax(0, 12rem) 1fr auto; gap: var(--s-4); align-items: center; }
.fnl__label { font-size: var(--t-sm); color: var(--ink); }
.fnl__track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.fnl__bar { display: block; height: 100%; background: var(--cyan-deep); border-radius: 999px; }
.fnl__val { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--slate-2);
  font-variant-numeric: tabular-nums; }
.fnl--dark .fnl__label { color: var(--on-dark); }
.fnl--dark .fnl__track { background: rgba(255,255,255,.12); }
.fnl--dark .fnl__bar { background: var(--cyan); }
.fnl--dark .fnl__val { color: var(--on-dark-muted); }
@media (max-width: 560px) {
  .fnl__row { grid-template-columns: 1fr auto; }
  .fnl__track { grid-column: 1 / -1; }
}

/* The lead visual in a section sits inside the reading column, not full bleed. */
.viz-lede { max-width: 860px; margin: var(--s-6) 0 0; }

/* Category glyph in the library. Drawn, not a thumbnail: it scans at a glance,
   costs no request, and cannot look like clip art. */
.card__index { display: inline-flex; align-items: center; gap: .45rem; }
.cat-mark { display: inline-flex; color: var(--cyan-deep); flex: none; }
.cat-mark svg { display: block; }
.section--dark .cat-mark, .card--dark .cat-mark { color: var(--cyan); }