/* ==========================================================================
   Brown Family Dentistry - Stylesheet
   Family-focused, warm, professional. Light + dark themes follow the
   operating system preference via prefers-color-scheme (no manual toggle).
   Brand colors are taken from the logo: brand blue + warm brown.
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
    /* Brand blue (from logo wordmark "Family Dentistry") */
    --blue-900: #063f60;
    --blue-700: #005a92;
    --blue-600: #0076bc;
    --blue-500: #2a97d4;
    --blue-500-rgb: 42, 151, 212;
    /* Light brand-blue tint, legible on dark surfaces (e.g. the footer) */
    --blue-300: #5cb8ee;
    --blue-300-rgb: 92, 184, 238;
    /* Brand brown (from logo "BROWN" box) */
    --brown-700: #6f3907;
    --brown-600: #924b09;
    --brown-500: #a9611a;
    --brown-400: #c07d33;
    --amber-500: #a9611a;
    --amber-400: #c07d33;
    --amber-contrast: #3a2708;
    --success: #2e7d5b;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(6, 63, 96, .08);
    --shadow: 0 10px 30px rgba(6, 63, 96, .10);
    --shadow-lg: 0 24px 60px rgba(6, 63, 96, .16);

    --container: 1160px;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    --transition: .25s ease;
}

/* Light theme (default) */
:root {
    --bg: #f6fafc;
    --bg-alt: #ffffff;
    --bg-soft: #eef5f9;
    --surface: #ffffff;
    --surface-2: #f2f8fb;
    --border: #dbe7ee;
    --text: #16323f;
    --text-soft: #4c6472;
    --text-muted: #6f8593;
    --heading: #063f60;
    --accent: var(--blue-600);
    --accent-strong: var(--blue-700);
    --accent-contrast: #ffffff;
    --warm: var(--brown-500);
    --hero-overlay: linear-gradient(120deg, rgba(6,63,96,.50) 0%, rgba(0,118,188,.36) 58%, rgba(146,75,9,.26) 100%);
    --topbar-bg: var(--blue-900);
    --topbar-text: #d9ecf6;
}

/* Dark theme - follows the operating system setting automatically */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1a22;
        --bg-alt: #10222d;
        --bg-soft: #132836;
        --surface: #16303e;
        --surface-2: #1b3a4b;
        --border: #244656;
        --text: #dbe9f0;
        --text-soft: #a7bfcc;
        --text-muted: #7f9aa8;
        --heading: #eaf4fa;
        --accent: var(--blue-500);
        --accent-strong: var(--blue-500);
        --accent-contrast: #06222f;
        --warm: var(--brown-400);
        --hero-overlay: linear-gradient(120deg, rgba(4,16,22,.54) 0%, rgba(6,63,96,.47) 55%, rgba(0,90,146,.33) 100%);
        --topbar-bg: #071820;
        --topbar-text: #9fc4d6;
        --shadow: 0 10px 30px rgba(0, 0, 0, .35);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    }
}

/* ---- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
    /* Sticky footer: the body fills at least the viewport and stacks its
       sections vertically so #main can grow and push the footer to the
       bottom on short pages. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
/* Let the main content absorb any leftover vertical space so the CTA strip
   and footer anchor to the bottom of the screen when content is short. */
#main { flex: 1 0 auto; }

img { max-width: 100%; display: block; height: auto; }
a { color: var(--accent-text, var(--accent)); text-decoration: none; }
a:hover { text-decoration: none; }
/* Links inside running text must not rely on color alone (WCAG 1.4.1). */
main p a:not(.btn) { text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; }
main p a:not(.btn):hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--heading);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--accent); color: var(--accent-contrast);
    padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 600; font-size: 1rem;
    padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; text-align: center; line-height: 1.2;
    transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .55rem 1.05rem; font-size: .92rem; }
.btn--primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-strong); box-shadow: var(--shadow); }
.btn--outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
/* Unified "Call" ghost button. Self-contained glass pill so it looks identical
   on every background: on the dark hero image the tint reads as a subtle glass
   pill, and on light content cards (footer CTA strip, financial page) the same
   smoked backing keeps the white label and border legible. This is the single
   source of truth, all Call CTAs across the site use it. */
.btn--ghost {
    background: rgba(17, 34, 51, .68);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover {
    background: rgba(17, 34, 51, .8);
    border-color: rgba(255, 255, 255, .85);
    color: #fff;
}
.btn--amber { background: var(--amber-500); color: var(--amber-contrast); }
.btn--amber:hover { background: var(--amber-400); }

/* Primary CTA on the dark navy Dental Club block. This button must NOT be
   derived from the same --accent tokens that color the card background, or the
   two converge into one tone under some admin themes and the CTA vanishes.
   Instead it uses a self-contained warm brand gold (the brown/gold side of the
   logo) which is a true complementary contrast to the navy card and stays
   legible on every theme. Dark brown text + soft lifted shadow read as a
   solid, premium pill that clearly stands apart from the ghost button. */
.btn--club {
    background: linear-gradient(145deg, #f6c979, #e9a94c);
    color: #3a2708;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .45);
    font-weight: 700;
}
.btn--club:hover {
    background: linear-gradient(145deg, #ffd68e, #f2b65c);
    color: #2c1d05;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* ---- Topbar --------------------------------------------------------------- */
.topbar { background: var(--topbar-bg); color: var(--topbar-text); font-size: .86rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar a { color: var(--topbar-text); display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: #fff; }
@media (max-width: 620px) { .topbar__item:first-child { display: none; } .topbar__inner { justify-content: center; } }

/* ---- Header / nav --------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 92px; padding-block: .5rem; }

/* Floating "brand plate" - a mounted badge that hangs below the header line */
.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.6rem 1.15rem;
    margin: .3rem 0 -2.7rem;      /* dips below the header baseline */
    background:
        radial-gradient(130% 150% at 50% -20%,
            color-mix(in srgb, var(--accent) 10%, var(--bg-alt)) 0%,
            var(--bg-alt) 45%,
            var(--surface-2) 100%);
    border-radius: var(--radius-lg);
    box-shadow:
        0 26px 54px color-mix(in srgb, var(--accent) 26%, transparent),
        0 10px 22px color-mix(in srgb, var(--warm) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    color: var(--heading);
    z-index: 30;
    transition: transform var(--transition), box-shadow var(--transition), padding var(--transition), margin var(--transition);
    will-change: transform;
    animation: brand-drop .6s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes brand-drop {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Brand-gradient ring around the plate */
.brand::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.8px;
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 42%, var(--brown-500) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: .95;
}
/* Soft brand glow blooming beneath the plate */
.brand::after {
    content: "";
    position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
    width: 82%; height: 30px; border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
    filter: blur(7px);
    z-index: -1; pointer-events: none;
}
.brand:hover {
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow:
        0 34px 64px color-mix(in srgb, var(--accent) 32%, transparent),
        0 12px 24px color-mix(in srgb, var(--warm) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}
.brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.brand__logo {
    display: block; height: 88px; width: auto; flex: none;
}
/* When the page is scrolled, tuck the plate up a little so it feels anchored */
.site-header.is-scrolled .brand {
    padding: .7rem 1.25rem;
    margin-bottom: -1.9rem;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.site-header.is-scrolled .brand__logo { height: 66px; }

@media (max-width: 900px) {
    .brand { margin-bottom: -2.1rem; padding: .8rem 1.2rem; }
    .brand__logo { height: 68px; }
    .site-header.is-scrolled .brand__logo { height: 58px; }
}
@media (max-width: 540px) {
    .brand { margin-bottom: -1.6rem; padding: .6rem .95rem; border-radius: var(--radius); }
    .brand__logo { height: 54px; }
    .brand::after { bottom: -12px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand { animation: none; }
    .brand:hover { transform: none; }
}

.nav { margin-left: auto; }
.nav__menu { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
.nav__menu > li:not(.nav__cta) > a {
    display: block; padding: .55rem .85rem; border-radius: var(--radius-sm);
    color: var(--text); font-weight: 500;
}
.nav__menu > li:not(.nav__cta) > a:hover,
.nav__menu > li:not(.nav__cta) > a[aria-current="page"] { background: var(--surface-2); color: var(--accent-text, var(--accent)); text-decoration: none; }
.nav__menu > li:not(.nav__cta) > a[aria-current="page"] { font-weight: 600; }
.nav__cta { margin-left: .35rem; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--heading); margin: 5px 0; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav__toggle { display: block; margin-left: auto; }
    .nav__menu {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: .12rem;
        background: var(--bg-alt); border-bottom: 1px solid var(--border);
        padding: .85rem 1.25rem 1.4rem; box-shadow: var(--shadow-lg);
        max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
        transition: max-height var(--transition), opacity var(--transition), visibility var(--transition);
    }
    .nav__menu.is-open { max-height: 88vh; overflow-y: auto; visibility: visible; opacity: 1; }

    /* Links indented toward the right, aligned to the edge with an accent dot */
    .nav__menu > li { position: relative; }
    .nav__menu > li:not(.nav__cta) > a {
        display: flex; align-items: center; justify-content: flex-end;
        text-align: right;
        padding: .95rem 1rem .95rem 2.6rem;   /* deep left indent pushes items right */
        border-radius: var(--radius-sm);
        border-bottom: 1px solid var(--border);
        font-size: 1.06rem; font-weight: 600; color: var(--heading);
        transition: background var(--transition), color var(--transition), padding var(--transition);
    }
    .nav__menu > li:not(.nav__cta):last-of-type > a { border-bottom: 0; }
    .nav__menu > li:not(.nav__cta) > a::after {
        content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
        background: var(--accent); margin-left: .75rem;
        opacity: 0; transform: scale(0);
        transition: opacity var(--transition), transform var(--transition);
    }
    .nav__menu > li:not(.nav__cta) > a:hover,
    .nav__menu > li:not(.nav__cta) > a[aria-current="page"] {
        background: var(--surface-2); color: var(--accent-text, var(--accent));
        text-decoration: none; padding-right: 1.35rem;
    }
    .nav__menu > li:not(.nav__cta) > a:hover::after,
    .nav__menu > li:not(.nav__cta) > a[aria-current="page"]::after { opacity: 1; transform: scale(1); }

    .nav__cta { margin: .55rem 0 0; }
    .nav__cta:first-of-type { margin-top: 1rem; }
    .nav__cta .btn { width: 100%; }
    /* Keep the nav pushed to the right edge so the hamburger sits away from the logo */
    .nav { margin-left: auto; display: flex; justify-content: flex-end; }
}

/* ---- Hero ----------------------------------------------------------------- */
.hero { position: relative; color: #fff; isolation: isolate; }
@media (min-width: 900px) { .hero { min-height: 620px; display: flex; align-items: center; } }
.hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 18%; }
/* Real <img> instead of a CSS background so the browser can prioritize it
   (fetchpriority="high") and paint the LCP element sooner. */
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
/* Brand overlay + a left-anchored dark scrim so the headline, lead, and trust
   labels keep AA contrast regardless of how bright the hero photo is. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,16,22,.72) 0%, rgba(4,16,22,.34) 46%, rgba(4,16,22,0) 74%), var(--hero-overlay); }
.hero__inner { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); max-width: 720px; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    letter-spacing: .04em; backdrop-filter: blur(4px);
}
/* Eyebrow + rating share one row above the headline so the social proof
   leads the hero without pushing the CTAs down the page. */
.hero__topline { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber-400) 30%, transparent); }
.hero h1 { color: #fff; margin-bottom: .5rem; }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255,255,255,.92); max-width: 40em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
/* Social-proof badge: third-party validation carries more weight than
   self-claims, so this sits high in the hero and links to Google reviews. */
.hero__rating {
    display: inline-flex; align-items: center; gap: .55rem;
    text-decoration: none; padding: .45rem .85rem; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background var(--transition), transform var(--transition);
}
.hero__rating:hover, .hero__rating:focus-visible { background: rgba(255,255,255,.2); transform: translateY(-1px); }
.hero__rating-stars { color: #ffce54; letter-spacing: 1px; font-size: 1rem; line-height: 1; }
.hero__rating-text { color: #fff; font-size: .9rem; }
.hero__rating-text strong { font-weight: 700; }

/* Seasonal celebration badge — floats in the hero's top-right corner, shown
   only while a holiday is active (rendered server-side by celebrations.php).
   Glassy pill tuned for the dark hero, using the brand blue/amber tokens. */
.hero__celebrate {
    position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 4vw, 2.5rem);
    z-index: 3;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem 1rem .55rem .85rem;
    font-size: .85rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
    color: #fff; white-space: nowrap; border-radius: 999px;
    background: color-mix(in srgb, var(--blue-500) 26%, rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: hero-celebrate-in .7s cubic-bezier(.22,1,.36,1) .4s both;
}
.hero__celebrate-emoji {
    font-size: 1.1rem; line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
    animation: hero-celebrate-bob 3.2s ease-in-out infinite;
}
@keyframes hero-celebrate-in {
    from { opacity: 0; transform: translateY(-8px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-celebrate-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-2px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__celebrate { animation: none; }
    .hero__celebrate-emoji { animation: none; }
}
.hero__inner .hero__trust {
    display: flex; flex-wrap: nowrap; align-items: stretch; margin-top: 2rem;
    padding: .35rem; gap: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    max-width: max-content;
}
.hero__trust li {
    list-style: none; display: flex; align-items: flex-start; gap: .8rem;
    padding: .85rem 1.4rem; position: relative; flex: 1;
}
.hero__trust li + li::before {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 1px; background: rgba(255,255,255,.22);
}
.hero__trust-icon {
    width: 26px; height: 26px; flex-shrink: 0; color: var(--amber-400);
}
.hero__trust-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero__trust strong {
    display: block; font-family: var(--font-display); font-size: 1.35rem;
    color: #fff; line-height: 1.1;
}
.hero__trust span { font-size: .82rem; color: rgba(255,255,255,.82); white-space: nowrap; }
.hero__inner ul { padding: 0; margin: 0; }

@media (max-width: 620px) {
    /* On phones the badge drops out of the corner into normal flow at the top
       of the hero (centered), so it can never overlap the headline. */
    .hero__celebrate {
        position: static; display: flex; width: max-content; max-width: 100%;
        margin: clamp(2.5rem, 12vw, 4rem) auto 0;
        animation-delay: .2s;
    }
    .hero__inner .hero__trust {
        flex-direction: column; align-items: stretch;
        width: 100%; max-width: 100%;
        margin-top: 2.4rem;
    }
    .hero__trust li { padding: .9rem 1.1rem; }
    .hero__trust li + li::before {
        left: 1.1rem; right: 1.1rem; top: 0; bottom: auto;
        width: auto; height: 1px;
    }

    /* Rating badge on mobile: give it its own line under the eyebrow and a
       larger, easier-to-tap target so the social proof reads clearly instead
       of squeezing into a cramped pill next to the eyebrow. */
    .hero__topline { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .hero__rating {
        gap: .6rem; padding: .6rem .95rem;
        border-radius: 14px;
        background: rgba(255,255,255,.14);
    }
    .hero__rating-stars { font-size: 1.05rem; }
    .hero__rating-text { font-size: .95rem; line-height: 1.15; }
    .hero__rating-text strong { font-size: 1.05rem; }
}

/* ---- Page hero (interior) ------------------------------------------------- */
.page-hero { position: relative; color: #fff; isolation: isolate; text-align: center; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-overlay); }
.page-hero__inner { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.92); max-width: 46em; margin: 0 auto; }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.8); margin-bottom: .8rem; }
.breadcrumb a { color: rgba(255,255,255,.9); }

/* ---- Insurance & financing band ------------------------------------------ */
/* Reassurance section under the hero. Answers cost/coverage questions at the
   point of intent: three scannable cards, each with an icon, a title, and a
   short supporting line, plus a link through to the financial page. */
.assure-band {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    padding-top: 2.75rem; padding-bottom: 2.75rem;
}
.assure-band__head { text-align: center; margin-bottom: 1.75rem; }
.assure-band__eyebrow {
    margin: 0 0 .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accent-text, var(--accent));
}
.assure-band__title {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--heading); line-height: 1.2;
}
.assure-band__list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1rem; margin: 0 0 1.75rem; padding: 0; list-style: none;
}
.assure-band__item {
    display: flex; align-items: flex-start; gap: .9rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.assure-band__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.assure-band__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(var(--blue-500-rgb), .12); color: var(--accent);
}
.assure-band__text { display: flex; flex-direction: column; gap: .2rem; }
.assure-band__name { font-weight: 700; color: var(--heading); line-height: 1.3; }
.assure-band__desc { font-size: .9rem; color: var(--text-soft); line-height: 1.45; }
.assure-band__link {
    display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
    width: 100%; font-weight: 700; font-size: .95rem; color: var(--accent-text, var(--accent));
    text-decoration: none;
}
.assure-band__link:hover { color: var(--accent-strong); text-decoration: underline; }
.assure-band__link svg { transition: transform var(--transition); }
.assure-band__link:hover svg { transform: translateX(3px); }
@media (max-width: 780px) {
    .assure-band__list { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .assure-band__item { align-items: center; }
}

/* Mobile refinement: tighten the section, keep the eyebrow/title left-aligned
   with the card stack, slim down cards, and turn the footer link into a real
   full-width tap target so the whole block reads as one clean column. */
@media (max-width: 560px) {
    .assure-band { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .assure-band__head {
        text-align: left; margin-bottom: 1.25rem;
        max-width: 460px; margin-inline: auto;
    }
    .assure-band__eyebrow { font-size: .72rem; letter-spacing: .1em; }
    .assure-band__title { font-size: 1.55rem; }
    .assure-band__list { gap: .7rem; margin-bottom: 1.25rem; }
    .assure-band__item { align-items: center; gap: .8rem; padding: .95rem 1rem; }
    .assure-band__icon { width: 40px; height: 40px; border-radius: 10px; }
    .assure-band__name { font-size: .98rem; }
    .assure-band__desc { font-size: .86rem; }
    .assure-band__link {
        max-width: 460px; margin-inline: auto;
        padding: .95rem 1rem; border-radius: var(--radius);
        background: var(--accent); color: var(--accent-contrast);
        box-shadow: var(--shadow-sm);
    }
    .assure-band__link:hover {
        text-decoration: none; color: var(--accent-contrast);
        background: var(--accent-strong);
    }
}

/* ---- Sections ------------------------------------------------------------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--alt { background: var(--bg-soft); }
.section__head { max-width: 720px; margin: 0 auto 2.6rem; text-align: center; }
.section__head--left { margin-left: 0; text-align: left; }
.eyebrow { display: inline-block; color: var(--warm-text, var(--warm)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: .6rem; }
.lead { font-size: 1.12rem; color: var(--text-soft); }

/* ---- Welcome / split ------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; }
/* Top-frame team photo so heads/faces stay in view instead of being cropped */
.split__media--top img { object-position: center top; }
.split__media { position: relative; }
.split__badge {
    position: absolute; bottom: -18px; left: -18px; background: var(--accent); color: var(--accent-contrast);
    border-radius: var(--radius); padding: 1rem 1.3rem; box-shadow: var(--shadow); max-width: 220px;
}
.split__badge strong { font-family: var(--font-display); font-size: 1.6rem; display: block; line-height: 1; margin-bottom: .25rem; }
.split__badge span { display: block; font-size: .82rem; line-height: 1.3; }
@media (max-width: 800px) {
    .split { grid-template-columns: 1fr; }
    .split--reverse .split__media { order: 0; }
    .split__badge { left: 12px; }
}

/* ---- Feature cards (family values) --------------------------------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; }
.feature {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.feature__icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-bottom: 1rem;
}
.feature h3 { margin-bottom: .4rem; }
.feature p { color: var(--text-soft); margin: 0; font-size: .96rem; }

/* ---- Service grid --------------------------------------------------------- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.service-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm); text-align: center;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex; flex-direction: column; align-items: center;
}
.service-card, .service-card:hover { text-decoration: none; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.service-card__icon {
    width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Icon is a single-color PNG used as an alpha mask, then filled with a solid
   color: black in light mode, white in dark mode. The per-icon mask-image is
   set inline on the element (not via a custom property): Safari resolves a
   relative url() inside a custom property against the stylesheet that uses it
   (css/), which 404s and blanks the icon. An inline mask-image resolves
   against the document, so it works in every browser. */
.service-card__icon .icon-glyph {
    width: 46px; height: 46px;
    background-color: #000;
    -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
    mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.service-card h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.service-card p { color: var(--text-soft); font-size: .92rem; margin: 0; }

/* ---- Detailed service list ------------------------------------------------ */
.service-list { display: grid; gap: 1.2rem; }
.service-item {
    display: grid; grid-template-columns: 96px 1fr; gap: 1.4rem; align-items: start;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.6rem; box-shadow: var(--shadow-sm); scroll-margin-top: 100px;
}
.service-item__icon { width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.service-item__icon .icon-glyph {
    width: 56px; height: 56px;
    background-color: #000;
    -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
    mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
/* Icons flip to white in dark mode */
@media (prefers-color-scheme: dark) {
    .service-card__icon .icon-glyph,
    .service-item__icon .icon-glyph { background-color: #fff; }
}
.service-item h3 { margin-bottom: .4rem; }
/* Temporary highlight when a service is opened from a link or the jump grid */
.service-item.is-highlighted { animation: service-highlight 2.4s ease-in-out forwards; }
@keyframes service-highlight {
    /* Two soft swells: the accent glow and a gentle background tint fade in and
       back out smoothly twice, then settle to the resting card style. */
    0%   { box-shadow: var(--shadow-sm);                                            border-color: var(--border); background: var(--surface); }
    25%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
    50%  { box-shadow: var(--shadow-sm);                                            border-color: var(--border); background: var(--surface); }
    75%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
    100% { box-shadow: var(--shadow-sm);                                            border-color: var(--border); background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
    .service-item.is-highlighted { animation: none; outline: 2px solid var(--accent); outline-offset: 3px; }
}
.service-item p { color: var(--text-soft); margin: 0; }
@media (max-width: 560px) {
    .service-item { grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.2rem; }
    .service-item__icon { width: 64px; height: 64px; }
    .service-item__icon .icon-glyph { width: 38px; height: 38px; }
}

/* ---- Team ----------------------------------------------------------------- */
.doctor-card {
    display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: var(--shadow);
}
.doctor-card__photo { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top; }
.doctor-card h2 { margin-bottom: .2rem; }
.doctor-card .role { color: var(--warm-text, var(--warm)); font-weight: 600; margin-bottom: 1rem; }
@media (max-width: 720px) { .doctor-card { grid-template-columns: 1fr; text-align: center; } .doctor-card__photo { max-width: 300px; margin: 0 auto; } }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.team-card__frame { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.team-card__photo { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top; display: block; }
.team-card__body { padding: 1.2rem 1.3rem 1.5rem; }
.team-card h3 { margin-bottom: .1rem; }
.team-card .role { color: var(--warm-text, var(--warm)); font-weight: 600; font-size: .9rem; margin-bottom: .7rem; }
.team-card p { color: var(--text-soft); font-size: .92rem; margin: 0; }

/* ---- Financial / info blocks ---------------------------------------------- */
.info-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem; box-shadow: var(--shadow-sm);
}
.info-card h3, .info-card h2 { color: var(--accent); }
.info-card > h2 { font-size: 1.28rem; }

/* ---- Patient forms / download cards --------------------------------------- */
.form-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.2rem, 3vw, 1.8rem); margin-top: 2rem;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-card {
    display: flex; flex-direction: column; gap: 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem; box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.form-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.form-card__icon {
    float: right; margin: -6px 0 0.4rem 30px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; flex: none;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
}
.form-card__icon svg { width: 26px; height: 26px; }
.form-card__body { display: flow-root; flex: 1; }
.form-card__body h3 { margin: 0 0 .6rem; color: var(--text); font-size: 1.2rem; }
.form-card h3 { margin: 0; color: var(--text); font-size: 1.2rem; }
.form-card__desc { color: var(--text-soft); font-size: .95rem; margin: 0; }
.form-card .btn { align-self: flex-start; margin-top: .3rem; }
.form-card .btn svg { width: 18px; height: 18px; margin-right: .5rem; vertical-align: -3px; }
/* ---- Dental Club membership card ------------------------------------------ */
.club {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Single solid theme color, no gradient. Recolors with the active admin
       theme via --accent-strong, blended toward the deep navy topbar tone so
       white text has stronger contrast. */
    background: color-mix(in srgb, var(--accent-strong) 55%, var(--blue-900));
    color: color-mix(in srgb, #fff 92%, var(--accent));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    box-shadow: var(--shadow-lg);
}
.club h2, .club h3 { color: #fff; }

/* soft glow accents removed: the card is now a single solid color. */
.club__glow { display: none; }

/* header */
.club__header { text-align: center; max-width: 60ch; margin: 0 auto; }
.club__eyebrow { color: color-mix(in srgb, #fff 55%, var(--accent)); margin-bottom: .5rem; }
.club__title { margin: 0 0 .7rem; font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.1; }
.club__intro { color: color-mix(in srgb, #fff 80%, var(--accent)); margin: 0 auto; }
.club__renewal {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1.2rem; padding: .5rem 1rem;
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    color: color-mix(in srgb, #fff 90%, var(--warm));
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
}
.club__renewal svg { color: color-mix(in srgb, #fff 48%, var(--warm)); }

/* benefit panels */
.club__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2rem; }
@media (max-width: 720px) { .club__cols { grid-template-columns: 1fr; } }
.club__panel {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.club__panel:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.32);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.club__panel-head { display: flex; align-items: center; justify-content: space-between; gap: .9rem; margin-bottom: 1.1rem; }
.club__panel-head h3 { margin: 0; font-size: 1.15rem; }
.club__tag {
    flex: none;
    display: inline-block;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .18rem .6rem; border-radius: 999px;
}
/* Both membership pills use a 20% white translucent fill so they read as subtle
   frosted labels on the solid dark accent card. White label keeps them legible. */
.club__tag--free { color: #fff; background: rgba(255, 255, 255, .2); }
.club__tag--save { color: #fff; background: rgba(255, 255, 255, .2); }

/* stunning check list */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check-list li {
    position: relative; padding-left: 2.5rem;
    line-height: 1.4; color: color-mix(in srgb, #fff 88%, var(--accent));
}
.check-list li::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,.28);
    transition: transform var(--transition);
}
.club__panel:hover .check-list li::before { transform: scale(1.08); }

/* cta row */
.club__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.club__cta .btn { min-width: 15rem; }
@media (max-width: 560px) { .club__cta .btn { min-width: 0; width: 100%; } }
/* .btn--ghost is defined once near the top of this file (unified glass pill). */

/* ---- Contact / appointment ------------------------------------------------ */
/* ---- Contact page (redesigned) -------------------------------------------
   Layout: quick-connect tiles, a message form paired with an info sidebar,
   and a full-bleed map with a floating address card. Fully theme-driven. */

/* Quick-connect tiles */
.contact-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
@media (max-width: 900px) { .contact-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .contact-tiles { grid-template-columns: 1fr; } }
.contact-tile {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.6rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.contact-tile:hover, .contact-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
    text-decoration: none;
}
.contact-tile__icon {
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: .6rem;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.contact-tile__icon svg { width: 24px; height: 24px; }
.contact-tile__label { font-weight: 700; color: var(--heading); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.contact-tile__value { color: var(--text); font-weight: 600; font-size: 1.08rem; }
.contact-tile__meta { color: var(--text-muted); font-size: .88rem; }

/* Message form panel (full width, centered) */
.contact-panel {
    max-width: 860px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.6rem, 3vw, 2.6rem);
}
.contact-panel .section__head { text-align: left; max-width: none; margin: 0 0 1.6rem; }
.contact-panel__lead { color: var(--text-soft); margin-bottom: 1.6rem; }
.contact-panel .form button[type="submit"] { justify-self: start; }
@media (max-width: 520px) { .contact-panel .form button[type="submit"] { justify-self: stretch; } }

/* Email panel: the contact page sends patients to their own mail client rather
   than posting a website form, so this block has to carry both the one-tap
   mailto and a plain, selectable address for anyone on browser-based webmail. */
.email-panel {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.6rem, 4vw, 2.8rem);
    align-items: start;
}
@media (max-width: 720px) { .email-panel { grid-template-columns: 1fr; gap: 1.8rem; } }
.email-panel__main { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 520px) {
    .email-panel__main { align-items: stretch; }
    .email-panel__main .btn { justify-content: center; }
}
.email-panel__hint { font-size: .88rem; color: var(--text-muted); margin: .8rem 0 0; }
.email-panel__or {
    margin: 1.4rem 0 .3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    width: 100%;
    color: var(--text-soft);
    font-size: .92rem;
}
.email-panel__address {
    font-weight: 600;
    /* The address is long enough to wrap mid-word on a phone, which reads badly,
       so it scales down just enough to stay on one line at 360px and up. */
    font-size: clamp(.86rem, 3.3vw, 1.02rem);
    color: var(--accent);
    overflow-wrap: anywhere;
}
.email-panel__aside {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
}
.email-panel__aside h3 { font-size: 1.02rem; margin: 0 0 .7rem; }
.email-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.email-checklist li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--text-soft);
    font-size: .94rem;
}
.email-checklist li::before {
    content: "";
    position: absolute;
    left: .25rem; top: .42em;
    width: .42rem; height: .72rem;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.contact-panel .form__note { margin: 1.6rem 0 0; }

/* Standalone office-hours band */
.hours-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
@media (max-width: 820px) { .hours-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .hours-band { grid-template-columns: 1fr; } }
.hours-day {
    position: relative;
    text-align: center;
    padding: 1.6rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.hours-day__days { font-weight: 700; color: var(--heading); margin-bottom: .4rem; }
.hours-day__time { color: var(--text-soft); font-size: .98rem; }
.hours-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.hours-day.is-today .hours-day__days, .hours-day.is-today .hours-day__time { color: var(--accent-strong); }
.hours-day__badge {
    position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
    font: 600 .66rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent-contrast); background: var(--accent);
    padding: .28rem .55rem; border-radius: 999px; white-space: nowrap;
}
.hours-day.is-closed .hours-day__time { color: var(--text-muted); }

.hours-follow { text-align: center; margin: 2rem 0 0; color: var(--text-soft); }
.hours-follow a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.hours-follow svg { width: 22px; height: 22px; }

/* Full-bleed map with floating address card */
.contact-map-section { position: relative; }
.contact-map-section .map-embed { height: clamp(340px, 45vw, 460px); border-radius: 0; box-shadow: none; display: block; }
.map-card {
    position: absolute; top: 50%; left: max(24px, calc((100% - var(--container)) / 2)); transform: translateY(-50%);
    width: min(340px, calc(100% - 48px));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 1.6rem 1.6rem;
}
.map-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.map-card p { color: var(--text-soft); margin: 0 0 1rem; }
.map-card .btn { width: 100%; }
@media (max-width: 720px) {
    .map-card {
        position: static; transform: none; width: auto; margin: -2.5rem 1rem 0;
        left: auto;
    }
}
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.hours-table th { font-weight: 500; color: var(--text); }
.hours-table td { color: var(--text-soft); text-align: right; }

.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Form */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .9rem; color: var(--heading); }
.field input, .field select, .field textarea {
    font: inherit; line-height: 1.4; color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .75rem .9rem; width: 100%; transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Drop the native select chrome so the box model (and therefore the height)
   matches the text inputs exactly, then redraw the caret with currentColor so
   it follows the light/dark theme. */
.field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: auto; padding-right: 2.4rem; cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-repeat: no-repeat;
}
.field select::-ms-expand { display: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field__req { color: var(--accent-strong, var(--accent)); margin-left: .1rem; }
/* Honeypot. Taken out of the layout, the tab order and the accessibility tree,
   so only a script filling every input will touch it. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .85rem; color: var(--text-muted); }
.form-message { padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-weight: 500; display: none; }
.form-message.is-visible { display: block; }
.form-message--ok { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.form-message--err { background: color-mix(in srgb, #e05555 16%, transparent); color: #e05555; }

/* ---- CTA strip ------------------------------------------------------------
   Option 1: clean "frosted surface card". Fully theme-driven, so it recolors
   automatically when the active theme changes in the admin.
   --------------------------------------------------------------------------- */
.cta-strip { background: transparent; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.cta-strip__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.5rem, 4vw, 2.8rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.cta-strip__title { color: var(--heading); margin: 0 0 .25rem; }
.cta-strip__text { margin: 0; color: var(--text-soft); }
.cta-strip__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
/* The Call button here uses the shared .btn--ghost glass pill (defined once at
   the top of this file) so it is identical to the home page hero CTA. */

/* Mobile: stack into a centered card */
@media (max-width: 720px) {
    .cta-strip { padding: 2.5rem 1rem 2.25rem; }
    .cta-strip__inner {
        flex-direction: column; align-items: center; text-align: center;
        gap: 1.6rem;
        padding: 2.4rem 1.6rem;
    }
    .cta-strip__title { font-size: 1.75rem; }
    .cta-strip__text { max-width: 34ch; margin: 0 auto; }
    .cta-strip__actions { flex-direction: column; align-items: stretch; width: 100%; gap: .7rem; max-width: 320px; }
    .cta-strip__actions .btn { width: 100%; }
}

/* ---- Mobile sticky contact bar ------------------------------------------- */
.mobile-cta-bar { display: none; }
@media (max-width: 620px) {
    .mobile-cta-bar {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        background: var(--surface); border-top: 1px solid var(--border);
        box-shadow: 0 -6px 24px rgba(0,0,0,.14);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-cta-bar__btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
        padding: .95rem 1rem; font-weight: 700; font-size: 1rem; text-decoration: none;
        min-height: 52px;
    }
    .mobile-cta-bar__btn--call { color: var(--accent-text, var(--accent)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
    .mobile-cta-bar__btn--book { color: var(--accent-contrast); background: var(--accent); }
    /* Keep the footer content clear of the fixed bar. */
    body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0)); }
}

/* ---- Footer --------------------------------------------------------------- */
/* The footer is a single flat surface that tracks the OS theme, matching the
   header's solid background. Its scoped color tokens map onto the global theme
   tokens so text, borders and accents adapt automatically in light and dark. */
.site-footer {
    --f-text: var(--text-soft);
    --f-text-strong: var(--heading);
    --f-muted: var(--text-muted);
    --f-accent: var(--accent);
    --f-accent-rgb: var(--blue-500-rgb);
    --f-border: var(--border);
    --f-surface: var(--surface-2);
    position: relative;
    overflow: hidden;
    color: var(--f-text);
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
}
/* Decorative glow removed for a clean, solid single-color footer */
.site-footer__glow { display: none; }
.site-footer__grid,
.site-footer__banner,
.footer-cards { position: relative; }

/* Compact brand banner: horizontal split, ~half the previous height */
.site-footer__banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 1.25rem;
}
.site-footer__brand-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    flex: 1 1 320px;
    min-width: 0;
}
.site-footer__nav-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .65rem;
}
.site-footer__col--brand { max-width: 320px; }

/* Footer logo sits on a clean white plate so the colored logo reads on dark */
.brand--footer {
    display: inline-flex;
    padding: .5rem .75rem;
    margin: 0;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--f-border);
    transition: transform var(--transition), box-shadow var(--transition);
    flex: none;
}
.brand--footer::before, .brand--footer::after { content: none; }
.brand--footer .brand__logo { height: 46px; width: auto; }
.brand--footer:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.brand--footer:focus-visible { outline: 3px solid var(--f-accent); outline-offset: 3px; }

.site-footer__blurb { max-width: 40ch; font-size: .9rem; line-height: 1.55; color: var(--f-text); margin: 0; }

/* Horizontal footer navigation */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem 1.3rem;
    margin: 0;
}

@media (max-width: 720px) {
    .site-footer__banner { flex-direction: column; align-items: center; text-align: center; }
    .site-footer__brand-group { flex-direction: column; align-items: center; text-align: center; flex-basis: auto; }
    .site-footer__nav-group { align-items: center; }
    .footer-nav { justify-content: center; }
}
.footer-nav a {
    position: relative;
    color: var(--f-text);
    font-size: .95rem;
    font-weight: 500;
    padding: .25rem 0;
    transition: color var(--transition);
}
.footer-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px; border-radius: 999px;
    background: linear-gradient(90deg, var(--blue-500), var(--brown-500));
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition);
}
.footer-nav a:hover { color: var(--f-text-strong); text-decoration: none; }
.footer-nav a:hover::after { transform: scaleX(1); }

/* Info band: Visit + Contact share a row, Hours spans full width below */
.footer-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0 1.25rem clamp(3rem, 5vw, 4rem);
}
.footer-card--hours { grid-column: 1 / -1; }
@media (max-width: 820px) { .footer-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.footer-card {
    padding: 1.75rem 1.6rem;
    background: var(--f-surface);
    border: 1px solid var(--f-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), transform var(--transition);
}
.footer-card:hover { border-color: rgba(var(--f-accent-rgb), .4); transform: translateY(-3px); }
.footer-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 1rem;
    border-radius: 12px;
    color: var(--f-accent);
    background: rgba(var(--f-accent-rgb), .12);
    border: 1px solid var(--f-border);
}
.footer-card__title {
    font-family: var(--font-body);
    font-size: 1.05rem; font-weight: 700;
    color: var(--f-text-strong);
    margin: 0 0 .6rem;
}
.footer-card__body { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--f-text); }
.footer-card__body a { color: var(--f-text); transition: color var(--transition); }
.footer-card__body a:hover { color: var(--f-accent); }
.footer-card__muted { color: var(--f-muted); }
.footer-card__link {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .9rem; font-size: .9rem; font-weight: 600;
    color: var(--f-accent);
    transition: gap var(--transition);
}
.footer-card__link:hover { gap: .6rem; text-decoration: none; }

/* Hours card header lays the badge alongside the title */
.footer-card--hours .footer-card__hours-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin-bottom: 1rem;
}
.footer-card--hours .footer-card__icon { margin-bottom: 0; }
.footer-card--hours .footer-card__title { margin: 0; margin-right: auto; }

/* Office hours */
.site-footer__hours { list-style: none; padding: 0; margin: 0; }
.site-footer__hours li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem .1rem .6rem .7rem; font-size: .9rem; border-bottom: 1px solid var(--f-border); position: relative; }
.site-footer__hours li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--f-accent); border-radius: 999px; transition: height var(--transition); }
.site-footer__hours li:last-child { border-bottom: 0; }
.site-footer__hours .hours-day { color: var(--f-text); }
.site-footer__hours .hours-time { color: var(--f-text-strong); font-weight: 600; text-align: right; white-space: nowrap; }
.site-footer__hours .hours-time--off { color: var(--f-muted); font-weight: 500; font-style: italic; }
/* Highlight the current day so patients spot today's hours at a glance */
.site-footer__hours li.is-today { padding: .85rem .6rem .85rem .7rem; margin: .2rem 0; border-bottom-color: transparent; background: rgba(var(--f-accent-rgb),.14); border-radius: var(--radius-sm, 8px); }
.site-footer__hours li.is-today::before { height: calc(100% - 1.4rem); }
.site-footer__hours li.is-today .hours-day,
.site-footer__hours li.is-today .hours-time { color: var(--f-accent); font-weight: 600; }
.site-footer__hours .hours-today { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-contrast); background: var(--f-accent); border-radius: 999px; vertical-align: middle; }
/* Live open/closed status badge */
.hours-status { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .7rem .3rem .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; border: 1px solid transparent; }
.hours-status__dot { width: .55rem; height: .55rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 0 currentColor; }
.hours-status--open { color: #5fd39a; background: rgba(95,211,154,.14); border-color: rgba(95,211,154,.32); }
.hours-status--open .hours-status__dot { animation: hours-pulse 2s ease-out infinite; }
.hours-status--closed { color: var(--f-muted); background: rgba(139,167,184,.14); border-color: rgba(139,167,184,.26); }
@keyframes hours-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    70%  { box-shadow: 0 0 0 .35rem color-mix(in srgb, currentColor 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .hours-status--open .hours-status__dot { animation: none; } }

/* Facebook pill */
.social-link {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0;
    padding: .55rem 1.1rem; font-weight: 600; font-size: .9rem;
    color: var(--f-text-strong); background: var(--f-surface);
    border: 1px solid var(--f-border); border-radius: 999px;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.social-link:hover { background: rgba(var(--f-accent-rgb),.16); border-color: var(--f-accent); transform: translateY(-2px); text-decoration: none; }

/* Bottom bar */
.site-footer__bottom { position: relative; background: transparent; border-top: 1px solid var(--f-border); }
.site-footer__bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.2rem; padding: .85rem 0; }
.site-footer__bottom-row p { margin: 0; font-size: .85rem; color: var(--f-muted); }
.site-footer__credit a { color: var(--f-text); text-decoration: none; font-weight: 600; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color: var(--f-accent); text-decoration: none; }
@media (max-width: 560px) { .site-footer__bottom-row { justify-content: center; text-align: center; } }

/* ---- Utilities / animation ------------------------------------------------ */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Blog, single post, FAQ, and testimonials (CMS-driven sections)
   ========================================================================== */

.container--narrow { max-width: 760px; }

/* Blog listing */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.6rem;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.blog-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card__placeholder { font-size: 2.6rem; opacity: .6; }
.blog-card__body { flex: 1; padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.blog-card__date { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.blog-card__body h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--heading); margin: 0; }
/* Clamp the excerpt to exactly 4 lines so every card has the same body height
   and the "Read more" link and card footer align across the grid. */
.blog-card__body p {
    color: var(--text-soft);
    font-size: .95rem;
    /* Bottom margin adds breathing room above the divider line. .blog-card__more
       uses margin-top: auto (footer alignment), so a numeric margin-top there is
       ignored; spacing the excerpt is what opens the gap above the separator. */
    margin: 0 0 1.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Full-width gradient separator above the CTA. Stretching the element and
   fading the border out toward the edges gives a soft, elegant divider while
   the link text stays right-aligned. */
.blog-card__more {
    margin-top: auto;
    align-self: stretch;
    text-align: right;
    padding-top: .85rem;
    color: var(--accent);
    font-weight: 600;
    font-size: .9rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent) 1;
}

/* Single post */
.post { padding-bottom: 3rem; }
/* Blog posts read wider than the default narrow container (FAQ stays at 760px). */
.post .container--narrow { max-width: 900px; }
.post__back { margin: 7.5rem 0 1.2rem; }
.post__figure { margin: 1.5rem 0; }
.post__figure img {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 320px);
    object-fit: cover;
    border-radius: 10px;
}
.post__title { font-family: var(--font-display); color: var(--heading); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin: .4rem 0; }
.post__meta { color: var(--text-muted); font-size: .9rem; display: flex; gap: .6rem; align-items: center; }
.post__credit { color: var(--text-muted); font-size: .78rem; font-style: italic; margin-top: .3rem; }
.post__preview-flag {
    display: inline-block; background: var(--amber-400); color: var(--amber-contrast);
    padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; margin-bottom: .6rem;
}
.post__body { margin-top: 1.6rem; font-size: 1.06rem; line-height: 1.8; color: var(--text); }
.post__body h2 { font-family: var(--font-display); color: var(--heading); font-size: 1.6rem; margin: 2rem 0 .8rem; }
.post__body h3 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; color: var(--heading); }
.post__body p { margin: 1rem 0; }
.post__body ul, .post__body ol { margin: 1rem 0 1rem 1.4rem; }
.post__body li { margin: .4rem 0; }
.post__body a { color: var(--accent); text-decoration: underline; }
.post__body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Post-to-post navigation */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.post-nav__link:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, var(--shadow-sm));
}
.post-nav__link--next { text-align: right; align-items: flex-end; }
.post-nav__dir { font-size: .78rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.post-nav__title { font-family: var(--font-display); color: var(--heading); font-size: 1.05rem; line-height: 1.3; }
.post-nav__spacer { display: block; }
@media (max-width: 560px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav__link--next { text-align: left; align-items: flex-start; }
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: .8rem; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 1.3rem;
    box-shadow: var(--shadow-sm);
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 2rem 1.1rem 0;
    font-weight: 600;
    color: var(--heading);
    position: relative;
    font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform var(--transition);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item__answer { padding: 0 0 1.2rem; color: var(--text-soft); line-height: 1.7; }

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.4rem;
}
.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem;
    margin: 0;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.testimonial-card__stars { color: #f5a623; letter-spacing: 2px; font-size: 1.05rem; }
.testimonial-card blockquote {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.65;
    /* Clamp to 6 lines so every card stays the same height regardless of quote length */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonial-card figcaption { color: var(--text-muted); font-weight: 600; font-size: .9rem; }