/* 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); position: relative; overflow: hidden; }
.section--dark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -30%; right: -10%; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63,182,220,.16) 0%, rgba(63,182,220,.03) 45%, transparent 70%);
  animation: driftBlob 17s ease-in-out infinite alternate;
}
.section--dark::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  bottom: -26%; left: -10%; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,137,31,.11) 0%, transparent 65%);
  animation: driftBlob 21s ease-in-out infinite alternate-reverse;
}
.section--dark > .wrap { position: relative; z-index: 1; }
@keyframes driftBlob { from { transform: translate(0,0) scale(1); } to { transform: translate(-26px, 22px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .section--dark::before, .section--dark::after { animation: none; } }
.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); position: relative; overflow: hidden; }
.section--alt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,33,64,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.section--alt > .wrap { position: relative; z-index: 1; }
.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);
}
.hl { color: var(--cyan-deep); font-style: italic; }
.section--dark .hl, .cta-band .hl, .card--dark .hl { color: var(--cyan); }
.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); }
@media (max-width: 560px) {
  .grid { gap: var(--s-3); }
  .card { padding: var(--s-4); }
  .section-head { margin-bottom: var(--s-5); }
}
/* Phones: long icon-card grids (6-7 items, sometimes more) become a
   swipeable horizontal row instead of a single tall stack. Each card
   keeps its full padding and its full, unclamped copy - it just runs
   sideways, with the next card peeking in at the edge as the scroll
   affordance, which is a far better trade than either a 7-screen stack
   or a 2-column grid too narrow to hold a real sentence. Tablet and up
   are untouched (still a real grid, per the g-2/g-3 rules above). */
@media (max-width: 919px) {
  .grid.g-3, .grid.g-2 {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: var(--s-4); padding-bottom: var(--s-3);
    scrollbar-width: none;
  }
  .grid.g-3::-webkit-scrollbar, .grid.g-2::-webkit-scrollbar { display: none; height: 0; }
  .grid.g-3 > *, .grid.g-2 > * {
    flex: 0 0 80%; scroll-snap-align: start; grid-column: unset !important;
  }
  .grid.g-3 > :only-child, .grid.g-2 > :only-child { flex-basis: 100%; }
}
@media (min-width: 520px) and (max-width: 919px) {
  .grid.g-3 > *, .grid.g-2 > * { flex-basis: 58%; }
}
/* .ceiling items (the numbered systems/levers/points lists on the homepage,
   the Growth Ceiling Evaluation, every segment page, and the two HMV vertical
   pages) are sequential narrative content, not a gallery of peer cards. The
   carousel treatment above hid every item past the first behind a horizontal
   swipe with no visual cue it was even there. These read top to bottom instead. */
@media (max-width: 919px) {
  .grid.g-2:has(> .ceiling), .grid.g-3:has(> .ceiling) {
    display: grid; grid-template-columns: 1fr; overflow-x: visible;
    scroll-snap-type: none; gap: var(--s-6); padding-bottom: 0;
  }
  .grid.g-2:has(> .ceiling) > *, .grid.g-3:has(> .ceiling) > * {
    flex-basis: auto; scroll-snap-align: none;
  }
}
.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;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.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; }
}
/* A .btn outside .btn-row (e.g. the single CTA beside an HMV crosslink card) can
   sit in a flex parent narrower than its label. white-space:nowrap plus the
   overflow:hidden used for the hover sheen then clips the label instead of
   wrapping it, silently truncating what the button says. Below tablet width,
   let any button wrap onto a second line rather than lose words. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: 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: rgba(0,33,64,.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  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; transition: height .25s var(--ease); }
.site-header[data-scrolled="true"] .nav { height: 60px; }
/* 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; transform: scaleX(1);
}
.scorecard__row[data-low="true"] .scorecard__track::after { background: linear-gradient(90deg, #A8702A, var(--amber)); }
/* Bars grow in as the card scrolls into view, staggered per row via --d, instead
   of animating once at page load where a card lower on the page has often
   already finished (and shows static) by the time anyone scrolls to it. */
.js .scorecard__track::after {
  transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: var(--d, 0s);
}
.js .scorecard.is-inview .scorecard__track::after { transform: scaleX(1); }
.js .scorecard__track::after { animation: scorecard-failsafe 0s 2.6s forwards; }
@keyframes scorecard-failsafe { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .js .scorecard__track::after { transform: scaleX(1); transition: none; animation: none; }
}
.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); }

/* ---------- 7b. FOUNDER STRIP ---------- */
/* A real face early on the homepage, not just logos and diagnostics.
   Sits right under the hero proof strip so the very first thing after
   "here is the pitch" is "here is the person who does the work". */
.founder-strip { border-block: 1px solid var(--border); background: var(--surface); }
.founder-strip__inner {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding-block: var(--s-6);
}
.founder-strip__photo {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--accent-wash);
}
.founder-strip__body { flex: 1 1 320px; min-width: 0; }
.founder-strip__quote {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  color: var(--ink); letter-spacing: -.008em; line-height: 1.42; margin-bottom: .35rem;
}
.founder-strip__byline { font-size: var(--t-sm); color: var(--fg-muted); }
.founder-strip__byline strong { color: var(--ink); font-weight: 600; }
.founder-strip__byline a { color: var(--accent-text); }
@media (max-width: 560px) {
  .founder-strip__inner { padding-block: var(--s-5); gap: var(--s-4); }
  .founder-strip__photo { width: 56px; height: 56px; }
  .founder-strip__quote { font-size: 1rem; }
}

.photo-band-section { padding-block: var(--s-6); }
.photo-band {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md, 0 8px 28px rgba(0,33,64,.12));
  position: relative;
}
.photo-band img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; }
@media (max-width: 640px) { .photo-band img { aspect-ratio: 4 / 3; } }

/* ---------- 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; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
  display: flex; flex-direction: column;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--navy));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { border-color: var(--border-strong); box-shadow: 0 18px 34px -18px rgba(11,48,85,.4), var(--shadow-md); transform: translateY(-4px); }
a.card:hover::before, .card--link:hover::before { transform: scaleX(1); }
.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(-2px) scale(1.08) rotate(-4deg); }
.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. */
/* Reveal-on-scroll fades content in as the IntersectionObserver in site.js
   sees it. If that script is blocked, 404s, or throws before reaching this
   feature (ad blockers and locked-down healthcare IT networks do this), the
   content must not stay invisible forever: the keyframe below is pure CSS,
   has no JS dependency, and force-reveals anything still hidden 2.2s after
   paint. It is a no-op once .is-in has already set opacity to 1. */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  animation: reveal-failsafe 0s 2.2s forwards;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Cascading stagger so cards in a shared grid don't all snap in at once. */
.grid > [data-reveal]:nth-child(1) { transition-delay: 0s; }
.grid > [data-reveal]:nth-child(2) { transition-delay: .06s; }
.grid > [data-reveal]:nth-child(3) { transition-delay: .12s; }
.grid > [data-reveal]:nth-child(4) { transition-delay: .18s; }
.grid > [data-reveal]:nth-child(5) { transition-delay: .24s; }
.grid > [data-reveal]:nth-child(6) { transition-delay: .3s; }
.grid > [data-reveal]:nth-child(n+7) { transition-delay: .34s; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; animation: 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. The connecting line
   and node dots draw in as the sequence scrolls into view (JS adds .is-inview
   once via IntersectionObserver; the .js gate plus a CSS failsafe below keep
   everything visible with no JS or if the observer never fires). */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: flow; }
.flow__step { position: relative; padding-top: 2px; padding-left: 44px; }
.flow__node { position: absolute; top: 0; left: 0; display: block; line-height: 0; z-index: 1; }
.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); }
/* mobile / stacked: a vertical rail connects each dot to the next */
.flow__step::before { content: ""; position: absolute; top: 26px; left: 11px; width: 1px;
  bottom: calc(-1 * var(--s-6)); background: var(--border); transform-origin: top; }
.flow__step:last-child::before { display: none; }
.flow--dark .flow__step::before { background: rgba(255,255,255,.16); }
@media (min-width: 760px) {
  .flow { grid-template-columns: repeat(var(--flow-n), minmax(0, 1fr)); gap: var(--s-5); }
  .flow__step { padding-left: 0; padding-top: var(--s-5); }
  /* the rule between nodes is the argument: these are sequential */
  .flow__step::before { top: 11px; left: 30px; right: calc(-1 * var(--s-5)); bottom: auto;
    height: 1px; width: auto; transform-origin: left; }
}
.js .flow__step::before { transform: scaleY(0); transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }
@media (min-width: 760px) { .js .flow__step::before { transform: scaleX(0); } }
.js .flow.is-inview .flow__step::before { transform: none; }
.js .flow__node { opacity: 0; transform: scale(.4); transition: opacity .4s var(--ease), transform .4s var(--ease);
  transition-delay: calc(var(--i, 0) * .12s); }
.js .flow.is-inview .flow__node { opacity: 1; transform: scale(1); }
/* failsafe: if the observer never fires (JS error, element never intersects a
   configured root, etc.) force the sequence visible shortly after load rather
   than leave it permanently hidden. */
.js .flow__step::before, .js .flow__node { animation: flow-failsafe 0s 2.4s forwards; }
@keyframes flow-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .flow__step::before, .js .flow__node { opacity: 1; transform: none; transition: none; animation: none; }
}

/* 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; }

/* Growth-ceiling diagnosis chart: the plan/actual lines draw in and the
   supporting marks settle into place as the figure scrolls into view.
   pathLength="1" on each path/line lets a single 0->1 dash offset work
   regardless of the path's real geometry. Gated by .js + a failsafe, same
   pattern as [data-reveal] and the process-flow timeline above. */
.js .viz-ceiling__plan, .js .viz-ceiling__actual, .js .viz-ceiling__line {
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease);
}
.js .viz-ceiling__line { transition-duration: .6s; }
.js .viz-ceiling__dot, .js .viz-ceiling__mark, .js .viz-ceiling__gap {
  opacity: 0; transition: opacity .5s var(--ease); transform-origin: center;
}
.js .viz-ceiling__dot { transform: scale(.3); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js .viz--ceiling.is-inview .viz-ceiling__line { stroke-dashoffset: 0; transition-delay: 0s; }
.js .viz--ceiling.is-inview .viz-ceiling__plan { stroke-dashoffset: 0; transition-delay: .15s; }
.js .viz--ceiling.is-inview .viz-ceiling__actual { stroke-dashoffset: 0; transition-delay: .55s; }
.js .viz--ceiling.is-inview .viz-ceiling__dot { opacity: 1; transform: scale(1); transition-delay: 1.5s; }
.js .viz--ceiling.is-inview .viz-ceiling__mark { opacity: 1; transition-delay: 1.6s; }
.js .viz--ceiling.is-inview .viz-ceiling__gap { opacity: 1; transition-delay: 1.75s; }
.js .viz-ceiling__plan, .js .viz-ceiling__actual, .js .viz-ceiling__line,
.js .viz-ceiling__dot, .js .viz-ceiling__mark, .js .viz-ceiling__gap {
  animation: viz-ceiling-failsafe 0s 2.6s forwards;
}
@keyframes viz-ceiling-failsafe { to { opacity: 1; transform: none; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .viz-ceiling__plan, .js .viz-ceiling__actual, .js .viz-ceiling__line,
  .js .viz-ceiling__dot, .js .viz-ceiling__mark, .js .viz-ceiling__gap {
    opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; animation: none;
  }
}

/* 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); }

/* ============================================================
   HEALTHCARE MARKETING BY VELOCITY — endorsed division zone
   Scoped entirely to .hmv-zone so nothing here leaks into VRP's
   global system. HMV keeps its own approved navy/red/amber
   palette and Fraunces display type within its own pages; VRP's
   header, footer, and IBM Plex Sans body copy are unchanged.
   ============================================================ */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/fraunces-700.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/fraunces-800.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:900;font-display:swap;src:url("/assets/fonts/fraunces-900.woff2") format("woff2");}

.hmv-zone {
  --hmv-navy: #0B1F3A;
  --hmv-ink: #14213D;
  --hmv-steel: #3A4B63;
  --hmv-white: #F7F9FB;
  --hmv-platinum: #C9D0D8;
  --hmv-grey: #8895A7;
  --hmv-red: #D8342A;
  --hmv-amber: #E2A33B;
  --hmv-font-display: "Fraunces", var(--font-display);
}
.hmv-zone h1, .hmv-zone h2, .hmv-zone .head__title {
  font-family: var(--hmv-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hmv-zone .hmv-hl { color: var(--hmv-red); font-style: italic; }
.hmv-band { background: var(--hmv-navy); color: var(--hmv-white); border-radius: var(--radius-lg); padding: var(--s-8) var(--s-7); }
.hmv-band .hmv-hl { color: var(--hmv-amber); }
.hmv-band h1, .hmv-band h2, .hmv-band h3, .hmv-band p { color: inherit; }
.btn.hmv-btn { background: var(--hmv-red); border-color: var(--hmv-red); color: #fff; }
.btn.hmv-btn:hover { background: #b82a21; border-color: #b82a21; }
/* .hmv-band is dark (--hmv-navy), so a plain .btn--ghost (dark navy text) went
   invisible against it. Match the same treatment .section--dark gets. */
.hmv-band .btn--ghost { --btn-bg: transparent; --btn-fg: var(--hmv-white); --btn-bd: rgba(247,249,251,.34); }
.hmv-band .btn--ghost:hover { --btn-bg: rgba(247,249,251,.1); --btn-fg: var(--hmv-white); --btn-bd: rgba(247,249,251,.7); color: var(--hmv-white); }
.hmv-logo { display: inline-flex; align-items: center; }
.hmv-logo img { display: block; }
.hmv-eyebrow { color: var(--hmv-red); font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .12em; font-size: var(--t-xs); font-weight: 500; }
.hmv-band .hmv-eyebrow { color: var(--hmv-amber); }
.hmv-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5); margin-top: var(--s-6); }
.hmv-pillar { background: var(--hmv-white); border: 1px solid var(--hmv-platinum);
  border-radius: 8px; padding: var(--s-6); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.hmv-band .hmv-pillar { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.hmv-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 28px rgba(0,33,64,.12)); }
/* Pillar icons: same visible, interactive badge treatment as .card--icon, tuned per
   background so they read against both the light hub page and the dark home band. */
.hmv-pillar .card__icon { box-sizing: content-box; width: 20px; height: 20px; padding: 10px;
  margin-bottom: var(--s-4); border-radius: var(--radius);
  background: var(--hmv-navy); color: var(--hmv-white);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.hmv-pillar:hover .card__icon { background: var(--hmv-red); color: var(--hmv-white); transform: translateY(-2px) scale(1.08) rotate(-4deg); }
.hmv-band .hmv-pillar .card__icon { background: rgba(226,163,59,.16); color: var(--hmv-amber); }
.hmv-band .hmv-pillar:hover .card__icon { background: var(--hmv-amber); color: var(--hmv-navy); }
.hmv-pillar h3 { font-family: var(--hmv-font-display); margin: 0 0 .5rem; font-size: var(--t-xl); }
.hmv-pillar p { margin: 0; }
.hmv-dba { font-size: var(--t-sm); color: var(--slate-2); margin-top: var(--s-4); }
.hmv-band .hmv-dba { color: var(--on-dark-muted); }
.hmv-router { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5); margin-top: var(--s-6); }
.hmv-router a.card { border-top: 3px solid var(--hmv-red); }