/*
   LeesPike Dental v2 — CSS design system (consolidated stack)

   Brand: Primary #024743 · Dark #012e2b · Gold #bfa15f · Canvas #fcfdfe
   Type:  Newsreader (headings) + Noto Sans (body)

   ── SOURCE OF TRUTH (edit here first; avoid new !important patches) ──
   Tokens / reset .............. :root + Global Reset (top)
   Base components ............. mid-file (header, cards, FAQ, forms base)
   Motion (G1) ................. PHASE 1
   Art / photo grade (G2–G5) ... PHASE 2  (gallery tile *look* refined later)
   Type / rhythm (G6–G7) ....... PHASE 3
   Storytelling (G8–G9) ........ PHASE 4 + family-story motion
   Reviews (G11) ............... PHASE 5
   A11y mobile keep (G12–G13) .. PHASE 6 (no header/footer redesign)
   HEADER + FOOTER ............. HEADER + FOOTER ORIGINAL RESET  ← chrome only
   Perf / components (G14–G16) . PHASE 7
   Gallery thumbs + lightbox ... CLINIC THUMBS (full-width tiles; data-full-src)
   Contact form UX ............. CONTACT FORM
   Interior pages .............. SITEWIDE UNIFORM (.page-hero, legal, FAQ cards)

   Do NOT re-introduce top-bar / lang-pill / hamburger experiments above HF RESET.
   Safe consolidate 2026-07-24: neutralized brightness-pass heroes; gallery img
   authority deferred to CLINIC THUMBS; file index added.
*/


:root {
    /* Color Palette — crisp, defined (not washed out) */
    --primary: #024743;
    --primary-dark: #012e2b;
    --primary-mid: #035c56;
    --primary-light: #f1f7f7;
    --accent: #bfa15f;
    --accent-hover: #aa8e52;
    --accent-light: #FAF6EE;
    --text: #1e293b;
    --text-muted: #475569;
    --heading: #0f172a;
    --bg-header: rgba(252, 253, 254, 0.97);
    --bg-canvas: #fcfdfe;
    --bg-white: #ffffff;
    --border: rgba(2, 71, 67, 0.1);
    --border-light: rgba(2, 71, 67, 0.05);
    
    /* Layout & Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 3.5rem;
    --container-width: 1140px;
    --container-pad: 1.15rem;
    --header-height: 92px;
    /* Tight vertical rhythm — less empty white space sitewide */
    --section-y: 3.5rem;
    --section-y-sm: 2.5rem;
    --prose-width: 72ch;
    --transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.18s ease;

    /* Calm motion tokens (G1 / calm-motion-premium) */
    --motion-reveal: 750ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --motion-hover: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-faq: 480ms cubic-bezier(0.4, 0, 0.2, 1);
    --reveal-distance: 20px;
    --motion-stagger: 90ms;
    
    /* Medical Clean pairing: Newsreader (headings/display) + Noto Sans (body) */
    --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-body: 'Noto Sans', system-ui, sans-serif;
    --fs-body: 1rem;
    --lh-body: 1.65;
    --lh-heading: 1.2;
    
    /* Defined shadows & modest radii */
    --shadow-sm: 0 2px 8px rgba(2, 71, 67, 0.06);
    --shadow-md: 0 10px 28px rgba(2, 71, 67, 0.1);
    --shadow-lg: 0 18px 40px rgba(2, 71, 67, 0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

/* Global Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    color: var(--text);
    background-color: var(--bg-canvas);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 130px; /* top bar + taller header for larger logo */
    text-rendering: optimizeLegibility;
    position: relative;
}

/*
 * Soft smile merged into page canvas — fills empty gutters/white bands on
 * sparse pages (financial options, FAQs, etc.) while keeping text readable.
 */
body {
    background-color: #f4f9f8;
    background-image:
        linear-gradient(
            180deg,
            rgba(252, 253, 254, 0.72) 0%,
            rgba(247, 251, 250, 0.68) 45%,
            rgba(241, 247, 247, 0.74) 100%
        ),
        url("../images/lifestyle/soft-bg-smile-blur.jpg?v=20260723soft2");
    background-size: cover, cover;
    background-position: center, center 28%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}
/* Fallback layer for browsers that ignore multi-bg on body painting quirks */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: url("../images/lifestyle/soft-bg-smile-blur.jpg?v=20260723soft2");
    background-size: cover;
    background-position: center 28%;
    background-repeat: no-repeat;
    opacity: 0.42;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(252, 253, 254, 0.62) 0%,
            rgba(252, 253, 254, 0.58) 40%,
            rgba(241, 247, 247, 0.66) 100%
        );
}



/* High-contrast selection — readable on light pages AND dark footer/hero */
::selection {
    background: var(--primary, #024743);
    color: #ffffff;
}
::-moz-selection {
    background: var(--primary, #024743);
    color: #ffffff;
}
input::selection,
textarea::selection,
.form-control::selection {
    background: var(--accent, #bfa15f);
    color: #012e2b;
}
input::-moz-selection,
textarea::-moz-selection,
.form-control::-moz-selection {
    background: var(--accent, #bfa15f);
    color: #012e2b;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

ul, ol {
    padding-left: 0;
}

p {
    margin: 0 0 var(--space-4);
    color: var(--text);
}

p:last-child {
    margin-bottom: 0;
}

/* Typography — Figtree headings (warm, clinically credible) + Noto Sans body */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--heading);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 3vw, 2.9rem); margin: 0 0 var(--space-4); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.55rem, 2.2vw, 2.1rem); margin: 0 0 var(--space-3); font-weight: 700; }
h3 { font-size: 1.15rem; margin: 0 0 var(--space-3); font-weight: 600; }
h4 { font-size: 1.05rem; margin: 0 0 var(--space-2); font-weight: 600; }

/* Layout Utilities */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.d-block { display: block; }
.w-100 { width: 100%; }

/* Sections — tight vertical rhythm (clean, no empty bands) */
.py-5 { padding: var(--section-y-sm) 0; }
.py-6 { padding: var(--section-y) 0; }
.bg-light {
    background-color: transparent; /* soft smile wash shows through; overlay keeps text readable */
}

/* ========== Soft smile section backgrounds (not hero/footer) ========== */
section.py-6,
section.bg-light,
.family-story-section,
.smile-strip-section,
.clinic-gallery-section,
.newsletter-section,
.office-tour-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: transparent;
}
section.py-6::before,
section.bg-light::before,
.family-story-section::before,
.smile-strip-section::before,
.clinic-gallery-section::before,
.newsletter-section::before,
.office-tour-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/lifestyle/soft-bg-smile-white-woman.jpg?v=20260723soft2");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    /* Visible enough to fill empty white; wash below keeps type crisp */
    opacity: 0.34;
}
/* alternate soft smiles so pages feel less empty / less repetitive */
section.py-6:nth-of-type(3n + 2)::before,
section.bg-light:nth-of-type(3n + 2)::before {
    background-image: url("../images/lifestyle/soft-bg-smile-latina.jpg?v=20260723soft2");
    background-position: center 25%;
}
section.py-6:nth-of-type(3n + 3)::before,
section.bg-light:nth-of-type(3n + 3)::before {
    background-image: url("../images/lifestyle/soft-bg-smile-white-man.jpg?v=20260723soft2");
    background-position: center 22%;
}
section.py-6:nth-of-type(3n + 1)::before {
    background-image: url("../images/lifestyle/soft-bg-smile-family.jpg?v=20260723soft2");
    background-position: center 35%;
}
.section-soft-bg--mature::before {
    background-image: url("../images/lifestyle/soft-bg-smile-mature.jpg?v=20260723soft2") !important;
    background-position: center 28% !important;
    opacity: 0.36 !important;
}
.section-soft-bg--latina::before {
    background-image: url("../images/lifestyle/soft-bg-smile-latina.jpg?v=20260723soft2") !important;
}
.section-soft-bg--family-hispanic::before {
    background-image: url("../images/lifestyle/soft-bg-smile-family-hispanic.jpg?v=20260723soft2") !important;
}
.section-soft-bg--family::before {
    background-image: url("../images/lifestyle/soft-bg-smile-family.jpg?v=20260723soft2") !important;
    background-position: center 40% !important;
}
section.py-6::after,
section.bg-light::after,
.family-story-section::after,
.smile-strip-section::after,
.clinic-gallery-section::after,
.newsletter-section::after,
.office-tour-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Lighter wash = smile stays merged into bg; text still readable on cards */
    background: linear-gradient(
        180deg,
        rgba(252, 253, 254, 0.72) 0%,
        rgba(252, 253, 254, 0.66) 45%,
        rgba(241, 247, 247, 0.74) 100%
    );
}
section.py-6 > *,
section.bg-light > *,
.family-story-section > *,
.smile-strip-section > *,
.clinic-gallery-section > *,
.newsletter-section > *,
.office-tour-section > * {
    position: relative;
    z-index: 1;
}
/* Keep hero full-bleed photo; no soft-smile wash on hero or footer */
section.hero {
    isolation: auto;
    overflow: hidden;
}
section.hero::before,
section.hero::after {
    content: none !important;
    display: none !important;
}
.footer {
    position: relative;
    z-index: 1;
}
.footer::before,
.footer::after {
    content: none !important;
    display: none !important;
}
/* Text readability boost on soft-bg sections */
section.py-6 h1,
section.py-6 h2,
section.py-6 h3,
section.bg-light h1,
section.bg-light h2,
section.bg-light h3,
.family-story-section h2,
.smile-strip-section h2,
.clinic-gallery-section h2 {
    color: var(--heading);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
section.py-6 p,
section.bg-light p,
.family-story-section p,
.smile-strip-section p,
.clinic-gallery-section p {
    color: var(--text);
}

/* Collapse stacked section padding so white gaps don’t double */
section + section.py-6,
section.py-6 + section.py-6 {
    padding-top: calc(var(--section-y) * 0.65);
}
section + section.py-5,
section.py-5 + section.py-5 {
    padding-top: calc(var(--section-y-sm) * 0.7);
}
section.bg-light + section.bg-light,
section.py-6.bg-light + section.py-6.bg-light {
    padding-top: calc(var(--section-y) * 0.5);
}

/*
 * Buttons & CTAs — uniform, accessible hover (EN/ES)
 * Color-blind safe: do NOT flip teal↔gold on hover (hue-only change fails on
 * dark banners and is hard to detect for deuteranopia/protanopia).
 * Signal hover with: same-family darken + lift + stronger shadow + clear border.
 * Gold (#bfa15f) uses dark text — white-on-gold fails WCAG contrast.
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    border: 2px solid transparent;
    gap: 8px;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(2, 71, 67, 0.12);
}

/* Primary = deep teal + white text (high contrast) */
.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(2, 71, 67, 0.18);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #012e2b;
    color: #ffffff;
    border-color: #012e2b;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(2, 71, 67, 0.28);
}

/* Secondary = outline teal */
.btn-secondary {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: none;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 71, 67, 0.18);
}

/* Accent = muted gold + dark text (readable; not white-on-gold) */
.btn-accent {
    background-color: var(--accent);
    color: #012e2b;
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(191, 161, 95, 0.28);
    font-weight: 700;
}

.btn-accent:hover,
.btn-accent:focus-visible {
    background-color: #a68d48;
    color: #012e2b;
    border-color: #012e2b;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(1, 46, 43, 0.22);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.8rem;
}

/* Accessibility Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: var(--accent);
    color: #012e2b;
    font-weight: 700;
    padding: 12px 24px;
    font-family: var(--font-heading);
    z-index: 9999;
    border-bottom-right-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--primary, #024743);
    outline-offset: 2px;
}

/* Visible keyboard focus — high-contrast, not hue-only */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--primary, #024743);
    outline-offset: 3px;
}

/* On dark surfaces, outline switches to light gold/white for visibility */
.review-cta-banner .btn:focus-visible,
.cta-row .btn:focus-visible,
.footer .btn:focus-visible,
.hero .btn:focus-visible {
    outline-color: #f5e6b8;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.newsletter-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 140px;
}

.newsletter-form .form-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.newsletter-privacy {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin-top: 0.75rem;
    line-height: 1.6;
    max-width: 70ch;
}

/* Fixed Floating Header Wrapper */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000; /* above hero so service dropdown is never covered */
    transition: var(--transition);
}

/* Top Bar */
.top-bar {
    background-color: var(--primary);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 0;
    transition: var(--transition);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar a {
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.top-bar a:hover {
    color: var(--accent);
}

.top-bar-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.top-bar-lang a {
    color: rgba(255, 255, 255, 0.9);
}

.top-bar-lang a:hover {
    color: var(--accent);
}

.top-bar-lang .active,
.top-bar-lang a.lang-link.active,
.mobile-lang .active,
.mobile-lang a.lang-link.active {
    color: var(--accent);
    cursor: default;
    /* Keep active language as a real link so reverse pairs always work */
    pointer-events: auto;
    text-decoration: none;
}

.top-bar-lang a.lang-link,
.mobile-lang a.lang-link {
    text-decoration: none;
    font-weight: 700;
}

.mobile-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.mobile-lang a.lang-link {
    color: var(--primary);
}

.mobile-lang a.lang-link.active {
    color: var(--accent);
}

.top-bar-lang .lang-separator {
    color: rgba(255, 255, 255, 0.3);
}

/* Main Navigation Bar */
.main-header {
    background-color: var(--bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 96px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}

.main-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header.scrolled .top-bar {
    padding: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.header.scrolled .main-header {
    height: 84px;
    box-shadow: var(--shadow-sm);
}

.header.scrolled .logo img {
    height: 64px;
}

/* Logo Design — larger, clear mark */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Header logo only — never constrain footer #logo-footer */
.header .logo img,
.main-header .logo img,
#logo-nav img {
    height: 78px;
    width: auto;
    max-width: min(250px, 44vw);
    object-fit: contain;
    object-position: left center;
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.logo-text span {
    color: var(--accent);
}

/* Desktop Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: auto;
    margin-right: 32px;
}

/* English default: single-line nav (well aligned, as before) */
.nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
    padding: 6px 0;
    position: relative;
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    max-width: none;
    line-height: 1.3;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    transform: none;
    background-color: var(--accent);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--accent);
}

.nav .dropdown {
    position: relative;
    z-index: 3100;
    display: inline-block;
}

.nav .dropdown > .nav-link i {
    margin-left: 2px;
    margin-top: 0;
    font-size: 0.75rem;
}

.btn-header {
    background-color: var(--primary);
    color: var(--bg-white);
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    max-width: none;
    letter-spacing: 0.5px;
}


/* Dropdown Menu */
.dropdown {
    position: relative;
    z-index: 2100;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--bg-white);
    min-width: 260px;
    box-shadow: 0 16px 40px rgba(2, 71, 67, 0.18);
    border-radius: var(--radius-md);
    padding: 8px;
    border: 1px solid var(--border-light);
    animation: fadeIn 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    z-index: 2200;
    /* keep menu above hero / page content */
    isolation: isolate;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 10px 16px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text);
    border-radius: var(--radius-sm);
    letter-spacing: 0.2px;
    position: relative;
    transition:
        color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Horizontal line draw-on for Services dropdown options (EN + ES) */
.dropdown-content a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    width: auto;
    max-width: none;
    background-color: var(--accent);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.dropdown-content a:hover,
.dropdown-content a:focus-visible {
    background-color: var(--primary-light);
    color: var(--primary);
}

.dropdown-content a:hover::after,
.dropdown-content a:focus-visible::after {
    transform: scaleX(1);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--primary);
    margin: 5px 0;
    transition: var(--transition);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* Hero Section — office photo fully visible (no blur / no heavy wash) */
/* Hero — full-bleed clinic photo, translucent teal ribbon anchored bottom (3a) */
.hero {
    position: relative;
    z-index: 0; /* never cover fixed header / dropdowns */
    padding: 0;
    min-height: min(72vh, 640px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: #0a1a16;
    background-image: url('../images/clinic/clinic-interior-pano.jpg');
    background-repeat: no-repeat;
    background-position: center 34%;
    background-size: cover;
}

.hero::before {
    content: none;
}

.hero-ribbon {
    position: relative;
    z-index: 1;
    width: calc(100% - 2 * var(--container-pad));
    max-width: var(--container-width);
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-7);
    background: rgba(1, 46, 43, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(191, 161, 95, 0.4);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.hero-ribbon-copy {
    flex: 1;
    min-width: 280px;
    text-align: left;
}

.pre-headline {
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem; /* 12px — readability floor + uniform small eyebrow */
    margin: 0 0 var(--space-3);
    line-height: 1.4;
}

.hero-ribbon-copy .pre-headline {
    color: #e2c987;
    margin: 0 0 var(--space-2);
}

.hero-ribbon-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.12;
    margin: 0 0 var(--space-2);
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    letter-spacing: -0.01em;
}

.hero-ribbon-copy h1 span,
.hero-ribbon-copy h1 .hero-line-accent {
    color: #e2c987;
    font-style: italic;
    font-weight: 500;
}

/*
 * Light hero text animation — pre-headline + title (EN/ES)
 * Soft fade + lift; gold accent breathes gently after entrance.
 */
.hero-ribbon.scroll-animate .hero-line {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    will-change: opacity, transform, filter;
}

.hero-ribbon.scroll-animate.animated .hero-line--eyebrow {
    animation: heroEyebrowIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hero-ribbon.scroll-animate.animated .hero-line--title {
    animation: heroTextIn 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.hero-ribbon.scroll-animate.animated .hero-line-accent {
    animation: heroAccentGlow 2.8s ease-in-out 1.15s infinite alternate;
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        filter: blur(4px);
    }
    60% {
        filter: blur(0.5px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Eyebrow: soft fade + elegant letter-tracking settle (0.3em -> 0.12em) */
@keyframes heroEyebrowIn {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
        letter-spacing: 0.3em;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        letter-spacing: 0.12em;
        filter: blur(0);
    }
}

@keyframes heroAccentGlow {
    from {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        filter: brightness(0.98);
    }
    to {
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.35),
            0 0 16px rgba(226, 201, 135, 0.4);
        filter: brightness(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ribbon.scroll-animate .hero-line,
    .hero-ribbon.scroll-animate.animated .hero-line--eyebrow,
    .hero-ribbon.scroll-animate.animated .hero-line--title,
    .hero-ribbon.scroll-animate.animated .hero-line-accent {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

.hero-ribbon-copy p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    max-width: 56ch;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-nap {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: var(--space-3) 0 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero-nap i {
    color: #e2c987;
}

.hero-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-shrink: 0;
    align-items: stretch;
}

.hero-ctas .btn {
    justify-content: center;
}

/* Secondary CTA readable on dark hero card */
.hero .btn-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.85);
    background-color: transparent;
}

.hero .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: #ffffff;
}

/* Section Header */
.section-header {
    max-width: 640px;
    margin: 0 auto var(--space-5);
}

.section-header.text-center {
    text-align: center;
}

.section-header h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    margin: 0 0 var(--space-3);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-header p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

.section-header .pre-headline {
    margin-bottom: var(--space-2);
}

/* Serving row: "Serving:" + cities on ONE complete line */
#services-grid-section .section-header {
    margin-bottom: 0.75rem;
}

#services-grid-section .serving-checklist-box {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.serving-checklist-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem 0.65rem;
    background-color: #ffffff;
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0.85rem auto 1.25rem;
    border: 1px solid rgba(2, 71, 67, 0.08);
    box-shadow: 0 4px 14px rgba(2, 71, 67, 0.04);
    text-align: left;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Label sits in front of Sterling (same row) */
.serving-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(0.78rem, 1.05vw, 0.88rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
    line-height: 1.2;
    padding: 0.35rem 0.15rem 0.35rem 0;
}

.serving-checklist-box ul,
.serving-column ul,
.serving-list-horizontal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem 0.5rem;
    width: max-content;
    max-width: none;
    flex: 0 0 auto;
}

/* Legacy two-column wrapper collapses into one row */
.serving-column {
    display: contents;
}

.serving-column ul {
    display: contents;
}

.serving-checklist-box li,
.serving-list-horizontal li {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto !important;
    gap: 0.3rem;
    font-weight: 600;
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    color: var(--primary);
    white-space: nowrap !important;
    padding: 0.4rem 0.75rem;
    background: var(--primary-light);
    border-radius: 999px;
    border: 1px solid rgba(2, 71, 67, 0.08);
    line-height: 1.25;
}

.serving-checklist-box li i,
.serving-list-horizontal li i {
    color: var(--accent);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Footer service areas (AI / GEO crawlable) — one clean horizontal line on desktop */
.footer-areas {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.65rem 0 0.2rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.footer-areas p {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #94a3b8;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.footer-areas strong {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-areas-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.footer-areas-list li {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.8rem;
    color: #cbd5e1;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Clean gold dot separator (not a broken icon glyph) */
.footer-areas-list li:not(:last-child)::after {
    content: "\00b7";
    display: inline-block;
    margin: 0 0.55rem;
    color: rgba(191, 161, 95, 0.85);
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1;
    speak: never;
}

/* Footer "Our Services" — horizontal row, matches Areas We Serve treatment */
.footer-services {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.65rem 0 0.2rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.footer-services-heading {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.footer-services-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.footer-services-list li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.footer-services-list li:not(:last-child)::after {
    content: "\00b7";
    display: inline-block;
    margin: 0 0.55rem;
    color: rgba(191, 161, 95, 0.85);
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1;
    speak: never;
}

.footer-services-list a {
    color: #cbd5e1;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.footer-services-list a:hover {
    color: var(--accent);
}

@media (max-width: 600px) {
    .footer-services-list { row-gap: 0.4rem; }
    .footer-services-list li { font-size: 0.78rem; }
}

/* Sitemap page — categorized columns, each a vertical top-to-bottom list */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-top: 1.5rem;
    text-align: left;
}

.sitemap-col-heading {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-hover);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--border);
}

.sitemap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sitemap-list a {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.sitemap-list a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.sitemap-list .sitemap-sublabel {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* Patient Testimonials page */
.testimonials-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.testimonials-toolbar p {
    margin: 0;
    color: var(--text-muted);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.testimonial-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.testimonial-stars {
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.testimonial-text {
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.testimonial-author {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
}

.testimonial-date {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.testimonials-empty,
.testimonials-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
    grid-column: 1 / -1;
}

.testimonials-empty-card {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--primary-light);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.testimonials-empty-card i {
    font-size: 2.25rem;
    color: var(--accent);
    margin-bottom: 1rem;
    display: block;
}

.testimonials-empty-card h3 {
    margin-bottom: 0.5rem;
}

.testimonials-empty-card p {
    color: var(--text-muted);
    max-width: 45ch;
    margin: 0 auto;
}

.review-cta-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    text-align: center;
    color: #fff;
    margin-top: 3rem;
    /* Keep above soft-bg section text overrides */
    isolation: isolate;
}

.review-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.75rem 2.5rem;
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
}

.review-cta-copy {
    flex: 1 1 280px;
    min-width: 0;
    text-align: center;
}

.review-cta-banner h2 {
    color: #ffffff !important;
    margin-bottom: 0.5rem;
    text-shadow: none !important;
}

.review-cta-banner p {
    color: rgba(255, 255, 255, 0.95) !important;
    max-width: 55ch;
    margin: 0 auto 1.25rem;
    text-shadow: none !important;
}

/* Google review QR on testimonials */
.review-qr-block {
    flex: 0 0 auto;
    text-align: center;
}

.review-qr-link {
    display: inline-block;
    padding: 0.65rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    line-height: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-qr-link:hover,
.review-qr-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    outline: 3px solid #f5e6b8;
    outline-offset: 3px;
}

.review-qr-link img {
    width: 160px;
    height: 160px;
    max-width: 100%;
    display: block;
    border-radius: 4px;
}

.review-qr-caption {
    margin: 0.65rem 0 0 !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: none !important;
}

@media (max-width: 640px) {
    .review-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    /* Constrain the copy column to the stacked width so its 55ch paragraph
       can't push a few pixels past the viewport edge. */
    .review-cta-copy {
        width: 100%;
    }
    .review-qr-link img {
        width: 140px;
        height: 140px;
    }
}

.review-cta-banner a:not(.btn) {
    color: #f5e6b8 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.review-cta-banner a:not(.btn):hover,
.review-cta-banner a:not(.btn):focus-visible {
    color: #ffffff !important;
    text-decoration-thickness: 2px;
}

/*
 * Dark-band CTAs (review Google button, homepage cta-row):
 * Gold + dark text stays legible on teal. Hover darkens gold + outline —
 * never swap to teal (washes into banner / fails color-blind cues).
 */
.review-cta-banner .btn,
.review-cta-banner .btn-accent,
.cta-row .btn,
.cta-row .btn-accent {
    background-color: var(--accent) !important;
    color: #012e2b !important;
    border: 2px solid var(--accent) !important;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

.review-cta-banner .btn:hover,
.review-cta-banner .btn:focus-visible,
.review-cta-banner .btn-accent:hover,
.review-cta-banner .btn-accent:focus-visible,
.cta-row .btn:hover,
.cta-row .btn:focus-visible,
.cta-row .btn-accent:hover,
.cta-row .btn-accent:focus-visible {
    background-color: #f0e2b8 !important;
    color: #012e2b !important;
    border-color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px);
}

.review-cta-banner .btn:active,
.review-cta-banner .btn-accent:active,
.cta-row .btn:active,
.cta-row .btn-accent:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Services Page & Grid Styles */
.services-grid-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.15rem;
    margin-top: 1.25rem;
}

.service-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.service-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.service-card-content {
    padding: 1.35rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    text-align: center;
}

.service-card-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    border: none;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

.service-card-icon i {
    display: block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Solid teal + white icon — high contrast on white page */
.service-card:hover .service-card-icon {
    background: var(--primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(2, 71, 67, 0.22);
}

.service-card:hover .service-card-icon i {
    color: #ffffff !important;
}

.service-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--primary);
}

.service-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

/* Inline text / “read more” links — clearly highlighted (EN + ES sitewide) */
.btn-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--accent, #bfa15f) !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.btn-text:hover,
.btn-text:focus-visible {
    color: var(--primary-dark) !important;
    text-decoration-color: var(--primary) !important;
}
.btn-text i {
    color: var(--accent, #bfa15f);
    transition: transform 0.2s ease, color 0.2s ease;
}
.btn-text:hover i {
    color: var(--primary);
    transform: translateX(3px);
}

.service-card .btn-text {
    margin-top: auto;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-card:hover .btn-text {
    color: var(--primary-dark) !important;
}

.service-card:hover .btn-text i {
    color: var(--primary);
}

/* Body/prose links (FAQ answers, legal pages, article copy) — not nav/footer chrome */
a.content-link,
.faq-content a,
.faq-item .faq-content a,
.legal-page a:not(.btn):not(.nav-link),
.legal-toc a,
.blog-featured-body a:not(.btn),
.value-prop-text a:not(.btn),
.sat-oncall-callout a,
.medical-disclaimer a,
article a:not(.btn):not(.nav-link) {
    color: var(--primary) !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--accent, #bfa15f) !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a.content-link:hover,
a.content-link:focus-visible,
.faq-content a:hover,
.faq-content a:focus-visible,
.legal-page a:not(.btn):hover,
.blog-featured-body a:not(.btn):hover,
.value-prop-text a:not(.btn):hover,
.sat-oncall-callout a:hover,
.medical-disclaimer a:hover,
article a:not(.btn):hover {
    color: var(--primary-dark) !important;
    text-decoration-color: var(--primary) !important;
}

/* Value Propositions */
.value-prop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.value-prop-text h2 {
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    margin: 0 0 var(--space-4);
    font-weight: 700;
}

.value-prop-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 var(--space-4);
}

.value-prop-text p:last-child {
    margin-bottom: 0;
}

.value-prop-text .pre-headline {
    margin-bottom: var(--space-2);
}

.value-prop-image {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.value-prop-image img {
    width: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.value-prop-grid:hover .value-prop-image img {
    transform: scale(1.02);
}

/* Category jump list layout */
.services-category-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.75rem;
    align-items: start;
    margin-bottom: 2rem;
}

.jump-list-box {
    background-color: var(--primary-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 2rem;
}

.jump-list-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jump-list-box.grid-2col ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.jump-list-box a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--primary);
    transition: var(--transition);
}

.jump-list-box a i {
    color: var(--accent);
    font-size: 0.8rem;
}

.jump-list-box a:hover {
    color: var(--primary-dark);
    transform: translateX(2px);
}

.jump-list-box a:hover i {
    color: var(--primary);
}

/* Subservices Grid */
.subservices-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.15rem;
}

/* Final CTA Banner */
.cta-row {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--bg-white);
    text-align: center;
    padding: var(--space-7) 0;
    position: relative;
    overflow: hidden;
}

.cta-row h2 {
    color: var(--bg-white);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    margin: 0 0 var(--space-3);
    font-weight: 700;
    line-height: 1.25;
}

.cta-row p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 58ch;
    margin: 0 auto var(--space-6);
    line-height: 1.65;
}

/* Newsletter Subscription */
.newsletter-section {
    background-color: var(--primary-light);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-6) 0;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.newsletter-text h3 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-weight: 700;
}

.newsletter-text p {
    color: var(--text-muted);
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background-color: var(--bg-canvas);
    color: var(--text);
    outline: none;
    transition: var(--transition);
}

.newsletter-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(191, 161, 95, 0.1);
}

/* Form Card */
.contact-form-card {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
    outline: none;
    background-color: var(--bg-canvas);
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(191, 161, 95, 0.1);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* FAQ Accordion Styles */
.faq-accordion {
    max-width: 760px;
    margin: var(--space-6) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.faq-item {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.faq-item:hover {
    border-color: var(--accent);
}

.faq-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 1.05rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    line-height: 1.35;
}

.faq-trigger .faq-q {
    flex: 1 1 auto;
    min-width: 0;
}

.faq-trigger i {
    font-size: 0.9rem;
    color: var(--accent);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.faq-item.active .faq-trigger i {
    transform: rotate(180deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
    background-color: var(--accent-light);
}

/* Open state — works with JS maxHeight AND pure CSS fallback */
.faq-item.active .faq-content {
    max-height: 48rem;
    opacity: 1;
}

.faq-content p,
.faq-content > * {
    padding: 0.35rem 1.25rem 1.2rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 !important;
}

/* FAQ hub pages: never leave whole sections invisible if reveal JS is slow */
.faq-page .scroll-animate,
.faq-page .faq-accordion.scroll-animate {
    opacity: 1 !important;
    transform: none !important;
}

.faq-page .faq-block h2 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    line-height: 1.3;
}

.faq-page .faq-accordion {
    margin-top: 0;
}

/* Main Footer — compact (less empty white/dark space) */
.footer {
    background-color: var(--primary-dark);
    color: #94a3b8;
    padding: 1.35rem 0 1rem;
    font-size: 0.9rem;
}

/*
 * Footer brand + contact — straight top edge, equal icon rail, left text column
 * Layout: [ Logo ] [ Address + Phone ] [ Email + Hours ]
 */
.footer-info-row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    column-gap: 1.75rem;
    row-gap: 1rem;
    align-items: start;
    justify-items: stretch;
    margin-bottom: 0.85rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.footer-brand .logo,
.footer-brand img,
.footer-brand .logo img,
.footer #logo-footer img {
    background: transparent !important;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    padding-top: 0;
}

.footer-brand .logo {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Footer logo — full mark + tagline (Modern Dentistry with gentle care) must not clip */
.footer-brand img,
.footer-brand .logo img,
.footer #logo-footer img {
    height: 140px !important;
    width: auto !important;
    max-width: min(280px, 100%) !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.footer-info-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    width: 100%;
    padding-top: 0.15rem; /* optical top line-up with logo */
}

.footer-info-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}

/* Same icon rail in every contact column — straight vertical line of icons */
.footer-info-col li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
    line-height: 1.45;
    width: 100%;
    margin: 0;
    padding: 0;
}

.footer-info-col li i {
    color: var(--accent);
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1.5rem;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* First text line sits level with icon */
    position: relative;
    top: 0.05rem;
}

.footer-info-col li a,
.footer-info-col li > div,
.footer-info-col li > span {
    color: #cbd5e1;
    transition: color 0.2s ease;
    min-width: 0;
    text-align: left;
    line-height: 1.45;
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
}

.footer-info-col li a {
    text-decoration: none;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
    display: block;
}

/* Address: two lines, left edge straight under icon rail */
.footer-info-col li a[href*="maps"] {
    white-space: normal;
    line-height: 1.45;
}

.footer-info-col li a:hover {
    color: var(--bg-white);
}

.footer-info-col li strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.footer-info-col li > div {
    display: block;
    text-align: left;
}

.footer-social {
    margin-top: 0.45rem;
    margin-left: calc(1.5rem + 0.75rem); /* under text column, flush with text */
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0;
}

.footer-social a {
    color: #94a3b8;
    font-size: 1.25rem;
    transition: color 0.2s ease;
    line-height: 1;
}

.footer-social a:hover {
    color: var(--accent);
}

.footer-links-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.55rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    text-align: center;
}

.footer-links-row a {
    color: #94a3b8;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links-row a:hover {
    color: var(--accent);
}

.footer-copyright-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.65rem;
    text-align: center;
}

.footer-copyright-row p {
    font-size: 0.85rem;
    color: #64748b;
}

/* Cookie consent banner — uniform sitewide (EN + ES) */
.cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
    background: var(--primary-dark, #0d2b26);
    color: #fff;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie-consent-bar.visible { transform: translateY(0); }
.cookie-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-consent-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    flex: 1;
    min-width: 240px;
}
.cookie-consent-text a { color: var(--accent); text-decoration: underline; }
.cookie-consent-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}
.cookie-consent-actions .btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    color: #fff !important;
}
.cookie-consent-actions .btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: #fff !important;
}
@media (max-width: 600px) {
    .cookie-consent-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-consent-actions { justify-content: center; }
}

/* Animations — uniform sitewide (EN + ES) */
.scroll-animate {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.scroll-animate.animated {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* Even stagger for service cards (same rhythm every page / language) */
.services-grid-5 .scroll-animate:nth-child(1).animated { transition-delay: 0s; }
.services-grid-5 .scroll-animate:nth-child(2).animated { transition-delay: 0.05s; }
.services-grid-5 .scroll-animate:nth-child(3).animated { transition-delay: 0.1s; }
.services-grid-5 .scroll-animate:nth-child(4).animated { transition-delay: 0.15s; }
.services-grid-5 .scroll-animate:nth-child(5).animated { transition-delay: 0.2s; }

/* Uniform stagger for every repeated card/list group, site-wide, both languages */
.subservices-grid > .scroll-animate:nth-child(1).animated,
.faq-accordion > .scroll-animate:nth-child(1).animated,
.footer-areas-list > .scroll-animate:nth-child(1).animated,
section .container > div > .scroll-animate:nth-child(1).animated { transition-delay: 0s; }
.subservices-grid > .scroll-animate:nth-child(2).animated,
.faq-accordion > .scroll-animate:nth-child(2).animated,
section .container > div > .scroll-animate:nth-child(2).animated { transition-delay: 0.06s; }
.subservices-grid > .scroll-animate:nth-child(3).animated,
.faq-accordion > .scroll-animate:nth-child(3).animated,
section .container > div > .scroll-animate:nth-child(3).animated { transition-delay: 0.12s; }
.subservices-grid > .scroll-animate:nth-child(4).animated,
.faq-accordion > .scroll-animate:nth-child(4).animated,
section .container > div > .scroll-animate:nth-child(4).animated { transition-delay: 0.18s; }
.subservices-grid > .scroll-animate:nth-child(5).animated,
.faq-accordion > .scroll-animate:nth-child(5).animated,
section .container > div > .scroll-animate:nth-child(5).animated { transition-delay: 0.24s; }
.subservices-grid > .scroll-animate:nth-child(6).animated,
.faq-accordion > .scroll-animate:nth-child(6).animated,
section .container > div > .scroll-animate:nth-child(6).animated { transition-delay: 0.3s; }

/* Failsafe: content never stuck hidden without JS */
.no-js .scroll-animate,
html.no-scroll-fx .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animate.animated {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* Doctor Profile Layout */
.doctor-profile-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
    align-items: start;
}

.doctor-profile-grid .value-prop-text p {
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
}

.doctor-profile-grid .value-prop-text h2 {
    font-size: 1.45rem;
    margin-bottom: var(--space-3);
}

.doctor-image-wrapper {
    position: sticky;
    top: 110px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--border-light);
}

.doctor-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 4/5;
}

.doctor-image-wrapper:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Responsive Media Queries */
@media (max-width: 1220px) and (min-width: 992px) {
    .nav { gap: 18px; margin-right: 18px; }
    .logo-text { font-size: 1.2rem; }
    .nav-link { font-size: 0.78rem; }
    .btn-header { padding: 8px 16px; font-size: 0.78rem; }
}

/* iOS / mobile hamburger panel — high specificity to beat desktop/ES nav rules */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden;
    }
    body {
        padding-top: 86px; /* taller header for readable logo on mobile */
    }
    body.nav-open,
    html.nav-open {
        overflow: hidden !important;
        height: 100%;
        touch-action: none;
    }
    .top-bar { display: none !important; }
    .hamburger {
        display: block !important;
        z-index: 4602 !important;
        position: relative;
        flex-shrink: 0;
        padding: 10px;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .main-header {
        height: 86px;
        overflow: visible !important;
    }
    .main-header-content {
        position: relative;
        z-index: 4601;
    }

    .logo img {
        height: 66px;
        max-width: min(200px, 50vw);
    }

    .footer-brand img,
    .footer-brand .logo img {
        height: 112px;
        max-width: 320px;
    }

    /* Full-screen slide-in panel (EN + ES) */
    .header .nav,
    .nav {
        position: fixed !important;
        top: 86px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - 86px) !important;
        height: calc(100vh - 86px) !important;
        background-color: var(--bg-canvas) !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.35rem !important;
        transition: transform 0.28s ease, visibility 0.28s ease !important;
        z-index: 4600 !important;
        box-shadow: var(--shadow-lg);
        padding: 1.25rem 1.25rem calc(7.5rem + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translate3d(-100%, 0, 0) !important;
        visibility: hidden;
        pointer-events: none;
        flex: none !important;
        min-width: 0 !important;
    }
    
    .header .nav.open,
    .nav.open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        left: 0 !important;
    }

    .header .nav > .nav-link,
    .header .nav > a.nav-link,
    .nav > .nav-link,
    .nav > a.nav-link {
        display: block !important;
        width: 100% !important;
        max-width: 20rem !important;
        text-align: center !important;
        white-space: normal !important;
        font-size: 1.05rem !important;
        padding: 0.85rem 1rem !important;
        flex-direction: row !important;
        min-width: 0 !important;
    }

    .header .nav .dropdown,
    .nav .dropdown {
        width: 100% !important;
        max-width: 20rem !important;
        display: block !important;
        text-align: center;
    }

    .header .nav .dropdown > .nav-link,
    .nav .dropdown > .nav-link {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.35rem !important;
        white-space: normal !important;
        max-width: none !important;
        font-size: 1.05rem !important;
        padding: 0.85rem 1rem !important;
    }
    
    .header .nav .dropdown-content,
    .nav .dropdown-content,
    .dropdown-content {
        display: none !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none !important;
        border: none !important;
        background-color: var(--primary-light) !important;
        text-align: center !important;
        width: 100% !important;
        min-width: 0 !important;
        animation: none !important;
        margin-top: 0.15rem !important;
        padding: 0.35rem 0.5rem 0.65rem !important;
        border-radius: var(--radius-md) !important;
    }

    .header .nav .dropdown.open > .dropdown-content,
    .nav .dropdown.open > .dropdown-content {
        display: block !important;
    }

    .header .nav .dropdown-content a,
    .nav .dropdown-content a {
        display: block !important;
        padding: 0.7rem 0.75rem !important;
        font-size: 0.95rem !important;
        white-space: normal !important;
    }
    
    .btn-header { display: none !important; }
    
    .nav .mobile-cta {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 280px;
        margin-top: 1.25rem;
        padding-bottom: 0.5rem;
    }

    .nav .mobile-cta .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .mobile-lang {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        margin-top: 0.35rem;
    }

    .mobile-lang a {
        color: var(--primary);
        padding: 0.35rem 0.5rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .mobile-lang .active {
        color: var(--accent);
        cursor: default;
    }
    
    .hero {
        padding: 5.5rem 0 4rem;
        min-height: 70vh;
        background-position: center 30%;
    }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-content {
        max-width: 100%;
        padding: 1.5rem 1.35rem;
    }
    .hero-content h1 { font-size: 2.4rem; }
    
    .doctor-profile-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .doctor-image-wrapper {
        position: static;
        max-width: 400px;
        margin: 0 auto;
    }

    .value-prop-grid { grid-template-columns: 1fr; gap: 30px; }
    .value-prop-text h2 { font-size: 1.8rem; }
    .value-prop-image { order: 2 !important; }
    
    .services-category-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 2.5rem; }
    .subservices-grid { grid-template-columns: 1fr; }
    .newsletter-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-info-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        justify-items: stretch;
    }
    .footer-brand {
        align-items: flex-start;
        width: 100%;
    }
    .footer-brand .logo {
        justify-content: flex-start;
        width: auto;
    }
    .footer-brand img,
    .footer-brand .logo img {
        margin-left: 0;
        margin-right: 0;
        object-position: left top;
        height: 108px;
        max-width: 300px;
    }
    .footer-info-col {
        align-items: stretch;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding-top: 0;
    }
    .footer-info-col li {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        text-align: left;
    }
    .footer-social {
        margin-left: calc(1.5rem + 0.75rem);
        justify-content: flex-start;
    }
    .footer-links-row { gap: 15px; padding: 1.2rem 0; }
}

@media (max-width: 600px) {
    .hero {
        min-height: 62vh;
        background-position: center 28%;
    }
    .hero-content h1 { font-size: 2rem; }
    .hero-ctas { flex-direction: column; width: 100%; }
    .hero-ctas .btn { width: 100%; }
    
    .serving-checklist-box { padding: 0.85rem 0.75rem; }
    .serving-checklist-box li { font-size: 0.8rem; padding: 0.35rem 0.65rem; }
    .contact-form-card { padding: 1.8rem; }
    .newsletter-form { flex-direction: column; }
    .jump-list-box.grid-2col ul { grid-template-columns: 1fr; }
}


/* ===== Phase 3: Mobile sticky emergency / conversion bar ===== */
.mobile-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4400; /* below open mobile nav (4600), above page content */
    background: var(--primary-dark, #012e2b);
    border-top: 2px solid var(--accent, #bfa15f);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.mobile-sticky-cta__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    max-width: 600px;
    margin: 0 auto;
}
.mobile-sticky-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.8rem 0.5rem;
    font-size: 0.95rem;
    border-radius: var(--radius-md, 8px);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.mobile-sticky-cta .btn-call {
    background: var(--accent, #bfa15f);
    color: #0f172a;
    font-weight: 700;
}
.mobile-sticky-cta .btn-call:hover {
    background: var(--accent-hover, #aa8e52);
    color: #0f172a;
}
.mobile-sticky-cta .btn-book {
    background: var(--bg-white, #fff);
    color: var(--primary, #024743);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.2);
}
@media (max-width: 991px) {
    .mobile-sticky-cta { display: block; }
    body.has-mobile-sticky-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    /* Hide bottom bar while hamburger menu is open so it doesn't cover links */
    body.nav-open .mobile-sticky-cta { display: none !important; }
}
.page-breadcrumb {
    background: var(--primary-light, #f1f7f7);
    border-bottom: 1px solid var(--border, rgba(2,71,67,0.08));
    padding: 0.65rem 0;
    font-size: 0.85rem;
}
.page-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--text-muted, #64748b);
}
.page-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    opacity: 0.5;
}
.page-breadcrumb a {
    color: var(--primary, #024743);
    text-decoration: none;
    font-weight: 500;
}
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb [aria-current="page"] {
    color: var(--text, #1e293b);
    font-weight: 600;
}

/* =========================================================
   Cosmetic polish � typography, alignment, gap system (2026-07)
   ========================================================= */

/* Page hero banners (inner pages) — compact */
section.py-5[id="fl-main-content"],
section.py-5#fl-main-content {
    padding: var(--space-6) 0 !important;
}

section.py-5[id="fl-main-content"] h1,
section.py-5#fl-main-content h1 {
    font-size: clamp(1.65rem, 2.4vw, 2.15rem) !important;
    margin: 0 0 var(--space-3) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    font-weight: 700;
}

section.py-5[id="fl-main-content"] > .container > p,
section.py-5#fl-main-content > .container > p {
    margin: 0 auto !important;
    max-width: 52ch !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    opacity: 0.92;
}

/* Breadcrumb � compact, aligned */
.page-breadcrumb {
    background: var(--primary-light);
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.page-breadcrumb .container {
    display: flex;
    align-items: center;
}

.page-breadcrumb .container.breadcrumb-with-lang {
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.page-breadcrumb .breadcrumb-lang-link {
    margin-left: auto;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    border: 1px solid rgba(2, 71, 67, 0.18);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    background: var(--bg-white);
    line-height: 1.3;
}

.page-breadcrumb .breadcrumb-lang-link:hover {
    color: var(--accent-hover);
    border-color: var(--accent);
    text-decoration: none;
    background: var(--accent-light);
}

.page-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.15rem;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.page-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.3;
}

.page-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.35rem;
    margin-right: 0.15rem;
    opacity: 0.45;
    font-weight: 400;
}

.page-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
}

.page-breadcrumb a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-breadcrumb [aria-current="page"] {
    color: var(--text);
    font-weight: 600;
    font-size: 0.8rem;
}

/* Prose blocks on service / about pages */
.container[style*="max-width: 85ch"],
.container[style*="max-width:85ch"] {
    max-width: var(--prose-width) !important;
}

section .container > .scroll-animate > h2,
section .container[style*="max-width"] h2 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    line-height: 1.3;
}

section .container > .scroll-animate:first-child > h2,
section .container[style*="max-width"] .scroll-animate:first-child h2 {
    margin-top: 0;
}

section .container[style*="max-width"] p,
section .container[style*="max-width"] .scroll-animate p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-4);
}

section .container[style*="max-width"] ol,
section .container[style*="max-width"] ul:not(.serving-column ul) {
    margin: 0 0 var(--space-4) 1.15rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

section .container[style*="max-width"] li {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text);
}

/* Highlight / callout cards */
.scroll-animate[style*="border-left"] {
    padding: var(--space-5) var(--space-6) !important;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-md) !important;
}

.scroll-animate[style*="border-left"] p {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

/* Service cards � even alignment */
.service-card-content {
    padding: var(--space-6) var(--space-5);
    align-items: center;
    text-align: center;
}

.service-card h3 {
    font-size: 1.05rem;
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}

.service-card p {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 var(--space-4);
    min-height: 0;
}

.service-card-icon {
    margin-bottom: var(--space-4);
}

.services-grid-5 {
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* Serving checklist — label + cities one row (reinforce) */
.serving-checklist-box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem 0.65rem !important;
    padding: 0.7rem 1rem !important;
    margin: 0.85rem auto 1.25rem !important;
    max-width: 100% !important;
    width: 100% !important;
}

.serving-label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.serving-checklist-box .serving-list-horizontal,
.serving-checklist-box ul {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.serving-column ul {
    gap: var(--space-2);
}

.serving-column li {
    font-size: 0.95rem;
    line-height: 1.35;
}

/* CTA row */
.cta-row {
    padding: var(--space-7) 0;
}

.cta-row h2 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    margin: 0 0 var(--space-3);
    line-height: 1.25;
}

.cta-row p {
    font-size: 1rem;
    margin: 0 auto var(--space-6);
    line-height: 1.65;
    max-width: 58ch;
}

.cta-row-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Dark CTA band base (button hover handled with .review-cta-banner above) */
.cta-row .btn,
.cta-row .btn-accent {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Newsletter */
.newsletter-section {
    padding: var(--space-6) 0;
}

.newsletter-grid {
    gap: var(--space-6);
    align-items: start;
}

.newsletter-text h3 {
    font-size: 1.35rem;
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.newsletter-text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: flex-end;
}

.newsletter-form .form-field {
    flex: 1 1 140px;
    min-width: 0;
}

.newsletter-form .form-field label {
    margin-bottom: var(--space-1);
    line-height: 1.2;
}

.newsletter-privacy {
    margin-top: var(--space-3);
    font-size: 0.75rem;
    line-height: 1.5;
    max-width: 56ch;
}

/* Forms */
.contact-form-card {
    padding: var(--space-7);
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    margin-bottom: var(--space-2);
    line-height: 1.2;
}

/* FAQ */
.faq-trigger {
    padding: var(--space-4) var(--space-5);
    font-size: 0.98rem;
    line-height: 1.35;
    gap: var(--space-3);
    align-items: flex-start;
}

.faq-trigger i {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.faq-content p {
    padding: 0.9rem var(--space-5) var(--space-5);
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
}

/* Footer refinements */
.footer-copyright-row {
    padding-top: 0.5rem;
}

.footer-copyright-row p {
    font-size: 0.78rem;
    line-height: 1.5;
    max-width: 90ch;
    margin: 0 auto 0.35rem;
}

.footer-copyright-row p:last-child {
    margin-bottom: 0;
}

/* Footer contact row — keep icon-grid alignment (see Main Footer block) */
.footer-info-col strong {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

/* Medical disclaimer — compact, full-width left-aligned, tight to footer */
section.py-5:not([id]):not([style*="linear-gradient"]) {
    padding: 1rem 0 1.15rem !important;
    background: #f8fafb;
    border-top: 1px solid rgba(2, 71, 67, 0.06);
}

section.py-5:not([id]):not([style*="linear-gradient"]) > .container {
    max-width: var(--container-width);
}

section.py-5 p[style*="font-size: 0.8rem"],
section.py-5 p[style*="0.8rem"],
section.py-5 p.medical-disclaimer,
p.medical-disclaimer {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    color: #64748b !important;
}

/* Buttons � optical alignment */
.btn {
    line-height: 1.2;
    white-space: nowrap;
}

.btn i {
    line-height: 1;
}

/* Nav alignment */
.nav {
    gap: 1.5rem;
    margin-right: 1.5rem;
}

.nav-link {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0;
}

.logo-text {
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.top-bar {
    font-size: 0.78rem;
    line-height: 1.3;
    padding: 0.45rem 0;
}

.top-bar-content {
    align-items: center;
    gap: var(--space-3);
}

/* Inline centered CTAs on service pages */
.container.text-center .btn + .btn,
.container.text-center a.btn {
    margin-top: 0;
}

.container.text-center {
    display: block;
}

.container.text-center.scroll-animate,
section .container.text-center {
    text-align: center;
}

section .container.text-center h2 {
    margin-bottom: var(--space-3);
}

section .container.text-center > p {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-5);
    max-width: 52ch;
}

section .container.text-center .btn {
    margin: 0.25rem;
    vertical-align: middle;
}

/* Reduce sticky bar visual bulk */
.mobile-sticky-cta .btn {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    padding: 0.7rem 0.5rem;
    min-height: 46px;
    text-transform: uppercase;
}

/* Responsive spacing tighten */
@media (max-width: 991px) {
    :root {
        --section-y: 2rem;
        --section-y-sm: 1.5rem;
        --container-pad: 1rem;
    }

    body {
        padding-top: 86px;
    }

    .hero {
        padding: var(--space-7) 0 var(--space-6);
        min-height: 58vh;
    }

    .hero-content {
        padding: var(--space-5);
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 1.7rem;
        margin-bottom: var(--space-3);
    }

    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: var(--space-5);
    }

    .value-prop-grid,
    .doctor-profile-grid,
    .services-category-row {
        gap: var(--space-6);
    }

    .value-prop-text h2 {
        font-size: 1.5rem;
    }

    .footer {
        padding: var(--space-8) 0 var(--space-5);
    }

    .footer-links-row {
        gap: var(--space-3) var(--space-4);
        padding: var(--space-4) 0;
        justify-content: center;
    }

    .footer-links-row a {
        font-size: 0.72rem;
    }

    .section-header {
        margin-bottom: var(--space-6);
    }
}

@media (max-width: 600px) {
    :root {
        --section-y: 1.75rem;
        --section-y-sm: 1.35rem;
        --container-pad: 0.95rem;
    }

    .hero {
        min-height: 48vh;
        padding: var(--space-5) 0;
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }

    .serving-checklist-box {
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .service-card-content {
        padding: var(--space-5);
    }

    .contact-form-card {
        padding: var(--space-5);
    }

    .cta-row {
        padding: var(--space-8) 0;
    }

    .newsletter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-form .btn {
        width: 100%;
    }
}

/* =========================================================
   Inner pages brightness pass � match home clarity
   ========================================================= */

/* Soften global canvas — soft smile shows through (do not paint solid white) */
body {
    background-color: #f4f9f8;
}

/* Light bands stay translucent so merged smile bg is visible in empty gutters */
.bg-light {
    background: transparent !important;
}

/* ---------- PAGE TITLE BANNERS ----------
   SUPERSEDED (safe consolidate): smile-photo "brightness pass" heroes fought
   teal .page-hero. Authority → SITEWIDE UNIFORM .page-hero (end of file).
   Home photo hero (.hero-ribbon) is separate and untouched.
*/

/* Breadcrumb — light glass over soft smile canvas */
.page-breadcrumb {
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom: 1px solid rgba(2, 71, 67, 0.07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
}

/* Content sections stay transparent so body/section smile wash fills empty white */
section.py-6:not(.bg-light):not(.cta-row):not(.newsletter-section) {
    background: transparent;
}

/* Alternating light sections — no solid mint paint over the smile */
section.py-6.bg-light {
    background: transparent !important;
}

/* Cards � brighter surface + clearer edge */
.service-card,
.contact-form-card,
.faq-item,
.jump-list-box,
.scroll-animate[style*="border-left"] {
    background-color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(2, 71, 67, 0.05);
}

.service-card {
    border: 1px solid rgba(2, 71, 67, 0.07);
}

.service-card:hover {
    border-color: rgba(191, 161, 95, 0.55);
    box-shadow: 0 12px 28px rgba(2, 71, 67, 0.09);
}

/* Resting state: solid soft teal circle, dark icon */
.service-card-icon {
    background: #e8f4f2 !important;
    background-image: none !important;
    color: var(--primary) !important;
    border-radius: 50%;
}

.service-card-icon i {
    color: inherit;
}

/* Hover reaffirmed — solid brand teal, pure white glyph */
.service-card:hover .service-card-icon {
    background: var(--primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-radius: 50%;
}

.service-card:hover .service-card-icon i {
    color: #ffffff !important;
}

.service-card h3 {
    color: var(--primary);
}

.service-card p {
    color: #4b5c6b;
}

/* Callout / answer-first boxes � bright with gold accent */
.scroll-animate[style*="border-left"] {
    background: linear-gradient(90deg, #fffdf8 0%, #ffffff 45%) !important;
    border-left-color: var(--accent) !important;
    border: 1px solid rgba(191, 161, 95, 0.25);
    border-left-width: 4px !important;
    box-shadow: 0 6px 20px rgba(2, 71, 67, 0.04);
}

.scroll-animate[style*="border-left"] p,
.scroll-animate[style*="border-left"] strong {
    color: var(--text) !important;
}

/* Prose on service pages � deeper ink for readability on white */
section .container[style*="max-width"] h2 {
    color: var(--primary);
}

section .container[style*="max-width"] p,
section .container[style*="max-width"] li {
    color: #334155;
}

/* FAQ brighter */
.faq-item {
    border: 1px solid rgba(2, 71, 67, 0.07);
    background: #fff !important;
}

.faq-item:hover {
    border-color: rgba(191, 161, 95, 0.5);
}

.faq-content {
    background: #fffaf0;
}

.faq-trigger {
    color: var(--primary);
}

.faq-content p {
    color: #475569;
}

/* Jump list boxes */
.jump-list-box {
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.08);
    box-shadow: 0 4px 16px rgba(2, 71, 67, 0.04);
}

/* Serving checklist � crisp */
.serving-checklist-box {
    background: #ffffff;
    border: 1px solid rgba(2, 71, 67, 0.08);
    box-shadow: 0 4px 14px rgba(2, 71, 67, 0.04);
}

/* Value prop / about text contrast */
.value-prop-text h2,
.doctor-profile-grid .value-prop-text h2 {
    color: var(--primary);
}

.value-prop-text p {
    color: #475569;
}

.doctor-profile-grid .value-prop-text p {
    color: #334155;
}

.value-prop-image {
    box-shadow: 0 10px 30px rgba(2, 71, 67, 0.08);
    border: 1px solid rgba(2, 71, 67, 0.06);
}

.doctor-image-wrapper {
    box-shadow: 0 12px 32px rgba(2, 71, 67, 0.1);
    border: 1px solid rgba(2, 71, 67, 0.06);
}

/* Forms � brighter fields */
.contact-form-card {
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.08);
    box-shadow: 0 10px 32px rgba(2, 71, 67, 0.07);
}

.form-control,
.newsletter-form input {
    background-color: #ffffff;
    border: 1px solid rgba(2, 71, 67, 0.12);
}

.form-control:focus,
.newsletter-form input:focus {
    border-color: var(--accent);
    background-color: #ffffff;
}

/* Newsletter strip � bright cream-mint */
.newsletter-section {
    background: linear-gradient(180deg, #f7faf9 0%, #eef6f4 100%);
    border-top: 1px solid rgba(2, 71, 67, 0.06);
    border-bottom: 1px solid rgba(2, 71, 67, 0.06);
}

/* CTA stays rich but slightly brighter primary */
.cta-row {
    background: linear-gradient(135deg, #035c56 0%, #024743 48%, #013833 100%);
}

/* Dark-band hover: lighter gold + white border (see .review-cta-banner / .cta-row unified rules) */

/* Section headers on white */
.section-header h2 {
    color: var(--primary);
}

.section-header p {
    color: #5b6b7c;
}

.pre-headline {
    color: var(--accent);
}

/* Medical disclaimer — readable, full width, left-aligned, tight to footer */
section.py-5 p[style*="0.8rem"],
section.py-5 p[style*="font-size: 0.8rem"],
section.py-5 p.medical-disclaimer,
p.medical-disclaimer {
    color: #64748b !important;
    background: transparent;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Disclaimer strip sits flush above footer */
section.py-5:has(p.medical-disclaimer),
section.py-5:has(p[style*="0.8rem"] strong) {
    padding: 1rem 0 1.1rem !important;
}

.footer {
    margin-top: 0 !important;
}

/* Final footer contact alignment + compact spacing lock */
.footer {
    padding: 1.25rem 0 0.9rem !important;
}

.footer .footer-info-row {
    display: grid !important;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: 1.75rem !important;
    row-gap: 0.85rem !important;
    margin-bottom: 0.65rem !important;
}

.footer .footer-brand,
.footer .footer-info-col {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
}

/* Footer logo size — EN + ES; tall enough for full tagline under icon */
.footer .footer-brand img,
.footer .footer-brand .logo img,
.footer #logo-footer img {
    height: 148px !important;
    width: auto !important;
    max-width: 300px !important;
    object-fit: contain !important;
    object-position: left top !important;
}

.footer .footer-info-col ul {
    gap: 0.5rem !important;
}

.footer .footer-info-col li {
    display: grid !important;
    grid-template-columns: 1.35rem minmax(0, 1fr) !important;
    column-gap: 0.65rem !important;
    align-items: start !important;
}

.footer .footer-info-col li i {
    width: 1.35rem !important;
    height: 1.35rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
}

.footer .footer-info-col li a,
.footer .footer-info-col li > div {
    text-align: left !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
}

.footer .footer-social {
    margin-top: 0.4rem !important;
    margin-left: calc(1.35rem + 0.65rem) !important;
}

.footer .footer-areas {
    padding: 0.5rem 0 0.15rem !important;
    margin-bottom: 0.15rem !important;
}

.footer .footer-areas-heading {
    margin: 0 0 0.35rem !important;
}

.footer .footer-links-row {
    padding: 0.45rem 0 !important;
    gap: 0.4rem 0.9rem !important;
}

.footer .footer-copyright-row {
    padding-top: 0.5rem !important;
}

.footer .footer-copyright-row p {
    margin-bottom: 0.35rem !important;
}

@media (max-width: 991px) {
    .footer .footer-info-row {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        margin-bottom: 0.55rem !important;
    }
    .footer .footer-brand img,
    .footer .footer-brand .logo img,
    .footer #logo-footer img {
        height: 128px !important;
        max-width: 260px !important;
    }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .footer .footer-info-row {
        grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 1.25rem !important;
    }
    .footer .footer-brand img,
    .footer .footer-brand .logo img,
    .footer #logo-footer img {
        height: 136px !important;
        max-width: 280px !important;
    }
}

/* Extra lock: Spanish footer logo never smaller than English */
html[lang="es"] .footer .footer-brand img,
html[lang="es"] .footer .footer-brand .logo img,
html[lang="es"] .footer #logo-footer img {
    height: 148px !important;
    max-width: 300px !important;
}

@media (max-width: 991px) {
    html[lang="es"] .footer .footer-brand img,
    html[lang="es"] .footer .footer-brand .logo img,
    html[lang="es"] .footer #logo-footer img {
        height: 128px !important;
        max-width: 260px !important;
    }
}

/* Images slightly crisper presentation */
.value-prop-image img,
.doctor-image-wrapper img {
    filter: contrast(1.03) saturate(1.05);
}

/* Subservice / category cards on services hub */
.subservices-grid .service-card,
.services-category-row .jump-list-box {
    background: #fff !important;
}

/* Bright sections: same accent contrast as global (dark text on gold) */
section.py-6 .btn-accent,
section.py-6 a.btn-accent {
    color: #012e2b;
    box-shadow: 0 6px 18px rgba(191, 161, 95, 0.28);
}

section.py-6 .btn-secondary {
    background: #ffffff;
}

section.py-6 .btn-secondary:hover,
section.py-6 .btn-secondary:focus-visible {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* Privacy / simple content pages */
#our-team .scroll-animate,
#nuestro-equipo .scroll-animate {
    background: linear-gradient(90deg, #fffdf8, #ffffff) !important;
}

.footer-areas-text {
    display: block;
    color: #cbd5e1;
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 0.15rem;
}

/* Keep city chips horizontal on small screens */
@media (max-width: 600px) {
    .serving-list-horizontal,
    .serving-checklist-box ul {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
    }
}

/* Footer areas — single centered row on desktop/web */
.footer-areas-heading {
    margin: 0 0 0.3rem !important;
}

.footer-areas-heading strong {
    display: block;
    margin-bottom: 0;
}

.footer .footer-areas,
.footer-areas {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.footer-areas .footer-areas-heading,
.footer-areas-heading {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 0.55rem !important;
}

.footer-areas .footer-areas-heading strong,
.footer-areas-heading strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* 13 areas no longer fit one line at any width — wrap centered, no horizontal scroll */
.footer-areas .footer-areas-list,
.footer-areas-list {
    list-style: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    gap: 0.3rem 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.footer-areas .footer-areas-list li,
.footer-areas-list li {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    float: none !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: clamp(0.72rem, 1.05vw, 0.84rem) !important;
    color: #cbd5e1 !important;
    line-height: 1.3 !important;
}

.footer-areas .footer-areas-list li:not(:last-child)::after,
.footer-areas-list li:not(:last-child)::after {
    content: "\00b7" !important;
    display: inline-block !important;
    margin: 0 0.5rem !important;
    color: rgba(191, 161, 95, 0.9) !important;
    font-weight: 700 !important;
    font-size: 1em !important;
    line-height: 1 !important;
    /* no icons / no bullets besides this separator */
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}

/* Mobile only: allow soft wrap if needed */
@media (max-width: 600px) {
    .footer-areas .footer-areas-list,
    .footer-areas-list {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        row-gap: 0.35rem !important;
        justify-content: center !important;
    }
    .footer-areas .footer-areas-list li,
    .footer-areas-list li {
        font-size: 0.78rem !important;
    }
}

/* Spam protection UI */
.hp-wrap {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-human-check {
    margin: 0.75rem 0 0.25rem;
}

.human-check-label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--text) !important;
    cursor: pointer;
    line-height: 1.4;
}

.human-check-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.newsletter-form .news-human {
    flex: 1 1 100%;
    min-width: 100%;
    margin-top: 0.35rem;
}

.newsletter-form .human-check-label {
    font-size: 0.85rem !important;
}

/* ========== Form thank-you / message modal ========== */
.lp-modal-open {
    overflow: hidden;
}

.lp-modal[hidden] {
    display: none !important;
}

.lp-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.lp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 30, 28, 0.55);
    backdrop-filter: blur(3px);
}

.lp-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.35rem;
    box-shadow: 0 24px 60px rgba(2, 71, 67, 0.22);
    border: 1px solid rgba(2, 71, 67, 0.08);
    text-align: center;
    animation: lpModalIn 0.22s ease-out;
}

@keyframes lpModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-modal__x {
    position: absolute;
    top: 0.5rem;
    right: 0.65rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
}

.lp-modal__x:hover {
    color: var(--primary);
}

.lp-modal__icon {
    font-size: 2.5rem;
    margin: 0.15rem 0 0.75rem;
    line-height: 1;
}

.lp-modal--success .lp-modal__icon { color: #0d9488; }
.lp-modal--error .lp-modal__icon { color: #dc2626; }
.lp-modal--info .lp-modal__icon { color: var(--accent); }

.lp-modal__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.65rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.lp-modal__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 1.25rem;
    text-align: center;
}

.lp-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.lp-modal__actions .lp-modal__btn {
    min-width: 120px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .lp-modal__panel {
        padding: 1.5rem 1.15rem 1.2rem;
    }
    .lp-modal__actions {
        flex-direction: column;
    }
    .lp-modal__actions .lp-modal__btn {
        width: 100%;
    }
}

/* =========================================================
   ES / EN layout parity � fix Spanish wider + alignment drift
   ========================================================= */

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

/* Same content width everywhere (EN + ES) */
.container {
    width: 100%;
    max-width: var(--container-width, 1140px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-pad, 1.25rem) !important;
    padding-right: var(--container-pad, 1.25rem) !important;
    box-sizing: border-box;
}

/* ==========================================================================
   HEADER / NAV — shared layout + z-index (dropdown above hero)
   EN = single-line horizontal (original alignment — do NOT stack)
   ES = multi-line centered labels only (longer Spanish words)
   ========================================================================== */

.main-header {
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 2001;
}

.main-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.logo {
    min-width: 0;
    flex: 0 1 auto;
}

.logo-text {
    white-space: nowrap;
}

.nav {
    position: relative;
    z-index: 2002;
    overflow: visible;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.85rem 1.1rem;
    margin-left: 0.5rem;
    margin-right: 0.75rem;
}

.btn-header {
    flex: 0 0 auto;
}

/* Dropdown panel text default (EN) */
.dropdown-content a {
    white-space: nowrap;
    line-height: 1.3;
    text-align: left;
}

/* Footer links — default single-line (EN baseline) */
.footer-links-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    gap: 1rem 1.5rem;
}

.footer-links-row a {
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.5px;
    max-width: none;
    display: inline-block;
    line-height: 1.3;
}

/* Footer info row width safety (alignment rules live in Main Footer) */
.footer-info-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Tablet: keep left-aligned stack for clean straight rails */
@media (max-width: 900px) and (min-width: 601px) {
    .footer .footer-info-row {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .footer-brand {
        grid-column: auto;
        align-items: flex-start !important;
    }
    .footer-brand .logo {
        justify-content: flex-start !important;
        width: auto;
    }
    .footer-brand img,
    .footer-brand .logo img {
        margin-left: 0;
        margin-right: 0;
        object-position: left top;
    }
}

/* ---------- ENGLISH: hard-lock single-line nav (desktop only — never fight mobile panel) ---------- */
@media (min-width: 992px) {
    html[lang="en"] .nav {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    html[lang="en"] .nav > .nav-link,
    html[lang="en"] .nav > a.nav-link,
    html[lang="en"] .nav .dropdown > .nav-link {
        display: inline-block !important;
        flex-direction: row !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        max-width: none !important;
        text-align: left !important;
        line-height: 1.3 !important;
        padding: 6px 0 !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.5px !important;
    }

    html[lang="en"] .nav > .nav-link::after,
    html[lang="en"] .nav > a.nav-link::after,
    html[lang="en"] .nav .dropdown > .nav-link::after {
        left: 0 !important;
        transform: none !important;
    }

    html[lang="en"] .nav > .nav-link:hover::after,
    html[lang="en"] .nav > .nav-link.active::after,
    html[lang="en"] .nav > a.nav-link:hover::after,
    html[lang="en"] .nav > a.nav-link.active::after,
    html[lang="en"] .nav .dropdown > .nav-link:hover::after,
    html[lang="en"] .nav .dropdown > .nav-link.active::after {
        width: 100% !important;
    }

    html[lang="en"] .nav .dropdown {
        display: inline-block !important;
    }

    html[lang="en"] .nav .dropdown > .nav-link i {
        margin-left: 2px !important;
        margin-top: 0 !important;
        font-size: 0.75rem !important;
    }

    html[lang="en"] .btn-header {
        white-space: nowrap !important;
        max-width: none !important;
        text-align: center !important;
        line-height: 1.2 !important;
        font-size: 0.8rem !important;
        padding: 10px 20px !important;
    }

    html[lang="en"] .dropdown-content a {
        white-space: nowrap !important;
        text-align: left !important;
    }
}

/* English footer: wraps cleanly across lines, no horizontal scrollbar */
html[lang="en"] .footer-links-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.6rem 1.25rem !important;
    overflow-x: visible !important;
}

/* Secondary footer links — smaller, muted, grouped separately below the main row */
.footer-links-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-links-secondary a {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
}
.footer-links-secondary a:hover { color: #fff; }
@media (max-width: 600px) {
    .footer-links-secondary { justify-content: center; }
}

html[lang="en"] .footer-links-row a {
    display: inline-block !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    max-width: none !important;
    text-align: center !important;
    line-height: 1.3 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
}

/* Medium desktops — tighten nav only above hamburger breakpoint */
@media (min-width: 992px) and (max-width: 1280px) {
    html[lang="es"] .header .logo img,
    html[lang="es"] .main-header .logo img {
        height: 58px;
        max-width: min(160px, 26vw);
    }
    html[lang="es"] .header .logo-text,
    html[lang="es"] .main-header .logo-text {
        font-size: 1.05rem !important;
    }
    html[lang="es"] .nav > .nav-link,
    html[lang="es"] .nav > a.nav-link,
    html[lang="es"] .nav .dropdown > .nav-link {
        max-width: 6.8rem !important;
        font-size: 0.7rem !important;
        min-width: 3.8rem;
        padding: 0.25rem 0.15rem 0.35rem !important;
    }
    html[lang="es"] .btn-header,
    html[lang="es"] a.btn-header {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
    html[lang="es"] body {
        padding-top: 150px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .logo-text {
        display: block !important;
        font-size: 1.22rem;
    }
    .logo img {
        height: 66px;
    }
    html[lang="en"] .nav {
        gap: 0.75rem 1rem;
    }
    html[lang="en"] .nav > .nav-link,
    html[lang="en"] .nav > a.nav-link,
    html[lang="en"] .nav .dropdown > .nav-link {
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        max-width: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .logo-text {
        display: block !important;
        font-size: 1.12rem;
    }
    .logo img {
        height: 62px;
    }
    html[lang="en"] .nav {
        gap: 0.65rem 0.85rem;
        margin-right: 0.5rem;
    }
    html[lang="en"] .nav > .nav-link,
    html[lang="en"] .nav > a.nav-link,
    html[lang="en"] .nav .dropdown > .nav-link {
        font-size: 0.75rem !important;
        letter-spacing: 0.4px !important;
        white-space: nowrap !important;
        max-width: none !important;
    }
    html[lang="en"] .btn-header {
        font-size: 0.75rem !important;
        padding: 9px 14px !important;
        white-space: nowrap !important;
        max-width: none !important;
    }
}

/* ---------- SPANISH ONLY: roomier multi-line nav (desktop; mobile uses slide panel) ---------- */
@media (min-width: 992px) {
    /* Extra top offset — ES header is taller with wrapped labels */
    html[lang="es"] body {
        padding-top: 160px;
    }

    html[lang="es"] .main-header {
        height: auto !important;
        min-height: 112px;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    html[lang="es"] .header.scrolled .main-header {
        height: auto !important;
        min-height: 96px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Spanish HEADER logo only (do NOT shrink footer logo) */
html[lang="es"] .header .logo,
html[lang="es"] .main-header .logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    max-width: min(280px, 34vw);
}

html[lang="es"] .header .logo-text,
html[lang="es"] .main-header .logo-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    font-size: 1.2rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

html[lang="es"] .header .logo img,
html[lang="es"] .main-header .logo img {
    height: 66px;
    max-width: min(190px, 30vw);
}

html[lang="es"] .header.scrolled .logo img,
html[lang="es"] .header.scrolled .main-header .logo img {
    height: 56px;
}

/* Spanish FOOTER logo — same size as English (was incorrectly shrunk by .logo img rule) */
html[lang="es"] .footer .footer-brand .logo,
html[lang="es"] .footer .footer-brand a.logo,
html[lang="es"] .footer #logo-footer {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
}

html[lang="es"] .footer .footer-brand img,
html[lang="es"] .footer .footer-brand .logo img,
html[lang="es"] .footer #logo-footer img {
    height: 128px !important;
    width: auto !important;
    max-width: 360px !important;
    min-width: 0 !important;
    object-fit: contain !important;
    object-position: left top !important;
    display: block !important;
}

@media (max-width: 991px) {
    html[lang="es"] .footer .footer-brand img,
    html[lang="es"] .footer .footer-brand .logo img,
    html[lang="es"] .footer #logo-footer img {
        height: 112px !important;
        max-width: 320px !important;
    }
}

/* Desktop-only Spanish header nav layout (do not apply under hamburger) */
@media (min-width: 992px) {
    html[lang="es"] .main-header-content {
        gap: 0.85rem 1.15rem;
        align-items: center;
    }

    html[lang="es"] .nav {
        gap: 0.55rem 0.85rem !important;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: 0.4rem;
        margin-right: 0.6rem;
        justify-content: flex-end;
        min-width: 0;
        flex: 1 1 auto;
    }

    html[lang="es"] .nav > .nav-link,
    html[lang="es"] .nav > a.nav-link,
    html[lang="es"] .nav .dropdown > .nav-link {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: keep-all;
        overflow-wrap: break-word;
        hyphens: manual;
        /* Wider columns so labels like "Preguntas Frecuentes" don't crush */
        max-width: 7.6rem !important;
        min-width: 4.2rem;
        line-height: 1.25 !important;
        padding: 0.3rem 0.25rem 0.4rem !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.015em !important;
        gap: 0.08rem;
        flex: 0 1 auto;
    }

    html[lang="es"] .nav > .nav-link::after,
    html[lang="es"] .nav > a.nav-link::after,
    html[lang="es"] .nav .dropdown > .nav-link::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0.1rem !important;
    }

    html[lang="es"] .nav > .nav-link:hover::after,
    html[lang="es"] .nav > .nav-link.active::after,
    html[lang="es"] .nav > a.nav-link:hover::after,
    html[lang="es"] .nav > a.nav-link.active::after,
    html[lang="es"] .nav .dropdown > .nav-link:hover::after,
    html[lang="es"] .nav .dropdown > .nav-link.active::after {
        width: 65% !important;
    }

    html[lang="es"] .nav .dropdown {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    html[lang="es"] .nav .dropdown > .nav-link i {
        margin-left: 0 !important;
        margin-top: 0.2rem !important;
        font-size: 0.75rem !important;
    }

    /*
     * Spanish header CTA ("Reserva Tu Cita") — single-line like EN "Schedule Your Visit".
     * Do NOT force multi-line / narrow max-width (that made the button look broken).
     */
    html[lang="es"] .btn-header,
    html[lang="es"] a.btn-header {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 10px 16px !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.03em !important;
        flex-shrink: 0 !important;
    }

    html[lang="es"] .dropdown-content {
        min-width: 280px;
        padding: 10px;
    }

    html[lang="es"] .dropdown-content a {
        text-align: left;
        white-space: normal;
        line-height: 1.35;
        padding: 11px 16px;
        font-size: 0.82rem;
    }
}

/* Spanish footer: roomier multi-line labels */
html[lang="es"] .footer-links-row {
    gap: 0.45rem 0.9rem !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

html[lang="es"] .footer-links-row a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
    text-align: center !important;
    line-height: 1.3 !important;
    max-width: 8rem !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.03em !important;
    padding: 0.3rem 0.25rem !important;
}

/* Medium desktop — still roomy (desktop only) */
@media (min-width: 992px) and (max-width: 1200px) {
    html[lang="es"] .nav {
        gap: 0.7rem 0.95rem !important;
        margin-right: 0.75rem;
    }
    html[lang="es"] .nav > .nav-link,
    html[lang="es"] .nav > a.nav-link,
    html[lang="es"] .nav .dropdown > .nav-link {
        max-width: 7.25rem !important;
        font-size: 0.76rem !important;
        padding: 0.35rem 0.3rem 0.45rem !important;
    }
    html[lang="es"] .btn-header,
    html[lang="es"] a.btn-header {
        max-width: none !important;
        white-space: nowrap !important;
        font-size: 0.7rem !important;
        padding: 9px 14px !important;
    }
}

@media (min-width: 992px) and (max-width: 1100px) {
    html[lang="es"] .nav {
        gap: 0.6rem 0.8rem !important;
    }
    html[lang="es"] .nav > .nav-link,
    html[lang="es"] .nav > a.nav-link,
    html[lang="es"] .nav .dropdown > .nav-link {
        max-width: 6.75rem !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.015em !important;
    }
    html[lang="es"] .btn-header,
    html[lang="es"] a.btn-header {
        max-width: none !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
}

/* Spanish longer body copy — keep columns aligned, prevent overflow */
html[lang="es"] h1,
html[lang="es"] h2,
html[lang="es"] h3,
html[lang="es"] .section-header h2,
html[lang="es"] .hero-content h1,
html[lang="es"] .value-prop-text h2,
html[lang="es"] .cta-row h2 {
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

html[lang="es"] p,
html[lang="es"] li,
html[lang="es"] .service-card p,
html[lang="es"] .faq-trigger,
html[lang="es"] .faq-content p {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

html[lang="es"] .section-header {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

html[lang="es"] .hero-content {
    max-width: min(480px, 100%);
}

html[lang="es"] .hero-content p {
    max-width: 100%;
}

/* Service cards: equal height text alignment EN/ES */
.services-grid-5 {
    align-items: stretch;
}

.service-card {
    height: 100%;
}

.service-card-content {
    height: 100%;
    justify-content: flex-start;
}

.service-card p {
    flex-grow: 1;
}

/* Value prop / doctor grids never exceed container */
.value-prop-grid,
.doctor-profile-grid,
.services-category-row,
.newsletter-grid,
.hero-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Override oversized inline page titles (common on ES + EN) */
section#fl-main-content.py-5 h1,
section.py-5#fl-main-content h1,
section.py-5[style*="linear-gradient"] h1 {
    font-size: clamp(1.55rem, 2.4vw, 2.15rem) !important;
    max-width: 22ch;
    margin-left: auto !important;
    margin-right: auto !important;
}

section#fl-main-content.py-5 > .container > p,
section.py-5#fl-main-content > .container > p {
    max-width: 48ch !important;
}

/* Prose columns same width EN/ES */
.container[style*="max-width: 85ch"],
.container[style*="max-width:85ch"] {
    max-width: min(72ch, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile: footer link tweaks only (nav panel rules live in the 991px hamburger block + final override) */
@media (max-width: 991px) {
    html[lang="en"] .footer-links-row a {
        max-width: none !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        display: inline-block !important;
        flex-direction: row !important;
        line-height: 1.3 !important;
    }
    html[lang="es"] body {
        padding-top: 86px !important;
    }
    html[lang="es"] .footer-links-row {
        gap: 0.75rem 1rem !important;
        align-items: flex-start !important;
    }
    html[lang="es"] .footer-links-row a {
        white-space: normal !important;
        max-width: 8.5rem !important;
        font-size: 0.78rem !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding: 0.3rem 0.25rem !important;
    }
}

/* Safety: page content never paints over fixed header menus (EN + ES) */
main,
section.hero,
section#fl-main-content,
.page-breadcrumb,
.footer,
section {
    position: relative;
    z-index: 0;
}

.header {
    z-index: 4000 !important;
}

/* Desktop: allow dropdown overflow; mobile panel needs its own overflow (see final override) */
@media (min-width: 992px) {
    .header .main-header,
    .header .nav {
        overflow: visible !important;
        z-index: 4001;
    }

    .header .dropdown {
        z-index: 4002;
    }

    .header .dropdown-content {
        z-index: 5000 !important;
        background: #ffffff;
    }
}


/* ==========================================================================
   SITEWIDE SPACING CLEANUP — remove empty white bands (EN + ES)
   ========================================================================== */

/* Tighter default paragraph rhythm */
p {
    margin-bottom: 0.85rem;
}

/* Hide truly empty spacer paragraphs only (avoid breaking form/JS containers) */
p:empty {
    display: none;
}

/* Compact home sections */
section.py-6,
section.py-5 {
    box-sizing: border-box;
}

/* Value props / doctor rows — less dead space */
.value-prop-grid,
.doctor-profile-grid {
    gap: 1.5rem !important;
    align-items: center;
}

.value-prop-text h2 {
    margin-bottom: 0.65rem !important;
}

.value-prop-text p {
    margin-bottom: 0.75rem !important;
}

/* Service cards denser but neat */
.service-card-content {
    padding: 1.25rem 1.1rem !important;
}

.service-card-icon {
    margin-bottom: 0.9rem !important;
}

.service-card h3 {
    margin-bottom: 0.5rem !important;
}

.service-card p {
    margin-bottom: 0.75rem !important;
}

/* FAQ denser spacing */
.faq-item {
    margin-bottom: 0.65rem !important;
}

.faq-trigger {
    padding: 1rem 1.15rem !important;
}

/* Clear space between question and answer */
.faq-content p,
.faq-content > * {
    padding-top: 0.15rem !important;
    padding-bottom: 1.2rem !important;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
    margin: 0 !important;
}

.faq-item.active .faq-trigger {
    padding-bottom: 0.65rem !important;
    border-bottom: 1px solid rgba(2, 71, 67, 0.06);
}

/* Prose-width containers must not squash FAQ answers */
section .container[style*="max-width"] .faq-content p,
section .container[style*="max-width"] .faq-accordion p {
    margin-bottom: 0 !important;
    color: var(--text-muted) !important;
}

/* Contact / form cards */
.contact-form-card {
    padding: 1.35rem 1.35rem !important;
}

/* Jump lists */
.jump-list-box {
    padding: 1.25rem 1.35rem !important;
}

.services-category-row {
    gap: 1.5rem !important;
    margin-bottom: 1.75rem !important;
}

/* Inner page titles — kill huge empty hero padding */
section.py-5#fl-main-content,
section#fl-main-content.py-5,
section.py-5[style*="padding"],
section[style*="padding: 5rem"],
section[style*="padding:5rem"],
section[style*="padding: 4rem"],
section[style*="padding:4rem"] {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

section.py-5#fl-main-content h1,
section#fl-main-content.py-5 h1,
section.py-5 h1 {
    margin-bottom: 0.5rem !important;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem) !important;
}

section.py-5#fl-main-content > .container > p,
section#fl-main-content.py-5 > .container > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* CTA + newsletter tighter */
.cta-row {
    padding: 2rem 0 !important;
}

.cta-row p {
    margin-bottom: 1.15rem !important;
}

.newsletter-section {
    padding: 1.75rem 0 !important;
}

.newsletter-grid {
    gap: 1.25rem !important;
}

/* Footer denser (spacing cleanup — keep compact) */
.footer {
    padding: 1.25rem 0 0.9rem !important;
}

.footer .footer-info-row {
    margin-bottom: 0.65rem !important;
}

.footer-areas,
.footer .footer-areas {
    padding-top: 0.5rem !important;
    padding-bottom: 0.15rem !important;
    margin-bottom: 0.15rem !important;
}

.footer-links-row,
.footer .footer-links-row {
    padding: 0.45rem 0 !important;
}

.footer-copyright-row,
.footer .footer-copyright-row {
    padding-top: 0.5rem !important;
}

/* Serving cities strip — Serving: + cities one finished line */
#services-grid-section .serving-checklist-box,
.serving-checklist-box {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    padding: 0.65rem 0.9rem !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 0.5rem 0.6rem !important;
}

#services-grid-section .serving-label,
.serving-label {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

#services-grid-section .serving-list-horizontal,
.serving-checklist-box .serving-list-horizontal,
.serving-checklist-box ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    white-space: nowrap;
    margin: 0 !important;
}

.serving-checklist-box li {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
}

@media (max-width: 700px) {
    .serving-checklist-box {
        justify-content: flex-start !important;
    }
    .serving-checklist-box .serving-list-horizontal,
    .serving-checklist-box ul {
        justify-content: flex-start !important;
    }
    .serving-checklist-box li {
        font-size: 0.76rem !important;
        padding: 0.32rem 0.6rem !important;
    }
    .serving-label {
        font-size: 0.72rem !important;
    }
}

/* Breadcrumb slim */
.page-breadcrumb {
    padding: 0.4rem 0 !important;
}

/* Collapse consecutive same-tone sections further */
section.py-6 + section.py-6 {
    padding-top: 1.5rem !important;
}

section.bg-light + section:not(.bg-light) {
    padding-top: 2rem;
}

/* Spanish: keep header padding but not extra body air */
html[lang="es"] .section-header {
    margin-bottom: 1.15rem !important;
}

html[lang="es"] .services-grid-5 {
    margin-top: 1rem !important;
    gap: 1rem !important;
}

/* Collapse stacked line breaks used as spacers */
br + br {
    display: none;
}

/* Utility: zero-margin last children inside sections */
section > .container > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .hero {
        min-height: 50vh !important;
        padding: 1.5rem 0 !important;
    }
    .value-prop-grid,
    .doctor-profile-grid {
        gap: 1.25rem !important;
    }
    section.py-5#fl-main-content,
    section#fl-main-content.py-5 {
        padding-top: 1.35rem !important;
        padding-bottom: 1.35rem !important;
    }
}

@media (max-width: 600px) {
    .hero {
        min-height: 44vh !important;
    }
    .service-card-content {
        padding: 1.1rem 1rem !important;
    }
    .cta-row {
        padding: 1.65rem 0 !important;
    }
    .newsletter-section {
        padding: 1.35rem 0 !important;
    }
    .footer {
        padding: 1.65rem 0 1.15rem !important;
    }
}

/* ==========================================================================
   UNIFORM PAGE EFFECTS (EN + ES) — motion, hover, scroll reveal
   ========================================================================== */

/* Shared easing for interactive UI */
a, button, .btn, .nav-link, .service-card, .faq-item, .faq-trigger,
.dropdown-content a, .btn-text, .footer-links-row a {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Uniform card / FAQ hover lift (same on every page/lang) */
.service-card,
.faq-item,
.jump-list-box,
.contact-form-card {
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease !important;
}

.service-card:hover {
    transform: translate3d(0, -4px, 0) !important;
}

.faq-item:hover {
    transform: none !important; /* FAQ stays put; border only */
}

/* Nav underline same speed EN/ES */
.nav-link::after {
    transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Value prop images same gentle zoom */
.value-prop-image img,
.doctor-image-wrapper img {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.value-prop-grid:hover .value-prop-image img {
    transform: scale(1.02) !important;
}

/* Scroll reveal: force identical base on both languages */
html[lang="en"] .scroll-animate,
html[lang="es"] .scroll-animate {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

html[lang="en"] .scroll-animate.animated,
html[lang="es"] .scroll-animate.animated {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Spanish multi-line nav: same underline behavior as EN (no extra effects) */
html[lang="es"] .nav-link {
    transition: color 0.25s ease !important;
}

/* Buttons never use language-specific motion */
html[lang="en"] .btn,
html[lang="es"] .btn,
html[lang="en"] .btn-header,
html[lang="es"] .btn-header {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Lift matches global button hover (color-blind safe — motion + shadow, not hue flip) */
html[lang="en"] .btn:hover,
html[lang="es"] .btn:hover,
html[lang="en"] .btn-header:hover,
html[lang="es"] .btn-header:hover,
html[lang="en"] .btn:focus-visible,
html[lang="es"] .btn:focus-visible {
    transform: translateY(-2px);
}

/* Dropdown same fade both langs */
.dropdown-content {
    animation: lpFadeIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes lpFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 991px) {
    .dropdown-content {
        animation: none !important;
        transform: none !important;
    }
}

/* Legal / Privacy & Disclaimer pages */
.legal-page {
    text-align: left;
}
.legal-page h2 {
    margin-top: 1.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(2, 71, 67, 0.08);
    color: var(--primary);
}
.legal-page h2:first-of-type {
    border-top: none;
    margin-top: 1.25rem;
}
.legal-page h3 {
    margin-top: 1.15rem;
    color: var(--primary);
    font-size: 1.05rem;
}
.legal-page p,
.legal-page li {
    color: var(--text);
    line-height: 1.65;
}
.legal-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.legal-toc {
    background: var(--primary-light);
    border: 1px solid rgba(2, 71, 67, 0.08);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    margin: 1.25rem 0 1.5rem;
}
.legal-toc p {
    margin: 0 0 0.5rem;
    color: var(--primary);
}
.legal-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.legal-toc a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.legal-page a:not(.btn) {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Hero NAP + click-to-call (competitor report: surface phone & address) */
.hero-nap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}
.hero-nap i {
    color: var(--accent);
    font-size: 0.85rem;
}
.hero-ctas .btn i {
    margin-right: 0.15rem;
}

/* Contact form — call-first primary CTA; form is the soft alternative */
.form-call-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 1.15rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, #e8f4f2 0%, #f5faf9 100%);
    border: 1px solid rgba(2, 71, 67, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}
.form-call-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary) !important;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none !important;
    white-space: nowrap;
}
.form-call-bar__link:hover {
    color: var(--accent) !important;
}

.form-call-primary {
    text-align: center;
    margin: 0 0 1.25rem;
    padding: 1.15rem 1.1rem 1.05rem;
    background: linear-gradient(165deg, #024743 0%, #012e2b 100%);
    border-radius: 14px;
    border: 1px solid rgba(191, 161, 95, 0.35);
    box-shadow: 0 10px 28px rgba(1, 46, 43, 0.18);
}

.form-call-primary__kicker {
    margin: 0 0 0.65rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(240, 226, 176, 0.92) !important;
}

.form-call-primary__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 22rem !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

.form-call-primary__num {
    white-space: nowrap;
}

.form-call-primary__hint {
    margin: 0.75rem 0 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    max-width: 36ch;
    margin-left: auto !important;
    margin-right: auto !important;
}

.form-alt-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
    color: var(--text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.form-alt-divider::before,
.form-alt-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(2, 71, 67, 0.12);
}

.form-alt-divider span {
    flex: 0 1 auto;
    text-align: center;
    max-width: 18rem;
    line-height: 1.35;
}

.contact-form-card__alt-lead {
    margin: 0 0 1.1rem !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: var(--text-muted, #64748b) !important;
}
.form-control[type="tel"] {
    letter-spacing: 0.02em;
}

/* Compact form note under contact form */
.form-note {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.85rem;
    line-height: 1.5;
}
.form-note a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   FINAL MOBILE NAV + STICKY CTA (iPhone 13 Pro Max / large phones, EN + ES)
   Placed last so it always wins earlier desktop / language-specific rules.
   ========================================================================== */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: hidden;
    }

    body {
        padding-top: 86px !important;
    }

    html[lang="es"] body {
        padding-top: 86px !important;
    }

    body.nav-open,
    html.nav-open {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none;
        position: relative;
    }

    .header {
        z-index: 5000 !important;
    }

    .header .main-header {
        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .header .main-header-content {
        height: 86px;
        position: relative;
        z-index: 5100;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .hamburger {
        display: block !important;
        z-index: 5200 !important;
        position: relative;
        flex-shrink: 0;
        padding: 10px;
        margin: 0;
        background: none;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .btn-header {
        display: none !important;
    }

    /* Full-screen slide-in menu — both languages */
    .header .nav,
    html[lang="en"] .header .nav,
    html[lang="es"] .header .nav,
    .nav {
        display: flex !important;
        position: fixed !important;
        top: 86px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: calc(100vh - 86px) !important;
        height: calc(100dvh - 86px) !important;
        margin: 0 !important;
        padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
        background-color: #f8faf9 !important;
        background-color: var(--bg-canvas, #f8faf9) !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.25rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 5050 !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        transform: translate3d(-100%, 0, 0) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        flex: none !important;
        min-width: 0 !important;
        transition: transform 0.28s ease, visibility 0.28s ease !important;
    }

    .header .nav.open,
    html[lang="en"] .header .nav.open,
    html[lang="es"] .header .nav.open,
    .nav.open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .header .nav > .nav-link,
    .header .nav > a.nav-link,
    html[lang="en"] .header .nav > .nav-link,
    html[lang="en"] .header .nav > a.nav-link,
    html[lang="es"] .header .nav > .nav-link,
    html[lang="es"] .header .nav > a.nav-link,
    .nav > .nav-link,
    .nav > a.nav-link {
        display: block !important;
        width: 100% !important;
        max-width: 20rem !important;
        min-width: 0 !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
        padding: 0.9rem 1rem !important;
        letter-spacing: 0.02em !important;
        flex-direction: row !important;
    }

    .header .nav .dropdown,
    html[lang="en"] .header .nav .dropdown,
    html[lang="es"] .header .nav .dropdown,
    .nav .dropdown {
        display: block !important;
        width: 100% !important;
        max-width: 20rem !important;
        position: relative !important;
        text-align: center;
    }

    .header .nav .dropdown > .nav-link,
    html[lang="en"] .header .nav .dropdown > .nav-link,
    html[lang="es"] .header .nav .dropdown > .nav-link,
    .nav .dropdown > .nav-link {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.4rem !important;
        white-space: normal !important;
        font-size: 1.05rem !important;
        padding: 0.9rem 1rem !important;
        flex-direction: row !important;
    }

    .header .nav .dropdown > .nav-link i,
    .nav .dropdown > .nav-link i {
        margin-left: 0.25rem !important;
        margin-top: 0 !important;
        font-size: 0.75rem !important;
    }

    /* Services children: only when .open (tap accordion) — kill hover-open on touch */
    .header .nav .dropdown-content,
    html[lang="en"] .header .nav .dropdown-content,
    html[lang="es"] .header .nav .dropdown-content,
    .nav .dropdown-content,
    .header .nav .dropdown:hover > .dropdown-content,
    .header .nav .dropdown:focus-within > .dropdown-content {
        display: none !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none !important;
        border: none !important;
        background-color: var(--primary-light, #e8f4f2) !important;
        text-align: center !important;
        width: 100% !important;
        min-width: 0 !important;
        animation: none !important;
        margin-top: 0.15rem !important;
        padding: 0.35rem 0.5rem 0.65rem !important;
        border-radius: 8px !important;
        z-index: 1 !important;
    }

    .header .nav .dropdown.open > .dropdown-content,
    html[lang="en"] .header .nav .dropdown.open > .dropdown-content,
    html[lang="es"] .header .nav .dropdown.open > .dropdown-content,
    .nav .dropdown.open > .dropdown-content {
        display: block !important;
    }

    .header .nav .dropdown-content a,
    .nav .dropdown-content a {
        display: block !important;
        padding: 0.75rem 0.75rem !important;
        font-size: 0.95rem !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .header .nav .mobile-cta,
    .nav .mobile-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 280px !important;
        margin-top: 1.25rem !important;
        padding-bottom: 0.5rem !important;
    }

    .nav .mobile-cta .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        white-space: normal;
    }

    .mobile-lang {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        margin-top: 0.35rem;
    }

    /* Sticky Call / Book — below open menu, above page */
    .mobile-sticky-cta {
        display: block !important;
        z-index: 4500 !important;
    }

    body.nav-open .mobile-sticky-cta {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.has-mobile-sticky-cta {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==========================================================================
   FOOTER LOGO + ADDRESS — uniform sitewide (EN + ES)
   Asset: images/new-logo-footer.png (icon + MODERN DENTISTRY WITH GENTLE CARE)
   Tall enough that tagline is fully readable; never use logo2.png here.
   ========================================================================== */
.footer .footer-info-row {
  display: grid !important;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 1.75rem !important;
  align-items: start !important;
}

.footer #logo-footer,
.footer .footer-brand .logo {
  display: inline-flex !important;
  align-items: flex-start !important;
  height: auto !important;
  max-width: 100% !important;
  line-height: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.footer .footer-brand {
  overflow: visible !important;
}

/* Final sizing lock — full logo including tagline */
.footer .footer-brand img,
.footer .footer-brand .logo img,
.footer #logo-footer img,
html[lang="es"] .footer .footer-brand img,
html[lang="es"] .footer .footer-brand .logo img,
html[lang="es"] .footer #logo-footer img {
  height: 156px !important;
  width: auto !important;
  max-width: min(280px, 100%) !important;
  object-fit: contain !important;
  object-position: left top !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Address lines always stack (fixes CenterSterling glue) */
/* Address lines always stack, wherever they are used (footer, contact panel,
   info cards). Scoping this to .footer previously made the contact-page
   address run together as "Unit #145The Shoppes at Potomac CenterSterling". */
.footer-addr-line {
  display: block !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

.footer .footer-info-col li a[href*="maps"] {
  white-space: normal !important;
  display: block !important;
}

@media (max-width: 991px) {
  .footer .footer-info-row {
    grid-template-columns: 1fr !important;
  }
  .footer .footer-brand img,
  .footer .footer-brand .logo img,
  .footer #logo-footer img,
  html[lang="es"] .footer .footer-brand img,
  html[lang="es"] .footer .footer-brand .logo img,
  html[lang="es"] .footer #logo-footer img {
    height: 140px !important;
    max-width: min(240px, 90vw) !important;
  }
}
/* ==========================================================================
   Office walkthrough video section
   ========================================================================== */
.office-tour-section {
  background: #fff;
}
.office-tour-section.bg-light,
.office-tour-section.py-6.bg-light {
  background: var(--bg-light, #f4f8fb);
}
.office-tour-section .section-header {
  margin-bottom: 1.5rem;
}
.office-tour-frame {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f8fb;
  box-shadow: 0 16px 40px rgba(2, 71, 67, 0.14);
  border: 1px solid rgba(2, 71, 67, 0.08);
}
.office-tour-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(70vh, 520px);
  background: #f4f8fb;
  vertical-align: middle;
  object-fit: contain;
}
.office-tour-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}
.office-tour-ctas .btn {
  min-height: 48px;
}
@media (max-width: 600px) {
  .office-tour-video {
    max-height: 56vh;
  }
  .office-tour-ctas {
    flex-direction: column;
  }
  .office-tour-ctas .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Clinic gallery (Home) + stills strip (About) + Contact wayfinding
   Phase A — existing media reuse
   ========================================================================== */
.clinic-gallery-section {
  background: #fff;
}
.clinic-gallery-section.bg-light,
.clinic-gallery-section.py-6.bg-light {
  background: var(--bg-light, #f4f8fb);
}
.clinic-gallery-section .section-header {
  margin-bottom: 1.75rem;
}
.clinic-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}
.clinic-gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f8fb;
  border: 1px solid rgba(2, 71, 67, 0.08);
  box-shadow: 0 8px 24px rgba(2, 71, 67, 0.08);
  display: flex;
  flex-direction: column;
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.clinic-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 71, 67, 0.14);
}
.clinic-gallery-item:focus-within {
  outline: 2px solid var(--accent, #bfa15f);
  outline-offset: 2px;
}
.clinic-gallery-item button.clinic-gallery-trigger {
  all: unset;
  display: block;
  cursor: zoom-in;
  width: 100%;
}
.clinic-gallery-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  background: #e8f0ef;
  pointer-events: none;
}
.clinic-gallery-item figcaption {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary, #024743);
  padding: 0.65rem 0.85rem 0.8rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

/* ========== Clinic gallery lightbox ========== */
.clinic-lightbox[hidden] {
  display: none !important;
}
.clinic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 20, 18, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.clinic-lightbox__panel {
  position: relative;
  width: min(1100px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.clinic-lightbox__img-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(92vh - 5rem);
}
.clinic-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 5.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  background: #0a1a16;
  user-select: none;
  -webkit-user-drag: none;
}
.clinic-lightbox__caption {
  margin: 0;
  color: #f1f5f4;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  max-width: 90%;
}
.clinic-lightbox__counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
}
.clinic-lightbox__btn {
  position: absolute;
  z-index: 2;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.25rem;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.clinic-lightbox__btn:hover,
.clinic-lightbox__btn:focus-visible {
  background: rgba(191, 161, 95, 0.85);
  color: #012e2b;
  outline: none;
}
.clinic-lightbox__close {
  top: 0.75rem;
  right: 0.75rem;
  position: fixed;
}
.clinic-lightbox__prev {
  left: max(0.5rem, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
}
.clinic-lightbox__next {
  right: max(0.5rem, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  position: fixed;
}
body.clinic-lightbox-open {
  overflow: hidden;
}
@media (max-width: 700px) {
  .clinic-lightbox__prev,
  .clinic-lightbox__next {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1rem;
  }
  .clinic-lightbox__caption {
    font-size: 0.85rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .clinic-gallery-item {
    transition: none;
  }
}

/* ========== Equipment photos (illustrative until launch originals) ========== */
.equipment-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 920px;
  margin: 0 auto 1rem;
}
.equipment-photo-card {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(2, 71, 67, 0.1);
  box-shadow: 0 10px 28px rgba(2, 71, 67, 0.08);
}
.equipment-photo-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  background: #e8f0ef;
}
.equipment-photo-card figcaption {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary, #024743);
  padding: 0.75rem 1rem 0.9rem;
  letter-spacing: 0.01em;
}
.equipment-photo-card .equip-illus {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}
.equipment-photo-note {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}
@media (max-width: 700px) {
  .equipment-photo-grid {
    grid-template-columns: 1fr;
  }
  .equipment-photo-card img {
    height: 210px;
  }
}

/* ========== Smile strip (lifestyle / demographic smiles) ========== */
.smile-strip-section {
  background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 55%, #ffffff 100%);
}
.smile-strip-section .section-header {
  margin-bottom: 1.5rem;
}
.smile-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  max-width: 1100px;
  margin: 0 auto;
}
.smile-strip-item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #e8f0ef;
  border: 1px solid rgba(2, 71, 67, 0.08);
  box-shadow: 0 8px 22px rgba(2, 71, 67, 0.08);
  aspect-ratio: 4 / 3;
}
.smile-strip-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.35s ease;
}
.smile-strip-item:hover img {
  transform: scale(1.04);
}
.smile-strip-note {
  max-width: 62ch;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .smile-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .smile-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .smile-strip-item img {
    transition: none;
  }
}
.clinic-gallery-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.75rem;
}
.clinic-gallery-ctas .btn {
  min-height: 48px;
}

/* About — 3 stills above video tour */
.clinic-stills-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  max-width: 920px;
  margin: 0 auto 1.25rem;
}
.clinic-stills-strip figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(2, 71, 67, 0.08);
  box-shadow: 0 8px 20px rgba(2, 71, 67, 0.08);
  background: #fff;
}
.clinic-stills-strip img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
}
.clinic-stills-strip figcaption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary, #024743);
  padding: 0.5rem 0.7rem 0.65rem;
}

/* Contact wayfinding photo */
.contact-wayfinding {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(2, 71, 67, 0.1);
  box-shadow: 0 10px 28px rgba(2, 71, 67, 0.1);
  background: #fff;
}
.contact-wayfinding img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}
.contact-wayfinding-caption {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted, #555);
  background: var(--primary-light, #f1f7f7);
}

/* Contact — find-us landmark photos (real clinic) */
.contact-landmark-block {
  border-radius: 14px;
  border: 1px solid rgba(2, 71, 67, 0.1);
  background: #fff;
  box-shadow: 0 10px 28px rgba(2, 71, 67, 0.08);
  overflow: hidden;
  padding: 1rem 1rem 0.25rem;
}
.contact-landmark-heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--primary, #024743);
  font-weight: 700;
}
.contact-landmark-lead {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text, #1e293b);
}
.contact-landmark-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}
.contact-landmark-card {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(2, 71, 67, 0.08);
  background: #f4f8fb;
}
.contact-landmark-card img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
}
.contact-landmark-card figcaption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary, #024743);
  padding: 0.45rem 0.55rem 0.55rem;
  line-height: 1.35;
}
.contact-landmark-address {
  border-radius: 0 0 12px 12px;
  margin: 0.5rem -1rem 0;
}
.contact-landmark-address a {
  color: var(--primary, #024743);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 520px) {
  .contact-landmark-grid {
    grid-template-columns: 1fr;
  }
  .contact-landmark-card img {
    height: 180px;
  }
}

@media (max-width: 900px) {
  .clinic-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clinic-gallery-item img {
    height: 170px;
  }
}
@media (max-width: 600px) {
  .clinic-gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .clinic-gallery-item img {
    height: 200px;
  }
  .clinic-gallery-ctas {
    flex-direction: column;
  }
  .clinic-gallery-ctas .btn {
    width: 100%;
  }
  .clinic-stills-strip {
    grid-template-columns: 1fr;
  }
  .clinic-stills-strip img {
    height: 190px;
  }
  .contact-wayfinding img {
    height: 200px;
  }
}

/* ==========================================================================
   Lifestyle storytelling — family block + image service cards (mobile-first)
   ========================================================================== */
.family-story-section {
  background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
}
.family-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.family-story-media {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(2, 71, 67, 0.12);
  border: 1px solid rgba(2, 71, 67, 0.08);
  background: #e8f0ef;
}
.family-story-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.family-story-copy .pre-headline {
  margin-bottom: 0.5rem;
}
.family-story-copy h2 {
  color: var(--primary, #024743);
  margin-bottom: 0.75rem;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
}
.family-story-copy p {
  color: var(--text, #1e293b);
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 48ch;
}
.family-story-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.family-story-ctas .btn {
  min-height: 48px;
}
.family-story-note {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  margin-top: 0.75rem;
}

/* Service cards with lifestyle photo headers */
.service-card-visual {
  margin: 0 0 0.85rem;
  border-radius: 10px;
  overflow: hidden;
  background: #e8f0ef;
  aspect-ratio: 4 / 3;
}
.service-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services-grid-5 .service-card {
  display: flex;
  flex-direction: column;
}
.services-grid-5 .service-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Saturday emergency callout */
.sat-oncall-callout {
  background: #fffdf8;
  border: 1px solid rgba(191, 161, 95, 0.45);
  border-left: 4px solid var(--accent, #bfa15f);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 1rem 0 1.5rem;
  max-width: 70ch;
}
.sat-oncall-callout strong {
  color: var(--primary, #024743);
}
.sat-oncall-callout a {
  color: var(--primary, #024743);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .family-story-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .family-story-media {
    order: -1;
  }
}
@media (max-width: 600px) {
  .family-story-ctas {
    flex-direction: column;
  }
  .family-story-ctas .btn {
    width: 100%;
  }
  .service-card-visual {
    aspect-ratio: 16 / 10;
  }
}

/* Blog featured article + card visuals */
.blog-featured-article {
  overflow: hidden;
  padding: 0 !important;
}
.blog-featured-media {
  margin: 0;
  width: 100%;
  max-height: min(42vh, 360px);
  overflow: hidden;
  background: #e8f0ef;
}
.blog-featured-media img {
  width: 100%;
  height: 100%;
  max-height: min(42vh, 360px);
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.blog-featured-body {
  padding: 1.75rem 2rem 2.25rem;
}
@media (max-width: 600px) {
  .blog-featured-media,
  .blog-featured-media img {
    max-height: 220px;
  }
  .blog-featured-body {
    padding: 1.25rem 1.25rem 1.75rem;
  }
}


/* v2.1 premium pass */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .main-header { background-color: #fcfdfe; }
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.25rem; padding: 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: #fff; background: rgba(191, 161, 95, 0.16); border: 1px solid rgba(191, 161, 95, 0.55); border-radius: 999px; padding: 7px 14px; }
.hero-badge i { color: var(--accent); font-size: 0.75rem; }

/* Hero text motion — slow, understated intro + gentle interval accent */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroGoldBreathe {
    0%, 100% { text-shadow: 0 0 0 rgba(226, 201, 135, 0); }
    50%      { text-shadow: 0 0 16px rgba(226, 201, 135, 0.45); }
}
.hero-ribbon-copy .pre-headline { animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.hero-ribbon-copy h1            { animation: heroRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.hero-ribbon-copy > p           { animation: heroRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; }
.hero-nap                       { animation: heroRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both; }
.hero-ctas .btn:nth-child(1)    { animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) 1s both; }
.hero-ctas .btn:nth-child(2)    { animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) 1.15s both; }
/* Slow, subtle glow on the gold phrase every few seconds (starts after intro) */
.hero-ribbon-copy h1 span { animation: heroGoldBreathe 7s ease-in-out 2.2s infinite; }

@media (prefers-reduced-motion: reduce) {
    .hero-ribbon-copy .pre-headline,
    .hero-ribbon-copy h1,
    .hero-ribbon-copy > p,
    .hero-nap,
    .hero-ctas .btn,
    .hero-ribbon-copy h1 span {
        animation: none !important;
    }
}

/* Newsreader for headings; keep UI chrome crisp in Noto Sans */
.btn, .btn-header, .btn-text, .nav-link, .logo-text,
.top-bar-lang, .mobile-lang, .serving-label,
.form-group label, .newsletter-form .form-field label,
.footer-links-row a, .footer-areas strong, .footer-services-heading,
.sitemap-col-heading, .dropdown-content a, .skip-link {
    font-family: var(--font-body);
}

/* ==========================================================================
   Soft smile canvas — final overrides (sparse pages: financial, FAQs, etc.)
   Keeps cards solid white; empty gutters show merged smile bg.
   ========================================================================== */
html {
    background-color: #f4f9f8;
}
body {
    background-color: #f4f9f8 !important;
}
section.py-6,
section.py-6.bg-light,
section.bg-light,
.newsletter-section {
    background-color: transparent !important;
}
/* Keep nav chrome solid for readability */
.header,
.main-header,
.top-bar {
    isolation: isolate;
}
/* Cards & FAQs stay opaque so type never sits on the photo */
.contact-form-card,
.faq-item,
.faq-accordion .faq-item,
.service-card {
    background-color: #ffffff !important;
}
/* Prefer reduced-motion: still show soft bg, no fixed-attachment jank */
@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll, scroll !important;
    }
}

/* Soft-merged smile figure used on sparse inner pages */
.page-soft-smile {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(2, 71, 67, 0.12);
    position: relative;
}
.page-soft-smile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(252, 253, 254, 0.08) 0%,
        rgba(2, 71, 67, 0.06) 55%,
        rgba(241, 247, 247, 0.22) 100%
    );
}
.page-soft-smile img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 360px;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}


/* ==========================================================================
   PHASE 1 — G1 CALM MOTION (calm-motion-premium)
   Additive only. Does not rewrite live header/footer/hero markup.
   Reveal 750ms / 20px · stagger 90ms · hover 320ms · FAQ 480ms · reduced-motion
   ========================================================================== */

:root {
    --motion-reveal: 750ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --motion-hover: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    --motion-faq: 480ms cubic-bezier(0.4, 0, 0.2, 1);
    --reveal-distance: 20px;
    --motion-stagger: 90ms;
}

/* Smooth scroll off when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --- Scroll reveals (agency calm range 600–900ms) --- */
.scroll-animate,
html[lang="en"] .scroll-animate,
html[lang="es"] .scroll-animate {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance, 20px), 0);
    transition:
        opacity var(--motion-reveal, 750ms cubic-bezier(0.25, 0.1, 0.25, 1)),
        transform var(--motion-reveal, 750ms cubic-bezier(0.25, 0.1, 0.25, 1));
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.scroll-animate.animated,
html[lang="en"] .scroll-animate.animated,
html[lang="es"] .scroll-animate.animated {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.scroll-animate.is-settled {
    will-change: auto;
}

/* Hero ribbon never starts hidden (live chrome must paint immediately) */
.hero-ribbon.scroll-animate,
.hero-ribbon.scroll-animate.animated,
.hero .hero-ribbon {
    opacity: 1 !important;
    transform: none !important;
}

/* Stagger — 90ms steps (80–120ms skill band) */
.services-grid-5 .scroll-animate:nth-child(1).animated,
.subservices-grid > .scroll-animate:nth-child(1).animated,
.faq-accordion > .scroll-animate:nth-child(1).animated,
.clinic-gallery-grid > .scroll-animate:nth-child(1).animated,
section .container > div > .scroll-animate:nth-child(1).animated { transition-delay: 0ms; }

.services-grid-5 .scroll-animate:nth-child(2).animated,
.subservices-grid > .scroll-animate:nth-child(2).animated,
.faq-accordion > .scroll-animate:nth-child(2).animated,
.clinic-gallery-grid > .scroll-animate:nth-child(2).animated,
section .container > div > .scroll-animate:nth-child(2).animated { transition-delay: 90ms; }

.services-grid-5 .scroll-animate:nth-child(3).animated,
.subservices-grid > .scroll-animate:nth-child(3).animated,
.faq-accordion > .scroll-animate:nth-child(3).animated,
.clinic-gallery-grid > .scroll-animate:nth-child(3).animated,
section .container > div > .scroll-animate:nth-child(3).animated { transition-delay: 180ms; }

.services-grid-5 .scroll-animate:nth-child(4).animated,
.subservices-grid > .scroll-animate:nth-child(4).animated,
.faq-accordion > .scroll-animate:nth-child(4).animated,
.clinic-gallery-grid > .scroll-animate:nth-child(4).animated,
section .container > div > .scroll-animate:nth-child(4).animated { transition-delay: 270ms; }

.services-grid-5 .scroll-animate:nth-child(5).animated,
.subservices-grid > .scroll-animate:nth-child(5).animated,
.faq-accordion > .scroll-animate:nth-child(5).animated,
.clinic-gallery-grid > .scroll-animate:nth-child(5).animated,
section .container > div > .scroll-animate:nth-child(5).animated { transition-delay: 360ms; }

.services-grid-5 .scroll-animate:nth-child(6).animated,
.subservices-grid > .scroll-animate:nth-child(6).animated,
.faq-accordion > .scroll-animate:nth-child(6).animated,
.clinic-gallery-grid > .scroll-animate:nth-child(6).animated,
section .container > div > .scroll-animate:nth-child(6).animated { transition-delay: 450ms; }

/* Service cards inside a grid that share one parent .scroll-animate */
.services-grid-5.scroll-animate.animated .service-card:nth-child(1) { transition-delay: 0ms; }
.services-grid-5.scroll-animate.animated .service-card:nth-child(2) { transition-delay: 90ms; }
.services-grid-5.scroll-animate.animated .service-card:nth-child(3) { transition-delay: 180ms; }
.services-grid-5.scroll-animate.animated .service-card:nth-child(4) { transition-delay: 270ms; }
.services-grid-5.scroll-animate.animated .service-card:nth-child(5) { transition-delay: 360ms; }
.services-grid-5.scroll-animate.animated .service-card:nth-child(6) { transition-delay: 450ms; }

/* --- Card / trust hovers (restrained, ≤1.02 scale, 280–400ms) --- */
.service-card,
.trust-panel,
.testimonial-card,
.feature-band {
    transition:
        transform var(--motion-hover, 320ms cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--motion-hover, 320ms cubic-bezier(0.4, 0, 0.2, 1)),
        border-color var(--motion-hover, 320ms cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.service-card:hover {
    transform: translate3d(0, -5px, 0) scale(1.015) !important;
    box-shadow: var(--shadow-md) !important;
    border-color: var(--accent) !important;
}

.service-card:active {
    transform: translate3d(0, -2px, 0) scale(1.01) !important;
}

/* --- FAQ accordion (400–550ms band → 480ms) --- */
.faq-content {
    transition:
        max-height var(--motion-faq, 480ms cubic-bezier(0.4, 0, 0.2, 1)),
        opacity calc(var(--motion-faq, 480ms) * 0.85) ease !important;
}

.faq-trigger i {
    transition: transform var(--motion-faq, 480ms cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.faq-item {
    transition:
        border-color var(--motion-hover, 320ms ease),
        box-shadow var(--motion-hover, 320ms ease) !important;
}

/* --- Soft image rise on value/doctor (not layout-shift heavy) --- */
.value-prop-image img,
.doctor-image-wrapper img {
    transition: transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.value-prop-grid:hover .value-prop-image img,
.doctor-profile-grid:hover .doctor-image-wrapper img {
    transform: scale(1.02) !important;
}

/* --- Hero: keep calm intro rise; kill infinite gold loop (competes with CTAs) --- */
.hero-ribbon-copy h1 span,
.hero-ribbon-copy h1 .hero-line-accent {
    animation: heroRise 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.45s both !important;
}

/* Soft review skeleton pulse (G11 assist — loading only) */
@keyframes lpSoftPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

.review-skeleton,
.testimonial-card.is-loading,
[data-review-skeleton] {
    animation: lpSoftPulse 1.4s ease-in-out infinite;
}

/* Buttons: calm hover lift (already present — align timing) */
.btn,
.btn-header {
    transition:
        background-color var(--motion-hover, 320ms ease),
        color var(--motion-hover, 320ms ease),
        border-color var(--motion-hover, 320ms ease),
        box-shadow var(--motion-hover, 320ms ease),
        transform var(--motion-hover, 320ms cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

/* --- Reduced motion: everything visible, no motion --- */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animate.animated,
    html[lang="en"] .scroll-animate,
    html[lang="es"] .scroll-animate,
    html[lang="en"] .scroll-animate.animated,
    html[lang="es"] .scroll-animate.animated {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
        will-change: auto !important;
        animation: none !important;
    }

    .service-card:hover,
    .service-card:active,
    .btn:hover,
    .btn-header:hover,
    .value-prop-image img,
    .doctor-image-wrapper img {
        transform: none !important;
    }

    .hero-ribbon-copy .pre-headline,
    .hero-ribbon-copy h1,
    .hero-ribbon-copy > p,
    .hero-nap,
    .hero-ctas .btn,
    .hero-ribbon-copy h1 span,
    .hero-ribbon-copy h1 .hero-line-accent {
        animation: none !important;
    }

    .review-skeleton,
    .testimonial-card.is-loading,
    [data-review-skeleton] {
        animation: none !important;
        opacity: 1 !important;
    }

    .faq-content,
    .faq-trigger i {
        transition-duration: 0.01ms !important;
    }
}

/* Failsafe: no-JS / no-fx */
.no-js .scroll-animate,
html.no-scroll-fx .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* ==========================================================================
   PHASE 2 — ART DIRECTION (G2–G5 / premium-agency-frontend)
   Additive only. No copy changes. Live header/footer/hero markup untouched.
   G2 cohesion · G3 photo craft · G4 icon brand · G5 section rhythm
   ========================================================================== */

:root {
    /* Art-direction tokens */
    --ad-teal-veil: rgba(2, 71, 67, 0.14);
    --ad-gold-veil: rgba(191, 161, 95, 0.12);
    --ad-photo-radius: 12px;
    --ad-card-media-ratio: 4 / 3;
    --section-y: 3.75rem;
    --section-y-sm: 2.75rem;
    --section-gap-tighten: 0.35rem;
}

/* --------------------------------------------------------------------------
   G5 — Section rhythm (intentional alternating density)
   -------------------------------------------------------------------------- */
section.py-6 {
    padding: var(--section-y) 0 !important;
}

section.py-5 {
    padding: var(--section-y-sm) 0 !important;
}

/* Tighter couplets: reduce double-empty between consecutive light sections */
section.py-6 + section.py-6 {
    padding-top: calc(var(--section-y) - 0.5rem) !important;
}

section.bg-light + section:not(.bg-light),
section:not(.bg-light) + section.bg-light {
    /* natural contrast already; keep calm */
}

.section-header {
    max-width: min(42rem, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(1.25rem, 2.5vw, 1.85rem) !important;
}

.section-header .pre-headline {
    letter-spacing: 0.14em !important;
    font-size: 0.72rem !important;
    color: var(--primary) !important;
    opacity: 0.92;
}

.section-header h2 {
    letter-spacing: -0.025em !important;
    color: var(--heading) !important;
}

.section-header p {
    max-width: 48ch;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--text-muted) !important;
}

/* Soft section washes: brand teal cast so stock smiles unify (G2) */
section.py-6::after,
section.bg-light::after,
.family-story-section::after,
.smile-strip-section::after,
.clinic-gallery-section::after,
.newsletter-section::after,
.office-tour-section::after {
    background: linear-gradient(
        165deg,
        rgba(252, 253, 254, 0.78) 0%,
        rgba(241, 247, 247, 0.72) 40%,
        rgba(250, 246, 238, 0.55) 100%
    ) !important;
}

section.py-6::before,
section.bg-light::before,
.family-story-section::before,
.smile-strip-section::before,
.clinic-gallery-section::before,
.newsletter-section::before,
.office-tour-section::before {
    /* slightly quieter so photos in cards stay hero of section */
    opacity: 0.22 !important;
    filter: saturate(0.88) contrast(1.02);
}

/* --------------------------------------------------------------------------
   G2 + G3 — Photo craft & cohesive grade
   -------------------------------------------------------------------------- */

/* Service card media */
.service-card-visual {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ad-card-media-ratio, 4 / 3);
    overflow: hidden;
    border-radius: var(--ad-photo-radius, 12px);
    margin: 0 0 1rem;
    background: var(--primary-dark);
}

.service-card-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
    transition: transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1), filter 400ms ease !important;
    /* subtle brand grade */
    filter: saturate(0.94) contrast(1.03) brightness(0.98);
}

/* Teal→gold veil over photos (unifies lifestyle + clinic) */
.service-card-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        160deg,
        rgba(2, 71, 67, 0.18) 0%,
        transparent 42%,
        rgba(191, 161, 95, 0.12) 100%
    );
    z-index: 1;
}

.service-card:hover .service-card-visual img {
    transform: scale(1.04) !important;
    filter: saturate(1) contrast(1.04) brightness(1);
}

/* Clinic gallery tiles — shell only; img/caption → CLINIC THUMBS (end of file) */
.clinic-gallery-item {
    border-radius: var(--ad-photo-radius, 12px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 6px 20px rgba(2, 71, 67, 0.08) !important;
    background: var(--bg-white);
}

/* Doctor + value prop portraits */
.doctor-image-wrapper,
.value-prop-image {
    border-radius: var(--ad-photo-radius, 12px) !important;
    overflow: hidden !important;
    box-shadow:
        0 12px 32px rgba(2, 71, 67, 0.12),
        0 0 0 1px rgba(2, 71, 67, 0.08) !important;
    position: relative;
}

.doctor-image-wrapper::after,
.value-prop-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(1, 46, 43, 0.18) 100%
    );
    z-index: 1;
    border-radius: inherit;
}

.doctor-image-wrapper img,
.value-prop-image img {
    filter: saturate(0.96) contrast(1.02);
}

/* Family / story images */
.family-story-grid img,
.feature-band img {
    border-radius: var(--ad-photo-radius, 12px);
    filter: saturate(0.95) contrast(1.02);
}

/* --------------------------------------------------------------------------
   G4 — Iconography brand treatment (teal well + gold whisper)
   -------------------------------------------------------------------------- */
.service-card-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(145deg, #e8f4f2 0%, #f1f7f7 100%) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 4px 12px rgba(2, 71, 67, 0.08) !important;
    position: relative;
}

.service-card-icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(191, 161, 95, 0.35);
    opacity: 0;
    transition: opacity var(--motion-hover, 320ms ease);
    pointer-events: none;
}

.service-card:hover .service-card-icon {
    background: linear-gradient(145deg, var(--primary) 0%, var(--primary-mid, #035c56) 100%) !important;
    color: #fff !important;
    border-color: rgba(191, 161, 95, 0.55) !important;
    box-shadow: 0 8px 20px rgba(2, 71, 67, 0.22) !important;
}

.service-card:hover .service-card-icon::after {
    opacity: 1;
}

.service-card:hover .service-card-icon i {
    color: #fff !important;
}

/* Checklist / serving row icons — gold check on teal brand */
.serving-checklist-box {
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 6px 18px rgba(2, 71, 67, 0.06) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%) !important;
}

.serving-checklist-box li i,
.serving-list-horizontal li i {
    color: var(--accent) !important;
}

/* FAQ icons */
.faq-trigger i {
    color: var(--accent) !important;
}

/* --------------------------------------------------------------------------
   G2 — Cards as a system (elevated craft)
   -------------------------------------------------------------------------- */
.service-card {
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 14px rgba(2, 71, 67, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    background: #ffffff !important;
}

.service-card:hover {
    border-color: rgba(191, 161, 95, 0.55) !important;
    box-shadow:
        0 14px 32px rgba(2, 71, 67, 0.12),
        0 0 0 1px rgba(191, 161, 95, 0.25) !important;
}

.service-card-content {
    padding: 0.35rem 1.15rem 1.35rem !important;
    align-items: center;
}

.service-card h3 {
    font-family: var(--font-display), var(--font-heading), Georgia, serif !important;
    letter-spacing: -0.02em;
}

.service-card .btn-text {
    color: var(--primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

.service-card:hover .btn-text {
    color: var(--primary-dark) !important;
}

/* Trust / feature panels */
.trust-panel,
.feature-band {
    border-radius: 14px !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 8px 24px rgba(2, 71, 67, 0.07) !important;
}

/* CTA / newsletter bands — gold hairline craft */
.cta-row,
.newsletter-section {
    position: relative;
}

.cta-row::before,
.newsletter-section::before {
    /* keep existing soft-bg; add gold top edge if none */
}

/* --------------------------------------------------------------------------
   Reduced motion: no photo zoom (still show grade)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .service-card:hover .service-card-visual img,
    .clinic-gallery-item:hover img,
    .clinic-gallery-item:focus-within img,
    .value-prop-grid:hover .value-prop-image img,
    .doctor-profile-grid:hover .doctor-image-wrapper img {
        transform: none !important;
    }
}
/* ==========================================================================
   CLINIC GALLERY COLOR FIX — "Take a Look Inside"
   Reverts Phase-2 muddy caption/photo grade. Clean local clinic tiles.
   ========================================================================== */

/* Section: calm canvas, no competing smile wash under real clinic photos */
.clinic-gallery-section.py-6,
.clinic-gallery-section.bg-light,
.clinic-gallery-section.py-6.bg-light {
    background-color: #f7faf9 !important;
    background-image: none !important;
}

.clinic-gallery-section::before,
.clinic-gallery-section::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
}

.clinic-gallery-section > * {
    position: relative;
    z-index: 1;
}

.clinic-gallery-section .section-header .pre-headline {
    color: var(--primary, #024743) !important;
}

.clinic-gallery-section .section-header h2 {
    color: var(--heading, #0f172a) !important;
}

.clinic-gallery-section .section-header p {
    color: var(--text-muted, #475569) !important;
}

/* Tiles: white card, soft teal edge — photos read true */
.clinic-gallery-item {
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 8px 22px rgba(2, 71, 67, 0.07) !important;
    border-radius: 12px !important;
}

.clinic-gallery-item:hover {
    border-color: rgba(191, 161, 95, 0.45) !important;
    box-shadow: 0 12px 28px rgba(2, 71, 67, 0.12) !important;
    transform: translateY(-2px);
}

/* Gallery img height/hover — SUPERSEDED by CLINIC THUMBS (full-width cover + zoom).
   Keep caption bar readable (light bar + teal text). */
.clinic-gallery-item figcaption {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--primary, #024743) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.4 !important;
    padding: 0.7rem 0.9rem 0.85rem !important;
    border-top: 1px solid rgba(2, 71, 67, 0.08) !important;
    text-align: left !important;
}

/* CTAs under gallery — keep brand pair clear */
.clinic-gallery-ctas .btn-accent {
    background-color: var(--accent, #bfa15f) !important;
    color: #012e2b !important;
    border-color: var(--accent, #bfa15f) !important;
}

.clinic-gallery-ctas .btn-secondary {
    background: transparent !important;
    color: var(--primary, #024743) !important;
    border: 2px solid var(--primary, #024743) !important;
}

.clinic-gallery-ctas .btn-secondary:hover {
    background: var(--primary, #024743) !important;
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .clinic-gallery-item:hover img {
        transform: none !important;
    }
}

/* ==========================================================================
   PHASE 3 — TYPOGRAPHY + VERTICAL RHYTHM (G6–G7)
   Newsreader + Noto Sans only. Live header/footer/hero markup untouched.
   Intentional scale map + measure + section contrast.
   ========================================================================== */

:root {
    /* Type scale (modular ~1.2–1.25, calm agency) */
    --fs-caption: 0.8125rem;   /* 13px */
    --fs-small: 0.875rem;      /* 14px */
    --fs-body: 1.0625rem;      /* 17px — slightly more readable than 16 */
    --fs-lead: 1.125rem;       /* 18px */
    --fs-h4: 1.125rem;
    --fs-h3: 1.25rem;
    --fs-h2: clamp(1.55rem, 2.15vw, 2rem);
    --fs-h1: clamp(1.85rem, 2.8vw, 2.65rem);
    --fs-display: clamp(2rem, 3.2vw, 2.9rem);
    --fs-eyebrow: 0.7rem;

    --lh-body: 1.7;
    --lh-heading: 1.18;
    --lh-tight: 1.25;
    --measure-prose: 62ch;
    --measure-lead: 48ch;
    --measure-section: 40rem;

    --tracking-eyebrow: 0.14em;
    --tracking-heading: -0.022em;

    /* Vertical rhythm steps (4px base) */
    --stack-1: 0.5rem;
    --stack-2: 0.75rem;
    --stack-3: 1rem;
    --stack-4: 1.35rem;
    --stack-5: 1.75rem;
    --stack-6: 2.25rem;
    --section-y: 4rem;
    --section-y-sm: 2.85rem;
}

/* --- Body prose --- */
body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: 0.005em;
}

p {
    max-width: var(--measure-prose);
}

/* --- Heading system (Newsreader display) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display), var(--font-heading), Georgia, serif;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--heading, #0f172a);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    margin: 0 0 var(--stack-4);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    margin: 0 0 var(--stack-3);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 650;
    font-weight: 600;
    margin: 0 0 var(--stack-2);
    letter-spacing: -0.015em;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    margin: 0 0 var(--stack-2);
}

/* --- Eyebrows / pre-headlines --- */
.pre-headline,
.section-header .pre-headline {
    font-family: var(--font-body), system-ui, sans-serif !important;
    font-size: var(--fs-eyebrow) !important;
    font-weight: 700 !important;
    letter-spacing: var(--tracking-eyebrow) !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    color: var(--primary, #024743) !important;
    margin: 0 0 var(--stack-2) !important;
}

/* --- Section headers (main content columns) --- */
.section-header {
    max-width: var(--measure-section) !important;
    margin-bottom: var(--stack-5) !important;
}

.section-header h2 {
    font-size: var(--fs-h2) !important;
    font-weight: 700 !important;
    letter-spacing: var(--tracking-heading) !important;
    line-height: var(--lh-heading) !important;
    margin: 0 0 var(--stack-3) !important;
    color: var(--heading, #0f172a) !important;
}

.section-header p {
    font-size: var(--fs-lead) !important;
    line-height: 1.65 !important;
    max-width: var(--measure-lead) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--text-muted, #475569) !important;
}

.section-header.text-center p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Section vertical rhythm --- */
section.py-6 {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
}

section.py-5 {
    padding-top: var(--section-y-sm) !important;
    padding-bottom: var(--section-y-sm) !important;
}

/* Clearer contrast between stacked sections */
section.py-6 + section.py-6 {
    padding-top: calc(var(--section-y) - 0.35rem) !important;
}

/* --- Doctor / value prop copy block --- */
.doctor-title,
.doctor-profile-grid .value-prop-text h2,
.value-prop-text h2 {
    font-size: clamp(1.4rem, 2vw, 1.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: var(--tracking-heading) !important;
    line-height: var(--lh-heading) !important;
    color: var(--heading, #0f172a) !important;
    margin-bottom: var(--stack-2) !important;
}

.doctor-tagline {
    font-family: var(--font-body), system-ui, sans-serif !important;
    font-size: var(--fs-small) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--primary, #024743) !important;
    margin-bottom: var(--stack-3) !important;
}

.doctor-lead,
.value-prop-text .doctor-lead,
.doctor-profile-grid .value-prop-text p {
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    max-width: var(--measure-prose) !important;
    color: var(--text, #1e293b) !important;
}

/* --- Service cards type --- */
.service-card h3 {
    font-family: var(--font-display), Georgia, serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    line-height: 1.25 !important;
    margin-bottom: var(--stack-2) !important;
    color: var(--primary, #024743) !important;
}

.service-card p {
    font-size: var(--fs-small) !important;
    line-height: 1.65 !important;
    color: var(--text-muted, #475569) !important;
    max-width: 36ch;
}

.service-card .btn-text {
    font-size: var(--fs-small) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

/* --- FAQ type --- */
.faq-trigger {
    font-family: var(--font-heading), Georgia, serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

.faq-content p,
.faq-content > * {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
    color: var(--text-muted, #475569) !important;
}

/* --- Gallery captions (keep clean teal; size only) --- */
.clinic-gallery-item figcaption {
    font-family: var(--font-body), system-ui, sans-serif !important;
    font-size: var(--fs-caption) !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
}

/* --- CTA / newsletter bands --- */
.cta-row h2,
.newsletter-section h2,
.newsletter-section h3 {
    font-size: var(--fs-h2) !important;
    letter-spacing: var(--tracking-heading) !important;
}

.cta-row p,
.newsletter-section p {
    font-size: var(--fs-lead) !important;
    line-height: 1.6 !important;
    max-width: var(--measure-lead);
}

/* --- Trust / feature copy --- */
.trust-panel h3,
.feature-band h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

.trust-panel p,
.feature-band p {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
}

/* --- Body links in content --- */
.content-link,
.btn-text {
    font-family: var(--font-body), system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* --- Hero type: light polish only (structure/markup stays live) --- */
.hero-ribbon-copy .pre-headline {
    font-size: 0.68rem !important;
    letter-spacing: 0.13em !important;
}

.hero-ribbon-copy h1 {
    font-family: var(--font-display), Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}

.hero-ribbon-copy > p:not(.pre-headline):not(.hero-nap) {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    max-width: 48ch;
}

.hero-nap {
    font-size: 0.85rem !important;
    letter-spacing: 0.01em;
}

/* --- Page heroes (inner pages) --- */
.page-hero h1,
.page-header h1 {
    font-size: var(--fs-h1) !important;
    letter-spacing: var(--tracking-heading) !important;
}

/* --- Mobile type tighten --- */
@media (max-width: 767px) {
    :root {
        --fs-body: 1rem;
        --section-y: 3rem;
        --section-y-sm: 2.25rem;
    }

    .section-header h2 {
        font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important;
    }

    .service-card h3 {
        font-size: 1.1rem !important;
    }

    .hero-ribbon-copy h1 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    }
}

/* --- Long-form legal/blog readability --- */
.legal-page p,
.legal-content p,
article p,
.blog-body p {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    max-width: var(--measure-prose);
}

.legal-page h2,
.legal-content h2,
article h2 {
    margin-top: var(--stack-6);
    margin-bottom: var(--stack-3);
}

/* ==========================================================================
   HOME PANELS FIX — feature-band + PPO trust-panel
   Missing BEM layout caused empty right half / weak craft.
   Local only; no copy changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Why Patients Choose — .feature-band (3 equal columns)
   -------------------------------------------------------------------------- */
.feature-band {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
    padding: 1.25rem !important;
    margin: 0 auto !important;
    max-width: 1040px !important;
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.07) !important;
    box-sizing: border-box !important;
}

.feature-band__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
    padding: 1.1rem 1.15rem 1.2rem !important;
    background: linear-gradient(180deg, #fbfdfe 0%, #f4f9f8 100%) !important;
    border: 1px solid rgba(2, 71, 67, 0.08) !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.feature-band__icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #e8f4f2 0%, #f1f7f7 100%) !important;
    color: var(--primary, #024743) !important;
    border: 1px solid rgba(2, 71, 67, 0.12) !important;
    box-shadow: 0 4px 12px rgba(2, 71, 67, 0.08) !important;
    flex-shrink: 0 !important;
    font-size: 1.05rem !important;
}

.feature-band__item h3 {
    font-family: var(--font-display), Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    color: var(--primary, #024743) !important;
    margin: 0 !important;
}

.feature-band__item p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: var(--text-muted, #475569) !important;
    margin: 0 !important;
    max-width: none !important;
}

.feature-band__item:hover {
    border-color: rgba(191, 161, 95, 0.45) !important;
    box-shadow: 0 8px 20px rgba(2, 71, 67, 0.08) !important;
}

.feature-band__item:hover .feature-band__icon {
    background: linear-gradient(145deg, var(--primary, #024743), var(--primary-mid, #035c56)) !important;
    color: #fff !important;
    border-color: rgba(191, 161, 95, 0.5) !important;
}

@media (max-width: 900px) {
    .feature-band {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
        gap: 0.85rem !important;
    }
}

/* --------------------------------------------------------------------------
   Maximize Your PPO Benefits — .trust-panel
   -------------------------------------------------------------------------- */
.trust-panel-wrap {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.trust-panel {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 1.25rem 1.5rem !important;
    align-items: start !important;
    padding: 1.5rem 1.65rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.08) !important;
    box-sizing: border-box !important;
}

.trust-panel__icon {
    width: 3.25rem !important;
    height: 3.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #e8f4f2 0%, #f1f7f7 100%) !important;
    color: var(--primary, #024743) !important;
    border: 1px solid rgba(191, 161, 95, 0.4) !important;
    box-shadow: 0 4px 14px rgba(2, 71, 67, 0.1) !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

.trust-panel__body {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
}

.trust-panel__body h2 {
    font-family: var(--font-display), Georgia, serif !important;
    font-size: clamp(1.35rem, 2vw, 1.7rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: var(--heading, #0f172a) !important;
    margin: 0 !important;
}

.trust-panel__body p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--text-muted, #475569) !important;
    margin: 0 !important;
    max-width: 58ch !important;
}

.trust-panel__body .btn,
.trust-panel__body .btn-primary,
#btn-ppo-detailed {
    margin-top: 0.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.75rem !important;
    padding: 0.65rem 1.25rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background-color: var(--primary, #024743) !important;
    color: #ffffff !important;
    border: 2px solid var(--primary, #024743) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(2, 71, 67, 0.18) !important;
}

.trust-panel__body .btn:hover,
.trust-panel__body .btn-primary:hover,
#btn-ppo-detailed:hover {
    background-color: var(--primary-dark, #012e2b) !important;
    border-color: var(--primary-dark, #012e2b) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Section under soft wash: keep panel readable */
#ppo-detailed-section .trust-panel,
#features-section .feature-band,
section .feature-band {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .trust-panel {
        grid-template-columns: 1fr !important;
        padding: 1.25rem !important;
        text-align: left !important;
    }

    .trust-panel__icon {
        margin-bottom: 0.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-band__item:hover,
    #btn-ppo-detailed:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   FEATURE BAND REDESIGN — #patient-centered-section
   Proper 3-up benefit cards (no empty half, no double-box mess)
   ========================================================================== */

#patient-centered-section {
    position: relative;
    z-index: 1;
}

#patient-centered-section > .container {
    position: relative;
    z-index: 1;
}

#patient-centered-section .section-header {
    margin-bottom: 2rem !important;
}

/* Outer band = transparent grid only (NOT a big empty card) */
#patient-centered-section .feature-band,
.feature-band {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Each benefit = one solid card, equal height */
#patient-centered-section .feature-band__item,
.feature-band__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 1.75rem 1.35rem 1.85rem !important;
    min-height: 100% !important;
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.12) !important;
    border-radius: 14px !important;
    box-shadow:
        0 10px 28px rgba(2, 71, 67, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
    box-sizing: border-box !important;
    transition:
        transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 320ms ease !important;
}

#patient-centered-section .feature-band__item:hover,
.feature-band__item:hover {
    transform: translate3d(0, -4px, 0) !important;
    border-color: rgba(191, 161, 95, 0.55) !important;
    box-shadow:
        0 16px 36px rgba(2, 71, 67, 0.12),
        0 0 0 1px rgba(191, 161, 95, 0.2) !important;
}

/* Brand icon wells */
#patient-centered-section .feature-band__icon,
.feature-band__icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #e8f4f2 0%, #f4f9f8 100%) !important;
    color: #024743 !important;
    border: 1px solid rgba(2, 71, 67, 0.14) !important;
    box-shadow: 0 6px 16px rgba(2, 71, 67, 0.1) !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    margin: 0 0 0.25rem !important;
    flex-shrink: 0 !important;
}

#patient-centered-section .feature-band__item:hover .feature-band__icon,
.feature-band__item:hover .feature-band__icon {
    background: linear-gradient(145deg, #024743 0%, #035c56 100%) !important;
    color: #ffffff !important;
    border-color: rgba(191, 161, 95, 0.55) !important;
}

#patient-centered-section .feature-band__icon i,
.feature-band__icon i {
    color: inherit !important;
    font-size: 1.15rem !important;
}

#patient-centered-section .feature-band__item h3,
.feature-band__item h3 {
    font-family: "Newsreader", Georgia, serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 16ch !important;
    text-wrap: balance !important;
}

#patient-centered-section .feature-band__item p,
.feature-band__item p {
    font-family: "Noto Sans", system-ui, sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 28ch !important; /* full text, not 62ch page measure */
    width: 100% !important;
}

/* Kill global p measure inside these cards */
#patient-centered-section p {
    max-width: none;
}
#patient-centered-section .section-header p {
    max-width: 48ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#patient-centered-section .feature-band__item p {
    max-width: 28ch !important;
}

@media (prefers-reduced-motion: reduce) {
    #patient-centered-section .feature-band__item:hover,
    .feature-band__item:hover {
        transform: none !important;
    }
}

/* Feature-band photo media (Sterling-demographic AI assets) */
#patient-centered-section .feature-band__item,
.feature-band__item {
    padding: 0 0 1.35rem !important;
    overflow: hidden !important;
    align-items: center !important;
}

#patient-centered-section .feature-band__media,
.feature-band__media {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    margin: 0 0 1rem !important;
    background: #e8f0ef !important;
    position: relative !important;
}

#patient-centered-section .feature-band__media img,
.feature-band__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    display: block !important;
    filter: none !important;
    transition: transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

#patient-centered-section .feature-band__item:hover .feature-band__media img,
.feature-band__item:hover .feature-band__media img {
    transform: scale(1.04) !important;
}

#patient-centered-section .feature-band__icon,
.feature-band__icon {
    margin-top: 0 !important;
    margin-bottom: 0.15rem !important;
}

#patient-centered-section .feature-band__item h3,
#patient-centered-section .feature-band__item p,
.feature-band__item h3,
.feature-band__item p {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
    max-width: none !important;
}

/* Mobile: single-column stacked photo cards (one consolidated block, placed
   after the base rules so its longhands win over the base shorthands). */
@media (max-width: 960px) {
    #patient-centered-section .feature-band,
    .feature-band {
        grid-template-columns: 1fr !important;
        max-width: 28rem !important;
        gap: 1rem !important;
    }

    #patient-centered-section .feature-band__item,
    .feature-band__item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        flex-wrap: wrap !important;
        gap: 0.65rem 1rem !important;
        padding-bottom: 1.25rem !important;
    }

    #patient-centered-section .feature-band__media,
    .feature-band__media {
        margin-bottom: 0.85rem !important;
    }

    /* Title + description keep natural height in the stacked card; the old
       icon-row flex growth expanded and clipped them, hiding text on mobile. */
    #patient-centered-section .feature-band__item h3,
    .feature-band__item h3,
    #patient-centered-section .feature-band__item p,
    .feature-band__item p {
        flex: 0 0 auto !important;
        align-self: auto !important;
        max-width: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #patient-centered-section .feature-band__item:hover .feature-band__media img,
    .feature-band__item:hover .feature-band__media img {
        transform: none !important;
    }
}

/* ==========================================================================
   HERO EYEBROW CONTRAST FIX
   Phase 3 set .pre-headline to primary green sitewide — unreadable on hero.
   Force light gold + shadow on dark ribbon only.
   ========================================================================== */
.hero-ribbon .pre-headline,
.hero-ribbon-copy .pre-headline,
.hero-ribbon .hero-line--eyebrow,
.hero .pre-headline.hero-line--eyebrow {
    color: #f0e2b0 !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 2px 12px rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #f0e2b0 !important;
}

html[lang="es"] .hero-ribbon .pre-headline,
html[lang="es"] .hero-ribbon-copy .pre-headline {
    color: #f0e2b0 !important;
    -webkit-text-fill-color: #f0e2b0 !important;
}

/* ==========================================================================
   FOOTER OUR SERVICES — force center (match Areas We Serve)
   ========================================================================== */
.footer .footer-services,
.footer-services {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.footer .footer-services-heading,
.footer-services-heading,
.footer .footer-services-heading strong,
.footer-services-heading strong {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.footer .footer-services-list,
.footer-services-list {
    list-style: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    gap: 0.35rem 0 !important;
}

.footer .footer-services-list li,
.footer-services-list li {
    display: inline-flex !important;
    float: none !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.footer .footer-services-list a,
.footer-services-list a {
    text-align: center !important;
}
/* ==========================================================================
   ABOUT US PAGE — uncramped layout + technology cards
   Classes already in HTML; styles were missing / incomplete.
   EN about-us.html + ES sobre-nosotros.html
   ========================================================================== */

/* Content column width */
.about-content {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-content--wide {
    max-width: 1080px !important;
}

/* Prose cards — roomy, readable */
.about-prose-card {
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.06) !important;
    padding: 1.75rem 1.85rem 1.9rem !important;
    margin: 0 auto !important;
}

.about-prose-card p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: var(--text, #1e293b) !important;
    max-width: none !important;
    margin: 0 0 1.15rem !important;
}

.about-prose-card p:last-child {
    margin-bottom: 0 !important;
}

/* Doctor bio stack — spaced paragraphs, not a wall of text */
.about-prose-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    margin-top: 0.35rem !important;
}

.about-prose-stack p {
    font-size: 1.02rem !important;
    line-height: 1.8 !important;
    color: var(--text, #1e293b) !important;
    max-width: 58ch !important;
    margin: 0 !important;
}

/* Doctor profile: more breathing room */
#doctor-profiles .doctor-profile-grid,
.doctor-profile-grid {
    gap: 2.5rem 3rem !important;
    align-items: start !important;
}

#doctor-profiles .value-prop-text {
    padding-top: 0.25rem !important;
}

#doctor-profiles .doctor-title {
    margin-bottom: 0.4rem !important;
}

#doctor-profiles .doctor-tagline {
    margin-bottom: 1.25rem !important;
}

/* Technology You Can Trust — 3 airy cards */
.about-tech-grid {
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
    width: 100% !important;
    max-width: 1080px !important;
}

.about-tech-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 1.65rem 1.45rem 1.75rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.07) !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    transition:
        transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 320ms ease,
        border-color 320ms ease !important;
}

.about-tech-card:hover {
    transform: translate3d(0, -4px, 0) !important;
    border-color: rgba(191, 161, 95, 0.5) !important;
    box-shadow: 0 16px 36px rgba(2, 71, 67, 0.12) !important;
}

.about-tech-card__icon {
    width: 3.25rem !important;
    height: 3.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #e8f4f2 0%, #f4f9f8 100%) !important;
    color: var(--primary, #024743) !important;
    border: 1px solid rgba(2, 71, 67, 0.12) !important;
    box-shadow: 0 4px 12px rgba(2, 71, 67, 0.08) !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.about-tech-card:hover .about-tech-card__icon {
    background: linear-gradient(145deg, #024743, #035c56) !important;
    color: #fff !important;
    border-color: rgba(191, 161, 95, 0.5) !important;
}

.about-tech-card h3 {
    font-family: var(--font-display), Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    color: var(--heading, #0f172a) !important;
    margin: 0 !important;
}

.about-tech-card p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: var(--text-muted, #475569) !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Section headers on about */
#practice-overview .section-header,
#our-team .section-header,
#technology .section-header,
#office-tour .section-header {
    margin-bottom: 1.75rem !important;
}

/* Office stills strip breathing room */
.clinic-stills-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    margin: 0 0 1.5rem !important;
}

.clinic-stills-strip figure {
    margin: 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 6px 18px rgba(2, 71, 67, 0.06) !important;
}

.clinic-stills-strip img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    display: block !important;
}

.clinic-stills-strip figcaption {
    padding: 0.55rem 0.75rem 0.7rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--primary, #024743) !important;
    background: #fff !important;
}

.office-tour-frame {
    margin: 0 0 1.5rem !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    box-shadow: 0 12px 32px rgba(2, 71, 67, 0.1) !important;
}

.office-tour-ctas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    margin-top: 0.5rem !important;
}

@media (max-width: 900px) {
    .about-tech-grid {
        grid-template-columns: 1fr !important;
        max-width: 28rem !important;
    }

    .clinic-stills-strip {
        grid-template-columns: 1fr !important;
    }

    .clinic-stills-strip img {
        height: 200px !important;
    }

    #doctor-profiles .doctor-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-tech-card:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   ABOUT TECH CARDS + PAGE ALIGNMENT (with AI media)
   ========================================================================== */

/* Page-level alignment: every about section shares the same horizontal rhythm */
body:has(#practice-overview) .container,
#practice-overview .container,
#our-team .container,
#doctor-profiles .container,
#office-tour .container,
#technology .container,
#tecnologia .container {
    width: 100% !important;
    max-width: var(--container-width, 1140px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-pad, 1.15rem) !important;
    padding-right: var(--container-pad, 1.15rem) !important;
    box-sizing: border-box !important;
}

.about-content {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.about-content--wide,
#technology .about-content,
#tecnologia .about-content {
    max-width: 1080px !important;
}

#technology .section-header,
#tecnologia .section-header,
#practice-overview .section-header,
#our-team .section-header,
#office-tour .section-header {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.85rem !important;
}

/* Doctor grid alignment */
#doctor-profiles .doctor-profile-grid {
    display: grid !important;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 2.5rem 3rem !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
}

/* Tech grid — equal cards with photos */
.about-tech-grid {
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
    width: 100% !important;
    max-width: 1080px !important;
    align-items: stretch !important;
}

.about-tech-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.07) !important;
    box-sizing: border-box !important;
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease !important;
}

.about-tech-card:hover {
    transform: translate3d(0, -4px, 0) !important;
    border-color: rgba(191, 161, 95, 0.5) !important;
    box-shadow: 0 16px 36px rgba(2, 71, 67, 0.12) !important;
}

.about-tech-card__media {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: #e8f0ef !important;
    flex-shrink: 0 !important;
}

.about-tech-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    filter: none !important;
    transition: transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.about-tech-card:hover .about-tech-card__media img {
    transform: scale(1.04) !important;
}

.about-tech-card__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    padding: 1.25rem 1.3rem 1.45rem !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

.about-tech-card__icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #e8f4f2, #f4f9f8) !important;
    color: #024743 !important;
    border: 1px solid rgba(2, 71, 67, 0.12) !important;
    font-size: 1.05rem !important;
}

.about-tech-card:hover .about-tech-card__icon {
    background: linear-gradient(145deg, #024743, #035c56) !important;
    color: #fff !important;
}

.about-tech-card h3 {
    font-family: "Newsreader", Georgia, serif !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
    margin: 0 !important;
    text-align: left !important;
}

.about-tech-card p {
    font-size: 0.94rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin: 0 !important;
    max-width: none !important;
    text-align: left !important;
}

/* Prose cards centered within page */
.about-prose-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Office tour blocks full container width */
#office-tour .clinic-stills-strip,
#office-tour .office-tour-frame {
    width: 100% !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 900px) {
    .about-tech-grid {
        grid-template-columns: 1fr !important;
        max-width: 26rem !important;
    }
    #doctor-profiles .doctor-profile-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-tech-card:hover,
    .about-tech-card:hover .about-tech-card__media img {
        transform: none !important;
    }
}

/* ==========================================================================
   MEET DOCTOR — photo top-aligned with "Meet Your Dentist" copy
   Override align-items:center which dropped the portrait mid-column
   ========================================================================== */
#meet-doctor-section .doctor-profile-grid,
#doctor-profiles .doctor-profile-grid,
.doctor-profile-grid {
    align-items: start !important;
}

#meet-doctor-section .doctor-image-wrapper,
#doctor-profiles .doctor-image-wrapper {
    align-self: start !important;
    margin-top: 0 !important;
    position: relative !important; /* not sticky — stays level with headline */
    top: auto !important;
}

#meet-doctor-section .doctor-image-wrapper img,
#doctor-profiles .doctor-image-wrapper img {
    object-fit: cover !important;
    object-position: center top !important;
    width: 100% !important;
    display: block !important;
}

/* Text column top matches image top */
#meet-doctor-section .value-prop-text,
#doctor-profiles .value-prop-text {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#meet-doctor-section .value-prop-text .pre-headline,
#meet-doctor-section .pre-headline {
    margin-top: 0 !important;
}

/* ==========================================================================
   DR YAMUNA PHOTO — full original, no crop (coat text visible)
   Only frame/border polish; no object-fit:cover / aspect-ratio crop
   ========================================================================== */
#meet-doctor-section .doctor-image-wrapper,
#doctor-profiles .doctor-image-wrapper,
.doctor-profile-grid .doctor-image-wrapper {
    overflow: hidden !important; /* soft border-radius only */
    border-radius: 12px !important;
    border: 1px solid rgba(2, 71, 67, 0.12) !important;
    box-shadow: 0 12px 32px rgba(2, 71, 67, 0.1) !important;
    background: #fff !important;
    line-height: 0 !important;
    align-self: start !important;
    margin-top: 0 !important;
    max-width: 100% !important;
}

/* Kill dark gradient veil that can hide coat embroidery */
#meet-doctor-section .doctor-image-wrapper::after,
#doctor-profiles .doctor-image-wrapper::after,
.doctor-profile-grid .doctor-image-wrapper::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

#meet-doctor-section .doctor-image-wrapper img,
#doctor-profiles .doctor-image-wrapper img,
.doctor-profile-grid .doctor-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important; /* full photo, no crop */
    object-position: center center !important;
    display: block !important;
    filter: none !important;
    transform: none !important;
}

/* No hover scale/crop that re-crops the frame */
#meet-doctor-section .doctor-image-wrapper:hover,
#doctor-profiles .doctor-image-wrapper:hover,
.doctor-profile-grid:hover .doctor-image-wrapper,
#meet-doctor-section .doctor-image-wrapper:hover img,
#doctor-profiles .doctor-image-wrapper:hover img,
.doctor-profile-grid:hover .doctor-image-wrapper img {
    transform: none !important;
    filter: none !important;
}
/* ==========================================================================
   PHASE 4 — STORYTELLING LAYOUT (G8–G9)
   Patient journey: welcome → care options → office proof → family story
   → whole health → why choose us → tech trust → PPO → FAQ → CTA
   Layout/presentation only. No copy rewrites. EN + ES.
   ========================================================================== */

/* --- Story section shells: clearer chapter rhythm --- */
#meet-doctor-section,
#services-grid-section,
#look-inside,
#family-care,
#cuidado-familiar,
#patient-centered-section,
#tech-section,
#ppo-detailed-section,
#faqs-section,
#cta-row-section {
    position: relative;
}

/* Soft chapter divider (gold hairline) between major story beats */
#meet-doctor-section + #services-grid-section,
#services-grid-section + #look-inside,
#look-inside + #family-care,
#look-inside + #cuidado-familiar,
#family-care + section,
#cuidado-familiar + section,
#patient-centered-section + #tech-section,
#tech-section + #ppo-detailed-section,
#faqs-section + #cta-row-section {
    border-top: 0;
}

/* --- Family story: stronger narrative split (copy left / proof right) --- */
.family-story-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: 2.25rem 2.5rem !important;
    align-items: stretch !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

.family-story-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    min-width: 0 !important;
}

.family-story-copy .pre-headline {
    margin-bottom: 0 !important;
}

.family-story-copy h2 {
    font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: var(--heading, #0f172a) !important;
    max-width: 22ch !important;
}

.family-story-copy > p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: var(--text-muted, #475569) !important;
    margin: 0 !important;
    max-width: 48ch !important;
}

.family-story-ctas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem !important;
}

.family-story-note {
    font-size: 0.75rem !important; /* 12px readability floor */
    line-height: 1.45 !important;
    color: #94a3b8 !important;
    max-width: 40ch !important;
    margin-top: 0.35rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    opacity: 0.95;
}

.family-story-media {
    position: relative !important;
    align-self: stretch !important;
    min-height: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        0 16px 40px rgba(2, 71, 67, 0.14),
        0 0 0 1px rgba(2, 71, 67, 0.08) !important;
    background: #e8f0ef !important;
}

/* Soft gold accent edge on story media (journey proof frame) */
.family-story-media::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12% !important;
    bottom: 12% !important;
    width: 4px !important;
    background: linear-gradient(180deg, transparent, #bfa15f, transparent) !important;
    z-index: 2 !important;
    border-radius: 2px !important;
}

/* Fill the vacant media column — full width + match copy block height */
.family-story-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 28% !important;
    display: block !important;
    filter: none !important;
}

/* Absolute fill so empty mint band never shows around a small photo */
@supports (height: 100%) {
    .family-story-media {
        min-height: 360px !important;
    }
    .family-story-media img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* --- Family story image motion (match feature-band / value-prop calm zoom) --- */
.family-story-media {
    cursor: default;
}

.family-story-media img {
    transform: scale(1.05) !important;
    transform-origin: center 30% !important;
    transition:
        transform 750ms cubic-bezier(0.25, 0.1, 0.25, 1),
        filter 400ms ease !important;
    will-change: transform;
}

/* Scroll reveal: settle from slight zoom → natural (like other story photos) */
.family-story-media.scroll-animate.animated img,
.family-story-grid.scroll-animate.animated .family-story-media img {
    transform: scale(1) !important;
    animation: family-story-kb 14s cubic-bezier(0.25, 0.1, 0.25, 1) 0.75s both;
}

/* Soft Ken Burns after settle — restrained, healthcare-calm */
@keyframes family-story-kb {
    0% {
        transform: scale(1);
        object-position: center 30%;
    }
    50% {
        transform: scale(1.04);
        object-position: center 22%;
    }
    100% {
        transform: scale(1.02);
        object-position: center 26%;
    }
}

/* Hover micro-zoom (same family as feature-band) */
.family-story-media:hover img,
.family-story-media:focus-within img {
    transform: scale(1.04) !important;
    animation: none !important;
}

/* Stagger: copy first, photo follows slightly */
.family-story-grid > .family-story-copy.scroll-animate.animated {
    transition-delay: 0s !important;
}
.family-story-grid > .family-story-media.scroll-animate.animated {
    transition-delay: 0.1s !important;
}

@media (prefers-reduced-motion: reduce) {
    .family-story-media img {
        transform: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .family-story-media:hover img,
    .family-story-media:focus-within img,
    .family-story-media.scroll-animate.animated img {
        transform: none !important;
        animation: none !important;
    }
}

/* --- Value prop / whole-health story: alternating visual weight --- */
.value-prop-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: 2.25rem 2.75rem !important;
    align-items: center !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
}

/* Alternate media side for storytelling zigzag (2nd story block on page) */
section.py-6.bg-light .value-prop-grid {
    direction: ltr;
}

#tech-section .value-prop-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
}

#tech-section .value-prop-text {
    order: 1;
}

#tech-section .value-prop-image {
    order: 2;
}

/* Whole-health: image first on large screens for visual story */
section.py-6.bg-light:has(.value-prop-grid):not(#tech-section):not(#meet-doctor-section) .value-prop-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
}

section.py-6.bg-light:has(.value-prop-grid):not(#tech-section):not(#meet-doctor-section) .value-prop-image {
    order: -1;
}

.value-prop-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
}

.value-prop-text h2 {
    margin: 0 !important;
    max-width: 22ch !important;
    line-height: 1.2 !important;
}

.value-prop-text p {
    margin: 0 !important;
    max-width: 50ch !important;
}

.value-prop-text .btn-text {
    margin-top: 0.35rem !important;
}

.value-prop-image {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
        0 16px 40px rgba(2, 71, 67, 0.12),
        0 0 0 1px rgba(2, 71, 67, 0.08) !important;
    background: #fff !important;
}

.value-prop-image img {
    width: 100% !important;
    height: auto !important;
    min-height: 260px !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    display: block !important;
}

/* --- Services as “care paths” chapter --- */
#services-grid-section .section-header {
    margin-bottom: 1.25rem !important;
}

#services-grid-section .services-grid-5 {
    margin-top: 0.5rem !important;
}

/* Subtle next-step cue under services before office tour */
#services-grid-section {
    padding-bottom: calc(var(--section-y, 3.5rem) + 0.25rem) !important;
}

/* --- Office tour as visual proof chapter --- */
#look-inside .section-header {
    margin-bottom: 1.75rem !important;
}

#look-inside .clinic-gallery-ctas {
    margin-top: 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
}

/* --- Why choose us: journey outcomes (cards already exist) --- */
#patient-centered-section .section-header {
    margin-bottom: 2rem !important;
}

#patient-centered-section .feature-band {
    max-width: 1080px !important;
}

/* --- Tech trust: outcome then proof image --- */
#tech-section .value-prop-text .subhead-tight {
    font-family: var(--font-heading), Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--primary, #024743) !important;
    margin: 0.5rem 0 0 !important;
    letter-spacing: -0.01em !important;
}

/* --- PPO as conversion bridge before FAQ --- */
#ppo-detailed-section {
    padding-top: calc(var(--section-y, 3.5rem) - 0.25rem) !important;
    padding-bottom: calc(var(--section-y, 3.5rem) - 0.25rem) !important;
}

#ppo-detailed-section .trust-panel-wrap {
    max-width: 920px !important;
}

/* --- FAQ chapter: slightly tighter after PPO --- */
#faqs-section .section-header {
    margin-bottom: 1.5rem !important;
}

#faqs-section .faq-accordion {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* --- Final CTA: strong story close --- */
#cta-row-section.cta-row,
.cta-row#cta-row-section {
    padding: 3.25rem 0 !important;
    background: linear-gradient(135deg, #024743 0%, #012e2b 55%, #023d38 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

#cta-row-section .container {
    position: relative !important;
    z-index: 1 !important;
    max-width: 720px !important;
    text-align: center !important;
}

#cta-row-section h2 {
    color: #fff !important;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem) !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 0.85rem !important;
}

#cta-row-section p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.08rem !important;
    line-height: 1.65 !important;
    max-width: 46ch !important;
    margin: 0 auto 1.35rem !important;
}

#cta-row-section .cta-row-actions {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

/* Soft gold top edge on final CTA */
#cta-row-section::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(191, 161, 95, 0.75), transparent) !important;
    z-index: 2 !important;
}

/* --- Mobile story stack --- */
@media (max-width: 900px) {
    .family-story-grid,
    .value-prop-grid,
    #tech-section .value-prop-grid,
    section.py-6.bg-light:has(.value-prop-grid):not(#tech-section):not(#meet-doctor-section) .value-prop-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .family-story-media,
    .value-prop-image,
    section.py-6.bg-light:has(.value-prop-grid):not(#tech-section):not(#meet-doctor-section) .value-prop-image,
    #tech-section .value-prop-text,
    #tech-section .value-prop-image {
        order: unset !important;
    }

    /* Full-bleed photo under copy on mobile — tall enough, no tiny crop */
    .family-story-media {
        min-height: 260px !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }
    .family-story-media img {
        position: absolute !important;
        inset: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
    }
    .value-prop-image img {
        min-height: 220px !important;
        max-height: 300px !important;
    }

    .family-story-copy h2,
    .value-prop-text h2 {
        max-width: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .family-story-media img,
    .value-prop-image img {
        transition: none !important;
    }
}


/* ==========================================================================
   NEWSLETTER — compact strip (was too large)
   ============================================================================ honeypot "Website" if it leaks; shrink type, padding, fields
   ========================================================================== */
.newsletter-section,
#newsletter-section.newsletter-section {
    padding: 1.15rem 0 !important;
    background-color: var(--primary-light, #f1f7f7) !important;
    border-top: 1px solid rgba(2, 71, 67, 0.08) !important;
    border-bottom: 1px solid rgba(2, 71, 67, 0.08) !important;
}

/* Soft-bg wash quieter on newsletter */
.newsletter-section::before {
    opacity: 0.12 !important;
}

.newsletter-section::after {
    background: rgba(241, 247, 247, 0.88) !important;
}

.newsletter-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) !important;
    gap: 1rem 1.5rem !important;
    align-items: center !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

.newsletter-text h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.35rem !important;
    color: var(--primary, #024743) !important;
    letter-spacing: -0.015em !important;
}

.newsletter-text p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: var(--text-muted, #475569) !important;
    max-width: 42ch !important;
}

.newsletter-form {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 0.55rem !important;
    align-items: flex-end !important;
}

/* Honeypot must never show */
.newsletter-form .hp-wrap,
.newsletter-form .hp-field,
#news-website,
label[for="news-website"] {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

.newsletter-form .form-field {
    flex: 1 1 9.5rem !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.newsletter-form .form-field label {
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.2rem !important;
    color: var(--text-muted, #64748b) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
    width: 100% !important;
    min-height: 2.35rem !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
    border: 1px solid rgba(2, 71, 67, 0.15) !important;
    box-sizing: border-box !important;
}

.newsletter-phi-note,
.newsletter-form .newsletter-phi-note {
    flex: 1 1 100% !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted, #64748b) !important;
    margin: 0.15rem 0 0.25rem !important;
    max-width: 48ch !important;
}

.newsletter-form .btn,
.newsletter-form #news-submit {
    min-height: 2.35rem !important;
    padding: 0.4rem 0.95rem !important;
    font-size: 0.82rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    .newsletter-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .newsletter-form .form-field {
        flex: 1 1 100% !important;
    }

    .newsletter-form .btn,
    .newsletter-form #news-submit {
        width: 100% !important;
    }
}

/* ==========================================================================
   PHASE 5 — REVIEWS TRUST (G11)
   Skeleton first paint; no weak "Loading reviews…"; keep section on empty
   ========================================================================== */

.testimonials-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
}

@media (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        max-width: 28rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.testimonial-card {
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    padding: 1.5rem 1.35rem 1.4rem !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

.testimonial-stars {
    color: #bfa15f !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.65rem !important;
    line-height: 1 !important;
}

.testimonial-text {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    color: #1e293b !important;
    margin: 0 0 1rem !important;
    flex: 1 1 auto !important;
}

.testimonial-author {
    font-family: "Newsreader", Georgia, serif !important;
    font-weight: 700 !important;
    color: #024743 !important;
    font-size: 0.95rem !important;
}

.testimonial-date {
    display: block !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    margin-top: 0.2rem !important;
}

/* Soft skeleton cards */
.lp-skeleton-card {
    pointer-events: none !important;
    min-height: 10.5rem !important;
    gap: 0.65rem !important;
}

.lp-skeleton {
    display: block !important;
    border-radius: 6px !important;
    background: linear-gradient(
        90deg,
        rgba(2, 71, 67, 0.06) 0%,
        rgba(2, 71, 67, 0.12) 50%,
        rgba(2, 71, 67, 0.06) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: lpSkeletonShimmer 1.35s ease-in-out infinite !important;
}

.lp-skeleton-line {
    height: 0.7rem !important;
}

.lp-skeleton-line--short {
    width: 35% !important;
    height: 0.85rem !important;
}

.lp-skeleton-line--long {
    width: 100% !important;
}

.lp-skeleton-line--med {
    width: 72% !important;
}

@keyframes lpSkeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-skeleton,
    .lp-skeleton-card {
        animation: none !important;
        opacity: 0.65 !important;
    }
}

/* Empty / offline trust state — never hide the chapter */
.testimonials-empty-card {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 2.25rem 1.5rem !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f8 100%) !important;
    border: 1px solid rgba(2, 71, 67, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(2, 71, 67, 0.06) !important;
}

.testimonials-empty-card i {
    font-size: 1.75rem !important;
    color: #bfa15f !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
}

.testimonials-empty-card h3 {
    font-family: "Newsreader", Georgia, serif !important;
    font-size: 1.25rem !important;
    color: #0f172a !important;
    margin: 0 0 0.5rem !important;
}

.testimonials-empty-card p {
    color: #475569 !important;
    max-width: 42ch !important;
    margin: 0 auto 1.15rem !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.testimonials-empty-card .btn {
    margin: 0 0.35rem 0.35rem !important;
}

/* Home teaser actions — simple button row (no QR) */
#testimonials-teaser-section .testimonials-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    margin-top: 1.5rem !important;
}

#testimonials-teaser-section .section-header {
    margin-bottom: 1.5rem !important;
}

/* Hide legacy loading text if present */
.testimonials-loading {
    display: none !important;
}

/* Testimonials page toolbar */
.testimonials-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.85rem 1rem !important;
    margin-bottom: 1.5rem !important;
    padding: 1rem 1.15rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(2, 71, 67, 0.05) !important;
}

.testimonials-toolbar p {
    margin: 0 !important;
    font-size: 0.92rem !important;
    color: #475569 !important;
    max-width: 62ch !important;
}

/* One Google review CTA only (banner / home actions) */
.review-cta-banner .btn-accent i,
.testimonials-actions .btn-accent i,
.testimonials-empty-card .btn-accent i {
    margin-right: 0.35rem;
}

/* ==========================================================================
   PHASE 6 — A11Y / MOBILE KEEP (G12–G13 strip HF spoilage)
   KEEP: skip-link, focus-visible, sticky Call/Book, safe mobile layout.
   STRIPPED: lang pills, 44px top-bar/nav/hamburger, fat top-bar, main-header rewrites.
   Header/footer chrome → HEADER + FOOTER ORIGINAL RESET (below).
   ========================================================================== */

/* Skip link always on top */
.skip-link:focus,
.skip-link:focus-visible {
    top: 0 !important;
    z-index: 10050 !important;
}

/* Stronger focus — keyboard path (content + chrome; no visual redesign) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
.lang-link:focus-visible,
.hamburger:focus-visible,
.faq-trigger:focus-visible {
    outline: 3px solid var(--primary, #024743) !important;
    outline-offset: 3px !important;
}

.top-bar a:focus-visible,
.top-bar-lang a:focus-visible,
.mobile-sticky-cta a:focus-visible,
.hero .btn:focus-visible,
.cta-row .btn:focus-visible,
.footer a:focus-visible {
    outline-color: #f0e2b0 !important;
}

/* Content CTAs only — do NOT bloat header chrome (nav / top-bar / hamburger) */
.btn:not(.btn-header),
.mobile-sticky-cta .btn,
.hero-ctas .btn {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Mobile sticky CTA polish */
.mobile-sticky-cta {
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 2px solid #bfa15f !important;
    background: #012e2b !important;
}

.mobile-sticky-cta .btn {
    min-height: 48px !important;
    font-weight: 700 !important;
    gap: 0.4rem !important;
}

.mobile-sticky-cta .btn-call {
    background: #bfa15f !important;
    color: #012e2b !important;
    border: 2px solid #bfa15f !important;
}

.mobile-sticky-cta .btn-book {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.75) !important;
}

/* Body padding when sticky CTA present */
body.has-mobile-sticky-cta {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

body.has-mobile-sticky-cta .footer {
    padding-bottom: 1.25rem !important;
}

/* Hide sticky when mobile nav open */
body.nav-open .mobile-sticky-cta {
    display: none !important;
    visibility: hidden !important;
}

/* Mobile spacing — containers & cards (no header/footer rewrites) */
@media (max-width: 991px) {
    .container {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }

    .hero-ctas {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.55rem !important;
    }

    .hero-ctas .btn {
        flex: 1 1 auto !important;
        min-width: min(100%, 10rem) !important;
        justify-content: center !important;
    }

    .section-header {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }

    .service-card,
    .feature-band__item,
    .about-tech-card,
    .testimonial-card {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   HEADER + FOOTER ORIGINAL RESET
   Restores live Airo chrome sizing/colors; cancels later experimental overrides.
   ========================================================================== */

/* --- Top green bar (original slim utility) --- */
.top-bar {
    background-color: var(--primary, #024743) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    padding: 8px 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.top-bar-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
}

.top-bar-left,
.top-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.top-bar a,
.top-bar a[href^="tel:"],
.top-bar span {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.top-bar a:hover {
    color: var(--accent, #bfa15f) !important;
}

/* Original EN | ES — simple text, not fat pills */
.top-bar-lang {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-heading), "Newsreader", Georgia, serif !important;
    font-weight: 700 !important;
}

.top-bar-lang .lang-separator {
    display: inline !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 !important;
    font-size: inherit !important;
}

.top-bar-lang .lang-link,
.top-bar-lang a.lang-link,
.top-bar-lang span.lang-link,
.top-bar-lang a,
.top-bar-lang span {
    display: inline !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
}

.top-bar-lang .lang-link.active,
.top-bar-lang a.lang-link.active,
.top-bar-lang span.lang-link.active,
.top-bar-lang [aria-current="true"] {
    background: transparent !important;
    color: var(--accent, #bfa15f) !important;
    text-decoration: none !important;
}

.top-bar-lang a.lang-link:hover {
    background: transparent !important;
    color: var(--accent, #bfa15f) !important;
}

/* --- Main header (original) --- */
.main-header {
    background-color: var(--bg-header, rgba(252, 253, 254, 0.97)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    height: 96px !important;
    min-height: 96px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border-light, rgba(2, 71, 67, 0.05)) !important;
    box-shadow: none !important;
}

.header.scrolled .top-bar {
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

.header.scrolled .main-header {
    height: 84px !important;
    min-height: 84px !important;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(2, 71, 67, 0.06)) !important;
}

/* Body offset for original header stack (~top 8+8 + 96) */
body {
    padding-top: 132px !important;
}

@media (max-width: 991px) {
    .top-bar {
        display: none !important;
    }
    body {
        padding-top: 86px !important;
    }
    .main-header {
        height: auto !important;
        min-height: 72px !important;
        padding: 0.35rem 0 !important;
    }
}

/* Hamburger — original modest size (not 48px pad bloating header) */
.hamburger {
    width: auto !important;
    height: auto !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
}

/* --- Footer original treatment --- */
.footer {
    background-color: var(--primary-dark, #012e2b) !important;
    color: #94a3b8 !important;
    position: relative !important;
    z-index: 1 !important;
}

.footer .footer-services,
.footer-services {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

.footer .footer-services-list,
.footer-services-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.footer .footer-areas,
.footer-areas {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.footer .footer-links-row,
.footer-links-row {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}

.footer .footer-copyright-row,
.footer-copyright-row {
    text-align: center !important;
}

/* Keep breadcrumb lang simple */
.breadcrumb-lang-link {
    min-height: 0 !important;
    padding: 0.2rem 0.7rem !important;
}

/* ==========================================================================
   PHASE 7 — PERF / A11Y DEPTH / COMPONENTS (G14–G16)
   No header/footer chrome rewrites. Contact form polish deferred (last).
   ========================================================================== */

/* G14 — footer off-screen paint savings */
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* G14 — office tour video: reserve space, reduce CLS */
.office-tour-frame {
    aspect-ratio: 16 / 9;
    max-width: 920px;
}

.office-tour-video {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #0b1f1e;
}

/* G14 — images never overflow; async decode default for lazy imgs */
img {
    max-width: 100%;
    height: auto;
}

/* G15 — form control baseline (shared; contact form wiring last) */
.form-group input,
.form-group select,
.form-group textarea,
.newsletter-form input[type="email"],
.newsletter-form input[type="text"],
.contact-form input,
.contact-form select,
.contact-form textarea {
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(2, 71, 67, 0.18);
    font-family: var(--font-body), "Noto Sans", system-ui, sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea,
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.newsletter-form input:focus-visible,
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
    outline: 3px solid var(--primary, #024743);
    outline-offset: 2px;
    border-color: var(--primary, #024743);
    box-shadow: 0 0 0 3px rgba(2, 71, 67, 0.12);
}

/* G15 — card component consistency (content only) */
.service-card,
.feature-band__item,
.about-tech-card,
.testimonial-card,
.clinic-gallery-item {
    border-radius: 12px;
}

/* G14 — sticky CTA paint isolation (no permanent will-change) */
.mobile-sticky-cta {
    contain: layout style;
}

/* G13 residual — tap highlight off for content CTAs only */
.btn,
.mobile-sticky-cta a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ==========================================================================
   CLINIC THUMBS — full card width; sharp thumb file; full image in lightbox
   ========================================================================== */
.clinic-gallery-item,
.clinic-stills-strip figure {
    cursor: zoom-in !important;
    position: relative;
}

/* Media frame = full block width */
.clinic-still-media {
    position: relative;
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #eef5f4 !important;
    overflow: hidden !important;
}

/* Fill the block edge-to-edge (thumb asset is sized for this; full opens in LB) */
.clinic-gallery-item img,
.clinic-stills-strip img,
.clinic-gallery-item .clinic-still-media img,
.clinic-stills-strip .clinic-still-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    filter: none !important;
    transform: none !important;
    transition: transform 0.35s ease !important;
    pointer-events: none;
    background: #eef5f4 !important;
}

.clinic-gallery-item:hover .clinic-still-media img,
.clinic-gallery-item:focus-within .clinic-still-media img,
.clinic-stills-strip figure:hover .clinic-still-media img,
.clinic-stills-strip figure:focus-within .clinic-still-media img {
    transform: scale(1.04) !important;
    filter: none !important;
}

/* Zoom cue on hover */
.clinic-still-zoom {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 46, 43, 0.78);
    color: #f0e2b0;
    font-size: 0.78rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.clinic-gallery-item:hover .clinic-still-zoom,
.clinic-gallery-item:focus-within .clinic-still-zoom,
.clinic-stills-strip figure:hover .clinic-still-zoom,
.clinic-stills-strip figure:focus-within .clinic-still-zoom {
    opacity: 1;
    transform: translateY(0);
}

.clinic-still-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(1, 46, 43, 0);
    transition: background 0.2s ease;
    pointer-events: none;
}

.clinic-gallery-item:hover .clinic-still-media::after,
.clinic-gallery-item:focus-within .clinic-still-media::after,
.clinic-stills-strip figure:hover .clinic-still-media::after,
.clinic-stills-strip figure:focus-within .clinic-still-media::after {
    background: rgba(1, 46, 43, 0.08);
}

/* Lightbox full image stays sharp at native resolution */
.clinic-lightbox__img {
    image-rendering: auto;
    max-width: min(96vw, 1400px) !important;
    max-height: min(88vh, 900px) !important;
}

@media (max-width: 900px) {
    .clinic-still-media {
        height: 200px !important;
    }
    .clinic-still-zoom {
        opacity: 0.92;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clinic-gallery-item img,
    .clinic-stills-strip img,
    .clinic-still-zoom,
    .clinic-still-media::after {
        transition: none !important;
    }
    .clinic-gallery-item:hover .clinic-still-media img,
    .clinic-stills-strip figure:hover .clinic-still-media img {
        transform: none !important;
    }
}

/* ==========================================================================
   CONTACT FORM — last polish (G10 booking UX + a11y)
   ========================================================================== */
.contact-form-card {
    position: relative;
}

.contact-form-card__title {
    color: var(--primary, #024743) !important;
    font-size: 1.8rem !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.25 !important;
}

.contact-form-card__lead {
    color: var(--text-muted, #64748b) !important;
    margin: 0 0 0.55rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.contact-form-card__lang {
    margin: 0 0 1rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--primary, #024743) !important;
    letter-spacing: 0.01em !important;
}

.contact-form .form-group {
    margin-bottom: 1.1rem !important;
}

.contact-form .req {
    color: #b45309;
    font-weight: 700;
}

.contact-form .optional-label {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted, #64748b);
    font-size: 0.75rem; /* 12px — absolute so it can't inherit below the floor */
}

.contact-form .form-control {
    min-height: 48px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(2, 71, 67, 0.18) !important;
    background: #f8fbfb !important;
    padding: 0.7rem 0.95rem !important;
    font-size: 1rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.contact-form textarea.form-control,
.contact-form textarea.contact-message-short {
    min-height: 68px !important;
    max-height: 96px !important;
    resize: none !important;
    line-height: 1.4 !important;
}

.field-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-top: 0.4rem;
}

.field-meta .field-hint {
    margin: 0 !important;
    flex: 1 1 12rem;
}

.field-count {
    margin: 0 !important;
    flex: 0 0 auto;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--text-muted, #64748b) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.field-count.is-near-limit {
    color: #b45309 !important;
}

.field-count.is-at-limit {
    color: #b91c1c !important;
}

/* Live PHI/HIPAA hint under the contact note */
.phi-inline-warn {
    margin: 0.4rem 0 0 !important;
    padding: 0.5rem 0.7rem !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}
.phi-inline-warn--soft {
    color: #92400e !important;
    background: #fff8e8 !important;
    border: 1px solid rgba(191, 161, 95, 0.55) !important;
}
.phi-inline-warn--block {
    color: #991b1b !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
}

/* ==========================================================================
   SITEWIDE UNIFORM INTERIOR PAGES
   Bring service / FAQ / legal / blog depth in line with Home / Contact / About
   ========================================================================== */

/* Shared page hero (teal gradient banner — AUTHORITY for interior titles) */
section.page-hero#fl-main-content.py-5,
section.py-5.page-hero#fl-main-content,
.page-hero {
    position: relative !important;
    overflow: hidden !important;
    padding: clamp(2.25rem, 5vw, 3.25rem) 0 !important;
    background: linear-gradient(135deg, var(--primary, #024743) 0%, var(--primary-dark, #012e2b) 100%) !important;
    background-image: linear-gradient(135deg, var(--primary, #024743) 0%, var(--primary-dark, #012e2b) 100%) !important;
    color: #fff !important;
    text-align: center !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

section.page-hero#fl-main-content.py-5 h1,
section.py-5.page-hero#fl-main-content h1,
.page-hero h1 {
    color: #fff !important;
    text-shadow: none !important;
}

section.page-hero#fl-main-content.py-5 > .container > p,
section.py-5.page-hero#fl-main-content > .container > p,
.page-hero p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-hero::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(191, 161, 95, 0.7), transparent);
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    color: #fff !important;
    font-family: var(--font-heading), "Newsreader", Georgia, serif !important;
    font-size: clamp(1.75rem, 3.5vw, 2.55rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 auto 0.65rem !important;
    max-width: 22ch;
}

.page-hero p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 auto !important;
    max-width: 52ch !important;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem) !important;
    line-height: 1.6 !important;
}

/* Page-hero CTAs — fix color merge (teal outline btn on teal banner was invisible) */
.page-hero .btn {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.page-hero .btn-secondary {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
}

.page-hero .btn-secondary:hover,
.page-hero .btn-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.page-hero .btn-accent,
.page-hero .btn-primary {
    /* Gold / solid stays high-contrast on dark teal */
    color: #012e2b !important;
}

.page-hero .btn-primary {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--primary, #024743) !important;
}

.page-hero .btn-primary:hover,
.page-hero .btn-primary:focus-visible {
    background-color: #f0e2b0 !important;
    border-color: #f0e2b0 !important;
    color: #012e2b !important;
}

/* Answer-first AEO callout (service pages) */
.answer-first-block {
    background: var(--bg-light, #f4f8fb) !important;
    border-left: 4px solid var(--primary, #024743) !important;
    border-radius: 12px !important;
    padding: 1.35rem 1.65rem !important;
    max-width: 85ch !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 24px rgba(2, 71, 67, 0.06) !important;
    border-top: 1px solid rgba(2, 71, 67, 0.06) !important;
    border-right: 1px solid rgba(2, 71, 67, 0.06) !important;
    border-bottom: 1px solid rgba(2, 71, 67, 0.06) !important;
}

.answer-first-block p {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: var(--text, #1e293b) !important;
}

/* Mid-page clinic photos (was bare inline-styled img) */
.content-photo {
    margin: 0 auto !important;
    max-width: 900px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow:
        0 16px 40px rgba(2, 71, 67, 0.12),
        0 0 0 1px rgba(2, 71, 67, 0.08) !important;
    background: #e8f0ef !important;
}

.content-photo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.content-photo:hover img {
    transform: scale(1.03) !important;
}

/* FAQ category blocks (faqs.html + service FAQs) */
.faq-block {
    background: #fff !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 14px !important;
    padding: 1.25rem 1.35rem 0.5rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 8px 22px rgba(2, 71, 67, 0.05) !important;
}

.faq-block > h2 {
    font-family: var(--font-heading), "Newsreader", Georgia, serif !important;
    font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
    color: var(--primary, #024743) !important;
    margin: 0 0 0.85rem !important;
    letter-spacing: -0.015em !important;
}

.faq-block .faq-accordion {
    margin: 0 !important;
}

/* Legal pages */
.legal-page {
    max-width: min(72ch, 100%) !important;
}

.legal-page h2 {
    font-family: var(--font-heading), "Newsreader", Georgia, serif !important;
    color: var(--primary, #024743) !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    margin-top: 2rem !important;
    letter-spacing: -0.015em !important;
}

.legal-page h3 {
    color: var(--heading, #0f172a) !important;
    font-size: 1.05rem !important;
    margin-top: 1.35rem !important;
}

.legal-page p,
.legal-page li {
    line-height: 1.7 !important;
    color: var(--text, #334155) !important;
}

.legal-toc {
    background: #f4f8fb !important;
    border: 1px solid rgba(2, 71, 67, 0.1) !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    margin: 1.25rem 0 1.75rem !important;
}

.legal-toc a {
    color: var(--primary, #024743) !important;
    font-weight: 600 !important;
}

.legal-meta {
    font-size: 0.88rem !important;
    color: var(--text-muted, #64748b) !important;
}

/* Breadcrumb polish (all interior) */
.page-breadcrumb {
    border-bottom: 1px solid rgba(2, 71, 67, 0.06) !important;
    background: #fcfdfe !important;
}

.page-breadcrumb ol {
    font-size: 0.88rem !important;
}

/* Service / content images with soft motion (parity with home) */
.value-prop-image {
    overflow: hidden !important;
}

.value-prop-image img {
    transition: transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.value-prop-grid:hover .value-prop-image img,
.doctor-image-wrapper:hover img {
    transform: scale(1.03) !important;
}

/* Prose measure containers on service Q&A */
section.py-6.bg-light > .container[style*="max-width"] h2,
section.py-6 > .container[style*="max-width"] h2 {
    font-family: var(--font-heading), "Newsreader", Georgia, serif !important;
    color: var(--primary, #024743) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
}

section.py-6.bg-light > .container[style*="max-width"] p,
section.py-6 > .container[style*="max-width"] p {
    line-height: 1.75 !important;
    color: var(--text, #334155) !important;
}

/* Soft bg utility for inserted review sections */
.section-soft-bg {
    background: linear-gradient(180deg, #f4f8fb 0%, #fcfdfe 100%) !important;
}

/* Review CTA present on more pages — keep spacing consistent */
.review-cta-banner {
    margin-top: 0.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
    .content-photo:hover img,
    .value-prop-grid:hover .value-prop-image img,
    .doctor-image-wrapper:hover img {
        transform: none !important;
    }
    .content-photo img,
    .value-prop-image img {
        transition: none !important;
    }
}

.contact-form .form-control:hover {
    border-color: rgba(2, 71, 67, 0.32) !important;
}

.contact-form .form-control:focus,
.contact-form .form-control:focus-visible {
    outline: none !important;
    border-color: var(--primary, #024743) !important;
    box-shadow: 0 0 0 3px rgba(2, 71, 67, 0.14) !important;
    background: #fff !important;
}

.contact-form .form-control.is-invalid,
.contact-form .form-control[aria-invalid="true"] {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
    background: #fffafa !important;
}

.field-error {
    margin: 0.35rem 0 0 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #b91c1c !important;
    line-height: 1.35 !important;
}

.field-hint {
    margin: 0.4rem 0 0 !important;
    font-size: 0.78rem !important;
    color: var(--text-muted, #64748b) !important;
    line-height: 1.4 !important;
}

.form-status {
    min-height: 0;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b91c1c;
    line-height: 1.4;
}

.form-status:empty {
    display: none;
}

.contact-form__submit {
    margin-top: 0.35rem !important;
    min-height: 48px !important;
    font-weight: 600 !important;
    gap: 0.45rem !important;
    /* Quieter than the gold Call button — form is secondary path */
    border: 1.5px solid rgba(2, 71, 67, 0.28) !important;
}

.contact-form__submit:disabled {
    opacity: 0.72;
    cursor: wait;
}

.contact-form-card__lead {
    max-width: 38ch;
}

/* Contact landmark tiles — full width like gallery thumbs */
.contact-landmark-grid.clinic-stills-strip {
    max-width: none !important;
    margin: 0 0 0.75rem !important;
}

.contact-landmark-card .clinic-still-media {
    height: 140px !important;
}

@media (max-width: 900px) {
    .contact-landmark-card .clinic-still-media {
        height: 180px !important;
    }
}



/* ==========================================================================
   Micro-precision: uniform small eyebrow size (12px readability floor).
   Placed last so it wins over the scattered .pre-headline overrides above.
   Larger section kickers (.value-prop-text / .family-story-copy) are left
   as designed.
   ========================================================================== */
.hero-ribbon-copy .pre-headline,
.hero-ribbon .hero-line--eyebrow,
.hero .pre-headline.hero-line--eyebrow,
.section-header .pre-headline {
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
}

/* ==========================================================================
   Typographic readability floor (final cascade layer)
   No interface text renders below 12px. Applies to the small UI labels that
   previously computed to 11.5–11.9px (form labels, privacy notes, serving
   label, ES navigation) so type is uniform and legible sitewide.
   ========================================================================== */
.newsletter-form .form-field label,
.newsletter-phi-note,
.newsletter-form .newsletter-phi-note,
.serving-label,
#services-grid-section .serving-label,
.contact-form .optional-label,
.family-story-note,
.field-hint,
.field-count {
    font-size: 0.75rem !important;
}

html[lang="es"] .nav .nav-link,
html[lang="es"] .nav .dropdown > .nav-link,
html[lang="es"] a.btn-header {
    font-size: 0.75rem !important;
}

/* ==========================================================================
   Google review compliance UI — Google Reviews Integration & Compliance SOP
   §4 requires a verification link immediately below every displayed review
   quote, pointing at the clinic's Google Business Profile. Styled as a quiet
   inline link so it reads as provenance rather than another CTA competing
   with "Schedule Your Visit".
   ========================================================================== */

.review-verify-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    align-self: flex-start !important;
    margin: 0 0 0.9rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0f766e !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.35) !important;
    padding-bottom: 1px !important;
    transition: color 0.18s ease, border-color 0.18s ease !important;
}

.review-verify-link:hover,
.review-verify-link:focus-visible {
    color: #024743 !important;
    border-bottom-color: #024743 !important;
}

.review-verify-link:focus-visible {
    outline: 2px solid #bfa15f !important;
    outline-offset: 3px !important;
    border-radius: 2px !important;
}

/* "Read all reviews on Google" beside the testimonials intro copy. */
.testimonials-toolbar-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex: 0 0 auto !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #0f766e !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.35) !important;
    padding-bottom: 1px !important;
}

.testimonials-toolbar-link:hover,
.testimonials-toolbar-link:focus-visible {
    color: #024743 !important;
    border-bottom-color: #024743 !important;
}

/* Screen-reader-only text (used to announce that verify links open a new tab). */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Executive Modal Stylesheet — Matching Screenshot 2 Blueprint
   ========================================================================== */
.lp-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

.lp-modal[hidden] {
    display: none !important;
}

.lp-modal__backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(10, 35, 32, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.lp-modal__panel {
    position: relative !important;
    z-index: 2 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 440px !important;
    padding: 2.25rem 2rem 2rem !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-family: 'Noto Sans', system-ui, -apple-system, sans-serif !important;
    animation: lpModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(2, 71, 67, 0.08) !important;
}

@keyframes lpModalPop {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.lp-modal__x {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 1.4rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.lp-modal__x:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

.lp-modal__icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.25rem !important;
    font-size: 1.6rem !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

.lp-modal--success .lp-modal__icon {
    background: #009688 !important;
    color: #ffffff !important;
}

.lp-modal--error .lp-modal__icon {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.lp-modal--info .lp-modal__icon {
    background: #024743 !important;
    color: #ffffff !important;
}

.lp-modal__title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 1.45rem !important;
    color: #012e2b !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.25 !important;
}

.lp-modal__text {
    font-size: 0.95rem !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin: 0 0 1.75rem !important;
}

.lp-modal__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
}

.lp-modal__btn {
    border-radius: 8px !important;
    padding: 0.65rem 1.6rem !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    cursor: pointer !important;
    min-width: 110px !important;
    text-decoration: none !important;
}

.lp-modal__btn.btn-accent,
.lp-modal__btn.btn-gold,
.lp-modal__btn.btn-primary {
    background: #c59b3f !important;
    color: #ffffff !important;
    border: none !important;
}

.lp-modal__btn.btn-accent:hover,
.lp-modal__btn.btn-gold:hover,
.lp-modal__btn.btn-primary:hover {
    background: #b08833 !important;
}

.lp-modal__btn.btn-secondary,
.lp-modal__btn.btn-outline {
    background: transparent !important;
    color: #024743 !important;
    border: 2px solid #024743 !important;
}

.lp-modal__btn.btn-secondary:hover,
.lp-modal__btn.btn-outline:hover {
    background: #eef4f4 !important;
}