/* site-owned tokens — the names the kernel does NOT emit. tokens.css is otherwise
   EXCLUDED: it mirrors Brand::css_variables(), and a body-side :root lands later
   than the host's <head> block, so shipping it would cancel the tenant brand while
   the page still looked correct. */
:root {
  --lh-xs: 16px;
  --lh-sm: 24px;
  --lh-base: 28px;
  --lh-lg: 32px;
  --lh-xl: 34px;
  --pad: clamp(20px, 4.4vw, 76px);
  --col: min(1320px, calc(100vw - 2 * var(--pad)));
  --header-h: calc(var(--hit-min) + var(--space-5));
  --logo-plate: 255 255 255;
}

/* base.css — resets, element defaults, typography, prose. Tokens only: no hex, no raw px
   in any property that owns a token. Brand display face is self-hosted here (NOT in
   tokens.css); tokens.css only names the family in --font-display / --font-sans. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/vendor/scv/fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/vendor/scv/fonts/instrument-serif-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/vendor/scv/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/vendor/scv/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/vendor/scv/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

#main:focus { outline: none; }

body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font: var(--weight-base) var(--text-base) / var(--lh-base) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.theme-ready {
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, blockquote, dl, dd { margin: 0; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: rgb(var(--fg));
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 {
  font-size: clamp(calc(var(--text-xl) * 1.45), 6.9vw, calc(var(--text-xl) * 4.7));
  line-height: 0.92;
}
h2 {
  font-size: clamp(calc(var(--text-xl) * 1.1), 4.4vw, calc(var(--text-xl) * 2.42));
  line-height: 1.04;
}
h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: rgb(var(--fg));
  letter-spacing: var(--tracking-normal);
  text-wrap: pretty;
}
h3 { font-size: var(--text-lg); line-height: 1.28; }
h4 { font-size: var(--text-base); line-height: var(--lh-base); }
h5, h6 { font-size: var(--text-sm); line-height: var(--lh-sm); }

em { font-style: italic; }

p { text-wrap: pretty; }

/* Link ink is `--primary-on-surface`, NOT `--color-primary`, and the difference is only
   visible in dark mode. `--color-primary` is emitted once, in `:root` — the kernel has no
   dark accent slot — so the brand teal `21 105 125` is the ink in BOTH modes. Against the
   dark surfaces it lands at 3.03:1 on `--bg` and 2.85:1 on `--bg-2`: fine for the 3:1 the
   focus ring and the filled button are held to, and a WCAG 1.4.3 failure for every link set
   in it. `--primary-on-surface` is the kernel's role-hued *text* colour and it is dual:
   `21 105 125` in light (byte-identical to the accent — this swap changes nothing a light-mode
   visitor sees) and `80 143 158` in dark, the same teal lifted 25% toward white until it
   clears 4.5:1. Every teal-inked TEXT rule below reads this token for the same reason; the
   teal that stays `--color-primary` is fill, hairline, focus underline and icon — non-text,
   held to 3:1, and unchanged. */
a {
  color: rgb(var(--primary-on-surface));
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: rgb(var(--primary-on-surface)); }
::selection { background: rgb(var(--fg)); color: rgb(var(--bg)); }

strong, b { font-weight: 600; }

/* Mono kicker — the small uppercase label that opens each band. */
.kicker {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgb(var(--muted));
}
.kicker::before {
  content: ""; flex: 0 0 auto;
  width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-full);
  background: rgb(var(--color-primary));
}

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

code, pre { font-family: var(--font-mono); font-size: var(--text-sm); }

hr { border: 0; border-top: var(--stroke-hairline) solid var(--line); margin: 0; }

:focus-visible {
  outline: var(--focus-ring-width) solid rgb(var(--focus-ring));
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Skip link — visible on focus (WCAG 2.2). */
.skip-link {
  position: absolute; left: var(--space-2); top: calc(var(--space-10) * -2);
  background: rgb(var(--color-primary)); color: rgb(var(--on-primary));
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-standard);
  z-index: var(--z-overlay);
}
.skip-link:focus { top: var(--space-2); color: rgb(var(--on-primary)); }

/* Screen-reader-only text that stays in the accessibility tree. */
.visually-hidden {
  position: absolute; width: var(--stroke-hairline); height: var(--stroke-hairline);
  padding: 0; margin: calc(var(--stroke-hairline) * -1); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Long-form prose (brief R10). Layout CSS zeroes flow margins, so restore rhythm here. */
.prose { color: rgb(var(--fg-2)); max-width: 70ch; font-size: var(--text-base); line-height: 1.62; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: calc(var(--space-10) * 1.4); color: rgb(var(--fg)); font-size: clamp(var(--text-xl), 3vw, calc(var(--text-xl) * 1.5)); }
.prose h3 { margin-top: var(--space-8); color: rgb(var(--fg)); }
.prose h4 { margin-top: var(--space-6); color: rgb(var(--fg)); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose a { text-decoration: underline; text-underline-offset: var(--space-1); }
.prose a.btn { text-decoration: none; }
.prose blockquote {
  margin-left: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: var(--stroke-hairline) solid rgb(var(--color-primary));
  color: rgb(var(--fg));
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(var(--text-lg), 2vw, calc(var(--text-xl) * 1.05)); line-height: 1.35;
  letter-spacing: var(--tracking-tight);
}
.prose pre {
  overflow-x: auto; padding: var(--space-4);
  background: rgb(var(--bg-2)); border-radius: var(--radius-lg);
}
.prose figure { margin-block: var(--space-8); }
.prose figcaption { margin-top: var(--space-2); color: rgb(var(--muted)); font-size: var(--text-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td {
  padding: var(--space-3);
  border-bottom: var(--stroke-hairline) solid var(--line);
  text-align: left; vertical-align: top;
}
.prose th { color: rgb(var(--fg)); font-weight: 600; }
.prose img { border-radius: var(--radius-md); }

/* Scroll reveal — opt-in per element, and only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--space-5)); }
  [data-reveal] { transition: opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized); }
}


/* layout.css — layout primitives only. Flexbox / Grid / clamp. Tokens only. */

.container { width: var(--col); margin-inline: auto; }
.container--narrow { width: min(var(--col), 74ch); margin-inline: auto; }

/* Vertical rhythm between page bands (each band is one <section>). */
.section { padding-block: clamp(var(--space-10), 8vw, calc(var(--space-10) * 2.8)); }
.section--tight { padding-block: clamp(var(--space-8), 5vw, calc(var(--space-10) * 1.4)); }
.section--tinted { background: rgb(var(--bg-2)); }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.row--between { justify-content: space-between; }

/* Homogeneous item lists (brief R5). */
.grid { display: grid; gap: clamp(var(--space-6), 3vw, var(--space-10)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); }
.grid--2 { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--wide { display: grid; gap: clamp(var(--space-6), 3vw, var(--space-10)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Prose + rail (article body next to a sidebar). Collapses to one column on small screens. */
.split { display: grid; gap: clamp(var(--space-8), 4vw, calc(var(--space-10) * 1.5)); align-items: start; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) 20rem; } }
@media (min-width: 60rem) { .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 60rem) { .split--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; } }

/* Wide content (tables) must scroll inside its own box, never the page body. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* sections.css — one flat, section-scoped ruleset per archetype (brief §5).
   Every visual value is a var(--token). No hex, no inline styles, no deep nesting.
   Sections are self-contained: no rule here reaches into a sibling section's DOM. */

/* ───────────────────────────── Buttons / CTAs (R6) ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: 600; font-size: var(--text-base); line-height: var(--lh-base);
  border: 0; background: none; cursor: pointer; text-align: center;
  min-height: var(--hit-min);
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-emphasized);
}
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-2px); } }
.btn--primary { background: rgb(var(--color-primary)); color: rgb(var(--on-primary)); }
.btn--primary:hover { background: rgb(var(--primary-on-surface)); color: rgb(var(--on-primary)); }
/* Actions carry a small dot, the reference's signature. Decorative, so it is hidden
   from assistive tech; the label already says everything. */
.btn--primary::before, .btn--onprimary::before {
  content: ""; flex: 0 0 auto;
  width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-full);
  background: rgb(var(--on-primary) / 0.6);
}
.btn--onprimary::before { background: rgb(var(--color-primary)); }
.btn--ghost {
  background: transparent; color: rgb(var(--fg));
  box-shadow: inset 0 0 0 var(--stroke-hairline) var(--line-2);
}
.btn--ghost:hover { background: transparent; color: rgb(var(--fg)); box-shadow: inset 0 0 0 var(--stroke-hairline) rgb(var(--fg)); }
.btn--onprimary { background: rgb(var(--bg)); color: rgb(var(--primary-on-surface)); }
.btn--onprimary:hover { background: rgb(var(--bg-2)); color: rgb(var(--primary-on-surface)); }
.btn--outline-light {
  background: transparent; color: rgb(var(--on-primary));
  box-shadow: inset 0 0 0 var(--stroke-thick) rgb(var(--on-primary) / 0.55);
}
.btn--outline-light:hover { background: rgb(var(--on-primary) / 0.12); color: rgb(var(--on-primary)); }
.btn--block { width: 100%; }

/* ───────────────────────────── Utility bar ───────────────────────────── */
.topbar { background: transparent; border-bottom: var(--stroke-hairline) solid var(--line); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.topbar__social { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
.topbar__social a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-min); min-height: var(--hit-min);
  color: rgb(var(--fg-2)); border-radius: var(--radius-full);
}
.topbar__social a:hover { color: rgb(var(--color-primary)); background: rgb(var(--bg)); }
.topbar__social svg { width: var(--icon-md); height: var(--icon-md); }
.topbar__right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.topbar__tel {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--hit-min); padding-inline: var(--space-2);
  font-weight: 600; color: rgb(var(--fg));
}
.topbar__tel:hover { color: rgb(var(--primary-on-surface)); }
.topbar__tel svg { width: var(--icon-sm); height: var(--icon-sm); color: rgb(var(--color-primary)); }
.topbar__link {
  display: inline-flex; align-items: center; min-height: var(--hit-min);
  padding-inline: var(--space-3); color: rgb(var(--fg-2)); font-weight: 500;
}
.topbar__link:hover { color: rgb(var(--primary-on-surface)); }

/* ───────────────────────────── Site header + nav ───────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgb(var(--bg) / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--stroke-hairline) solid transparent;
  transition: border-color var(--dur-slow) var(--ease-standard),
              background var(--dur-slow) var(--ease-standard);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); }
.site-header__inner, .site-header__navrow {
  transition: padding-block var(--dur-slow) var(--ease-emphasized);
}
.site-header[data-scrolled="true"] .site-header__inner { padding-block: var(--space-2); }
.site-header[data-scrolled="true"] .site-header__navrow { padding-block: var(--space-1); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); min-height: var(--header-h); padding-block: var(--space-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.brand img { width: auto; height: calc(var(--space-10) * 1.15); }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: rgb(var(--fg)); }

.site-header__navrow {
  display: none;
  border-top: var(--stroke-hairline) solid var(--line);
  padding-block: var(--space-2);
}
@media (min-width: 70rem) { .site-header__navrow { display: block; } }
.nav { display: block; }
.nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav__list > .nav__item:first-child > .nav__link { margin-left: calc(var(--space-3) * -1); }
.nav__item { position: relative; }
.nav__link, .nav__toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--hit-min); padding-inline: var(--space-3);
  flex: 0 0 auto;
  color: rgb(var(--fg)); font-weight: 400; font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
/* A rule that grows under the label — the reference's nav affordance. */
.nav__link::after, .nav__toggle::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3);
  bottom: var(--space-3); height: var(--stroke-hairline);
  background: rgb(var(--color-primary));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.nav__link:hover, .nav__toggle:hover { color: rgb(var(--primary-on-surface)); }
.nav__link:hover::after, .nav__toggle:hover::after,
.nav__link[aria-current="page"]::after, .nav__toggle[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"], .nav__toggle[aria-current="true"] { color: rgb(var(--fg)); }
.nav__caret { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-fast) var(--ease-standard); }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__submenu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-dropdown);
  min-width: 16rem; margin: 0; padding: var(--space-2);
  list-style: none;
  background: rgb(var(--bg));
  border: var(--stroke-hairline) solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* Closed by default; opened by hover, focus-within (keyboard) or the JS toggle. */
.nav__item > .nav__submenu { display: none; }
.nav__item::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: var(--space-2); }
.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu,
.nav__toggle[aria-expanded="true"] + .nav__submenu { display: block; }
.nav__submenu a {
  display: flex; align-items: center; min-height: var(--hit-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  color: rgb(var(--fg-2)); font-size: var(--text-sm); line-height: var(--lh-sm);
}
.nav__submenu a:hover { background: rgb(var(--primary-surface)); color: rgb(var(--primary-on-surface)); }

.header__actions { display: flex; align-items: center; gap: var(--space-2); }
.header__cta { display: none; white-space: nowrap; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-min); min-height: var(--hit-min);
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: rgb(var(--fg-2)); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: rgb(var(--color-primary) / 0.09); color: rgb(var(--primary-on-surface)); }
.icon-btn svg { width: var(--icon-md); height: var(--icon-md); }
.icon-btn--menu { display: inline-flex; }
@media (min-width: 70rem) { .icon-btn--menu { display: none; } }

/* Mobile drawer. Without JS it is simply never opened; the full nav is also in the footer. */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; background: rgb(var(--fg) / 0.45);
}
.drawer[data-open="true"] { display: block; }
.drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(24rem, 92vw); overflow-y: auto;
  background: rgb(var(--bg));
  padding: var(--space-5) var(--space-5) var(--space-10);
  box-shadow: var(--shadow-xl);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
  display: block; padding: var(--space-3) var(--space-2);
  min-height: var(--hit-min);
  color: rgb(var(--fg)); font-weight: 500;
  border-bottom: var(--stroke-hairline) solid var(--line);
}
.drawer__list a:hover { color: rgb(var(--primary-on-surface)); }
.drawer__sub { list-style: none; margin: 0; padding-left: var(--space-4); }
.drawer__sub a { font-weight: 400; font-size: var(--text-sm); color: rgb(var(--fg-2)); }
.drawer__cta { margin-top: var(--space-6); }

/* ───────────────────────────── Hero ───────────────────────────── */
.hero { position: relative; border-bottom: var(--stroke-hairline) solid var(--line); }
.hero__inner { padding-block: clamp(var(--space-10), 7vw, calc(var(--space-10) * 2.6)); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); line-height: var(--lh-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: rgb(var(--muted));
}
.hero__title { margin-top: clamp(var(--space-6), 3vw, var(--space-10)); max-width: 15ch; }
.hero__lede { margin-top: clamp(var(--space-6), 3vw, var(--space-10)); max-width: 46ch; color: rgb(var(--muted)); font-size: var(--text-base); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); align-items: center; }
.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; border-radius: var(--radius-md); }

.hero--home { border-bottom: 0; }
.hero--home .hero__inner { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-10)); align-items: center; }
@media (min-width: 60rem) { .hero--home .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.hero--home .hero__title { max-width: 16ch; }
.hero--page .hero__inner { padding-block: clamp(var(--space-8), 4.5vw, calc(var(--space-10) * 1.2)); }
.hero--post .hero__title { max-width: 26ch; }

/* Breadcrumbs (BreadcrumbList schema is emitted in the head). */
.crumbs { margin-bottom: var(--space-4); font-size: var(--text-sm); color: rgb(var(--muted)); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: var(--space-2); }
.crumbs li + li::before { content: "/"; color: rgb(var(--muted) / 0.7); }
.crumbs a { color: rgb(var(--fg-2)); }
.crumbs a:hover { color: rgb(var(--primary-on-surface)); }
.crumbs [aria-current="page"] { color: rgb(var(--muted)); }

/* ───────────────────────────── Emergency / award band ───────────────────────────── */
.alertband { background: rgb(var(--color-primary)); color: rgb(var(--on-primary)); }
.alertband__item { font-family: var(--font-sans); font-size: var(--text-sm); }
.alertband__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: var(--space-3);
}
.alertband__item { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
.alertband__item svg { width: var(--icon-lg); height: var(--icon-lg); flex: 0 0 auto; }
.alertband a { color: rgb(var(--on-primary)); text-decoration: underline; text-underline-offset: var(--space-1); font-weight: 600; }
.alertband a:hover { color: rgb(var(--on-primary)); opacity: 0.85; }

/* ───────────────────────────── Section header ───────────────────────────── */
.sec-head { max-width: 30ch; margin-bottom: clamp(var(--space-10), 5vw, calc(var(--space-10) * 1.6)); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); line-height: var(--lh-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: rgb(var(--muted));
  margin-bottom: var(--space-5);
}
.sec-head__eyebrow::before {
  content: ""; flex: 0 0 auto;
  width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-full);
  background: rgb(var(--color-primary));
}
.sec-head h3 { margin-top: var(--space-4); color: rgb(var(--fg-2)); font-weight: 500; }
.sec-head__eyebrow + .sec-head__title { margin-top: var(--space-3); }
.sec-head__title {
  margin-top: var(--space-3);
  font-size: clamp(calc(var(--text-xl) * 1.1), 4.2vw, calc(var(--text-xl) * 1.75));
  line-height: 1.08;
}
.sec-head__lede { margin-top: var(--space-6); max-width: 40ch; color: rgb(var(--muted)); font-size: var(--text-sm); line-height: 1.62; }

/* ── Cards (features / products / posts) — no border, no fill. The image and the
   whitespace do the work; the only chrome is a hairline that appears on hover. ── */
.card {
  display: flex; flex-direction: column;
  position: relative;
  padding-bottom: var(--space-4);
}
@supports (grid-template-rows: subgrid) {
  .grid, .grid--wide { grid-auto-rows: auto; }
  .grid > .card, .grid--wide > .card {
    display: grid;
    /* One column, five rows — media, title, meta, body, cta. Every child is placed
       explicitly; without that a second child claiming the same row would create an
       implicit COLUMN and split the card in half. */
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
  .grid > .card > .card__media, .grid--wide > .card > .card__media { grid-row: 1; margin-bottom: 0; }
  .grid > .card > .card__title, .grid--wide > .card > .card__title { grid-row: 2; padding-top: var(--space-5); }
  .grid > .card > .card__meta, .grid--wide > .card > .card__meta { grid-row: 3; align-self: start; margin-top: var(--space-2); }
  .grid > .card > .card__body, .grid--wide > .card > .card__body { grid-row: 4; }
  .grid > .card > .card__link, .grid--wide > .card > .card__link { grid-row: 5; align-self: end; margin-top: 0; }
}
.card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(var(--text-lg), 2.1vw, calc(var(--text-xl) * 1.12));
  line-height: 1.1; letter-spacing: var(--tracking-tight);
}
.card__title a { color: rgb(var(--fg)); }
/* The title link covers the card, so the whole card is one target without nesting <a>. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { color: rgb(var(--primary-on-surface)); }
.card__body {
  margin-top: var(--space-3); color: rgb(var(--fg-2));
  font-size: var(--text-sm); line-height: var(--lh-sm);
  max-width: 46ch;
}
.card__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  position: relative;
  margin-top: auto; padding-top: var(--space-5);
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  min-height: var(--hit-min);
  color: rgb(var(--primary-on-surface));
}
.card__link svg {
  width: var(--icon-sm); height: var(--icon-sm);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.card:hover .card__link svg { transform: translateX(var(--space-2)); }

.card__media {
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgb(var(--bg-2));
}
.card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top;
  border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-standard);
}
@media (prefers-reduced-motion: no-preference) {
  .card:hover .card__media img { transform: scale(1.035); }
}
.card__media--portrait img { aspect-ratio: 4 / 5; }
.card__meta {
  margin-top: var(--space-3); color: rgb(var(--muted));
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
/* Cards without media keep the row baseline by picking up a rule instead of an image. */
.card--flush { padding-top: 0; }


/* ───────────────────────────── Feature / reason list ───────────────────────────── */
.feats { display: grid; gap: clamp(var(--space-6), 3vw, var(--space-10)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.feat { display: flex; gap: var(--space-4); }
.feat { flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--stroke-hairline) solid var(--line-2); }
.feat__icon {
  flex: 0 0 auto; display: grid; place-items: start;
  color: rgb(var(--color-primary));
}
.feat__icon svg { width: calc(var(--icon-lg) * 1.35); height: calc(var(--icon-lg) * 1.35); }
.feat__title { font-size: var(--text-base); line-height: 1.35; font-weight: 500; }
.feat__body { margin-top: var(--space-2); color: rgb(var(--fg-2)); font-size: var(--text-sm); line-height: var(--lh-sm); }

/* Plain checked list. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ticks li { display: flex; gap: var(--space-3); color: rgb(var(--fg-2)); }
.ticks li::before {
  content: ""; flex: 0 0 auto;
  width: var(--icon-sm); height: var(--icon-sm); margin-top: var(--space-1);
  border-radius: var(--radius-full);
  background: rgb(var(--color-primary));
  box-shadow: 0 0 0 var(--space-1) rgb(var(--color-primary) / 0.16);
}

/* ───────────────────────────── Logo grid (insurers) ───────────────────────────── */
.logos { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); align-items: center; list-style: none; margin: 0; padding: 0; }
.logos li {
  display: grid; place-items: center; padding: var(--space-4);
  min-height: calc(var(--space-10) * 1.8);
}
.logos img {
  max-height: calc(var(--space-10) * 1.3); width: auto; object-fit: contain;
  opacity: 0.72; transition: opacity var(--dur-base) var(--ease-standard);
}
.logos li:hover img { opacity: 1; }
/* Third-party trademarks are dark ink on transparent — they need a light plate on the
   dark surface. In light mode the page is already light, so no plate is drawn. */
.dark .logos li {
  background: rgb(var(--logo-plate) / 0.92);
  border-radius: var(--radius-lg);
}

/* ── Testimonials — editorial quotes separated by rules, no cards ── */
.quotes {
  display: grid; gap: clamp(var(--space-8), 4vw, var(--space-10));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.quote {
  display: flex; flex-direction: column; height: 100%; margin: 0;
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--line);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  color: rgb(var(--fg)); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(var(--text-lg), 1.9vw, calc(var(--text-xl) * 0.97));
  line-height: 1.35; letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}
.quote figcaption { margin-top: auto; padding-top: var(--space-6); }
.quote__by { display: flex; align-items: center; gap: var(--space-3); }
.quote__by img {
  width: calc(var(--space-10) + var(--space-2)); height: calc(var(--space-10) + var(--space-2));
  border-radius: var(--radius-full); object-fit: cover; flex: 0 0 auto;
  background: rgb(var(--bg-3));
}
.quote__name, .quote__role {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.quote__name { font-weight: 500; color: rgb(var(--fg)); }
.quote__role { color: rgb(var(--muted)); margin-top: var(--space-1); }

/* ── FAQ / accordion — native <details>, so it works with JS off and stays indexable ── */
.faq { display: grid; border-top: var(--stroke-hairline) solid var(--line-2); }

.faq__item {
  border-bottom: var(--stroke-hairline) solid var(--line-2);
  overflow: hidden;
}

.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-6) var(--space-2);
  min-height: var(--hit-min);
  cursor: pointer;
  list-style: none;
  color: rgb(var(--fg));
  font-family: var(--font-display);
  font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600;
  transition: color var(--dur-fast) var(--ease-standard);
}
/* Safari/Chrome still paint a disclosure triangle without both of these. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: rgb(var(--primary-on-surface)); }
.faq__item[open] .faq__q { color: rgb(var(--primary-on-surface)); }
/* The whole row is the control, so the ring belongs on the row. */
.faq__q:focus-visible {
  outline: var(--focus-ring-width) solid rgb(var(--focus-ring));
  outline-offset: calc(var(--focus-ring-offset) * -1);
}
.faq__qtext { flex: 1 1 auto; text-wrap: pretty; }
/* Blog-post FAQ runs keep a real <h3> in the summary; it inherits the row type. */
.faq__q h3 { flex: 1 1 auto; font: inherit; color: inherit; text-wrap: pretty; }

/* Plus that becomes a minus. Sized as a real target, tinted like the brand. */
.faq__sign {
  flex: 0 0 auto;
  width: var(--icon-lg); height: var(--icon-lg);
  color: rgb(var(--color-primary));
  transition: transform var(--dur-base) var(--ease-emphasized),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.faq__item[open] .faq__sign { transform: rotate(135deg); }

.faq__a {
  padding: 0 var(--space-10) var(--space-8) var(--space-2);
  color: rgb(var(--fg-2));
  max-width: 70ch;
}
.faq__a > * + * { margin-top: var(--space-4); }
.faq__a ul, .faq__a ol { padding-left: var(--space-6); }
.faq__a li + li { margin-top: var(--space-2); }
.faq__a a { text-decoration: underline; text-underline-offset: var(--space-1); }

/* Smooth open/close where the browser supports animating to auto height; everywhere
   else this is simply ignored and the panel toggles instantly. Both paths are fine. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-slow) var(--ease-emphasized),
                content-visibility var(--dur-slow) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* ───────────────────────────── Doctor / team ───────────────────────────── */
.docs { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.doc { text-align: center; }
.doc__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-2xl); background: rgb(var(--bg-3)); }
.doc__name { margin-top: var(--space-4); font-size: var(--text-base); line-height: var(--lh-base); }
.doc__name a { color: rgb(var(--fg)); }
.doc__name a:hover { color: rgb(var(--primary-on-surface)); }
.doc__cred { margin-top: var(--space-1); color: rgb(var(--muted)); font-size: var(--text-sm); }

.bio { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-10)); }
@media (min-width: 56rem) { .bio { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; } }
.bio__photo { width: 100%; border-radius: var(--radius-2xl); background: rgb(var(--bg-3)); }
.bio__cred { color: rgb(var(--primary-on-surface)); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-sm); }

/* Sibling switcher (the source lists all doctors on each bio page). */
.peers { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.peers a {
  display: inline-flex; align-items: center; min-height: var(--hit-min);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  color: rgb(var(--fg-2)); font-size: var(--text-sm); font-weight: 500;
}
.peers a:hover { background: rgb(var(--color-primary) / 0.09); color: rgb(var(--primary-on-surface)); }
.peers [aria-current="page"] { background: rgb(var(--color-primary) / 0.11); color: rgb(var(--primary-on-surface)); }

/* ───────────────────────────── Contact / hours / info ───────────────────────────── */
.infolist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.infolist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.infolist svg { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); margin-top: var(--space-1); color: rgb(var(--color-primary)); }
.infolist a { color: rgb(var(--fg)); }
.infolist a:hover { color: rgb(var(--primary-on-surface)); }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: var(--space-2) 0; border-bottom: 0; text-align: left; font-size: var(--text-sm); }
.hours th { font-weight: 500; color: rgb(var(--fg-2)); }
.hours td { text-align: right; color: rgb(var(--fg)); font-variant-numeric: tabular-nums; }

/* ───────────────────────────── CTA bands ───────────────────────────── */
.cta { background: rgb(var(--bg-2)); }
.cta__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 56rem) { .cta__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.cta__body { color: rgb(var(--fg-2)); margin-top: var(--space-3); max-width: 60ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.bigcta {
  background: rgb(var(--fg)); color: rgb(var(--bg));
  border-radius: var(--radius-xl);
  margin-inline: clamp(var(--space-3), 1.6vw, var(--space-6));
}
.bigcta h2 { color: rgb(var(--bg)); }
.bigcta .cta__body { color: rgb(var(--bg) / 0.62); }
.bigcta .btn--onprimary { background: rgb(var(--bg)); color: rgb(var(--fg)); }
.bigcta .btn--onprimary:hover { background: rgb(var(--bg)); color: rgb(var(--fg)); }
.bigcta .btn--outline-light { color: rgb(var(--bg)); box-shadow: inset 0 0 0 var(--stroke-hairline) rgb(var(--bg) / 0.28); }
.bigcta .btn--outline-light:hover { background: transparent; color: rgb(var(--bg)); box-shadow: inset 0 0 0 var(--stroke-hairline) rgb(var(--bg)); }

/* ───────────────────────────── Booking / form adapter ───────────────────────────── */
.formcard { padding-top: var(--space-6); border-top: var(--stroke-thick) solid rgb(var(--color-primary) / 0.35); }
.field { display: grid; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }
.field label { font-weight: 600; font-size: var(--text-sm); color: rgb(var(--fg)); }
.field .hint { color: rgb(var(--muted)); font-size: var(--text-xs); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--space-3) 0;
  min-height: var(--hit-min);
  background: transparent; color: rgb(var(--fg));
  border: 0; border-bottom: var(--stroke-thick) solid rgb(var(--fg) / 0.55);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: rgb(var(--color-primary)); }
.field + .field { margin-top: var(--space-6); }
.field textarea { min-height: calc(var(--space-10) * 3); resize: vertical; }
.field .err { color: rgb(var(--negative-on-surface)); font-size: var(--text-sm); }
.field--invalid input, .field--invalid textarea, .field--invalid select { border-bottom-color: rgb(var(--color-negative)); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-5); color: rgb(var(--fg-2)); font-size: var(--text-sm); }
.consent input { width: var(--icon-md); height: var(--icon-md); margin-top: var(--space-1); flex: 0 0 auto; }
.form__actions { margin-top: var(--space-6); }

/* Unwired-backend notice — REQUIRED by prompt §11: submitting must never fake success. */
.notice {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5) var(--space-6);
  border-left: var(--stroke-heavy) solid rgb(var(--color-warning));
  background: rgb(var(--warning-surface)); color: rgb(var(--warning-on-surface));
}
.notice h3 { color: rgb(var(--warning-on-surface)); font-size: var(--text-base); line-height: var(--lh-base); }
.notice p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--lh-sm); }
.notice a:not(.btn) { color: rgb(var(--warning-on-surface)); text-decoration: underline; font-weight: 600; }
.notice__routes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.form__errors { margin-bottom: var(--space-5); }
.form__errors ul { margin-top: var(--space-2); padding-left: var(--space-6); }

/* Callout used for preserved source guidance blocks. */
.callout {
  border-left: var(--stroke-heavy) solid rgb(var(--color-primary));
  background: rgb(var(--primary-surface));
  color: rgb(var(--primary-on-surface));
  padding: var(--space-5); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ───────────────────────────── Article extras ───────────────────────────── */
.postmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: rgb(var(--muted)); font-size: var(--text-sm); margin-top: var(--space-5); }
.postmeta a { color: rgb(var(--fg-2)); }
.rail { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-10)); align-content: start; }
.rail__box { padding-top: var(--space-5); border-top: var(--stroke-hairline) solid var(--line-2); }
.rail__title { font-size: var(--text-base); line-height: var(--lh-base); }
.rail__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.rail__list a { color: rgb(var(--fg-2)); font-size: var(--text-sm); line-height: var(--lh-sm); }
.rail__list a:hover { color: rgb(var(--primary-on-surface)); }
.authorbox { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--stroke-hairline) solid var(--line); }
.authorbox img { width: calc(var(--space-10) * 1.4); height: calc(var(--space-10) * 1.4); border-radius: var(--radius-full); object-fit: cover; background: rgb(var(--bg-3)); }
.postnav { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 44rem) { .postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.postnav a { display: block; padding: var(--space-5) 0; border-top: var(--stroke-hairline) solid var(--line-2); color: rgb(var(--fg)); }
.postnav a:hover { color: rgb(var(--primary-on-surface)); }
.postnav span { display: block; color: rgb(var(--muted)); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.postnav--end { text-align: right; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.share a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-min); min-height: var(--hit-min);
  border-radius: var(--radius-full);
  color: rgb(var(--fg-2));
}
.share a:hover { color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / 0.09); }
.share svg { width: var(--icon-md); height: var(--icon-md); }

/* ───────────────────────────── Pagination ───────────────────────────── */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); list-style: none; padding: 0; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-min); min-height: var(--hit-min); padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  color: rgb(var(--fg-2)); font-size: var(--text-sm); font-weight: 500;
}
.pager a:hover { background: rgb(var(--color-primary) / 0.09); color: rgb(var(--primary-on-surface)); }
.pager [aria-current="page"] { background: rgb(var(--color-primary)); border-color: transparent; color: rgb(var(--on-primary)); }

/* ───────────────────────────── Media ───────────────────────────── */
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius-2xl); }
.figure figcaption { margin-top: var(--space-3); color: rgb(var(--muted)); font-size: var(--text-sm); }

/* Flagged placeholder — data-needs-asset is the convention verify.sh counts (§13). */
.ph {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 3 / 2; padding: var(--space-6);
  background: rgb(var(--bg-3));
  border: var(--stroke-thick) dashed var(--line-2);
  border-radius: var(--radius-lg);
  color: rgb(var(--muted));
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ───────────────────────────── Footer ───────────────────────────── */
.site-footer { background: rgb(var(--bg)); border-top: var(--stroke-hairline) solid var(--line); }
.site-footer__inner { padding-block: clamp(var(--space-10), 5vw, calc(var(--space-10) * 1.5)); }
.site-footer__grid { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-10)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.site-footer h2 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgb(var(--muted));
}
.footer-links { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-links a {
  display: inline-flex; align-items: center; min-height: var(--hit-min);
  color: rgb(var(--fg-2)); font-size: var(--text-sm);
}
.footer-links a:hover { color: rgb(var(--primary-on-surface)); }
.site-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--line);
  color: rgb(var(--muted));
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.site-footer__bar a { color: rgb(var(--fg-2)); }

/* Sticky mobile call/book bar. */
.stickycta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
  padding: var(--space-2);
  background: rgb(var(--bg));
  border-top: var(--stroke-hairline) solid var(--line-2);
}
@media (min-width: 48rem) { .stickycta { display: none; } }
body { padding-bottom: calc(var(--hit-min) + var(--space-5)); }
@media (min-width: 48rem) { body { padding-bottom: 0; } }

/* Spacing helper for footer blocks that follow a heading/brand mark. */
.footer-block { margin-top: var(--space-6); }

/* Alternating media/text detail rows (features archetype with imagery). */
.featrows { display: grid; gap: clamp(var(--space-10), 6vw, calc(var(--space-10) * 1.6)); }
.featrow { display: grid; gap: clamp(var(--space-5), 3vw, var(--space-8)); align-items: center; }
@media (min-width: 56rem) { .featrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.featrow .prose { margin-top: var(--space-4); max-width: 58ch; }

/* Icon tiles that use a real source image rather than an inline SVG. */
.feat__icon--img { background: rgb(var(--primary-surface)); padding: var(--space-3); }
.feat__icon--img img { width: var(--icon-lg); height: var(--icon-lg); object-fit: contain; }

/* Portrait source images (team photos) keep the face in frame. */
.card__media img { object-position: center top; }
.card__media--portrait img { aspect-ratio: 4 / 5; }

/* Copy that sits outside a detected card/row run still renders, in source order. */
.prose--tail { margin-top: var(--space-10); }

/* Links inside meta/body text must not rely on colour alone (WCAG 1.4.1). */
.card__meta a, .card__body a, .postmeta a { text-decoration: underline; text-underline-offset: var(--space-1); }

/* An icon-sized source asset renders at its own size, never stretched to the column. */
.figure--icon img { width: auto; max-width: 100%; border-radius: 0; }

/* Testimonial attribution: avatar + name + role. */
.quote__by { display: flex; align-items: center; gap: var(--space-3); }
.quote__by img {
  width: calc(var(--space-10) + var(--space-4)); height: calc(var(--space-10) + var(--space-4));
  border-radius: var(--radius-full); object-fit: cover; flex: 0 0 auto;
  background: rgb(var(--bg-3));
}

/* A swapped icon occupying a media column renders as a tile, not a stretched graphic. */
.featrow__icon {
  display: grid; place-items: center;
  width: calc(var(--space-10) * 2.6); height: calc(var(--space-10) * 2.6);
  border-radius: var(--radius-2xl);
  background: rgb(var(--primary-surface));
  color: rgb(var(--primary-on-surface));
}
.featrow__icon svg { width: calc(var(--space-10) * 1.2); height: calc(var(--space-10) * 1.2); }
.featrow > .featrow__icon { justify-self: center; }

/* Brand logos are real trademarks and stay as images — they need a light tile so dark
   ink stays legible in dark mode. */
.logos li { background: rgb(var(--bg)); }
.dark .logos li { background: rgb(255 255 255 / 0.92); }

/* Two of the About-page feature headings are links in the source (an authoring slip —
   the icon-box link field was left holding the placeholder email). The destination is
   preserved; the colour is not, so the grid still reads as one set. */
.feat__title a { color: inherit; }
.feat__title a:hover { color: rgb(var(--primary-on-surface)); text-decoration: underline; text-underline-offset: var(--space-1); }


/* Narrow phones: the wordmark and the action cluster must share 320px without overflow. */
@media (max-width: 30rem) {
  .site-header__inner { gap: var(--space-3); }
  .brand img { height: var(--space-10); }
}

/* ── Mega panel: a branch that has its own children shows them, rather than hiding a
   third level behind a second flyout (which is a hover trap on desktop and unreachable
   on touch). Mirrors the source menu's three levels exactly. ── */
.nav__submenu--mega {
  display: none;
  left: auto; right: auto;
  width: min(46rem, calc(100vw - var(--pad) * 2));
  columns: 2;
  column-gap: var(--space-8);
  padding: var(--space-5) var(--space-6);
}
.nav__item:hover > .nav__submenu--mega,
.nav__item:focus-within > .nav__submenu--mega,
.nav__toggle[aria-expanded="true"] + .nav__submenu--mega { display: block; }
.nav__submenu--mega > li { break-inside: avoid; }

.nav__group { margin-block: var(--space-3); }
.nav__group-head {
  display: block; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: rgb(var(--fg)); font-weight: 600; font-size: var(--text-sm);
}
.nav__group-head:hover { background: rgb(var(--color-primary) / 0.09); color: rgb(var(--primary-on-surface)); }
.nav__group-list {
  list-style: none; margin: var(--space-1) 0 0; padding: 0 0 0 var(--space-3);
  border-left: var(--stroke-hairline) solid var(--line-2);
}
.nav__group-list a { color: rgb(var(--muted)); }
.nav__group-list a:hover { color: rgb(var(--primary-on-surface)); }

/* Third level in the mobile drawer. */
.drawer__sub--deep { padding-left: var(--space-4); border-left: var(--stroke-hairline) solid var(--line-2); }
.drawer__sub--deep a { font-size: var(--text-xs); color: rgb(var(--muted)); }

/* ── Editorial band: heading in a left rail, copy in the reading column. Stops a long
   heading stacking into a narrow tower with half the page empty beside it. ── */
.bandsplit { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: start; }
@media (min-width: 66rem) {
  .bandsplit { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .bandsplit__head { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}
.bandsplit .sec-head { margin-bottom: 0; }
/* …except when a link list follows it directly in the sticky side panel. `.sec-head` zeroes its
   own bottom margin and `.ticks` zeroes its top, so the heading and the first link collided.
   Scoped to the adjacency so it cannot add space anywhere the two are not siblings. */
.bandsplit__head .sec-head + .ticks { margin-top: var(--space-4); }
.bandsplit .prose { max-width: 68ch; }

/* A heading that is really a sentence keeps body-ish scale and a wider measure. */
.sec-head--long { max-width: 46ch; }
.sec-head--long .sec-head__title {
  font-size: clamp(var(--text-xl), 2.4vw, calc(var(--text-xl) * 1.15));
  line-height: 1.25;
}

/* Inside the narrow rail a display heading must stay to two or three lines. */
.bandsplit__head .sec-head__title {
  font-size: clamp(calc(var(--text-xl) * 1.05), 2.6vw, calc(var(--text-xl) * 1.32));
  line-height: 1.14;
}
.bandsplit__head .sec-head--long .sec-head__title {
  font-size: clamp(var(--text-lg), 1.9vw, calc(var(--text-xl) * 1.02));
  line-height: 1.28;
}


/* SCV Dental Care — corrections layer.
   convert.py appends this LAST to scv.css. Never edit the generated bundle, and never edit
   ~/scvdentalcare: that build is the client's reference and stays as it is. */

/* ── 1. One corner radius for every image ─────────────────────────────────────
   The rebuild left images square-cornered while every other surface on the site —
   buttons, the appointment pill, the tinted bands — is rounded, so photographs read as
   pasted on rather than part of the page. One rule, one radius, everywhere.

   `--radius-lg` rather than the brand's `--radius-md` (4px): 4px on a 600px-wide
   photograph is invisible, and the point is that the treatment is legible.

   Deliberate exceptions: the header wordmark and any inline icon, which are artwork with
   their own edges and look clipped when rounded. */
img,
.figure img,
.card__media img,
video {
  border-radius: var(--radius-lg);
}
.brand img,
.site-header img,
.site-footer .brand img,
img[width="24"],
img[height="24"],
.topbar img {
  border-radius: 0;
}
/* A figure that clips its own overflow must round too, or the corner it clips squares the
   image back off. */
.figure,
.card__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── 2. The two social icons were not a matched pair ──────────────────────────
   Facebook shipped as a FILLED bare letterform whose artwork sits low and heavy in its
   box; Instagram as a STROKED rounded-square container. Same 24px box, so the boxes were
   aligned and the artwork was not — the "f" hung below the square and out-weighed it.
   The markup fix (repair.py) redraws Facebook in Instagram's own style: same rounded
   square, same 1.8 stroke, same bounds. These rules make the pairing hold regardless. */
.topbar__social svg {
  width: var(--icon-md);
  height: var(--icon-md);
  display: block;
}
.topbar__social a {
  /* the boxes were already centred; this keeps them so if the icon set ever changes */
  line-height: 0;
}

/* ── 3. The page hero's photograph ────────────────────────────────────────────
   Live's page hero is a 400px band: a photograph under a #4B5473 overlay at 80%, declared
   in Elementor's inline CSS. The rebuild has no background-image support at all — `grep -c
   background-image` over its four stylesheets returns 0 — so every one of those bands
   arrived as bare text on paper. repair.py sets `--hero-bg` per page from the live rule.

   The overlay is what makes the text legible over an arbitrary photograph, so it is part of
   the restoration, not decoration: the same #4B5473 at the same .8, and the band's own
   foreground goes light to match. Scoped to `.hero--photo` so a page live does not give a
   background keeps the plain treatment. */
.hero--photo {
  background-image: linear-gradient(rgba(75, 84, 115, .82), rgba(75, 84, 115, .82)), var(--hero-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 400px;
  display: flex;
  align-items: center;
}
.hero--photo .hero__title,
.hero--photo .crumbs,
.hero--photo .crumbs a,
.hero--photo .crumbs [aria-current] { color: rgb(var(--surface-invert-fg, 255 255 255)); }
.hero--photo .crumbs a { text-decoration-color: rgb(255 255 255 / .5); }
.hero--photo .crumbs a:hover { color: #fff; }

/* ── 4. Quick Links reads as two columns ──────────────────────────────────────
   Nine links in a single ~15rem rail ran the footer's middle column twice as tall
   as the two beside it. The list stays ONE <ul>: the columns are a layout fact,
   not a markup fact, so document order and the accessibility tree are unchanged.
   Column-major (5 + 4) preserves the existing top-to-bottom reading order —
   row-major would re-order the links on screen against the DOM. The inherited
   `gap: var(--space-2)` still supplies the row gap; only the column gap widens. */
.footer-links {
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: var(--space-6);
}
/* end: quick-links columns */

/* ── 5. Working Hours: the day and its time sat a rail apart ──────────────────
   `.hours` is `width: 100%` and the time cell is right-aligned, so in a ~400px
   footer column "Monday" sat hard left and "9:00AM-6:00PM" hard right with
   roughly 240px of nothing between them — the pair stopped reading as one line.
   Sizing the table to its content makes the gap a chosen 24px instead of leftover
   column width. Vertical rhythm is untouched: the shorthand's `var(--space-2)`
   block padding still applies, only the right edge is re-set. */
.hours { width: auto; }
.hours th { padding-right: var(--space-6); }
/* end: working-hours spacing */

/* ── 6. Display headings were kerned tighter than the face wants ──────────────
   The kernel emits --tracking-tight: -0.020em from the tenant brand, so it is NOT
   redeclared here. convert.py's leak check (`declared(bundle) & declared(KERNEL_
   REFERENCE)`) fails the build if any of the 114 kernel names is ever declared in
   this bundle, and main.rs asserts the same in a test. Instead the site names its
   own step and DERIVES it from the kernel token, so the brand still sets the
   baseline and this records only how far the display face sits from it:
   -0.020em + 0.012em = -0.008em. Re-skin the tenant and this follows.

   The selector list is not decorative: `.card__title` (0,1,0), `.prose blockquote`
   (0,1,1) and `.quote blockquote p` (0,1,2) each re-declare --tracking-tight at a
   higher specificity than the base `h1, h2` (0,0,1), so an h1/h2-only override
   would silently leave card titles and pull quotes at the old value. */
:root { --scv-tracking-display: calc(var(--tracking-tight) + 0.012em); }
h1, h2,
.card__title,
.prose blockquote,
.quote blockquote p {
  letter-spacing: var(--scv-tracking-display);
}
/* end: display tracking */

/* ── 7. Image/copy order and section widths (client change list V1) ───────────
   `.split--media` puts the wider column first (1.05fr / 0.95fr) and side is decided purely by
   DOM order — there is no reverse or `order` rule anywhere in the stylesheet. So a section that
   wants "image on the left, and it could be shrunk down a little" needs BOTH: the figure moved
   first in the markup, and the ratio swapped, or the image lands in the wider column and gets
   bigger instead of smaller. */
@media (min-width: 60rem) {
  .split--media-rev { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* "Extend the margins so the copy fits the width of this section." Two names for one
   declaration, kept separate on purpose: a later change to the section heading's measure should
   not silently move body prose too. */
.sec-head--full { max-width: none; }
.sec-head--wide { max-width: none; }
.prose--full { max-width: none; }

/* A ticks list promoted into `.prose` keeps the prose bullet indent and row rhythm otherwise. */
.prose > ul.ticks { padding-left: 0; }
.prose > ul.ticks > li + li { margin-top: 0; }

/* ── 11. Section headings were capped in the WRAPPER's font, not the heading's (V2) ───────────
   Client, GLOBAL: "Many headers kerning is too tight and you made it perfect for the Header on
   the home page: 'Santa Clarita Valley Dental Care' and would like that applied to the rest of
   the website headers as appropriate."

   What they are describing is not letter-spacing. `.sec-head { max-width: 30ch }` (scv.css:471)
   resolves `ch` against the WRAPPER's ~1rem font, while the `<h2>` inside runs at 2.5-3rem — so
   the cap lands at roughly five characters per line and a display heading stacks into a narrow
   tower. V1 lifted it on exactly ONE header, the home page's, via `.sec-head--wide`. That is the
   header they are calling perfect, and 105 others still have the defect.

   The fix moves the measure onto the element it is meant to describe, where `ch` finally means
   characters of the heading: the wrapper stops constraining, the title carries a real display
   measure. `--wide`/`--full` keep meaning "no cap at all", and `--long` is untouched — that
   modifier is for a heading that is really a sentence, and it already runs at body-ish size
   where the wrapper's 46ch is close to honest.

   `.sec-head__lede` keeps its own 40ch: it is set in the small font, so its cap was always
   measured in the right one. */
.sec-head:not(.sec-head--long) { max-width: none; }
/* 24ch, not 20: the header the client called perfect is `--wide`, i.e. UNCAPPED, so the
   nearest honest reading is a generous display measure rather than a tight one. 24ch keeps
   the longest title on this site (a 56-character FAQ heading) to three lines. */
.sec-head:not(.sec-head--long) > .sec-head__title { max-width: 24ch; }
.sec-head--wide > .sec-head__title,
.sec-head--full > .sec-head__title { max-width: none; }
/* A centred head now needs the TITLE centred too — the wrapper it used to sit inside is no
   longer the thing being constrained. */
.sec-head--center > .sec-head__title { margin-inline: auto; }

/* ── 12. Home, "Accepting Most Insurances" (V2) ───────────────────────────────────────────────
   Client: "Please bring back the light blue color to this section's background."

   The blue they remember is real but it was never the band: live paints this section `#fff` and
   embeds the LeadConnector form in a rounded panel filled `#F1F7FB`. The import replaced that
   iframe with a native form and the panel went with it. They have asked for the band, so the
   band is what this paints — through the palette, not a literal. `--primary-surface` is the
   brand's own cool tint (the accent mixed into paper at 0.88), already carrying `.callout` and
   the feature icons, and it is the ONE cool-leaning surface here: `--bg-2`, what
   `.section--tinted` uses, is a warm off-white that reads beige.

   Nothing sits below this band to clash with any more — the same change list moves the logo
   strip that used to follow it up into this section's left column. */
.section--cool { background: rgb(var(--primary-surface)); }

/* Both halves stack their own content: copy then logos on the left, copy then form on the
   right. `.split` only lays out the two columns; it has no opinion about what is inside one. */
.insplit__side {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-10));
  align-content: start;
}

/* ── 13. Centred sections, list breathing room, and the Doctors rail (V2) ─────────────────────
   About Us, "Give Us a Call for More Information!": "Center the header and all copy in this
   section". Valencia, the "We understand…" band: "Center this copy". One modifier serves both —
   `.prose` is what holds the copy in each, and centring it centres the <h2> with it. The
   measure has to be re-centred too: `.prose` is capped at 70ch (scv.css:160) and, left
   flush-start, centred TEXT inside a left-aligned block just looks misaligned. */
.prose--center { text-align: center; margin-inline: auto; }

/* Valencia, "What Is Family Dentistry?": "Add space between '..typically includes:' and the
   bullet points underneath". `.prose > * + *` gives every sibling `--space-5`; the list reads
   as a new movement rather than the next paragraph, so it gets the next step up. Scoped to a
   ticks list that FOLLOWS a paragraph, which is exactly the case described. */
.prose > p + ul.ticks { margin-top: var(--space-8); }

/* The five doctor pages: "Add some space between the end of the bio copy and the 'Doctors'
   Header (with the links below it)". The bio is a `.prose` and the rail heading is a `.sec-head`
   directly after it, with nothing between them — a section head that opens a new subject was
   sitting at paragraph spacing. */
.prose + .sec-head { margin-top: clamp(var(--space-10), 6vw, calc(var(--space-10) * 1.5)); }

/* ───────────────────────────── Embedded vendor forms ─────────────────────────────
   The practice's booking + insurance forms are GoHighLevel iframes. Their auto-resize
   script is blocked by CSP on purpose (embed_origins widens frame-src only), so the
   height is declared here and on the element rather than negotiated at runtime — which
   is also what the client asked for: the whole form visible without an inner scrollbar. */
.formembed { display: block; width: 100%; border: 0; border-radius: var(--radius-md); }

/* Booking modal — see scv.js. The CTA keeps its href, so this is enhancement only. */
.bookdlg {
  width: min(46rem, 94vw);
  max-height: min(46rem, 92vh);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: rgb(var(--bg));
  overflow: hidden;
}
.bookdlg::backdrop { background: rgb(0 0 0 / .55); }
.bookdlg__frame { display: block; width: 100%; height: min(44rem, 88vh); border: 0; }
.bookdlg__close {
  position: absolute; top: var(--space-2); right: var(--space-3);
  z-index: 1;
  width: var(--space-8); height: var(--space-8);
  display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1;
  color: rgb(var(--fg));
  background: rgb(var(--bg));
  border: var(--stroke-hairline) solid rgb(var(--line));
  border-radius: var(--radius-full);
  cursor: pointer;
}
.bookdlg__close:hover { background: rgb(var(--bg-2)); }
.bookdlg__close:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }

/* ── 14. Blog rows sat further from the left edge than the right ──────────────
   The listing is a `<ul class="grid--wide grid">`, and `.grid` / `.grid--2` /
   `.grid--wide` are the only list-layout classes here that never reset the UA list
   box (`.logos`, `.feats`, `.ticks`, `.docs`, `.peers`, `.infolist`, `.rail__list`,
   `.nav__list`, `.drawer__list`, `.crumbs ol` all do, and there is no global `ul`
   reset). So `padding-inline-start: 40px` landed on the left and nothing on the
   right — worst on mobile, where `--pad` clamps to 20px. Mirrored in polish.css so a
   convert.py regenerate keeps it. Inert on a `<div>`. */
.grid,
.grid--2,
.grid--wide { list-style: none; margin: 0; padding: 0; }