/* =============================================================================
   Allergy Asthma Foundation — PUBLIC WEBSITE design system
   One stylesheet, five @layers. No preprocessor, no build step. Mobile-first.
   Distinct from the staff dashboard: premium / spacious, not clinical-dense.
   Shared with the dashboard: the indigo brand anchor (#2E3E9C, from the logo)
   and the "hand-authored CSS custom properties, self-hosted fonts" approach.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* --- Typeface --------------------------------------------------------------
   Poppins — self-hosted stand-in for Google Sans (proprietary, not
   distributable). The stack names "Google Sans" first so devices that ship it
   use it; everyone else gets Poppins. One family for display + body; hierarchy
   comes from weight (700/600) and size.                                       */
@font-face {
  font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../fonts/poppins-latin-400-normal.9212f6f9860f.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../../fonts/poppins-latin-500-normal.a09f2fccfee3.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../../fonts/poppins-latin-600-normal.72993dddf88a.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../../fonts/poppins-latin-700-normal.25b0e113ca7c.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../fonts/poppins-latin-ext-400-normal.90926c36b712.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../../fonts/poppins-latin-ext-600-normal.a575b6d9df98.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Libre Baskerville — self-hosted, the site-wide heading typeface (2026-09-07
   decision: every h1-h6 and heading-level element uses --font-display, now
   this instead of Poppins; body copy stays Poppins via --font-sans).
   Google's own hosted build serves the identical file for both the "regular"
   and "700" declarations (Libre Baskerville has no true bold cut) — so only
   the real 400 weight is registered here. Headings ask for 600/700 anyway;
   the browser's built-in font-synthesis (on by default) faux-bolds this
   single face for those requests rather than silently rendering un-bolded,
   which is what would happen if a fake "700" face pointing at the same file
   were registered too (the browser would see an "exact" match and skip
   synthesis entirely). */
@font-face {
  font-family: "Libre Baskerville"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../fonts/libre-baskerville-latin-400-normal.9e3a6b8702fd.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Baskerville"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../fonts/libre-baskerville-latin-ext-400-normal.87e83407f959.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    /* ---- type ---- */
    --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --font-sans: "Google Sans", "Product Sans", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;

    /* fluid scale — min at 360px viewport, max at 1280px
       (compressed 2026-09-04 — normal, non-editorial sizing site-wide;
       see docs/DECISIONS.md §3) */
    --fs--1: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
    --fs-0:  clamp(0.875rem, 0.83rem + 0.20vw, 0.96875rem);
    --fs-1:  clamp(1.0rem, 0.94rem + 0.30vw, 1.175rem);
    --fs-2:  clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);
    --fs-3:  clamp(1.30rem, 1.10rem + 0.85vw, 1.875rem);
    --fs-4:  clamp(1.45rem, 1.15rem + 1.30vw, 2.25rem);
    --fs-5:  clamp(1.70rem, 1.20rem + 2.10vw, 3.25rem);
    --lh-tight: 1.12; --lh-snug: 1.28; --lh: 1.62;
    --tracking-tight: -0.02em; --tracking-wide: 0.08em;

    /* ---- colour (light only) — from the Allergy Asthma Foundation logo ---- */
    --brand: #2E3E9C;          /* indigo — the wordmark + shield */
    --brand-600: #26327E;
    --brand-700: #1E2864;
    --brand-400: #6672C4;
    --brand-tint: #EAEDF9;
    --brand-tint-2: #F4F6FC;
    --accent: #B23C85;         /* magenta — the left wing · CTAs · white text ≈ 5.4:1 (AA) */
    --accent-600: #8E2E6A;
    --accent-tint: #F9E9F2;
    --teal: #3E8CAE;           /* the right wing / tagline — supporting accent */
    --teal-600: #2F6E8B;
    --teal-tint: #E7F1F6;

    --ink: #1A2133;            /* near-black, cool indigo cast */
    --ink-2: #3D4658;
    --muted: #6A7385;
    --faint: #98A0B0;
    --line: #E6E7EF;
    --line-strong: #D3D6E1;
    --paper: #FBFBFE;          /* cool off-white ground */
    --surface: #FFFFFF;
    --surface-2: #F3F4F9;

    --success: #1C7A4A; --success-tint: #E7F3EC;
    --danger:  #C0392B; --danger-tint:  #FBEAE8;
    --info:    #2E5FB0; --info-tint:    #E9EEF9;

    --overlay: rgba(18, 22, 45, 0.55);

    /* ---- space (some fluid) ---- */
    --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
    --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem;
    --space-xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
    --space-3xl: clamp(5rem, 3.5rem + 6vw, 8rem);

    /* ---- layout ---- */
    --container: 1200px;
    --container-narrow: 720px;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
    --header-h: 88px;
    /* real announce+header height, measured live by header.js::initChromeHeight —
       this fallback only covers the instant before that JS runs */
    --chrome-h: 137px;
    /* the quick-actions band's own (desktop) height, and how much of it is
       allowed to visibly peek below the hero's fold — both hero height and
       the band's pull-up margin are derived from these two, so the two
       numbers can never drift out of sync with each other. */
    --actions-bar-h: clamp(64px, 9vh, 84px);
    --actions-peek: clamp(20px, 3vh, 32px);

    /* ---- radius (softer than the dashboard) ---- */
    --radius-s: 8px; --radius: 14px; --radius-l: 24px; --radius-pill: 999px;

    /* ---- elevation (warm-tinted, real depth) ---- */
    --shadow-1: 0 1px 2px rgba(18, 22, 45, 0.06), 0 1px 1px rgba(18, 22, 45, 0.04);
    --shadow-2: 0 6px 20px -8px rgba(18, 22, 45, 0.14), 0 2px 6px rgba(18, 22, 45, 0.06);
    --shadow-3: 0 18px 44px -14px rgba(18, 22, 45, 0.20), 0 4px 12px rgba(18, 22, 45, 0.07);
    --shadow-4: 0 40px 90px -24px rgba(18, 22, 45, 0.30);

    /* ---- motion ---- */
    --ease: cubic-bezier(0.22, 0.61, 0.30, 1);
    --dur-1: 140ms; --dur-2: 260ms; --dur-3: 480ms;

    /* ---- z-index ---- */
    --z-header: 100; --z-drawer: 200; --z-float: 300; --z-modal: 400; --z-toast: 500;
  }
}

/* =============================================================================
   BASE
   ========================================================================== */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-0);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 var(--space-s);
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-5); }
  h2 { font-size: var(--fs-4); }
  h3 { font-size: var(--fs-2); }
  h4 { font-size: var(--fs-1); font-weight: 600; }
  p { margin: 0 0 var(--space-s); max-width: 68ch; }
  a { color: var(--brand); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
  a:hover { color: var(--brand-600); }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  strong, b { font-weight: 600; }
  ul, ol { padding-left: 1.2em; }
  hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-l) 0; }

  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--radius-s);
  }
  ::selection { background: var(--brand-tint); color: var(--ink); }

  .skip-link {
    position: absolute; left: var(--space-s); top: var(--space-s);
    transform: translateY(-150%);
    background: var(--surface); color: var(--ink); padding: 0.6rem 1rem;
    border-radius: var(--radius-s); box-shadow: var(--shadow-2); z-index: var(--z-toast);
    transition: transform var(--dur-1) var(--ease);
  }
  .skip-link:focus { transform: none; }
}

/* =============================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }
  .container--narrow { --container: var(--container-narrow); }

  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  .section--tint { background: var(--brand-tint-2); }
  .section--ink { background: var(--ink); color: var(--surface); }
  .section--ink h2, .section--ink h3 { color: var(--surface); }
  .section--ink p { color: rgba(255, 255, 255, 0.82); }

  .stack > * + * { margin-top: var(--space-s); }
  .stack-l > * + * { margin-top: var(--space-l); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

  .grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
  @media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
    .grid--sidebar { grid-template-columns: 1fr 320px; gap: var(--space-2xl); }
  }
}

/* =============================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Buttons ------------------------------------------------------------ */
  .btn {
    --_bg: var(--brand); --_fg: #fff; --_bd: var(--brand);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    font: inherit; font-weight: 600; font-size: var(--fs-0);
    padding: 0.85em 1.4em; border-radius: var(--radius-pill);
    background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
                box-shadow var(--dur-1) var(--ease);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); color: var(--_fg); }
  .btn:active { transform: translateY(0); }
  .btn--accent { --_bg: var(--accent); --_bd: var(--accent); }
  .btn--accent:hover { --_bg: var(--accent-600); }
  .btn--outline { --_bg: transparent; --_fg: var(--brand); }
  .btn--outline:hover { --_bg: var(--brand-tint); color: var(--brand-600); }
  .btn--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: transparent; }
  .btn--ghost:hover { --_bg: var(--surface-2); box-shadow: none; }
  .btn--on-dark { --_bg: #fff; --_fg: var(--ink); --_bd: #fff; }
  .btn--on-dark.btn--outline { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,.6); }
  .btn--lg { padding: 1em 1.7em; font-size: var(--fs-1); }
  .btn--sm { padding: 0.6em 1.1em; font-size: var(--fs--1); }
  .btn--block { width: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

  /* --- Badges ----------------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--fs--1); font-weight: 600; line-height: 1;
    padding: 0.4em 0.75em; border-radius: var(--radius-pill);
    background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  }
  .badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
  .badge--open { background: var(--success-tint); color: var(--success); border-color: transparent; }
  .badge--unavailable { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
  .badge--featured { background: var(--accent-tint); color: var(--accent-600); border-color: transparent; }
  .badge--plain::before { display: none; }

  /* --- Eyebrow / section header --------------------------------------- */
  .eyebrow {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--fs--1);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-400);
    margin: 0 0 var(--space-xs);
  }
  .section-header { max-width: var(--container-narrow); margin-bottom: var(--space-xl); }
  .section-header--center { margin-inline: auto; text-align: center; }
  .section-header p { color: var(--muted); font-size: var(--fs-1); margin-bottom: 0; }

  /* --- Cards ---------------------------------------------------------- */
  .card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-l); padding: var(--space-l);
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  a.card, a.card:hover { text-decoration: none; color: inherit; }
  a.card h3, a.card p, a.card span { text-decoration: none; }
  .card--link:hover, .card--link:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
  .card--link:hover .card__title, .card--link:focus-visible .card__title { color: var(--brand); }
  /* image zoom on card hover (doctor / blog / album cards) */
  .card .img-frame img, .doc-card__photo img { transition: transform var(--dur-3) var(--ease); }
  .card--link:hover .img-frame img, .card--link:hover .doc-card__photo img { transform: scale(1.045); }
  .card__icon { transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
  .card--link:hover .card__icon { background: var(--brand); color: #fff; }
  .card__icon {
    width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center;
    background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-s);
  }
  .card__title { font-size: var(--fs-1); margin-bottom: var(--space-2xs); }
  .card__meta { color: var(--muted); font-size: var(--fs--1); }
  .card p { color: var(--ink-2); margin-bottom: 0; }
  .card__cta { margin-top: var(--space-s); font-weight: 600; color: var(--brand); display: inline-flex; gap: .35em; }
  .card--link:hover .card__cta { gap: .6em; }

  /* doctor card */
  .doc-card { text-align: left; padding: 0; overflow: clip; }
  .doc-card__photo {
    aspect-ratio: 4 / 5; background: var(--brand-tint-2); position: relative;
    display: grid; place-items: center;
  }
  .doc-card__photo img { width: 100%; height: 100%; object-fit: cover; }
  .doc-card__body { padding: var(--space-m); }
  .doc-card__name { font-size: var(--fs-1); margin-bottom: 0.15em; }
  .doc-card__spec { color: var(--brand); font-weight: 600; font-size: var(--fs--1); }
  .doc-card__qual { color: var(--muted); font-size: var(--fs--1); margin-top: 0.25em; }

  /* monogram fallback for any missing image */
  .monogram {
    width: 100%; height: 100%; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-tint), var(--brand-tint-2));
    color: var(--brand); font-family: var(--font-display); font-size: var(--fs-4); font-weight: 700;
  }
  .img-frame { background: var(--surface-2); overflow: clip; }
  .img-frame img { width: 100%; height: 100%; object-fit: cover; }

  /* testimonial */
  .quote { padding: var(--space-l); }
  .quote__mark { font-family: var(--font-display); font-size: var(--fs-5); line-height: 0.6; color: var(--brand-400); }
  .quote__text { font-size: var(--fs-1); color: var(--ink); margin: var(--space-xs) 0 var(--space-m); }
  .quote__by { font-weight: 600; }
  .quote__by span { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs--1); }

  /* --- Header + nav -------------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: transparent;                 /* transparent over the hero */
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
                box-shadow var(--dur-2) var(--ease);
  }
  .site-header[data-scrolled] {              /* solid + slightly more compact once scrolled */
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgba(22,33,31,0.02), var(--shadow-1);
  }
  .site-header__bar {
    min-height: var(--header-h); display: flex; align-items: center; gap: var(--space-m);
    transition: min-height var(--dur-2) var(--ease);
  }
  .site-header[data-scrolled] .site-header__bar { min-height: calc(var(--header-h) - 14px); }
  @media (min-width: 1024px) { .site-header__bar { gap: var(--space-l); } }
  .brand { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
  /* no chip — a soft drop-shadow keeps the mark legible over the transparent,
     over-hero header state without boxing it in */
  .brand__logo {
    height: 44px; width: auto; display: block;
    filter: drop-shadow(0 1px 2px rgba(18,22,45,0.18));
    transition: height var(--dur-2) var(--ease);
  }
  @media (min-width: 1024px) { .brand__logo { height: 54px; } }
  .site-header[data-scrolled] .brand__logo { height: 38px; }
  @media (min-width: 1024px) { .site-header[data-scrolled] .brand__logo { height: 46px; } }
  .nav-mobile__head .brand__logo, .brand--footer .brand__logo { height: 34px; filter: none; }

  .nav-desktop { display: none; }
  @media (min-width: 1024px) {
    .nav-desktop { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  }
  .nav-desktop__link {
    display: inline-flex; align-items: center; gap: 0.35em;
    color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: var(--fs--1);
    padding: 0.7em 0.85em; border-radius: var(--radius-s); white-space: nowrap;
    background: transparent; border: 0; font-family: inherit; cursor: pointer;
  }
  .nav-desktop__link:hover, .nav-desktop__link[aria-current="page"], .nav-desktop__link[aria-expanded="true"] {
    color: var(--brand); background: var(--brand-tint-2);
  }
  .nav-desktop__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .nav-desktop__link .pi { transition: transform var(--dur-1) var(--ease); }
  .nav-desktop__link[aria-expanded="true"] .pi { transform: rotate(180deg); }
  @media (min-width: 1280px) { .nav-desktop__link { padding: 0.7em 1.05em; } }
  .header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); }
  @media (min-width: 1024px) { .header-actions { margin-left: 0; } }

  /* --- nav dropdowns: Departments (mega) + More (small) --------------- */
  .nav-item { position: relative; }
  .dropdown-panel {
    position: absolute; top: calc(100% + 12px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); z-index: var(--z-header);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
  }
  .nav-item[data-open] .dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

  .more-menu {
    right: 0; min-width: 200px; padding: 0.4rem;
  }
  .more-menu a {
    display: flex; align-items: center; gap: 0.6em; padding: 0.65em 0.8em;
    border-radius: var(--radius-s); text-decoration: none; color: var(--ink);
    font-weight: 500; font-size: var(--fs--1);
  }
  .more-menu a:hover, .more-menu a:focus-visible { background: var(--surface-2); color: var(--brand); }

  .nav-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-s); cursor: pointer;
  }
  @media (min-width: 1024px) { .nav-toggle { display: none; } }

  /* mobile drawer */
  .nav-mobile {
    position: fixed; inset: 0; z-index: var(--z-drawer);
    background: var(--paper); padding: var(--space-l) var(--gutter);
    display: flex; flex-direction: column; gap: var(--space-xs);
    transform: translateX(100%); transition: transform var(--dur-2) var(--ease);
    overflow-y: auto;
  }
  .nav-mobile[data-open] { transform: none; }
  .nav-mobile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-m); }
  .nav-mobile a { font-family: var(--font-display); font-size: var(--fs-2); color: var(--ink); text-decoration: none; padding: 0.4em 0; border-bottom: 1px solid var(--line); }
  .nav-mobile a:last-of-type { border-bottom: 0; }
  .nav-mobile .btn { margin-top: var(--space-m); }
  @media (min-width: 1024px) { .nav-mobile { display: none; } }

  .nav-mobile__group { border-bottom: 1px solid var(--line); }
  .nav-mobile__group summary {
    font-family: var(--font-display); font-size: var(--fs-2); color: var(--ink);
    padding: 0.4em 0; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-mobile__group summary::-webkit-details-marker { display: none; }
  .nav-mobile__group summary .pi { transition: transform var(--dur-1) var(--ease); }
  .nav-mobile__group[open] summary .pi { transform: rotate(180deg); }
  .nav-mobile__sub { display: flex; flex-direction: column; padding: 0 0 0.6em 0.2em; }
  .nav-mobile__sub a { font-family: var(--font-sans); font-size: var(--fs-0); color: var(--ink-2); border-bottom: 0; padding: 0.35em 0; }

  /* location selector */
  .loc-select { position: relative; }
  .loc-select__btn {
    display: inline-flex; align-items: center; gap: 0.4em; font: inherit; font-weight: 600;
    background: var(--brand-tint-2); color: var(--brand); border: 1px solid var(--brand-tint);
    padding: 0.5em 0.9em; border-radius: var(--radius-pill); cursor: pointer;
  }
  .loc-select__menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-3); padding: 0.4rem; display: none; z-index: var(--z-header);
  }
  .loc-select[data-open] .loc-select__menu { display: block; }
  .loc-select__menu a { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.6em 0.7em; border-radius: var(--radius-s); text-decoration: none; color: var(--ink); }
  .loc-select__menu a:hover { background: var(--surface-2); }
  .loc-select__menu a[aria-current="true"] { color: var(--brand); font-weight: 600; }

  /* announcement bar — the emergency utility strip, aligned to the same
     container as the header bar below it so the two read as one system */
  .announce {
    background: var(--ink); color: rgba(255,255,255,0.9); font-size: var(--fs--1); font-weight: 500; letter-spacing: 0.01em;
  }
  .announce__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75em var(--space-m);
    padding: 0.55rem 0; flex-wrap: wrap;
  }
  .announce__text { display: inline-flex; align-items: center; gap: 0.55em; }
  .announce__text .pi { opacity: 0.75; flex-shrink: 0; }
  .announce__phone {
    display: inline-flex; align-items: center; gap: 0.5em;
    color: #fff; font-weight: 700; text-decoration: none;
    padding: 0.35em 0.85em; border-radius: var(--radius-s);
    background: rgba(255,255,255,0.12);
    transition: background var(--dur-1) var(--ease);
  }
  .announce__phone:hover, .announce__phone:focus-visible { background: rgba(255,255,255,0.2); }
  .announce--urgent { background: var(--danger); }
  .announce--urgent .announce__phone { background: rgba(255,255,255,0.16); }
  .announce--urgent .announce__phone:hover { background: rgba(255,255,255,0.26); }

  /* --- Hero -------------------------------------------------------- */
  .hero { position: relative; overflow: clip; }
  .hero__inner {
    display: grid; gap: var(--space-l); align-items: center;
    padding-block: var(--space-xl) var(--space-2xl);
  }
  @media (min-width: 1024px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); padding-block: var(--space-2xl); } }
  .hero__title { font-size: var(--fs-5); font-weight: 600; }
  .hero__lead { font-size: var(--fs-1); color: var(--ink-2); max-width: 42ch; }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
  .hero__phone { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--space-m); font-weight: 600; color: var(--ink); text-decoration: none; }
  .hero__phone span { color: var(--muted); font-weight: 400; }
  .hero__media {
    aspect-ratio: 5 / 4; border-radius: var(--radius-l); overflow: clip;
    background: var(--brand-tint-2); box-shadow: var(--shadow-3);
  }
  .hero__media img { width: 100%; height: 100%; object-fit: cover; }
  .hero--compact .hero__inner { padding-block: var(--space-xl); grid-template-columns: 1fr; gap: var(--space-s); }
  .hero--compact .hero__title { font-size: var(--fs-4); }

  /* quick actions strip */
  .quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
  @media (min-width: 768px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } }
  .quick-actions a {
    display: flex; flex-direction: column; align-items: center; gap: 0.5em; text-align: center;
    padding: var(--space-m) var(--space-s); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs--1);
    transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .quick-actions a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--brand); }
  .quick-actions svg { width: 24px; height: 24px; color: var(--brand); }

  /* --- CTA band -------------------------------------------------- */
  .cta-band {
    background: var(--brand); color: #fff; border-radius: var(--radius-l);
    padding: var(--space-2xl); text-align: center;
  }
  .cta-band h2 { color: #fff; }
  .cta-band p { color: rgba(255,255,255,0.85); margin-inline: auto; }
  .cta-band .cluster { justify-content: center; margin-top: var(--space-m); }

  /* --- Contact / location block -------------------------------- */
  .contact-grid { display: grid; gap: var(--space-l); }
  @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
  .map-frame { aspect-ratio: 16 / 10; border-radius: var(--radius-l); overflow: clip; border: 1px solid var(--line); background: var(--surface-2); }
  .map-frame iframe { width: 100%; height: 100%; border: 0; }
  .hours-list { list-style: none; padding: 0; margin: 0; }
  .hours-list li { display: flex; justify-content: space-between; gap: 1em; padding: 0.5em 0; border-bottom: 1px solid var(--line); font-size: var(--fs--1); }
  .hours-list li:last-child { border-bottom: 0; }
  .hours-list [data-today] { font-weight: 700; color: var(--brand); }

  /* --- Footer — modern light 4-column close ------------------- */
  .site-footer {
    position: relative; overflow: clip; font-size: var(--fs--1);
    color: var(--ink-2); background: var(--surface);
    border-top: 1px solid var(--line-strong);
  }
  /* a thin brand gradient hairline sitting on the top edge */
  .site-footer::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 52%, var(--teal) 100%);
  }
  .site-footer a { color: var(--ink-2); text-decoration: none; transition: color var(--dur-1) var(--ease); }
  .site-footer a:hover, .site-footer a:focus-visible { color: var(--brand); }

  /* soft light wash, top-right — replaces the old dark glow */
  .site-footer__glow {
    position: absolute; top: -30%; right: -6%; left: auto; width: 620px; max-width: 70vw; aspect-ratio: 1;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%); opacity: 0.7;
  }

  .footer-inner {
    position: relative; z-index: 1; display: grid; gap: var(--space-xl) var(--space-l);
    padding-block: var(--space-2xl) var(--space-xl); align-items: start;
  }
  @media (min-width: 620px) and (max-width: 959px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) {
    /* 3 columns on branch-less pages (no Quick links), 4 with it */
    .footer-inner { grid-template-columns: 1.7fr 1fr 1.3fr; gap: var(--space-2xl); }
    .footer-inner:has(nav[aria-label="Quick links"]) { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; }
  }

  .footer-col--brand { max-width: 36ch; }
  .footer-col--brand .brand__logo { height: 56px; width: auto; }
  @media (min-width: 960px) { .footer-col--brand .brand__logo { height: 64px; } }
  .footer-brand__statement {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); color: var(--ink);
    line-height: 1.15; margin: var(--space-m) 0 var(--space-2xs); max-width: 18ch;
  }
  .footer-brand__desc { color: var(--muted); margin: 0 0 var(--space-m); max-width: 34ch; }

  .site-footer h4 {
    display: flex; align-items: center; gap: 0.55em;
    color: var(--muted); font-family: var(--font-sans); font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    margin: 0 0 var(--space-s);
  }
  .site-footer h4::before {
    content: ""; width: 14px; height: 2px; border-radius: 1px; flex: none;
    background: linear-gradient(90deg, var(--brand), var(--accent));
  }
  .site-footer ul { list-style: none; padding: 0; margin: 0; }
  .footer-col > ul { display: flex; flex-direction: column; gap: 0.15em; }
  .footer-col > ul a {
    display: inline-flex; align-items: center; padding: 0.34em 0;
    transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .footer-col > ul a:hover, .footer-col > ul a:focus-visible { color: var(--brand); transform: translateX(3px); }

  /* contact column sits in a faint card — the one asymmetric accent */
  .footer-col--contact {
    padding: var(--space-l); border-radius: var(--radius-l);
    background: var(--surface-2); border: 1px solid var(--line);
  }
  .footer-contact { display: flex; flex-direction: column; gap: 0.7em; margin: 0; }
  .footer-contact li { display: flex; align-items: flex-start; gap: 0.7em; line-height: 1.4; }
  .footer-contact__ic {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand);
  }
  .footer-contact a { border-bottom: 1px solid transparent; }
  .footer-contact a:hover, .footer-contact a:focus-visible { color: var(--brand); border-bottom-color: currentColor; }

  .footer-cta {
    display: flex; flex-direction: column; gap: var(--space-2xs);
    margin-top: var(--space-m); padding-top: var(--space-m); border-top: 1px solid var(--line);
  }
  .footer-cta .btn { width: 100%; justify-content: center; }

  .socials { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xs); }
  .socials a {
    width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink-2);
    border: 1px solid var(--line-strong); border-radius: 50%;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
      color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .socials a:hover, .socials a:focus-visible {
    background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px);
  }

  .footer-bottom {
    position: relative; z-index: 1; border-top: 1px solid var(--line);
    padding-block: var(--space-m); display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l);
    justify-content: space-between; align-items: center; color: var(--muted);
  }
  .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-m); }
  .footer-legal a { color: var(--muted); }
  .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--brand); }

  /* --- Floating contact (mobile) ------------------------------ */
  .float-contact {
    position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: var(--z-float);
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  @media (min-width: 1024px) { .float-contact { display: none; } }
  .float-contact a {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: #fff; box-shadow: var(--shadow-3);
  }
  .float-contact a.is-accent { background: var(--accent); }

  /* --- Forms ------------------------------------------------- */
  .form-field { margin-bottom: var(--space-m); }
  .form-field > label { display: block; font-weight: 600; font-size: var(--fs--1); margin-bottom: 0.4em; }
  .form-field .req { color: var(--danger); }
  .input, .select, .textarea {
    width: 100%; font: inherit; font-size: var(--fs-0);
    padding: 0.8em 1em; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s);
    background: var(--surface); color: var(--ink); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .textarea { min-height: 7rem; resize: vertical; }
  .form-field--error .input, .form-field--error .select, .form-field--error .textarea { border-color: var(--danger); }
  .form-field__error { color: var(--danger); font-size: var(--fs--1); margin-top: 0.4em; }
  .form-field__hint { color: var(--muted); font-size: var(--fs--1); margin-top: 0.4em; }
  .form-note { padding: var(--space-s) var(--space-m); border-radius: var(--radius-s); font-size: var(--fs--1); }
  .form-note--success { background: var(--success-tint); color: var(--success); }
  .form-note--error { background: var(--danger-tint); color: var(--danger); }
  .form-note--info { background: var(--info-tint); color: var(--info); }
  .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-l); box-shadow: var(--shadow-2); }

  /* --- Modal ---------------------------------------------- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay);
    display: grid; place-items: center; padding: var(--gutter);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
  }
  .modal-overlay[data-open] { opacity: 1; visibility: visible; }
  .modal {
    background: var(--surface); border-radius: var(--radius-l); padding: var(--space-l);
    max-width: 32rem; width: 100%; box-shadow: var(--shadow-4);
    transform: translateY(12px) scale(0.98); transition: transform var(--dur-2) var(--ease);
  }
  .modal-overlay[data-open] .modal { transform: none; }
  .modal__head { display: flex; align-items: start; justify-content: space-between; gap: 1em; margin-bottom: var(--space-s); }
  .modal__close { background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 0.25em; }

  /* --- Toast -------------------------------------------- */
  .toast-region { position: fixed; left: 0; right: 0; bottom: var(--gutter); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; }
  .toast {
    pointer-events: auto; background: var(--ink); color: #fff; padding: 0.85em 1.2em;
    border-radius: var(--radius-pill); box-shadow: var(--shadow-3); font-size: var(--fs--1); font-weight: 500;
    display: flex; align-items: center; gap: 0.6em; max-width: min(90vw, 30rem);
    animation: toast-in var(--dur-2) var(--ease);
  }
  .toast--success { background: var(--success); }
  .toast--error { background: var(--danger); }
  @keyframes toast-in { from { transform: translateY(1rem); opacity: 0; } }

  /* --- States ------------------------------------------ */
  .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-s); }
  @keyframes shimmer { to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
  .state {
    text-align: center; padding: var(--space-2xl) var(--space-m); border: 1px dashed var(--line-strong);
    border-radius: var(--radius-l); background: var(--surface);
  }
  .state__icon { width: 48px; height: 48px; margin: 0 auto var(--space-s); color: var(--faint); }
  .state h3 { font-size: var(--fs-1); }
  .state p { color: var(--muted); margin-inline: auto; }

  /* --- Gallery + lightbox ----------------------------- */
  .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); }
  @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); } }
  .gallery-grid button { border: 0; padding: 0; background: var(--surface-2); border-radius: var(--radius); overflow: clip; cursor: pointer; aspect-ratio: 4 / 3; }
  .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
  .gallery-grid button:hover img { transform: scale(1.05); }
  .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.9); display: none; place-items: center; padding: var(--gutter); }
  .lightbox[data-open] { display: grid; }
  .lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); }
  .lightbox__close { position: absolute; top: var(--gutter); right: var(--gutter); background: transparent; border: 0; color: #fff; cursor: pointer; }

  /* --- Breadcrumb ------------------------------------ */
  .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4em; font-size: var(--fs--1); color: var(--muted); padding-block: var(--space-m); }
  .breadcrumb a { color: var(--muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--brand); }
  .breadcrumb [aria-current="page"] { color: var(--ink); }

  /* --- Logos / trust row ---------------------------- */
  .trust-row { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-2xl); align-items: center; justify-content: center; }
  .trust-row div { text-align: center; }
  .trust-row strong { display: block; font-family: var(--font-display); font-size: var(--fs-2); color: var(--brand); }
  .trust-row span { color: var(--muted); font-size: var(--fs--1); }

  /* --- Detail-page layout (main + aside) -------------------------- */
  .detail-layout { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 900px) {
    .detail-layout { grid-template-columns: 1fr minmax(280px, 340px); gap: var(--space-2xl); }
    .detail-layout--doctor { grid-template-columns: minmax(220px, 300px) 1fr; }
  }
  .detail-layout__aside { position: sticky; top: calc(var(--header-h) + var(--space-m)); }
  @media (max-width: 899px) { .detail-layout__aside { position: static; } }
  .doc-hero-photo { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
  .doc-hero-photo .monogram { font-size: var(--fs-5); }

  /* --- Filter bar ------------------------------------------------ */
  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; margin-bottom: var(--space-xl); }
  .filter-bar__search { display: flex; align-items: center; gap: 0.5em; flex: 1 1 260px; min-width: 220px;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.15em 1em; background: var(--surface); color: var(--muted); }
  .filter-bar__search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .filter-bar__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-0); padding: 0.7em 0; color: var(--ink); }
  .filter-bar__chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
  .chip {
    font: inherit; font-size: var(--fs--1); font-weight: 600; cursor: pointer;
    padding: 0.5em 0.95em; border-radius: var(--radius-pill);
    background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-2);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .chip:hover { border-color: var(--brand-400); color: var(--brand); }
  .chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .filter-bar__count { margin: 0 0 0 auto; color: var(--muted); font-size: var(--fs--1); }

  /* --- FAQ accordion ------------------------------------------- */
  .faq__item { border-bottom: 1px solid var(--line); }
  .faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1em;
    padding: var(--space-m) 0; font-family: var(--font-display); font-size: var(--fs-1);
    color: var(--ink); cursor: pointer; list-style: none;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__chev { transition: transform var(--dur-2) var(--ease); color: var(--brand); flex-shrink: 0; }
  .faq__item[open] .faq__chev { transform: rotate(180deg); }
  .faq__a { padding-bottom: var(--space-m); color: var(--ink-2); max-width: 64ch; }

  /* --- Related row ------------------------------------------- */
  .related__title { font-size: var(--fs-1); margin-bottom: var(--space-s); }
  .related__row { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .related__row { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .related__row { grid-template-columns: repeat(3, 1fr); } }
  .related__card {
    display: flex; align-items: center; gap: var(--space-s); text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-s) var(--space-m);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .related__card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); color: inherit; }
  .related__card strong { display: block; }
  .related__meta { display: block; color: var(--muted); font-size: var(--fs--1); }
  .related__mono { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; }

  /* --- Doctor at-a-glance ----------------------------------- */
  .doc-meta { display: grid; gap: var(--space-s); margin: 0; }
  .doc-meta > div { display: grid; gap: 0.15em; }
  .doc-meta dt { font-size: var(--fs--1); color: var(--muted); font-weight: 600; }
  .doc-meta dd { margin: 0; color: var(--ink); }
  .doc-meta .badge + .badge, .doc-meta .badge { margin: 0.2em 0.3em 0 0; }

  /* --- Ordered item list (package contents) ---------------- */
  .item-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
  .item-list li { display: flex; align-items: baseline; gap: var(--space-s); padding: 0.7em 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
  .item-list li:last-child { border-bottom: 0; }
  .item-list__n { flex-shrink: 0; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: var(--fs--1); font-weight: 700; }

  /* --- Price card ---------------------------------------- */
  .price-card { text-align: center; }
  .price-card__amount { display: block; font-family: var(--font-display); font-size: var(--fs-4); color: var(--brand); line-height: 1; margin-bottom: 0.2em; }

  /* --- Sticky detail CTA (mobile) ----------------------- */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(8px); border-top: 1px solid var(--line);
    padding: var(--space-2xs) var(--gutter); padding-bottom: max(var(--space-2xs), env(safe-area-inset-bottom));
  }
  .sticky-cta__inner { display: flex; align-items: center; gap: var(--space-s); max-width: var(--container); margin-inline: auto; }
  .sticky-cta__note { font-weight: 600; font-size: var(--fs--1); flex: 1; }
  .sticky-cta .btn { flex-shrink: 0; }
  @media (min-width: 1024px) { .sticky-cta { display: none; } }

  /* --- Bare form controls inside .form-field (Django-rendered) ------- */
  .form-field input:not([type="checkbox"]):not([type="radio"]),
  .form-field select, .form-field textarea {
    width: 100%; font: inherit; font-size: var(--fs-0);
    padding: 0.8em 1em; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s);
    background: var(--surface); color: var(--ink);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
  }
  .form-field textarea { min-height: 6.5rem; resize: vertical; }
  .form-field--error input, .form-field--error select, .form-field--error textarea { border-color: var(--danger); }
  .form-field input[type="checkbox"] { width: 1.15em; height: 1.15em; flex-shrink: 0; accent-color: var(--brand); margin-top: 0.15em; }
  .form-field__error { display: flex; align-items: center; gap: 0.35em; }

  /* --- Featured blog post ---------------------------------------- */
  .feature-post { display: grid; gap: var(--space-l); padding: 0; overflow: clip; }
  @media (min-width: 800px) { .feature-post { grid-template-columns: 1.1fr 1fr; align-items: stretch; } }
  .feature-post__media { min-height: 240px; display: grid; place-items: center; }
  .feature-post__body { padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-xs); }
  .feature-post__body h2 { font-size: var(--fs-3); }

  /* --- Album card + count badge -------------------------------- */
  .album-card { padding: var(--space-m); }
  .album-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); display: grid; place-items: center; }
  .album-card__count {
    position: absolute; right: var(--space-xs); bottom: var(--space-xs);
    background: rgba(16,24,22,0.72); color: #fff; font-size: var(--fs--1); font-weight: 600;
    padding: 0.3em 0.7em; border-radius: var(--radius-pill);
  }

  /* --- Masonry photo grid (CSS columns) ---------------------- */
  .masonry { column-count: 2; column-gap: var(--space-s); }
  @media (min-width: 700px) { .masonry { column-count: 3; column-gap: var(--space-m); } }
  @media (min-width: 1100px) { .masonry { column-count: 4; } }
  .masonry__item {
    display: block; width: 100%; break-inside: avoid; margin-bottom: var(--space-s);
    border: 0; padding: 0; cursor: pointer; border-radius: var(--radius); overflow: clip;
    background: var(--surface-2); position: relative; aspect-ratio: 1;
  }
  .masonry__item:nth-child(3n) { aspect-ratio: 3 / 4; }
  .masonry__item:nth-child(4n) { aspect-ratio: 4 / 3; }
  .masonry__item .monogram { position: absolute; inset: 0; }
  .masonry__cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2xs) var(--space-xs);
    background: linear-gradient(transparent, rgba(16,24,22,0.6)); color: #fff;
    font-size: var(--fs--1); text-align: left; opacity: 0; transition: opacity var(--dur-2) var(--ease);
  }
  .masonry__item:hover .masonry__cap, .masonry__item:focus-visible .masonry__cap { opacity: 1; }

  /* --- Article prose ---------------------------------------- */
  .prose p { font-size: var(--fs-1); line-height: var(--lh); color: var(--ink-2); margin-bottom: var(--space-m); }
  .prose h2 { font-size: var(--fs-2); margin-top: var(--space-l); }
}

/* =============================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .text-center { text-align: center; }
  .measure { max-width: var(--container-narrow); }
  .measure-center { max-width: var(--container-narrow); margin-inline: auto; }
  .muted { color: var(--muted); }
  .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
  .mt-l { margin-top: var(--space-l); } .mt-xl { margin-top: var(--space-xl); }
  .lock-scroll { overflow: hidden; }
  [hidden] { display: none !important; }
  .hide-sm { display: none; }
  /* Its one caller (header "Book appointment") needs the full nav-desktop
     link set + location selector alongside it — that combination's
     min-content width doesn't actually fit until >=1200px; showing it at
     1024px overflowed the header by ~60px (the hero's own CTA already
     covers this need below 1200, so nothing is lost by waiting). */
  @media (min-width: 1200px) { .hide-sm { display: inline-flex; } }

  /* ---- Reveal-on-scroll animation system ----------------------------
     Content is visible by default (no-JS / pre-boot safe). reveal.js adds
     `.js-reveal` to <html> only when it can animate AND motion is allowed.
     Direction: data-reveal or data-reveal="up|down|left|right|scale".      */
  .js-reveal [data-reveal],
  .js-reveal [data-reveal-stagger] > *,
  .js-reveal [data-reveal-image] > img,
  .js-reveal [data-reveal-image] {
    opacity: 0; transform: translateY(20px);
    transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease),
                clip-path var(--dur-3) var(--ease);
  }
  .js-reveal [data-reveal="down"] { transform: translateY(-20px); }
  .js-reveal [data-reveal="left"] { transform: translateX(24px); }
  .js-reveal [data-reveal="right"] { transform: translateX(-24px); }
  .js-reveal [data-reveal="scale"] { transform: scale(0.94); }

  .js-reveal [data-reveal].is-in,
  .js-reveal [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

  .js-reveal [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; }
  .js-reveal [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; }
  .js-reveal [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; }
  .js-reveal [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; }
  .js-reveal [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 300ms; }
  .js-reveal [data-reveal-stagger].is-in > *:nth-child(n+7) { transition-delay: 340ms; }

  /* image reveal — the frame scales/fades, the image un-zooms behind it */
  .js-reveal [data-reveal-image] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
  .js-reveal [data-reveal-image] > img { opacity: 1; transform: scale(1.08); }
  .js-reveal [data-reveal-image].is-in { clip-path: inset(0 0 0 0); }
  .js-reveal [data-reveal-image].is-in > img { transform: scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal],
    .js-reveal [data-reveal-stagger] > *,
    .js-reveal [data-reveal-image],
    .js-reveal [data-reveal-image] > img {
      opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
    }
    .btn, .card, .card--link, .quick-actions a, .related__card, .masonry__item img { transition: none !important; }
    .toast { animation: none; }
    html { scroll-behavior: auto; }
    .dropdown-panel, .site-header__bar, .brand__logo { transition: none !important; }
  }
}

/* =============================================================================
   HOMEPAGE  (templates/public/home.html — see docs/HOMEPAGE_REDESIGN_PLAN.md)
   New class names only. Existing components (.hero*, .card, .grid*, .section*,
   .eyebrow) are shared with 15 inner pages and are NOT touched here.
   ========================================================================== */
@layer components {

  /* --- Shared homepage primitives ----------------------------------- */
  /* Section kicker — small, uppercase, wide-tracked teal, no rule (matches the
     approved Stitch section headers). The hero (.hp-kicker--pill) and the dark
     trust band (.hp-kicker--on-ink) restyle it further. */
  .hp-kicker {
    display: flex; align-items: center; gap: 0.6em;
    font-family: var(--font-sans); font-weight: 700; font-size: 0.75rem;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-600);
    margin: 0 0 var(--space-xs);
  }
  .hp-kicker::before { content: none; }
  .hp-kicker--onhero { color: var(--brand-600); }

  /* Pill variant — the approved Stitch hero treatment: a rounded chip on a
     surface fill with a small live teal dot in place of the leading rule. */
  .hp-kicker--pill {
    display: inline-flex; align-self: flex-start; width: fit-content;
    gap: 0.55em; padding: 0.45em 0.9em;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface); box-shadow: var(--shadow-1);
    text-transform: uppercase; letter-spacing: 0.045em; font-size: var(--fs--1);
  }
  .hp-kicker--pill::before { content: none; }
  .hp-kicker__dot {
    flex: none; position: relative; width: 8px; height: 8px;
    border-radius: 50%; background: var(--teal);
  }
  .hp-kicker__dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--teal); opacity: 0.55;
    animation: hp-kicker-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  @keyframes hp-kicker-ping {
    0% { transform: scale(0.55); opacity: 0.6; }
    75%, 100% { transform: scale(1.7); opacity: 0; }
  }

  .arrow-link {
    display: inline-flex; align-items: center; gap: 0.45em;
    font-weight: 600; font-size: var(--fs-0); color: var(--brand); text-decoration: none;
  }
  .arrow-link:hover, .arrow-link:focus-visible { color: var(--brand-600); }
  .arrow-link__i { flex: none; transition: transform var(--dur-2) var(--ease); }
  .arrow-link:hover .arrow-link__i, .arrow-link:focus-visible .arrow-link__i { transform: translateX(4px); }

  .hp-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--space-s) var(--space-l); margin-bottom: var(--space-xl);
  }
  .hp-head__text { max-width: 48ch; }
  .hp-head__title {
    font-size: var(--fs-3); font-weight: 700; letter-spacing: -0.025em;
    line-height: 1.12; color: var(--brand); margin: 0;
  }
  .hp-head__deck { color: var(--muted); font-size: var(--fs-0); margin: var(--space-xs) 0 0; }
  .hp-head__link { margin-bottom: 0.4em; }

  .image-slot {
    display: block; margin: 0; position: relative;
    aspect-ratio: var(--slot-ratio, 3 / 2);
    border-radius: var(--radius-l); overflow: clip; background: var(--brand-tint-2);
  }
  .image-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .image-slot__ph {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.55em; padding: var(--space-m); text-align: center;
    background:
      repeating-linear-gradient(-45deg, transparent 0 11px, rgba(46, 62, 156, 0.035) 11px 22px),
      linear-gradient(150deg, var(--brand-tint), var(--brand-tint-2));
    color: var(--brand-400);
  }
  .image-slot__mark { opacity: 0.5; }
  .image-slot__cap { font-size: var(--fs--1); font-weight: 600; color: var(--brand-400); }

  .branch-facts { display: grid; gap: var(--space-s); margin: var(--space-l) 0 0; }
  .branch-facts__row { display: grid; grid-template-columns: 20px 1fr; gap: 0.7em; align-items: start; }
  .branch-facts__row dt { color: var(--brand); padding-top: 0.15em; }
  .branch-facts__row dd { margin: 0; color: var(--ink-2); }
  .branch-facts__row a { color: var(--ink-2); }
  .branch-facts__row a:hover { color: var(--brand); }
  .branch-facts__status { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--ink); }
  .branch-facts__status::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0;
  }
  .branch-facts__status.is-open { color: var(--success); }
  .branch-facts__status.is-open::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
  .branch-facts__detail { color: var(--muted); font-variant-numeric: tabular-nums; }
  .branch-facts__detail::before { content: " · "; }

  /* --- 3 · Hero — full-bleed banner slider (matches the Stitch "Hero Section" export) --- */
  .hp-hero {
    position: relative; overflow: clip; isolation: isolate;
    display: flex; align-items: center;
    min-height: 560px; background: var(--ink);
    padding-block: var(--space-2xl);
  }
  @media (min-width: 768px) { .hp-hero { min-height: 620px; } }
  @media (min-width: 1024px) { .hp-hero { min-height: 700px; } }

  .hp-hero__bgs { position: absolute; inset: 0; z-index: 0; }
  .hp-hero__bg {
    position: absolute; inset: 0; margin: 0; opacity: 0;
    transition: opacity var(--dur-3) var(--ease);
  }
  .hp-hero__bg.is-active { opacity: 1; z-index: 1; }
  .hp-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .hp-hero__scrim {
    position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(to right, rgba(13, 19, 38, 0.94) 0%, rgba(13, 19, 38, 0.74) 42%, rgba(13, 19, 38, 0.22) 76%, rgba(13, 19, 38, 0.05) 100%),
      linear-gradient(to top, rgba(13, 19, 38, 0.55) 0%, transparent 38%);
  }

  /* live open/closed pill — top-right, floating over the banner. Inset from
     the hero's own edge matches wherever .container's edge actually falls
     (its gutter below --container's max-width, the same gutter beyond it),
     so it lines up with the navbar's logo/CTA instead of the raw viewport edge. */
  .hp-hero__live {
    position: absolute; top: var(--space-m); z-index: 5;
    right: max(var(--gutter), calc((100% - var(--container)) / 2));
    display: none; align-items: center; gap: 0.55em;
    padding: 0.55em 1em; border-radius: var(--radius-pill);
    background: rgba(10, 13, 26, 0.6); backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff; font-size: var(--fs--1); font-weight: 600;
  }
  @media (min-width: 640px) { .hp-hero__live { display: inline-flex; } }
  .hp-hero__live-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
  .hp-hero__live-dot.is-open { background: var(--success); }
  .hp-hero__live-dot.is-open::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--success); opacity: 0.6;
    animation: hp-kicker-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .hp-hero__live-branch { color: rgba(255, 255, 255, 0.7); font-weight: 500; }

  /* no explicit width here — .container (added on the same element, from
     @layer layout) already sizes and centers it; a width rule in this
     later @layer would win the cascade and silently cancel the gutter. */
  .hp-hero__grid { position: relative; z-index: 4; }
  .hp-hero__copy { max-width: 40rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }

  .hp-hero__textset { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); width: 100%; }
  .hp-hero__textset[hidden] { display: none; }

  .hp-hero .hp-kicker--pill.hp-kicker--onhero {
    background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .hp-hero__title {
    font-family: var(--font-display); font-weight: 700; color: #fff;
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
    line-height: 1.1; letter-spacing: -0.025em; margin: 0; max-width: 16ch;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
  }
  .hp-hero__lead {
    font-size: var(--fs-1); color: rgba(255, 255, 255, 0.86); max-width: 46ch; margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
  }
  .hp-hero__slide-link {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-weight: 700; font-size: var(--fs--1); color: #fff;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .hp-hero__notice { margin: 0; }

  .hp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-s); }
  .hp-hero__ctas .btn { padding-block: 0.95em; }
  .hp-hero__cta-arrow { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
  .hp-hero__ctas .btn--accent:hover .hp-hero__cta-arrow,
  .hp-hero__ctas .btn--accent:focus-visible .hp-hero__cta-arrow { transform: translateX(3px); }
  .hp-hero__cta-ghost {
    --_bg: rgba(255, 255, 255, 0.1); --_fg: #fff; --_bd: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .hp-hero__cta-ghost:hover, .hp-hero__cta-ghost:focus-visible { --_bg: rgba(255, 255, 255, 0.18); }

  .hp-hero__lines {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.5em;
    margin: var(--space-s) 0 0; padding-top: var(--space-s);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: var(--fs--1); color: rgba(255, 255, 255, 0.75);
  }
  .hp-hero__lines > svg { color: var(--teal); flex: none; }
  .hp-hero__lines-label { color: rgba(255, 255, 255, 0.92); }
  .hp-hero__lines-num { font-weight: 700; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
  .hp-hero__lines-num:hover { text-decoration: underline; }
  .hp-hero__lines-num--accent { color: #ffafd7; }
  .hp-hero__lines-sep { color: rgba(255, 255, 255, 0.3); }

  /* slider controls — bottom-right chip, same language as the doctor/treatment/testimonial
     rails. Same container-edge inset as .hp-hero__live above, not the raw viewport edge. */
  .hp-hero__controls {
    position: absolute; z-index: 5; bottom: 4.5rem;
    right: max(var(--gutter), calc((100% - var(--container)) / 2));
    display: flex; align-items: center; gap: var(--space-s);
    padding: 0.45em; border-radius: var(--radius-l);
    background: rgba(10, 13, 26, 0.55); backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.16);
  }
  .hp-hero__dots { display: flex; align-items: center; gap: 0.4em; padding-inline: 0.3em; }
  .hp-hero__dot {
    width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.35);
    border: 0; padding: 0; cursor: pointer;
    transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  }
  .hp-hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
  .hp-hero__dot.is-active { width: 26px; background: var(--accent); }
  .hp-hero__count {
    font-size: 0.7rem; font-weight: 700; color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums; padding-inline: 0.6em;
    border-inline: 1px solid rgba(255, 255, 255, 0.18);
  }
  .hp-hero__arrows { display: flex; gap: 0.15em; }
  .hp-hero__btn {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    border: 0; background: transparent; color: #fff; cursor: pointer;
    transition: background var(--dur-1) var(--ease);
  }
  .hp-hero__btn:hover { background: rgba(255, 255, 255, 0.16); }

  /* --- 4 · Patient actions — padded card of separate cells (matches Stitch) --- */
  .hp-actions-wrap { position: relative; z-index: 6; margin-top: calc(-1 * var(--space-l)); }
  @media (min-width: 1024px) { .hp-actions-wrap { margin-top: -2.5rem; } }
  .hp-actions {
    display: grid; gap: var(--space-2xs); grid-template-columns: 1fr;
    padding: var(--space-2xs); border-radius: 20px;
    background: var(--surface); box-shadow: var(--shadow-4); border: 1px solid var(--line);
  }
  @media (min-width: 640px) { .hp-actions { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .hp-actions { grid-template-columns: repeat(5, 1fr); } }
  .hp-actions__item {
    position: relative; display: flex; align-items: center; gap: var(--space-s);
    padding: var(--space-s); border-radius: 16px;
    background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600;
    transition: background var(--dur-2) var(--ease);
  }
  .hp-actions__item:hover, .hp-actions__item:focus-visible { background: var(--brand-tint); }
  .hp-actions__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05em; }
  .hp-actions__label {
    font-weight: 700; font-size: var(--fs--1); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hp-actions__sub {
    font-weight: 500; font-size: 0.72rem; color: var(--muted); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
  }
  .hp-actions__icon {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--brand-tint); color: var(--brand);
    transition: transform var(--dur-2) var(--ease);
  }
  .hp-actions__item:hover .hp-actions__icon,
  .hp-actions__item:focus-visible .hp-actions__icon { transform: translateY(-2px); }
  /* per-cell chip colour, matching the approved Stitch quick-actions bar */
  .hp-actions__item--3 .hp-actions__icon { background: var(--teal-tint); color: var(--teal-600); }
  .hp-actions__item--4 .hp-actions__icon { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 1px var(--line); }
  .hp-actions__item--5 .hp-actions__icon { background: var(--accent-tint); color: var(--accent-600); }
  .hp-actions__arrow {
    flex: none; color: var(--faint); opacity: 0; transform: translateX(-4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .hp-actions__item:hover .hp-actions__arrow,
  .hp-actions__item:focus-visible .hp-actions__arrow { opacity: 1; transform: translateX(0); }

  /* primary action (Book appointment) — a solid magenta cell */
  .hp-actions__item.is-primary { background: var(--accent); color: #fff; }
  .hp-actions__item.is-primary:hover, .hp-actions__item.is-primary:focus-visible { background: var(--accent-600); }
  .hp-actions__item.is-primary .hp-actions__sub { color: rgba(255, 255, 255, 0.85); }
  .hp-actions__item.is-primary .hp-actions__icon {
    background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .hp-actions__item.is-primary .hp-actions__arrow { color: #fff; opacity: 1; transform: none; }

  /* --- 5 · Welcome / our hospital — split + 2×2 facts (matches the Stitch design) --- */
  .hp-story__grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 1024px) {
    .hp-story__grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
  }
  .hp-story__media { position: relative; }
  .hp-story__img {
    position: relative; z-index: 1; border-radius: 24px; overflow: clip;
    box-shadow: var(--shadow-4); aspect-ratio: 4 / 3;
  }
  .hp-story__img .image-slot { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .hp-story__media .image-slot img { transition: transform var(--dur-3) var(--ease); }
  .hp-story__media:hover .image-slot img { transform: scale(1.04); }
  .hp-story__chip {
    position: absolute; z-index: 2; left: var(--space-m); top: var(--space-m);
    display: inline-flex; align-items: center; gap: 0.4em;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    border-radius: var(--radius-pill); padding: 0.5em 0.95em;
    font-size: var(--fs--1); font-weight: 700; color: var(--brand); box-shadow: var(--shadow-2);
  }
  .hp-story__chip svg { color: var(--brand); flex: none; }
  .hp-story__note {
    display: none; position: absolute; z-index: 0; right: -1rem; bottom: -1rem; max-width: 18rem;
    background: var(--brand-tint); color: var(--ink-2); border-radius: 20px;
    padding: var(--space-m); font-size: var(--fs--1); line-height: 1.5;
  }
  @media (min-width: 640px) { .hp-story__note { display: block; } }

  .hp-story__body h2 {
    font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.025em; color: var(--brand); max-width: 20ch; margin: 0.25em 0 var(--space-xs);
  }
  .hp-story__copy { color: var(--ink-2); font-size: var(--fs-0); line-height: 1.6; max-width: 52ch; margin: 0 0 var(--space-m); }

  .hp-story__facts { display: grid; gap: var(--space-s); }
  @media (min-width: 480px) { .hp-story__facts { grid-template-columns: repeat(2, 1fr); } }
  .hp-story__fact {
    display: flex; align-items: flex-start; gap: 0.65em;
    padding: var(--space-s); border-radius: 16px; background: var(--surface-2);
  }
  .hp-story__fact-ic {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--brand-tint); color: var(--brand); margin-top: 0.1em;
  }
  .hp-story__fact-txt { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
  .hp-story__fact-label { font-size: var(--fs--1); font-weight: 700; color: var(--ink); }
  .hp-story__fact-val { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

  .hp-story__link {
    display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-m);
    font-weight: 700; font-size: var(--fs--1); color: var(--brand); text-decoration: none;
  }
  .hp-story__link:hover, .hp-story__link:focus-visible { color: var(--accent-600); }
  .hp-story__link-i { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
  .hp-story__link:hover .hp-story__link-i, .hp-story__link:focus-visible .hp-story__link-i { transform: translateX(4px); }

  /* --- 6 · Departments — data-driven 4-up card slider --- */
  .hp-dept__slider { position: relative; }
  .hp-dept__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-m);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-2xs);
  }
  .hp-dept__track::-webkit-scrollbar { display: none; }
  .hp-dept__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }
  @media (min-width: 640px) {
    .hp-dept__track { grid-auto-columns: calc((100% - var(--space-m)) / 2); margin: 0; padding: 0 0 var(--space-2xs); }
  }
  @media (min-width: 1024px) {
    .hp-dept__track { grid-auto-columns: calc((100% - var(--space-m) * 2) / 3); }
  }
  .hp-dept__slide { scroll-snap-align: start; display: flex; }
  .hp-dept__slide > .hp-dept__card { width: 100%; }
  .hp-dept__card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    overflow: clip; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .hp-dept__card:hover, .hp-dept__card:focus-within {
    transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--brand-400);
  }
  .hp-dept__card-media {
    position: relative;
    aspect-ratio: 16 / 10; overflow: clip;
    background: linear-gradient(150deg, var(--brand-600), var(--brand-700));
  }
  .hp-dept__card-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .hp-dept__card-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(17,20,45,0) 40%, rgba(17,20,45,.55) 100%);
    pointer-events: none;
  }
  .hp-dept__card-icon {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85);
  }
  .hp-dept__card-badge {
    position: absolute; z-index: 2; top: var(--space-xs); left: var(--space-xs);
    display: inline-flex; align-items: center;
    padding: .3em .7em; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.94); color: var(--brand);
    font-size: var(--fs--1); font-weight: 600; line-height: 1;
    box-shadow: var(--shadow-1);
  }
  .hp-dept__card-body {
    display: flex; flex-direction: column; gap: var(--space-2xs);
    padding: var(--space-m); flex: 1;
  }
  .hp-dept__card-eyebrow {
    margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .hp-dept__card-name {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-1); letter-spacing: -0.01em; color: var(--ink);
  }
  .hp-dept__card-blurb {
    margin: 0; color: var(--muted); font-size: var(--fs--1); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-dept__card-actions {
    display: flex; margin-top: auto; padding-top: var(--space-s);
    border-top: 1px solid var(--line);
  }
  .hp-dept__card-cta {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .55em 1.1em; border-radius: var(--radius-pill);
    border: 1px solid var(--brand); background: var(--surface);
    font-size: var(--fs--1); font-weight: 700; color: var(--brand); text-decoration: none;
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .hp-dept__card-cta svg, .hp-dept__card-cta .pi { transition: transform var(--dur-1) var(--ease); }
  .hp-dept__card-cta:hover { background: var(--brand); color: #fff; }
  .hp-dept__card-cta:hover svg, .hp-dept__card-cta:hover .pi { transform: translateX(3px); }
  .hp-dept__controls { display: flex; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
  .hp-dept__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
  .hp-dept__progress-fill { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width var(--dur-2) var(--ease); }
  .hp-dept__arrows { display: flex; gap: var(--space-2xs); flex-shrink: 0; }
  .hp-dept__btn {
    inline-size: 2.5rem; block-size: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
    cursor: pointer; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
  }
  .hp-dept__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .hp-dept__btn:active { transform: scale(0.94); }
  .hp-dept__btn[disabled] { opacity: 0.4; pointer-events: none; }

  /* --- 7 · Featured doctors — premium 4-up portrait carousel ----- */
  /* Scoped header upsize — hp_head.html is shared, so keep this under .hp-docs. */
  .hp-docs .hp-head__title { font-size: var(--fs-4); }

  .hp-docs__slider { position: relative; }
  .hp-docs__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: var(--space-s);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-2xs);
  }
  .hp-docs__track::-webkit-scrollbar { display: none; }
  .hp-docs__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }
  /* Exactly N complete cards at each tier — the (N+1)th sits fully off-scroll,
     never peeking in awkwardly. Only the mobile tier keeps an intentional peek
     as a swipe-affordance hint. */
  @media (min-width: 640px) {
    .hp-docs__track { grid-auto-columns: calc((100% - var(--space-s)) / 2); margin: 0; padding: 0 0 var(--space-2xs); }
  }
  @media (min-width: 1024px) {
    .hp-docs__track { grid-auto-columns: calc((100% - var(--space-s) * 2) / 3); }
  }
  @media (min-width: 1200px) {
    .hp-docs__track { grid-auto-columns: calc((100% - var(--space-s) * 3) / 4); }
  }
  .hp-docs__slide { scroll-snap-align: start; display: flex; min-width: 0; }
  .hp-docs__slide > .hp-doc-card { flex: 1 1 auto; width: 100%; }

  .hp-doc-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    border-radius: var(--radius-l); overflow: clip; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .hp-doc-card:hover, .hp-doc-card:focus-visible {
    box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--line-strong);
  }
  .hp-doc-card__media {
    position: relative; aspect-ratio: 1 / 1; overflow: clip;
    background: linear-gradient(155deg, var(--brand-600), var(--brand-700));
  }
  .hp-doc-card__img { position: absolute; inset: 0; height: 100%; border-radius: 0; aspect-ratio: auto; }
  .hp-doc-card__img img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    transition: transform var(--dur-3) var(--ease);
  }
  .hp-doc-card:hover .hp-doc-card__img img, .hp-doc-card:focus-visible .hp-doc-card__img img { transform: scale(1.05); }
  .hp-doc-card__img .image-slot__ph {
    position: absolute; inset: 0;
    background: linear-gradient(155deg, var(--brand-600), var(--brand-700));
    color: rgba(255, 255, 255, 0.55);
  }
  .hp-doc-card__img .image-slot__mark { width: 48px; height: 48px; }
  .hp-doc-card__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 20, 45, 0) 55%, rgba(17, 20, 45, 0.5) 100%);
  }
  .hp-doc-card__exp {
    position: absolute; left: var(--space-s); bottom: var(--space-s); z-index: 2;
    padding: 0.4em 0.85em; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow-1);
    color: var(--ink); font-weight: 700; font-size: var(--fs--1); line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .hp-doc-card__badge {
    position: absolute; top: var(--space-s); left: var(--space-s); z-index: 2;
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.3em 0.75em 0.3em 0.6em; border-radius: var(--radius-pill);
    background: var(--accent); color: #fff; font-weight: 700; font-size: var(--fs--1); line-height: 1;
  }
  .hp-doc-card__badge .pi { color: #fff; }
  .hp-doc-card__media { flex: none; }
  .hp-doc-card__body {
    display: flex; flex-direction: column; gap: var(--space-3xs);
    padding: var(--space-m); flex: 1 1 auto; min-height: 0;
  }
  .hp-doc-card__spec { color: var(--accent); font-weight: 700; font-size: var(--fs--1); }
  .hp-doc-card__name {
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-1);
    color: var(--ink); line-height: 1.2; letter-spacing: -0.01em;
  }
  .hp-doc-card__quals { color: var(--muted); font-size: var(--fs--1); line-height: 1.4; }
  .hp-doc-card__meta {
    display: inline-flex; align-items: center; gap: 0.35em;
    margin-top: var(--space-3xs); padding-top: var(--space-s);
    border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs--1);
  }
  .hp-doc-card__cta {
    display: flex; align-items: center; justify-content: center; gap: 0.4em;
    margin-top: auto;
    padding: 0.8em 1em; border-radius: var(--radius-pill);
    background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: var(--fs--1);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .hp-doc-card:hover .hp-doc-card__cta, .hp-doc-card:focus-visible .hp-doc-card__cta { background: var(--brand); color: #fff; }
  .hp-doc-card__cta-i { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
  .hp-doc-card:hover .hp-doc-card__cta-i, .hp-doc-card:focus-visible .hp-doc-card__cta-i { transform: translateX(3px); }

  .hp-docs__controls { display: flex; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
  .hp-docs__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
  .hp-docs__progress-fill {
    display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand);
    transition: width var(--dur-2) var(--ease);
  }
  .hp-docs__arrows { display: flex; gap: var(--space-2xs); flex-shrink: 0; }
  .hp-docs__btn {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .hp-docs__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .hp-docs__btn:active { transform: scale(0.94); }
  .hp-docs__btn[disabled] { opacity: 0.4; pointer-events: none; }

  /* --- 9 · Treatments — modern 4-up card grid (image · department · name · CTA) --- */
  .hp-treat__grid { display: grid; gap: var(--space-m); }
  @media (min-width: 560px) { .hp-treat__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .hp-treat__grid { grid-template-columns: repeat(4, 1fr); } }

  .hp-treat-card {
    display: flex; flex-direction: column; height: 100%;
    border-radius: var(--radius-l); overflow: clip; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .hp-treat-card:hover, .hp-treat-card:focus-visible {
    box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--brand-400);
  }
  .hp-treat-card__media {
    position: relative; aspect-ratio: 16 / 10; overflow: clip;
    background: linear-gradient(150deg, var(--brand-600), var(--brand-700));
  }
  .hp-treat-card__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--dur-3) var(--ease);
  }
  .hp-treat-card:hover .hp-treat-card__img { transform: scale(1.05); }
  .hp-treat-card__ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.6);
  }
  .hp-treat-card__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 20, 45, 0) 55%, rgba(17, 20, 45, 0.4) 100%);
  }
  .hp-treat-card__body {
    display: flex; flex-direction: column; gap: var(--space-2xs);
    padding: var(--space-m); flex: 1;
  }
  /* guaranteed breathing room above the CTA, whatever content precedes it */
  .hp-treat-card__body > :nth-last-child(2) { margin-bottom: var(--space-s); }
  .hp-treat-card__eyebrow {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
  }
  .hp-treat-card__name {
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-1);
    color: var(--ink); line-height: 1.2; letter-spacing: -0.01em;
  }
  .hp-treat-card__blurb {
    color: var(--muted); font-size: var(--fs--1); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-treat-card__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    margin-top: auto; padding: 0.7em 1em; border-radius: var(--radius-pill);
    background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: var(--fs--1);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .hp-treat-card:hover .hp-treat-card__cta, .hp-treat-card:focus-visible .hp-treat-card__cta {
    background: var(--brand); color: #fff;
  }
  .hp-treat-card__cta-i { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
  .hp-treat-card:hover .hp-treat-card__cta-i, .hp-treat-card:focus-visible .hp-treat-card__cta-i { transform: translateX(3px); }

  /* --- 10 · Health checkups (comparison columns) --------- */
  .hp-checkups__scroll {
    margin: 0 calc(var(--gutter) * -1); padding: var(--space-s) var(--gutter) var(--space-s);
    overflow-x: auto; scrollbar-width: none;
  }
  .hp-checkups__scroll::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) { .hp-checkups__scroll { margin: 0; padding: 0; overflow: visible; } }
  .hp-checkups__row { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--space-m); align-items: stretch; }
  @media (min-width: 560px) { .hp-checkups__row { grid-auto-columns: 46%; } }
  @media (min-width: 1024px) { .hp-checkups__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); } }
  .checkup-col {
    position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-l);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .checkup-col:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
  .checkup-col--featured {
    border: 2px solid var(--accent); box-shadow: var(--shadow-2);
  }
  .checkup-col--featured:hover { box-shadow: var(--shadow-3); }
  .checkup-col__tag {
    position: absolute; top: -0.85em; right: var(--space-l);
    background: var(--accent); color: #fff; font-size: var(--fs--1); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.3em 0.85em; border-radius: var(--radius-pill); box-shadow: var(--shadow-1);
  }
  .checkup-col__cat { font-size: var(--fs--1); font-weight: 700; color: var(--brand); }
  .checkup-col__name { font-size: var(--fs-1); font-weight: 700; letter-spacing: -0.01em; margin: var(--space-2xs) 0 0; color: var(--ink); }
  @media (min-width: 1024px) { .checkup-col__name { min-height: 2.5em; } }
  .checkup-col__price {
    display: flex; align-items: baseline; gap: 0.4em;
    font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; color: var(--brand);
    line-height: 1.1; margin: 0.35em 0 0; font-variant-numeric: tabular-nums;
  }
  .checkup-col__price span { font-family: var(--font-sans); font-size: var(--fs--1); font-weight: 500; color: var(--muted); }
  .checkup-col__who { color: var(--ink-2); font-size: var(--fs--1); margin: var(--space-2xs) 0 var(--space-xs); }
  .checkup-col__items { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: 0.5em; }
  .checkup-col__items li { display: grid; grid-template-columns: 18px 1fr; gap: 0.5em; color: var(--ink-2); font-size: var(--fs--1); align-items: start; }
  .checkup-col__items li svg { color: var(--success); margin-top: 0.15em; }
  .checkup-col__more { margin-top: var(--space-2xs); }
  .checkup-col__more summary {
    display: flex; align-items: center; gap: 0.35em; cursor: pointer; list-style: none;
    font-size: var(--fs--1); font-weight: 600; color: var(--brand);
  }
  .checkup-col__more summary::-webkit-details-marker { display: none; }
  .checkup-col__chev { transition: transform var(--dur-2) var(--ease); }
  .checkup-col__more[open] .checkup-col__chev { transform: rotate(180deg); }
  .checkup-col__more .checkup-col__items { margin-top: var(--space-xs); }
  .checkup-col__cta {
    display: block; margin-top: auto; padding: 0.85em 1em; border-radius: var(--radius-pill);
    background: var(--brand-tint); color: var(--brand); text-align: center;
    font-weight: 700; font-size: var(--fs--1); text-decoration: none;
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .checkup-col__cta:hover, .checkup-col__cta:focus-visible { background: var(--brand); color: #fff; }
  .checkup-col__cta--primary { background: var(--accent); color: #fff; }
  .checkup-col__cta--primary:hover, .checkup-col__cta--primary:focus-visible { background: var(--accent-600); color: #fff; }

  /* --- "Book package" modal ------------------------------------- */
  .cbk-modal {
    width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem);
    padding: 0; border: 0; border-radius: var(--radius-l);
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-4);
  }
  .cbk-modal::backdrop { background: rgba(17, 20, 45, 0.45); backdrop-filter: blur(2px); }
  .cbk-modal__panel { position: relative; padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xs); }
  .cbk-modal__close {
    position: absolute; top: var(--space-s); right: var(--space-s);
    inline-size: 2.25rem; block-size: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); cursor: pointer;
  }
  .cbk-modal__close:hover { background: var(--brand-tint); color: var(--brand); }
  .cbk-modal__eyebrow { margin: 0; font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
  .cbk-modal__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2); font-weight: 700; color: var(--brand); }
  .cbk-modal__note { margin: 0 0 var(--space-xs); color: var(--muted); font-size: var(--fs--1); }
  .cbk-modal__hp { position: absolute; left: -9999px; }
  .cbk-modal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s) var(--space-m); }
  .cbk-field { display: flex; flex-direction: column; gap: 0.3em; font-size: var(--fs--1); color: var(--ink-2); }
  .cbk-field--full { grid-column: 1 / -1; }
  .cbk-field span { font-weight: 600; }
  .cbk-field input, .cbk-field textarea {
    width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--line-strong);
    border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit;
  }
  .cbk-field input:focus, .cbk-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
  .cbk-modal__hint { margin: var(--space-2xs) 0 0; font-size: var(--fs--2, 0.78rem); color: var(--muted); }
  .cbk-modal__actions { display: flex; gap: var(--space-s); margin-top: var(--space-s); }
  @media (max-width: 520px) { .cbk-modal__grid { grid-template-columns: 1fr; } }

  /* --- 11 · Trust (dark) — premium brand-statement moment -------- */
  .hp-trust { position: relative; overflow: clip; }

  /* One restrained "wow" element: a huge outlined AAF wordmark bleeding
     behind the statement, plus a barely-there radial glow for atmosphere —
     both purely decorative, both inert to layout and to assistive tech. */
  .hp-trust__glow {
    position: absolute; top: -10%; left: 50%; width: min(70vw, 900px); aspect-ratio: 1;
    transform: translateX(-50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--brand-400) 0%, transparent 68%);
    opacity: 0.16;
  }
  .hp-trust__mark {
    position: absolute; top: 50%; right: clamp(-1rem, -2vw, 1rem); z-index: 0;
    transform: translateY(-50%); font-family: var(--font-display); font-weight: 700;
    font-size: clamp(7rem, 18vw, 16rem); line-height: 1; letter-spacing: -0.03em;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
    pointer-events: none; user-select: none;
  }

  .hp-trust .container { position: relative; z-index: 1; }
  /* Centred header, matching the approved Stitch trust section. */
  .hp-trust__lead {
    max-width: 85%; margin: 0 auto var(--space-2xl); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  }
  .hp-trust .hp-kicker--on-ink { color: #86d0f5; opacity: 1; justify-content: center; }
  .hp-trust .hp-trust__statement {
    font-family: var(--font-display); font-weight: 700; line-height: 1.1;
    letter-spacing: -0.025em; color: #fff; margin: 0; max-width: none;
    font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem); text-wrap: balance;
  }
  .hp-trust__deck {
    color: rgba(255, 255, 255, 0.66); font-size: var(--fs-0); margin: 0; max-width: 70%;
  }

  .hp-trust__band { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
  @media (min-width: 640px) { .hp-trust__band { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .hp-trust__band { grid-template-columns: repeat(4, 1fr); } }

  .hp-trust__point { display: flex; flex-direction: column; gap: 0.5em; }
  .hp-trust__point-index {
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); line-height: 1;
    color: var(--accent-tint); font-variant-numeric: tabular-nums; margin-bottom: 0.1em;
  }
  .hp-trust__point:nth-child(2) .hp-trust__point-index { color: #86d0f5; }
  .hp-trust__point:nth-child(3) .hp-trust__point-index { color: #bbc3ff; }
  .hp-trust__point-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-1); letter-spacing: -0.01em; color: #fff; }
  .hp-trust__point-text { color: rgba(255, 255, 255, 0.7); font-size: var(--fs--1); line-height: 1.6; }

  /* --- 12 · Testimonials — modern patient-story slider (1 / ~1.7 / 2 per view) --- */
  .hp-quotes__slider { position: relative; }
  .hp-quotes__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 90%);
    column-gap: var(--space-l); padding-bottom: 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  @media (min-width: 720px) {
    .hp-quotes__track { grid-auto-columns: minmax(0, calc((100% - var(--space-l)) / 1.7)); }
  }
  @media (min-width: 1024px) {
    .hp-quotes__track { grid-auto-columns: minmax(0, calc((100% - var(--space-l)) / 2)); }
  }
  .hp-quotes__track::-webkit-scrollbar { display: none; }
  .hp-quotes__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }
  .hp-quotes__slide { scroll-snap-align: start; display: flex; min-width: 0; }

  .hp-quote-card {
    position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-1);
    padding: var(--space-m);
    overflow: clip;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .hp-quote-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(var(--brand), var(--accent-600));
    opacity: 0; transition: opacity var(--dur-2) var(--ease);
  }
  .hp-quote-card:hover {
    box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: var(--brand-400);
  }
  .hp-quote-card:hover::before, .hp-quote-card--featured::before { opacity: 1; }
  .hp-quote-card--featured { border-color: var(--brand-400); }
  .hp-quote-card__mark {
    width: 26px; height: 26px; color: var(--brand); opacity: 0.2;
    margin-bottom: var(--space-2xs); flex-shrink: 0;
  }
  .hp-quote-card__text {
    font-family: var(--font-display); font-size: var(--fs-0);
    font-weight: 500; font-style: italic; line-height: 1.5;
    color: var(--ink); margin: 0 0 var(--space-s); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-quote-card__by {
    display: flex; flex-direction: column; gap: 0.1em; margin: 0;
    padding-top: var(--space-xs); border-top: 1px solid var(--line);
  }
  .hp-quote-card__name {
    font-family: var(--font-display); font-weight: 700; color: var(--brand);
    font-size: var(--fs--1); letter-spacing: -0.01em;
  }
  .hp-quote-card__doctor { color: var(--accent-600); font-size: 0.78rem; font-weight: 600; }

  .hp-quotes__controls { display: flex; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
  .hp-quotes__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
  .hp-quotes__progress-fill {
    display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand);
    transition: width var(--dur-2) var(--ease);
  }
  .hp-quotes__arrows { display: flex; gap: var(--space-2xs); flex-shrink: 0; }
  .hp-quotes__btn {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .hp-quotes__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .hp-quotes__btn:active { transform: scale(0.94); }
  .hp-quotes__btn[disabled] { opacity: 0.4; pointer-events: none; }

  /* --- 13 · Blog — premium editorial 4-up grid (no slider) ------ */
  .hp-blog .hp-head { margin-bottom: var(--space-l); }

  .hp-blog__grid { display: grid; gap: var(--space-l); }
  @media (min-width: 560px) and (max-width: 899px) { .hp-blog__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .hp-blog__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); } }

  .hp-blog-card {
    display: flex; flex-direction: column; height: 100%;
    border-radius: var(--radius-l); overflow: clip; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .hp-blog-card:hover, .hp-blog-card:focus-visible {
    box-shadow: var(--shadow-2); transform: translateY(-4px); border-color: var(--line-strong);
  }
  .hp-blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: clip; }
  .hp-blog-card__img { border-radius: 0; }
  .hp-blog-card__img img { transition: transform var(--dur-3) var(--ease); }
  .hp-blog-card:hover .hp-blog-card__img img, .hp-blog-card:focus-visible .hp-blog-card__img img { transform: scale(1.04); }

  .hp-blog-card__fallback {
    position: absolute; inset: 0; display: grid; place-items: center; overflow: clip;
    background: linear-gradient(155deg, var(--brand-tint) 0%, var(--brand-tint-2) 62%, var(--surface) 100%);
  }
  .hp-blog-card__shape { position: absolute; border-radius: 50%; pointer-events: none; }
  .hp-blog-card__shape--a {
    width: 55%; aspect-ratio: 1; top: -20%; right: -12%;
    background: radial-gradient(circle at 30% 30%, var(--brand-400), transparent 70%); opacity: 0.2;
  }
  .hp-blog-card__shape--b {
    width: 38%; aspect-ratio: 1; bottom: -16%; left: -8%;
    background: radial-gradient(circle at 60% 60%, var(--teal), transparent 70%); opacity: 0.16;
  }
  .hp-blog-card__icon {
    position: relative; z-index: 1; color: var(--brand);
    transition: transform var(--dur-3) var(--ease);
  }
  .hp-blog-card:hover .hp-blog-card__icon, .hp-blog-card:focus-visible .hp-blog-card__icon { transform: scale(1.08); }

  .hp-blog-card__body { display: flex; flex-direction: column; gap: 0.35em; padding: var(--space-m); flex: 1; }
  .hp-blog-card__meta {
    display: flex; align-items: center; gap: 0.5em; font-size: var(--fs--1); font-weight: 600; color: var(--brand-400);
  }
  .hp-blog-card__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
  .hp-blog-card__title {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1); color: var(--ink); line-height: 1.3;
  }
  .hp-blog-card__excerpt { color: var(--ink-2); font-size: var(--fs--1); }
  .hp-blog-card__cta {
    display: inline-flex; align-items: center; gap: 0.4em; margin-top: auto; padding-top: var(--space-xs);
    font-weight: 600; font-size: var(--fs--1); color: var(--brand);
  }
  .hp-blog-card__cta-i { display: inline-flex; transition: transform var(--dur-2) var(--ease); }
  .hp-blog-card:hover .hp-blog-card__cta-i, .hp-blog-card:focus-visible .hp-blog-card__cta-i { transform: translateX(4px); }

  /* --- 14 · Find us — modern split contact card ---------------- */
  .hp-contact .hp-head { margin-bottom: var(--space-l); }
  .hp-contact .hp-head__deck { max-width: 44ch; }

  .hp-contact__card {
    display: grid; grid-template-columns: 1fr; overflow: clip;
    border-radius: var(--radius-l); border: 1px solid var(--line);
    background: var(--surface); box-shadow: var(--shadow-3);
  }
  @media (min-width: 900px) {
    .hp-contact__card { grid-template-columns: 1.4fr 0.85fr; }
  }

  /* left — the live map */
  .hp-contact__map {
    position: relative; min-height: 320px; background: var(--surface-2);
    isolation: isolate;
  }
  @media (min-width: 900px) { .hp-contact__map { min-height: 460px; } }
  .hp-contact__map-frame {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
    filter: saturate(0.92);
  }
  .hp-contact__map-fallback {
    position: absolute; inset: 0; display: block;
    background: linear-gradient(155deg, var(--brand-tint) 0%, var(--brand-tint-2) 55%, var(--surface) 100%);
  }
  .hp-contact__grid-pattern {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(46, 62, 156, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(46, 62, 156, 0.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse at 60% 35%, black 0%, transparent 74%);
  }
  .hp-contact__map-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    padding: var(--space-m);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 22%, transparent 68%, rgba(17, 24, 45, 0.22) 100%);
  }
  .hp-contact__pin-chip {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 0.45em;
    padding: 0.5em 0.9em; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4);
    font-weight: 600; font-size: var(--fs--1); color: var(--ink); box-shadow: var(--shadow-2);
  }
  .hp-contact__pin-chip svg { color: var(--brand); flex: none; }
  .hp-contact__directions {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.62em 1.05em; border-radius: var(--radius-pill);
    background: var(--brand); color: #fff; font-weight: 600; font-size: var(--fs--1);
    text-decoration: none; box-shadow: var(--shadow-3);
    transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .hp-contact__directions svg { flex: none; transition: transform var(--dur-2) var(--ease); }
  .hp-contact__directions:hover, .hp-contact__directions:focus-visible { background: var(--brand-600); transform: translateY(-2px); }
  .hp-contact__directions:hover svg, .hp-contact__directions:focus-visible svg { transform: translate(2px, -2px); }

  /* right — the contact rail */
  .hp-contact__rail {
    display: flex; flex-direction: column; gap: var(--space-m); justify-content: center;
    padding: var(--space-xl) var(--space-l);
    background: linear-gradient(185deg, var(--surface) 0%, var(--brand-tint-2) 140%);
    border-top: 1px solid var(--line);
  }
  @media (min-width: 900px) {
    .hp-contact__rail { border-top: 0; border-left: 1px solid var(--line); }
  }
  .hp-contact__status {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.42em 0.85em; border-radius: var(--radius-pill);
    background: var(--surface-2); border: 1px solid var(--line);
    font-weight: 600; font-size: var(--fs--1); color: var(--ink-2);
  }
  .hp-contact__status.is-open {
    background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success);
  }
  .hp-contact__status-dot {
    display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  }
  .hp-contact__status.is-open .hp-contact__status-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }

  .hp-contact__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
  .hp-contact__fact {
    display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-s);
    padding: var(--space-s); border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit;
    transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  a.hp-contact__fact:hover, a.hp-contact__fact:focus-visible {
    border-color: var(--brand); box-shadow: var(--shadow-2); transform: translateX(3px);
  }
  .hp-contact__fact-ic {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  a.hp-contact__fact:hover .hp-contact__fact-ic, a.hp-contact__fact:focus-visible .hp-contact__fact-ic { background: var(--brand); color: #fff; }
  .hp-contact__fact-txt { display: flex; flex-direction: column; gap: 0.05em; min-width: 0; }
  .hp-contact__fact-label { font-size: var(--fs--1); font-weight: 600; color: var(--muted); }
  .hp-contact__fact-val { color: var(--ink); font-weight: 600; font-size: var(--fs-0); overflow-wrap: anywhere; }
  .hp-contact__fact-arr {
    flex: none; color: var(--muted); opacity: 0; transform: translateX(-4px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  a.hp-contact__fact:hover .hp-contact__fact-arr, a.hp-contact__fact:focus-visible .hp-contact__fact-arr { opacity: 1; transform: translateX(0); color: var(--brand); }
  .hp-contact__fact--static { cursor: default; }

  .hp-contact__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
  .hp-contact__ctas .btn { flex: 1 1 auto; justify-content: center; }

  /* Branch chooser / "Our hospitals" — see the "br-" block near end of file. */
}

/* =============================================================================
   ABOUT PAGE  (templates/public/about.html)
   Restyled to the approved Google Stitch design (project "AAF Hospital About
   Page"). New "ab-" class names only — the shared .hero, .card, .grid, .eyebrow
   and .cta-band components (used by 15 other inner pages) and the homepage's
   own "hp-" ones are NOT touched, same convention as the homepage block above.
   Type hierarchy mirrors Stitch (display / headline-xl / headline-md /
   title-lg); the typeface stays Poppins (project standard — Stitch's Plus
   Jakarta Sans is not shipped). Colours map Stitch's Material tokens onto the
   existing brand palette (--brand indigo, --accent magenta, --teal).
   ========================================================================== */
@layer components {

  /* ---- page-local scale + tints, shared by every section ------------------ */
  .ab-sec {
    --ab-display: clamp(2.1rem, 1.55rem + 2.6vw, 3rem);      /* Stitch display-lg 48 */
    --ab-h2:      clamp(1.55rem, 1.25rem + 1.5vw, 2.25rem);  /* headline-xl 36 */
    --ab-h3:      clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);   /* title-lg 18–20 */
    --ab-card:    20px;
    --ab-tint-1:  var(--brand-tint-2);                       /* #F4F6FC */
    --ab-tint-2:  color-mix(in srgb, var(--brand) 8%, #fff); /* ≈ #eaedff */
    --ab-ink-soft: color-mix(in srgb, #fff 74%, var(--brand));

    position: relative;
    padding-block: clamp(3.25rem, 2.6rem + 3vw, 4.75rem);
  }
  .ab-sec--paper { background: var(--paper); }
  .ab-sec--white { background: var(--surface); }
  .ab-sec--tint1 { background: var(--ab-tint-1); }
  .ab-sec--tint2 { background: var(--ab-tint-2); }
  .ab-sec--dark  {
    background: linear-gradient(158deg, var(--brand-600) 0%, var(--brand) 60%, #38489f 100%);
    color: #fff;
  }
  .ab-sec--dark h2, .ab-sec--dark h3 { color: #fff; }

  /* ---- shared kicker (dash + uppercase label) ---------------------------- */
  .ab-kicker {
    display: flex; align-items: center; gap: 0.6em;
    font-weight: 600; font-size: var(--fs--1); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--brand); margin: 0 0 var(--space-s);
  }
  .ab-kicker::before {
    content: ""; flex: none; width: 24px; height: 2px; border-radius: 1px; background: currentColor;
  }
  .ab-kicker--accent { color: var(--accent); }
  .ab-kicker--teal   { color: var(--teal-600); }
  .ab-kicker--center { justify-content: center; }
  .ab-kicker--on-dark { color: color-mix(in srgb, #fff 82%, var(--teal)); }
  .ab-kicker--on-dark::before { background: var(--teal-tint); }

  /* ---- shared section header ------------------------------------------------ */
  .ab-head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .ab-head--center { max-width: 52rem; margin-inline: auto; text-align: center; }
  .ab-head--center .ab-head__lead { margin-inline: auto; }
  .ab-head__title { font-size: var(--ab-h2); font-weight: 700; margin: 0; text-wrap: balance; }
  .ab-head__lead { margin: var(--space-s) 0 0; color: var(--ink-2); font-size: var(--fs-1); max-width: 52ch; }
  .ab-head--on-dark .ab-head__lead { color: rgba(255, 255, 255, 0.78); }

  /* ---- breadcrumb — single rounded-full pill trail (Stitch) -------------- */
  .ab-crumbs-wrap { padding-top: calc(var(--space-m) + var(--space-2xs)); }
  .ab-crumbs__trail {
    list-style: none; margin: 0; padding: 0.4em 0.55em;
    display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-pill); box-shadow: var(--shadow-1);
    font-size: var(--fs--1);
  }
  .ab-crumbs__seg { display: inline-flex; align-items: center; }
  .ab-crumbs__seg a {
    display: inline-flex; align-items: center; gap: 0.4em;
    color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap;
    padding: 0.15em 0.35em; border-radius: var(--radius-s);
    transition: color var(--dur-1) var(--ease);
  }
  .ab-crumbs__seg a:hover, .ab-crumbs__seg a:focus-visible { color: var(--brand); }
  .ab-crumbs__seg a svg { color: var(--teal-600); }
  .ab-crumbs__sep { display: inline-flex; color: var(--faint); }
  .ab-crumbs__sep svg { width: 14px; height: 14px; }
  .ab-crumbs__here {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 0.28em 0.85em; border-radius: var(--radius-pill);
    font-weight: 600; color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
  }

  /* ---- 1 · Hero ---------------------------------------------------------- */
  .ab-hero { overflow: clip; }
  /* .ab-hero__inner also carries .container in the markup — leave the full
     container width so the hero aligns left with the navbar / breadcrumb; the
     per-element caps below keep line lengths readable. */
  .ab-hero__inner { position: relative; z-index: 1; }
  .ab-hero__title {
    font-size: var(--ab-display); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 var(--space-m); text-wrap: balance;
    max-width: 20ch;
  }
  .ab-hero__lead {
    font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
    line-height: 1.6; color: var(--ink-2); max-width: 62ch; margin: 0;
  }
  .ab-hero__glow {
    position: absolute; top: -7rem; right: -5rem; width: min(520px, 62vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 35% 35%,
      color-mix(in srgb, var(--teal) 45%, transparent) 0%,
      color-mix(in srgb, var(--brand) 28%, transparent) 45%, transparent 72%);
    filter: blur(30px);
  }

  /* ---- 1b · Stats strip (Google Stitch "Leadership & Heritage") ------------- */
  .ab-stats {
    position: relative; z-index: 1; margin-top: var(--space-xl);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: var(--ab-card, var(--radius-l)); overflow: clip;
  }
  @media (min-width: 860px) { .ab-stats { grid-template-columns: repeat(4, 1fr); } }
  .ab-stat {
    display: flex; flex-direction: column; gap: 0.15em;
    background: var(--surface); padding: var(--space-l) var(--space-m);
  }
  .ab-stat__figure {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
    color: var(--brand); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1;
  }
  .ab-stat__label { font-size: var(--fs--1); font-weight: 700; color: var(--ink); margin-top: 0.35em; }
  .ab-stat__sub { font-size: 0.78rem; line-height: 1.4; color: var(--ink-2); }

  /* ---- 3b · Founders & leadership ----------------------------------------- */
  .ab-founders__head {
    display: grid; grid-template-columns: 1fr; gap: var(--space-m);
    align-items: end; margin-bottom: var(--space-xl);
  }
  @media (min-width: 900px) { .ab-founders__head { grid-template-columns: 1fr auto; } }
  .ab-founders__badge {
    display: inline-flex; align-items: center; gap: 0.5em; align-self: start;
    background: var(--brand-tint); color: var(--brand);
    font-size: var(--fs--1); font-weight: 700;
    padding: 0.6em 1em; border-radius: var(--radius-pill);
  }
  .ab-founders__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); }
  @media (min-width: 720px) { .ab-founders__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1080px) { .ab-founders__grid { grid-template-columns: repeat(3, 1fr); } }
  .ab-founder {
    display: flex; flex-direction: column; overflow: clip;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--ab-card, var(--radius-l)); box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .ab-founder:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
  .ab-founder__media { position: relative; aspect-ratio: 1; overflow: clip; background: var(--surface-2); }
  .ab-founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ab-founder__tag {
    position: absolute; left: var(--space-s); bottom: var(--space-s);
    background: var(--surface); color: var(--brand);
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.35em 0.75em; border-radius: var(--radius-pill); box-shadow: var(--shadow-2);
  }
  .ab-founder__body { padding: var(--space-l) var(--space-l) var(--space-m); flex: 1; }
  .ab-founder__name { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 700; color: var(--ink); margin: 0; }
  .ab-founder__cred { margin: 0.15em 0 0; font-size: 0.8rem; font-weight: 600; color: var(--accent-600); }
  .ab-founder__role { margin: 0.1em 0 var(--space-s); font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
  .ab-founder__bio { margin: 0; font-size: var(--fs--1); line-height: 1.6; color: var(--ink-2); }
  .ab-founder__quote {
    margin-top: auto; padding: var(--space-m) var(--space-l) var(--space-l);
    border-top: 1px solid var(--line); background: var(--brand-tint);
  }
  .ab-founder__quote-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); }
  .ab-founder__quote p { margin: 0.4em 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs--1); line-height: 1.55; color: var(--ink); }

  /* ---- 4 · Mission & vision + guiding pillars --------------------------- */
  .ab-mv__split { display: grid; grid-template-columns: 1fr; gap: var(--space-l); margin-top: var(--space-xl); }
  @media (min-width: 900px) { .ab-mv__split { grid-template-columns: repeat(2, 1fr); } }
  .ab-mv__card {
    position: relative; overflow: clip;
    border-radius: var(--ab-card, var(--radius-l)); padding: clamp(var(--space-l), 1.2rem + 2vw, var(--space-2xl));
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  .ab-mv__card--mission { background: var(--brand); color: #fff; }
  .ab-mv__card--vision { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .ab-mv__ic {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius);
  }
  .ab-mv__card--mission .ab-mv__ic { background: rgba(255, 255, 255, 0.16); color: #fff; }
  .ab-mv__card--vision .ab-mv__ic { background: var(--brand-tint); color: var(--brand); }
  .ab-mv__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
  .ab-mv__card--mission .ab-mv__label { color: rgba(255, 255, 255, 0.75); }
  .ab-mv__card--vision .ab-mv__label { color: var(--accent-600); }
  .ab-mv__quote {
    margin: 0; font-family: var(--font-display); font-weight: 500; font-style: italic;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem); line-height: 1.5;
  }
  .ab-mv__card--mission .ab-mv__quote { color: #fff; }
  .ab-mv__card--vision .ab-mv__quote { color: var(--ink); }

  .ab-pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-m); margin-top: var(--space-l); }
  @media (min-width: 620px) { .ab-pillars { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ab-pillars { grid-template-columns: repeat(4, 1fr); } }
  .ab-pillar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-1); padding: var(--space-m);
  }
  .ab-pillar__ic {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius);
    background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-xs);
  }
  .ab-pillar__title { margin: 0 0 0.3em; font-size: var(--fs-0); font-weight: 700; color: var(--ink); }
  .ab-pillar__text { margin: 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }

  /* ---- 2 · Branch introduction ---------------------------------------------- */
  .ab-intro__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1024px) {
    .ab-intro__grid { grid-template-columns: 7fr 5fr; gap: var(--space-l); }
  }
  .ab-intro__figure {
    position: relative; margin: 0 0 var(--space-l);
    border-radius: var(--ab-card); overflow: clip; box-shadow: var(--shadow-2);
  }
  .ab-intro__figure .image-slot { border-radius: inherit; }
  .ab-intro__figure-tag {
    position: absolute; left: 0.75rem; bottom: 0.75rem;
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.35em 0.8em; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    font-size: var(--fs--1); font-weight: 600; color: var(--ink);
    box-shadow: var(--shadow-1);
  }
  .ab-intro__figure-tag svg { width: 15px; height: 15px; color: var(--teal-600); }
  .ab-intro__title { font-size: var(--ab-h2); font-weight: 700; color: var(--brand); margin: 0 0 var(--space-s); }
  .ab-intro__text { font-size: var(--fs-1); line-height: 1.62; color: var(--ink-2); margin: 0; max-width: 60ch; }
  .ab-intro__actions { margin-top: var(--space-l); }
  .ab-intro__ghost {
    --_bg: var(--surface-2); --_fg: var(--brand); --_bd: transparent;
    gap: 0.45em;
  }
  .ab-intro__ghost:hover { --_bg: var(--brand-tint); }

  .ab-intro__card {
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
    border: 1px solid var(--line); border-radius: var(--ab-card);
    padding: var(--space-l); box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: var(--space-m);
  }
  @media (min-width: 1024px) { .ab-intro__card { padding: var(--space-l) var(--space-l) var(--space-l); position: sticky; top: calc(var(--header-h) + var(--space-m)); } }

  .ab-badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.55em;
    padding: 0.4em 0.9em; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--fs--1); font-weight: 600; color: var(--ink-2);
    box-shadow: var(--shadow-1); margin: 0;
  }
  .ab-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
  .ab-badge.is-open { color: var(--success); }
  .ab-badge.is-open .ab-badge__dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-tint); animation: ab-pulse 2s var(--ease) infinite; }
  @keyframes ab-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--success-tint); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 12%, transparent); } }

  .ab-facts {
    margin: 0; display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius-l); overflow: clip;
    background: var(--surface);
  }
  .ab-fact {
    display: flex; align-items: flex-start; gap: 0.7rem; margin: 0;
    padding: var(--space-m) var(--space-m);
    transition: background var(--dur-1) var(--ease);
  }
  .ab-fact + .ab-fact { border-top: 1px solid var(--line); }
  .ab-fact:hover { background: var(--brand-tint-2); }
  .ab-fact__ic {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-tint); color: var(--brand);
  }
  .ab-fact__ic svg { width: 15px; height: 15px; }
  .ab-fact__ic--accent { background: var(--accent-tint); color: var(--accent); }
  .ab-fact__ic--teal { background: var(--teal-tint); color: var(--teal-600); }
  .ab-fact__body { margin-left: 5px; display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
  .ab-fact__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
  .ab-fact__value { font-size: var(--fs-0); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
  .ab-fact__value--link { color: var(--brand); font-weight: 600; text-decoration: none; }
  .ab-fact__value--link:hover { text-decoration: underline; }

  .ab-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.9em; margin-top: 0.2em; }
  .ab-hours__row { display: contents; }
  .ab-hours__day { font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
  .ab-hours__time { font-size: var(--fs--1); color: var(--ink-2); }
  .ab-hours__row.is-today .ab-hours__day, .ab-hours__row.is-today .ab-hours__time { color: var(--brand); font-weight: 600; }

  .ab-intro__maps {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    padding: 0.85em 1.2em; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--line);
    color: var(--brand); font-weight: 600; text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .ab-intro__maps:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
  .ab-intro__maps svg { transition: transform var(--dur-1) var(--ease); }
  .ab-intro__maps:hover svg { transform: translate(1px, -1px); }

  /* ---- 3 · Story ---------------------------------------------------------- */
  .ab-story { overflow: clip; }
  .ab-story__inner { position: relative; z-index: 1; max-width: 52rem; }
  .ab-story__year {
    position: absolute; right: 1.5rem; bottom: -2.5rem; line-height: 0.8;
    font-weight: 700; letter-spacing: -0.03em;
    font-size: clamp(7rem, 4rem + 16vw, 15rem);
    color: var(--brand); opacity: 0.08; z-index: 0; pointer-events: none; user-select: none;
  }
  .ab-story__title { font-size: var(--ab-h2); font-weight: 700; margin: 0 0 var(--space-m); }
  .ab-story__body { color: var(--ink-2); font-size: var(--fs-1); line-height: 1.66; }
  .ab-story__body p { max-width: 64ch; }
  .ab-story__body p + p { margin-top: var(--space-m); }
  .ab-story__body :last-child { margin-bottom: 0; }

  /* ---- 4 · Mission ------------------------------------------------------------ */
  .ab-mission__inner { max-width: 46rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .ab-mission__mark {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--teal-tint); color: var(--teal-600); margin-bottom: var(--space-s);
  }
  .ab-mission__mark svg { width: 28px; height: 28px; }
  .ab-mission__quote {
    margin: 0.25em 0 0; border: 0; padding: 0;
    font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.1rem); line-height: 1.4;
    font-style: italic; font-weight: 600; color: var(--brand); text-wrap: balance;
  }
  .ab-mission__quote::before { content: "\201C"; }
  .ab-mission__quote::after  { content: "\201D"; }
  .ab-mission__rule { display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--accent); margin-top: var(--space-m); }

  /* ---- 5 · Values — 6-tile grid, tinted per column, hover-lit ------------- */
  .ab-values__grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .ab-values__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ab-values__grid { grid-template-columns: repeat(3, 1fr); } }
  .ab-value {
    position: relative; overflow: clip;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--ab-card);
    padding: var(--space-l); box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: var(--space-2xs);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .ab-value::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--brand); transform: scaleY(0); transform-origin: top;
    transition: transform var(--dur-2) var(--ease);
  }
  .ab-value:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--brand-400); }
  .ab-value:hover::before { transform: scaleY(1); }
  .ab-value__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xs); }
  .ab-value__ic {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: var(--brand-tint); color: var(--brand);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .ab-value:hover .ab-value__ic { transform: rotate(-6deg) scale(1.05); }
  .ab-value:nth-child(3n+2) .ab-value__ic { background: var(--accent-tint); color: var(--accent); }
  .ab-value:nth-child(3n) .ab-value__ic { background: var(--teal-tint); color: var(--teal-600); }
  .ab-value:hover .ab-value__ic { background: var(--brand); color: #fff; }
  .ab-value:nth-child(3n+2):hover .ab-value__ic { background: var(--accent); }
  .ab-value:nth-child(3n):hover .ab-value__ic { background: var(--teal-600); }
  .ab-value__num {
    font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--line-strong) 70%, transparent); user-select: none;
  }
  .ab-value__title { font-size: var(--ab-h3); font-weight: 700; margin: 0; }
  .ab-value__text { margin: 0.15em 0 0; color: var(--ink-2); font-size: var(--fs-0); line-height: 1.6; }

  /* ---- 6 · Facilities — paired photo + tinted feature tiles, equal row height */
  .ab-facilities .ab-head { margin-bottom: var(--space-l); }
  .ab-facilities__grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .ab-facilities__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
  }
  .ab-facility {
    border-radius: var(--ab-card); overflow: clip;
    display: flex; flex-direction: column;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }

  /* photo tile — image with an overlaid wing chip, compact caption below */
  .ab-facility--photo {
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  }
  .ab-facility--photo:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .ab-facility__media { position: relative; display: block; }
  .ab-facility__media .image-slot { border-radius: 0; background: var(--brand-tint-2); }
  .ab-facility__media .image-slot img { transition: transform var(--dur-3) var(--ease); }
  .ab-facility--photo:hover .ab-facility__media .image-slot img { transform: scale(1.05); }
  .ab-facility__body {
    flex: 1; padding: var(--space-m);
    display: flex; flex-direction: column; gap: 0.3em;
  }
  .ab-facility__name { font-size: var(--ab-h3); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
  .ab-facility__detail { margin: 0; color: var(--ink-2); font-size: var(--fs--1); line-height: 1.55; }

  /* feature tile — soft tinted panel that stretches to the photo tile's height;
     icon + label + title + copy sit at the top, a short verified note at the base */
  .ab-facility--feature {
    position: relative; isolation: isolate;
    background:
      radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 55%),
      var(--brand-tint);
    border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    padding: var(--space-l) var(--space-m); gap: var(--space-m); justify-content: space-between;
  }
  .ab-facility--feature.ab-facility--alt {
    background:
      radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 55%),
      var(--accent-tint);
    border-color: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  @media (min-width: 768px) { .ab-facility--feature { padding: var(--space-l); } }
  .ab-facility__top { display: flex; flex-direction: column; gap: var(--space-s); }
  .ab-facility__lead { display: flex; flex-direction: column; gap: 0.3em; }
  .ab-facility__eyebrow {
    font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--brand);
  }
  .ab-facility--alt .ab-facility__eyebrow { color: var(--accent); }
  .ab-facility__ic {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
    background: var(--brand); color: #fff; box-shadow: var(--shadow-2);
  }
  .ab-facility--alt .ab-facility__ic { background: var(--accent); }
  .ab-facility--feature .ab-facility__name { font-size: var(--ab-h3); letter-spacing: -0.01em; }
  .ab-facility--feature .ab-facility__detail {
    font-size: var(--fs-0); line-height: 1.65; color: var(--ink-2); max-width: 42ch;
  }
  .ab-facility__note {
    display: flex; align-items: center; gap: 0.5em; margin: 0;
    font-size: var(--fs--1); font-weight: 600; color: var(--brand);
  }
  .ab-facility--alt .ab-facility__note { color: var(--accent); }
  .ab-facility__note svg { width: 16px; height: 16px; flex: none; }

  /* ---- 7 · Standards / accreditation ------------------------------------- */
  .ab-standards { overflow: clip; }
  .ab-standards .container { position: relative; z-index: 1; }
  .ab-standards__orb {
    position: absolute; left: -6rem; bottom: -6rem; width: 22rem; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 32%, transparent) 0%, transparent 70%);
    filter: blur(40px); pointer-events: none; z-index: 0;
  }
  .ab-standards__grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
  @media (min-width: 560px) { .ab-standards__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ab-standards__grid { grid-template-columns: repeat(4, 1fr); } }
  .ab-standard {
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px); border-radius: var(--ab-card);
    padding: var(--space-l); display: flex; flex-direction: column; gap: 0.6em;
    transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
  }
  .ab-standard:hover {
    background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-4px);
  }
  .ab-standard__ic {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.14); color: #fff;
  }
  .ab-standard__ic svg { width: 18px; height: 18px; }
  .ab-standard__name { font-size: var(--ab-h3); font-weight: 700; color: #fff; margin: 0; }
  .ab-standard__detail { margin: 0; color: rgba(255, 255, 255, 0.74); font-size: var(--fs-0); line-height: 1.6; }

  /* ---- 8 · Final CTA -------------------------------------------------------- */
  .ab-cta__card {
    position: relative; overflow: clip; border-radius: var(--radius-l);
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--accent) 30%, var(--surface)) 0%,
      var(--surface) 48%,
      color-mix(in srgb, var(--brand) 26%, var(--surface)) 100%);
    box-shadow: var(--shadow-1);
    padding: clamp(1.75rem, 1.3rem + 2vw, 3rem);
    display: flex; flex-direction: column; gap: var(--space-l);
  }
  @media (min-width: 900px) {
    .ab-cta__card { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-xl); }
  }
  .ab-cta__body { max-width: 40rem; }
  .ab-cta__title { font-size: var(--ab-h2); font-weight: 700; margin: 0 0 var(--space-s); }
  .ab-cta__text { margin: 0; color: var(--ink-2); font-size: var(--fs-1); }
  .ab-cta__phone {
    display: inline-flex; align-items: center; gap: 0.5em; margin: var(--space-s) 0 0;
    font-size: var(--fs-0); font-weight: 600; color: var(--brand);
  }
  .ab-cta__phone strong { color: var(--ink); }
  .ab-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); flex: none; }
  @media (max-width: 559px) { .ab-cta__actions { flex-direction: column; align-items: stretch; } }
  .ab-cta__ghost { --_bg: var(--surface); --_fg: var(--brand); --_bd: var(--surface); box-shadow: var(--shadow-1); }
  .ab-cta__ghost:hover { --_bg: var(--brand-tint); }
}

@layer utilities {
  .js-reveal .hp-story__media[data-reveal-image] .image-slot img { transform: scale(1.06); }
  .js-reveal .hp-story__media[data-reveal-image].is-in .image-slot img { transform: none; }
  .hp-story__media:hover .image-slot img { transform: scale(1.02); }
  .js-reveal .hp-story__media[data-reveal-image].is-in:hover .image-slot img { transform: scale(1.02); }

  /* About page — image wrappers hold an .image-slot figure, not a bare <img>,
     so the generic [data-reveal-image] > img rule can't reach them; scope the
     clip-path reveal + settle-scale here instead. */
  .js-reveal .ab-intro__figure[data-reveal-image] .image-slot img,
  .js-reveal .ab-facility__media[data-reveal-image] .image-slot img,
  .js-reveal .ab-founder__media[data-reveal-image] img { transform: scale(1.06); transition: transform var(--dur-3) var(--ease); }
  .js-reveal .ab-intro__figure[data-reveal-image].is-in .image-slot img,
  .js-reveal .ab-facility__media[data-reveal-image].is-in .image-slot img,
  .js-reveal .ab-founder__media[data-reveal-image].is-in img { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .arrow-link__i,
    .hp-actions__item, .hp-actions__icon, .hp-actions__arrow,
    .hp-hero__bg, .hp-hero__cta-arrow, .hp-hero__dot, .hp-hero__btn,
    .hp-story__link-i, .hp-story__media .image-slot img,
    .hp-dept__card, .hp-dept__card-cta, .hp-dept__card-cta svg, .hp-dept__btn, .hp-dept__progress-fill,
    .hp-doc-card, .hp-doc-card__img img, .hp-doc-card__cta, .hp-doc-card__cta-i, .hp-docs__btn, .hp-docs__progress-fill,
    .hp-treat-card, .hp-treat-card__img, .hp-treat-card__cta, .hp-treat-card__cta-i,
    .checkup-col, .checkup-col__chev, .checkup-col__cta-arrow,
    .hp-trust__point, .hp-trust__point-index, .hp-trust__point-ic, .hp-trust__point-line,
    .hp-quote-card, .hp-quote-card__mark, .hp-quotes__btn, .hp-quotes__progress-fill,
    .hp-blog-card, .hp-blog-card__img img, .hp-blog-card__icon, .hp-blog-card__cta-i,
    .hp-contact__fact, .hp-contact__fact-ic, .hp-contact__fact-val, .hp-contact__fact-arr,
    .hp-contact__directions, .hp-contact__directions svg,
    .site-footer a, .socials a,
    .ab-crumbs__seg a,
    .ab-value, .ab-value__ic,
    .ab-facility, .ab-facility__media .image-slot img,
    .ab-founder, .ab-founder__media img,
    .ab-fact,
    .ab-intro__figure .image-slot img, .ab-intro__maps, .ab-intro__maps svg,
    .ab-standard {
      transition: none !important;
    }
    .ab-badge.is-open .ab-badge__dot { animation: none !important; }
    .hp-kicker__dot::after, .hp-hero__live-dot.is-open::after { animation: none !important; }
    a.hp-contact__fact:hover, a.hp-contact__fact:focus-visible { transform: none !important; }
    .footer-col > ul a:hover, .footer-col > ul a:focus-visible,
    .socials a:hover, .socials a:focus-visible { transform: none !important; }
    .js-reveal .hp-story__media[data-reveal-image] .image-slot img { transform: none !important; }
    .js-reveal .ab-intro__figure[data-reveal-image] .image-slot img,
    .js-reveal .ab-facility__media[data-reveal-image] .image-slot img,
    .js-reveal .ab-founder__media[data-reveal-image] img { transform: none !important; }
    .hp-trust__point:hover .hp-trust__point-ic, .hp-trust__point:focus-visible .hp-trust__point-ic { transform: none !important; }
    .hp-trust__point:hover, .hp-trust__point:focus-visible { transform: none !important; }
  }
}

/* =============================================================================
   DEPARTMENTS PAGE  (templates/public/departments_list.html)
   Built to the approved Google Stitch design (project "AAF Hospital About Page",
   screen "Departments & Specialities · AAF Hospital Group"). New "dp-" class
   names only — isolated from the shared .hero/.card/.grid components and the
   "hp-" (homepage) / "ab-" (About) blocks. Stitch's Material tokens are mapped
   onto the existing brand palette (--brand indigo, --accent magenta, --teal);
   the typeface stays Poppins (project standard). Search + category filter are
   the shared initFilter() (static/public/js/filter.js) via data-filter* attrs.
   ========================================================================== */
@layer components {

  .dp-sec {
    --dp-display: clamp(2rem, 1.5rem + 2.4vw, 2.9rem);       /* Stitch display-lg */
    --dp-h2:      clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);     /* headline-xl */
    --dp-h3:      clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);   /* headline-sm / title-lg */
    --dp-card:    18px;
    --dp-tint-1:  var(--brand-tint-2);
    --dp-tint-2:  color-mix(in srgb, var(--brand) 7%, #fff);
    position: relative;
    padding-block: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  }
  .dp-sec--tint1 { background: var(--dp-tint-1); }
  .dp-sec--tint2 { background: var(--dp-tint-2); }
  .dp-sec--dark {
    background: linear-gradient(158deg, var(--brand-600) 0%, var(--brand) 58%, #38489f 100%);
    color: #fff;
  }
  .dp-sec--dark h2 { color: #fff; }
  .dp-sec--flush { position: relative; }

  /* ---- shared kicker (dot + uppercase label) ---------------------------- */
  .dp-kicker {
    display: flex; align-items: center; gap: 0.55em; margin: 0 0 var(--space-s);
    font-weight: 700; font-size: var(--fs--1); letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--brand);
  }
  .dp-kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
  .dp-kicker--accent { color: var(--accent); }
  .dp-kicker--teal { color: var(--teal-600); }
  /* default marker is a short dash; a .dp-kicker__dot child replaces it */
  .dp-kicker::before {
    content: ""; flex: none; width: 22px; height: 2px; border-radius: 1px; background: currentColor;
  }
  .dp-kicker:has(.dp-kicker__dot)::before { display: none; }

  .dp-head__title { font-size: var(--dp-h2); font-weight: 700; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
  .dp-head__lead { margin: var(--space-s) 0 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 54ch; }

  /* ---- breadcrumb — rounded-pill trail --------------------------------- */
  .dp-crumbs-wrap { padding-top: calc(var(--space-m) + var(--space-2xs)); padding-bottom: var(--space-m); }
  .dp-crumbs__trail {
    list-style: none; margin: 0; padding: 0.4em 0.55em;
    display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-pill); box-shadow: var(--shadow-1); font-size: var(--fs--1);
  }
  .dp-crumbs__seg { display: inline-flex; align-items: center; }
  .dp-crumbs__seg a {
    display: inline-flex; align-items: center; gap: 0.4em;
    color: var(--ink-2); font-weight: 500; text-decoration: none; white-space: nowrap;
    padding: 0.15em 0.35em; border-radius: var(--radius-s);
    transition: color var(--dur-1) var(--ease);
  }
  .dp-crumbs__seg a:hover, .dp-crumbs__seg a:focus-visible { color: var(--brand); }
  .dp-crumbs__seg a svg { color: var(--teal-600); }
  .dp-crumbs__sep { display: inline-flex; color: var(--faint); }
  .dp-crumbs__sep svg { width: 14px; height: 14px; }
  .dp-crumbs__here {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 0.28em 0.85em; border-radius: var(--radius-pill);
    font-weight: 600; color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
  }

  /* ---- 1 · Atmospheric banner ----------------------------------------- */
  .dp-banner { overflow: clip; padding-bottom: clamp(3.75rem, 3rem + 4vw, 5.5rem); }
  .dp-banner__glow {
    position: absolute; top: -8rem; right: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(40px);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
  }
  .dp-banner__glow--2 {
    top: 3rem; right: auto; left: 32%; width: min(360px, 48vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .dp-banner__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: end;
  }
  @media (min-width: 1024px) { .dp-banner__grid { grid-template-columns: 8fr 4fr; gap: var(--space-xl); } }
  .dp-banner__title {
    font-size: var(--dp-display); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--brand); text-wrap: balance;
  }
  .dp-banner__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

  .dp-stats {
    display: flex; align-items: center; gap: var(--space-s);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-s) var(--space-m); box-shadow: var(--shadow-2);
  }
  @media (min-width: 1024px) { .dp-stats { justify-self: end; } }
  .dp-stats__ic {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--brand-tint); color: var(--brand);
  }
  .dp-stats__figs { display: flex; flex-direction: column; min-width: 0; }
  .dp-stats__num { font-size: var(--fs-1); font-weight: 700; color: var(--brand); line-height: 1.15; }
  .dp-stats__sub { font-size: var(--fs--1); color: var(--muted); }
  .dp-stats__div { width: 1px; align-self: stretch; background: var(--line); margin-inline: 0.15rem; }
  .dp-stats__live { display: flex; flex-direction: column; gap: 0.15em; }
  .dp-stats__live-tag {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--fs--1); font-weight: 700; color: var(--accent);
  }
  .dp-stats__live-tag--off { color: var(--muted); }
  .dp-stats__ping {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    animation: dp-ping 1.8s var(--ease) infinite;
  }
  @keyframes dp-ping {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 7px transparent; }
  }
  .dp-stats__live-txt { font-size: var(--fs-0); font-weight: 600; color: var(--ink); }

  /* ---- 2 · Search + category filter toolbar --------------------------- */
  .dp-toolbar-wrap { z-index: 5; margin-top: calc(-1 * clamp(2rem, 1.4rem + 3vw, 3.25rem)); }
  .dp-toolbar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: var(--space-m);
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  .dp-toolbar__row { display: flex; flex-direction: column; gap: var(--space-s); }
  @media (min-width: 768px) { .dp-toolbar__row { flex-direction: row; align-items: center; } }
  .dp-search {
    position: relative; flex: 1; display: flex; align-items: center;
  }
  .dp-search svg {
    position: absolute; left: 0.95rem; width: 18px; height: 18px; color: var(--muted); pointer-events: none;
  }
  .dp-search input {
    width: 100%; padding: 0.85em 1em 0.85em 2.7em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    font: inherit; font-size: var(--fs-0); color: var(--ink);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .dp-search input::placeholder { color: var(--muted); }
  .dp-search input:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  }
  .dp-toolbar__campus {
    display: inline-flex; align-items: center; gap: 0.4em; flex: none; align-self: flex-start;
    padding: 0.6em 0.9em; border-radius: var(--radius);
    background: var(--surface-2); color: var(--ink-2); font-size: var(--fs--1); font-weight: 600;
  }
  .dp-toolbar__campus svg { width: 16px; height: 16px; color: var(--teal-600); }

  .dp-toolbar__chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs);
    padding-top: var(--space-2xs);
  }
  .dp-toolbar__chips-label { font-size: var(--fs--1); color: var(--muted); margin-right: 0.25rem; }
  .dp-chip {
    display: inline-flex; align-items: center; gap: 0.45em;
    padding: 0.45em 0.9em; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: var(--fs--1); font-weight: 600; cursor: pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
      border-color var(--dur-1) var(--ease);
  }
  .dp-chip:hover { border-color: var(--line-strong); background: var(--brand-tint-2); }
  .dp-chip.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
  .dp-chip__count {
    display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 0.35em;
    border-radius: var(--radius-pill); background: color-mix(in srgb, #fff 30%, transparent);
    font-size: 0.75em; font-weight: 700;
  }
  .dp-chip:not(.is-active) .dp-chip__count { background: var(--brand-tint); color: var(--brand); }
  .dp-toolbar__reset {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.35em;
    background: none; border: 0; cursor: pointer; padding: 0.4em 0.5em;
    font: inherit; font-size: var(--fs--1); font-weight: 600; color: var(--accent);
    transition: color var(--dur-1) var(--ease);
  }
  .dp-toolbar__reset:hover { color: var(--accent-600); }
  .dp-toolbar__reset svg { width: 14px; height: 14px; }

  .dp-toolbar__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em var(--space-s);
    padding-top: var(--space-2xs); border-top: 1px solid var(--line);
    margin-top: var(--space-2xs);
    font-size: var(--fs--1); color: var(--muted);
  }
  .dp-toolbar__count:not(:empty) { color: var(--ink-2); font-weight: 600; }
  .dp-toolbar__count:not(:empty) + .dp-toolbar__count-all { display: none; }
  .dp-toolbar__accred {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.45em; color: var(--teal-600); font-weight: 600;
  }
  .dp-toolbar__accred-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); }

  /* ---- 3 · Featured spotlight ---------------------------------------- */
  .dp-featured__card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); overflow: clip;
    padding: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center;
  }
  @media (min-width: 1024px) {
    .dp-featured__card { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  }
  .dp-featured__media {
    position: relative; border-radius: var(--dp-card); overflow: clip; box-shadow: var(--shadow-2);
  }
  .dp-featured__media .image-slot { border-radius: inherit; background: var(--brand-tint-2); }
  .dp-featured__media .image-slot img { transition: transform var(--dur-3) var(--ease); }
  .dp-featured__card:hover .dp-featured__media .image-slot img { transform: scale(1.04); }
  .dp-featured__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--brand) 78%, transparent) 0%, transparent 46%);
  }
  .dp-featured__badge {
    position: absolute; top: 0.85rem; left: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.4em 0.8em; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
    font-size: var(--fs--1); font-weight: 700; color: var(--brand); box-shadow: var(--shadow-1);
  }
  .dp-featured__badge svg { width: 15px; height: 15px; color: var(--accent); }
  .dp-featured__cap {
    position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; display: flex; flex-direction: column; color: #fff;
  }
  .dp-featured__cap-lead { font-size: var(--fs--1); font-weight: 700; }
  .dp-featured__cap-sub { font-size: var(--fs--1); color: rgba(255,255,255,0.82); }
  .dp-featured__body { display: flex; flex-direction: column; gap: var(--space-s); }
  .dp-featured__title { font-size: var(--dp-h2); font-weight: 700; color: var(--brand); margin: 0; letter-spacing: -0.01em; }
  .dp-featured__tagline { margin: 0; font-size: var(--fs-1); font-weight: 600; color: var(--accent); }
  .dp-featured__text { margin: 0; font-size: var(--fs-0); line-height: 1.6; color: var(--ink-2); }
  .dp-featured__points {
    display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); margin: var(--space-2xs) 0;
  }
  @media (min-width: 560px) { .dp-featured__points { grid-template-columns: repeat(3, 1fr); } }
  .dp-point {
    background: var(--surface-2); border-radius: var(--radius); padding: var(--space-s);
    display: flex; flex-direction: column; gap: 0.15em;
  }
  .dp-point__ic { display: inline-flex; color: var(--brand); }
  .dp-point__ic svg { width: 20px; height: 20px; }
  .dp-point:nth-child(2) .dp-point__ic { color: var(--teal-600); }
  .dp-point:nth-child(3) .dp-point__ic { color: var(--accent); }
  .dp-point__num { font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .dp-point__lbl { font-size: var(--fs--1); color: var(--muted); line-height: 1.35; }
  .dp-featured__actions { margin-top: var(--space-2xs); }
  .dp-ghost { --_bg: var(--surface-2); --_fg: var(--brand); --_bd: transparent; }
  .dp-ghost:hover { --_bg: var(--brand-tint); }

  /* ---- 4 · Clinical directory -------------------------------------- */
  .dp-dir-head {
    display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-xl);
  }
  @media (min-width: 768px) {
    .dp-dir-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-l); }
  }
  .dp-dir-head__pill {
    display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start;
    padding: 0.5em 0.9em; border-radius: var(--radius-pill);
    background: var(--brand-tint); color: var(--ink-2); font-size: var(--fs--1); font-weight: 600;
    max-width: 34ch;
  }
  .dp-dir-head__pill svg { width: 15px; height: 15px; color: var(--teal-600); flex: none; }
  .dp-dir-head__link {
    display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start;
    font-size: var(--fs-0); font-weight: 700; color: var(--accent); text-decoration: none;
  }
  .dp-dir-head__link svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
  .dp-dir-head__link:hover svg { transform: translateX(3px); }

  .dp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .dp-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .dp-grid { grid-template-columns: repeat(3, 1fr); } }

  /* The directory now renders the shared homepage department card
     (public/components/department_card.html → .hp-dept__card); this only makes
     each filterable wrapper a full-height flex cell. */
  .dp-grid--cards .dp-grid__item { display: flex; min-width: 0; }
  .dp-grid--cards .dp-grid__item > .hp-dept__card { width: 100%; }

  .dp-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-s); padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .dp-empty__ic {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--surface-2); color: var(--muted);
  }
  .dp-empty__ic svg { width: 28px; height: 28px; }
  .dp-empty__title { margin: 0; font-size: var(--dp-h3); font-weight: 700; color: var(--brand); }
  .dp-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 44ch; }

  /* ---- 5 · Triage & help navigator banner -------------------------- */
  .dp-triage-wrap { padding-block: clamp(1rem, 0.6rem + 2vw, 2rem); }
  .dp-triage {
    position: relative; overflow: clip; border-radius: var(--radius-l);
    background: linear-gradient(100deg, var(--brand-600) 0%, var(--brand) 55%, var(--brand-700) 100%);
    color: #fff; box-shadow: var(--shadow-3);
    padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
    display: flex; flex-direction: column; gap: var(--space-l);
  }
  @media (min-width: 1000px) { .dp-triage { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-xl); } }
  .dp-triage__orb {
    position: absolute; right: -5rem; bottom: -5rem; width: 18rem; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 70%);
    filter: blur(30px); pointer-events: none;
  }
  .dp-triage__body { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--space-m); max-width: 46rem; }
  .dp-triage__ic {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
    background: rgba(255,255,255,0.15); color: #fff;
  }
  .dp-triage__ic svg { width: 24px; height: 24px; }
  .dp-triage__eyebrow {
    margin: 0 0 0.15em; font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: color-mix(in srgb, #fff 80%, var(--accent));
  }
  .dp-triage__title { margin: 0 0 0.3em; font-size: var(--dp-h3); font-weight: 700; color: #fff; }
  .dp-triage__text { margin: 0; font-size: var(--fs-0); line-height: 1.55; color: rgba(255,255,255,0.82); }
  .dp-triage__actions {
    position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-xs);
    width: 100%;
  }
  @media (min-width: 560px) { .dp-triage__actions { flex-direction: row; } }
  @media (min-width: 1000px) { .dp-triage__actions { width: auto; flex: none; } }
  .dp-triage__call {
    --_bg: rgba(255,255,255,0.12); --_fg: #fff; --_bd: rgba(255,255,255,0.28);
    backdrop-filter: blur(4px);
  }
  .dp-triage__call:hover { --_bg: rgba(255,255,255,0.2); }

  /* ---- 6 · Final appointment CTA -------------------------------- */
  .dp-cta { overflow: clip; text-align: center; }
  .dp-cta__orb {
    position: absolute; top: -6rem; right: 22%; width: 22rem; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 70%);
    filter: blur(40px); pointer-events: none; z-index: 0;
  }
  .dp-cta__orb--2 {
    top: auto; bottom: -6rem; right: auto; left: 6%;
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 26%, transparent) 0%, transparent 70%);
  }
  .dp-cta__inner {
    position: relative; z-index: 1; max-width: 44rem; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .dp-cta__pill {
    display: inline-flex; padding: 0.45em 1em; border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.15); color: color-mix(in srgb, #fff 82%, var(--accent));
    font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: var(--space-m);
  }
  .dp-cta__title { margin: 0 0 var(--space-s); font-size: var(--dp-h2); font-weight: 700; color: #fff; text-wrap: balance; }
  .dp-cta__lead { margin: 0 0 var(--space-l); font-size: var(--fs-1); line-height: 1.6; color: rgba(255,255,255,0.82); }
  .dp-cta__actions { justify-content: center; }
  @media (max-width: 559px) { .dp-cta__actions { flex-direction: column; align-items: stretch; width: 100%; } }
  .dp-cta__ghost { --_bg: transparent; --_fg: #fff; --_bd: rgba(255,255,255,0.35); }
  .dp-cta__ghost:hover { --_bg: rgba(255,255,255,0.12); }
  .dp-cta__phone {
    margin: var(--space-l) 0 0; padding-top: var(--space-m); border-top: 1px solid rgba(255,255,255,0.14);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4em var(--space-s);
    font-size: var(--fs--1); color: rgba(255,255,255,0.8);
  }
  .dp-cta__phone svg { width: 15px; height: 15px; color: color-mix(in srgb, #fff 78%, var(--accent)); }
  .dp-cta__phone strong { color: #fff; }
  .dp-cta__phone-sep { color: rgba(255,255,255,0.3); }
}

@layer utilities {
  /* Departments page — image wrappers hold an .image-slot figure, so the generic
     [data-reveal-image] > img rule can't reach them; scope the settle-scale here. */
  .js-reveal .dp-featured__media[data-reveal-image] .image-slot img { transform: scale(1.06); transition: transform var(--dur-3) var(--ease); }
  .js-reveal .dp-featured__media[data-reveal-image].is-in .image-slot img { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .dp-crumbs__seg a,
    .dp-featured__card .dp-featured__media .image-slot img,
    .dp-chip, .dp-toolbar__reset, .dp-search input,
    .dp-dir-head__link svg, .dp-cta__phone svg {
      transition: none !important;
    }
    .dp-stats__ping { animation: none !important; }
    .js-reveal .dp-featured__media[data-reveal-image] .image-slot img { transform: none !important; }
  }
}

/* =============================================================================
   DEPARTMENT DETAIL PAGE  (templates/public/department_detail.html)
   Built to the approved Google Stitch design (screen "Cardiology Department ·
   AAF Hospital Group"). New "dpd-" class names; reuses the "dp-" section scale
   (.dp-sec / .dp-kicker / .dp-head__title / .dp-crumbs* / .dp-ghost) from the
   Departments listing block above. Navbar / footer inherited from
   base_public.html. Stitch's "Stakeholder Preview" state-switcher is demo
   scaffolding and is intentionally not reproduced.
   ========================================================================== */
@layer components {

  .dpd-eyebrow {
    margin: 0 0 var(--space-2xs);
    font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--teal-600);
  }
  .dpd-eyebrow--on-dark { color: color-mix(in srgb, #fff 82%, var(--teal)); }

  /* ---- 1 · Hero -------------------------------------------------------- */
  .dpd-hero { overflow: clip; }
  .dpd-hero__glow {
    position: absolute; top: -7rem; left: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%);
  }
  .dpd-hero__glow--2 {
    top: 40%; left: auto; right: -4rem; width: min(360px, 46vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 26%, transparent) 0%, transparent 70%);
  }
  .dpd-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center;
  }
  @media (min-width: 1024px) { .dpd-hero__grid { grid-template-columns: 1fr minmax(0, 32rem); gap: var(--space-xl); } }
  .dpd-hero__title {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--brand); margin: var(--space-2xs) 0 var(--space-s); text-wrap: balance;
  }
  .dpd-hero__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
  .dpd-hero__actions { margin-top: var(--space-l); }
  .dpd-ping {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent);
    animation: dpd-ping 1.8s var(--ease) infinite;
  }
  @keyframes dpd-ping {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 8px transparent; }
  }
  .dpd-hero__medallion {
    position: relative; justify-self: start; flex: none;
    width: clamp(190px, 40vw, 244px); aspect-ratio: 1; border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow-4, var(--shadow-3));
    display: grid; place-items: center;
  }
  @media (min-width: 1024px) { .dpd-hero__medallion { justify-self: end; } }
  .dpd-hero__ring {
    position: absolute; inset: 14px; border-radius: 50%; z-index: 1;
    border: 2px dashed color-mix(in srgb, var(--brand) 18%, transparent);
  }
  .dpd-hero__mark { display: grid; place-items: center; color: var(--brand); }
  .dpd-hero__mark svg { width: 76px; height: 76px; }
  .dpd-hero__medallion--photo {
    justify-self: stretch; width: 100%; max-width: none;
    aspect-ratio: 4 / 3; border-radius: 10px; background: var(--brand);
    box-shadow: var(--shadow-3);
  }
  .dpd-hero__medallion--photo .dpd-hero__ring { display: none; }
  .dpd-hero__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 10px;
  }

  /* ---- 2 · About ---------------------------------------------------- */
  .dpd-about__body { margin-top: var(--space-m); color: var(--ink-2); font-size: var(--fs-1); line-height: 1.7; }
  .dpd-about__body p { margin: 0 0 var(--space-m); }
  .dpd-about__body h2 {
    margin: var(--space-xl) 0 var(--space-s);
    font-size: var(--fs-2); font-weight: 700; line-height: 1.2;
    letter-spacing: -0.01em; color: var(--brand); text-wrap: balance;
  }
  .dpd-about__body h3 {
    margin: var(--space-l) 0 var(--space-2xs);
    font-size: var(--fs-1); font-weight: 700; color: var(--ink-1);
  }
  .dpd-about__body ul,
  .dpd-about__body ol { margin: 0 0 var(--space-m); padding-left: 1.35em; }
  .dpd-about__body li { margin-bottom: var(--space-2xs); padding-left: 0.15em; }
  .dpd-about__body li::marker { color: var(--teal-600); }
  .dpd-about__body ol > li::marker { font-weight: 700; }
  .dpd-about__body strong { color: var(--ink-1); font-weight: 700; }
  .dpd-about__body > :first-child { margin-top: 0; }
  .dpd-about__body :last-child { margin-bottom: 0; }
  .dpd-about__actions { margin-top: var(--space-l); align-items: center; }
  .dpd-about__link {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--fs-0); font-weight: 700; color: var(--brand); text-decoration: none;
  }
  .dpd-about__link svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
  .dpd-about__link:hover svg { transform: translateX(3px); }

  /* ---- 3 · Consultants -------------------------------------------- */
  .dpd-team__head {
    display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-xl);
  }
  @media (min-width: 768px) {
    .dpd-team__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  }
  .dpd-team__count {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-size: var(--fs--1); font-weight: 600; color: var(--ink-2);
  }
  .dpd-team__count-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-600); }

  /* consultants + treatments both render the shared homepage cards
     (public/components/{doctor,treatment}_slide_card.html). */
  .dpd-docs { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .dpd-docs { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .dpd-docs { grid-template-columns: repeat(3, 1fr); } }
  .dpd-docs > .hp-doc-card { height: 100%; }

  .dpd-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
    padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .dpd-empty__ic {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--surface-2); color: var(--brand);
  }
  .dpd-empty__ic svg { width: 28px; height: 28px; }
  .dpd-empty__title { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .dpd-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 46ch; }

  /* ---- 4 · Treatments & related services ------------------------ */
  .dpd-treat__head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .dpd-treat__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .dpd-treat__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .dpd-treat__grid { grid-template-columns: repeat(3, 1fr); } }
  .dpd-treat__grid > .hp-treat-card { height: 100%; }

  .dpd-treat__empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs);
    padding: var(--space-2xl) var(--space-l); border-radius: var(--radius-l);
    background: var(--surface-2); color: var(--ink-2);
  }
  .dpd-treat__empty svg { width: 34px; height: 34px; color: var(--teal-600); }
  .dpd-treat__empty h3 { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .dpd-treat__empty p { margin: 0; font-size: var(--fs-0); max-width: 44ch; }

  /* ---- 5 · Closing CTA ------------------------------------------ */
  .dpd-cta { overflow: clip; }
  .dpd-cta__orb {
    position: absolute; right: -6rem; bottom: -6rem; width: 22rem; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%);
    filter: blur(42px); pointer-events: none; z-index: 0;
  }
  .dpd-cta__orb--2 {
    right: auto; bottom: auto; left: -4rem; top: -4rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 22%, transparent) 0%, transparent 70%);
  }
  .dpd-cta__inner { position: relative; z-index: 1; }
  .dpd-cta__title { margin: 0 0 var(--space-s); max-width: 24ch; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); font-weight: 700; color: #fff; text-wrap: balance; }
  .dpd-cta__lead { margin: 0 0 var(--space-l); max-width: 56ch; font-size: var(--fs-1); line-height: 1.6; color: rgba(255,255,255,0.82); }
  .dpd-cta__ghost { --_bg: rgba(255,255,255,0.12); --_fg: #fff; --_bd: rgba(255,255,255,0.3); }
  .dpd-cta__ghost:hover { --_bg: rgba(255,255,255,0.2); }
  .dpd-cta__phone {
    margin: var(--space-l) 0 0; display: inline-flex; align-items: center; gap: 0.5em;
    font-size: var(--fs--1); color: rgba(255,255,255,0.82);
  }
  .dpd-cta__phone svg { width: 15px; height: 15px; color: color-mix(in srgb, #fff 78%, var(--accent)); }
  .dpd-cta__phone strong { color: #fff; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .dpd-about__link svg { transition: none !important; }
    .dpd-ping { animation: none !important; }
  }
}

/* =============================================================================
   DOCTORS LISTING PAGE  (templates/public/doctors_list.html)
   Built to the approved Google Stitch design (screen "Doctors & Consultants ·
   AAF Hospital Group"). New "dr-" class names; reuses the "dp-" section scale
   (.dp-sec / .dp-kicker / .dp-head__title / .dp-crumbs* / .dp-search /
   .dp-toolbar__* / .dp-chip / .dp-dir-head* / .dp-triage* / .dp-cta*) from the
   Departments blocks. Navbar / footer inherited. Search + speciality filter +
   "available today" toggle are the shared initFilter() via data-filter* attrs.
   ========================================================================== */
@layer components {

  /* ---- 1 · Banner --------------------------------------------------- */
  .dr-banner { overflow: clip; padding-bottom: clamp(3.75rem, 3rem + 4vw, 5.5rem); }
  .dr-banner__glow {
    position: absolute; top: -8rem; right: 22%; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .dr-banner__glow--2 {
    top: 3rem; right: auto; left: 4%; width: min(340px, 44vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
  }
  .dr-banner__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center;
  }
  @media (min-width: 1024px) { .dr-banner__grid { grid-template-columns: 8fr 4fr; gap: var(--space-xl); } }
  .dr-banner__title {
    font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.35rem); font-weight: 700; line-height: 1.12;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--ink); text-wrap: balance;
  }
  .dr-banner__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }

  .dr-stats {
    display: flex; align-items: center; gap: var(--space-s);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-s) var(--space-m); box-shadow: var(--shadow-2);
  }
  @media (min-width: 1024px) { .dr-stats { justify-self: end; } }
  .dr-stats__ic {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--brand-tint); color: var(--brand);
  }
  .dr-stats__figs { display: flex; flex-direction: column; min-width: 0; }
  .dr-stats__num { font-size: var(--fs-1); font-weight: 700; color: var(--brand); line-height: 1.15; }
  .dr-stats__sub { font-size: var(--fs--1); color: var(--muted); }
  .dr-stats__div { width: 1px; align-self: stretch; background: var(--line); margin-inline: 0.15rem; }
  .dr-stats__live { display: flex; flex-direction: column; gap: 0.15em; }
  .dr-stats__live-tag { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs--1); font-weight: 700; color: var(--accent); }
  .dr-stats__live-tag--off { color: var(--muted); }
  .dr-stats__ping {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    animation: dp-ping 1.8s var(--ease) infinite;
  }
  .dr-stats__live-txt { font-size: var(--fs-0); font-weight: 600; color: var(--ink); }

  /* ---- 2 · Toolbar (extends the dp- toolbar) ---------------------- */
  .dr-toolbar-wrap { z-index: 5; margin-top: calc(-1 * clamp(2rem, 1.4rem + 3vw, 3.25rem)); }
  .dr-toolbar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: var(--space-m);
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  .dr-toolbar__row { display: flex; flex-direction: column; gap: var(--space-s); }
  @media (min-width: 768px) { .dr-toolbar__row { flex-direction: row; align-items: center; } }
  .dr-toggle {
    display: inline-flex; align-items: center; gap: 0.45em; flex: none;
    padding: 0.7em 0.95em; border-radius: var(--radius);
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
    font: inherit; font-size: var(--fs--1); font-weight: 600; cursor: pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .dr-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
  .dr-toggle:hover { border-color: var(--line-strong); }
  .dr-toggle.is-active { background: var(--teal-tint); color: var(--teal-600); border-color: color-mix(in srgb, var(--teal) 30%, transparent); }
  .dr-toggle.is-active .dr-toggle__dot { background: var(--teal-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }

  /* ---- 3 · Directory grid — the shared homepage doctor card ------ */
  .dr-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 620px) { .dr-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .dr-grid { grid-template-columns: repeat(3, 1fr); } }

  /* Each filterable wrapper is a full-height flex cell holding the shared
     card (public/components/doctor_slide_card.html → .hp-doc-card). */
  .dr-grid--cards .dr-grid__item { display: flex; min-width: 0; }
  .dr-grid--cards .dr-grid__item > .hp-doc-card { width: 100%; }

  .dr-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
    padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .dr-empty__ic {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--surface-2); color: var(--muted);
  }
  .dr-empty__ic svg { width: 28px; height: 28px; }
  .dr-empty__title { margin: 0; font-size: var(--dp-h3, 1.15rem); font-weight: 700; color: var(--brand); }
  .dr-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 46ch; }

  /* ---- 5 · Browse by speciality ------------------------------- */
  .dr-fields__head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .dr-fields__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }
  @media (min-width: 560px) { .dr-fields__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .dr-fields__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1200px) { .dr-fields__grid { grid-template-columns: repeat(4, 1fr); } }
  .dr-field {
    display: flex; align-items: center; gap: var(--space-s);
    padding: var(--space-m); border-radius: var(--radius-l);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .dr-field:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .dr-field__ic {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--brand-tint); color: var(--brand);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .dr-field__ic svg { width: 18px; height: 18px; }
  .dr-field:hover .dr-field__ic { background: var(--brand); color: #fff; }
  .dr-field__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .dr-field__name { font-size: var(--fs-0); font-weight: 700; color: var(--brand); }
  .dr-field:hover .dr-field__name { color: var(--accent); }
  .dr-field__count { font-size: var(--fs--1); color: var(--muted); }
  .dr-field__arr { flex: none; color: var(--faint); }
  .dr-field__arr svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
  .dr-field:hover .dr-field__arr { color: var(--brand); }
  .dr-field:hover .dr-field__arr svg { transform: translateX(3px); }

  .dr-triage-wrap { padding-block: clamp(1rem, 0.6rem + 2vw, 2rem); }
  .dr-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .dr-field, .dr-field__ic, .dr-field__arr svg,
    .dr-toggle {
      transition: none !important;
    }
    .dr-stats__ping { animation: none !important; }
  }
}

/* =============================================================================
   CONSULTANT PROFILE PAGE  (templates/public/doctor_detail.html)
   Built to the approved Google Stitch design (screen "Consultant Profile ·
   Dr Arjun Sharma · AAF Hospital Group"). New "drd-" class names; reuses the
   "dp-" section scale (.dp-sec / .dp-kicker / .dp-head__title / .dp-crumbs* /
   .dp-ghost / .dp-cta*) from the Departments blocks. Navbar / footer inherited.
   Stitch's invented condition grid / registration IDs / OPD timings / pull-quote
   are not reproduced — only real relational data (bio, credentials, related
   departments & treatments, other-branch schedule).
   ========================================================================== */
@layer components {

  /* ---- Location note ------------------------------------------------ */
  .drd-notice-wrap { padding-top: var(--space-m); }
  .drd-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m);
    padding: var(--space-s) var(--space-m); border-radius: var(--radius);
    background: var(--brand-tint-2); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  }
  .drd-notice__ic {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--teal-tint); color: var(--teal-600);
  }
  .drd-notice__ic svg { width: 15px; height: 15px; }
  .drd-notice__text { margin: 0; flex: 1; min-width: 16rem; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }
  .drd-notice__text strong { color: var(--brand); }
  .drd-notice__link {
    display: inline-flex; align-items: center; gap: 0.35em; flex: none;
    font-size: var(--fs--1); font-weight: 700; color: var(--brand); text-decoration: none;
  }
  .drd-notice__link svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
  .drd-notice__link:hover svg { transform: translateX(3px); }

  /* ---- 1 · Profile hero ------------------------------------------- */
  .drd-hero { overflow: clip; }
  .drd-hero__glow {
    position: absolute; top: -7rem; left: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .drd-hero__glow--2 {
    top: auto; bottom: -7rem; left: auto; right: -5rem; width: min(380px, 46vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 22%, transparent) 0%, transparent 70%);
  }
  .drd-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center;
  }
  @media (min-width: 1024px) { .drd-hero__grid { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); } }
  .drd-hero__media {
    position: relative; border-radius: var(--radius-l); overflow: clip;
    border: 1px solid var(--line); box-shadow: var(--shadow-3); background: var(--surface);
  }
  .drd-hero__photo { display: block; }
  .drd-hero__photo .image-slot { border-radius: 0; background: var(--brand-tint-2); }
  .drd-hero__photo .image-slot img { object-position: top; transition: transform var(--dur-3) var(--ease); }
  .drd-hero__media:hover .drd-hero__photo .image-slot img { transform: scale(1.03); }
  .drd-hero__role {
    position: absolute; top: 0.85rem; left: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.4em 0.8em; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
    font-size: var(--fs--1); font-weight: 700; color: var(--brand); box-shadow: var(--shadow-1);
  }
  .drd-hero__role svg { width: 14px; height: 14px; color: var(--accent); }
  .drd-hero__loc {
    position: absolute; top: 0.85rem; right: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.35em 0.7em; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand-700, var(--brand)) 88%, transparent); color: #fff;
    font-size: 0.7rem; font-weight: 600; box-shadow: var(--shadow-2);
  }
  .drd-hero__loc svg { width: 12px; height: 12px; color: var(--teal-tint); }
  .drd-hero__status {
    position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.85rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
    padding: 0.6em 0.85em; border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(8px);
    box-shadow: var(--shadow-3);
  }
  .drd-hero__status-live { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs--1); font-weight: 700; color: var(--muted); }
  .drd-hero__status-live.is-on { color: var(--teal-600); }
  .drd-hero__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
  .drd-hero__status-live.is-on .drd-hero__status-dot {
    background: var(--teal-600);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
    animation: dp-ping 2s var(--ease) infinite;
  }
  .drd-hero__status-branch { font-size: var(--fs--1); font-weight: 700; color: var(--brand); }

  .drd-hero__body { display: flex; flex-direction: column; gap: var(--space-s); }
  .drd-hero__name {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--brand); margin: var(--space-2xs) 0 0; text-wrap: balance;
  }
  .drd-hero__sub { margin: 0.3em 0 0; font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); }
  .drd-facts {
    display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); margin: var(--space-s) 0 0;
  }
  @media (min-width: 480px) { .drd-facts { grid-template-columns: repeat(2, 1fr); } }
  .drd-fact {
    display: flex; align-items: center; gap: var(--space-s);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--space-s); box-shadow: var(--shadow-1);
  }
  .drd-fact__ic {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    background: var(--brand-tint); color: var(--brand);
  }
  .drd-fact__ic--teal { background: var(--teal-tint); color: var(--teal-600); }
  .drd-fact__ic--accent { background: var(--accent-tint); color: var(--accent); }
  .drd-fact__ic svg { width: 17px; height: 17px; }
  .drd-fact__body { display: flex; flex-direction: column; min-width: 0; }
  .drd-fact__lbl { font-size: 0.7rem; color: var(--muted); }
  .drd-fact__val { font-size: var(--fs--1); font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
  .drd-hero__hint {
    margin: var(--space-2xs) 0 0; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2);
    background: var(--surface-2); border-radius: var(--radius-s); padding: 0.7em 0.9em;
  }
  .drd-hero__actions { margin-top: var(--space-s); }
  .drd-hero__trust {
    margin: var(--space-s) 0 0; padding-top: var(--space-s); border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em;
    font-size: var(--fs--1); color: var(--ink-2);
  }
  .drd-hero__trust svg { width: 15px; height: 15px; color: var(--teal-600); }
  .drd-hero__trust-sep { color: var(--faint); }

  /* ---- 2 · About + credentials --------------------------------- */
  .drd-about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
  @media (min-width: 1024px) { .drd-about__grid { grid-template-columns: 7fr 5fr; } }
  .drd-about__body { margin-top: var(--space-m); font-size: var(--fs-1); line-height: 1.7; color: var(--ink-2); }
  .drd-about__body p { margin: 0 0 var(--space-m); }
  .drd-about__body h2 {
    margin: var(--space-xl) 0 var(--space-s);
    font-size: var(--fs-2); font-weight: 700; line-height: 1.2;
    letter-spacing: -0.01em; color: var(--brand); text-wrap: balance;
  }
  .drd-about__body h3 {
    margin: var(--space-l) 0 var(--space-2xs);
    font-size: var(--fs-1); font-weight: 700; color: var(--ink-1);
  }
  .drd-about__body ul,
  .drd-about__body ol { margin: 0 0 var(--space-m); padding-left: 1.35em; }
  .drd-about__body li { margin-bottom: var(--space-2xs); padding-left: 0.15em; }
  .drd-about__body li::marker { color: var(--accent); }
  .drd-about__body ol > li::marker { font-weight: 700; }
  .drd-about__body strong { color: var(--ink-1); font-weight: 700; }
  .drd-about__body > :first-child { margin-top: 0; }
  .drd-about__body :last-child { margin-bottom: 0; }
  .drd-cred {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-l); box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: var(--space-m);
  }
  @media (min-width: 1024px) { .drd-cred { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
  .drd-cred__title {
    display: flex; align-items: center; gap: 0.5em; margin: 0; padding-bottom: var(--space-s);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-1); font-weight: 700; color: var(--brand);
  }
  .drd-cred__title svg { width: 17px; height: 17px; color: var(--brand); }
  .drd-cred__list { margin: 0; display: flex; flex-direction: column; gap: var(--space-s); }
  .drd-cred__list div { display: flex; flex-direction: column; gap: 0.1em; }
  .drd-cred__list dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); }
  .drd-cred__list dd { margin: 0; font-size: var(--fs--1); font-weight: 500; color: var(--ink); }
  .drd-cred__badge {
    display: inline-flex; padding: 0.25em 0.7em; border-radius: var(--radius-pill);
    font-size: var(--fs--1); font-weight: 700; color: var(--muted); background: var(--surface-2);
  }
  .drd-cred__badge.is-on { color: var(--teal-600); background: var(--teal-tint); }
  .drd-cred__depts { padding-top: var(--space-s); border-top: 1px solid var(--line); }
  .drd-cred__depts-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); }
  .drd-cred__chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.5em; }
  .drd-cred__chip {
    display: inline-flex; padding: 0.35em 0.75em; border-radius: var(--radius-pill);
    background: var(--brand-tint); color: var(--brand); font-size: var(--fs--1); font-weight: 600; text-decoration: none;
    transition: background var(--dur-1) var(--ease);
  }
  .drd-cred__chip:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }

  /* ---- 3 · Procedures ---------------------------------------- */
  .drd-proc__head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .drd-proc__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .drd-proc__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .drd-proc__grid { grid-template-columns: repeat(3, 1fr); } }
  .drd-pcard {
    display: flex; flex-direction: column; gap: var(--space-xs); justify-content: space-between;
    padding: var(--space-l); border-radius: var(--radius-l);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .drd-pcard:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .drd-pcard__ic {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand); transition: transform var(--dur-2) var(--ease);
  }
  .drd-pcard__ic svg { width: 22px; height: 22px; }
  .drd-pcard:hover .drd-pcard__ic { transform: scale(1.1); }
  .drd-pcard__name { margin: var(--space-2xs) 0 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); letter-spacing: -0.01em; }
  .drd-pcard:hover .drd-pcard__name { color: var(--accent); }
  .drd-pcard__text { margin: 0; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }
  .drd-pcard__cta {
    margin-top: var(--space-s); display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--fs--1); font-weight: 700; color: var(--brand);
  }
  .drd-pcard__cta svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
  .drd-pcard:hover .drd-pcard__cta svg { transform: translateX(3px); }

  /* ---- 4 · Consulting schedule ------------------------------ */
  .drd-sched__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 720px) { .drd-sched__grid { grid-template-columns: repeat(2, 1fr); } }
  .drd-scard {
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l);
    padding: var(--space-l); box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  .drd-scard__top { display: flex; flex-direction: column; gap: 0.3em; padding-bottom: var(--space-s); border-bottom: 1px solid var(--line); }
  .drd-scard__badge {
    align-self: flex-start; padding: 0.2em 0.6em; border-radius: var(--radius-s);
    background: var(--brand-tint); color: var(--brand);
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  }
  .drd-scard__name { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .drd-scard__addr { margin: 0; display: flex; align-items: flex-start; gap: 0.45em; font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; }
  .drd-scard__addr svg { width: 14px; height: 14px; flex: none; margin-top: 0.15em; color: var(--teal-600); }
  .drd-scard__cta {
    margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--fs--1); font-weight: 700; color: var(--accent); text-decoration: none;
  }
  .drd-scard__cta svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
  .drd-scard__cta:hover svg { transform: translateX(3px); }

  /* ---- 5 · Associated departments -------------------------- */
  .drd-depts__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 720px) { .drd-depts__grid { grid-template-columns: repeat(2, 1fr); } }
  .drd-dcard {
    display: flex; align-items: center; gap: var(--space-m);
    padding: var(--space-l); border-radius: var(--radius-l);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .drd-dcard:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); border-color: var(--line-strong); }
  .drd-dcard__ic {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--brand-tint); color: var(--brand);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .drd-dcard__ic svg { width: 22px; height: 22px; }
  .drd-dcard:hover .drd-dcard__ic { background: var(--brand); color: #fff; }
  .drd-dcard__body { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; flex: 1; }
  .drd-dcard__name { font-size: var(--fs-1); font-weight: 700; color: var(--brand); letter-spacing: -0.01em; }
  .drd-dcard:hover .drd-dcard__name { color: var(--accent); }
  .drd-dcard__blurb { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; }
  .drd-dcard__arr { flex: none; color: var(--brand); }
  .drd-dcard__arr svg { width: 17px; height: 17px; transition: transform var(--dur-1) var(--ease); }
  .drd-dcard:hover .drd-dcard__arr svg { transform: translateX(3px); }

  .drd-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  .js-reveal .drd-hero__photo[data-reveal-image] .image-slot img { transform: scale(1.05); transition: transform var(--dur-3) var(--ease); }
  .js-reveal .drd-hero__photo[data-reveal-image].is-in .image-slot img { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .drd-notice__link svg,
    .drd-hero__media .drd-hero__photo .image-slot img,
    .drd-pcard, .drd-pcard__ic, .drd-pcard__cta svg,
    .drd-scard__cta svg, .drd-cred__chip,
    .drd-dcard, .drd-dcard__ic, .drd-dcard__arr svg {
      transition: none !important;
    }
    .drd-hero__status-live.is-on .drd-hero__status-dot { animation: none !important; }
    .js-reveal .drd-hero__photo[data-reveal-image] .image-slot img { transform: none !important; }
  }
}

/* =============================================================================
   TREATMENTS & PROCEDURES LISTING  (templates/public/treatments_list.html)
   Built to the approved Google Stitch design (screen "Treatments & Procedures ·
   AAF Hospital Group"). New "tx-" class names; reuses the "dp-" section scale +
   .dp-toolbar* / .dp-chip / .dp-stats* / .dp-dir-head* / .dp-triage* / .dp-cta*
   from the Departments blocks. Navbar / footer inherited. Search + department
   filter are the shared initFilter() via data-filter* attributes.
   ========================================================================== */
@layer components {

  /* ---- 1 · Banner ------------------------------------------------- */
  .tx-banner { overflow: clip; padding-bottom: clamp(3.75rem, 3rem + 4vw, 5.5rem); }
  .tx-banner__glow {
    position: absolute; top: -8rem; left: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 18%, transparent) 0%, transparent 70%);
  }
  .tx-banner__glow--2 {
    top: 3rem; left: auto; right: -4rem; width: min(380px, 46vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .tx-banner__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: end;
  }
  @media (min-width: 1024px) { .tx-banner__grid { grid-template-columns: 8fr 4fr; gap: var(--space-xl); } }
  .tx-banner__title {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--ink); text-wrap: balance;
  }
  .tx-banner__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
  .tx-nabh .dp-stats__live-tag { color: var(--teal-600); }
  .tx-nabh .dp-stats__ping { background: var(--teal-600); animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent); }

  /* ---- 2 · Toolbar --------------------------------------------- */
  .tx-toolbar-wrap { z-index: 5; margin-top: calc(-1 * clamp(2rem, 1.4rem + 3vw, 3.25rem)); }
  .tx-toolbar-wrap .dp-toolbar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: var(--space-m);
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  .tx-toolbar__row { display: flex; flex-direction: column; gap: var(--space-s); }
  @media (min-width: 768px) { .tx-toolbar__row { flex-direction: row; align-items: center; } }

  /* ---- 3 · Directory grid — the shared homepage procedure card
     (public/components/treatment_slide_card.html → .hp-treat-card) ---- */
  .tx-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .tx-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .tx-grid { grid-template-columns: repeat(3, 1fr); } }
  .tx-grid--cards .tx-grid__item { display: flex; min-width: 0; }
  .tx-grid--cards .tx-grid__item > .hp-treat-card { width: 100%; }

  .tx-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
    padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .tx-empty__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
  .tx-empty__ic svg { width: 28px; height: 28px; }
  .tx-empty__title { margin: 0; font-size: var(--dp-h3, 1.15rem); font-weight: 700; color: var(--brand); }
  .tx-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 46ch; }

  /* ---- 5 · Steps ------------------------------------------- */
  .tx-steps__head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .tx-steps__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-m);
    counter-reset: none;
  }
  @media (min-width: 560px) { .tx-steps__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .tx-steps__grid { grid-template-columns: repeat(4, 1fr); } }
  .tx-step {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-l);
    display: flex; flex-direction: column; gap: var(--space-2xs);
  }
  .tx-step__num {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: var(--fs-0);
    margin-bottom: var(--space-2xs);
  }
  .tx-step:first-child .tx-step__num { background: var(--brand); color: #fff; }
  .tx-step:last-child .tx-step__num { background: var(--accent); color: #fff; }
  .tx-step__title { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); letter-spacing: -0.01em; }
  .tx-step__text { margin: 0; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }

  .tx-triage-wrap { padding-block: clamp(1rem, 0.6rem + 2vw, 2rem); }
  .tx-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .tx-step { transition: none !important; }
  }
}

/* =============================================================================
   TREATMENT DETAIL PAGE  (templates/public/treatment_detail.html)
   Built to the approved Google Stitch design (screen "Treatment Detail ·
   Coronary Angioplasty · AAF Hospital Group"). New "txd-" class names; reuses
   the "dp-" section scale + .dp-kicker / .dp-head__title / .dp-crumbs* /
   .dp-dir-head* / .dp-cta* / .dp-ghost and the shared faq.html component.
   Navbar / footer inherited. Stitch's invented duration/stay figures and
   angioplasty-specific stepper copy are not reproduced — real relational data
   + a generic 5-stage pathway only.
   ========================================================================== */
@layer components {

  .dp-kicker--center { justify-content: center; }

  /* ---- 1 · Hero -------------------------------------------------- */
  .txd-hero { overflow: clip; }
  .txd-hero__glow {
    position: absolute; top: -7rem; right: -6rem; width: min(440px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 70%);
  }
  .txd-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center;
  }
  @media (min-width: 1024px) { .txd-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
  .txd-hero__media {
    position: relative; border-radius: var(--radius-l); overflow: clip;
    border: 1px solid var(--line); box-shadow: var(--shadow-3);
  }
  .txd-hero__media .image-slot { border-radius: 0; background: var(--brand-tint-2); }
  .txd-hero__media .image-slot img { transition: transform var(--dur-3) var(--ease); }
  .txd-hero__media:hover .image-slot img { transform: scale(1.03); }
  .txd-hero__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 42%);
  }
  .txd-hero__pill {
    position: absolute; top: 0.85rem; left: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.45em;
    padding: 0.35em 0.8em; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px);
    font-size: var(--fs--1); font-weight: 700; color: var(--brand); box-shadow: var(--shadow-1);
  }
  .txd-hero__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); flex: none; }
  .txd-hero__cap {
    position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.85rem;
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.5em 0.85em; border-radius: 12px;
    background: color-mix(in srgb, var(--brand-700, #1E275E) 82%, transparent); backdrop-filter: blur(8px);
    color: #fff; font-size: var(--fs--1); font-weight: 600;
  }
  .txd-hero__cap svg { width: 14px; height: 14px; color: var(--teal-tint); }
  .txd-hero__body { display: flex; flex-direction: column; gap: var(--space-s); }
  .txd-hero__dept {
    display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start;
    font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--teal-600); text-decoration: none;
  }
  .txd-hero__dept svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
  .txd-hero__dept:hover { color: var(--brand); }
  .txd-hero__dept:hover svg { transform: translateX(3px); }
  .txd-hero__name {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--brand); margin: var(--space-2xs) 0 0; text-wrap: balance;
  }
  .txd-hero__tagline { margin: 0.2em 0 0; font-size: var(--fs-1); font-weight: 600; color: var(--ink); line-height: 1.4; }
  .txd-hero__lead { margin: 0; font-size: var(--fs-0); line-height: 1.6; color: var(--ink-2); }  .txd-hero__actions { margin-top: var(--space-s); }
  .txd-hero__trust {
    margin: var(--space-s) 0 0; padding-top: var(--space-s); border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 0.5em; font-size: var(--fs--1); color: var(--ink-2);
  }
  .txd-hero__trust svg { width: 15px; height: 15px; color: var(--teal-600); flex: none; }

  /* ---- 2 · Overview + at a glance ---------------------------- */
  .txd-about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
  @media (min-width: 1024px) { .txd-about__grid { grid-template-columns: 7fr 5fr; } }
  .txd-about__body { margin-top: var(--space-m); font-size: var(--fs-1); line-height: 1.7; color: var(--ink-2); }
  .txd-about__body p { margin: 0 0 var(--space-m); }
  .txd-about__body h2 {
    margin: var(--space-xl) 0 var(--space-s);
    font-size: var(--fs-2); font-weight: 700; line-height: 1.2;
    letter-spacing: -0.01em; color: var(--brand); text-wrap: balance;
  }
  .txd-about__body h3 {
    margin: var(--space-l) 0 var(--space-2xs);
    font-size: var(--fs-1); font-weight: 700; color: var(--ink-1);
  }
  .txd-about__body ul,
  .txd-about__body ol { margin: 0 0 var(--space-m); padding-left: 1.35em; }
  .txd-about__body li { margin-bottom: var(--space-2xs); padding-left: 0.15em; }
  .txd-about__body li::marker { color: var(--accent); }
  .txd-about__body ol > li::marker { font-weight: 700; }
  .txd-about__body strong { color: var(--ink-1); font-weight: 700; }
  .txd-about__body > :first-child { margin-top: 0; }
  .txd-about__body :last-child { margin-bottom: 0; }
  .txd-about__actions { margin-top: var(--space-l); }
  .txd-glance {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-l); box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: var(--space-m);
  }
  @media (min-width: 1024px) { .txd-glance { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
  .txd-glance__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
    padding-bottom: var(--space-s); border-bottom: 1px solid var(--line);
  }
  .txd-glance__title { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .txd-glance__tag {
    padding: 0.2em 0.7em; border-radius: var(--radius-pill);
    background: var(--accent-tint); color: var(--accent); font-size: 0.7rem; font-weight: 700;
  }
  .txd-glance__list { margin: 0; display: flex; flex-direction: column; gap: var(--space-s); }
  .txd-glance__list div { display: flex; flex-direction: column; gap: 0.1em; }
  .txd-glance__list dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); }
  .txd-glance__list dd { margin: 0; font-size: var(--fs--1); font-weight: 500; color: var(--ink); }
  .txd-glance__list dd a { color: var(--brand); font-weight: 700; text-decoration: none; }
  .txd-glance__list dd a:hover { text-decoration: underline; }
  /* ---- 3 · Journey stepper --------------------------------- */
  .txd-journey__head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .txd-steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-m); }
  .txd-steps::before {
    content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
    background: var(--line-strong); z-index: 0;
  }
  @media (min-width: 700px) { .txd-steps::before { left: 27px; } }
  .txd-step { position: relative; display: flex; align-items: flex-start; gap: var(--space-m); z-index: 1; }
  .txd-step__num {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--brand); color: #fff; font-weight: 800; font-size: var(--fs-0); box-shadow: var(--shadow-2);
  }
  .txd-step:nth-child(4) .txd-step__num { background: var(--accent); }
  .txd-step:last-child .txd-step__num { background: var(--teal-600); }
  .txd-step__card {
    flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-m) var(--space-l);
  }
  .txd-step__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em; }
  .txd-step__title { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); letter-spacing: -0.01em; }
  .txd-step__when {
    font-size: var(--fs--1); font-weight: 600; color: var(--brand);
    background: var(--brand-tint); padding: 0.2em 0.7em; border-radius: var(--radius-pill);
  }
  .txd-step__text { margin: var(--space-2xs) 0 0; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }

  /* ---- 4 · Consultants ------------------------------------ */
  .txd-docs { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .txd-docs { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .txd-docs { grid-template-columns: repeat(4, 1fr); } }
  .txd-doc {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-s);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .txd-doc:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
  .txd-doc__media { border-radius: 12px; overflow: clip; margin-bottom: var(--space-s); }
  .txd-doc__media .image-slot { border-radius: inherit; background: var(--brand-tint-2); }
  .txd-doc__media .image-slot img { object-position: top; transition: transform var(--dur-3) var(--ease); }
  .txd-doc:hover .txd-doc__media .image-slot img { transform: scale(1.05); }
  .txd-doc__body { display: flex; flex-direction: column; gap: 0.15em; padding: 0 var(--space-2xs); flex: 1; }
  .txd-doc__spec { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal-600); }
  .txd-doc__name { font-size: var(--fs-1); font-weight: 700; color: var(--brand); line-height: 1.25; margin: 0.1em 0 0; }
  .txd-doc__name a { color: inherit; text-decoration: none; }
  .txd-doc__name a:hover { color: var(--accent); }
  .txd-doc__qual { margin: 0.1em 0 0; font-size: var(--fs--1); color: var(--muted); }
  .txd-doc__exp { margin: 0.15em 0 0; font-size: var(--fs--1); color: var(--ink-2); }
  .txd-doc__foot {
    margin-top: auto; padding-top: var(--space-s); display: flex; align-items: center; justify-content: space-between; gap: 0.4em;
  }
  .txd-doc__branch { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
  .txd-doc__link { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs--1); font-weight: 700; color: var(--accent); text-decoration: none; }
  .txd-doc__link svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
  .txd-doc:hover .txd-doc__link svg { transform: translateX(3px); }

  /* ---- 5 · FAQ ----------------------------------------- */
  .txd-faq__inner { max-width: 46rem; margin-inline: auto; }
  .txd-faq__head { text-align: center; margin-bottom: var(--space-l); }
  .txd-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  .js-reveal .txd-hero__media[data-reveal-image] .image-slot img,
  .js-reveal .txd-doc__media[data-reveal-image] .image-slot img { transform: scale(1.05); transition: transform var(--dur-3) var(--ease); }
  .js-reveal .txd-hero__media[data-reveal-image].is-in .image-slot img,
  .js-reveal .txd-doc__media[data-reveal-image].is-in .image-slot img { transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .txd-hero__media .image-slot img, .txd-hero__dept svg,
    .txd-step,
    .txd-doc, .txd-doc__media .image-slot img, .txd-doc__link svg {
      transition: none !important;
    }
    .js-reveal .txd-hero__media[data-reveal-image] .image-slot img,
    .js-reveal .txd-doc__media[data-reveal-image] .image-slot img { transform: none !important; }
  }
}

/* =============================================================================
   CONTACT PAGE  (templates/public/contact.html)
   Built to the approved Google Stitch design (screen "Contact · AAF Hospital
   Group"). New "ct-" class names; reuses the "dp-" section scale + .dp-kicker /
   .dp-head__title / .dp-crumbs* / .dp-cta* / .dp-ghost. Navbar / footer inherited.
   ========================================================================== */
@layer components {

  /* ---- 1 · Banner + status ------------------------------------- */
  .ct-banner { overflow: clip; padding-bottom: clamp(3.5rem, 2.8rem + 4vw, 5rem); }
  .ct-banner__glow {
    position: absolute; top: -8rem; right: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .ct-banner__glow--2 {
    top: auto; bottom: -8rem; right: auto; left: -6rem; width: min(380px, 46vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%);
  }
  .ct-banner__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: end;
  }
  @media (min-width: 1024px) { .ct-banner__grid { grid-template-columns: 1fr auto; gap: var(--space-xl); } }
  .ct-banner__title {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--brand); text-wrap: balance;
  }
  .ct-banner__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
  .ct-ping { animation: dp-ping 1.8s var(--ease) infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); }
  .ct-status {
    display: flex; align-items: center; gap: var(--space-s);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-m); box-shadow: var(--shadow-2);
  }
  @media (min-width: 1024px) { .ct-status { justify-self: end; } }
  .ct-status__ic {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--surface-2); color: var(--muted);
  }
  .ct-status__ic.is-on { background: var(--teal-tint); color: var(--teal-600); }
  .ct-status__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
  .ct-status__ic.is-on .ct-status__dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent); animation: dp-ping 2s var(--ease) infinite; }
  .ct-status__body { display: flex; flex-direction: column; }
  .ct-status__lead { font-size: var(--fs-0); font-weight: 700; color: var(--ink); }
  .ct-status__sub { font-weight: 500; color: var(--ink-2); }
  .ct-status__note { font-size: var(--fs--1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }

  /* ---- 2 · Contact cards ------------------------------------- */
  .ct-contacts-wrap { margin-top: calc(-1 * clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem)); position: relative; z-index: 5; }
  .ct-contacts { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .ct-contacts { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ct-contacts { grid-template-columns: repeat(4, 1fr); } }
  .ct-card {
    display: flex; flex-direction: column; gap: 0.15em;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-2); padding: var(--space-l);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .ct-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
  .ct-card__ic {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-s);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .ct-card:hover .ct-card__ic { background: var(--brand); color: #fff; }
  .ct-card__ic svg { width: 22px; height: 22px; }
  .ct-card__eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
  .ct-card__title { margin: 0.15em 0 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .ct-card__value { margin: 0.35em 0 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); overflow-wrap: anywhere; }
  .ct-card__value--sm { font-size: var(--fs-0); }
  .ct-card__addr { margin: 0.35em 0 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink); }
  .ct-card__sub { margin: 0.15em 0 0; font-size: var(--fs--1); color: var(--muted); }
  .ct-card__cta {
    margin-top: auto; padding-top: var(--space-s);
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: var(--fs--1); font-weight: 700; color: var(--accent); text-decoration: none;
  }
  .ct-card__cta svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
  .ct-card:hover .ct-card__cta svg { transform: translateX(3px); }
  .ct-card--emergency {
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-600, #8f2f68) 100%);
    border-color: transparent; color: #fff;
  }
  .ct-card--emergency .ct-card__ic { background: rgba(255,255,255,0.18); color: #fff; }
  .ct-card--emergency:hover .ct-card__ic { background: rgba(255,255,255,0.28); }
  .ct-card--emergency .ct-card__eyebrow { color: rgba(255,255,255,0.85); }
  .ct-card--emergency .ct-card__title,
  .ct-card--emergency .ct-card__value { color: #fff; }
  .ct-card--emergency .ct-card__sub { color: rgba(255,255,255,0.85); }
  .ct-card--emergency .ct-card__cta { color: #fff; text-decoration: underline; }

  /* ---- 3 · Form + map ------------------------------------- */
  .ct-formmap__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: stretch; }
  @media (min-width: 1024px) { .ct-formmap__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
  .ct-formcard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-2); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    display: flex; flex-direction: column;
  }
  .ct-formcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
  .ct-formcard__head svg { width: 20px; height: 20px; color: var(--faint); }
  .ct-formcard__lead { margin: var(--space-2xs) 0 var(--space-m); font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }
  .ct-form { display: flex; flex-direction: column; gap: var(--space-s); }
  .ct-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }
  @media (min-width: 520px) { .ct-form__row--2 { grid-template-columns: 1fr 1fr; } }
  .ct-field { display: flex; flex-direction: column; gap: 0.35em; }
  fieldset.ct-field { border: 0; margin: 0; padding: 0; min-width: 0; }
  legend.ct-field__label { padding: 0; width: 100%; float: none; }
  .ct-field__label { font-size: var(--fs--1); font-weight: 600; color: var(--ink); }
  .ct-field__opt { color: var(--muted); font-weight: 500; }
  .ct-field__input {
    width: 100%; padding: 0.75em 0.9em;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
    font: inherit; font-size: var(--fs-0); color: var(--ink);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  }
  textarea.ct-field__input { resize: vertical; min-height: 6.5rem; }
  .ct-field__input::placeholder { color: var(--muted); }
  .ct-field__input:focus {
    outline: none; background: var(--surface); border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
  }
  .ct-field__phone { display: flex; align-items: stretch; }
  .ct-field__cc {
    display: inline-flex; align-items: center; padding: 0 0.8em;
    background: var(--surface-2); border: 1px solid var(--line); border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: var(--fs--1); font-weight: 600; color: var(--ink-2);
  }
  .ct-field__phone .ct-field__input { border-radius: 0 var(--radius) var(--radius) 0; }
  .ct-field__select { position: relative; display: block; }
  .ct-field__select select { appearance: none; padding-right: 2.4em; cursor: pointer; }
  .ct-field__select svg { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
  .ct-consent { display: flex; align-items: flex-start; gap: 0.55em; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }
  .ct-consent input { margin-top: 0.15em; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
  .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .ct-form .btn { margin-top: var(--space-2xs); }

  .ct-map { display: flex; flex-direction: column; gap: var(--space-m); }
  .ct-map__frame {
    position: relative; flex: 1; min-height: 340px;
    border-radius: var(--radius-l); overflow: clip; border: 1px solid var(--line); box-shadow: var(--shadow-2);
    background:
      radial-gradient(color-mix(in srgb, var(--brand) 14%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
      var(--surface-2);
  }
  .ct-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .ct-map__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); }
  .ct-map__placeholder svg { width: 40px; height: 40px; }
  .ct-map__open {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.5em 0.9em; border-radius: var(--radius-pill);
    background: var(--brand); color: #fff; font-size: var(--fs--1); font-weight: 700;
    box-shadow: var(--shadow-2); text-decoration: none;
  }
  .ct-map__open:hover { background: var(--brand-600); }
  .ct-map__open svg { width: 14px; height: 14px; }
  .ct-map__note {
    display: flex; align-items: flex-start; gap: var(--space-s);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-m); box-shadow: var(--shadow-1);
  }
  .ct-map__note-ic {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    background: var(--brand-tint); color: var(--brand);
  }
  .ct-map__note-ic svg { width: 16px; height: 16px; }
  .ct-map__note-title { font-size: var(--fs-0); font-weight: 700; color: var(--brand); }
  .ct-map__note-text { margin: 0.2em 0 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }

  /* ---- 4 · Hours ---------------------------------------- */
  .ct-hours__card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-2); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  }
  .ct-hours__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-s); padding-bottom: var(--space-m);
  }
  .ct-hours__badge {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.4em 0.9em; border-radius: var(--radius-pill);
    background: var(--teal-tint); color: var(--teal-600); font-size: var(--fs--1); font-weight: 700;
  }
  .ct-hours__badge svg { width: 15px; height: 15px; }
  .ct-hours__scroll { overflow-x: auto; }
  .ct-hours__table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); }
  .ct-hours__table th {
    text-align: left; padding: 0.7em 0.9em; font-size: var(--fs--1); font-weight: 700; color: var(--muted);
    background: var(--surface-2); white-space: nowrap;
  }
  .ct-hours__table th:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
  .ct-hours__table th:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
  .ct-hours__table td { padding: 0.7em 0.9em; border-bottom: 1px solid var(--line); color: var(--ink); }
  .ct-hours__table tr:last-child td { border-bottom: 0; }
  .ct-hours__table tr.is-today td { background: var(--brand-tint-2); font-weight: 600; }
  .ct-hours__today {
    display: inline-block; margin-left: 0.5em; padding: 0.1em 0.6em; border-radius: var(--radius-pill);
    background: var(--brand); color: #fff; font-size: 0.68rem; font-weight: 700;
  }
  .ct-hours__foot {
    margin: var(--space-m) 0 0; display: flex; align-items: flex-start; gap: 0.5em;
    font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2);
  }
  .ct-hours__foot svg { width: 15px; height: 15px; color: var(--teal-600); flex: none; margin-top: 0.15em; }

  /* ---- 5 · Other ways ---------------------------------- */
  .ct-more__head { max-width: 40rem; margin-bottom: var(--space-xl); }
  .ct-touch__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .ct-touch__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .ct-touch__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1200px) { .ct-touch__grid { grid-template-columns: repeat(5, 1fr); } }
  .ct-touch {
    display: flex; flex-direction: column; gap: 0.2em;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-l); text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .ct-touch:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .ct-touch__ic {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-2xs);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .ct-touch:hover .ct-touch__ic { background: var(--brand); color: #fff; }
  .ct-touch__ic svg { width: 17px; height: 17px; }
  .ct-touch__name { font-size: var(--fs-0); font-weight: 700; color: var(--brand); }
  .ct-touch__sub { font-size: var(--fs--1); line-height: 1.45; color: var(--ink-2); }
  .ct-touch__cta {
    margin-top: auto; padding-top: var(--space-s);
    display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs--1); font-weight: 700; color: var(--accent);
  }
  .ct-touch__cta svg { width: 13px; height: 13px; transition: transform var(--dur-1) var(--ease); }
  .ct-touch:hover .ct-touch__cta svg { transform: translateX(3px); }

  /* ---- 4b · Facility photos --------------------------- */
  .ct-photos__head { max-width: 40rem; margin-bottom: var(--space-xl); }
  .ct-photos__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .ct-photos__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ct-photos__grid { grid-template-columns: repeat(3, 1fr); } }
  .ct-photo {
    margin: 0; border-radius: var(--radius-l); overflow: clip;
    background: var(--surface-2); box-shadow: var(--shadow-2); position: relative;
  }
  .ct-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .ct-photo__cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 0.7em 0.9em;
    font-size: var(--fs--1); font-weight: 600; color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  }

  /* ---- 6 · Network ------------------------------------ */
  .ct-network__head { max-width: 44rem; margin-bottom: var(--space-xl); }
  .ct-network__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .ct-network__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ct-network__grid { grid-template-columns: repeat(4, 1fr); } }
  .ct-branch {
    display: flex; flex-direction: column; gap: 0.35em;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-l); text-decoration: none; color: inherit;
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .ct-branch:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .ct-branch__name { font-size: var(--fs-1); font-weight: 700; color: var(--brand); }
  .ct-branch__addr { font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }
  .ct-branch__phone { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs--1); font-weight: 600; color: var(--ink); }
  .ct-branch__phone svg { width: 14px; height: 14px; color: var(--brand); }
  .ct-branch__cta {
    margin-top: auto; padding-top: var(--space-s);
    display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs--1); font-weight: 700; color: var(--accent);
  }
  .ct-branch__cta svg { width: 13px; height: 13px; transition: transform var(--dur-1) var(--ease); }
  .ct-branch:hover .ct-branch__cta svg { transform: translateX(3px); }
  .ct-touch__name { margin: 0; }

  .ct-cta { overflow: clip; text-align: center; }
  .ct-notice-wrap { padding-block: var(--space-l); }

  /* =========================================================================
     REQUEST A CALLBACK  (templates/public/callback.html)
     Built to the approved Google Stitch design (screen "Request a Callback ·
     AAF Hospital Group"), minus its "Preferred language" field. New "cb-"
     class names; reuses the "dp-" section scale + the Contact page's
     .ct-formcard* / .ct-field* / .ct-form / .ct-consent / .ct-hp / .ct-touch*
     (its "Other ways to reach us" cards, repurposed for the instant-channels
     strip here) / .ct-cta. Navbar / footer inherited.
     ========================================================================= */
  .cb-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; }
  @media (min-width: 1024px) { .cb-hero__grid { grid-template-columns: 1.15fr 1fr; } }

  .cb-intro { display: flex; flex-direction: column; gap: var(--space-l); }
  .cb-intro__title {
    font-family: var(--font-display); font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em; color: var(--brand); margin: 0;
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  }
  .cb-intro__lead { margin: 0; color: var(--ink-2); font-size: var(--fs-0); line-height: 1.6; max-width: 52ch; }

  .cb-emergency {
    display: flex; gap: var(--space-s); align-items: flex-start;
    background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: var(--radius-l); padding: var(--space-m);
  }
  .cb-emergency__ic { color: var(--danger); flex-shrink: 0; }
  .cb-emergency__title { display: block; font-weight: 700; color: var(--danger); margin-bottom: 0.2em; }
  .cb-emergency__text { margin: 0; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }
  .cb-emergency__text a { color: var(--danger); font-weight: 700; }

  .cb-steps__head { font-family: var(--font-display); font-size: var(--fs-1); font-weight: 700; color: var(--ink); margin: 0 0 var(--space-m); }
  .cb-steps {
    display: grid; grid-template-columns: 1fr;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); overflow: clip;
  }
  @media (min-width: 560px) { .cb-steps { grid-template-columns: repeat(3, 1fr); } }
  .cb-step {
    padding: var(--space-m); border-bottom: 1px solid var(--line);
  }
  .cb-step:last-child { border-bottom: 0; }
  @media (min-width: 560px) {
    .cb-step { border-bottom: 0; border-right: 1px solid var(--line); }
    .cb-step:last-child { border-right: 0; }
  }
  .cb-step__top { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
  .cb-step__num {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand); color: #fff; font-size: var(--fs--1); font-weight: 700; flex-shrink: 0;
  }
  .cb-step__tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-600); }
  .cb-step__title { font-size: var(--fs-0); font-weight: 700; color: var(--ink); margin: 0 0 0.25em; }
  .cb-step__text { margin: 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }

  .cb-vignette {
    margin: 0; display: grid; grid-template-columns: 1fr; overflow: clip;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
  }
  /* extra breathing room when it directly follows the instant-channels grid
     (Callback / Book an Appointment) rather than sitting inside .cb-intro's
     own gapped flex column */
  .cb-channels + .cb-vignette { margin-top: var(--space-xl); }
  @media (min-width: 640px) { .cb-vignette { grid-template-columns: 1fr 1.3fr; } }
  .cb-vignette img { display: block; width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
  .cb-vignette__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-l); }
  .cb-vignette__kicker { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-600); }
  .cb-vignette__quote { margin: 0; font-family: var(--font-display); font-style: italic; color: var(--ink); line-height: 1.5; }
  .cb-vignette__line { margin: 0; display: flex; align-items: center; gap: 0.4em; font-size: var(--fs--1); color: var(--ink-2); }
  .cb-vignette__line svg { color: var(--brand); }

  .ct-formcard:has(.cb-formcard__head) {
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    box-shadow: var(--shadow-3); border-color: var(--brand-tint);
  }
  .cb-formcard__head { border-bottom: 1px solid var(--line); padding-bottom: var(--space-m); margin-bottom: var(--space-m); }
  .cb-formcard__eyebrow {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-600); margin-bottom: var(--space-2xs);
  }
  .cb-formcard__step {
    color: var(--brand); background: var(--brand-tint);
    padding: 0.2em 0.7em; border-radius: var(--radius-pill); letter-spacing: 0.02em;
  }
  .cb-formcard__title {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
    color: var(--ink); margin: 0 0 0.25em; line-height: 1.15;
    font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem);
  }
  .cb-formcard__lead { margin: 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }

  .cb-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); }
  @media (max-width: 400px) { .cb-pills { grid-template-columns: 1fr; } }
  .cb-pill {
    display: flex; align-items: center; gap: 0.6em; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: var(--radius); padding: 0.65em 0.85em;
    background: var(--surface-2);
    font-size: var(--fs--1); font-weight: 500; color: var(--ink-2);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .cb-pill:hover { border-color: var(--brand-400); }
  .cb-pill:has(input:checked) {
    border-color: var(--brand); background: var(--brand-tint); color: var(--brand); font-weight: 700;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
  }
  .cb-pill input { accent-color: var(--brand); flex-shrink: 0; width: 16px; height: 16px; }

  .cb-note { display: flex; align-items: center; gap: 0.4em; margin: var(--space-xs) 0 0; font-size: 0.78rem; color: var(--muted); justify-content: center; }
  .cb-note svg { width: 14px; height: 14px; }

  .cb-channels-wrap { }
  .cb-channels__head { max-width: 40rem; margin-bottom: var(--space-xl); }
  .cb-channels { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .cb-channels { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .cb-channels { grid-template-columns: repeat(4, 1fr); } }

  .cb-faq__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
  @media (min-width: 900px) { .cb-faq__grid { grid-template-columns: 1fr 1.3fr; align-items: start; } }
  .cb-faq__intro { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .cb-guarantee {
    margin-top: var(--space-m); display: flex; gap: var(--space-s); align-items: flex-start;
    background: var(--brand-tint); border-radius: var(--radius-l); padding: var(--space-m);
  }
  .cb-guarantee svg { color: var(--brand); flex-shrink: 0; margin-top: 0.15em; }
  .cb-guarantee__title { display: block; font-weight: 700; color: var(--brand); margin-bottom: 0.2em; }
  .cb-guarantee__text { margin: 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }

  /* =========================================================================
     BOOK AN APPOINTMENT  (templates/public/book_appointment.html)
     Built to the approved Google Stitch design (screen "Book an Appointment ·
     AAF Hospital Group"). New "ab-" class names for the parts unique to this
     page; everything else reuses the Contact/Callback "ct-"/"cb-" classes
     (.ct-formcard* / .ct-field* / .ct-form / .ct-consent / .ct-hp / .ct-touch*
     / .cb-hero__grid / .cb-intro* / .cb-steps* / .cb-step* / .cb-formcard* /
     .cb-pills / .cb-pill / .cb-vignette* / .cb-channels*). Navbar / footer
     inherited.
     ========================================================================= */
  .ab-hero-card { margin: 0; display: flex; flex-direction: column; }
  .ab-hero-card__media { position: relative; border-radius: var(--radius-l); overflow: clip; }
  .ab-hero-card__media img { display: block; width: 100%; height: 260px; object-fit: cover; }
  .ab-hero-card__badge {
    position: absolute; left: var(--space-m); bottom: var(--space-m);
    display: inline-flex; align-items: center; gap: 0.4em;
    background: var(--surface); color: var(--brand); font-size: var(--fs--1); font-weight: 700;
    padding: 0.5em 0.9em; border-radius: var(--radius-pill); box-shadow: var(--shadow-2);
  }
  .ab-hero-card__badge svg { color: var(--accent-600); }
  .ab-hero-card__note {
    display: flex; gap: var(--space-s); align-items: flex-start;
    background: var(--brand-tint); border-radius: 0 0 var(--radius-l) var(--radius-l);
    padding: var(--space-m);
  }
  .ab-hero-card__note svg { color: var(--brand); flex-shrink: 0; margin-top: 0.1em; }
  .ab-hero-card__note-title { display: block; font-weight: 700; color: var(--brand); font-size: var(--fs--1); margin-bottom: 0.15em; }
  .ab-hero-card__note-text { font-size: 0.8rem; line-height: 1.4; color: var(--ink-2); }

  .ab-help {
    display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-m);
  }
  .ab-help__ic {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand); flex-shrink: 0;
  }
  .ab-help__title { display: block; font-size: var(--fs--1); color: var(--ink-2); }
  .ab-help__phone { display: block; font-size: var(--fs-0); font-weight: 700; color: var(--ink); text-decoration: none; }
  .ab-help__sub { display: block; font-size: 0.78rem; color: var(--muted); }
  .ab-help__wa {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em;
    background: var(--brand-tint); color: var(--brand); font-size: var(--fs--1); font-weight: 700;
    padding: 0.6em 1em; border-radius: var(--radius-pill); text-decoration: none;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .ab-help__wa:hover { background: var(--brand); color: #fff; }

  .ab-assurance {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-m);
    margin: var(--space-xs) 0 0; font-size: 0.74rem; color: var(--muted);
  }
  .ab-assurance span { display: inline-flex; align-items: center; gap: 0.35em; }
  .ab-assurance svg { width: 13px; height: 13px; }

}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .ct-card, .ct-card__ic, .ct-card__cta svg,
    .ct-touch, .ct-touch__ic, .ct-touch__cta svg,
    .ct-branch, .ct-branch__cta svg,
    .ct-field__input, .ct-map__open {
      transition: none !important;
    }
    .ct-ping, .ct-status__ic.is-on .ct-status__dot { animation: none !important; }
  }
}

/* =============================================================================
   HEALTH CHECK-UP PACKAGES LISTING  (templates/public/checkups_list.html)
   Built to the approved Google Stitch design (screen "Health Check-up Packages ·
   AAF Hospital Group"). New "hc-" class names; reuses the "dp-" section scale +
   .dp-toolbar* / .dp-chip / .dp-stats* / .dp-dir-head* / .dp-kicker* /
   .dp-triage* / .dp-cta* from the Departments/Treatments blocks. Navbar / footer
   inherited. Search + category filter are the shared initFilter() via
   data-filter* attributes. Stitch's invented struck-through prices, discount
   badges, fasting hours and "complimentary breakfast" copy are not reproduced —
   real published price + parameter list + a generic 4-step pathway only.
   ========================================================================== */
@layer components {

  /* ---- 1 · Banner ------------------------------------------------- */
  .hc-banner { overflow: clip; padding-bottom: clamp(3.75rem, 3rem + 4vw, 5.5rem); }
  .hc-banner__glow {
    position: absolute; top: -8rem; left: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 18%, transparent) 0%, transparent 70%);
  }
  .hc-banner__glow--2 {
    top: 3rem; left: auto; right: -4rem; width: min(380px, 46vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .hc-banner__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: end;
  }
  @media (min-width: 1024px) { .hc-banner__grid { grid-template-columns: 8fr 4fr; gap: var(--space-xl); } }
  .hc-banner__title {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--ink); text-wrap: balance;
  }
  .hc-banner__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
  .hc-banner__aside { display: flex; flex-direction: column; gap: var(--space-s); }
  .hc-banner__pill {
    display: inline-flex; align-items: center; gap: 0.5em; align-self: start;
    padding: 0.5em 0.9em; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); line-height: 1.3;
  }
  .hc-banner__pill-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--teal-600); flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
  }

  /* ---- 2 · Toolbar --------------------------------------------- */
  .hc-toolbar-wrap { position: relative; z-index: 5; margin-top: calc(-1 * clamp(2rem, 1.4rem + 3vw, 3.25rem)); }
  .hc-toolbar-wrap .dp-toolbar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: var(--space-m);
    display: flex; flex-direction: column; gap: var(--space-s);
  }

  /* ---- 3 · Packages grid — the shared homepage checkup card
     (public/components/checkup_column.html → .checkup-col) ---- */
  .hc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .hc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .hc-grid { grid-template-columns: repeat(3, 1fr); } }
  .hc-grid--cards .hc-grid__item { display: flex; min-width: 0; }
  .hc-grid--cards .hc-grid__item > .checkup-col { width: 100%; }

  .hc-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
    padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .hc-empty__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
  .hc-empty__ic svg { width: 28px; height: 28px; }
  .hc-empty__title { margin: 0; font-size: var(--dp-h3, 1.15rem); font-weight: 700; color: var(--brand); }
  .hc-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 46ch; }

  /* ---- 5 · How it works ----------------------------------- */
  .hc-steps__head { max-width: 44rem; margin-inline: auto; margin-bottom: var(--space-xl); text-align: center; }
  .hc-steps__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-m);
  }
  @media (min-width: 560px) { .hc-steps__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .hc-steps__grid { grid-template-columns: repeat(4, 1fr); } }
  .hc-step {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-l);
    display: flex; flex-direction: column; gap: var(--space-2xs);
  }
  .hc-step__num {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: var(--fs-0);
    margin-bottom: var(--space-2xs);
  }
  .hc-step:first-child .hc-step__num { background: var(--brand); color: #fff; }
  .hc-step:last-child .hc-step__num { background: var(--accent); color: #fff; }
  .hc-step__title { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand); letter-spacing: -0.01em; }
  .hc-step__text { margin: 0; font-size: var(--fs--1); line-height: 1.55; color: var(--ink-2); }

  /* ---- 6 · Advisor banner -------------------------------- */
  .hc-advisor-wrap { padding-block: clamp(1rem, 0.6rem + 2vw, 2rem); }

  /* ---- 7 · Accreditation trust mosaic ------------------- */
  .hc-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
  @media (min-width: 768px) { .hc-trust__grid { grid-template-columns: repeat(4, 1fr); } }
  .hc-trust__item {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35em;
    padding: var(--space-l) var(--space-m);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  }
  .hc-trust__ic {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-2xs);
  }
  .hc-trust__ic svg { width: 22px; height: 22px; }
  .hc-trust__item:nth-child(2) .hc-trust__ic { background: var(--teal-tint); color: var(--teal-600); }
  .hc-trust__item:nth-child(3) .hc-trust__ic { background: var(--accent-tint); color: var(--accent); }
  .hc-trust__title { font-size: var(--fs-0); font-weight: 700; color: var(--brand); }
  .hc-trust__sub { font-size: var(--fs--1); color: var(--muted); line-height: 1.4; }

  /* ---- 8 · Final CTA ------------------------------------ */
  .hc-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .hc-step, .hc-trust__item {
      transition: none !important;
    }
  }
}

/* =============================================================================
   HEALTH LIBRARY / BLOG LISTING  (templates/public/blog_list.html)
   Built to the approved Google Stitch design (screen "Health Library · AAF
   Hospital Group"). New "bl-" class names; reuses the "dp-" section scale +
   .dp-toolbar* / .dp-chip / .dp-stats* / .dp-dir-head* / .dp-triage* / .dp-cta*.
   Navbar / footer inherited. Search + topic filter + the "this branch only"
   toggle are the shared initFilter() via data-filter* attributes. Stitch's
   invented read-times, "24 articles" counts and newsletter capture are not
   reproduced.
   ========================================================================== */
@layer components {

  /* ---- 1 · Banner ---------------------------------------------- */
  .bl-banner { overflow: clip; padding-bottom: clamp(3.75rem, 3rem + 4vw, 5.5rem); }
  .bl-banner__glow {
    position: absolute; top: -8rem; left: -6rem; width: min(420px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 18%, transparent) 0%, transparent 70%);
  }
  .bl-banner__glow--2 {
    top: 3rem; left: auto; right: -4rem; width: min(380px, 46vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 70%);
  }
  .bl-banner__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: end;
  }
  @media (min-width: 1024px) { .bl-banner__grid { grid-template-columns: 8fr 4fr; gap: var(--space-xl); } }
  .bl-banner__title {
    font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--ink); text-wrap: balance;
  }
  .bl-banner__lead { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
  .bl-banner__aside { display: flex; flex-direction: column; gap: var(--space-s); }
  .bl-banner__pill {
    display: inline-flex; align-items: center; gap: 0.5em; align-self: start;
    padding: 0.5em 0.9em; border-radius: var(--radius-pill);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); line-height: 1.3;
  }
  .bl-banner__pill-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--teal-600); flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 16%, transparent);
  }

  /* ---- 2 · Toolbar ------------------------------------------- */
  .bl-toolbar-wrap { position: relative; z-index: 5; margin-top: calc(-1 * clamp(2rem, 1.4rem + 3vw, 3.25rem)); }
  .bl-toolbar-wrap .dp-toolbar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: var(--space-m);
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  /* ---- 3 · Articles grid — the shared homepage blog card
     (public/components/blog_grid_card.html → .hp-blog-card) ---- */
  .bl-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }
  .bl-grid--cards .bl-grid__item { display: flex; min-width: 0; }
  .bl-grid--cards .bl-grid__item > .hp-blog-card { width: 100%; }

  .bl-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
    padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .bl-empty__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
  .bl-empty__ic svg { width: 28px; height: 28px; }
  .bl-empty__title { margin: 0; font-size: var(--dp-h3, 1.15rem); font-weight: 700; color: var(--brand); }
  .bl-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 46ch; }

  /* ---- 5/6 · Bands -------------------------------------- */
  .bl-ask-wrap { padding-block: clamp(1rem, 0.6rem + 2vw, 2rem); }
  .bl-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  /* blog list renders the shared .hp-blog-card — its motion lives with the
     homepage rules; nothing bl-specific to gate here. */
}

/* =============================================================================
   HEALTH LIBRARY / ARTICLE DETAIL  (templates/public/blog_detail.html)
   Built to the approved Google Stitch design (screen "Article Detail · AAF
   Hospital Group"). New "bd-" class names; reuses the "dp-" section scale +
   .dp-crumbs* / .dp-dir-head* / .dp-cta* / .prose and the "bl-card" for the
   related row. Navbar / footer inherited. Stitch's auto table-of-contents,
   fabricated reviewer names and read-time badges are not reproduced. A slim
   reading-progress bar is the only added JS (prefers-reduced-motion aware).
   ========================================================================== */
@layer components {

  .bd-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
  }
  .bd-progress__bar { display: block; height: 100%; width: 0; background: var(--accent); }

  /* ---- 1 · Header ------------------------------------------- */
  .bd-head { overflow: clip; }
  .bd-head__inner {
    max-width: 54rem; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-m);
  }
  .bd-head__pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5em; }
  .bd-head__cat {
    display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.35em 0.9em; border-radius: var(--radius-pill);
    background: var(--teal-tint); color: var(--teal-600); font-size: var(--fs--1); font-weight: 700;
  }
  .bd-head__cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-600); flex: none; }
  .bd-head__scope {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.35em 0.8em; border-radius: var(--radius-pill);
    background: var(--surface-2); color: var(--muted); font-size: 0.72rem; font-weight: 600;
  }
  .bd-head__scope svg { width: 13px; height: 13px; color: var(--brand); }
  .bd-head__title {
    font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3rem); font-weight: 700; line-height: 1.08;
    letter-spacing: -0.02em; margin: 0; color: var(--brand); text-wrap: balance;
  }
  .bd-head__standfirst { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 46rem; text-wrap: balance; }
  .bd-head__meta {
    width: 100%; margin-top: var(--space-2xs);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
    padding: var(--space-s) var(--space-m);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-s);
  }
  @media (min-width: 720px) { .bd-head__meta { flex-direction: row; justify-content: space-between; } }
  .bd-head__author { display: flex; align-items: center; gap: 0.6em; text-align: left; }
  .bd-head__avatar {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand); flex: none;
  }
  .bd-head__avatar svg { width: 19px; height: 19px; }
  .bd-head__byline { display: flex; flex-direction: column; min-width: 0; }
  .bd-head__name { font-size: var(--fs-0); font-weight: 700; color: var(--ink); }
  .bd-head__role { font-size: var(--fs--1); color: var(--muted); }
  .bd-head__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; }
  .bd-head__fact { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs--1); color: var(--ink-2); font-weight: 600; }
  .bd-head__fact svg { width: 14px; height: 14px; }
  .bd-head__fact--verified { color: var(--teal-600); }
  .bd-head__fact-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
  .bd-head__share {
    width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s);
    padding-top: var(--space-2xs);
  }
  .bd-head__share-lbl { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
  .bd-head__share-lbl svg { width: 15px; height: 15px; color: var(--muted); }
  .bd-head__share-actions { display: inline-flex; align-items: center; gap: 0.5em; }
  .bd-share-btn {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .bd-share-btn:hover { background: var(--brand-tint); color: var(--brand); box-shadow: var(--shadow-1); }
  .bd-share-btn svg { width: 16px; height: 16px; }
  .bd-share-btn.is-copied { background: var(--success-tint); color: var(--success); border-color: var(--success); }

  /* ---- 2 · Cover ------------------------------------------ */
  .bd-cover { margin: 0 auto; padding-block: var(--space-l); }
  .bd-cover .image-slot { border-radius: var(--radius-l); box-shadow: var(--shadow-2); background: var(--brand-tint-2); }
  .bd-cover__cap { margin-top: var(--space-2xs); text-align: center; font-size: var(--fs--1); color: var(--muted); font-style: italic; }

  /* ---- 3 · Body + aside --------------------------------- */
  .bd-layout {
    display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start;
  }
  @media (min-width: 1024px) { .bd-layout { grid-template-columns: 7fr 4fr; gap: var(--space-2xl); } }
  .bd-prose { max-width: 68ch; }
  .bd-prose .bd-reviewed {
    margin-top: var(--space-xl); padding: var(--space-m);
    display: flex; align-items: flex-start; gap: 0.6em;
    background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--line);
    font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2);
  }
  .bd-prose .bd-reviewed svg { width: 16px; height: 16px; color: var(--teal-600); flex: none; margin-top: 0.15em; }
  .bd-aside { display: flex; flex-direction: column; gap: var(--space-m); }
  @media (min-width: 1024px) { .bd-aside { position: sticky; top: calc(var(--header-h, 72px) + var(--space-m)); } }
  .bd-consult {
    background: var(--brand); color: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-3);
    padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-s);
  }
  .bd-consult__eyebrow {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: color-mix(in srgb, #fff 82%, transparent);
  }
  .bd-consult__eyebrow svg { width: 14px; height: 14px; }
  .bd-consult__title { margin: 0; font-size: var(--fs-1); font-weight: 700; line-height: 1.3; }
  .bd-consult__text { margin: 0; font-size: var(--fs--1); line-height: 1.55; color: color-mix(in srgb, #fff 84%, transparent); }
  .bd-consult .btn { margin-top: var(--space-2xs); }
  .bd-consult .btn--outline { --_bg: transparent; --_fg: #fff; --_bd: color-mix(in srgb, #fff 40%, transparent); }
  .bd-consult .btn--outline:hover { --_bg: color-mix(in srgb, #fff 12%, transparent); }
  .bd-consult__phone { margin: var(--space-2xs) 0 0; display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs--1); color: color-mix(in srgb, #fff 88%, transparent); }
  .bd-consult__phone svg { width: 14px; height: 14px; }
  .bd-author {
    display: flex; align-items: center; gap: 0.7em; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
    padding: var(--space-m); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .bd-author:hover, .bd-author:focus-visible { box-shadow: var(--shadow-3); transform: translateY(-3px); }
  .bd-author__avatar {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
    background: var(--accent-tint); color: var(--accent); flex: none;
  }
  .bd-author__avatar svg { width: 20px; height: 20px; }
  .bd-author__body { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
  .bd-author__lbl { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .bd-author__name { font-size: var(--fs-0); font-weight: 700; color: var(--brand); }
  .bd-author__link { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs--1); font-weight: 700; color: var(--accent); }
  .bd-author__link svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
  .bd-author:hover .bd-author__link svg { transform: translateX(3px); }

  /* ---- 4 · Related -------------------------------------- */
  .bd-related__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .bd-related__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .bd-related__grid { grid-template-columns: repeat(3, 1fr); } }

  /* ---- 5 · CTA ----------------------------------------- */
  .bd-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .bd-share-btn, .bd-author, .bd-author__link svg { transition: none !important; }
    .bd-progress__bar { transition: none !important; }
  }
}

/* =============================================================================
   "OUR HOSPITALS" / BRANCH CHOOSER  (templates/public/branch_chooser.html)
   Built to the approved Google Stitch design (screen "Our Hospitals · AAF
   Hospital Group"). New "br-" class names; reuses the "dp-" section scale +
   .dp-toolbar* / .dp-chip / .dp-crumbs* / .dp-kicker* / .dp-triage* / .dp-cta*.
   Navbar / footer inherited. "Find my nearest hospital" is the existing
   geolocation.js progressive-enhancement flow (data-geo-* hooks); search + an
   "open now" toggle are the shared initFilter(). Replaces the old ".chooser-*"
   block. Stitch's invented region taxonomy + campus map artwork are not
   reproduced — a pin motif + real coordinates only.
   ========================================================================== */
@layer components {

  /* ---- 1 · Banner + finder --------------------------------- */
  .br-banner { overflow: clip; padding-bottom: clamp(3.75rem, 3rem + 4vw, 5.5rem); }
  .br-banner__glow {
    position: absolute; top: -8rem; left: -6rem; width: min(440px, 55vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(44px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%);
  }
  .br-banner__glow--2 {
    top: 2rem; left: auto; right: -5rem; width: min(400px, 48vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%);
  }
  .br-banner__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .br-banner__title {
    font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.1rem); font-weight: 700; line-height: 1.04;
    letter-spacing: -0.02em; margin: 0 0 var(--space-s); color: var(--ink); text-wrap: balance;
  }
  .br-banner__lead { margin: 0 0 var(--space-l); font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
  .br-banner__actions { gap: var(--space-s); }
  .br-banner__jump svg { width: 15px; height: 15px; }
  .br-geo {
    display: inline-flex; align-items: center; gap: 0.55em; margin-top: var(--space-m);
    padding: 0.6em 1em; border-radius: var(--radius-pill);
    background: var(--brand-tint-2); color: var(--brand); font-weight: 600; font-size: var(--fs--1);
  }
  .br-geo svg { width: 15px; height: 15px; }
  .br-geo--auto svg { animation: br-geo-pulse 1.4s ease-in-out infinite; }
  @keyframes br-geo-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
  .br-banner__stat {
    display: inline-flex; align-items: center; gap: 0.55em; margin: var(--space-l) 0 0;
    padding: 0.7em 1.05em; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
    font-size: var(--fs--1); color: var(--ink-2); line-height: 1.4;
  }
  .br-banner__stat svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
  .br-banner__stat strong { color: var(--brand); }

  /* ---- 2 · Toolbar --------------------------------------- */
  .br-toolbar-wrap { position: relative; z-index: 5; margin-top: calc(-1 * clamp(2rem, 1.4rem + 3vw, 3.25rem)); }
  .br-toolbar-wrap .dp-toolbar {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: var(--space-m);
    display: flex; flex-direction: column; gap: var(--space-s);
  }
  .br-toolbar__toggle { display: inline-flex; align-items: center; gap: 0.45em; }
  .br-toolbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
  .br-toolbar__toggle.is-active .br-toolbar__dot { background: currentColor; }

  /* ---- 3 · Directory grid ------------------------------- */
  .br-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 640px) { .br-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
  @media (min-width: 1024px) { .br-grid { grid-template-columns: repeat(3, 1fr); } }
  .br-card {
    display: flex; flex-direction: column; overflow: clip;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  }
  .br-card:hover, .br-card:focus-within { box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--line-strong); }
  .br-card--paused { background: var(--surface-2); }
  .br-card--paused:hover, .br-card--paused:focus-within { transform: none; box-shadow: var(--shadow-2); }

  .br-card__head {
    position: relative; height: 128px; display: grid; place-items: center;
    background:
      radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 55%),
      var(--brand-tint-2);
  }
  .br-card--paused .br-card__head { background: var(--surface-3, var(--surface-2)); filter: grayscale(0.4); }
  .br-card__motif { display: flex; flex-direction: column; align-items: center; gap: 0.4em; color: var(--brand); }
  .br-card__motif svg { width: 26px; height: 26px; }
  .br-card__coords { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
  .br-card__status {
    position: absolute; top: 0.7rem; left: 0.7rem;
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.32em 0.75em; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
    font-size: 0.72rem; font-weight: 700; box-shadow: var(--shadow-1);
  }
  .br-card__status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .br-card__status--open { color: var(--success); }
  .br-card__status--open .br-card__status-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
  .br-card__status--paused { color: #9A6A00; }
  .br-card__status--paused .br-card__status-dot { background: #E0A100; }

  .br-card__body { padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
  .br-card__name { margin: 0 0 var(--space-2xs); font-size: var(--dp-h3, 1.15rem); font-weight: 700; color: var(--brand); letter-spacing: -0.01em; line-height: 1.3; }
  .br-card__hours, .br-card__addr, .br-card__phone, .br-card__notice {
    display: flex; align-items: flex-start; gap: 0.5em; margin: 0;
    font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2);
  }
  .br-card__hours svg, .br-card__addr svg, .br-card__phone svg, .br-card__notice svg {
    width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 0.15em;
  }
  .br-card__hours strong { color: var(--ink); }
  .br-card__notice {
    padding: 0.6em 0.8em; border-radius: var(--radius-s);
    background: #FBF3E1; color: #7A5600; font-weight: 500;
  }
  .br-card__notice svg { color: #B98900; }
  .br-card__phone a { color: var(--ink); font-weight: 600; text-decoration: none; }
  .br-card__phone a:hover { color: var(--brand); }
  .br-card__links { margin: var(--space-2xs) 0 0; display: flex; align-items: center; gap: 0.5em; font-size: var(--fs--1); }
  .br-card__links a { color: var(--brand); font-weight: 700; text-decoration: none; }
  .br-card__links a:hover { color: var(--accent); }
  .br-card__links span { color: var(--faint); }

  .br-card__foot { padding: 0 var(--space-l) var(--space-l); display: flex; flex-direction: column; gap: var(--space-xs); }
  .br-card__foot-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
  .br-card__foot-row:has(.br-card__ghost:only-child) { grid-template-columns: 1fr; }
  .br-card__ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
    padding: 0.7em 0.6em; border-radius: var(--radius-pill);
    background: var(--surface-2); color: var(--brand); font-size: var(--fs--1); font-weight: 700; text-decoration: none;
    transition: background var(--dur-1) var(--ease);
  }
  .br-card__ghost:hover { background: var(--brand-tint); }
  .br-card__ghost svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
  .br-card__ghost--go:hover svg { transform: translateX(3px); }
  .br-card__paused-note { margin: 0; text-align: center; font-size: var(--fs--1); color: var(--muted); font-style: italic; }

  .br-empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-s);
    padding: var(--space-2xl) var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  }
  .br-empty--page { max-width: 34rem; margin-inline: auto; }
  .br-empty__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
  .br-empty__ic svg { width: 28px; height: 28px; }
  .br-empty__title { margin: 0; font-size: var(--dp-h3, 1.15rem); font-weight: 700; color: var(--brand); }
  .br-empty__text { margin: 0; color: var(--ink-2); font-size: var(--fs-0); max-width: 46ch; }

  /* ---- 4 · Helper band --------------------------------- */
  .br-help-wrap { padding-block: clamp(1rem, 0.6rem + 2vw, 2rem); }

  /* ---- 5 · Trust row ---------------------------------- */
  .br-trust__head { max-width: 44rem; margin-inline: auto; margin-bottom: var(--space-xl); text-align: center; }
  .br-trust__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
  @media (min-width: 560px) { .br-trust__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .br-trust__grid { grid-template-columns: repeat(4, 1fr); } }
  .br-trust__item {
    display: flex; flex-direction: column; gap: 0.35em;
    padding: var(--space-l);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  }
  .br-trust__ic {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--brand-tint); color: var(--brand); margin-bottom: var(--space-2xs);
  }
  .br-trust__ic svg { width: 22px; height: 22px; }
  .br-trust__item:nth-child(2) .br-trust__ic { background: var(--teal-tint); color: var(--teal-600); }
  .br-trust__item:nth-child(3) .br-trust__ic { background: var(--accent-tint); color: var(--accent); }
  .br-trust__title { font-size: var(--fs-0); font-weight: 700; color: var(--brand); }
  .br-trust__sub { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; }

  /* ---- 6 · CTA --------------------------------------- */
  .br-cta { overflow: clip; text-align: center; }
}

@layer utilities {
  .js-reveal .br-card__media[data-reveal-image] .image-slot img { transition: transform var(--dur-3) var(--ease); }
  @media (prefers-reduced-motion: reduce) {
    .br-card, .br-card__ghost, .br-card__ghost svg { transition: none !important; }
    .br-geo--auto svg { animation: none !important; }
  }
}