/* =========================================================================
   St. Joseph's Hospital (Cluny) — public website design system
   -------------------------------------------------------------------------
   One reusable token layer drives every page. The brand colours
   (--brand, --brand-2, --accent, --gold) are injected by _Layout from
   WEB_SITE_SETTINGS, so the whole palette stays editable from the Admin
   panel without a deploy.

   Typography: Fraunces (display serif, heritage + authority) paired with
   Inter (interface + body). Serif is reserved for headings so body copy
   stays effortless for patients of every age.
   ========================================================================= */

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
    /* Brand — overridden inline by the layout from WEB_SITE_SETTINGS, so the
       palette stays editable from Admin > Settings without a deploy. */
    --brand: #146CDC;
    --brand-2: #0B4FA6;
    --navy: #071A35;
    --accent: #62B22F;
    --gold: #C8A44D;

    /* Derived brand tints, so components never hard-code a blend */
    --brand-04: color-mix(in srgb, var(--brand) 4%, white);
    --brand-08: color-mix(in srgb, var(--brand) 8%, white);
    --brand-12: color-mix(in srgb, var(--brand) 12%, white);
    --brand-deep: color-mix(in srgb, var(--brand-2) 34%, var(--navy));

    /* Ink */
    --ink: #172B4D;
    --ink-2: #4A5A75;
    --ink-3: #667085;

    /* Surfaces */
    --surface: #FFFFFF;
    --surface-2: #F6F9FD;
    --surface-3: #EDF3FB;
    --line: #E7EDF5;
    --line-2: #D6E0EE;

    /* Typography — Playfair Display for headings, Inter for everything a
       patient has to read. Both are self-hosted; see css/fonts.css. */
    --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* A restrained scale: the display size is reserved for the hero, and no
       section heading is allowed to shout louder than the one above it. */
    --fs-display: clamp(2.35rem, 1.5rem + 3.4vw, 3.9rem);
    --fs-h1: clamp(1.95rem, 1.45rem + 2vw, 2.85rem);
    --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
    --fs-h3: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
    --fs-h4: clamp(1.02rem, .98rem + .22vw, 1.12rem);
    --fs-body: clamp(1rem, .975rem + .1vw, 1.0625rem);
    --fs-sm: .9375rem;
    --fs-xs: .8125rem;
    --fs-2xs: .75rem;
    --tracking-eyebrow: .14em;

    /* Radius */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Elevation — layered and low-opacity; premium is soft, not heavy */
    --shadow-xs: 0 1px 2px rgba(7, 26, 53, .05);
    --shadow-sm: 0 2px 4px rgba(7, 26, 53, .04), 0 6px 14px rgba(7, 26, 53, .05);
    --shadow: 0 4px 10px rgba(7, 26, 53, .05), 0 14px 32px rgba(7, 26, 53, .07);
    --shadow-lg: 0 8px 20px rgba(7, 26, 53, .07), 0 26px 58px rgba(7, 26, 53, .11);
    --shadow-xl: 0 12px 28px rgba(7, 26, 53, .08), 0 44px 92px rgba(7, 26, 53, .15);
    --shadow-brand: 0 10px 26px color-mix(in srgb, var(--brand) 26%, transparent);

    /* Motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .18s;
    --t: .3s;
    --t-slow: .6s;

    /* Layout rhythm */
    --header-h: 98px;
    --section-y: clamp(3.5rem, 6.5vw, 6.5rem);
    --gutter: clamp(1rem, 4vw, 2rem);
}

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

html {
    scroll-behavior: smooth;
    /* Anchors land below the sticky header instead of under it */
    scroll-padding-top: calc(var(--header-h) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ink);
    background: var(--surface);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ---------- Page Loader ------------------------------------------------- */
.page-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: #fff;
    display: grid; place-items: center;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.page-loader.is-loaded {
    opacity: 0; visibility: hidden;
}
.loader-content {
    position: relative;
    display: grid; place-items: center;
}
.loader-logo {
    position: relative; z-index: 2;
    height: 80px; width: auto;
    animation: pulse-logo 2s infinite ease-in-out;
}
.loader-ripple {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    background: color-mix(in srgb, var(--brand) 15%, transparent);
    border-radius: 50%;
    z-index: 1;
    animation: ripple-pulse 2s infinite ease-out;
}

@keyframes pulse-logo {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}
@keyframes ripple-pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.012em;
    color: var(--ink);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1.15rem; }

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--ease-soft); }
a:hover { color: var(--brand-2); }

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

strong, b { font-weight: 600; }

.container { max-width: 1280px; padding-inline: var(--gutter); }
.container-narrow { max-width: 880px; margin-inline: auto; }

/* An underline that draws in from the left — used on editorial links */
.link-underline {
    position: relative;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t) var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: var(--brand);
    color: #fff;
    padding: .85rem 1.5rem;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 55%, white);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--brand) 16%, white); color: var(--ink); }

/* ---------- 2. Scroll reveal ------------------------------------------- */
/* Applied by site.js only when JS + motion are available, so content is
   never hidden from a no-JS or reduced-motion visitor. */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    /* No will-change here on purpose: a page can hold forty of these at once,
       and promoting them all costs far more than the hint saves. */
}
.js-reveal [data-reveal="left"] { transform: translate3d(-26px, 0, 0); }
.js-reveal [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
.js-reveal [data-reveal="scale"] { transform: scale(.96); }
.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- 3. Buttons -------------------------------------------------- */
.btn {
    --btn-y: .72rem;
    --btn-x: 1.5rem;
    font-family: var(--font-body);
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .005em;
    padding: var(--btn-y) var(--btn-x);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-soft),
                box-shadow var(--t) var(--ease),
                background-color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft),
                color var(--t-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* A slow sheen sweeps the primary button on hover — the only "shine" on
   the site, and it is off for reduced motion. */
.btn-brand {
    background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-brand::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
    transition: left .7s var(--ease);
}
.btn-brand:hover, .btn-brand:focus { color: #fff; box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 38%, transparent); }
.btn-brand:hover::after { left: 115%; }

.btn-outline-brand { border-color: color-mix(in srgb, var(--brand) 42%, white); color: var(--brand); background: transparent; }
.btn-outline-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }

.btn-light-brand { background: var(--brand-08); color: var(--brand); }
.btn-light-brand:hover { background: var(--brand-12); color: var(--brand); }

.btn-ghost-white {
    border-color: rgba(255,255,255,.5);
    color: #fff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
}
.btn-ghost-white:hover { background: #fff; color: var(--brand-2); border-color: #fff; }

.btn-gold { background: var(--gold); color: #24200f; box-shadow: 0 10px 26px color-mix(in srgb, var(--gold) 34%, transparent); }
.btn-gold:hover { background: color-mix(in srgb, var(--gold) 88%, black); color: #24200f; }

.btn-lg { --btn-y: .95rem; --btn-x: 2rem; font-size: 1rem; }
.btn-sm { --btn-y: .5rem; --btn-x: 1.1rem; font-size: var(--fs-xs); }

/* Arrow nudge inside any button/link that carries one */
.btn i.bi-arrow-right, .tile-link i { transition: transform var(--t) var(--ease); }
.btn:hover i.bi-arrow-right { transform: translateX(4px); }

/* ---------- 4. Top bar -------------------------------------------------- */
/* Visibility is handled here rather than with Bootstrap's d-none/d-lg-block
   utilities: those carry !important, which silently beat the rule that hides
   this bar once the navigation pins, leaving it stranded over the page. */
.topbar {
    display: none;
    background: var(--navy);
    color: rgba(255,255,255,.7);
    font-size: var(--fs-xs);
    letter-spacing: .01em;
    padding: .6rem 0;
    position: relative;
    z-index: 1035;
}
@media (min-width: 992px) {
    .topbar { display: block; }
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.topbar a { color: rgba(255,255,255,.7); }
.topbar a:hover { color: #fff; }

.topbar-list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.topbar-list i { margin-right: .45rem; color: var(--gold); }

.topbar-right { display: flex; align-items: center; gap: 1rem; }

.topbar-social { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.topbar-social a {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.topbar-social a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-social i { font-size: .95rem; }

.topbar-emergency {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    padding: .34rem .95rem;
    border-radius: 999px;
    transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.topbar-emergency:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.topbar-emergency strong { font-weight: 700; color: #fff; letter-spacing: .01em; }

/* A slow, single pulse — a hospital should signal availability, not alarm */
.topbar-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: #FF6B75;
    box-shadow: 0 0 0 0 rgba(255,107,117,.6);
    animation: emergencyPulse 2.8s var(--ease-soft) infinite;
}
@keyframes emergencyPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,107,117,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(255,107,117,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,117,0); }
}

/* ---------- 5. Header --------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: background var(--t) var(--ease-soft),
                box-shadow var(--t) var(--ease-soft),
                border-color var(--t) var(--ease-soft);
}
.site-header.is-stuck {
    box-shadow: var(--shadow);
    background: rgba(255,255,255,.97);
}

/* The bar needs more room than the 1280px reading container: the brand, nine
   menu items and the booking button together need about 1200px of content
   width. Constraining it to the text container is what made the menu overlap
   the hospital name on every screen wider than 1400px. */
.nav-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-h);
    padding-block: .6rem;
    max-width: 1480px;
    transition: min-height var(--t) var(--ease-soft);
}
.site-header.is-stuck .nav-bar { min-height: 68px; }

/* Shown only when the full menu genuinely fits; below that the drawer takes
   over. See the 1280px breakpoint in section 24. The icon-button selector is
   repeated with its own class because `.nav-icon-btn` is declared further
   down and would otherwise win on source order. */
.nav-desktop-only,
.nav-icon-btn.nav-desktop-only { display: none; }
.nav-mobile-only { display: inline-grid; }

.navbar-brand { display: flex; align-items: center; gap: .85rem; padding: 0; flex: 0 1 auto; min-width: 0; }
.brand-logo { height: 72px; width: auto; transition: height var(--t) var(--ease-soft); }
.site-header.is-stuck .brand-logo { height: 60px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.14rem;
    color: var(--ink);
    letter-spacing: -.01em;
    transition: color var(--t) var(--ease-soft);
}
.brand-tagline {
    font-size: .68rem;
    color: var(--ink-3);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    transition: color var(--t) var(--ease-soft);
}

/* --- Desktop menu --- */
.nav-main { flex: 1 1 auto; justify-content: center; min-width: 0; }
.nav-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.nav-item { position: relative; }

.nav-link, .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    background: none;
    border: 0;
    padding: .6rem .62rem;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: color var(--t-fast) var(--ease-soft);
}
.nav-link:hover, .nav-toggle:hover,
.nav-link.is-current, .nav-toggle.is-current { color: var(--brand); }
.nav-link.is-current, .nav-toggle.is-current { font-weight: 600; }

/* The active marker grows out from the centre rather than snapping in */
.nav-link::after, .nav-toggle::after {
    content: "";
    position: absolute;
    left: .62rem; right: .62rem; bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform var(--t) var(--ease);
}
.nav-link:hover::after, .nav-toggle:hover::after,
.nav-link.is-current::after, .nav-toggle.is-current::after { transform: scaleX(1); }

.nav-toggle i { font-size: .7rem; transition: transform var(--t) var(--ease); }
.nav-item.is-open .nav-toggle i { transform: rotate(180deg); }

/* --- Dropdown and mega panel --- */
.nav-panel {
    position: absolute;
    top: calc(100% + .1rem);
    left: 0;
    z-index: 40;
    padding-top: .65rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease), visibility var(--t);
}
.nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-panel-inner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .65rem;
    min-width: 17rem;
}
.nav-panel-list { list-style: none; margin: 0; padding: 0; }

.nav-panel-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .7rem;
    border-radius: var(--radius-xs);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.nav-panel-link:hover, .nav-panel-link.is-current { background: var(--surface-2); color: var(--brand); }
.nav-panel-icon {
    flex: 0 0 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-08);
    color: var(--brand);
    font-size: .95rem;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.nav-panel-link:hover .nav-panel-icon { background: var(--brand); color: #fff; }
.nav-panel-text { flex: 1; min-width: 0; }
.nav-panel-arrow {
    font-size: .8rem; color: var(--brand);
    opacity: 0; transform: translateX(-4px);
    transition: opacity var(--t-fast) var(--ease-soft), transform var(--t) var(--ease);
}
.nav-panel-link:hover .nav-panel-arrow { opacity: 1; transform: translateX(0); }

/* Mega panel: two columns of links plus a supporting block */
.nav-panel-mega { left: 50%; transform: translate(-50%, -8px); }
.nav-item.is-open > .nav-panel-mega { transform: translate(-50%, 0); }
.nav-panel-mega .nav-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: .5rem;
    width: min(46rem, calc(100vw - 3rem));
    padding: 1rem;
}
.nav-panel-mega .nav-panel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .15rem;
    align-content: start;
}
.nav-panel-aside {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}
.nav-panel-aside-text { font-size: var(--fs-xs); color: var(--ink-2); margin: 0 0 .75rem; }

/* --- Actions --- */
.nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex: 0 0 auto; }

.nav-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink-2);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft);
}
.nav-icon-btn:hover { background: var(--brand-08); color: var(--brand); border-color: var(--brand); }

.nav-burger { display: grid; gap: 4px; width: 18px; }
.nav-burger span {
    display: block; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform var(--t) var(--ease), opacity var(--t-fast);
}

/* --- Slide-down search --- */
.site-search {
    border-top: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}
.site-search[hidden] { display: none; }
.site-search-form {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0;
}
.site-search-form > .bi-search { color: var(--ink-3); font-size: 1.15rem; }
.site-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ink);
    padding: .4rem 0;
}
.site-search-input:focus { outline: none; }
.site-search-input::placeholder { color: var(--ink-3); }

/* --- Overlay mode (home page) ---
   The utility bar and navigation float over the hero, then a slim solid bar
   slides down once the visitor has scrolled past the first screen. */
/* The wrapper exists only so overlay mode can lift the whole bar over the
   hero. On every other page it must NOT generate a box: a sticky header can
   only stick inside its parent, and this wrapper is about 140px tall, so a
   box here would let the navigation scroll away after a few pixels.
   display:contents removes the box and leaves the header sticky to the page. */
.site-top { display: contents; }

.site-top.is-overlay {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1030;
}
.site-top.is-overlay .topbar {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.72);
}
.site-top.is-overlay .site-header {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}
.site-top.is-overlay .brand-name { color: #fff; }
.site-top.is-overlay .brand-tagline { color: rgba(255,255,255,.66); }
.site-top.is-overlay .nav-link,
.site-top.is-overlay .nav-toggle { color: rgba(255,255,255,.85); }
.site-top.is-overlay .nav-link:hover,
.site-top.is-overlay .nav-toggle:hover,
.site-top.is-overlay .nav-link.is-current,
.site-top.is-overlay .nav-toggle.is-current { color: #fff; }
.site-top.is-overlay .nav-link::after,
.site-top.is-overlay .nav-toggle::after { background: var(--gold); }
.site-top.is-overlay .nav-icon-btn { color: #fff; border-color: rgba(255,255,255,.3); }
.site-top.is-overlay .nav-icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.site-top.is-overlay .brand-logo-dark { display: none; }
.site-top.is-overlay .brand-logo-light { display: block; }
.brand-logo-light { display: none; }

/* Pinned: out of the hero, back to a clean solid bar. The utility bar is
   dropped so the pinned state stays slim. */
.site-top.is-overlay.is-pinned {
    position: fixed;
    inset: 0 0 auto 0;
    animation: barDrop .45s var(--ease) both;
}
.site-top.is-overlay.is-pinned .topbar { display: none; }
.site-top.is-overlay.is-pinned .site-header {
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow);
}
.site-top.is-overlay.is-pinned .nav-bar { min-height: 68px; }
.site-top.is-overlay.is-pinned .brand-name { color: var(--ink); }
.site-top.is-overlay.is-pinned .brand-tagline { color: var(--ink-3); }
.site-top.is-overlay.is-pinned .nav-link,
.site-top.is-overlay.is-pinned .nav-toggle { color: var(--ink-2); }
.site-top.is-overlay.is-pinned .nav-link:hover,
.site-top.is-overlay.is-pinned .nav-toggle:hover,
.site-top.is-overlay.is-pinned .nav-link.is-current,
.site-top.is-overlay.is-pinned .nav-toggle.is-current { color: var(--brand); }
.site-top.is-overlay.is-pinned .nav-link::after,
.site-top.is-overlay.is-pinned .nav-toggle::after { background: var(--brand); }
.site-top.is-overlay.is-pinned .nav-icon-btn { color: var(--ink-2); border-color: var(--line-2); }
.site-top.is-overlay.is-pinned .brand-logo-dark { display: block; }
.site-top.is-overlay.is-pinned .brand-logo-light { display: none; }
.site-top.is-overlay.is-pinned .brand-logo { height: 60px; }

@keyframes barDrop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* --- Full-screen mobile drawer --- */
.nav-drawer { position: fixed; inset: 0; z-index: 1200; }
.nav-drawer[hidden] { display: none; }

.nav-drawer-scrim {
    position: absolute; inset: 0;
    background: rgba(7, 26, 53, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--t) var(--ease-soft);
}
.nav-drawer.is-open .nav-drawer-scrim { opacity: 1; }

.nav-drawer-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(26rem, 100%);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    transition: transform .38s var(--ease);
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem var(--gutter);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}
.nav-drawer-head .brand-logo { height: 52px; }
.nav-drawer-head .brand-name { font-size: .98rem; }

.nav-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem var(--gutter); }

.drawer-search {
    display: flex; align-items: center; gap: .65rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .7rem 1.1rem;
    margin-bottom: 1.25rem;
}
.drawer-search i { color: var(--ink-3); }
.drawer-search input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink);
}
.drawer-search input:focus { outline: none; }

.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-item { border-bottom: 1px solid var(--line); }

.drawer-link {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%;
    padding: 1rem .25rem;
    background: none; border: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.drawer-link i { font-size: .85rem; color: var(--ink-3); transition: transform var(--t) var(--ease), color var(--t-fast); }
.drawer-link:hover, .drawer-link.is-current { color: var(--brand); }
.drawer-link:hover i { color: var(--brand); }
.drawer-item.is-open > .drawer-toggle i { transform: rotate(180deg); color: var(--brand); }

/* Height is animated from script so the list can grow with its content */
.drawer-sublist {
    list-style: none; margin: 0; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease);
}
.drawer-item.is-open > .drawer-sublist { max-height: 30rem; }
.drawer-sublink {
    display: flex; align-items: center; gap: .65rem;
    padding: .7rem .25rem .7rem 1rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}
.drawer-sublink i { color: var(--brand); font-size: .9rem; }
.drawer-sublink:hover, .drawer-sublink.is-current { color: var(--brand); }
.drawer-sublist li:last-child .drawer-sublink { padding-bottom: 1rem; }

.nav-drawer-foot {
    flex: 0 0 auto;
    padding: 1.15rem var(--gutter) calc(1.15rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.drawer-contact { display: grid; gap: .5rem; margin-top: .9rem; }
.drawer-contact-item {
    display: flex; align-items: center; gap: .75rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}
.drawer-contact-item i { color: var(--brand); font-size: 1.1rem; }
.drawer-contact-item.is-emergency { color: #B3261E; }
.drawer-contact-item.is-emergency i { color: #B3261E; }
.drawer-contact-label {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
}

/* The page behind the drawer must not scroll with it */
body.is-drawer-open { overflow: hidden; }

/* ---------- 6. Notice ticker -------------------------------------------- */
.notice-ticker {
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-xs);
    padding: .55rem 0;
}
.ticker-label {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; color: var(--brand); white-space: nowrap;
    text-transform: uppercase; letter-spacing: .08em;
}
.ticker-viewport {
    flex: 1;
    overflow: hidden;
    /* Items fade out at both edges instead of clipping hard */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticker-track { display: flex; gap: 3rem; white-space: nowrap; animation: ticker 48s linear infinite; }
.notice-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { color: var(--ink-2); }
.ticker-item:hover { color: var(--brand); }
.ticker-item.is-important { color: #A62230; font-weight: 600; }
.ticker-all { white-space: nowrap; font-weight: 600; }

@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- 7. Inner page header ---------------------------------------- */
.page-header {
    position: relative;
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 4.5vw, 4rem);
    background: var(--navy);
    color: #fff;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* A single soft bloom keeps the band from reading as a flat colour block */
.page-header::after {
    content: "";
    position: absolute;
    top: -55%; right: -8%;
    width: 44rem; height: 44rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 62%, transparent) 0%, transparent 64%);
    pointer-events: none;
}
/* The scrim over an uploaded banner. Two layers: a directional wash that keeps
   the headline side dark, and a floor gradient so the breadcrumb and any CTA
   stay legible no matter how bright the photograph is. */
.page-header.has-image::before {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(112deg, rgba(7,26,53,.94) 0%, rgba(7,26,53,.8) 46%, rgba(7,26,53,.5) 100%),
        linear-gradient(0deg, rgba(7,26,53,.55) 0%, transparent 46%);
}

/* The banner image itself sits behind the scrim. */
.page-header-media {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
}
.page-header-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* A banner is taller than the plain gradient band, so the imagery has room. */
.page-header.has-image {
    padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(3rem, 5.5vw, 4.5rem);
}
.page-header.has-image::after { display: none; }

/* When the page header is used just to display a baked-in image banner,
   it shouldn't crop the image or darken it with a scrim. */
.page-header.is-image-only {
    padding: 0;
}
.page-header.is-image-only::before {
    display: none;
}
.page-header.is-image-only .page-header-media {
    position: static;
}
.page-header.is-image-only .page-header-media img {
    height: auto;
    object-fit: contain;
}

.page-header-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--gold);
    margin-bottom: .6rem;
}
.page-header-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }

.page-header-cta { margin-top: 1.5rem; }

/* The title and standfirst lift in, matching the hero's entrance. */
.page-header-title, .page-header-subtitle, .page-header-eyebrow, .page-header-cta {
    animation: pageHeaderRise .8s var(--ease) both;
}
.page-header-eyebrow  { animation-delay: .05s; }
.page-header-title    { animation-delay: .12s; }
.page-header-subtitle { animation-delay: .2s; }
.page-header-cta      { animation-delay: .28s; }

@keyframes pageHeaderRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-header-title, .page-header-subtitle,
    .page-header-eyebrow, .page-header-cta { animation: none; }
}
/* Fine diagonal rules, barely visible, purely to give the band some texture */
.page-header-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: repeating-linear-gradient(
        115deg,
        rgba(255,255,255,.04) 0px,
        rgba(255,255,255,.04) 1px,
        transparent 1px,
        transparent 14px);
    -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
    pointer-events: none;
}
.page-header.has-image .page-header-pattern { display: none; }

.page-header > .container { position: relative; z-index: 2; }
.page-header-title { color: #fff; font-size: var(--fs-h1); margin: 0; max-width: 20ch; }
.page-header-subtitle { color: rgba(255,255,255,.76); margin: .9rem 0 0; max-width: 60ch; font-size: var(--fs-body); }

.page-header .breadcrumb { margin-bottom: 1rem; font-size: var(--fs-xs); letter-spacing: .01em; }
.page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: rgba(255,255,255,.62); }
.page-header .breadcrumb-item a:hover { color: #fff; }
.page-header .breadcrumb-item.active { color: var(--gold); font-weight: 600; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* ---------- 8. Sections ------------------------------------------------- */
.section { padding: var(--section-y) 0; position: relative; }
.section-tint { background: var(--surface-2); }
.section-navy {
    background: var(--navy);
    color: rgba(255,255,255,.78);
    position: relative;
    overflow: hidden;
}
.section-brand {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.section-brand::before, .section-navy::before {
    content: "";
    position: absolute;
    left: -6%; bottom: -60%;
    width: 46rem; height: 46rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 52%, transparent) 0%, transparent 66%);
    pointer-events: none;
}
.section-brand > .container, .section-navy > .container { position: relative; z-index: 2; }
.section-brand h2, .section-brand h3,
.section-navy h2, .section-navy h3 { color: #fff; }

.section-head { max-width: 58ch; margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }

/* A head that puts the copy left and an action right, at wide sizes */
.section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .85rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.section-head.is-centered .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold); }
.section-brand .eyebrow, .section-navy .eyebrow { color: var(--gold); }
.section-brand .eyebrow::before, .section-brand .eyebrow::after,
.section-navy .eyebrow::before, .section-navy .eyebrow::after { background: rgba(255,255,255,.32); }

.section-title { font-size: var(--fs-h2); margin: 0; }
.section-lead { color: var(--ink-2); margin: 1rem 0 0; font-size: var(--fs-body); }
.section-brand .section-lead, .section-navy .section-lead { color: rgba(255,255,255,.74); }

/* ---------- 9. Hero ----------------------------------------------------- */
.hero { position: relative; background: var(--navy); }
.hero .carousel-item { height: clamp(580px, 92vh, 860px); }
.hero-slide { position: relative; height: 100%; overflow: hidden; }

/* A real <picture>, so the admin's separate mobile crop is honoured */
.hero-media { position: absolute; inset: 0; display: block; }
.hero-media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    /* Slow drift adds depth without reading as animation */
    animation: kenburns 24s var(--ease-soft) infinite alternate;
}
.hero-slide::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(94deg, rgba(7,26,53,.94) 0%, rgba(7,26,53,.78) 36%, rgba(7,26,53,.3) 70%, rgba(7,26,53,.46) 100%),
        linear-gradient(0deg, rgba(7,26,53,.6) 0%, transparent 34%);
}
@keyframes kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.hero-content { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.hero-inner {
    max-width: 46rem;
    color: #fff;
    padding: calc(var(--header-h) + 2.5rem) 0 5rem;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: .42rem 1.1rem .42rem .85rem;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.4rem;
}
.hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 26%, transparent);
}
.hero-title {
    color: #fff;
    font-size: var(--fs-display);
    letter-spacing: -.018em;
    line-height: 1.08;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.hero-text {
    color: rgba(255,255,255,.8);
    font-size: clamp(1rem, .95rem + .35vw, 1.13rem);
    max-width: 46ch;
    margin: 0 0 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Copy lifts in as each slide becomes active */
.hero .carousel-item .hero-eyebrow,
.hero .carousel-item .hero-title,
.hero .carousel-item .hero-text,
.hero .carousel-item .hero-actions { opacity: 0; transform: translateY(24px); }
.hero .carousel-item.active .hero-eyebrow,
.hero .carousel-item.active .hero-title,
.hero .carousel-item.active .hero-text,
.hero .carousel-item.active .hero-actions {
    animation: heroRise .9s var(--ease) forwards;
}
.hero .carousel-item.active .hero-eyebrow { animation-delay: .15s; }
.hero .carousel-item.active .hero-title   { animation-delay: .28s; }
.hero .carousel-item.active .hero-text    { animation-delay: .42s; }
.hero .carousel-item.active .hero-actions { animation-delay: .54s; }

@keyframes heroRise {
    to { opacity: 1; transform: translateY(0); }
}

.hero .carousel-indicators { margin-bottom: 2.25rem; gap: .5rem; }
.hero .carousel-indicators [data-bs-target] {
    width: 40px; height: 3px; border-radius: 3px;
    background: rgba(255,255,255,.3); border: 0; opacity: 1;
    transition: background var(--t) var(--ease-soft), width var(--t) var(--ease-soft);
}
.hero .carousel-indicators .active { background: var(--gold); width: 60px; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 5%; opacity: 0; transition: opacity var(--t) var(--ease-soft); }
.hero:hover .carousel-control-prev, .hero:hover .carousel-control-next { opacity: .55; }
.hero .carousel-control-prev:hover, .hero .carousel-control-next:hover { opacity: 1; }

/* A doctor search sitting inside the hero, so the first thing a visitor can
   do is the thing most of them came for. */
.hero-finder {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.96);
    border-radius: 999px;
    padding: .4rem .4rem .4rem 1.25rem;
    box-shadow: var(--shadow-xl);
    max-width: 30rem;
    margin-top: 2rem;
}
.hero-finder i { color: var(--ink-3); font-size: 1.05rem; }
.hero-finder input {
    flex: 1; min-width: 0;
    border: 0; background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink);
    padding: .65rem .25rem;
}
.hero-finder input:focus { outline: none; }

/* Heritage mark anchored to the hero's lower right */
.hero-crest {
    position: absolute;
    right: var(--gutter); bottom: 2.25rem;
    z-index: 3;
    display: flex; align-items: center; gap: .7rem;
    color: rgba(255,255,255,.58);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: 600;
}
.hero-crest::before { content: ""; width: 42px; height: 1px; background: rgba(255,255,255,.32); }

/* ---------- 9b. Quick patient actions ----------------------------------- */
.quick-strip { margin-top: -3.5rem; position: relative; z-index: 5; }

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}
.quick-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.5rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    overflow: hidden;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.quick-tile::after {
    content: "";
    position: absolute; inset: auto 0 0 0;
    height: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t) var(--ease);
}
a.quick-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
    color: var(--ink);
}
a.quick-tile:hover::after { transform: scaleX(1); }

.quick-tile-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--brand-08);
    color: var(--brand);
    font-size: 1.25rem;
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
a.quick-tile:hover .quick-tile-icon { background: var(--brand); color: #fff; }
.quick-tile.is-emergency .quick-tile-icon { background: #FDECEC; color: #B3261E; }
a.quick-tile.is-emergency:hover .quick-tile-icon { background: #B3261E; color: #fff; }
.quick-tile.is-emergency::after { background: #B3261E; }

.quick-tile-label {
    display: block; font-size: var(--fs-2xs); color: var(--ink-3);
    text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 700;
    margin-bottom: .2rem;
}
.quick-tile-value { display: block; font-weight: 600; line-height: 1.35; font-size: var(--fs-sm); }
.quick-tile-arrow {
    margin-top: auto;
    font-size: .85rem;
    color: var(--brand);
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity var(--t-fast) var(--ease-soft), transform var(--t) var(--ease);
}
a.quick-tile:hover .quick-tile-arrow { opacity: 1; transform: translateX(0); }

/* ---------- 10. Cards --------------------------------------------------- */
.card-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 1.6rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
    display: flex;
    flex-direction: column;
}
.card-tile::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow) var(--ease);
}
.card-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
}
.card-tile:hover::before { transform: scaleX(1); }

.tile-icon {
    width: 54px; height: 54px; border-radius: 15px;
    display: grid; place-items: center;
    font-size: 1.45rem;
    background: var(--brand-08);
    color: var(--brand);
    margin-bottom: 1.2rem;
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft), transform var(--t) var(--ease);
}
.card-tile:hover .tile-icon { background: var(--brand); color: #fff; transform: scale(1.05); }

.tile-title { font-size: var(--fs-h3); margin: 0 0 .55rem; }
.tile-title a { color: inherit; }
.card-tile:hover .tile-title a { color: var(--brand); }
.tile-text { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 1.1rem; flex: 1; }
.tile-link {
    font-weight: 600; font-size: var(--fs-2xs);
    display: inline-flex; align-items: center; gap: .4rem;
    text-transform: uppercase; letter-spacing: .08em;
}
.tile-link i { transition: transform var(--t) var(--ease); }
.card-tile:hover .tile-link i, .card-media:hover .tile-link i { transform: translateX(4px); }

/* Media card — image on top. Used for departments, services, news, facilities. */
.card-media {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card-media:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
}
.card-media-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); display: block; }
.card-media-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card-media:hover .card-media-img img { transform: scale(1.06); }
.card-media-body { padding: 1.5rem 1.55rem 1.65rem; display: flex; flex-direction: column; flex: 1; }

/* Department card — the icon sits over the lower edge of the image */
.card-media-badge {
    position: absolute;
    left: 1.25rem; bottom: -1.4rem;
    width: 52px; height: 52px;
    border-radius: 15px;
    display: grid; place-items: center;
    background: var(--surface);
    color: var(--brand);
    font-size: 1.3rem;
    box-shadow: var(--shadow);
    z-index: 2;
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
.card-media:hover .card-media-badge { background: var(--brand); color: #fff; }
.card-media-body.has-badge { padding-top: 2.4rem; }

.card-media-empty {
    display: grid; place-items: center; height: 100%;
    background: linear-gradient(150deg, var(--surface-3), var(--surface));
}
.card-media-empty i { font-size: 2.75rem; color: color-mix(in srgb, var(--brand) 32%, white); }

.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--brand-08);
    color: var(--brand);
    font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: 999px;
}
.pill-date { background: var(--surface-3); color: var(--ink-2); }
.pill-gold { background: color-mix(in srgb, var(--gold) 16%, white); color: color-mix(in srgb, var(--gold) 74%, black); }

/* ---------- 10b. Editorial blocks --------------------------------------- */
/* Two-column image + copy, with an optional overlapping second image and a
   floating badge. Used by the welcome section and the facilities pages. */
.editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.editorial-media { position: relative; }
.editorial-media-main {
    width: 100%;
    aspect-ratio: 4 / 3.2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.editorial-media-sub {
    position: absolute;
    right: -1.5rem; bottom: -2.5rem;
    width: 46%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 6px solid var(--surface);
    box-shadow: var(--shadow-lg);
}
/* A quiet decorative frame behind the photograph */
.editorial-media::before {
    content: "";
    position: absolute;
    left: -1.25rem; top: -1.25rem;
    width: 58%; height: 58%;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
    border-radius: var(--radius-lg);
    pointer-events: none;
}
.editorial-badge {
    position: absolute;
    left: -1.5rem; bottom: 2rem;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    box-shadow: var(--shadow-xl);
    text-align: center;
}
.editorial-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.85rem;
    line-height: 1;
    color: var(--gold);
}
.editorial-badge span {
    display: block;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: rgba(255,255,255,.7);
    margin-top: .35rem;
}

/* Small feature rows beside editorial copy */
.feature-list { display: grid; gap: 1.1rem; margin: 1.75rem 0; }
.feature-row { display: flex; gap: 1rem; align-items: flex-start; }
.feature-row-icon {
    flex: 0 0 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--brand-08); color: var(--brand);
    font-size: 1.1rem;
}
.feature-row strong { display: block; font-size: var(--fs-sm); margin-bottom: .1rem; }
.feature-row p { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }

/* Alternating full-width media rows, used on the facilities page */
.alt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.alt-row + .alt-row { margin-top: clamp(3rem, 6vw, 5rem); }
.alt-row:nth-child(even) .alt-row-media { order: 2; }
.alt-row-media img, .alt-row-media .card-media-empty {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.alt-row-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.alt-row-media img { transition: transform .9s var(--ease); display: block; }
.alt-row-media:hover img { transform: scale(1.04); }

/* ---------- 11. Doctor cards -------------------------------------------- */
.doctor-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
}
.doctor-photo {
    position: relative;
    aspect-ratio: 4 / 4.3;
    background: linear-gradient(168deg, var(--surface-3), var(--surface));
    display: grid; place-items: center;
    overflow: hidden;
}
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); }
.doctor-card:hover .doctor-photo img { transform: scale(1.04); }
.doctor-initials {
    font-family: var(--font-display);
    font-size: 2.9rem; font-weight: 600;
    color: color-mix(in srgb, var(--brand) 30%, white);
    letter-spacing: .02em;
}
/* Department tag over the photograph */
.doctor-tag {
    position: absolute;
    left: .85rem; top: .85rem;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--brand);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
    max-width: calc(100% - 1.7rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doctor-body { padding: 1.35rem 1.3rem 1.5rem; text-align: center; display: flex; flex-direction: column; flex: 1; }
.doctor-name { font-size: 1.1rem; margin: 0 0 .25rem; }
.doctor-name a { color: inherit; }
.doctor-card:hover .doctor-name a { color: var(--brand); }
.doctor-qual { font-size: var(--fs-xs); color: var(--ink-3); margin: 0 0 .55rem; }
.doctor-spec {
    font-size: var(--fs-2xs); color: var(--brand); font-weight: 700; margin: 0 0 .9rem; flex: 1;
    text-transform: uppercase; letter-spacing: .07em;
}
.doctor-meta {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    font-size: var(--fs-xs); color: var(--ink-2);
    margin: 0 0 1rem;
}
.doctor-meta i { color: var(--gold); }
.doctor-actions { display: flex; gap: .5rem; justify-content: center; }
.doctor-actions .btn { --btn-y: .5rem; --btn-x: 1rem; font-size: var(--fs-xs); flex: 1; }

/* Doctor finder controls */
.finder-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.finder-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .85rem; align-items: end; }
.finder-empty { display: none; }
.finder-empty.is-shown { display: block; }

/* Sticky booking rail on the doctor and department profiles */
.profile-rail { position: sticky; top: calc(var(--header-h) + 1.25rem); }

.booking-card {
    background: var(--navy);
    color: rgba(255,255,255,.76);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.6rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.booking-card::before {
    content: "";
    position: absolute;
    right: -30%; top: -40%;
    width: 22rem; height: 22rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 58%, transparent) 0%, transparent 66%);
    pointer-events: none;
}
.booking-card > * { position: relative; z-index: 2; }
.booking-card h2, .booking-card h3 { color: #fff; font-size: var(--fs-h3); margin: 0 0 .4rem; }
.booking-card p { font-size: var(--fs-xs); margin: 0 0 1.25rem; }
.booking-card .btn-brand { width: 100%; }
.booking-card-divider { height: 1px; background: rgba(255,255,255,.12); margin: 1.25rem 0; }
.booking-card-line {
    display: flex; align-items: center; gap: .75rem;
    font-size: var(--fs-sm); color: #fff; font-weight: 600;
    padding: .4rem 0;
}
.booking-card-line i { color: var(--gold); font-size: 1.05rem; }
.booking-card-line span small {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: rgba(255,255,255,.5);
}

/* Doctor profile hero */
.profile-head { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.profile-photo {
    position: relative;
    aspect-ratio: 4 / 4.6;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(168deg, var(--surface-3), var(--surface));
    display: grid; place-items: center;
    box-shadow: var(--shadow-lg);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.profile-photo .doctor-initials { font-size: 4rem; }
.profile-name { font-size: var(--fs-h1); margin: 0 0 .4rem; }
.profile-qual { color: var(--ink-3); font-size: var(--fs-sm); margin: 0 0 .85rem; }
.profile-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

.profile-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.profile-fact {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
}
.profile-fact-label {
    display: block; font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3); margin-bottom: .15rem;
}
.profile-fact-value { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

/* ---------- 12. Statistics ---------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.stat-item {
    text-align: center;
    padding: 2rem 1.25rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    transition: background var(--t) var(--ease-soft), transform var(--t) var(--ease), border-color var(--t) var(--ease-soft);
}
.stat-item:hover { background: rgba(255,255,255,.09); transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.stat-icon { font-size: 1.6rem; color: var(--gold); margin-bottom: .7rem; }
.stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-label { color: rgba(255,255,255,.88); font-weight: 600; margin-top: .6rem; font-size: var(--fs-sm); }
.stat-note { color: rgba(255,255,255,.5); font-size: var(--fs-xs); margin-top: .3rem; }

/* Light variant, for a statistics row on a white section */
.stat-grid.is-light .stat-item { background: var(--surface-2); border-color: var(--line); }
.stat-grid.is-light .stat-item:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.stat-grid.is-light .stat-value { color: var(--ink); }
.stat-grid.is-light .stat-label { color: var(--ink); }
.stat-grid.is-light .stat-note { color: var(--ink-3); }
.stat-grid.is-light .stat-icon { color: var(--brand); }

/* ---------- 12b. Why choose us (asymmetric) ----------------------------- */
.why-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.why-list { display: grid; gap: 1rem; }
.why-item {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.35rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.why-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
}
.why-item-icon {
    flex: 0 0 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--brand-08); color: var(--brand);
    font-size: 1.25rem;
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
.why-item:hover .why-item-icon { background: var(--brand); color: #fff; }
.why-item-title { font-size: var(--fs-h4); margin: 0 0 .3rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.why-item-text { font-size: var(--fs-xs); color: var(--ink-2); margin: 0; }
.why-item-tag { margin-left: auto; flex: 0 0 auto; }

/* ---------- 13. Testimonials -------------------------------------------- */
.quote-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote-mark {
    font-family: var(--font-display);
    font-size: 3.25rem;
    color: color-mix(in srgb, var(--gold) 48%, white);
    line-height: .7;
    margin-bottom: .85rem;
}
.quote-text { color: var(--ink-2); font-size: var(--fs-sm); flex: 1; margin: 0 0 1.5rem; }
.quote-person { display: flex; align-items: center; gap: .85rem; }
.quote-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover;
    background: var(--brand-08);
    display: grid; place-items: center;
    font-weight: 700; color: var(--brand);
    flex: 0 0 46px;
}
.quote-name { font-weight: 600; font-size: var(--fs-sm); }
.quote-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.quote-stars { color: var(--gold); font-size: .8rem; letter-spacing: .1em; }

/* ---------- 14. Emergency band ------------------------------------------ */
/* Deep navy rather than red: authoritative and reassuring, with the number
   itself carrying the urgency. */
.emergency-band {
    background: var(--navy);
    color: rgba(255,255,255,.76);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3.25rem);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.emergency-band::before {
    content: "";
    position: absolute;
    right: -8%; top: 50%;
    width: 30rem; height: 30rem;
    margin-top: -15rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 46%, transparent) 0%, transparent 64%);
    pointer-events: none;
}
.emergency-band > * { position: relative; z-index: 2; }
.emergency-band h2 { color: #fff; margin: 0 0 .5rem; font-size: var(--fs-h2); }
.emergency-band p { color: rgba(255,255,255,.72); margin: 0; max-width: 56ch; font-size: var(--fs-sm); }
.emergency-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.emergency-number {
    display: inline-flex; align-items: center; gap: .75rem;
    background: #fff; color: var(--navy);
    font-weight: 700; font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
    padding: .9rem 1.75rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.emergency-number i { color: #B3261E; }
.emergency-number:hover { color: var(--navy); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0,0,0,.3); }

/* ---------- 15. Gallery ------------------------------------------------- */
/* A masonry-style column layout: images keep their own proportions instead of
   being cropped to a square, which reads far less like a template grid. */
.gallery-masonry {
    columns: 4 16rem;
    column-gap: 1rem;
}
.gallery-masonry .gallery-item {
    break-inside: avoid;
    margin: 0 0 1rem;
    aspect-ratio: auto;
}
.gallery-item {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-3);
    display: block;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.gallery-item::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(transparent 45%, rgba(7,26,53,.82));
    opacity: 0;
    transition: opacity var(--t) var(--ease-soft);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item figcaption {
    position: absolute; inset: auto 0 0 0;
    z-index: 2;
    padding: 1rem .95rem .85rem;
    color: #fff; font-size: var(--fs-xs); font-weight: 600;
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease);
}
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }
/* A zoom affordance that appears with the scrim */
.gallery-item-zoom {
    position: absolute;
    right: .8rem; top: .8rem;
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.92);
    color: var(--brand);
    opacity: 0; transform: scale(.85);
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease);
}
.gallery-item:hover .gallery-item-zoom { opacity: 1; transform: scale(1); }

/* Fixed square grid, still used for the home page teaser */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery-grid .gallery-item { aspect-ratio: 1; }
.gallery-grid .gallery-item img { height: 100%; object-fit: cover; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip {
    border: 1px solid var(--line-2);
    background: var(--surface);
    border-radius: 999px;
    padding: .5rem 1.15rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-2);
    transition: all var(--t-fast) var(--ease-soft);
}
.filter-chip:hover { border-color: var(--brand); color: var(--brand); }
.filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }

/* ---------- 15b. Editorial news ----------------------------------------- */
.news-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.news-lead:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 20%, var(--line)); }
.news-lead-media { position: relative; overflow: hidden; align-self: stretch; min-height: 20rem; }
.news-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.news-lead:hover .news-lead-media img { transform: scale(1.04); }
.news-lead-body { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0; }
.news-lead-title { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); margin: .85rem 0 .75rem; }
.news-lead-title a { color: inherit; }
.news-lead:hover .news-lead-title a { color: var(--brand); }

/* Compact list rows for secondary articles */
.news-row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.news-row:last-child { border-bottom: 0; }
.news-row-media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
.news-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.news-row:hover .news-row-media img { transform: scale(1.06); }
.news-row-title { font-size: var(--fs-h4); margin: .3rem 0 0; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.news-row-title a { color: inherit; }
.news-row:hover .news-row-title a { color: var(--brand); }

/* ---------- 15c. Contact cards ------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.contact-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    height: 100%;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
}
.contact-card-icon {
    flex: 0 0 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--brand-08); color: var(--brand);
    font-size: 1.2rem;
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
.contact-card:hover .contact-card-icon { background: var(--brand); color: #fff; }
.contact-card.is-emergency .contact-card-icon { background: #FDECEC; color: #B3261E; }
.contact-card.is-emergency:hover .contact-card-icon { background: #B3261E; color: #fff; }
.contact-card-heading {
    font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
    margin: 0 0 .35rem;
    font-family: var(--font-body);
}
.contact-card-value { font-size: var(--fs-sm); color: var(--ink); margin: 0 0 .2rem; }
.contact-card-value a { color: var(--ink); font-weight: 600; }
.contact-card-value a:hover { color: var(--brand); }

/* Map framed like a card instead of a raw full-bleed iframe */
.map-panel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: var(--surface-3);
    height: 100%;
    min-height: 26rem;
    display: flex;
}
.map-panel iframe { border: 0; width: 100%; height: 100%; min-height: 26rem; display: block; }
.map-panel-action {
    position: absolute;
    left: 1.15rem; bottom: 1.15rem;
    z-index: 2;
}

/* ---------- 16. Prose --------------------------------------------------- */
.prose { color: var(--ink-2); font-size: var(--fs-body); }
.prose h2, .prose h3, .prose h4 { color: var(--ink); margin: 2.25rem 0 .85rem; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
.prose h3 { font-size: var(--fs-h3); }
.prose p { margin: 0 0 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--brand); }
.prose blockquote {
    border-left: 2px solid var(--gold);
    background: var(--surface-2);
    padding: 1.25rem 1.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 0 0 1.5rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.5;
}
.prose img { border-radius: var(--radius-sm); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 600; color: var(--ink); }

/* ---------- 17. Timeline ------------------------------------------------ */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before {
    content: ""; position: absolute; left: 8px; top: .6rem; bottom: .6rem;
    width: 1px; background: linear-gradient(var(--gold), var(--line));
}
.timeline-item { position: relative; padding-bottom: 2.25rem; }
.timeline-item::before {
    content: ""; position: absolute; left: -2.25rem; top: .4rem;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px var(--surface);
}
.timeline-year {
    font-family: var(--font-display);
    font-size: .95rem; font-weight: 600; color: var(--brand);
    letter-spacing: .04em;
}
.timeline-title { font-size: var(--fs-h4); margin: .25rem 0 .35rem; }
.timeline-text { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }

/* ---------- 18. Schedule table ------------------------------------------ */
.schedule-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.schedule-table th, .schedule-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.schedule-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-3); font-weight: 700; }
.schedule-table tr:last-child td { border-bottom: 0; }
.schedule-day { font-weight: 600; }
.schedule-closed { color: var(--ink-3); font-style: italic; }

/* ---------- 19. Forms --------------------------------------------------- */
.form-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.6rem, 3.5vw, 2.75rem);
    box-shadow: var(--shadow);
}
.form-label { font-weight: 600; font-size: var(--fs-xs); color: var(--ink); margin-bottom: .45rem; letter-spacing: .01em; }
.form-label .req { color: #A62230; }
.form-control, .form-select {
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: .78rem 1rem;
    font-size: var(--fs-sm);
    font-family: var(--font-body);
    background-color: var(--surface);
    transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.form-text { font-size: var(--fs-xs); color: var(--ink-3); }
textarea.form-control { min-height: 130px; }

/* Styled once here so no view has to carry an inline override */
.input-group-text {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-right: 0;
    color: var(--ink-3);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group .form-control { border-left: 0; }
.input-group:focus-within .input-group-text { border-color: var(--brand); }

/* Bootstrap's own validation colours, matched to this palette */
.invalid-feedback, .form-label .req { color: #B3261E; }
.was-validated .form-control:invalid,
.was-validated .form-select:invalid { border-color: #B3261E; }
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }
.was-validated .form-control:valid,
.was-validated .form-select:valid { border-color: var(--line-2); }

.info-card {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: .95rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.info-list li:first-child { padding-top: 0; }
.info-list i { color: var(--brand); font-size: 1.15rem; margin-top: .2rem; }
.info-label {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow); color: var(--ink-3); font-weight: 700;
    margin-bottom: .15rem;
}
.info-value { color: var(--ink); font-size: var(--fs-sm); }

.map-frame { border: 0; width: 100%; height: 100%; min-height: 420px; border-radius: var(--radius); display: block; }

/* ---------- 20. Pagination & empty states ------------------------------- */
.pagination { gap: .4rem; }
.page-link {
    border: 1px solid var(--line-2);
    border-radius: var(--radius-xs) !important;
    color: var(--ink-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    min-width: 44px;
    text-align: center;
    transition: all var(--t-fast) var(--ease-soft);
}
.page-link:hover { background: var(--surface-2); color: var(--brand); border-color: var(--brand); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-item.disabled .page-link { color: var(--ink-3); background: var(--surface-2); }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--ink-3); }
.empty-state i { font-size: 3rem; color: var(--line-2); display: block; margin-bottom: 1rem; }

/* ---------- 21. Back to top --------------------------------------------- */
.to-top {
    position: fixed; right: 1.35rem; bottom: 1.35rem;
    width: 48px; height: 48px; border-radius: 50%;
    border: 0; background: var(--brand); color: #fff;
    box-shadow: var(--shadow-lg);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease), visibility var(--t), background var(--t-fast);
    z-index: 1040;
}
.to-top:hover { background: var(--brand-2); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- 21b. Floating Contact Actions ------------------------------- */
.floating-actions {
    position: fixed; right: 1.35rem; bottom: 5rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    z-index: 1040;
}
.floating-action-btn {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: 1.45rem;
    box-shadow: var(--shadow-lg);
    transition: transform var(--t-fast) var(--ease-soft), filter var(--t-fast);
    text-decoration: none;
}
.floating-action-btn:hover {
    transform: scale(1.08); color: #fff; filter: brightness(1.1);
}
.floating-whatsapp { background: #25D366; }
.floating-phone { background: #EA4335; }

@media (max-width: 991.98px) {
    .floating-actions { bottom: calc(62px + 5rem); }
}

/* ---------- 22. Mobile action bar --------------------------------------- */
/* The five things a patient reaches for on a phone, one tap from anywhere. */
.mobile-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1045;
    display: none;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(14,27,42,.1);
    padding-bottom: env(safe-area-inset-bottom);
}
/* Auto columns, because an item is dropped when its number is not configured */
.mobile-bar-inner { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.mobile-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem;
    padding: .6rem .2rem .55rem;
    color: var(--ink-2);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
    min-height: 58px;
}
.mobile-bar-item i { font-size: 1.2rem; line-height: 1; }
.mobile-bar-item:active { background: var(--surface-2); color: var(--brand); }
.mobile-bar-item.is-emergency { color: #A62230; }
.mobile-bar-item.is-emergency i { color: #A62230; }

/* ---------- 23. Footer -------------------------------------------------- */
.site-footer {
    background: var(--navy);
    color: rgba(255,255,255,.66);
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    font-size: var(--fs-sm);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    left: 50%; top: -18rem;
    width: 52rem; height: 32rem;
    margin-left: -26rem;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--brand) 32%, transparent) 0%, transparent 68%);
    pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 2; }
.site-footer a { color: rgba(255,255,255,.66); }
.site-footer a:hover { color: #fff; }

.footer-brand { display: inline-flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.footer-brand img { height: 54px; width: auto; }
.footer-brand span { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.footer-about { margin-bottom: 1.5rem; max-width: 42ch; }

.footer-heading {
    color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
    font-family: var(--font-body); font-weight: 700;
    margin-bottom: 1.35rem; position: relative; padding-bottom: .7rem;
}
.footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px; background: var(--gold); }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .7rem; }
.footer-links a { display: inline-flex; align-items: baseline; gap: .5rem; transition: transform var(--t-fast) var(--ease-soft), color var(--t-fast); }
.footer-links a::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .62rem; color: var(--gold); }
.footer-links a:hover { transform: translateX(3px); }

.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; gap: .8rem; margin-bottom: 1.1rem; }
.footer-contact i { color: var(--gold); font-size: 1.05rem; margin-top: .2rem; }
.footer-contact-label {
    display: block; font-size: .66rem; text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow); color: rgba(255,255,255,.42); font-weight: 700;
    margin-bottom: .1rem;
}
.footer-contact li.is-emergency a { color: #FFC9CE; font-weight: 700; }

.footer-social { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    transition: all var(--t-fast) var(--ease-soft);
}
.footer-social a:hover { background: var(--gold); color: var(--brand-deep); border-color: var(--gold); transform: translateY(-2px); }

.footer-bottom {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 1.35rem 0;
    font-size: var(--fs-xs);
}
.footer-est { color: rgba(255,255,255,.4); }

/* Developer credit — legible, but never competing with the hospital brand */
.footer-credit { color: rgba(255,255,255,.4); }
.footer-credit a {
    color: rgba(255,255,255,.62);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.18);
    padding-bottom: 1px;
    transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.footer-credit a:hover { color: #fff; border-bottom-color: var(--gold); }

/* Staff entrance — present but subordinate to the hospital's own branding */
.footer-staff-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.55);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .02em;
    transition: color var(--t-fast) var(--ease-soft),
                border-color var(--t-fast) var(--ease-soft),
                background var(--t-fast) var(--ease-soft);
}
.footer-staff-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
}
.footer-staff-link i { font-size: .85rem; color: var(--gold); }

/* ---------- 24. Responsive ---------------------------------------------- */
/* Breakpoints are checked against the sizes patients actually use:
   320, 375, 390 and 430 for phones, then tablet, laptop and desktop. */

/* The full menu fits from 1280px up; that is where the desktop bar appears.
   Below it the brand lock-up, nine menu items and the booking button cannot
   share a line, so the full-screen drawer takes over instead of letting them
   overlap. */
@media (min-width: 1280px) {
    .nav-desktop-only { display: flex; }
    .nav-icon-btn.nav-desktop-only { display: inline-grid; }
    .nav-mobile-only { display: none; }
}

/* Between 1280 and 1500 every pixel counts: drop the tagline and tighten the
   menu so nothing has to be shrunk into its neighbour. */
@media (min-width: 1280px) and (max-width: 1499.98px) {
    .brand-tagline { display: none; }
    .brand-logo { height: 60px; }
    .nav-link, .nav-toggle { padding-inline: .5rem; font-size: .86rem; }
    .nav-link::after, .nav-toggle::after { left: .5rem; right: .5rem; }
    .nav-actions { gap: .45rem; }
    .nav-cta { --btn-x: 1.1rem; }
}

@media (max-width: 1199.98px) {
    .finder-grid { grid-template-columns: 1fr 1fr; }
    .profile-head { grid-template-columns: 14rem minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    :root { --header-h: 84px; }

    .brand-logo { height: 56px; }
    .site-header.is-stuck .brand-logo { height: 50px; }

    .hero .carousel-item { height: clamp(520px, 80vh, 660px); }
    .hero-inner { padding: calc(var(--header-h) + 1.75rem) 0 4rem; }
    .quick-strip { margin-top: 1.75rem; }

    .editorial, .why-layout, .alt-row, .news-lead { grid-template-columns: minmax(0, 1fr); }
    .editorial-media { margin-bottom: 2.5rem; }
    .editorial-media-sub { right: 0; bottom: -1.75rem; width: 40%; }
    .alt-row:nth-child(even) .alt-row-media { order: 0; }
    .news-lead-media { min-height: 15rem; }
    .news-lead-body { padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem); }

    .profile-head { grid-template-columns: minmax(0, 1fr); }
    .profile-photo { max-width: 18rem; aspect-ratio: 4 / 4.2; }
    .profile-rail { position: static; }

    .emergency-band { text-align: center; justify-content: center; }
    .emergency-band p { margin-inline: auto; }
    .emergency-actions { justify-content: center; width: 100%; }
    .finder-grid { grid-template-columns: 1fr; }
    .map-panel { min-height: 20rem; }
    .map-panel iframe { min-height: 20rem; }

    /* Leave room for the fixed action bar */
    .mobile-bar { display: block; }
    body { padding-bottom: 62px; }
    .to-top { bottom: calc(62px + 1rem); }
}

@media (max-width: 767.98px) {
    .hero-crest { display: none; }
    .doctor-photo { aspect-ratio: 4 / 4; }
    .gallery-masonry { columns: 2 10rem; column-gap: .65rem; }
    .gallery-masonry .gallery-item { margin-bottom: .65rem; }
    .news-row { grid-template-columns: 6rem minmax(0, 1fr); gap: .9rem; }
}

@media (max-width: 575.98px) {
    :root { --section-y: 3rem; --gutter: 1rem; }

    /* Arrows sit over the headline on a phone; swipe and the dots remain */
    .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
    .hero .carousel-item { height: auto; min-height: 540px; }
    .hero-inner { padding: calc(var(--header-h) + 2rem) 0 4.5rem; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { width: 100%; }
    .hero-finder { max-width: 100%; padding-left: 1rem; }
    .hero .carousel-indicators { margin-bottom: 1.5rem; }
    /* A phone screen is mostly the scrim, so hold the zoom back */
    .hero-media img { animation-duration: 30s; }

    /* The brand must be able to shrink, or the row wraps and pushes the
       menu button onto a line of its own. */
    .navbar-brand { max-width: calc(100% - 7.5rem); }
    .brand-text { min-width: 0; }
    .brand-name { white-space: normal; font-size: 1rem; }
    .brand-tagline { display: none; }

    .quick-grid { grid-template-columns: 1fr; }
    .quick-tile { flex-direction: row; align-items: center; padding: 1.15rem 1.15rem; }
    .quick-tile-arrow { margin-top: 0; margin-left: auto; opacity: 1; transform: none; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .card-tile { padding: 1.5rem 1.35rem; }
    .form-panel { padding: 1.4rem 1.2rem; }
    .emergency-number { width: 100%; justify-content: center; }
    .emergency-actions .btn { width: 100%; }
    .stat-item { padding: 1.6rem 1rem; }
    .contact-grid { grid-template-columns: 1fr; }
    /* The tag would otherwise squeeze the heading into a two-word column */
    .why-item { flex-wrap: wrap; }
    .why-item > div { flex: 1 1 100%; order: 2; }
    .why-item-tag { margin-left: 0; order: 1; }
    .editorial-media-sub { display: none; }
    .editorial-media::before { display: none; }
    .editorial-badge { left: 0; bottom: -1.25rem; padding: .85rem 1.1rem; }
    .news-row { grid-template-columns: 5rem minmax(0, 1fr); }
    .profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 320px: the smallest phone still in service — nothing may overflow */
@media (max-width: 359.98px) {
    :root { --gutter: .85rem; }
    .brand-logo { height: 46px; }
    .brand-name { font-size: .88rem; line-height: 1.25; }
    .navbar-brand { gap: .55rem; max-width: calc(100% - 6.5rem); }
    .nav-actions { gap: .35rem; }
    .nav-icon-btn { width: 38px; height: 38px; }
    .mobile-bar-item { font-size: .56rem; padding-inline: .1rem; }
    .mobile-bar-item i { font-size: 1.05rem; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-masonry { columns: 1; }
    .hero-title { font-size: 1.8rem; }
    .profile-facts { grid-template-columns: 1fr; }
    .news-row { grid-template-columns: 1fr; }
    .news-row-media { aspect-ratio: 16 / 9; }
}

/* ---------- 25. Motion & print preferences ------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .hero-media img { animation: none; }
    .js-reveal [data-reveal] { opacity: 1; transform: none; }
    .hero .carousel-item .hero-eyebrow,
    .hero .carousel-item .hero-title,
    .hero .carousel-item .hero-text,
    .hero .carousel-item .hero-actions { opacity: 1; transform: none; }
}

@media print {
    .topbar, .site-header, .notice-ticker, .site-footer, .to-top, .hero, .mobile-bar { display: none !important; }
    body { color: #000; background: #fff; padding-bottom: 0; }
    .section { padding: 1rem 0; }
}

/* ---------- 26. Validation summaries ------------------------------------ */
/* The asp-validation-summary tag helper always emits its <div>, so without
   this an empty red alert sits above every form until something fails. */
.validation-summary-valid { display: none; }
.field-validation-error { display: block; font-size: var(--fs-xs); color: #A62230; margin-top: .3rem; }
.input-validation-error { border-color: #A62230; }
.input-validation-error:focus { box-shadow: 0 0 0 4px rgba(166, 34, 48, .14); }

/* ---------- 27. Watermarks & decorative backgrounds ---------------------- */
/*
   One reusable system, driven by custom properties, rather than bespoke CSS per
   section. A section opts in with `.wm` plus a motif class and a placement
   class, for example:  <section class="section wm wm-cross wm-tr">

   The motif is applied as a CSS mask, not an <img>, so the colour comes from
   --wm-ink and follows the brand variable — the same file works on a white
   section and on the navy bands. The SVGs are painted white on transparent so
   they read correctly whether the browser treats the mask as alpha or
   luminance. Eleven motifs together weigh about 6 KB.
*/
.wm {
    position: relative;
    /* Oversized art is meant to bleed past the edge, so it must be clipped or
       it widens the document. `clip` rather than `hidden`: hidden would make
       this a scroll container and break the `position: sticky` booking rails
       inside several of these sections, while `clip` does not. clip-path is no
       use here — it clips painting but leaves scrollable overflow behind.
       Older Safari ignores `clip` and falls back to visible, where the
       overflow-x:hidden already on body still prevents a scrollbar. */
    overflow: clip;
}

/* Content sits above the decoration. Sections already scope their own
   container, so this only has to lift the direct children. */
.wm > * { position: relative; z-index: 1; }

.wm::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: var(--wm-w, 26rem);
    height: var(--wm-h, 26rem);
    background-color: var(--wm-ink, var(--brand));
    opacity: var(--wm-opacity, .05);
    -webkit-mask-image: var(--wm-src);
            mask-image: var(--wm-src);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

/* --- Motifs --- */
.wm-cross       { --wm-src: url("/images/watermarks/cross.svg"); }
.wm-plus        { --wm-src: url("/images/watermarks/plus-field.svg"); --wm-opacity: .055; }
.wm-ecg         { --wm-src: url("/images/watermarks/ecg.svg"); }
.wm-stethoscope { --wm-src: url("/images/watermarks/stethoscope.svg"); }
.wm-building    { --wm-src: url("/images/watermarks/building.svg"); }
.wm-quote       { --wm-src: url("/images/watermarks/quote.svg"); --wm-opacity: .06; }
.wm-map         { --wm-src: url("/images/watermarks/map.svg"); }
.wm-molecule    { --wm-src: url("/images/watermarks/molecule.svg"); }
.wm-arches      { --wm-src: url("/images/watermarks/arches.svg"); }
.wm-rings       { --wm-src: url("/images/watermarks/rings.svg"); --wm-opacity: .045; }
.wm-leaf        { --wm-src: url("/images/watermarks/leaf.svg"); --wm-opacity: .045; }

/* Motifs that are naturally wide get a matching default footprint. */
.wm-ecg      { --wm-w: 46rem; --wm-h: 12rem; }
.wm-building { --wm-w: 40rem; --wm-h: 18rem; }
.wm-arches   { --wm-w: 34rem; --wm-h: 19rem; }
.wm-quote    { --wm-w: 18rem; --wm-h: 15rem; }

/* --- Placement. Oversized art is allowed to sit partly outside the edge;
       body already carries overflow-x:hidden so it can never add a scrollbar. */
.wm-tr::after { top: -4rem;    right: -5rem; }
.wm-br::after { bottom: -5rem; right: -5rem; }
.wm-tl::after { top: -4rem;    left: -5rem; }
.wm-bl::after { bottom: -5rem; left: -5rem; }
.wm-cr::after { top: 50%; right: -6rem; transform: translateY(-50%); }
.wm-cl::after { top: 50%; left: -6rem;  transform: translateY(-50%); }

/* A full-width strip, used for the heartbeat trace. */
.wm-band::after {
    left: 50%;
    bottom: 1.5rem;
    width: min(var(--wm-w, 46rem), 92vw);
    transform: translateX(-50%);
}

/* --- Tone --- */
/* On the navy bands the brand blue would disappear, so paint in white. */
.wm-light { --wm-ink: #fff; --wm-opacity: .07; }
.wm-gold  { --wm-ink: var(--gold); --wm-opacity: .07; }

/* --- Scale --- */
.wm-sm { --wm-w: 18rem; --wm-h: 18rem; }
.wm-lg { --wm-w: 34rem; --wm-h: 34rem; }
.wm-xl { --wm-w: 44rem; --wm-h: 44rem; }

/* --- Soft background washes, to vary the rhythm of a long page ---------- */
/* A barely-there blue tint; lighter than .section-tint. */
.section-wash {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand) 3.5%, white) 0%,
            color-mix(in srgb, var(--brand) 1.5%, white) 100%);
}
/* A tint that fades back to white, so two adjacent sections can share an edge
   without a hard line between them. */
.section-fade {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 78%);
}
.section-fade-up {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Smaller and fainter, and pulled back inside the edge so nothing can
       drift across a heading or a button. */
    .wm::after {
        width: calc(var(--wm-w, 26rem) * .62);
        height: calc(var(--wm-h, 26rem) * .62);
        opacity: calc(var(--wm-opacity, .05) * .8);
    }
    .wm-tr::after, .wm-br::after { right: -2.5rem; }
    .wm-tl::after, .wm-bl::after { left: -2.5rem; }
    .wm-cr::after { right: -3rem; }
    .wm-cl::after { left: -3rem; }
}

@media (max-width: 575.98px) {
    /* A phone screen is mostly content; decoration that cannot sit clear of it
       is dropped rather than shrunk further. */
    .wm::after {
        width: calc(var(--wm-w, 26rem) * .48);
        height: calc(var(--wm-h, 26rem) * .48);
        opacity: calc(var(--wm-opacity, .05) * .7);
    }
    .wm-off-sm::after { display: none; }
}

/* Decoration has no meaning, so it is removed when the user has asked the
   operating system for a high-contrast palette. */
@media (forced-colors: active) {
    .wm::after { display: none; }
}

/* ---------- 28. Video gallery ------------------------------------------- */
.video-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.video-card:hover, .video-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
}

.video-card-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--navy);
    overflow: hidden;
}

.video-card-poster {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--t) var(--ease-soft), transform .9s var(--ease);
}
.video-card:hover .video-card-poster { transform: scale(1.04); }

/* The preview sits over the poster and fades in once it is actually playing,
   so a card never flashes an empty black frame while the video buffers. */
.video-card-preview,
.video-card-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s var(--ease-soft);
    pointer-events: none;
}
.video-card.is-previewing .video-card-preview,
.video-card.is-previewing .video-card-frame iframe { opacity: 1; }
.video-card.is-previewing .video-card-poster { opacity: 0; }

/* A YouTube embed is 16:9; scaling it up hides the letterboxing that would
   otherwise show through as black bars on a card of a different ratio. */
.video-card-frame iframe { transform: scale(1.35); transform-origin: center; }

.video-card-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.94);
    color: var(--brand);
    font-size: 1.7rem;
    box-shadow: 0 8px 22px rgba(7,26,53,.3);
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease-soft), background var(--t-fast);
    z-index: 2;
}
.video-card:hover .video-card-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}
/* Once the preview is running the button steps back so the film is visible. */
.video-card.is-previewing .video-card-play { opacity: .28; }

.video-card-duration {
    position: absolute;
    right: .6rem; bottom: .6rem;
    z-index: 2;
    background: rgba(7,26,53,.82);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: .18rem .5rem;
    border-radius: 6px;
}

/* A thin progress sliver while an embed is loading. */
.video-card-loading {
    position: absolute;
    left: 0; top: 0;
    height: 3px; width: 0;
    background: var(--gold);
    z-index: 3;
    transition: width .2s linear, opacity .3s;
    opacity: 0;
}
.video-card.is-loading .video-card-loading { width: 85%; opacity: 1; transition: width 2.4s var(--ease-soft); }

.video-card-body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.video-card-title {
    font-size: var(--fs-h4);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    margin: 0 0 .4rem;
}
.video-card:hover .video-card-title { color: var(--brand); }

/* --- Player --- */
.video-modal .modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--navy);
}
.video-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,.1); padding: 1rem 1.25rem; }
.video-modal .modal-header .btn-close { filter: invert(1) grayscale(1); opacity: .7; }
.video-modal-title {
    font-size: var(--fs-h4);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
}
.video-modal .modal-body { padding: 0; }
.video-modal-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-modal-stage iframe,
.video-modal-stage video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 575.98px) {
    .video-card-play { width: 48px; height: 48px; font-size: 1.4rem; }
}

/* Hover previews are motion. Someone who asked for less of it gets the poster
   and the play button, and the film still opens on click. */
@media (prefers-reduced-motion: reduce) {
    .video-card.is-previewing .video-card-preview,
    .video-card.is-previewing .video-card-frame iframe { opacity: 0; }
    .video-card.is-previewing .video-card-poster { opacity: 1; }
    .video-card.is-previewing .video-card-play { opacity: 1; }
}

/* The home page places the notice strip after the quick-action cards, which
   are themselves pulled up over the hero. Without this they would touch. */
.quick-strip + .notice-ticker {
    margin-top: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--line);
}

/* ---------- 30. Glass cards --------------------------------------------- */
/* Frosted-glass finish for every card on the public site. The lift uses the
   individual `translate` property rather than `transform`, because the scroll
   reveal owns `transform` (its `.is-revealed { transform: none }` outranks the
   card hover rules and would otherwise cancel the lift). --mx / --my are fed
   by site.js so the glow follows the pointer; without JS it sits top-left. */
:root {
    --glass-bg: linear-gradient(145deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.55) 55%, rgba(236,244,255,.66) 100%);
    --glass-border: rgba(255,255,255,.8);
    --glass-edge: color-mix(in srgb, var(--brand) 20%, rgba(255,255,255,.5));
    --glass-blur: 18px;
    --glass-sheen: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%);
    --glass-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 -1px 0 rgba(20,108,220,.06) inset,
        0 10px 24px rgba(7,26,53,.07),
        0 28px 60px rgba(7,26,53,.10);
    --glass-shadow-hover:
        0 1px 0 #fff inset,
        0 -1px 0 rgba(20,108,220,.08) inset,
        0 16px 34px rgba(7,26,53,.10),
        0 44px 90px color-mix(in srgb, var(--brand) 22%, transparent);
}

.quick-tile,
.card-tile,
.card-media,
.doctor-card,
.quote-card,
.contact-card,
.info-card,
.video-card {
    --mx: 20%;
    --my: 0%;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    isolation: isolate;
    translate: 0 0;
    transition:
        translate .5s var(--ease),
        box-shadow .5s var(--ease),
        border-color var(--t) var(--ease),
        opacity .75s var(--ease),
        transform .75s var(--ease);
}
.quote-card, .contact-card, .info-card { position: relative; overflow: hidden; }
.quick-tile > *, .card-tile > *, .quote-card > *, .contact-card > *, .info-card > * { position: relative; z-index: 1; }

/* Pointer-following glow, drawn beneath the content */
.quick-tile::before,
.card-media::before,
.doctor-card::before,
.quote-card::before,
.contact-card::before,
.info-card::before,
.video-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--brand) 14%, transparent), transparent 55%);
    opacity: .55;
    transition: opacity .5s var(--ease-soft);
}
/* On photo cards the glow floats over the picture as a soft light */
.card-media::before, .doctor-card::before, .video-card::before { z-index: 2; mix-blend-mode: soft-light; opacity: 0; }

/* Diagonal light sweep across the glass on hover */
.quick-tile::after,
.quick-tile.is-emergency::after,
.card-tile::after,
.contact-card::after,
.quote-card::after {
    content: "";
    position: absolute;
    inset: -50% auto auto -60%;
    width: 45%; height: 200%;
    background: var(--glass-sheen);
    transform: rotate(18deg);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: none;
}

/* Hover: lift, brand-tinted halo, glow and sweep */
a.quick-tile:hover,
.card-tile:hover,
.card-media:hover,
.doctor-card:hover,
.quote-card:hover,
.contact-card:hover,
.video-card:hover, .video-card:focus-visible {
    translate: 0 -8px;
    transform: none;
    border-color: var(--glass-edge);
    box-shadow: var(--glass-shadow-hover);
}
a.quick-tile:hover::before,
.card-media:hover::before,
.doctor-card:hover::before,
.quote-card:hover::before,
.contact-card:hover::before,
.video-card:hover::before { opacity: 1; }

a.quick-tile:hover::after,
.card-tile:hover::after,
.contact-card:hover::after,
.quote-card:hover::after {
    animation: glass-sweep 1.1s var(--ease) forwards;
}
@keyframes glass-sweep {
    0%   { opacity: 0; transform: rotate(18deg) translateX(0); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(18deg) translateX(420%); }
}

/* ---- Quick action tiles: the showpiece, sitting over the hero ---- */
.quick-tile {
    border-radius: 22px;
    padding: 1.7rem 1.5rem 1.5rem;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.65), transparent 60%),
        linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.44) 60%, rgba(226,238,255,.58));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
}
.quick-tile .quick-tile-arrow { z-index: 3; }

.quick-tile-icon {
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.95), color-mix(in srgb, var(--brand) 12%, white));
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 1px 0 #fff inset, 0 6px 16px color-mix(in srgb, var(--brand) 18%, transparent);
    transition: background .45s var(--ease-soft), color .45s var(--ease-soft), transform .6s var(--ease), box-shadow .45s var(--ease);
}
a.quick-tile:hover .quick-tile-icon {
    background: linear-gradient(145deg, var(--brand), var(--brand-2));
    color: #fff;
    transform: translateY(-2px) rotate(-6deg) scale(1.06);
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px color-mix(in srgb, var(--brand) 40%, transparent);
}
.quick-tile.is-emergency .quick-tile-icon {
    background: linear-gradient(145deg, #fff, #FDE3E1);
    color: #B3261E;
    box-shadow: 0 1px 0 #fff inset, 0 6px 16px rgba(179,38,30,.18);
}
/* The phone gives a small ring every few seconds */
.quick-tile.is-emergency .quick-tile-icon i { display: inline-block; transform-origin: 50% 60%; animation: glass-ring 2.8s ease-in-out infinite; }
a.quick-tile.is-emergency:hover .quick-tile-icon {
    background: linear-gradient(145deg, #D93A30, #9E1F18);
    color: #fff;
    box-shadow: 0 12px 26px rgba(179,38,30,.38);
}
.quick-tile.is-emergency::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(179,38,30,.12), transparent 55%); }
a.quick-tile.is-emergency:hover { border-color: rgba(179,38,30,.22); box-shadow: 0 1px 0 #fff inset, 0 16px 34px rgba(7,26,53,.10), 0 44px 90px rgba(179,38,30,.18); }
@keyframes glass-ring {
    0%, 70%, 100% { transform: rotate(0); }
    74% { transform: rotate(-14deg); }
    78% { transform: rotate(12deg); }
    82% { transform: rotate(-10deg); }
    86% { transform: rotate(6deg); }
}

.quick-tile-label { color: color-mix(in srgb, var(--ink-3) 85%, var(--brand)); }
.quick-tile-value { font-size: 1.02rem; letter-spacing: -.005em; transition: color var(--t) var(--ease-soft); }
a.quick-tile:hover .quick-tile-value { color: var(--brand-2); }
a.quick-tile.is-emergency:hover .quick-tile-value { color: #9E1F18; }
.quick-tile-arrow {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.7);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, white);
    transition: opacity var(--t-fast) var(--ease-soft), transform var(--t) var(--ease), background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
a.quick-tile:hover .quick-tile-arrow { background: var(--brand); color: #fff; border-color: transparent; }
a.quick-tile.is-emergency:hover .quick-tile-arrow { background: #B3261E; }

/* Icons inside the other cards get the same jewel finish */
.tile-icon, .contact-card-icon {
    background: linear-gradient(145deg, rgba(255,255,255,.95), color-mix(in srgb, var(--brand) 12%, white));
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 1px 0 #fff inset, 0 6px 16px color-mix(in srgb, var(--brand) 16%, transparent);
}
.card-tile:hover .tile-icon {
    background: linear-gradient(145deg, var(--brand), var(--brand-2));
    transform: rotate(-6deg) scale(1.06);
}
.card-media-badge {
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.9);
}

/* Browsers without backdrop-filter get a solid, still-polished card */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .quick-tile, .card-tile, .card-media, .doctor-card, .quote-card, .contact-card, .info-card, .video-card {
        background: linear-gradient(145deg, #fff, #F3F8FF);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-tile.is-emergency .quick-tile-icon i,
    a.quick-tile:hover::after, .card-tile:hover::after, .contact-card:hover::after, .quote-card:hover::after { animation: none; }
    a.quick-tile:hover, .card-tile:hover, .card-media:hover, .doctor-card:hover,
    .quote-card:hover, .contact-card:hover, .video-card:hover { translate: 0 0; }
}

/* Soft colour behind the quick tiles so the frosted glass has something to
   diffuse where the cards hang below the hero onto the white page. */
.quick-strip::before {
    content: "";
    position: absolute;
    inset: 35% 4% -18% 4%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 60% at 18% 50%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
        radial-gradient(30% 55% at 55% 60%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%),
        radial-gradient(34% 60% at 88% 45%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
    filter: blur(28px);
}

/* ---------- 31. Doctor carousel ----------------------------------------- */
/* A full-bleed, snap-scrolling row of doctor cards. site.js writes --p on
   every slide (1 = centred, 0 = a full slot away or more) and --side (-1 left,
   1 right), and the cards scale, tilt and fade from those. The track is padded
   by half its width less half a card so the first and last doctors can reach
   the centre too. */
.doc-carousel {
    --slide-w: clamp(250px, 24vw, 310px);
    margin-inline: calc(50% - 50vw);
    position: relative;
}
.doc-track {
    display: flex;
    gap: clamp(.75rem, 1.6vw, 1.5rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 2.5rem calc(50% - var(--slide-w) / 2) 5.5rem;
    scroll-padding-inline: calc(50% - var(--slide-w) / 2);
    scrollbar-width: none;
    perspective: 1600px;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.doc-track::-webkit-scrollbar { display: none; }
.doc-track:focus-visible { outline: none; }
.doc-track:focus-visible .doc-slide.is-active .doctor-card { outline: 2px solid var(--brand); outline-offset: 4px; }
.doc-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.doc-track.is-dragging a { pointer-events: none; }

.doc-slide {
    --p: 1;
    --side: 0;
    flex: 0 0 var(--slide-w);
    scroll-snap-align: center;
    transform-style: preserve-3d;
}
.doc-slide .doctor-card {
    scale: calc(.84 + .16 * var(--p));
    rotate: y calc((1 - var(--p)) * var(--side) * -14deg);
    opacity: calc(.5 + .5 * var(--p));
    filter: saturate(calc(.55 + .45 * var(--p)));
    transform-origin: 50% 60%;
    user-select: none;
}
.doc-slide .doctor-card img { -webkit-user-drag: none; }

/* The centred doctor is the hero of the row */
.doc-slide.is-active .doctor-card {
    border-color: color-mix(in srgb, var(--brand) 24%, rgba(255,255,255,.6));
    box-shadow:
        0 1px 0 #fff inset,
        0 18px 38px rgba(7,26,53,.10),
        0 50px 100px color-mix(in srgb, var(--brand) 24%, transparent);
}
.doc-slide.is-active .doctor-photo img { scale: 1.04; }
.doctor-photo img { transition: transform .8s var(--ease), scale 1.2s var(--ease); }
.doc-slide.is-active .doctor-name a { color: var(--brand-2); }
/* Side cards lend a click to "bring me to the centre" rather than hover lift */
.doc-slide:not(.is-active) .doctor-card:hover { translate: 0 0; }

/* Controls */
.doc-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    gap: 1.25rem;
    margin: -3rem auto 0;
    position: relative;
}
.doc-nav {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.85);
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--brand);
    font-size: 1.1rem;
    box-shadow: 0 1px 0 #fff inset, 0 8px 20px rgba(7,26,53,.10);
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft), translate var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t);
}
.doc-nav:hover:not(:disabled) {
    background: linear-gradient(145deg, var(--brand), var(--brand-2));
    color: #fff;
    translate: 0 -2px;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 38%, transparent);
}
.doc-nav:disabled { opacity: .4; cursor: default; }
.doc-count {
    flex: none;
    font-size: var(--fs-xs);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}
.doc-count strong { color: var(--ink); font-size: 1rem; font-family: var(--font-display); }

@media (max-width: 575.98px) {
    .doc-carousel { --slide-w: 78vw; }
    .doc-track { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-track { scroll-behavior: auto; }
    .doc-slide .doctor-card { rotate: none; }
}

/* Pinned mode (added by site.js on larger screens): the carousel sticks while
   the page scroll drives the row, so native horizontal scrolling and snapping
   are switched off to stop them fighting the page. */
.doc-pin { position: relative; }
.doc-carousel.is-pinned { position: sticky; }
.doc-carousel.is-pinned .doc-track {
    overflow-x: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: default;
}
/* Pinned rows must fit the viewport height, so they size from it: a squarer
   photo, tighter padding and a card width that shrinks on shorter screens. */
.doc-carousel.is-pinned { --slide-w: clamp(220px, min(24vw, calc(100vh - 420px)), 310px); }
.doc-carousel.is-pinned .doc-track { padding-top: 1.25rem; padding-bottom: 3.5rem; }
.doc-carousel.is-pinned .doctor-photo { aspect-ratio: 1 / .95; }

/* Phones: a compact card sized to sit between the header and the action bar,
   with both neighbours peeking in so the row reads as swipeable. Declared
   after the pinned rules so it wins over their height-based sizing. */
@media (max-width: 575.98px) {
    .doc-carousel,
    .doc-carousel.is-pinned { --slide-w: min(74vw, 300px); }
    .doc-track,
    .doc-carousel.is-pinned .doc-track {
        gap: .6rem;
        padding-top: .75rem;
        padding-bottom: 2.75rem;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .doc-slide .doctor-card {
        scale: calc(.88 + .12 * var(--p));
        rotate: y calc((1 - var(--p)) * var(--side) * -8deg);
        opacity: calc(.6 + .4 * var(--p));
        border-radius: 20px;
    }
    .doc-carousel .doctor-photo,
    .doc-carousel.is-pinned .doctor-photo { aspect-ratio: 16 / 11; }
    .doc-carousel .doctor-initials { font-size: 2.4rem; }
    .doc-carousel .doctor-tag { font-size: .66rem; left: .7rem; top: .7rem; }
    .doc-carousel .doctor-body { padding: 1rem 1rem 1.1rem; }
    .doc-carousel .doctor-name { font-size: 1.05rem; }
    .doc-carousel .doctor-qual { margin-bottom: .4rem; }
    .doc-carousel .doctor-spec { font-size: .68rem; margin-bottom: .6rem; letter-spacing: .06em; }
    .doc-carousel .doctor-meta { margin-bottom: .8rem; }
    .doc-carousel .doctor-actions .btn { --btn-y: .55rem; }

    .doc-controls { margin-top: -2.1rem; gap: 1rem; }
    .doc-nav { width: 42px; height: 42px; font-size: 1rem; }
}

/* Touch screens keep :hover after a tap, which left an arrow stuck in its
   blue state. Only real pointers get the hover fill; a tap gets a press. */
@media (hover: none) {
    .doc-nav:hover:not(:disabled) {
        background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
        color: var(--brand);
        translate: 0 0;
        box-shadow: 0 1px 0 #fff inset, 0 8px 20px rgba(7,26,53,.10);
    }
    .doc-nav:active:not(:disabled) {
        background: linear-gradient(145deg, var(--brand), var(--brand-2));
        color: #fff;
        scale: .94;
    }
    .doc-slide:not(.is-active) .doctor-card:hover,
    .doc-slide .doctor-card:hover { translate: 0 0; }
}

/* ---------- 33. Facilities: sticky stacking cards ----------------------- */
/* Each card sticks a step lower than the last, so the header strip of every
   earlier card stays visible above the one sliding over it. site.js writes
   --depth (how many cards now sit on top, fractional while one arrives) and
   the inner card shrinks and dims from it. */
.stack-list {
    --stack-top: calc(var(--header-h) + 1rem);
    --stack-bar: 2.6rem;
    --stack-step: var(--stack-bar);
    /* Tall cards; each covered card only needs ~1.5rem of strip, and site.js
       tightens the step further if the settled stack would overflow. */
    --card-h: min(580px, calc(100vh - var(--header-h) - 2rem - (var(--n) - 1) * 1.5rem));
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* Holds the finished stack on screen briefly before it scrolls away. It has
   to be an item inside the list: sticky cards ignore the list's padding. */
.stack-list::after { content: ""; flex: none; height: 16vh; }
.stack-card {
    position: sticky;
    top: calc(var(--stack-top) + var(--i) * var(--stack-step));
    z-index: calc(var(--i) + 1);
    /* Sticky cards stop at their parent's bottom edge. Reserving a step per
       later card keeps the strips fanned when the stack scrolls away, instead
       of every card collapsing onto the last. */
    margin-bottom: calc((var(--n) - 1 - var(--i)) * var(--stack-step));
}
.stack-card-inner {
    --depth: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: max(380px, var(--card-h));
    border-radius: 28px;
    overflow: hidden;
    transform-origin: 50% 0;
    scale: calc(1 - var(--depth) * .035);
    box-shadow: 0 -10px 30px rgba(7,26,53,.08), 0 30px 70px rgba(7,26,53,.16);
}
/* Dimming layer, darker the deeper the card sits in the stack */
.stack-card-inner::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--navy);
    opacity: min(calc(var(--depth) * .1), .45);
    pointer-events: none;
    z-index: 3;
}

/* Tones: dark navy and light glass alternate so every layer reads */
.stack-card-inner.is-dark {
    color: rgba(255,255,255,.78);
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 60%),
        radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 65%),
        linear-gradient(150deg, var(--brand-deep), var(--navy));
    border: 1px solid rgba(255,255,255,.1);
}
.stack-card-inner.is-light {
    color: var(--ink-2);
    background:
        radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
        linear-gradient(150deg, #FFFFFF, #F1F6FE);
    border: 1px solid rgba(255,255,255,.9);
}

/* Header strip: the part that stays visible once covered */
.stack-card-bar {
    display: flex;
    /* Text sits at the top so it stays readable when the next card covers
       all but the first ~1.5rem of the strip. */
    align-items: flex-start;
    gap: .75rem;
    height: var(--stack-bar);
    padding: .6rem clamp(1.25rem, 3vw, 2.25rem) 0;
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex: none;
}
.is-light .stack-card-bar { border-bottom-color: var(--line); }
.stack-card-num { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0; color: var(--gold); }
.stack-card-kicker { opacity: .75; }
.stack-card-count { margin-left: auto; opacity: .55; }

.stack-card-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1.25rem, 3vw, 3rem);
    padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
    align-items: center;
}
.stack-card-title {
    font-size: clamp(1.45rem, 1rem + 1.6vw, 2.35rem);
    line-height: 1.15;
    margin: 0 0 1rem;
}
.stack-card-title a { color: inherit; }
.is-dark .stack-card-title { color: #fff; }
.is-light .stack-card-title { color: var(--ink); }
.stack-card-text { font-size: var(--fs-body); line-height: 1.65; margin: 0 0 1.75rem; max-width: 34ch; }
.stack-card-link {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft), gap var(--t) var(--ease);
}
.stack-card-link:hover { gap: .9rem; }
.is-dark .stack-card-link { background: #fff; color: var(--navy); }
.is-dark .stack-card-link:hover { background: var(--gold); color: var(--navy); }
.is-light .stack-card-link { background: linear-gradient(145deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: var(--shadow-brand); }

/* Visual panel: the photo, or a large icon on a framed gradient */
.stack-card-visual {
    position: relative;
    align-self: stretch;
    min-height: 200px;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.stack-card-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.stack-card:hover .stack-card-visual img { scale: 1.05; }
.is-dark .stack-card-visual {
    background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.14), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
}
.is-light .stack-card-visual {
    background:
        radial-gradient(circle at 50% 45%, #fff, transparent 65%),
        linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, white), color-mix(in srgb, var(--brand) 4%, white));
    border: 1px solid var(--line);
}
/* Concentric rings behind the icon */
.stack-card-visual::before {
    content: "";
    position: absolute;
    width: 150%; aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 38px, currentColor 38px 39px);
    opacity: .07;
    pointer-events: none;
}
.is-dark .stack-card-visual { color: #fff; }
.is-light .stack-card-visual { color: var(--brand); }
.stack-card-icon {
    position: relative;
    width: clamp(96px, 11vw, 140px); aspect-ratio: 1;
    border-radius: 32%;
    display: grid; place-items: center;
    font-size: clamp(2.6rem, 4.4vw, 3.8rem);
    transition: rotate .8s var(--ease), scale .8s var(--ease);
}
.stack-card:hover .stack-card-icon { rotate: -8deg; scale: 1.06; }
.is-dark .stack-card-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--brand), var(--brand-2));
    box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 20px 50px color-mix(in srgb, var(--brand) 45%, transparent);
}
.is-light .stack-card-icon {
    color: var(--brand);
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--brand) 10%, white));
    border: 1px solid #fff;
    box-shadow: 0 1px 0 #fff inset, 0 20px 50px color-mix(in srgb, var(--brand) 22%, transparent);
}

@media (max-width: 767.98px) {
    .stack-list {
        --stack-top: calc(var(--header-h) + .5rem);
        --stack-bar: 2rem;
        gap: 1.5rem;
    }
    .stack-card-inner { min-height: 0; border-radius: 22px; }
    .stack-card-body { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.1rem 1.1rem 1.35rem; }
    .stack-card-visual { order: -1; min-height: 130px; border-radius: 16px; }
    .stack-card-icon { width: 76px; font-size: 2.1rem; }
    .stack-card-title { font-size: 1.3rem; margin-bottom: .6rem; }
    .stack-card-text { font-size: var(--fs-sm); margin-bottom: 1.1rem; }
    .stack-card-link { padding: .65rem 1.15rem; font-size: var(--fs-xs); }
}

/* Doctor variant of the stacking cards (Find the Right Consultant) */
.stack-card-dept { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack-card-qual { font-size: var(--fs-sm); margin: -.4rem 0 .9rem; opacity: .85; }
.stack-card-spec {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .4rem .85rem;
    border-radius: 999px;
    margin: 0 0 1rem;
}
.is-dark .stack-card-spec { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.is-light .stack-card-spec { background: var(--brand-08); color: var(--brand); }
.stack-card-meta { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); margin: 0 0 1.5rem; }
.stack-card-meta i { color: var(--gold); }
.stack-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.stack-card-ghost {
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.is-dark .stack-card-ghost { color: #fff; }
.is-dark .stack-card-ghost:hover { color: var(--gold); }
.is-light .stack-card-ghost { color: var(--brand); }

.stack-card-visual.is-portrait img { object-position: top center; }
.stack-card-initials {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
}
.is-dark .stack-card-initials { color: rgba(255,255,255,.9); text-shadow: 0 10px 40px color-mix(in srgb, var(--brand) 60%, transparent); }
.is-light .stack-card-initials { color: color-mix(in srgb, var(--brand) 55%, white); }

@media (max-width: 767.98px) {
    .stack-card-visual.is-portrait { min-height: 110px; max-height: 130px; }
    .stack-card-initials { font-size: 3rem; }
    .stack-card-qual { margin: -.2rem 0 .6rem; font-size: var(--fs-xs); }
    .stack-card-spec { margin-bottom: .7rem; }
    .stack-card-meta { margin-bottom: 1rem; font-size: var(--fs-xs); }
}

/* Doctor photos are shown whole: the portrait is contained, and a blurred,
   enlarged copy of the same picture fills the remaining space. */
.stack-card-visual .stack-card-photo-fill {
    inset: -12%;
    width: 124%; height: 124%;
    object-fit: cover;
    filter: blur(22px) saturate(1.15);
    opacity: .75;
}
.stack-card-visual.is-portrait .stack-card-photo {
    object-fit: contain;
    object-position: center;
    z-index: 1;
}
.stack-card:hover .stack-card-visual .stack-card-photo-fill { scale: 1; }

/* Header strip never wraps: count and labels stay on one line */
.stack-card-kicker, .stack-card-count { white-space: nowrap; }
.stack-card-count { flex: none; padding-left: .5rem; }

/* Fallback when a stack cannot fit the screen: a plain list (set by site.js) */
.stack-list.is-flat .stack-card { position: relative; top: auto; margin-bottom: 0; }
.stack-list.is-flat .stack-card-inner { scale: none; }
.stack-list.is-flat .stack-card-inner::after { opacity: 0; }

@media (max-width: 767.98px) {
    /* Wider cards: use most of the gutter */
    .stack-list { margin-inline: calc(.5rem - var(--gutter)); }
    .stack-card-bar { padding-top: .45rem; padding-inline: 1rem; font-size: .66rem; gap: .5rem; }
    .stack-card-num { font-size: .9rem; }
    /* Taller photo panel showing the full picture */
    .stack-card-visual.is-portrait { aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
    .stack-card-body { padding: 1rem 1rem 1.3rem; }
}

/* ---------- 33b. Doctor stack cards (luxury variant) ------------------- */
/* Same sticky stack as the Facilities cards: only the card contents are
   restyled. Every size below is derived from the stack's own --card-h, so a
   doctor card is exactly as tall as before and the animation is unchanged. */
.stack-list--doctors {
    --lux-gold-ink: color-mix(in srgb, var(--gold) 72%, #4A3608);
    --lux-line: color-mix(in srgb, var(--gold) 30%, transparent);
}
.stack-list--doctors .stack-card-kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Ivory-and-champagne light tone; the navy tone keeps its gold glow */
.stack-list--doctors .stack-card-inner.is-light {
    background:
        radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 62%),
        radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 65%),
        linear-gradient(150deg, #FFFFFF, #F8F5EE);
    border-color: color-mix(in srgb, var(--gold) 22%, white);
}
.stack-list--doctors .is-dark { --lux-gold-ink: var(--gold); --lux-line: rgba(255,255,255,.13); }

.lux-body {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4.5vw, 5rem);
    padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 3.8vw, 3.25rem);
}
/* Oversized serif monogram, barely there */
.lux-monogram {
    position: absolute;
    left: clamp(.5rem, 2vw, 1.5rem);
    bottom: -.12em;
    font-family: var(--font-display);
    font-size: clamp(8rem, 15vw, 15rem);
    font-weight: 600;
    line-height: .8;
    letter-spacing: -.03em;
    opacity: .045;
    pointer-events: none;
    user-select: none;
}
.is-light .lux-monogram { color: var(--navy); }
.is-dark .lux-monogram { color: #fff; opacity: .05; }
.lux-copy { position: relative; z-index: 1; min-width: 0; }

.lux-eyebrow {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 .65rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lux-gold-ink);
}
.lux-eyebrow::before {
    content: "";
    flex: none;
    width: 2.25rem; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.stack-list--doctors .lux-name {
    font-size: clamp(1.7rem, 1.05rem + 2vw, 2.8rem);
    line-height: 1.06;
    letter-spacing: -.012em;
    margin: 0 0 .45rem;
}
.lux-name a { transition: color var(--t) var(--ease-soft); }
.is-light .lux-name a:hover { color: var(--brand); }
.is-dark .lux-name a:hover { color: var(--gold); }
.lux-qual { margin: 0 0 1.2rem; font-size: var(--fs-sm); letter-spacing: .05em; opacity: .8; }
.lux-summary {
    display: none;
    max-width: 52ch;
    margin: -.2rem 0 1.4rem;
    font-size: var(--fs-sm);
    line-height: 1.7;
    opacity: .85;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Spec sheet: hairline-ruled grid, no boxes. Each cell carries a left rule;
   the list is pulled left by one cell padding and clipped by 1px so the
   first column never shows a rule, whatever the column count. */
.lux-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 1.5rem -1rem;
    border-top: 1px solid var(--lux-line);
    clip-path: inset(0 0 0 calc(1rem + 1px));
}
.lux-fact {
    padding: .75rem 1rem;
    border-left: 1px solid var(--lux-line);
    border-bottom: 1px solid var(--lux-line);
    min-width: 0;
}
.lux-fact dt {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .28rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lux-gold-ink);
    white-space: nowrap;
}
.lux-fact dt i { font-size: .8rem; }
.lux-fact dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.is-light .lux-fact dd { color: var(--ink); }
.is-dark .lux-fact dd { color: #fff; }

/* Actions */
.lux-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.lux-cta {
    display: inline-flex; align-items: center; gap: .9rem;
    padding: .4rem .4rem .4rem 1.45rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
.lux-cta i {
    display: grid; place-items: center;
    width: 2.35rem; aspect-ratio: 1;
    border-radius: 50%;
    font-size: .95rem;
    transition: rotate .5s var(--ease);
}
.lux-cta:hover i { rotate: 45deg; }
.is-light .lux-cta { background: var(--navy); color: #fff; box-shadow: 0 14px 30px rgba(7,26,53,.22); }
.is-light .lux-cta:hover { background: var(--brand-deep); color: #fff; }
.is-light .lux-cta i { background: var(--gold); color: var(--navy); }
.is-dark .lux-cta { background: #fff; color: var(--navy); box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.is-dark .lux-cta:hover { background: color-mix(in srgb, var(--gold) 22%, white); color: var(--navy); }
.is-dark .lux-cta i { background: var(--navy); color: var(--gold); }
.lux-link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding-bottom: 3px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-bottom: 1px solid var(--lux-line);
    transition: gap var(--t) var(--ease), border-color var(--t) var(--ease-soft);
}
.lux-link:hover { gap: .75rem; border-bottom-color: var(--gold); }
.is-light .lux-link { color: var(--ink); }
.is-dark .lux-link { color: #fff; }
.lux-link i { color: var(--lux-gold-ink); }

/* Arched portrait in a gold hairline frame */
.lux-portrait {
    position: relative;
    z-index: 1;
    display: block;
    align-self: center;
    justify-self: end;
    height: min(560px, calc(var(--card-h) - var(--stack-bar) - 5rem));
    aspect-ratio: 4 / 5;
    margin-right: 12px;
}
.lux-portrait::before,
.lux-portrait::after {
    content: "";
    position: absolute;
    border-radius: 999px 999px 26px 26px;
    pointer-events: none;
}
.lux-portrait::before { inset: -9px; border: 1px solid color-mix(in srgb, var(--gold) 75%, transparent); }
.lux-portrait::after { inset: 0; translate: 12px 12px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); z-index: -1; }
.lux-portrait-frame {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 999px 999px 20px 20px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 14%, white), color-mix(in srgb, var(--gold) 12%, white));
    box-shadow: 0 30px 60px rgba(7,26,53,.2);
}
.is-dark .lux-portrait-frame { box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.lux-portrait-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: scale 1.2s var(--ease);
}
.stack-card:hover .lux-portrait-frame img { scale: 1.05; }
.lux-initials {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 600;
    color: color-mix(in srgb, var(--brand) 55%, white);
}

/* Experience seal */
.lux-seal {
    position: absolute;
    z-index: 2;
    left: -2.4rem; bottom: 10%;
    width: 5.6rem; aspect-ratio: 1;
    display: grid; place-content: center;
    text-align: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--brand-deep), var(--navy) 70%);
    color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--gold), 0 18px 36px rgba(7,26,53,.35);
}
.lux-seal strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--gold); }
.lux-seal small { margin-top: .2rem; font-size: .58rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.is-dark .lux-seal {
    background: linear-gradient(145deg, #F4E6BF, var(--gold));
    color: var(--navy);
    box-shadow: 0 0 0 4px var(--navy), 0 0 0 5px color-mix(in srgb, var(--gold) 60%, transparent), 0 18px 36px rgba(0,0,0,.35);
}
.is-dark .lux-seal strong { color: var(--navy); }

/* Card sizing. The card takes all the height the stack formula allows (the
   same formula as the Facilities stack, only without its 580px cap; site.js
   then narrows the covered strips so the settled stack still fits).
   Every screen shows the full card: bio plus all six details.
   - Tall screens: capped width, so the card reads as a large near-square.
   - Shorter screens (laptops): the height is fixed by the 12 visible strips,
     so the card goes full width instead and the details spread over three
     columns, which keeps everything inside the card. */
@media (min-width: 768px) {
    .stack-list--doctors {
        --card-h: min(760px, calc(100vh - var(--header-h) - 2rem - (var(--n) - 1) * 1.5rem));
        max-width: 1120px;
        margin-inline: auto;
    }
    .stack-list--doctors .stack-card-inner { border-radius: 32px; }
    .lux-body { align-items: center; }
    .lux-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lux-fact { padding-block: .9rem; }
    .lux-summary { display: -webkit-box; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .lux-portrait { height: min(340px, calc(var(--card-h) - var(--stack-bar) - 5rem)); }
}

/* Shorter screens: wide card, three columns of details, compact rhythm.
   Desktops keep the capped, two-column card down to 800px of height. */
@media (min-width: 768px) and (max-width: 991.98px) and (max-height: 959.98px),
       (min-width: 992px) and (max-height: 799.98px) {
    .stack-list--doctors { max-width: none; }
    .lux-body { padding-block: clamp(.9rem, 1.6vw, 1.4rem); column-gap: clamp(1.5rem, 3.5vw, 3.5rem); }
    .lux-eyebrow { margin-bottom: .35rem; }
    .stack-list--doctors .lux-name { font-size: clamp(1.55rem, 1rem + 1.2vw, 2.2rem); margin-bottom: .3rem; }
    .lux-qual { margin-bottom: .7rem; }
    .lux-summary { max-width: 70ch; margin: 0 0 .8rem; line-height: 1.6; -webkit-line-clamp: 2; }
    .lux-facts { margin-bottom: .95rem; }
    .lux-fact { padding-block: .5rem; }
    .lux-fact dt { margin-bottom: .15rem; }
    .lux-fact dd { -webkit-line-clamp: 2; }
    .lux-cta { padding-block: .3rem; }
    .lux-cta i { width: 2.1rem; }
}
@media (min-width: 992px) and (max-height: 799.98px) {
    .lux-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Desktop: a tall, capped-width card with two detail columns and a large
   portrait. The strips of covered cards are budgeted at 1.25rem each so the
   card itself gets the height. */
@media (min-width: 992px) and (min-height: 800px) {
    .stack-list--doctors {
        --card-h: min(740px, calc(100vh - var(--header-h) - 2rem - (var(--n) - 1) * 1.25rem));
        max-width: 1240px;
    }
    .stack-list--doctors .lux-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(2rem, 4vw, 4rem);
        padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
    }
    .stack-list--doctors .lux-copy { max-width: 540px; }
    .stack-list--doctors .lux-portrait { height: min(620px, calc(var(--card-h) - var(--stack-bar) - 4.5rem)); }
}
/* Very short screens: trim the last few pixels, never the content */
@media (min-width: 768px) and (max-height: 860px) {
    .lux-body { padding-block: .8rem; }
    .lux-eyebrow { margin-bottom: .25rem; }
    .stack-list--doctors .lux-name { font-size: clamp(1.45rem, 1rem + 1vw, 1.95rem); margin-bottom: .2rem; }
    .lux-qual { margin-bottom: .5rem; font-size: var(--fs-xs); }
    .lux-summary { margin-bottom: .6rem; font-size: var(--fs-xs); }
    .lux-facts { margin-bottom: .75rem; }
    .lux-fact { padding-block: .4rem; }
}

@media (min-width: 768px) and (max-height: 860px) {
    .lux-fact dd { -webkit-line-clamp: 1; }
}
@media (min-width: 768px) and (max-height: 760px) {
    .lux-body { padding-block: .7rem; }
    .lux-eyebrow { margin-bottom: .15rem; }
    .lux-fact { padding-block: .32rem; }
    .lux-summary { margin-bottom: .5rem; }
}

/* Phones: a compact header (small arched portrait beside the name) so the
   card stays well under its old height. The copy wrapper dissolves into the
   body grid so its children can be placed around the portrait. */
@media (max-width: 991.98px) {
    .lux-body {
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-areas:
            "photo ."
            "photo eyebrow"
            "photo name"
            "photo qual"
            "photo ."
            "summary summary"
            "facts facts"
            "actions actions";
        grid-template-rows: 1fr auto auto auto 1fr auto auto auto;
        column-gap: 1.1rem;
        row-gap: 0;
        padding: 1.1rem 1rem 1.25rem 1.1rem;
        align-items: start;
    }
    .lux-copy { display: contents; }
    .lux-monogram { display: none; }
    .lux-portrait { grid-area: photo; justify-self: start; align-self: start; height: auto; width: 100%; margin: 6px 0 0 4px; }
    .lux-portrait::before { inset: -5px; border-radius: 999px 999px 18px 18px; }
    .lux-portrait::after { translate: 6px 6px; border-radius: 999px 999px 18px 18px; }
    .lux-portrait-frame { border-radius: 999px 999px 14px 14px; box-shadow: 0 14px 28px rgba(7,26,53,.18); }
    .lux-initials { font-size: 1.9rem; }
    .lux-seal { left: auto; right: -.85rem; bottom: -.5rem; width: 2.9rem; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold), 0 8px 18px rgba(7,26,53,.3); }
    .is-dark .lux-seal { box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.3); }
    .lux-seal strong { font-size: .95rem; }
    .lux-seal small { margin-top: 0; font-size: .42rem; letter-spacing: .14em; }
    .lux-eyebrow { grid-area: eyebrow; margin: .35rem 0 .35rem; gap: .5rem; font-size: .6rem; letter-spacing: .16em; }
    .lux-eyebrow::before { width: 1.25rem; }
    .stack-list--doctors .lux-name { grid-area: name; font-size: 1.3rem; line-height: 1.12; margin: 0 0 .3rem; }
    .lux-qual { grid-area: qual; font-size: var(--fs-xs); margin: 0; }
    .lux-summary { grid-area: summary; display: -webkit-box; margin: .75rem 0 0; font-size: var(--fs-xs); line-height: 1.55; -webkit-line-clamp: 2; }
    .lux-facts { grid-area: facts; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .8rem 0 .85rem -.8rem; clip-path: inset(0 0 0 calc(.8rem + 1px)); }
    .lux-fact { padding: .42rem .8rem; }
    .lux-fact dt { font-size: .56rem; letter-spacing: .12em; }
    .lux-fact dd { font-size: var(--fs-xs); }
    .lux-actions { grid-area: actions; gap: .6rem 1.1rem; }
    .lux-cta { font-size: var(--fs-xs); padding-left: 1.1rem; }
    .lux-cta i { width: 2rem; }
    .lux-link { font-size: var(--fs-xs); }
    .stack-list--doctors .stack-card-dept { display: none; }
}
@media (max-width: 767.98px) {
    .lux-fact dd { -webkit-line-clamp: 1; font-size: .74rem; letter-spacing: -.005em; }
    .lux-fact:first-child dd { -webkit-line-clamp: 2; }
}
/* Tablets use the same compact header, scaled up, with three detail columns */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lux-body {
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-rows: 1fr auto auto auto 1fr auto auto auto;
        /* Sized by its content and centred in the fixed-height card, so the
           1fr rows only share out the portrait's extra height */
        flex: 0 0 auto;
        margin-block: auto;
        column-gap: 1.75rem;
        padding: 1.6rem 1.75rem;
    }
    .lux-eyebrow { font-size: var(--fs-2xs); }
    .stack-list--doctors .lux-name { font-size: 1.9rem; }
    .lux-qual { font-size: var(--fs-sm); }
    .lux-summary { font-size: var(--fs-sm); -webkit-line-clamp: 3; margin-top: 1.1rem; }
    .lux-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.1rem 0 1.25rem -1rem; clip-path: inset(0 0 0 calc(1rem + 1px)); }
    .lux-fact { padding: .6rem 1rem; }
    .lux-fact dt { font-size: .62rem; }
    .lux-fact dd { font-size: var(--fs-sm); }
    .lux-seal { width: 4.2rem; right: -1.2rem; }
    .lux-seal strong { font-size: 1.3rem; }
    .lux-seal small { font-size: .5rem; }
    .lux-cta, .lux-link { font-size: var(--fs-sm); }
    .stack-list--doctors .stack-card-dept { display: inline; }
}

/* ---------- 34. Doctor profile (luxury) --------------------------------- */
/* Navy-and-gold hero with an arched portrait, a hairline spec sheet lifted
   over its lower edge, then the biography, the week and a booking rail.
   Shares the gold/ivory language of the doctor stack cards. */
.dp-hero,
.dp-specs,
.dp-body {
    --dp-gold-ink: color-mix(in srgb, var(--gold) 72%, #4A3608);
    --dp-line: color-mix(in srgb, var(--gold) 30%, transparent);
}
.dp-hero { padding-top: clamp(2rem, 4vw, 3.5rem); }
.dp-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(5.5rem, 8vw, 7rem);
    border-radius: 32px;
    overflow: hidden;
    color: rgba(255,255,255,.78);
    background:
        radial-gradient(80% 110% at 100% 0%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 60%),
        radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 65%),
        linear-gradient(150deg, var(--brand-deep), var(--navy));
    box-shadow: 0 30px 70px rgba(7,26,53,.22);
}
/* A fine gold inner rule gives the panel a framed finish */
.dp-hero-grid::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(200,164,77,.22);
    border-radius: 22px;
    pointer-events: none;
}
.dp-hero-monogram {
    position: absolute;
    left: clamp(.5rem, 2vw, 2rem);
    bottom: -.14em;
    font-family: var(--font-display);
    font-size: clamp(9rem, 18vw, 17rem);
    font-weight: 600;
    line-height: .8;
    letter-spacing: -.03em;
    color: rgba(255,255,255,.035);
    pointer-events: none;
    user-select: none;
}
.dp-hero-copy { position: relative; z-index: 1; min-width: 0; }

.dp-eyebrow {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 .9rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dp-gold-ink);
}
.dp-eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .8; }
.dp-hero .dp-eyebrow, .dp-book .dp-eyebrow { color: var(--gold); }

.dp-name {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.015em;
    color: #fff;
}
.dp-qual { margin: 0 0 1.1rem; font-size: var(--fs-sm); letter-spacing: .06em; color: rgba(255,255,255,.7); }
.dp-titles {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
    margin: 0 0 1.5rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #F1E3BC;
}
.dp-titles-sep { font-size: .45rem; color: var(--gold); }
.dp-lede {
    max-width: 52ch;
    margin: 0 0 2rem;
    padding-left: 1.1rem;
    border-left: 1px solid rgba(200,164,77,.5);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: rgba(255,255,255,.8);
}

.dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.dp-cta {
    display: inline-flex; align-items: center; gap: 1rem;
    padding: .45rem .45rem .45rem 1.6rem;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
.dp-cta i {
    display: grid; place-items: center;
    width: 2.5rem; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    font-size: 1rem;
    transition: rotate .5s var(--ease);
}
.dp-cta:hover { background: color-mix(in srgb, var(--gold) 22%, white); color: var(--navy); }
.dp-cta:hover i { rotate: 45deg; }
.dp-cta--gold { background: linear-gradient(145deg, #F4E6BF, var(--gold)); }
.dp-cta--gold:hover { background: linear-gradient(145deg, #fff, #EAD49A); }

.dp-call { display: inline-flex; align-items: center; gap: .8rem; color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.dp-call i {
    display: grid; place-items: center;
    width: 2.6rem; aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(200,164,77,.55);
    color: var(--gold);
    transition: background var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}
.dp-call small, .dp-book-line small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.dp-call:hover { color: #fff; }
.dp-call:hover i { background: var(--gold); color: var(--navy); }

/* Arched portrait in a double gold hairline frame */
.dp-portrait {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(100%, 25rem);
    aspect-ratio: 4 / 5;
    margin: 12px 12px 0 0;
}
.dp-portrait::before,
.dp-portrait::after {
    content: "";
    position: absolute;
    border-radius: 999px 999px 28px 28px;
    pointer-events: none;
}
.dp-portrait::before { inset: -10px; border: 1px solid color-mix(in srgb, var(--gold) 75%, transparent); }
.dp-portrait::after { inset: 0; translate: 14px 14px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); z-index: -1; }
.dp-portrait-frame {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    overflow: hidden;
    border-radius: 999px 999px 22px 22px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 14%, white), color-mix(in srgb, var(--gold) 12%, white));
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.dp-portrait-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dp-initials { font-family: var(--font-display); font-size: 5rem; font-weight: 600; color: color-mix(in srgb, var(--brand) 55%, white); }
.dp-seal {
    position: absolute;
    z-index: 2;
    left: -2.6rem; bottom: 12%;
    width: 6.2rem; aspect-ratio: 1;
    display: grid; place-content: center;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #F4E6BF, var(--gold));
    color: var(--navy);
    box-shadow: 0 0 0 4px var(--navy), 0 0 0 5px color-mix(in srgb, var(--gold) 60%, transparent), 0 18px 36px rgba(0,0,0,.35);
}
.dp-seal strong { font-family: var(--font-display); font-size: 1.95rem; font-weight: 600; line-height: 1; }
.dp-seal small { margin-top: .25rem; font-size: .6rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }

/* Spec sheet: an ivory card lifted over the hero, hairline-ruled cells */
.dp-specs {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    margin: clamp(-4rem, -6vw, -3rem) clamp(1rem, 4vw, 3rem) 0;
    padding: .6rem 1rem;
    border-radius: 22px;
    background:
        radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 62%),
        linear-gradient(150deg, #FFFFFF, #F8F5EE);
    border: 1px solid color-mix(in srgb, var(--gold) 26%, white);
    box-shadow: 0 24px 60px rgba(7,26,53,.14);
}
.dp-spec { padding: 1.1rem 1.25rem; border-left: 1px solid var(--dp-line); min-width: 0; }
.dp-spec:first-child { border-left: 0; }
.dp-spec dt {
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: .4rem;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dp-gold-ink);
    white-space: nowrap;
}
.dp-spec dt i { font-size: .85rem; }
.dp-spec dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--ink); }
.dp-spec dd a { color: inherit; border-bottom: 1px solid var(--dp-line); transition: border-color var(--t) var(--ease-soft); }
.dp-spec dd a:hover { border-bottom-color: var(--gold); }

/* Body */
.dp-body { padding-top: clamp(3rem, 5vw, 4.5rem); }
.dp-block + .dp-block, .dp-note + .dp-block { margin-top: clamp(2.75rem, 5vw, 4rem); }
.dp-heading {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
}
.dp-prose { font-size: var(--fs-body); line-height: 1.85; }
.dp-prose > p:first-child::first-letter {
    float: left;
    margin: .08em .5rem 0 0;
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: .8;
    color: var(--dp-gold-ink);
}

.dp-note {
    display: flex; gap: 1rem;
    margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(150deg, #FFFFFF, #F8F5EE);
    border: 1px solid color-mix(in srgb, var(--gold) 26%, white);
}
.dp-note > i { color: var(--dp-gold-ink); font-size: 1.2rem; line-height: 1.4; }
.dp-note h2 { margin: 0 0 .3rem; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink); }
.dp-note p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* The week: a ruled list, open days carry a filled gold diamond */
.dp-week { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dp-line); }
.dp-day {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--dp-line);
    font-size: var(--fs-sm);
    transition: background var(--t) var(--ease-soft);
}
.dp-day.is-open:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.dp-day-name { display: flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--ink); }
.dp-day-name::before {
    content: "";
    width: .5rem; aspect-ratio: 1;
    rotate: 45deg;
    border: 1px solid var(--gold);
}
.dp-day.is-open .dp-day-name::before { background: var(--gold); }
.dp-day-time { display: flex; flex-direction: column; font-weight: 600; color: var(--ink); }
.dp-day-place { color: var(--ink-3); }
.dp-day.is-closed .dp-day-name,
.dp-day.is-closed .dp-day-time { color: var(--ink-3); font-weight: 500; font-style: italic; }

/* Booking rail */
.dp-book {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.85rem;
    border-radius: 26px;
    color: rgba(255,255,255,.75);
    background:
        radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 60%),
        linear-gradient(155deg, var(--brand-deep), var(--navy));
    box-shadow: 0 26px 60px rgba(7,26,53,.24);
}
.dp-book::after {
    content: "";
    position: absolute; inset: 10px;
    border: 1px solid rgba(200,164,77,.22);
    border-radius: 18px;
    pointer-events: none;
}
.dp-book > * { position: relative; z-index: 1; }
.dp-book h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--fs-h3); color: #fff; }
.dp-book p { margin: 0 0 1.5rem; font-size: var(--fs-xs); line-height: 1.65; }
.dp-book .dp-cta { width: 100%; justify-content: space-between; }
.dp-book-lines { margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); }
.dp-book-line {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 0 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
}
.dp-book-line i { color: var(--gold); font-size: 1.05rem; margin-top: .15rem; }
a.dp-book-line:hover { color: #F1E3BC; }

.dp-dept {
    margin-top: 1.5rem;
    padding: 1.75rem 1.85rem;
    border-radius: 22px;
    background:
        radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 62%),
        linear-gradient(150deg, #FFFFFF, #F8F5EE);
    border: 1px solid color-mix(in srgb, var(--gold) 26%, white);
    box-shadow: 0 16px 40px rgba(7,26,53,.08);
}
.dp-dept h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); }
.dp-dept p { margin: 0 0 1.25rem; font-size: var(--fs-sm); color: var(--ink-2); }
.dp-link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding-bottom: 3px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--dp-line);
    transition: gap var(--t) var(--ease), border-color var(--t) var(--ease-soft);
}
.dp-link i { color: var(--dp-gold-ink); }
.dp-link:hover { gap: .75rem; color: var(--ink); border-bottom-color: var(--gold); }

/* Tablets and phones: portrait above the copy, specs in two columns */
@media (max-width: 991.98px) {
    .dp-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .dp-portrait { order: -1; justify-self: start; width: min(62%, 17rem); margin-left: 10px; }
    .dp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: .75rem; padding: .4rem .5rem; }
    .dp-spec { border-left: 0; border-top: 1px solid var(--dp-line); }
    .dp-spec:nth-child(-n+2) { border-top: 0; }
    .dp-spec:nth-child(even) { border-left: 1px solid var(--dp-line); }
}
@media (max-width: 575.98px) {
    .dp-hero-grid { border-radius: 24px; padding-inline: 1.25rem; }
    .dp-hero-grid::after { inset: 8px; border-radius: 18px; }
    .dp-portrait { width: min(70%, 14rem); }
    .dp-seal { left: auto; right: -1.4rem; width: 4.6rem; }
    .dp-seal strong { font-size: 1.4rem; }
    .dp-seal small { font-size: .5rem; }
    .dp-spec { padding: .9rem .85rem; }
    .dp-spec dt { font-size: .56rem; letter-spacing: .12em; }
    .dp-day { grid-template-columns: 7.5rem minmax(0, 1fr); }
    .dp-day-place { grid-column: 2; margin-top: -.6rem; font-size: var(--fs-xs); }
    .dp-day-place:empty { display: none; }
    .dp-actions { gap: 1rem 1.5rem; }
}

/* ---------- 35. Hospital administrators --------------------------------- */
/* Ivory cards with an arched portrait in a gold hairline frame, laid out in
   a centred row so two, three or four sisters all sit balanced. */
.adm-section {
    --adm-gold-ink: color-mix(in srgb, var(--gold) 72%, #4A3608);
    --adm-line: color-mix(in srgb, var(--gold) 30%, transparent);
}
.adm-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
.adm-grid > .adm-card { flex: 0 1 calc((100% - 3 * clamp(1.25rem, 2.5vw, 2rem)) / 4); min-width: 240px; }
.adm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.25rem 1.5rem 1.75rem;
    border-radius: 26px;
    text-align: center;
    background:
        radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
        linear-gradient(170deg, #FFFFFF, #F8F5EE);
    border: 1px solid color-mix(in srgb, var(--gold) 24%, white);
    box-shadow: 0 18px 44px rgba(7,26,53,.08);
    transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.adm-card:hover { translate: 0 -6px; box-shadow: 0 28px 60px rgba(7,26,53,.14); }
.adm-card-portrait {
    position: relative;
    display: block;
    width: min(78%, 13.5rem);
    aspect-ratio: 4 / 5;
    margin: 8px 8px 1.6rem 0;
}
.adm-card-portrait::before,
.adm-card-portrait::after {
    content: "";
    position: absolute;
    border-radius: 999px 999px 20px 20px;
    pointer-events: none;
}
.adm-card-portrait::before { inset: -8px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); }
.adm-card-portrait::after { inset: 0; translate: 10px 10px; border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); z-index: -1; }
.adm-card-frame {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    overflow: hidden;
    border-radius: 999px 999px 16px 16px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 14%, white), color-mix(in srgb, var(--gold) 12%, white));
    box-shadow: 0 20px 40px rgba(7,26,53,.16);
}
.adm-card-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    transition: scale 1.2s var(--ease);
}
.adm-card:hover .adm-card-frame img { scale: 1.05; }
.adm-card-initials { font-family: var(--font-display); font-size: 3.2rem; font-weight: 600; color: color-mix(in srgb, var(--brand) 55%, white); }

.adm-card-body { display: flex; flex-direction: column; align-items: center; }
.adm-card-role {
    display: inline-flex; align-items: center; gap: .6rem;
    margin: 0 0 .55rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--adm-gold-ink);
}
.adm-card-role::before,
.adm-card-role::after { content: ""; width: 1.25rem; height: 1px; background: currentColor; opacity: .7; }
.adm-card-name {
    margin: 0 0 .35rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}
.adm-card-name a { color: inherit; transition: color var(--t) var(--ease-soft); }
.adm-card-name a:hover { color: var(--brand); }
.adm-card-office { margin: 0 0 1.1rem; font-size: var(--fs-sm); color: var(--ink-3); }
.adm-card-link {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: auto;
    padding-bottom: 3px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--adm-line);
    transition: gap var(--t) var(--ease), border-color var(--t) var(--ease-soft);
}
.adm-card-link i { color: var(--adm-gold-ink); }
.adm-card-link:hover { gap: .75rem; color: var(--ink); border-bottom-color: var(--gold); }

@media (max-width: 575.98px) {
    .adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
    .adm-grid > .adm-card { min-width: 0; }
    .adm-card { padding: 1.4rem .75rem 1.2rem; border-radius: 20px; }
    .adm-card-portrait { width: 82%; margin-bottom: 1.1rem; }
    .adm-card-role { font-size: .56rem; letter-spacing: .14em; gap: .35rem; }
    .adm-card-role::before, .adm-card-role::after { width: .6rem; }
    .adm-card-name { font-size: 1.05rem; }
    .adm-card-office { font-size: var(--fs-xs); margin-bottom: .8rem; }
    .adm-card-link { font-size: var(--fs-xs); }
}