/* Avestix Wealth. Tokens are verbatim from the Claude Design export (Brand Colours.pdf palette), cut to those used. */

/* Fonts (WDES-02, pairing A "Quiet Library"): Newsreader (headings, sub-headings, numerals) and Source Sans 3 (body and UI), self-hosted, latin only, OFL (fonts/OFL-*.txt).
   Sources: @fontsource/newsreader 5.3.0 and @fontsource/source-sans-3 5.3.1. Every weight and style used has its own file, so nothing is synthesised.
   The Fallback faces re-scale Georgia and Arial to the web fonts' metrics, so the swap moves nothing (CLS). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/newsreader-300-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader-400-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-400-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-600-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Fallback';
  font-style: normal;
  font-weight: 300;
  src: local('Georgia'), local('Georgia-Regular');
  size-adjust: 93.7%;
  ascent-override: 78.4%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 87.4%;
  ascent-override: 84.1%;
  descent-override: 30.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Sans 3 Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 94.7%;
  ascent-override: 108.1%;
  descent-override: 42.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Sans 3 Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 90.1%;
  ascent-override: 113.7%;
  descent-override: 44.4%;
  line-gap-override: 0%;
}

:root {
  --navy-900: #0D1229;
  --gold-500: #A89276;
  --off-white: #F2F2F2;
  --white: #FFFFFF;

  --navy-800: #161D3D;
  --gold-700: #7E6B52;
  --gold-600: #93805F;
  --gold-300: #D2C5B4;
  --gold-200: #E8E1D6;

  --surface-page: var(--off-white);
  --text-body: var(--navy-900);
  --text-heading: var(--navy-900);
  --text-on-inverse: var(--off-white);
  --text-on-accent: var(--navy-900);
  --line-on-inverse-strong: rgba(242,242,242,.6);
  --surface-scrim-control: rgba(13,18,41,.55);
  --scrim-hero: linear-gradient(180deg, rgba(13,18,41,.09) 0%, rgba(13,18,41,.264) 36%);
  --scrim-hero-text: linear-gradient(90deg, rgba(13,18,41,.48) 0%, rgba(13,18,41,.48) 45%, rgba(13,18,41,.3) 70%, rgba(13,18,41,0) 100%);
  --scrim-hero-text-narrow: linear-gradient(90deg, rgba(13,18,41,.48) 0%, rgba(13,18,41,.48) 70%, rgba(13,18,41,.33) 100%);
  --scrim-svc: linear-gradient(180deg, rgba(13,18,41,.2), rgba(22,29,61,.94));
  --fade-consent: linear-gradient(rgba(13,18,41,0), var(--navy-900));
  --action-primary: var(--navy-900);
  --action-primary-hover: var(--navy-800);
  --action-accent: var(--gold-500);
  --action-accent-hover: var(--gold-600);
  --focus-ring: var(--navy-900);
  --link: var(--text-eyebrow-on-light);
  --link-hover: var(--navy-900);
  --header-inner-h: 72px;
  --phone-bar-h: 51px;
  --size-logo: 24px;
  --header-row-gap: 8px;
  --surface-mega-hover: rgba(242,242,242,.06);
  --ring-backing-hero: rgba(13,18,41,.72);
  --text-shadow-hero: 0 1px 12px rgba(13,18,41,.55), 0 0 2px rgba(13,18,41,.35);
  --shadow-mega: 0 24px 48px rgba(13,18,41,.35);
  --header-rule: 1px;
  --header-h: calc(var(--header-inner-h) + var(--header-rule));
  /* Cookie banner height at >= 1024px; the tiers under "While the banner is unanswered" override it. */
  --consent-clear: 92px;
  /* Narrowest acceptable card in every card grid (owner rule 2026-10-23; 240px picked in the sizer 2026-10-26). Changing it means changing the container thresholds under "Card grids" and "Team" too (derived from it: k cards fit at k x min + (k - 1) x 24px). */
  --card-min: 240px;
  --team-card-min: var(--card-min);
  /* Narrowest acceptable Services panel. Changing it means changing the two container thresholds under "Services" too. */
  --svc-panel-min: 320px;
  --line-panel: rgba(168,146,118,.28);
  --line-panel-tex: rgba(168,146,118,.3);
  --measure: 56ch;
  --size-h1-hero: 72px;
  --size-h1-narrow: clamp(var(--size-stat), 11vw, var(--size-h1-hero));
  --size-h1-page: 56px;
  --size-h1-page-narrow: 38px;
  --shadow-scroll: rgba(13,18,41,.08);
  --target-min: 44px;

  /* Page-level colours the export wrote as raw values in inline styles */
  --text-eyebrow-on-light: #756349;
  --text-on-inverse-muted: #c9ccd6;
  --text-note: #5b6070;
  --text-muted: var(--text-note);
  --line: var(--line-card);
  --surface-placeholder: #e4e5e9;
  --line-card: rgba(13,18,41,.1);
  --line-on-inverse: rgba(242,242,242,.12);

  --font-sans: "Source Sans 3","Source Sans 3 Fallback",Arial,sans-serif;
  --font-display: "Newsreader","Newsreader Fallback",Georgia,serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 600;

  --size-h2: 30px;
  --size-stat: 36px;
  --size-h3: 22px;
  --size-body: 16px;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  --tracking-display: -.005em;
  --tracking-eyebrow: .22em;
  --tracking-label: .08em;
  --tracking-kind: .04em;

  --type-h1: var(--weight-light) 40px/var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-bold) var(--size-h3)/var(--leading-snug) var(--font-sans);
  --type-body: var(--weight-regular) var(--size-body)/var(--leading-normal) var(--font-sans);

  --radius-sm: 2px;
  --control-h-sm: 32px;
  --control-h-lg: 48px;

  --duration-fast: 160ms;
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --transition-control: color var(--duration-fast) var(--ease-in-out),background-color var(--duration-fast) var(--ease-in-out),border-color var(--duration-fast) var(--ease-in-out),box-shadow var(--duration-fast) var(--ease-in-out);
  --press-scale: .99;
}

/* Element defaults (export "minimal element defaults" block) */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { margin: 0; color: var(--text-heading); text-wrap: balance; }
h1 { font: var(--type-h1); letter-spacing: var(--tracking-display); }
h2 { font: var(--weight-light) var(--size-h2)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-display); }
h3 { font: var(--type-h3); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--gold-300); transition: var(--transition-control); }
a:hover { color: var(--navy-900); border-bottom-color: var(--navy-900); }
main p a:not(.btn), main li a:not(.btn) { border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--gold-200); color: var(--navy-900); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition-duration: 0s !important; } }

/* Page-level (export page style block) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
* { box-sizing: border-box; }

/* Buttons (replaces the design-system Button component) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transition-control);
}
.btn--sm { height: var(--control-h-sm); padding: 0 16px; font-size: 11px; }
.btn--lg { height: var(--control-h-lg); padding: 0 32px; font-size: 13px; }
a.btn--accent { background: var(--action-accent); color: var(--text-on-accent); border-color: var(--action-accent); }
a.btn--primary, button.btn--primary { background: var(--action-primary); color: var(--text-on-inverse); border-color: var(--action-primary); }
a.btn--inverse-outline { background: transparent; color: var(--off-white); border-color: var(--line-on-inverse-strong); }
a.btn--accent:hover, a.btn--accent:focus-visible { background: var(--action-accent-hover); border-color: var(--action-accent-hover); color: var(--text-on-accent); }
a.btn--primary:hover, a.btn--primary:focus-visible, button.btn--primary:hover, button.btn--primary:focus-visible { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--text-on-inverse); }
a.btn--inverse-outline:hover, a.btn--inverse-outline:focus-visible { border-color: var(--gold-500); color: var(--gold-300); }
/* The lighter overlay (owner 2026-11-03) leaves a bright photo behind the hero buttons, so a focused one gets a navy band that holds the gold ring at 3:1 without darkening the photo at rest (a11y.spec 3.2). */
.hero a.btn:focus-visible { box-shadow: 0 0 0 6px var(--ring-backing-hero); }
.btn:active { transform: scale(var(--press-scale)); }
@media (max-width: 480px) {
  .btn--wrap { white-space: normal; height: auto; min-height: var(--control-h-lg); padding-top: 12px; padding-bottom: 12px; max-width: 100%; text-align: center; overflow-wrap: anywhere; }
}

/* Accessibility (WLTH-03) */
.site-header, .hero, .band, .stats, .site-footer, .process, .with-aside > .svc { --focus-ring: var(--gold-500); }
/* --header-h is the height of whatever is stuck at the top, so focus and anchors land clear of it in both Tab directions (WLTH-28 AC 28.2, WCAG 2.4.11). */
html { scroll-padding-top: var(--header-h); }
#main:focus { outline: none; }
a.skip-link { position: absolute; z-index: 20; left: 8px; top: -100px; padding: 10px 16px; background: var(--off-white); color: var(--navy-900); border: 1px solid var(--navy-900); font-size: 14px; font-weight: var(--weight-bold); }
a.skip-link:focus { top: 8px; outline: 2px solid var(--off-white); outline-offset: 2px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--navy-900); border-bottom: var(--header-rule) solid var(--line); }
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: var(--header-inner-h); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--header-row-gap) 16px; }
a.logo { text-decoration: none; border-bottom: none; color: var(--off-white); font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--size-logo); line-height: var(--leading-normal); letter-spacing: var(--tracking-eyebrow); display: flex; gap: 10px; align-items: baseline; }
a.logo:hover { color: var(--off-white); }
.hero a.btn--inverse-outline { background: var(--surface-scrim-control); }
.footer__brand .logo__sub { letter-spacing: inherit; }
.logo__sub { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-eyebrow); color: var(--gold-500); }
.nav { display: flex; gap: 12px 14px; flex-wrap: wrap; }
a.nav__link { color: var(--off-white); text-decoration: none; border-bottom: none; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
a.nav__link:hover, a.nav__link:focus-visible { color: var(--link-hover); }
/* Phone bar (WLTH-28, owner ruling R-1, reopened by WDES-14 / UX-07): one 52px line with the logo, a "Menu" toggle (index only) and "Request introduction" (44px targets).
   The toggle is a native <details> placed before the nav, so it opens without JavaScript; the nav is the one link list and becomes the panel, out of flow, so the bar and --header-h do not change.
   Sticky only on screens taller than 500px (FR-9); on short screens it is static, as before. */
.menu { display: none; }
@media (max-width: 1023.98px) {
  :root { --header-h: calc(var(--phone-bar-h) + var(--header-rule)); }
  .site-header__inner { position: relative; flex-wrap: nowrap; min-height: 0; height: var(--phone-bar-h); padding: 0 16px; gap: 8px; }
  .site-header a.logo { flex-direction: column; align-items: flex-start; justify-content: center; min-height: var(--target-min); margin-right: auto; gap: 3px; font-size: 18px; line-height: 1; }
  .site-header a.btn { height: var(--target-min); padding: 0 12px; }
  .menu { display: block; flex: none; }
  .menu summary { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: var(--target-min); height: var(--target-min); padding: 0 12px; list-style: none; cursor: pointer; color: var(--off-white); border: 1px solid var(--line-on-inverse-strong); border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary::before { content: "Menu"; }
  .menu summary:hover, .menu[open] summary { border-color: var(--gold-500); color: var(--gold-300); }
  .nav { display: none; }
  .menu[open] ~ .nav { position: absolute; z-index: 10; top: calc(100% + var(--header-rule)); left: 0; right: 0; display: flex; flex-direction: column; gap: 0; max-height: calc(100dvh - var(--phone-bar-h) - var(--header-rule)); overflow-y: auto; overscroll-behavior: contain; background: var(--navy-900); border-bottom: 1px solid var(--gold-500); }
  a.nav__link { display: flex; align-items: center; min-height: var(--target-min); padding: 0 16px; border-top: 1px solid var(--line); font-size: 13px; }
}
/* WMPS-01 chrome: the two phone groups (Services, Who we serve) are plain <details> inside the panel and are not shown on desktop. */
.nav__groups { display: none; }
@media (max-width: 1023.98px) {
  .nav__groups { display: block; }
  .nav__group summary { display: flex; align-items: center; min-height: var(--target-min); padding: 0 16px; border-top: 1px solid var(--line); color: var(--off-white); font-size: 13px; letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; }
  .nav__group-list { margin: 0; padding: 0; list-style: none; }
  .nav__group-list a.nav__link { padding-left: 32px; }
  [data-viewport="desktop"] { display: none; }
}
@media (min-width: 1024px) {
  [data-viewport="phone"] { display: none; }
}
@media (max-width: 399.98px) {
  .site-header a.btn { white-space: normal; padding: 0 10px; line-height: 1.2; text-align: center; }
}
@media (max-width: 1023.98px) and (max-height: 500px) {
  :root { --header-h: 0px; }
  .site-header { position: static; }
}
@media (forced-colors: active) {
  .menu summary, .menu[open] ~ .nav { border-color: ButtonText; }
}

/* Shared section pieces */
.section { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.band { background: var(--navy-900); }
/* Dark scope: the one place dark-surface tokens are set; every container whose background is --navy-900. Descendants inherit (WLTH-18, WLTH-21, WCAG 1.4.3). */
.band, .with-aside > .svc, .hero, .stats, .process, .site-header, .site-footer, .consent { color: var(--text-body); --text-heading: var(--off-white); --text-body: var(--text-on-inverse); --text-muted: var(--text-on-inverse-muted); --link: var(--gold-300); --link-hover: var(--gold-300); --line: var(--line-on-inverse); }
.svc__desc, .stat__label, .process__text, .frontier__text, .site-footer { color: var(--text-muted); }
.band__inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.section__inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; }
.eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-eyebrow-on-light); }
.eyebrow--gold { color: var(--gold-500); }
.eyebrow--tight { margin-bottom: 12px; }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1.15; letter-spacing: var(--tracking-display); }
.h2--gap { margin-bottom: 48px; max-width: 760px; }
/* Long running paragraphs stop at one measure (WDES-14 AC 14.6); they keep their column and left edge. */
p.contact__notice, p.frontier__text, p.founder__p, p.lede, p.cfo__note { max-inline-size: var(--measure); }
.h2--40 { font-size: 40px; }
.lede { margin: 0; font-size: 18px; line-height: 1.7; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 48px; align-items: end; margin-bottom: 48px; }
.split--cio { margin-bottom: 56px; }
.grid { display: grid; gap: 24px; }
.grid--team { display: flex; flex-wrap: wrap; justify-content: center; container-type: inline-size; }
/* Card grids (owner rule 2026-10-23; --card-min 240px picked in the sizer 2026-10-26). One minimum for every grid: k cards fit when the container is
   >= k x --card-min + (k - 1) x 24px gap, so 2 fit from 504, 3 from 768, 4 from 1032 (the content box tops out at 1152, five never fit). Rows = ceil(N / fit), per row =
   ceil(N / rows), every card the same width, the last row centred; written for the counts in use (1-4, 6-9; 3, 4, 6, 7 and 9 today). Seven cards with three fitting
   are 3 + 2 + 2 (a 1px margin either side of cards 4 and 5 makes the row too full for card 6, so rows 2 and 3 hold two each, centred), never 3 + 3 + 1. Change the token and the thresholds below together; layout.spec derives the expected rows from the token. */
.grid--cards { display: flex; flex-wrap: wrap; justify-content: center; container-type: inline-size; }
.grid--cards > * {
  --cols: 1;
  flex: 0 0 calc((100cqw - (var(--cols) - 1) * 24px) / var(--cols));
  min-width: min(100%, var(--card-min));
}
@container (min-width: 504px) { .grid--cards:has(> :nth-child(2)) > * { --cols: 2; } }
@container (min-width: 768px) {
  .grid--cards:has(> :nth-child(3)) > * { --cols: 3; }
  .grid--cards:has(> :nth-child(4):last-child) > * { --cols: 2; }
}
@container (min-width: 768px) and (max-width: 1031.98px) {
  .grid--cards:has(> :nth-child(7):last-child) > :nth-child(4) { margin-left: 1px; }
  .grid--cards:has(> :nth-child(7):last-child) > :nth-child(5) { margin-right: 1px; }
}
@container (min-width: 1032px) {
  .grid--cards:is(:has(> :nth-child(4):last-child), :has(> :nth-child(7):last-child), :has(> :nth-child(8):last-child)) > * { --cols: 4; }
}
.card { background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.card--tier { padding: 32px; }
.card--tier:hover { border-color: var(--gold-500); }
.card--cio { padding: 28px; }

/* Hero */
.hero { position: relative; width: 100%; aspect-ratio: 3/2; max-height: min(100svh, 900px); display: flex; align-items: flex-end; background: var(--navy-900); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* The text scrim is a left-to-right fade on the full-bleed scrim, not a box behind the text column, so no edge reads as a shape (WMPS-41, UI-3 P1-1). Below 1024px the text spans the photo, so the fade ends later. */
.hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero-text-narrow), var(--scrim-hero); }
@media (min-width: 1024px) { .hero__scrim { background: var(--scrim-hero-text), var(--scrim-hero); } }
/* From 1024px the hero is as tall as the first screen, so its bottom edge is one header height below the fold: the bottom padding adds that height, which lifts the CTAs clear of the 71px consent banner on a first visit without touching the banner (WMPS-22, UX F-4). The photo is not cropped further (a11y.spec 4.1). */
.hero__content { position: relative; max-width: 1200px; margin: 0 auto; padding: 120px 24px 80px; width: 100%; }
/* Hero overlay reduced by 40% (owner ruling 2026-11-03; before that half-strength, owner D-F7): white text over the photo's brightest patch fell to about 2.6:1, so a soft left-to-right gradient (--scrim-hero-text, layered into .hero__scrim, WMPS-41) darkens the text side and fades to clear over the photo (a11y.spec 3.3). */
@media (min-width: 1024px) { .hero__content { padding-bottom: calc(var(--header-h) + 80px); } }
.hero__eyebrow { margin: 0 0 20px; text-shadow: var(--text-shadow-hero); font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-500); }
/* 800px keeps the three-line wrap at 1440; at 860px Newsreader wraps to two lines and the eyebrow lands on the photo's bright patch (a11y.spec 3.3). The 72px size and this max-width are owned by the hero recomposition (WDES-04); WDES-14 adds only the narrow size below. */
.hero__title { margin: 0; text-shadow: var(--text-shadow-hero); font-family: var(--font-display); font-weight: 300; font-size: var(--size-h1-hero); line-height: 1.05; letter-spacing: var(--tracking-display); max-width: 800px; text-wrap: balance; }
.hero__lede { margin: 28px 0 0; text-shadow: var(--text-shadow-hero); max-width: 620px; font-size: 18px; line-height: 1.7; }
.hero__actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-height: 699.98px) { .hero { max-height: none; } }
/* 72px wraps to 6-7 lines with a one-word last line below 473px, and still leaves "portfolio." alone at 473-477 (both engines) and 482-566 (WebKit).
   So up to 899px the size follows the width: 36px (the stat size) at the floor, 11vw, 72px at the cap. A fixed size cannot pass in WebKit: balance leaves "portfolio."
   alone above 36px. a11y.spec samples every pixel 320-899. The section headings drop to --size-h2 at <= 472 so the h1 stays the largest heading. */
@media (max-width: 899px) { .hero__title { font-size: var(--size-h1-narrow); } }
@media (max-width: 472px) { .h2, .h2--40 { font-size: var(--size-h2); } }
/* Page h1s that wear the .h2 look (contact, 404, About) take the interior h1 scale, so the h1 is the largest heading on its page (WMPS-22, UI P2-3). */
h1.contact__title, h1.founder__title { font-size: var(--size-h1-page); }
@media (max-width: 767px) { h1.contact__title, h1.founder__title { font-size: var(--size-h1-page-narrow); } }
@media (max-width: 639.98px) {
  .hero { display: block; aspect-ratio: auto; max-height: none; min-height: 0; }
  .hero__img { position: static; display: block; height: auto; aspect-ratio: 3/2; }
  .hero__scrim { display: none; }
  .hero__content { padding: 32px 24px 56px; }
}

/* Stats band */
.stats { background: var(--navy-900); border-top: 1px solid var(--line); }
.stats__grid { max-width: 1200px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.stat__value, .tier__range, .cio-card__num, .diff-item__num { font-family: var(--font-display); font-weight: var(--weight-light); font-variant-numeric: lining-nums tabular-nums; }
.stat__value { font-size: var(--size-stat); }
.stat__label { margin-top: 8px; font-size: 14px; line-height: 1.5; }

/* Who we serve */
.tier__range { font-size: 14px; color: var(--text-eyebrow-on-light); }
.tier__title { margin: 16px 0 12px; font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 28px; letter-spacing: var(--tracking-display); }
.tier__text { margin: 0; line-height: 1.6; }

/* Services: Editorial Panels (WDES-03). One flexible grid sized by --svc-panel-min (owner D-3, from the sizer): k panels fit when the container is
   >= k x min + (k - 1) x 24px gap, rows are split as evenly as possible and an incomplete row is centred. Four panels can only be 1, 2 or 4 per row
   (3 + 1 is never balanced), so there is no three-across rule. At 320px: 2 fit from 664 (page 712), 4 fit from 1352, which the 1152 content box never
   reaches. Change the token and the two thresholds below together; a11y.spec derives the expected rows from the token and fails on drift. */
.services__grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; container-type: inline-size;
  counter-reset: svc;
}
.svc {
  --cols: 1;
  counter-increment: svc;
  flex: 0 0 calc((100cqw - (var(--cols) - 1) * 24px) / var(--cols));
  min-width: min(100%, var(--svc-panel-min));
  display: flex; flex-direction: column;
  background: var(--navy-800); border: 1px solid var(--line-panel);
}
@container (min-width: 664px) { .svc { --cols: 2; } }
@container (min-width: 1352px) { .svc { --cols: 4; } }
.svc__media { position: relative; aspect-ratio: 2/1; overflow: hidden; background: var(--navy-900); }
.svc__tex { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--line-panel-tex) 0 1px, transparent 1px 14px); }
.svc__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.svc__media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-svc); }
/* The numeral is generated content so it adds no copy to the page (copy-parity); the span is aria-hidden because the h3 carries the meaning. */
.svc__num::before { content: counter(svc, decimal-leading-zero); }
.svc__num { position: absolute; z-index: 1; left: 24px; bottom: 12px; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 44px; line-height: 1; color: var(--gold-300); }
.svc__body { padding: 24px; }
.svc__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 28px; letter-spacing: var(--tracking-display); }
.svc__list { list-style: none; margin: 0; padding: 0; }
.svc__item { padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.55; }
.svc__item b, .svc__desc { display: block; }
.svc__item b { font-weight: var(--weight-bold); }
.svc__desc { font-size: 15px; }
@media (forced-colors: active) { .svc { border-color: CanvasText; } }
@media print {
  #services { background: var(--white); --text-heading: var(--navy-900); --text-body: var(--navy-900); --text-muted: var(--text-note); --line: var(--line-card); }
  #services .eyebrow--gold { color: var(--text-eyebrow-on-light); }
  #services .svc { background: var(--white); border-color: var(--navy-900); break-inside: avoid; }
  .svc__media { display: none; }
}

/* Family CFO */
.cfo { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cfo-card { border-top: 2px solid var(--gold-500); padding-top: 16px; }
.cfo-card__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 26px; letter-spacing: var(--tracking-display); }
.cfo-card__text { margin: 0; line-height: 1.6; }
.cfo__note { margin: 40px 0 0; line-height: 1.6; }

/* CIO */
.cio-card__num { font-size: 13px; color: var(--text-eyebrow-on-light); }
.cio-card__title { margin: 12px 0 10px; font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 26px; letter-spacing: var(--tracking-display); }
.cio-card__text { margin: 0; line-height: 1.6; }
.process { margin-top: 56px; background: var(--navy-900); border-radius: 4px; padding: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.process__key { font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-500); }
.process__text { margin-top: 10px; line-height: 1.55; }
.principles { margin-top: 24px; }
.principle { border-top: 2px solid var(--gold-500); padding-top: 14px; }
.principle__key { font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 22px; letter-spacing: var(--tracking-display); }
.principle__text { margin-top: 6px; line-height: 1.55; }

/* Team */
.card > img.team-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; background: var(--surface-placeholder); }
/* Balanced team rows (owner, 2026-10-23). k cards fit when the container is >= k x --team-card-min + (k - 1) x 24px gap; the rows are
   then the fewest that fit, split as evenly as possible, every card the same width and the last row centred. 3 + 2 is the base; five
   across only when five fit; never 4 + 1. Thresholds below are that formula at --team-card-min 240px (owner, from the sizer): 2 fit 504, 3 fit 768, 4 fit 1032,
   5 fit 1296 (the content box tops out at 1152, so five across needs a smaller minimum). Change them with the token.
   Written for the four, five and six cards the page can have (AC 17.7, WMPS-99). Flex rows share no tracks, so bios line up while names take one line and roles are padded to a fixed height of two lines at every width (WMPS-68; WMPS-41 first set three on narrow cards). */
.grid--team > .card {
  --cols: 1;
  flex: 0 0 calc((100cqw - (var(--cols) - 1) * 24px) / var(--cols));
  /* The floor itself: if a threshold drifts from the token, a card holds the minimum and the row wraps visibly instead of shrinking. */
  min-width: min(100%, var(--team-card-min));
  display: flex; flex-direction: column;
}
@container (min-width: 504px) { .grid--team > .card { --cols: 2; } }
@container (min-width: 768px) { .grid--team:has(> .card:nth-child(5)) > .card { --cols: 3; } }
@container (min-width: 1032px) { .grid--team:has(> .card:nth-child(4):last-child) > .card { --cols: 4; } }
@container (min-width: 1296px) { .grid--team:has(> .card:nth-child(5):last-child) > .card { --cols: 5; } }
.team-card__body { display: contents; }
.team-card__name { margin: 0; padding: 24px 24px 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 26px; letter-spacing: var(--tracking-display); }
.team-card__role { margin: 6px 0 12px; padding: 0 24px; min-height: calc(2em * 1.55); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-eyebrow-on-light); }
.team-card__bio { margin: 0; padding: 0 24px 24px; font-size: 15px; line-height: 1.6; color: var(--text-note); }
#team .card { overflow: hidden; }

/* Founder */
.founder__inner { max-width: 1200px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 64px; align-items: center; }
.founder__img { width: 100%; max-width: 480px; height: auto; margin-inline: auto; border: 1px solid var(--line-card); border-radius: 8px; display: block; }
.founder__title { margin-bottom: 24px; }
.founder__p { margin: 0 0 16px; line-height: 1.7; }
.founder__p--last { margin: 0; }

/* Difference */
.difference { max-width: 1200px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 64px; align-items: center; }
.difference__title { margin-bottom: 32px; }
.diff-item { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.diff-item__num { color: var(--text-eyebrow-on-light); }
.diff-item__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: 24px; letter-spacing: var(--tracking-display); }
.diff-item__text { margin: 0; line-height: 1.6; }
.difference__img { width: 100%; max-width: 480px; height: auto; margin-inline: auto; border: 1px solid var(--line-card); border-radius: 8px; display: block; }

/* Frontier */
.frontier__inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px; display: flex; gap: 40px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.frontier__copy { max-width: 700px; }
.frontier__title { margin-bottom: 12px; line-height: 1.25; }
.frontier__text { margin: 0; line-height: 1.7; }

/* Contact */
.contact { text-align: center; }
.contact__title { margin: 0 auto 20px; max-width: 760px; }
.contact__text { margin: 0 auto 32px; max-width: 560px; line-height: 1.7; font-size: 18px; }
/* Contact form (WLTH-16, PRD §15). Left-aligned inside the centred section. */
.contact-form { max-width: 640px; margin: 0 auto; text-align: left; }
.contact-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 24px; }
.contact-form__required { margin: 0 0 20px; font-size: 14px; color: var(--text-note); }
.field { margin: 0 0 20px; min-width: 0; }
/* Two-up rows share head, control and error tracks, so controls line up when a head wraps or one field shows an error (UI2-01). The head sits at the bottom of its track, so spare space goes above it, never between a head and its input (WDES-05). */
.field__head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.contact-form__grid > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.contact-form__grid > .field > .field__head { grid-row: 1; align-self: end; }
.contact-form__grid > .field > .field__control { grid-row: 2; }
.contact-form__grid > .field > .field__error { grid-row: 3; }
.field__label { display: block; margin: 0; font-size: 14px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.field__help { margin: 0; font-size: 14px; color: var(--text-note); }
.field__control { display: block; width: 100%; height: var(--control-h-lg); padding: 0 14px; background: var(--white); color: var(--text-body); border: 1px solid var(--text-note); border-radius: var(--radius-sm); font: var(--type-body); transition: var(--transition-control); }
.field__control--area { height: auto; min-height: 160px; padding: 11px 14px; resize: vertical; }
/* Native chevron keeps its own lane at 320 px; an untouched select reads as empty, not filled (UI2-06). */
select.field__control { padding-right: 40px; text-overflow: ellipsis; }
select.field__control:has(> option[value=""]:checked) { color: var(--text-note); }
select.field__control option { color: var(--text-body); }
.field__control:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.field__control[aria-invalid="true"] { border-color: var(--navy-900); box-shadow: inset 4px 0 0 var(--gold-700); }
/* Busy (UX7-01): setBusy makes the text fields readonly; the select is not matched. */
input.field__control:read-only, textarea.field__control:read-only { cursor: progress; color: var(--text-note); }
.field__error { margin: 6px 0 0; font-size: 14px; font-weight: var(--weight-bold); }
.hp { display: none; }
.contact-form__summary, .contact-form__msg { margin: 0 0 20px; padding: 14px 18px; background: var(--white); border-left: 4px solid var(--gold-700); line-height: 1.55; }
.contact-form__summary:focus, .contact-form__msg:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.contact-form__summary-title { font-weight: var(--weight-bold); }
.contact-form__summary-list { margin: 8px 0 0; padding-left: 20px; }
.contact-form__msg:empty { margin: 0; padding: 0; border: 0; }
/* Sent reads differently from not sent: navy rule and a drawn check mark (aria-hidden by being empty content) (UX-06b). */
.contact-form__msg--ok { border-left-color: var(--navy-900); }
.contact-form__msg a { border-bottom-color: currentColor; }
/* Not sent, or not confirmed: an "!" in a ring, its own mark, with empty alt text so it is not announced (FR-13, UIR-01).
   An engine without alt text keeps the first content, a plain "!", never an empty ring (QA3-03). */
.contact-form__msg:not(.contact-form__msg--ok):not(:empty)::before { content: "!"; content: "!" / ""; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 10px 0 0; border: 2px solid var(--gold-700); border-radius: 50%; font: var(--weight-bold) 13px/1 var(--font-sans); color: var(--gold-700); vertical-align: -3px; }
.contact-form__msg--ok:not(:empty)::before { content: ""; display: inline-block; width: 6px; height: 12px; margin: 0 12px 0 2px; border: solid var(--navy-900); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.contact-form__submit { width: 100%; }
/* Sending (D-31a): "Sending…" is announced from the status region but not shown, and draws no check; the button label is the visible cue. */
.contact-form__msg.contact-form__msg--sending { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.contact-form__msg.contact-form__msg--sending::before { content: none; }
/* In flight: dimmed and a progress cursor, so "Sending…" reads as busy, not as the idle or hover button (UIR-03). Text stays >= 4.5:1. */
button.btn--primary:disabled, button.btn--primary[aria-disabled="true"] { opacity: .7; cursor: progress; }
.contact__notice, .contact__fallback { margin: 20px auto 0; max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--text-note); }
.contact__fallback { margin-top: 8px; }

/* Footer */
.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
.page-404 > main { flex: 1; }
.page-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.site-footer { background: var(--navy-900); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 32px; }
.footer__top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__brand { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 22px; letter-spacing: var(--tracking-eyebrow); color: var(--text-body); }
.footer__regions, .footer__tagline { margin: 8px 0 0; font-size: 14px; }
.footer__links { display: flex; align-items: flex-start; gap: 24px; font-size: 14px; }
a.footer__link { color: var(--off-white); }
a.footer__link { border-bottom-color: var(--link); }
a.footer__link:hover, a.footer__link:focus-visible { color: var(--link-hover); border-bottom-color: var(--link-hover); }
.footer__legal-links { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-top: 24px; font-size: 14px; }
.footer__disclaimer { margin: 32px 0 8px; font-size: 12px; line-height: 1.6; max-width: 900px; }
.footer__copy { margin: 0; font-size: 12px; }

/* Legal drafts (WLTH-08) */
.legal { max-width: 820px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 { font-size: var(--size-h1-page); }
@media (max-width: 767px) { .legal h1 { font-size: var(--size-h1-page-narrow); } }
.legal h2 { margin: 48px 0 12px; }
.legal p, .legal li { margin: 0 0 14px; line-height: 1.7; }
.legal ul { margin: 0 0 14px; padding-left: 24px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.legal th, .legal td { overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__updated { margin: 0; font-size: 14px; color: var(--text-note); }
.draft-banner { margin: 24px 0 16px; padding: 16px 20px; background: var(--gold-200); border-left: 4px solid var(--gold-700); font-weight: var(--weight-bold); }
mark.draft-placeholder { background: var(--surface-placeholder); color: var(--text-body); padding: 0 4px; border: 1px dashed var(--text-note); }
@media (max-width: 480px) { .legal table { font-size: 13px; } .legal th, .legal td { padding: 8px 6px; } }
/* Cookies table (WDES-14 AC 14.3): scrolls inside its own region instead of breaking words; the page itself does not scroll sideways. */
.table-scroll { overflow-x: auto; margin: 0 0 20px; }
.table-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.table-scroll table { min-width: 540px; margin: 0; }
.table-scroll th, .table-scroll td { overflow-wrap: normal; }

/* Consent banner (WLTH-10). Created by analytics.js and appended last in <body>; sticky, so it rests on the viewport bottom and never covers the footer. */
.consent { position: sticky; bottom: 0; z-index: 30; background: var(--navy-900); border-top: 1px solid var(--gold-500); font-size: 14px; line-height: 1.5; --focus-ring: var(--gold-500); }
.consent__inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.consent__text { flex: 1 1 420px; min-width: 0; }
.consent__title { display: inline; margin-right: 8px; font: var(--weight-bold) 12px/1.5 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-300); }
.consent__title:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.consent__current { display: inline; margin-right: 8px; font-weight: var(--weight-bold); color: var(--gold-300); }
.consent__desc { display: inline; }
.consent a { color: var(--off-white); border-bottom-color: var(--gold-500); }
.consent a:hover { color: var(--gold-300); border-bottom-color: var(--gold-300); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.consent__btn { min-width: 112px; height: var(--control-h-sm); padding: 0 16px; background: transparent; color: var(--off-white); border: 1px solid var(--gold-500); border-radius: var(--radius-sm); font: var(--weight-bold) 11px/1 var(--font-sans); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: var(--transition-control); }
.consent__btn:hover, .consent__btn:focus-visible { background: var(--gold-500); color: var(--navy-900); }
.consent__keep { min-height: var(--control-h-sm); padding: 0 4px; background: none; border: 0; color: var(--off-white); font: var(--weight-regular) 14px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent__keep:hover { color: var(--gold-300); }
.consent-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 480px) {
  .consent__btn { flex: 1 1 0; }
  .consent__keep { flex-basis: 100%; }
}
/* Touch targets and body text on phones (WDES-14 AC 14.2, 14.5). */
@media (max-width: 767px) {
  .consent__btn { height: var(--target-min); }
  .consent__keep { min-height: var(--target-min); }
  .svc__desc, .team-card__bio { font-size: var(--size-body); }
}
/* Compact below 768px and on short (landscape, zoomed) screens: layout only, no copy removed (FR-2, AC 24.2). */
@media (max-width: 767px), (max-height: 500px) {
  .consent__inner { padding: 8px 16px; gap: 8px 16px; }
}
/* Short screens: buttons beside the text where they fit, and the text scrolls inside the banner, so it stays at about a third of the height. */
@media (max-height: 500px) {
  .consent__text { flex-basis: 240px; max-height: calc(33vh - 20px); overflow-y: auto; padding: 4px; }
}
/* When the text overflows, analytics.js makes the box a named tab stop ("Cookie notice"); a fade marks the hidden lines (FR-12, UXR-03). */
.consent__text[tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.consent__text[tabindex]::after { content: ""; position: sticky; bottom: -4px; display: block; height: 20px; margin-top: -20px; background: var(--fade-consent); pointer-events: none; }

/* While the banner is unanswered it sits over the bottom of the open phone panel, so the panel stops above it and scrolls inside that height.
   --consent-clear is the banner's height by width tier (measured 71-174px at 320-1023); nav.spec checks the last link is reachable on a first visit at 320, 375, 600, 768 and 667x375, so a tier that drifts fails. */
@media (max-width: 767.98px) { :root { --consent-clear: 132px; } }
@media (max-width: 479.98px) { :root { --consent-clear: 176px; } }
@media (max-height: 500px) { :root { --consent-clear: 112px; } }
@media (max-width: 479.98px) and (max-height: 500px) { :root { --consent-clear: 136px; } }
@media (max-width: 1023.98px) { body:has(#consent) .menu[open] ~ .nav { max-height: calc(100dvh - var(--phone-bar-h) - var(--header-rule) - var(--consent-clear)); } }

/* Print (WLTH-24 AC 24.5): no consent banner or jump link, and the header does not repeat. */
@media print {
  .consent, .consent-jump { display: none; }
  .site-header { position: static; }
  .site-header a.btn { display: none; }
  .menu, .menu[open] ~ .nav { display: none; }
}

/* WMPS-02 start */
/* The header is one row at every width from 1024 up (AC 2.4). Below 1024 the seven links, two disclosure buttons and the button need more than the row has (measured 942 px used, 720 px at 768), so the phone bar and Menu panel carry 320-1023. */
.nav__toggle { display: none; }
@media (min-width: 1024px) {
  .site-header__inner { flex-wrap: nowrap; }
  .nav { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .nav__item { display: inline-flex; align-items: center; gap: 2px; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; padding: 0; background: none; border: 0; color: var(--off-white); cursor: pointer; }
  .nav__toggle[hidden] { display: none; }
  .nav__toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .nav__toggle:hover, .nav__item.is-open > .nav__toggle, .nav__item.is-open > a.nav__link { color: var(--gold-300); }
  .nav__toggle-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy-800); border-top: 1px solid var(--line); border-bottom: 1px solid var(--gold-500); box-shadow: var(--shadow-mega); }
  .mega[hidden] { display: none; }
  .mega__inner { max-width: 1200px; margin: 0 auto; padding: 32px 24px 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .9fr); gap: 32px 48px; }
  .mega__heading { margin: 0 0 12px; font-size: 12px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold-500); }
  .mega__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
  a.mega__link, a.mega__card { display: grid; gap: 4px; padding: 10px 12px; margin: 0 -12px; border: 0; border-radius: var(--radius-sm); color: var(--off-white); }
  a.mega__link:hover, a.mega__link:focus-visible { background: var(--surface-mega-hover); color: var(--off-white); }
  .mega__name { font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: var(--tracking-display); }
  .mega__desc { font-size: 14px; line-height: 1.45; color: var(--text-on-inverse-muted); }
  .mega__feature { display: grid; align-content: start; gap: 16px; padding-left: 32px; border-left: 1px solid var(--line); }
  a.mega__card { margin: 0; padding: 20px; border: 1px solid var(--gold-700); }
  a.mega__card:hover, a.mega__card:focus-visible { border-color: var(--gold-500); color: var(--off-white); }
  .mega .more-link { color: var(--gold-300); border-bottom-color: transparent; }
}
/* WMPS-02 end */
/* WMPS-05 start */
/* Interior pages: breadcrumbs, page hero, link cards, scenarios, FAQ, tables, the service template and the previous/next pager. WMPS-06 reuses these. */
.note { margin: 16px 0 0; font-size: 12px; color: var(--text-note); }
.page-hero { background: var(--navy-900); color: var(--text-body); --text-heading: var(--off-white); --text-body: var(--text-on-inverse); --text-muted: var(--text-on-inverse-muted); --link: var(--gold-300); --link-hover: var(--gold-300); --line: var(--line-on-inverse); --focus-ring: var(--gold-500); }
.page-hero__inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px 64px; }
.page-hero__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--size-h1-page); line-height: 1.08; letter-spacing: var(--tracking-display); max-width: 900px; }
.page-hero__lede { margin: 24px 0 0; max-width: 680px; font-size: 18px; line-height: 1.7; color: var(--text-muted); }
.page-hero__actions { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 767px) { .page-hero__inner { padding: 48px 16px 40px; } .page-hero__title { font-size: var(--size-h1-page-narrow); } }
.crumbs { background: var(--navy-900); --link: var(--gold-300); --focus-ring: var(--gold-500); }
.crumbs__list { max-width: 1200px; margin: 0 auto; padding: 20px 24px 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-on-inverse-muted); }
.crumbs__list li + li::before { content: "/"; content: "/" / ""; margin: 0 10px; color: var(--gold-700); }
.crumbs a { color: var(--gold-300); border-bottom-color: transparent; }
.crumbs a:hover { color: var(--off-white); border-bottom-color: var(--gold-500); }
@media (max-width: 767px) { .crumbs__list { padding: 16px 16px 0; } }
/* Home page blocks (WMPS-04): audience chooser, scenarios, service teaser cards, AI controls. Moved sections keep their own rules. */
.link-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; color: var(--text-body); transition: var(--transition-control); }
a.link-card { border-bottom: 1px solid var(--line); }
a.link-card:hover, a.link-card:focus-visible { border-color: var(--gold-500); color: var(--text-body); }
.link-card__kicker { font-family: var(--font-sans); font-size: 13px; color: var(--text-eyebrow-on-light); }
.link-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.link-card__text { margin: 0; line-height: 1.6; color: var(--text-note); flex: 1; }
.link-card__more { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-eyebrow-on-light); }
.link-card__more::after { content: " →"; content: " →" / ""; }
.band .link-card { background: var(--navy-800); --line: var(--line-on-inverse); }
.band .link-card__text { color: var(--text-muted); }
.band .link-card__kicker, .band .link-card__more { color: var(--gold-500); }
/* Section heading with an optional link on the right */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; margin-bottom: 40px; }
.section-head .h2 { max-width: 760px; }
.more-link { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; }
.more-link::after { content: " →"; content: " →" / ""; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { padding: 12px 0 12px 28px; border-top: 1px solid var(--line); line-height: 1.55; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 10px; height: 2px; background: var(--gold-500); }
.walk { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 860px; }
.walk__step { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-top: 1px solid var(--line); }
.walk__who { font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-eyebrow-on-light); padding-top: 4px; }
.walk__what { margin: 0; line-height: 1.6; }
@media (max-width: 600px) { .walk__step { grid-template-columns: 1fr; } }
/* .table-wrap scroll hint (WMPS-22, UX F-8): a fade on the edge that has more to scroll. The two white covers scroll with the content (local) and hide the two fades (scroll)
   exactly when that edge is reached or nothing overflows; no JS. */
.table-wrap { overflow-x: auto; margin: 0; border: 1px solid var(--line); border-radius: 4px; background-color: var(--white); background-image: linear-gradient(to right, var(--white), var(--white)), linear-gradient(to left, var(--white), var(--white)), linear-gradient(to right, var(--shadow-scroll), transparent), linear-gradient(to left, var(--shadow-scroll), transparent); background-position: 0 0, 100% 0, 0 0, 100% 0; background-size: 32px 100%, 32px 100%, 24px 100%, 24px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; }
.table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.table caption { padding: 14px 16px; text-align: left; font-size: 13px; color: var(--text-note); caption-side: bottom; border-top: 1px solid var(--line); }
.table th, .table td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.table thead th { border-top: 0; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-eyebrow-on-light); font-weight: var(--weight-bold); }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.faq { max-width: 860px; border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__q { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; font-family: var(--font-display); font-size: 24px; line-height: 1.3; letter-spacing: var(--tracking-display); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; content: "+" / ""; font-family: var(--font-sans); font-size: 20px; color: var(--text-eyebrow-on-light); }
.faq__item[open] > .faq__q::after { content: "–"; content: "–" / ""; }
.faq__q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.faq__a { padding: 0 0 24px; max-width: 720px; line-height: 1.7; }
.cta-band__inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.cta-band__title { margin: 0 0 12px; }
.cta-band__text { margin: 0; max-width: 620px; line-height: 1.7; color: var(--text-muted); }
.cta-band__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.section--tight { padding-top: 64px; padding-bottom: 64px; }
.mt-48 { margin-top: 48px; }
.page-hero--image .page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.page-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 1456 / 720; object-fit: cover; border-radius: 4px; }
@media (max-width: 899px) { .page-hero--image .page-hero__inner { grid-template-columns: 1fr; gap: 32px; } .page-hero__img { order: -1; aspect-ratio: 2 / 1; } }
.key-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 48px; border-bottom: 1px solid var(--line); }
.key-list__item { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.key-list__name { font-family: var(--font-display); font-size: 24px; line-height: 1.25; letter-spacing: var(--tracking-display); }
.key-list__desc { line-height: 1.55; color: var(--text-note); }
.aim__inner { max-width: 1200px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px 64px; align-items: end; }
.aim__text { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1.2; letter-spacing: var(--tracking-display); color: var(--off-white); text-wrap: balance; }
.aim__proof { display: grid; gap: 10px; padding-left: 32px; border-left: 2px solid var(--gold-500); line-height: 1.6; color: var(--text-muted); }
.aim__proof-title { margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--off-white); letter-spacing: var(--tracking-display); }
@media (max-width: 899px) { .aim__inner { grid-template-columns: 1fr; padding: 56px 16px; } .aim__text { font-size: 30px; } .aim__proof { padding-left: 20px; } }
/* AI controls: five steps every piece of AI-assisted work passes through, in order */
.controls { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: ctl; }
.controls__step { position: relative; padding: 24px 20px 24px 0; border-top: 2px solid var(--gold-500); counter-increment: ctl; min-width: 0; }
.controls__step::before { content: counter(ctl, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--font-sans); font-size: 13px; color: var(--gold-500); }
.controls__step:not(:last-child)::after { content: ""; position: absolute; top: -7px; right: 12px; width: 10px; height: 10px; border-top: 2px solid var(--gold-500); border-right: 2px solid var(--gold-500); transform: rotate(45deg); }
.controls__name { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.controls__text { margin: 0; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 999px) {
  .controls { grid-template-columns: 1fr; }
  .controls__step { padding: 20px 0 20px 56px; border-top: 0; border-left: 2px solid var(--gold-500); }
  .controls__step::before { position: absolute; left: 16px; top: 22px; }
  .controls__step:not(:last-child)::after { top: auto; bottom: -6px; right: auto; left: -7px; transform: rotate(135deg); }
}
.mt-48 { margin-top: 48px; }
/* Illustrative scenarios: expandable, clearly labelled */
.scenarios { display: grid; gap: 16px; }
.scenario { background: var(--white); border: 1px solid var(--line); border-radius: 4px; }
.scenario[open] { border-color: var(--gold-500); }
.scenario__head { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 24px 28px; cursor: pointer; }
.scenario__head::-webkit-details-marker { display: none; }
.scenario__head::after { content: "+"; content: "+" / ""; grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: var(--font-sans); font-size: 22px; color: var(--text-eyebrow-on-light); }
.scenario[open] > .scenario__head::after { content: "–"; content: "–" / ""; }
.scenario__head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scenario__tag { font-family: var(--font-sans); font-size: 12px; letter-spacing: .04em; color: var(--text-eyebrow-on-light); }
.scenario__title { font-family: var(--font-display); font-size: 28px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.scenario__line { color: var(--text-note); line-height: 1.5; }
.scenario__body { padding: 0 28px 28px; display: grid; gap: 20px; }
.scenario__dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.scenario__dl dt { margin: 0 0 8px; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-bold); color: var(--text-eyebrow-on-light); }
.scenario__dl dd { margin: 0; line-height: 1.65; }
@media (max-width: 899px) { .scenario__dl { grid-template-columns: 1fr; } .scenario__head { padding: 20px; } .scenario__body { padding: 0 20px 20px; } .scenario__title { font-size: 24px; } }
.link-card__img { display: block; width: calc(100% + 56px); max-width: none; margin: -28px -28px 4px; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px 3px 0 0; }
.link-card { overflow: hidden; }

/* Services hub: each Editorial Panel heading links to its service page (PRD 7.1); the link keeps the heading colour and underlines on hover and focus. */
.svc__title a { color: inherit; border-bottom-color: transparent; }
.svc__title a:hover, .svc__title a:focus-visible { border-bottom-color: var(--gold-500); }

/* Customer scenarios (N-197): the label, then its illustrative note (N-166), then the first scenario. */
.scenarios__label { margin-bottom: 8px; }
.scenarios__note { margin: 0 0 24px; max-width: 760px; }

/* Previous / next across the six service pages and the six audience pages (PRD 7.8, ON-2). Written by infra/chrome.mjs inside <!-- chrome:pager -->. */
.pager { max-width: 1200px; margin: 0 auto; padding: 0 24px 64px; display: flex; flex-wrap: wrap; gap: 16px; }
.pager__link { display: flex; flex-direction: column; justify-content: center; gap: 2px; box-sizing: border-box; min-height: var(--target-min); max-width: 100%; padding: 14px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; color: var(--text-body); transition: var(--transition-control); }
a.pager__link:hover, a.pager__link:focus-visible { border-color: var(--gold-500); color: var(--text-body); }
.pager__link--next { margin-left: auto; text-align: right; }
.pager__dir { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-eyebrow-on-light); }
.pager__name { font-family: var(--font-display); font-size: 22px; line-height: 1.25; letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .pager { flex-direction: column; padding: 0 16px 48px; }
  .pager__link { width: 100%; }
  .pager__link--next { margin-left: 0; text-align: left; }
}
/* WMPS-05 end */
/* WMPS-06 start */
/* Who-we-serve: the complexity label above each tier card, and the "How we help" + aside row on the audience pages. */
.tier-col { display: flex; flex-direction: column; gap: 12px; }
.tier-col > .card { flex: 1; }
.tier__label { margin: 0; font-size: 12px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-eyebrow-on-light); }
.with-aside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.aside { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 12px; }
.aside__title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 24px; letter-spacing: var(--tracking-display); }
.aside p { margin: 0; line-height: 1.6; }
@media (max-width: 899px) { .with-aside { grid-template-columns: 1fr; gap: 40px; } }
/* The "How we help" panel inside .with-aside is a bare .svc (no .svc__body wrapper): it carries its own 24px, and as a grid item it takes the track, not the flex basis (WMPS-22, UI P1-1). */
.with-aside > .svc { flex: none; min-width: 0; padding: 24px; }
/* WMPS-06 end */

/* WMPS-07 start */
/* AI governance (five controls), shared aside and stack from the prototype; --font-mono is not shipped, so --font-sans. */
.controls { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: ctl; }
.controls__step { position: relative; padding: 24px 20px 24px 0; border-top: 2px solid var(--gold-500); counter-increment: ctl; min-width: 0; }
.controls__step::before { content: counter(ctl, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--font-sans); font-size: 13px; color: var(--text-eyebrow-on-light); }
.controls__step:not(:last-child)::after { content: ""; position: absolute; top: -7px; right: 12px; width: 10px; height: 10px; border-top: 2px solid var(--gold-500); border-right: 2px solid var(--gold-500); transform: rotate(45deg); }
.controls__name { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.controls__text { margin: 0; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 999px) {
  .controls { grid-template-columns: 1fr; }
  .controls__step { padding: 20px 0 20px 56px; border-top: 0; border-left: 2px solid var(--gold-500); }
  .controls__step::before { position: absolute; left: 16px; top: 22px; }
  .controls__step:not(:last-child)::after { top: auto; bottom: -6px; right: auto; left: -7px; transform: rotate(135deg); }
}
/* WMPS-102: the six safeguards on AI governance reuse the five-controls cards, in balanced rows of three (one column below 1000px, as .controls). */
/* The Security and data table and the line under it share one stack item, which must shrink so .table-wrap scrolls instead of the page. */
.stack > div { min-width: 0; }
@media (min-width: 1000px) {
  .controls--six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .controls--six .controls__step:nth-child(3n)::after { content: none; }
}
.walk__ctl { display: inline-block; margin-top: 8px; padding: 2px 8px; font-family: var(--font-sans); font-size: 12px; background: var(--gold-200); color: var(--navy-900); border-radius: var(--radius-sm); }
.stack { display: grid; gap: 48px; }
.table th[scope="row"] { font-weight: var(--weight-regular); }
/* WMPS-07 end */
/* WMPS-08 start */
/* contact.html: the h1 keeps the approved .h2 look (it is the only heading above the form). The "What happens next" aside sits under the
   fallback line, at the form's width, so the approved form layout and the WDES-18 bounds are unchanged. */
.contact:has(+ .contact-next) { padding-bottom: 48px; }
.contact-next { max-width: 640px; margin: 0 auto; padding: 32px 24px 96px; border-top: 1px solid var(--line); box-sizing: content-box; }
.contact-next__title { margin: 0 0 16px; font: var(--type-h3); }
.contact-next__steps { margin: 0 0 16px; padding-left: 20px; line-height: 1.7; }
.contact-next__note { margin: 0; line-height: 1.7; color: var(--text-note); }
/* WMPS-08 end */

/* WMPS-04 (cards and doors) start */
/* Card thumbnails: the image of the page a card leads to (added by the build) */
.link-card__img { display: block; width: calc(100% + 56px); max-width: none; margin: -28px -28px 4px; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px 3px 0 0; }
.link-card { overflow: hidden; }
.doors__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
a.door { display: grid; gap: 4px; height: 100%; padding: 20px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; color: var(--text-body); }
a.door:hover, a.door:focus-visible { border-color: var(--gold-500); color: var(--text-body); }
.door__name { font-family: var(--font-display); font-size: 24px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.door__name::after { content: " →"; content: " →" / ""; color: var(--text-eyebrow-on-light); }
.door__desc { line-height: 1.5; color: var(--text-note); }
.note + .scenarios { margin-top: 24px; }
/* WMPS-04 (cards and doors) end */
/* WMPS-15 start */
/* search.html: the field is the shared .field/.field__control (44 px+, 16 px text); results are plain rows, not cards. */
.search { padding-top: 48px; }
.search__app, .search__nojs { max-width: 760px; }
.search__list, .search__links { margin: 0; padding: 0; list-style: none; }
.search__list { display: grid; gap: 24px; margin-top: 24px; }
.search__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.search__count { margin: 0; min-height: 1.5em; color: var(--text-note); }
.search__link { font-family: var(--font-display); font-size: 24px; line-height: 1.2; letter-spacing: var(--tracking-display); }
.search__desc { margin: 4px 0 0; line-height: 1.6; }
.search__none { margin-top: 24px; }
/* WMPS-15 end */
/* WMPS-21 contact context start */
.context-chip[hidden] { display: none; }
.context-chip__row { display: flex; gap: 12px; align-items: stretch; }
.context-chip__row .field__control { flex: 1 1 auto; min-width: 0; }
.context-chip__remove { flex: none; min-height: var(--control-h-lg); min-width: var(--target-min); padding: 0 16px; background: var(--white); color: var(--navy-900); border: 1px solid var(--text-note); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: var(--transition-control); }
.context-chip__remove:hover { border-color: var(--navy-900); }
/* WMPS-21 contact context end */
/* WMPS-23 start */
a.btn--outline { background: transparent; color: var(--action-primary); border-color: var(--action-primary); }
a.btn--outline:hover, a.btn--outline:focus-visible { background: var(--action-primary); color: var(--text-on-inverse); }
.page-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin: 32px 0 0; }
.table caption.table__caption--sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.svc__item b a { color: inherit; border-bottom-color: currentColor; }
/* WMPS-83: the resting underline is stated here for every row, <li> on the hub or <div> on the audience pages; the hub no longer owes it to the specificity of `main li a:not(.btn)`. tests/service-rows.mjs fails if it goes back to transparent. */
.svc__item b a:hover, .svc__item b a:focus-visible { color: inherit; border-bottom-color: var(--gold-500); }
/* WMPS-23 end */
/* WMPS-20 start */
.search__kind { display: block; margin: 0 0 4px; font-size: 14px; line-height: 1.4; letter-spacing: var(--tracking-kind); text-transform: uppercase; color: var(--text-note); }
/* WMPS-20 end */

/* WMPS-34 scenario tabs start: the server HTML shows every article stacked; tabs.js adds the tablist and hides the unselected panels. */
.scenario-set { display: grid; gap: 16px; }
.scenario-set > .scenario { padding: 24px 28px; display: grid; gap: 6px 24px; align-content: start; }
.scenario-set > .scenario[hidden] { display: none; }
.scenario-set > .scenario:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scenario-set > .scenario .scenario__dl { margin-top: 14px; }
.scenario-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-tab { min-height: 44px; padding: 8px 16px; background: var(--white); color: var(--text-body); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 4px; font: inherit; font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer; }
/* The bold width is reserved by a hidden copy of the label (data-label set in tabs.js), so selecting a tab does not resize it or move its neighbours (WMPS-41). */
.scenario-tab::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: var(--weight-bold); }
.scenario-tab:hover { border-color: var(--gold-500); }
.scenario-tab[aria-selected="true"] { border-color: var(--navy-900); border-bottom-color: var(--gold-500); font-weight: var(--weight-bold); }
.scenario-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 899px) { .scenario-set > .scenario { padding: 20px; } .scenario-tab { flex: 1 1 100%; } }
/* WMPS-94: on a short screen (landscape phone) the three tabs share one row, so the note and the tablist fit above the unanswered consent banner (stacked, they ran 227px into the 217px left at 568x320).
   The label (a span from tabs.js) and its bold copy share one grid cell, so a label that wraps one more line in bold does not grow the row when its tab is selected. */
@media (max-width: 899px) and (max-height: 500px) { .scenario-tab { flex: 1 1 0; } }
.scenario-tab:has(> span) { display: grid; align-content: center; }
.scenario-tab > span, .scenario-tab:has(> span)::after { grid-area: 1 / 1; }
.scenario-tab:has(> span)::after { height: auto; }
/* Forced colours flatten the navy and gold borders to one system colour, so the selected tab keeps a cue beyond bold (UI review 2026-10-30, finding 2). */
@media (forced-colors: active) { .scenario-tab[aria-selected="true"] { border-bottom-color: Highlight; } }
/* WMPS-34 scenario tabs end */

/* WMPS-49 service detail: the Round 5 detail template (backlog Round 5 §3), shared by WMPS-50..52. Sections reuse .key-list, .split and .aim__proof;
   these rules cover only what the six service pages never needed: the chrome:group sibling list, a lede after a list, and the Licensed partners box on a light section. */
/* WMPS-59 (UI-R5-1): the sibling list follows the card-grid rule (--card-min, 24px gap, so 2 fit from 504, 3 from 768, 4 from 1032), balanced rows, the last
   row centred, and no lone item beside a fuller row: 3 items stay one column until all 3 fit (never 2 + 1). Written for the group sizes in use (3, 4, 8); layout.spec checks them. */
.group-nav__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; container-type: inline-size; border-bottom: 1px solid var(--line); }
.group-nav__list > li { --cols: 1; flex: 0 0 calc((100cqw - (var(--cols) - 1) * 24px) / var(--cols)); min-width: min(100%, var(--card-min)); padding: 18px 0; border-top: 1px solid var(--line); line-height: 1.4; }
@container (min-width: 504px) { .group-nav__list:has(> :nth-child(2)):where(:not(:has(> :nth-child(3):last-child))) > li { --cols: 2; } }
@container (min-width: 768px) {
  .group-nav__list:has(> :nth-child(3)) > li { --cols: 3; }
  .group-nav__list:has(> :nth-child(4):last-child) > li { --cols: 2; }
}
@container (min-width: 1032px) { .group-nav__list:is(:has(> :nth-child(4):last-child), :has(> :nth-child(8):last-child)) > li { --cols: 4; } }
.group-nav__list > li[aria-current="page"] { font-weight: var(--weight-bold); }
.key-list + .lede { margin-top: 32px; }
.section .aim__proof { max-inline-size: var(--measure); }
.section .aim__proof-title { color: var(--text-heading); }
.key-list__item > a, .section .aim__proof > .more-link { justify-self: start; }
/* WMPS-49 service detail end */