/* =============================================================================
   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 — from the Allergy Asthma Foundation logo. Light by default;
       html[data-theme="dark"] retunes it below (theme.js sets the attribute). ---- */
    --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;
    /* brand colours used as TEXT/outline (vs as a fill) — split out so dark mode
       can lighten them without washing out the filled buttons/sections */
    --brand-ink: #2E3E9C; --accent-ink: #B23C85; --teal-ink: #2F6E8B;
    --ink-bg: #1A2133;           /* --ink used as a dark FILL (announce bar, toast, hero base) */

    --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; --z-cursor: 900;
  }

  /* ===== DARK THEME — same tokens, retuned. White-on-brand text stays white
     (fills are kept dark enough for AA), while text uses the lighter *-ink. ===== */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #4A5AC9; --brand-600: #3B49AB; --brand-700: #2B3789; --brand-400: #8B96E8;
    --brand-tint: #1F2550; --brand-tint-2: #171C3A;
    --accent: #B93F8B; --accent-600: #9E3378; --accent-tint: #3A1C31;
    --teal: #2F7C9F; --teal-600: #2A7090; --teal-tint: #12303D;
    --brand-ink: #A3AEF5; --accent-ink: #F28FC6; --teal-ink: #7CC3E4;
    --ink-bg: #060813;

    --ink: #E9ECF6; --ink-2: #C6CBDB; --muted: #9DA4B9; --faint: #737B95;
    --line: #272D4A; --line-strong: #373E62;
    --paper: #0C0F1F; --surface: #151A33; --surface-2: #1C2242;

    --success: #4CC58A; --success-tint: #123024;
    --danger: #FF7A6B; --danger-tint: #3A1B19;
    --info: #78A6F2; --info-tint: #16264A;

    --overlay: rgba(4, 6, 16, 0.72);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 6px 20px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 18px 44px -14px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-4: 0 40px 90px -24px rgba(0, 0, 0, 0.75);
  }
}

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

  body {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;              /* belt-and-braces: the page itself never scrolls
      sideways, whatever a component's own layout does at an edge-case viewport
      (client report, 2026-10 — doctor detail and others at very narrow widths).
      Internal horizontal scroll-snap rails (.hp-doc__rail etc.) are unaffected —
      they scroll within their own box, not the document. */
    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-ink); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
  a:hover { color: var(--brand-ink); }
  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-ink);
    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-bg); color: #F4F5FB; }
  .section--ink h2, .section--ink h3 { color: #F4F5FB; }
  .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-ink); }
  .btn--outline:hover { --_bg: var(--brand-tint); color: var(--brand-ink); }
  .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: #1A2133; --_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-ink); 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-ink);
    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-ink); }
  /* 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-ink); 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-ink); 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-ink); 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-ink); 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-ink); }
  .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 {
    /* Fluid, not .container — the desktop nav + actions can be wider than
       .container's 1200px cap at in-between viewports (e.g. ~1400-1600px),
       which overflowed the old centered box and ate into the right gutter
       only, leaving unequal left/right gaps (client report, 2026-09). Full
       width + equal padding-inline guarantees the same gap on both sides
       regardless of nav width. */
    width: 100%; min-height: var(--header-h); display: flex; align-items: center; gap: var(--space-m);
    padding-inline: var(--gutter);
    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-expanded="true"] {
    color: var(--brand-ink); background: var(--brand-tint-2);
  }
  .nav-desktop__link[aria-current="page"] {
    color: var(--accent-ink); background: var(--accent-tint); font-weight: 600;
  }
  .nav-desktop__link:focus-visible { outline: 2px solid var(--brand-ink); 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; } }

  /* "More" nav dropdown — same open/close JS as .loc-select (initLocationSelect) */
  .nav-more { position: relative; }
  .nav-more__menu {
    position: absolute; left: 0; top: calc(100% + 8px); min-width: 200px;
    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);
  }
  .nav-more[data-open] .nav-more__menu { display: block; }
  .nav-more__menu a {
    display: block; padding: 0.6em 0.7em; border-radius: var(--radius-s);
    text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--fs--1);
  }
  .nav-more__menu a:hover { background: var(--surface-2); color: var(--brand-ink); }
  .nav-more__menu a[aria-current="page"] { color: var(--accent-ink); font-weight: 600; }

  .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-ink); }

  .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[aria-current="page"] { color: var(--accent-ink); }
  .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-ink); 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-ink); font-weight: 600; }
  .loc-select__sep { border: 0; border-top: 1px solid var(--line); margin: 0.35rem 0.2rem; }

  /* 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-bg); 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-ink); }
  .quick-actions svg { width: 24px; height: 24px; color: var(--brand-ink); }

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

  /* --- 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:not(.btn) { color: var(--ink-2); text-decoration: none; transition: color var(--dur-1) var(--ease); }
  .site-footer a:not(.btn):hover, .site-footer a:not(.btn):focus-visible { color: var(--brand-ink); }

  /* 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-ink); 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-ink);
  }
  .footer-contact a { border-bottom: 1px solid transparent; }
  .footer-contact a:hover, .footer-contact a:focus-visible { color: var(--brand-ink); 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-ink); }

  /* --- 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; } }
  /* Detail pages (treatment/condition/immunotherapy/checkup/…) also render
     a full-width .sticky-cta bar at the true viewport bottom — without this
     the fixed float-contact stack sits underneath/overlapping it. Raise it
     clear of the bar's height (+ its own safe-area padding) whenever one is
     present on the page. */
  body:has(.sticky-cta) .float-contact {
    bottom: calc(var(--gutter) + 60px + env(safe-area-inset-bottom));
  }
  /* header.js::initFloatContactFade fades this stack out once the footer is
     within reach — every page ends differently (a dark CTA band's own
     buttons, the footer's own contact card, …) and the fixed stack would
     otherwise sit on top of whatever that happens to be. */
  .float-contact {
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .float-contact.is-near-footer { opacity: 0; transform: translateY(10px); pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .float-contact { transition: none; } }
  /* --z-float (300) sits above --z-drawer (200) by design (the floating
     stack should float over ordinary page content) — but that also puts it
     over the open mobile nav drawer itself, overlapping its own links.
     Hide it for exactly that state. */
  body:has([data-nav-mobile][data-open]) .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-bg); 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);
  }
  /* display:inline-flex (not the plain inline a <span> defaults to) is
     needed here: the global `svg { display: block }` reset means a bare
     inline span just wraps a block-level child, which generates an
     anonymous block that stretches to the full container width and
     left-aligns — ignoring both this width and the parent's
     text-align:center. inline-flex keeps the box sized to its declared
     48px and inline-level, so text-align:center on .state actually
     centers it. */
  .state__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: 0 0 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-ink); }
  .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-ink); }
  .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-ink); }
  .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 — individually elevated cards, icon-badge chevron
     (same hover/open language as .hp-counters__item / .ab-value) rather
     than a flat divided list ------------------------------------------- */
  .faq { display: flex; flex-direction: column; gap: var(--space-s); }
  .faq__item {
    border: 1px solid var(--line); border-radius: var(--radius-l);
    background: var(--surface); box-shadow: var(--shadow-1); overflow: clip;
    transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
                background var(--dur-2) var(--ease);
  }
  .faq__item:hover { border-color: var(--brand-400); }
  .faq__item[open] { box-shadow: var(--shadow-2); border-color: var(--brand-400); background: var(--brand-tint-2); }
  .faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
    padding: var(--space-m) var(--space-l); font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-1); color: var(--ink); cursor: pointer; list-style: none;
    transition: color var(--dur-2) var(--ease);
  }
  .faq__q:hover { color: var(--brand-ink); }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q-text { text-wrap: balance; }
  .faq__chev {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink);
    transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  }
  .faq__item[open] .faq__chev { transform: rotate(180deg); background: var(--brand); color: #fff; }
  .faq__a { padding: 0 var(--space-l) var(--space-l); color: var(--ink-2); max-width: 64ch; line-height: 1.7; }

  /* --- 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-ink); 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-ink); 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-ink); 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__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .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; }

  /* card_motion.js claims [data-reveal-stagger] containers for a richer
     GSAP scale+rise+fade cascade (card grids, feature/stat rows) — this
     neutralises the plain CSS fade above so the two systems never fight;
     it's weaker than any inline style, so GSAP's own gsap.set()/to() still
     wins outright, and content stays visible-by-default if GSAP never
     claims the container at all (JS disabled, GSAP failed to load, …). */
  .js-reveal [data-reveal-stagger].gsap-stagger-managed > * {
    opacity: 1; transform: none; transition: none;
  }

  /* 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-ink);
    margin: 0 0 var(--space-xs);
  }
  .hp-kicker::before { content: none; }
  .hp-kicker--onhero { color: var(--brand-ink); }

  /* 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-ink); text-decoration: none;
  }
  .arrow-link:hover, .arrow-link:focus-visible { color: var(--brand-ink); }
  .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-ink); 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-ink);
  }
  .image-slot__mark { opacity: 0.5; }
  .image-slot__cap { font-size: var(--fs--1); font-weight: 600; color: var(--brand-ink); }

  .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-ink); 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-ink); }
  .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-bg);
    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); }
  /* Phones: .hp-hero__live (the open/closed pill) is hidden below 640px, so
     move the slider chip into that now-empty top-right corner instead of
     bottom-right, where it used to sit on top of the "Call <branch>" line
     and the fixed phone/WhatsApp/email buttons. */
  @media (max-width: 639.98px) {
    .hp-hero__controls {
      top: var(--space-m); bottom: auto;
      padding: 0.3em; gap: 0.3em;
    }
    .hp-hero__count { padding-inline: 0.4em; }
    .hp-hero__btn { width: 28px; height: 28px; }
  }

  /* --- 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: minmax(0, 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, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .hp-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .hp-actions__item {
    position: relative; display: flex; align-items: center; gap: var(--space-s);
    padding: var(--space-s); border-radius: 16px; min-width: 0;
    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-ink);
    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-ink); }
  .hp-actions__item--4 .hp-actions__icon { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line); }
  .hp-actions__item--5 .hp-actions__icon { background: var(--accent-tint); color: var(--accent-ink); }
  .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-ink); box-shadow: var(--shadow-2);
  }
  .hp-story__chip svg { color: var(--brand-ink); 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-ink); 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-ink); 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-ink); text-decoration: none;
  }
  .hp-story__link:hover, .hp-story__link:focus-visible { color: var(--accent-ink); }
  .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); }

  /* --- 5b · Trust counters — animated stat cards (client request, 2026-10:
     "how many tests we completed to increase the trust"); figures count up
     via stat_counter.js (.hp-counters__figure is in its auto-target list).
     Individually elevated, icon-led cards — same hover-lift + top-accent +
     icon-color-rotation language as the About page's value tiles
     (.ab-value), rather than a flat seamless strip. */
  .hp-counters { position: relative; overflow: clip; }
  .hp-counters__glow {
    position: absolute; top: -20%; right: -10%; width: min(50vw, 640px); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--brand-400) 0%, transparent 68%);
    opacity: 0.14;
  }
  .hp-counters .container { position: relative; z-index: 1; }
  /* The reveal-managed .hp-kicker shrinks to its content width at runtime
     (card_motion.js), so text-align:center on a block parent can't centre
     it — margin-inline:auto only centres a child with a known width. Use a
     centring flex column instead, same pattern .hp-trust__lead already
     uses for its kicker. */
  .hp-counters__head {
    max-width: 46rem; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .hp-counters__title { margin-top: 0.5em; font-size: var(--fs-3); letter-spacing: -0.01em; }
  .hp-counters__grid {
    list-style: none; margin: var(--space-xl) 0 0; padding: 0;
    display: grid; gap: var(--space-m); grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 860px) { .hp-counters__grid { grid-template-columns: repeat(4, 1fr); } }
  .hp-counters__item {
    position: relative; overflow: clip;
    display: flex; flex-direction: column; align-items: center; gap: 0.1em;
    text-align: center; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-l); box-shadow: var(--shadow-1);
    padding: var(--space-l) var(--space-s);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .hp-counters__item::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
    background: var(--brand); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .hp-counters__item:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--brand-400); }
  .hp-counters__item:hover::before { transform: scaleX(1); }
  .hp-counters__ic {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: var(--brand-tint); color: var(--brand-ink); margin-bottom: var(--space-xs);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .hp-counters__item:hover .hp-counters__ic { transform: rotate(-6deg) scale(1.05); background: var(--brand); color: #fff; }
  .hp-counters__item:nth-child(4n+2) .hp-counters__ic { background: var(--accent-tint); color: var(--accent-ink); }
  .hp-counters__item:nth-child(4n+2):hover .hp-counters__ic { background: var(--accent); color: #fff; }
  .hp-counters__item:nth-child(4n+3) .hp-counters__ic { background: var(--teal-tint); color: var(--teal-ink); }
  .hp-counters__item:nth-child(4n+3):hover .hp-counters__ic { background: var(--teal-600); color: #fff; }
  .hp-counters__figure {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); line-height: 1;
  }
  .hp-counters__label {
    font-size: var(--fs--1); font-weight: 700; color: var(--muted); margin-top: 0.4em;
    text-wrap: balance; max-width: 16ch;
  }

  /* --- 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; scroll-padding-inline: 0; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 var(--space-2xs);
  }
  .hp-dept__track::-webkit-scrollbar { display: none; }
  .hp-dept__track:focus-visible { outline: 2px solid var(--brand-ink); 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-ink);
    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-ink); 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; scroll-padding-inline: 0; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 var(--space-2xs);
  }
  .hp-docs__track::-webkit-scrollbar { display: none; }
  .hp-docs__track:focus-visible { outline: 2px solid var(--brand-ink); 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__badge--online { background: var(--teal); }
  .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-ink); 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-ink); 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-ink);
  }
  .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-ink); 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 {
    padding: var(--space-s) 0;
    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__cat { font-size: var(--fs--1); font-weight: 700; color: var(--brand-ink); }
  .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-ink);
    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-ink);
  }
  .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-ink); 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; }

  /* --- "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-ink); }
  .cbk-modal__eyebrow { margin: 0; font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
  .cbk-modal__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2); font-weight: 700; color: var(--brand-ink); }
  .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, .cbk-field select {
    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, .cbk-field select: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. The 85%/70%
     narrowing is a desktop-only readability choice (keeps the block from
     spanning a very wide container edge-to-edge) — on mobile the container
     is already narrow, so the same percentages were needlessly shrinking an
     already-tight column and forcing the heading into a cramped 3-line
     wrap; use the full column by default, narrow it only once there's
     width to spare. */
  .hp-trust__lead {
    max-width: 100%; margin: 0 auto var(--space-2xl); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  }
  @media (min-width: 640px) { .hp-trust__lead { max-width: 85%; } }
  .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: wrap;
  }
  @media (min-width: 640px) { .hp-trust .hp-trust__statement { text-wrap: balance; } }
  .hp-trust__deck {
    color: rgba(255, 255, 255, 0.66); font-size: var(--fs-0); margin: 0; max-width: 100%;
  }
  @media (min-width: 640px) { .hp-trust__deck { 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: #F9E9F2; 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 {
    /* NOT minmax(0, 90%) — a percentage as minmax()'s max argument inside an
       auto-flow column track doesn't resolve reliably against this
       scrollable grid's own (auto/intrinsic) width: Chrome was collapsing
       every column to an equal 1/N share of the track instead, however
       many slides existed (4 slides = 4 cramped ~60px columns). A bare
       percentage track size (proven on the other two homepage sliders,
       .hp-dept__track / .hp-docs__track) sizes correctly. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 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: calc((100% - var(--space-l)) / 1.7); }
  }
  @media (min-width: 1024px) {
    .hp-quotes__track { grid-auto-columns: calc((100% - var(--space-l)) / 2); }
  }
  .hp-quotes__track::-webkit-scrollbar { display: none; }
  .hp-quotes__track:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 4px; border-radius: var(--radius); }
  .hp-quotes__slide { scroll-snap-align: start; display: flex; min-width: 0; }

  /* Patient-story card — soft brand wash, a gradient top edge, a quote badge,
     and an initials avatar beside the name. Shared by the homepage slider
     and the testimonials page (--full lifts the line clamp there). */
  .hp-quote-card {
    position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;
    background: linear-gradient(165deg, var(--surface) 0%, var(--brand-tint) 130%);
    border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-1); padding: var(--space-l) var(--space-l) 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 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent) 60%, var(--teal));
  }
  .hp-quote-card:hover {
    box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--line-strong);
  }
  .hp-quote-card--featured { border-color: var(--brand-400); }
  .hp-quote-card__mark {
    flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 11px;
    border-radius: 50%; margin-bottom: var(--space-s);
    background: var(--brand); color: #fff; opacity: 1;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent);
  }
  .hp-quote-card__text {
    font-family: var(--font-display); font-size: var(--fs-1);
    font-weight: 500; line-height: 1.55; color: var(--ink); margin: 0 0 var(--space-m); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-quote-card--full .hp-quote-card__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .hp-quote-card__by {
    display: flex; align-items: center; gap: var(--space-s); margin: 0;
    padding-top: var(--space-s); border-top: 1px solid var(--line);
  }
  .hp-quote-card__avatar {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff;
    font-weight: 700; font-size: var(--fs--1); letter-spacing: 0.02em;
  }
  .hp-quote-card__who { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
  .hp-quote-card__name {
    font-family: var(--font-display); font-weight: 700; color: var(--ink);
    font-size: var(--fs-0); letter-spacing: -0.01em;
  }
  .hp-quote-card__doctor { color: var(--accent-ink); font-size: 0.8rem; 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; }

  /* --- 12b · Social showcase — same proven slider mechanics as the
     testimonial track above (bare-percentage grid-auto-columns; see the note
     on .hp-quotes__track), narrower columns since these cards are portrait. */
  .hp-social__slider { position: relative; }
  .hp-social__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: 68%;
    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: 620px) {
    .hp-social__track { grid-auto-columns: calc((100% - 2 * var(--space-l)) / 3); }
  }
  @media (min-width: 960px) {
    .hp-social__track { grid-auto-columns: calc((100% - 3 * var(--space-l)) / 4); }
  }
  .hp-social__track::-webkit-scrollbar { display: none; }
  .hp-social__track:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 4px; border-radius: var(--radius); }
  .hp-social__slide { scroll-snap-align: start; display: flex; min-width: 0; }

  .hp-social-card {
    display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;
    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: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
  }
  .hp-social-card:hover, .hp-social-card:focus-visible {
    box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--line-strong);
  }
  /* fixed aspect-ratio + flex: none — every card's media block is exactly the
     same height regardless of the source image's own orientation (a wide
     "team photo" crops differently to a 9:16 reel poster, but never shrinks
     the box itself); matches the same guard on .hp-doc-card__media above. */
  .hp-social-card__media {
    position: relative; flex: none; aspect-ratio: 4 / 5; overflow: clip;
    background: linear-gradient(155deg, var(--brand-600), var(--brand-700));
  }
  .hp-social-card__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--dur-3) var(--ease);
  }
  .hp-social-card:hover .hp-social-card__media img, .hp-social-card:focus-visible .hp-social-card__media img {
    transform: scale(1.06);
  }
  .hp-social-card__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 20, 45, 0) 50%, rgba(17, 20, 45, 0.62) 100%);
  }
  .hp-social-card__media-fallback {
    position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.6);
  }
  .hp-social-card__play {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff;
    transition: transform var(--dur-2) var(--ease);
  }
  .hp-social-card:hover .hp-social-card__play, .hp-social-card:focus-visible .hp-social-card__play {
    transform: scale(1.12);
  }
  .hp-social-card__badge {
    position: absolute; top: var(--space-s); left: var(--space-s); z-index: 2;
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff;
    background: var(--ink-bg); box-shadow: var(--shadow-1);
  }
  .hp-social-card__badge--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 70%, #515bd4); }
  .hp-social-card__badge--facebook { background: #1877f2; }
  .hp-social-card__badge--youtube { background: #ff0000; }
  .hp-social-card__type {
    position: absolute; left: var(--space-s); bottom: var(--space-s); z-index: 2;
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.32em 0.75em; 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: 0.72rem; letter-spacing: 0.02em; line-height: 1;
  }
  .hp-social-card__body {
    display: flex; flex-direction: column; gap: var(--space-3xs);
    padding: var(--space-m); flex: 1 1 auto; min-height: 0;
  }
  .hp-social-card__caption {
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-0); color: var(--ink); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hp-social-card__sub { color: var(--muted); font-size: 0.8rem; font-weight: 600; margin-top: -0.15em; }
  .hp-social-card__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    margin-top: auto; padding-top: var(--space-s);
    color: var(--brand-ink); font-weight: 700; font-size: var(--fs--1);
  }
  .hp-social-card:hover .hp-social-card__cta, .hp-social-card:focus-visible .hp-social-card__cta {
    color: var(--brand-ink);
  }
  .hp-social-card__cta svg { transition: transform var(--dur-2) var(--ease); }
  .hp-social-card:hover .hp-social-card__cta svg, .hp-social-card:focus-visible .hp-social-card__cta svg {
    transform: translate(2px, -2px);
  }

  /* testimonials page — video stories grid (same cards as the social slider) */
  .st-videos { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

  .hp-social__controls { display: flex; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
  .hp-social__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
  .hp-social__progress-fill {
    display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand);
    transition: width var(--dur-2) var(--ease);
  }
  .hp-social__arrows { display: flex; gap: var(--space-2xs); flex-shrink: 0; }
  .hp-social__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-social__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .hp-social__btn:active { transform: scale(0.94); }
  .hp-social__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-ink);
    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-ink);
  }
  .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-ink);
  }
  .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-ink); 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-ink);
    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-ink); }
  .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%, var(--surface)); /* ≈ #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-ink); 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-ink); }
  .ab-kicker--teal   { color: var(--teal-ink); }
  .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)); padding-bottom: var(--space-m); }
  .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-ink); }
  .ab-crumbs__seg a svg { color: var(--teal-ink); }
  .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-ink);
    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-ink); 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-ink);
    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); }
  /* min-height: 0 overrides the flex item's automatic content-based minimum
     size — without it each photo's own intrinsic aspect ratio (not the
     `aspect-ratio: 1` square) wins, so the two founder photos render at
     different heights depending on how tall each source photo naturally is. */
  .ab-founder__media { position: relative; aspect-ratio: 1; min-height: 0; 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-ink);
    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-ink); }
  .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-ink); }
  .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-ink); }
  .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-ink); }
  .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-ink); 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-ink); }
  .ab-intro__title { font-size: var(--ab-h2); font-weight: 700; color: var(--brand-ink); 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-ink); --_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-ink);
  }
  .ab-fact__ic svg { width: 15px; height: 15px; }
  .ab-fact__ic--accent { background: var(--accent-tint); color: var(--accent-ink); }
  .ab-fact__ic--teal { background: var(--teal-tint); color: var(--teal-ink); }
  .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-ink); 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-ink); 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-ink); 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-ink); 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-ink); 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-ink); 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-ink);
    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-ink); }
  .ab-value:nth-child(3n) .ab-value__ic { background: var(--teal-tint); color: var(--teal-ink); }
  .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-ink);
  }
  .ab-facility--alt .ab-facility__eyebrow { color: var(--accent-ink); }
  .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-ink);
  }
  .ab-facility--alt .ab-facility__note { color: var(--accent-ink); }
  .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-ink);
  }
  .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-ink); --_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-counters__item, .hp-counters__item::before, .hp-counters__ic,
    .hp-quote-card, .hp-quote-card__mark, .hp-quotes__btn, .hp-quotes__progress-fill,
    .hp-social-card, .hp-social__btn, .hp-social__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%, var(--surface));
    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-ink);
  }
  .dp-kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
  .dp-kicker--accent { color: var(--accent-ink); }
  .dp-kicker--teal { color: var(--teal-ink); }
  /* 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-ink); }
  .dp-crumbs__seg a svg { color: var(--teal-ink); }
  .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-ink);
    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-ink); 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-ink);
  }
  .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-ink); 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-ink);
  }
  .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-toolbar__row > .dp-toolbar__campus { align-self: center; }
  }
  .dp-search {
    position: relative; flex: 1; display: flex; align-items: center;
  }
  .dp-search svg {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); 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-ink); }

  .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 { text-decoration: none; }
  .dp-chip:hover { border-color: var(--line-strong); background: var(--brand-tint-2); }
  a.dp-chip:hover { color: var(--ink); }
  .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-ink); }
  .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-ink);
    transition: color var(--dur-1) var(--ease);
  }
  .dp-toolbar__reset:hover { color: var(--accent-ink); }
  .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-ink); 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-ink); box-shadow: var(--shadow-1);
  }
  .dp-featured__badge svg { width: 15px; height: 15px; color: var(--accent-ink); }
  .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-ink); margin: 0; letter-spacing: -0.01em; }
  .dp-featured__tagline { margin: 0; font-size: var(--fs-1); font-weight: 600; color: var(--accent-ink); }
  .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-ink); }
  .dp-point__ic svg { width: 20px; height: 20px; }
  .dp-point:nth-child(2) .dp-point__ic { color: var(--teal-ink); }
  .dp-point:nth-child(3) .dp-point__ic { color: var(--accent-ink); }
  .dp-point__num { font-size: var(--fs-1); font-weight: 700; color: var(--brand-ink); }
  .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-ink); --_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-ink); 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-ink); 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-ink); }
  .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);
  }
  /* text-wrap: balance (Chromium's own default for h1-h6, not just a rule
     of ours) can choose a noticeably narrower measure than the column
     actually available, trading width for even line lengths — on an
     already-narrow mobile column that reads as the heading not using the
     space it has. Explicitly override the browser default back to normal
     wrapping there; only balance it once there's width to spare. */
  .dp-cta__title { margin: 0 0 var(--space-s); font-size: var(--dp-h2); font-weight: 700; color: #fff; text-wrap: wrap; }
  @media (min-width: 640px) { .dp-cta__title { 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-ink);
  }
  .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-ink); 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-ink); }
  .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-ink); 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-ink); }
  .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-ink); 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-ink);
  }
  .dpd-empty__ic svg { width: 28px; height: 28px; }
  .dpd-empty__title { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand-ink); }
  .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-ink); }
  .dpd-treat__empty h3 { margin: 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand-ink); }
  .dpd-treat__empty p { margin: 0; font-size: var(--fs-0); max-width: 44ch; }

  /* ---- 4b · FAQ — mirrors .txd-faq (treatment detail) ------------ */
  .dpd-faq__inner { max-width: 46rem; margin-inline: auto; }
  .dpd-faq__head { text-align: center; margin-bottom: var(--space-l); }

  /* ---- 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-ink);
  }
  .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-ink); 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-ink); }
  .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); }
  /* stretch (not center) so the campus chip, the toggle and the search box all share
     the search input's height; .dp-toolbar__campus's mobile align-self:flex-start
     must not leak into the row layout (it pinned the chip to the top). */
  @media (min-width: 768px) {
    .dr-toolbar__row { flex-direction: row; align-items: stretch; }
    .dr-toolbar__row > .dp-toolbar__campus, .dr-toolbar__row > .dr-toggle { align-self: stretch; }
    .dr-toolbar__row .dp-search { align-items: stretch; }
    .dr-toolbar__row .dp-search input { height: 100%; }
  }
  .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-ink); 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); } }
  /* "Founders" / "Browse all consultants" headings inside the grid — full
     width regardless of column count, so they read as section breaks rather
     than grid cells. */
  .dr-grid__section-head { grid-column: 1 / -1; }

  /* 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-ink); }
  .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-ink);
    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-ink); }
  .dr-field:hover .dr-field__name { color: var(--accent-ink); }
  .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-ink); }
  .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-ink);
  }
  .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-ink); }
  .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-ink); 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; max-width: calc(50% - 1.3rem);
    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-ink); box-shadow: var(--shadow-1);
  }
  .drd-hero__role svg { flex: none; width: 14px; height: 14px; color: var(--accent-ink); }
  .drd-hero__loc {
    position: absolute; top: 0.85rem; right: 0.85rem; max-width: calc(50% - 1.3rem);
    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 { flex: none; width: 12px; height: 12px; color: #E7F1F6; }
  .drd-hero__loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .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-ink); }
  .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-ink); }

  @media (max-width: 639.98px) {
    /* The full branch list ("Calicut · Kochi · Mannarkkad · …") can run to
       6 names — cramped wrapped over the role badge on a narrow photo, and
       redundant with the "Consulting at N AAF campuses" fact just below in
       the body. Drop it here on mobile; keep the short role badge. */
    .drd-hero__loc { display: none; }
    /* .float-contact (fixed, bottom-right) can coincide with this card's own
       bottom-right corner on shorter viewports — keep this bar hugging the
       left side instead of spanning to the photo's own right edge, so it
       can't run into the floating buttons regardless of viewport height. */
    .drd-hero__status { right: auto; max-width: 78%; flex-wrap: wrap; }
  }

  .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-ink); 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-ink);
  }
  .drd-fact__ic--teal { background: var(--teal-tint); color: var(--teal-ink); }
  .drd-fact__ic--accent { background: var(--accent-tint); color: var(--accent-ink); }
  .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-branches {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs);
    margin: var(--space-2xs) 0 0;
  }
  .drd-branches__lbl { font-size: var(--fs--1); font-weight: 600; color: var(--muted); }
  .drd-branches__list { display: flex; flex-wrap: wrap; gap: 0.4em; }
  .drd-branches .dp-chip { padding: 0.35em 0.8em; font-size: 0.78rem; }
  .drd-branches .dp-chip svg { width: 13px; height: 13px; }
  .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-ink); }
  .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-ink); 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-ink); }
  .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-ink);
  }
  .drd-cred__title svg { width: 17px; height: 17px; color: var(--brand-ink); }
  .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-ink); 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-ink); 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-ink); 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-ink); letter-spacing: -0.01em; }
  .drd-pcard:hover .drd-pcard__name { color: var(--accent-ink); }
  .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-ink);
  }
  .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-ink);
    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-ink); }
  .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-ink); }
  .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-ink); 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-ink);
    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-ink); letter-spacing: -0.01em; }
  .drd-dcard:hover .drd-dcard__name { color: var(--accent-ink); }
  .drd-dcard__blurb { font-size: var(--fs--1); color: var(--ink-2); line-height: 1.5; }
  .drd-dcard__arr { flex: none; color: var(--brand-ink); }
  .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-ink); }
  .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-ink); }
  .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-ink); 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-ink); 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-ink); 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: #E7F1F6; }
  .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-ink); 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-ink); }
  .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-ink); 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-ink); 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-ink); 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-ink); }
  .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-ink); }
  .txd-glance__tag {
    padding: 0.2em 0.7em; border-radius: var(--radius-pill);
    background: var(--accent-tint); color: var(--accent-ink); 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-ink); 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-ink); letter-spacing: -0.01em; }
  .txd-step__when {
    font-size: var(--fs--1); font-weight: 600; color: var(--brand-ink);
    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-ink); }
  .txd-doc__name { font-size: var(--fs-1); font-weight: 700; color: var(--brand-ink); 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-ink); }
  .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-ink); 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-ink); 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-ink); }
  .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-ink); }

  /* ---- 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-ink); 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-ink); }
  .ct-card__value { margin: 0.35em 0 0; font-size: var(--fs-1); font-weight: 700; color: var(--brand-ink); 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-ink); 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-branch-switch {
    display: flex; flex-direction: column; gap: 0.35em;
    margin-bottom: var(--space-s); padding-bottom: var(--space-s);
    border-bottom: 1px dashed var(--line);
  }
  .ct-branch-switch__label {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: var(--fs--1); font-weight: 600; color: var(--muted);
  }
  .ct-branch-switch__label svg { width: 14px; height: 14px; color: var(--brand-ink); }
  .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-ink);
  }
  .ct-map__note-ic svg { width: 16px; height: 16px; }
  .ct-map__note-title { font-size: var(--fs-0); font-weight: 700; color: var(--brand-ink); }
  .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-ink); 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-ink); 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-ink); 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-ink); }
  .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-ink);
  }
  .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-ink); }
  .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-ink); }
  .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-ink);
  }
  .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-ink); 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-ink); }
  .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-ink); }
  .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-ink); }

  .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-ink); margin-bottom: var(--space-2xs);
  }
  .cb-formcard__step {
    color: var(--brand-ink); 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-ink); 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-ink); flex-shrink: 0; margin-top: 0.15em; }
  .cb-guarantee__title { display: block; font-weight: 700; color: var(--brand-ink); margin-bottom: 0.2em; }
  .cb-guarantee__text { margin: 0; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }

  /* =========================================================================
     LEAD FORM  (templates/public/lead_form.html — general enquiry + the
     doctor-bound quick appointment request). Same "cb-"/"ct-" family as
     Callback/Book an Appointment above; reuses .ab-help (below) for the
     "Prefer to call?" card. Only "lf-" class here is the doctor mini-card.
     ========================================================================= */
  .lf-doc {
    display: flex; align-items: center; gap: var(--space-s); text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: var(--space-s) var(--space-m); box-shadow: var(--shadow-1);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  .lf-doc:hover, .lf-doc:focus-visible { border-color: var(--brand-400); box-shadow: var(--shadow-2); }
  .lf-doc__photo { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: clip; }
  .lf-doc__photo .image-slot { border-radius: 50%; background: var(--brand-tint-2); }
  .lf-doc__photo .image-slot img { object-position: top; }
  .lf-doc__body { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
  .lf-doc__name { font-weight: 700; color: var(--ink); font-size: var(--fs-0); }
  .lf-doc__spec { font-size: var(--fs--1); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lf-doc__go { margin-left: auto; flex: none; color: var(--brand-ink); }

  /* =========================================================================
     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-ink); 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-ink); }
  .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-ink); flex-shrink: 0; margin-top: 0.1em; }
  .ab-hero-card__note-title { display: block; font-weight: 700; color: var(--brand-ink); 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-ink); 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-ink); 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-ink); }
  .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-ink); 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-ink); 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-ink); 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-ink); }
  .hc-trust__item:nth-child(3) .hc-trust__ic { background: var(--accent-tint); color: var(--accent-ink); }
  .hc-trust__title { font-size: var(--fs-0); font-weight: 700; color: var(--brand-ink); }
  .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-ink); }
  .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-ink); 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-ink); }
  .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-ink); 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-ink); 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-ink); }
  .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-ink); 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-ink); 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-ink); 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-ink); }
  .bd-author__link { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--fs--1); font-weight: 700; color: var(--accent-ink); }
  .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-ink); 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-ink); flex: none; }
  .br-banner__stat strong { color: var(--brand-ink); }

  /* ---- 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 ------------------------------- */
  /* Locations page — one embedded map + a chip per centre */
  .br-map-sec { padding-block: var(--space-xl); }
  .br-map__head { margin-bottom: var(--space-l); }
  .br-map__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-m); }
  .br-map__chip {
    display: inline-flex; align-items: center; padding: 0.55em 1.05em; border-radius: var(--radius-pill);
    border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: var(--fs--1); text-decoration: none;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .br-map__chip:hover { border-color: var(--brand); color: var(--brand-ink); }
  .br-map__chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .br-map__stage {
    border-radius: var(--radius-l); overflow: clip; border: 1px solid var(--line);
    box-shadow: var(--shadow-2); background: var(--surface);
  }
  .br-map__frame { display: block; width: 100%; height: clamp(300px, 46vw, 460px); border: 0; }
  .br-map__info {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-s) var(--space-l); padding: var(--space-m) var(--space-l);
  }
  .br-map__info[hidden] { display: none; }
  .br-map__info-text { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; flex: 1 1 260px; }
  .br-map__info-text span { color: var(--muted); font-size: var(--fs--1); line-height: 1.5; }
  .br-map__info-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

  .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); }
  /* map preview header: a live Google map, kept non-interactive so page scroll
     never gets trapped in it; the overlay link opens the place in Google Maps */
  .br-card__head--map { height: 170px; display: block; overflow: hidden; background: var(--surface-2); }
  .br-card__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
  .br-card__maplink { position: absolute; inset: 0; z-index: 1; }
  .br-card__head--map .br-card__status { z-index: 2; }
  .br-card__motif { display: flex; flex-direction: column; align-items: center; gap: 0.4em; color: var(--brand-ink); }
  .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--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-ink); 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-ink); 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-ink); }
  .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-ink); font-weight: 700; text-decoration: none; }
  .br-card__links a:hover { color: var(--accent-ink); }
  .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-ink); 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-ink); }
  .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-ink); 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-ink); }
  .br-trust__item:nth-child(3) .br-trust__ic { background: var(--accent-tint); color: var(--accent-ink); }
  .br-trust__title { font-size: var(--fs-0); font-weight: 700; color: var(--brand-ink); }
  .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; }
  }
}

/* ======================================================================
   Allergen immunotherapy — homepage feature band (.hp-immuno) +
   dedicated hub page (.im-*). Reuses the .dp-sec section scale.
   ====================================================================== */
@layer components {

  /* ---- homepage feature band -------------------------------------- */
  .hp-immuno__card {
    position: relative; overflow: clip;
    border-radius: var(--radius-l);
    background: linear-gradient(152deg, var(--brand-700) 0%, var(--brand) 52%, var(--teal-600) 130%);
    color: #fff;
    padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
    display: grid; grid-template-columns: 1fr; gap: var(--space-xl);
    box-shadow: var(--shadow-3);
  }
  @media (min-width: 900px) {
    .hp-immuno__card { grid-template-columns: 1.55fr 1fr; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  }
  .hp-immuno__glow {
    position: absolute; inset: auto -6rem -8rem auto; width: min(360px, 60vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; filter: blur(30px);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 70%);
  }
  .hp-immuno__body { position: relative; z-index: 1; }
  .hp-immuno__card .hp-kicker {
    color: #9ad4f0; justify-content: flex-start; margin-bottom: var(--space-s);
  }
  .hp-immuno__title {
    font-size: clamp(1.5rem, 1.2rem + 1.7vw, 2.3rem); font-weight: 700; color: #fff;
    line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--space-s); text-wrap: balance;
  }
  .hp-immuno__deck {
    margin: 0 0 var(--space-m); font-size: var(--fs-1); line-height: 1.6;
    color: rgba(255,255,255,0.85); max-width: 56ch;
  }
  .hp-immuno__points { list-style: none; margin: 0 0 var(--space-l); padding: 0; display: grid; gap: var(--space-xs); }
  .hp-immuno__point { display: flex; gap: var(--space-xs); align-items: flex-start; }
  .hp-immuno__point-ic {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255,255,255,0.14); color: #fff;
  }
  .hp-immuno__point-txt { font-size: var(--fs-0); line-height: 1.5; color: rgba(255,255,255,0.82); }
  .hp-immuno__point-txt strong { display: block; color: #fff; font-weight: 600; }
  .hp-immuno__ghost { --_bg: rgba(255,255,255,0.12); --_fg: #fff; --_bd: rgba(255,255,255,0.28); }
  .hp-immuno__ghost:hover { --_bg: rgba(255,255,255,0.2); }
  .hp-immuno__stats {
    position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2xs);
  }
  .hp-immuno__stat {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius); padding: var(--space-s) var(--space-m);
    backdrop-filter: blur(4px);
  }
  .hp-immuno__stat-fig { display: block; font-size: var(--fs-2); font-weight: 700; color: #fff; line-height: 1.1; }
  .hp-immuno__stat-lab { display: block; font-size: var(--fs--1); color: rgba(255,255,255,0.75); margin-top: 0.15em; }

  /* ---- hub page · 1 · hero -------------------------------------- */
  .im-hero { overflow: clip; }
  .im-hero__glow {
    position: absolute; top: -7rem; right: -5rem; width: min(440px, 58vw); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(42px);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%);
  }
  .im-hero__glow--2 {
    top: auto; bottom: -9rem; right: auto; left: 20%; width: min(380px, 50vw);
    background: radial-gradient(circle, color-mix(in srgb, var(--teal) 22%, transparent) 0%, transparent 70%);
  }
  .im-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center;
  }
  @media (min-width: 1000px) { .im-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-2xl); } }
  .im-hero__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-ink); text-wrap: balance;
  }
  .im-hero__tagline {
    margin: 0 0 var(--space-s); font-size: var(--fs-2); font-weight: 600;
    color: var(--ink); line-height: 1.4; max-width: 40ch;
  }
  .im-hero__lead { margin: 0; font-size: var(--fs-1); line-height: 1.65; color: var(--ink-2); max-width: 62ch; }
  .im-hero__actions { margin-top: var(--space-l); }
  .im-hero__trust {
    display: flex; align-items: center; gap: 0.5em; margin: var(--space-m) 0 0;
    font-size: var(--fs--1); font-weight: 600; color: var(--muted);
  }
  .im-hero__trust svg { color: var(--success); flex: none; }
  .im-hero__panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    box-shadow: var(--shadow-3); padding: clamp(1.25rem, 1rem + 1.5vw, 1.9rem);
  }
  .im-hero__panel-label {
    margin: 0 0 var(--space-s); font-size: var(--fs--1); font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  }
  .im-hero__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
  .im-hero__stat {
    display: flex; flex-direction: column; gap: 0.1em;
    padding: var(--space-s) var(--space-m); border-radius: var(--radius);
    background: var(--brand-tint-2); border: 1px solid var(--line);
  }
  .im-hero__stat-fig { font-size: var(--fs-2); font-weight: 700; color: var(--brand-ink); line-height: 1.1; }
  .im-hero__stat-lab { font-size: var(--fs--1); color: var(--ink-2); }
  .im-hero__panel-foot {
    display: flex; gap: 0.6em; align-items: flex-start; margin-top: var(--space-m);
    padding-top: var(--space-m); border-top: 1px solid var(--line);
    font-size: var(--fs--1); line-height: 1.5; color: var(--muted);
  }
  .im-hero__panel-foot svg { color: var(--teal-ink); flex: none; margin-top: 0.1em; }

  /* ---- shared section head ------------------------------------- */
  .im-head { max-width: 60ch; margin-bottom: var(--space-xl); }
  .im-head .dp-head__lead { max-width: 58ch; }

  /* ---- 2 · why cards ----------------------------------------- */
  .im-why__grid {
    display: grid; gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .im-why__card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--dp-card);
    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);
  }
  .im-why__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
  .im-why__ic {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
    background: var(--brand-tint); color: var(--brand-ink); margin-bottom: var(--space-s);
  }
  .im-why__title { font-size: var(--dp-h3); font-weight: 700; margin: 0 0 var(--space-2xs); color: var(--ink); }
  .im-why__text { margin: 0; font-size: var(--fs-0); line-height: 1.6; color: var(--ink-2); }

  /* ---- 3 · two routes -------------------------------------- */
  .im-formats__grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
  @media (min-width: 860px) { .im-formats__grid { grid-template-columns: 1fr 1fr; } }
  .im-fmt {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
    padding: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); box-shadow: var(--shadow-2);
    display: flex; flex-direction: column;
  }
  .im-fmt__top { display: flex; align-items: center; gap: var(--space-s); margin-bottom: var(--space-s); }
  .im-fmt__ic {
    flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: var(--teal-tint); color: var(--teal-ink);
  }
  .im-fmt__tag {
    font-size: var(--fs--1); font-weight: 600; color: var(--muted);
    background: var(--surface-2); padding: 0.4em 0.8em; border-radius: var(--radius-pill);
  }
  .im-fmt__name { font-size: var(--dp-h3); font-weight: 700; margin: 0 0 var(--space-2xs); color: var(--brand-ink); }
  .im-fmt__text { margin: 0 0 var(--space-m); font-size: var(--fs-0); line-height: 1.6; color: var(--ink-2); }
  .im-fmt__points { list-style: none; margin: auto 0 0; padding: var(--space-m) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-xs); }
  .im-fmt__points li { display: flex; gap: 0.6em; align-items: flex-start; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-2); }
  .im-fmt__points svg { color: var(--success); flex: none; margin-top: 0.1em; }

  /* ---- 4 · journey steps ---------------------------------- */
  .im-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); counter-reset: none; }
  @media (min-width: 1000px) { .im-steps { gap: var(--space-s); } }
  .im-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-m); align-items: stretch; }
  .im-step__num {
    font-size: var(--fs-2); font-weight: 700; color: var(--accent-ink);
    font-variant-numeric: tabular-nums; padding-top: var(--space-s);
    position: relative;
  }
  .im-step:not(:last-child) .im-step__num::after {
    content: ""; position: absolute; left: 50%; top: 3rem; bottom: -1rem; width: 2px;
    background: linear-gradient(var(--line-strong), transparent); transform: translateX(-50%);
  }
  .im-step__card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--dp-card);
    padding: var(--space-m) var(--space-l); box-shadow: var(--shadow-1);
  }
  .im-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em var(--space-s); margin-bottom: var(--space-2xs); }
  .im-step__title { font-size: var(--dp-h3); font-weight: 700; margin: 0; color: var(--ink); }
  .im-step__when {
    font-size: var(--fs--1); font-weight: 600; color: var(--teal-ink);
    background: var(--teal-tint); padding: 0.25em 0.7em; border-radius: var(--radius-pill);
  }
  .im-step__text { margin: 0; font-size: var(--fs-0); line-height: 1.6; color: var(--ink-2); }

  /* ---- 5 · suitability ----------------------------------- */
  .im-fit__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
  @media (min-width: 880px) { .im-fit__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
  .im-fit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
  .im-fit__list li { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--fs-0); line-height: 1.55; color: var(--ink-2); }
  .im-fit__list svg { flex: none; margin-top: 0.15em; }
  .im-fit__list--yes svg { color: var(--success); }
  .im-fit__list--note svg { color: var(--accent-ink); }

  /* ---- 6 · consultants ---------------------------------- */
  .im-docs { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .im-doc {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--dp-card);
    overflow: clip; box-shadow: var(--shadow-1); display: flex; flex-direction: column;
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  }
  .im-doc:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
  .im-doc__media { aspect-ratio: 3/4; background: var(--surface-2); }
  .im-doc__media .image-slot { height: 100%; }
  .im-doc__media .image-slot img { width: 100%; height: 100%; object-fit: cover; }
  .im-doc__body { padding: var(--space-m); flex: 1; }
  .im-doc__spec { font-size: var(--fs--1); font-weight: 600; color: var(--teal-ink); }
  .im-doc__name { font-size: var(--dp-h3); font-weight: 700; margin: 0.15em 0 0.25em; }
  .im-doc__name a { color: var(--ink); text-decoration: none; }
  .im-doc__name a:hover { color: var(--brand-ink); }
  .im-doc__qual { margin: 0; font-size: var(--fs--1); color: var(--muted); line-height: 1.45; }
  .im-doc__exp { margin: 0.35em 0 0; font-size: var(--fs--1); font-weight: 600; color: var(--ink-2); }
  .im-doc__link {
    display: flex; align-items: center; gap: 0.4em; padding: var(--space-s) var(--space-m);
    border-top: 1px solid var(--line); font-size: var(--fs--1); font-weight: 600;
    color: var(--accent-ink); text-decoration: none;
  }
  .im-doc__link:hover { color: var(--accent-ink); }

  /* ---- 7 · faq ----------------------------------------- */
  .im-faq__inner { max-width: var(--container-narrow); margin-inline: auto; }
  .im-faq__head { text-align: center; margin-bottom: var(--space-xl); }
  .dp-kicker--center { justify-content: center; }
  .im-faq__note {
    margin: var(--space-l) 0 0; font-size: var(--fs--1); line-height: 1.6;
    color: var(--muted); text-align: center; font-style: italic;
  }

  /* ---- 8 · cta tweaks --------------------------------- */
  .im-cta { text-align: center; }
}

@layer utilities {
  .js-reveal .im-why__card, .js-reveal .im-doc { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
  @media (prefers-reduced-motion: reduce) {
    .hp-immuno__card, .im-why__card, .im-doc { transition: none !important; }
    .im-why__card:hover, .im-doc:hover { transform: none !important; }
  }
}

/* ======================================================================
   Motion — GSAP-driven heading split-reveal + custom cursor
   (static/public/js/text_reveal.js, static/public/js/cursor.js). Both are
   pure progressive enhancement: headings are real text with no split
   markup until JS runs, and the native cursor is left completely alone
   unless JS confirms fine-pointer + motion-OK and adds .has-custom-cursor.
   ====================================================================== */
@layer components {

  /* ---- heading split-reveal ---------------------------------------- */
  /* SplitText wraps each source line in .split-line (a real block, so
     heading wrapping/line-breaks are unaffected) and each word/char inside
     it in its own inline-block span — this rule only needs to mask that
     line so the upward reveal has something to clip against. A hair of
     bottom padding keeps descenders (g, y, p, j) from clipping. */
  .split-line { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }

  /* ---- custom cursor -------------------------------------------------
     Both nodes render (in base_public.html) on every page but stay
     invisible until cursor.js confirms a fine-pointer, motion-OK device
     and adds .has-custom-cursor to <html> — so nothing here ever hides or
     replaces the native cursor for touch/keyboard/reduced-motion visitors,
     including if JS fails to load at all. */
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-cursor);
    opacity: 0; transform: translate(-50%, -50%); mix-blend-mode: difference;
  }
  .cursor-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
  }
  .cursor-ring {
    width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #fff;
    transition: width var(--dur-2) var(--ease), height var(--dur-2) var(--ease),
      opacity var(--dur-2) var(--ease), border-width var(--dur-2) var(--ease);
  }
  html.has-custom-cursor {
    cursor: none;
  }
  @media (hover: hover) and (pointer: fine) {
    html.has-custom-cursor .cursor-ring.is-ready:not(.is-hidden) { opacity: 0.9; }
    html.has-custom-cursor .cursor-dot.is-ready:not(.is-hidden) { opacity: 1; }
    html.has-custom-cursor a, html.has-custom-cursor button,
    html.has-custom-cursor [role="button"], html.has-custom-cursor .btn,
    html.has-custom-cursor input, html.has-custom-cursor textarea, html.has-custom-cursor select {
      cursor: none;
    }
  }
  html.has-custom-cursor .cursor-ring.is-hover { width: 56px; height: 56px; border-width: 1px; }
  html.has-custom-cursor .cursor-ring.is-down { width: 30px; height: 30px; }
  html.has-custom-cursor .cursor-ring.is-hidden,
  html.has-custom-cursor .cursor-dot.is-hidden { opacity: 0 !important; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .cursor-dot, .cursor-ring { display: none !important; }
  }
}

/* =============================================================================
   THEME TOGGLE + DARK-MODE OVERRIDES (unlayered on purpose — wins over the
   @layers above). Tokens do most of the work; this block only covers the few
   hard-coded light surfaces, the logo, embeds and the toggle itself.
   ========================================================================== */
.brand__logo--dark { display: none; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand-400); }
.theme-toggle svg { width: 20px; height: 20px; }
@media (max-width: 599.98px) { .header-actions .theme-toggle { display: none; } }  /* phones: it lives in the menu drawer */
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline-grid; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

:root[data-theme="dark"] {
  /* swap to the white logo (light/dark variants are both in the markup) */
  & .brand__logo--light { display: none; }
  & .brand__logo--dark { display: block; }
  /* light "glass" chips over photos */
  & .hp-story__chip, & .hp-dept__card-badge, & .hp-doc-card__exp, & .hp-social-card__badge,
  & .hp-contact__pin-chip, & .hp-social-card__type { background: rgba(21, 26, 51, 0.92); border-color: rgba(255, 255, 255, 0.12); }
  /* third-party map embeds are always light — invert to match */
  & iframe[src*="google.com/maps"] { filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(0.95); }
  /* photos read slightly hot on a dark page */
  & img:not(.brand__logo) { filter: brightness(0.94); }
}

/* =============================================================================
   HEADER FIT — the desktop nav + location selector + theme toggle (+ Book button)
   used to overflow the bar between 1024px and ~1440px. Tighter link padding in
   that range, and the header "Book appointment" only appears once there is room
   (the hero and quick-actions already carry the CTA on narrower screens).
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .nav-desktop__link { padding: 0.7em 0.55em; }
  .site-header__bar { gap: var(--space-m); }
  .header-actions { gap: var(--space-2xs); }
}
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .header-actions .hide-sm { display: none; }
}
/* 1024–1199px: the full nav can't fit beside the logo + centre selector + toggle,
   so keep the hamburger drawer until 1200px. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-grid; }
  .nav-mobile { display: flex; }
  .header-actions { margin-left: auto; }
}
/* very narrow phones (<360px, e.g. iPhone SE 1st-gen / budget Android): the
   logo + gap + location pill + hamburger no longer fit the bar and pushed the
   whole page into horizontal scroll (client report, 2026-10 — "doctor detail
   and other page[s]"). Shrink the two things that have slack instead of
   letting anything clip or scroll off-screen. */
@media (max-width: 359.98px) {
  .brand__logo { height: 36px; }
  .site-header__bar { gap: var(--space-xs); }
  .header-actions { gap: var(--space-3xs); }
  .loc-select__btn { padding-inline: 0.65em; }
}

/* Contact page — social presence boxes (Instagram / Facebook / YouTube) */
.ct-social__head { max-width: 40rem; margin-bottom: var(--space-xl); }
.ct-social__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 720px) { .ct-social__grid { grid-template-columns: repeat(3, 1fr); } }
.ct-social__box { text-decoration: none; }
.ct-social__box .ct-card__ic { color: #fff; }
.ct-social__box--instagram .ct-card__ic { background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 70%, #515bd4); }
.ct-social__box--facebook .ct-card__ic { background: #1877f2; }
.ct-social__box--youtube .ct-card__ic { background: #e00000; }
.ct-social__box:hover .ct-card__ic { color: #fff; }
.ct-social__box--instagram:hover .ct-card__ic { background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 70%, #515bd4); }
.ct-social__box--facebook:hover .ct-card__ic { background: #1877f2; }
.ct-social__box--youtube:hover .ct-card__ic { background: #e00000; }

/* =============================================================================
   ALLERGY-TEST CARD v2 (checkup_column.html) + TEST PAGE (checkup_detail.html)
   Picture-led card: image on top, body below. Unlayered so it wins over the older
   text-only card rules in @layer components.
   ========================================================================== */
.checkup-col { padding: 0; overflow: clip; gap: 0; }
.checkup-col__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--brand-tint-2); overflow: clip; }
.checkup-col__img { width: 100%; height: 100%; border-radius: 0; }
.checkup-col__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.checkup-col:hover .checkup-col__img img { transform: scale(1.05); }
.checkup-col__chip {
  position: absolute; left: var(--space-s); top: var(--space-s);
  padding: 0.3em 0.8em; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95); color: #2E3E9C; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: var(--shadow-1);
}
.checkup-col__body { display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1 1 auto; padding: var(--space-m); }
.checkup-col__name { margin: 0; min-height: 0; }
.checkup-col__name a { color: inherit; text-decoration: none; }
.checkup-col__name a:hover { color: var(--brand-ink); }
.checkup-col__who {
  margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.checkup-col__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-s); }
.checkup-col__link {
  display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs--1); font-weight: 700;
  color: var(--brand-ink); text-decoration: none; white-space: nowrap;
}
.checkup-col__link svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
.checkup-col__link:hover svg { transform: translateX(3px); }
.checkup-col__actions .checkup-col__cta { margin-top: 0; padding: 0.65em 1.2em; flex: none; }

.td-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .td-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-2xl); } }
.td-hero__cat { display: inline-block; padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-ink); font-size: var(--fs--1); font-weight: 700; margin-bottom: var(--space-s); }
.td-hero__title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); line-height: 1.12; margin: 0 0 var(--space-s); text-wrap: balance; }
.td-hero__lead { color: var(--ink-2); font-size: var(--fs-1); line-height: 1.65; max-width: 60ch; margin: 0 0 var(--space-m); }
.td-hero__meta { display: inline-flex; align-items: center; gap: 0.45em; color: var(--muted); font-size: var(--fs--1); margin-bottom: var(--space-m); }
.td-hero__meta svg { width: 16px; height: 16px; color: var(--teal-ink); }
.td-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.td-hero__media { margin: 0; border-radius: var(--radius-l); overflow: clip; box-shadow: var(--shadow-3); border: 1px solid var(--line); background: var(--brand-tint-2); aspect-ratio: 3 / 2; }
.td-hero__media .image-slot, .td-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.td-about__grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; }
@media (min-width: 900px) { .td-about__grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.td-about__text { color: var(--ink-2); font-size: var(--fs-1); line-height: 1.75; max-width: 68ch; }
.td-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); counter-reset: s; }
.td-steps li { counter-increment: s; display: flex; gap: var(--space-xs); align-items: flex-start; color: var(--ink-2); }
.td-steps li::before { content: counter(s); flex: none; 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; }
.td-aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-l); box-shadow: var(--shadow-2); display: grid; gap: var(--space-xs); }
.td-aside h3 { margin: 0 0 var(--space-3xs); font-size: var(--fs-1); }
.td-aside p { margin: 0; color: var(--muted); font-size: var(--fs--1); }
.td-related__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 640px) { .td-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .td-related__grid { grid-template-columns: repeat(3, 1fr); } }
.td-related__grid > .checkup-col { height: 100%; }

/* =============================================================================
   SEARCH (templates/public/search.html — SearchView, 2026-09, replaces the
   "Coming soon" stub) — new "sr-" banner/results classes, reusing the "dp-"
   section scale + .dp-chip / .dp-search / .dp-empty and each content type's
   own existing card + grid (dr-/dp-/tx-/hc-/bl-). Unlayered, like the rest of
   the post-Phase-4 additions in this file, so it always wins.
   ========================================================================== */
.sr-banner { overflow: clip; }
.sr-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%);
}
.sr-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%);
}
.sr-banner__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.sr-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;
}
.sr-banner__lead { margin: 0 0 var(--space-l); font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.sr-banner__scope {
  display: inline-flex; align-items: center; gap: 0.5em; margin: var(--space-m) 0 0;
  font-size: var(--fs--1); color: var(--ink-2);
}
.sr-banner__scope svg { width: 15px; height: 15px; color: var(--brand-ink); flex: none; }
.sr-banner__scope strong { color: var(--ink); }
.sr-banner__scope a { color: var(--brand-ink); font-weight: 600; }
.sr-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: stretch; width: 100%; max-width: 42rem; }
.sr-form__input { flex: 1 1 260px; }
.sr-form__suggest { margin-top: var(--space-m); align-items: center; }
.sr-form__suggest-label { font-size: var(--fs--1); color: var(--muted); font-weight: 600; }
.sr-results__count { margin: 0 0 var(--space-l); color: var(--ink-2); font-size: var(--fs-1); }
.sr-results__group { margin-bottom: var(--space-2xl); }
.sr-results__group:last-child { margin-bottom: 0; }
.sr-results__heading {
  display: flex; align-items: center; gap: 0.6em; margin: 0 0 var(--space-m);
  font-size: var(--fs-2); font-weight: 700; color: var(--ink);
}
.sr-results__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0.1em 0.5em;
  border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-ink);
  font-size: var(--fs--1); font-weight: 700;
}
@media (max-width: 599.98px) { .sr-form { flex-direction: column; } }