/* =====================================================================
   Teethz Tantras — design system
   Built from scratch (no Tailwind), shadcn/ui-inspired tokens, light mode.
   One file, hand-scoped utilities, ~10KB gzipped.
   ===================================================================== */

/* ---------- 1. Tokens -------------------------------------------------- */
:root {
    /* Brand — Dental Blue (from the Teethz Tantras logo; hex sampled from artwork).
       Token names retained from the initial teal build for diff locality, but
       the VALUES are the real clinic brand. */
    --teal-50:  #eaf6fc;
    --teal-100: #d0eaf7;
    --teal-200: #a8d4f2;
    --teal-300: #6fb6e5;
    --teal-400: #3894d4;
    --teal-500: #0095d4;
    --teal-600: #0077b6;   /* primary — the exact blue in "eethz antras" */
    --teal-700: #005d93;
    --teal-800: #004770;
    --teal-900: #002d4d;

    /* Accent — Sunset Orange (the "T" letters in the logo). */
    --amber-400: #ffb66b;
    --amber-500: #f57620;   /* logo orange */
    --amber-600: #d85c0e;

    /* Leaf green — the little sprig on the tooth. Used for "FREE" / success. */
    --leaf-400: #b7df5e;
    --leaf-500: #9ecf3a;
    --leaf-600: #7cae21;

    /* Neutral (shadcn-style) */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Semantic (shadcn naming).
       Two-tone CTA strategy:
         --primary = brand BLUE for most UI chrome, links, accents.
         --cta     = brand ORANGE for "Book / Call / Submit" hero CTAs.
       This mirrors the logo (blue wordmark + orange T) and gives every
       conversion button a distinct warm pop against the cool site palette. */
    --background: #ffffff;
    --foreground: var(--slate-900);
    --muted:            var(--slate-50);
    --muted-foreground: var(--slate-500);
    --subtle:           var(--slate-100);
    --border:           var(--slate-200);
    --input:            var(--slate-200);
    --ring:             var(--teal-600);
    --primary:          var(--teal-600);
    --primary-hover:    var(--teal-700);
    --primary-foreground:#ffffff;
    --cta:              var(--amber-500);
    --cta-hover:        var(--amber-600);
    --cta-foreground:   #ffffff;
    --secondary:        var(--amber-500);
    --accent:           var(--teal-50);
    --destructive:      #dc2626;
    --success:          #16a34a;

    /* Effects */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl:28px;

    --shadow-xs: 0 1px 2px 0 rgba(15,23,42,.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow:    0 4px 10px -4px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
    --shadow-md: 0 8px 24px -8px rgba(15,23,42,.12), 0 4px 8px -4px rgba(15,23,42,.06);
    --shadow-lg: 0 20px 50px -20px rgba(15,23,42,.18), 0 8px 20px -8px rgba(15,23,42,.08);
    --shadow-glow: 0 0 0 1px rgba(0,119,182,.08), 0 20px 50px -20px rgba(0,119,182,.25);

    /* Type scale */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', 'Inter', Georgia, serif;
}

/* ---------- 2. Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "cv11", "ss01", "ss03";
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--teal-100); color: var(--teal-900); }

/* Scrollbar */
html { scrollbar-width: thin; scrollbar-color: var(--teal-500) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal-500); }

/* ---------- 3. Layout -------------------------------------------------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px)  { .container, .container-narrow { padding: 0 1.75rem; } }
@media (min-width: 1024px) { .container, .container-narrow { padding: 0 2.5rem;  } }

.section      { padding: 4.5rem 0; }
.section-sm   { padding: 3rem 0; }
.section-lg   { padding: 6rem 0; }
@media (max-width: 640px) {
    .section    { padding: 3rem 0; }
    .section-lg { padding: 4rem 0; }
}

/* ---------- 4. Typography --------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--slate-900);
}
h1 { font-size: clamp(2.25rem, 4.5vw + 0.5rem, 4rem);   letter-spacing: -0.03em; }
h2 { font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.75rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 1vw + 0.75rem, 1.625rem); }
h4 { font-size: 1.125rem; letter-spacing: -0.01em; }
p  { color: var(--slate-600); line-height: 1.7; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--teal-700);
    padding: 6px 12px;
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-radius: 999px;
}
.lead      { font-size: 1.125rem; color: var(--slate-600); line-height: 1.75; max-width: 42rem; }
.serif     { font-family: var(--font-display); }
.text-muted{ color: var(--muted-foreground); }

.gradient-text {
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ---------- 5. Buttons (shadcn-inspired) ------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem; font-weight: 500;
    line-height: 1;
    border-radius: var(--radius);
    transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.btn svg { width: 16px; height: 16px; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* Primary = brand orange CTA. Used for Book / Submit / Call-to-action buttons
   where we want the strongest conversion pull. */
.btn-primary {
    background: var(--cta);
    color: var(--cta-foreground);
    box-shadow: 0 2px 8px -2px rgba(245,118,32,0.35);
}
.btn-primary:hover { background: var(--cta-hover); box-shadow: 0 6px 16px -4px rgba(245,118,32,0.42); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* Blue alternative — used when we want brand presence without screaming CTA.
   E.g. related-service "Learn more" cards, secondary nav CTAs. */
.btn-brand {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-xs);
}
.btn-brand:hover { background: var(--primary-hover); box-shadow: var(--shadow); transform: translateY(-1px); }

.btn-secondary {
    background: var(--slate-900);
    color: #fff;
}
.btn-secondary:hover { background: var(--slate-800); }

.btn-outline {
    background: transparent;
    color: var(--slate-900);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-outline:hover { border-color: var(--teal-600); color: var(--teal-700); }

.btn-ghost {
    background: transparent;
    color: var(--slate-700);
}
.btn-ghost:hover { background: var(--slate-100); color: var(--slate-900); }

.btn-link {
    background: transparent; color: var(--primary);
    padding: 0 0.25rem;
}
.btn-link:hover { color: var(--primary-hover); }
.btn-link:hover svg { transform: translateX(2px); }
.btn-link svg { transition: transform 150ms; }

.btn-lg { padding: 0.875rem 1.5rem; font-size: 0.9375rem; }
.btn-xl { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.btn-block { display: flex; width: 100%; }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1fb954; }

/* ---------- 6. Badges, chips ------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem; font-weight: 500;
    color: var(--slate-700);
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    line-height: 1.4;
}
.badge-primary { color: var(--teal-800); background: var(--teal-50); border-color: var(--teal-100); }
.badge-accent  { color: #92400e;         background: #fffbeb;        border-color: #fde68a; }
.badge-success { color: #166534;         background: #f0fdf4;        border-color: #bbf7d0; }

/* ---------- 7. Card --------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.card:hover { border-color: var(--teal-200); box-shadow: var(--shadow-md); }
.card-elev  { box-shadow: var(--shadow-sm); }
.card-soft  { background: var(--slate-50); border-color: var(--slate-100); }
.card-body  { padding: 1.5rem; }
.card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--slate-900); }
.card-meta  { font-size: 0.8125rem; color: var(--muted-foreground); }

/* ---------- 8. Forms -------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field label {
    font-size: 0.8125rem; font-weight: 500;
    color: var(--slate-700);
    letter-spacing: 0.01em;
}
.field .req { color: var(--destructive); }

.input, .select, .textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--slate-900);
    background: #fff;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    transition: border-color 150ms, box-shadow 150ms;
    -webkit-appearance: none; appearance: none;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px rgba(0,119,182,.12);
}
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.6 3.6a.8.8 0 0 1 1.1 0L6 5.9l2.3-2.3a.8.8 0 0 1 1.1 1.1L6.6 7.5a.8.8 0 0 1-1.1 0L2.6 4.7a.8.8 0 0 1 0-1.1Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
}
.field-help { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.field-error { font-size: 0.8125rem; color: var(--destructive); margin-top: 0.25rem; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Alert */
.alert {
    padding: 1rem 1.125rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    border: 1px solid;
    display: flex; align-items: flex-start; gap: 0.75rem;
}
.alert svg { flex-shrink: 0; margin-top: 2px; }
.alert-error   { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.alert-info    { color: var(--teal-900); background: var(--teal-50); border-color: var(--teal-200); }

/* ---------- 9. Header -------------------------------------------------- */
.topbar {
    background: linear-gradient(90deg, var(--teal-800), var(--teal-900));
    color: rgba(255,255,255,0.88);
    font-size: 0.8125rem;
    padding: 0.625rem 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.topbar a { color: inherit; transition: color 150ms; }
.topbar a:hover { color: var(--amber-400); }
.topbar .phone-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 4px 12px;
    background: rgba(245,118,32,0.18);
    border: 1px solid rgba(245,118,32,0.38);
    border-radius: 999px;
    color: #fff; font-weight: 600;
    transition: background 150ms, border-color 150ms;
}
.topbar .phone-pill:hover { background: var(--cta); border-color: var(--cta); color: #fff; }
.topbar-info { display: flex; gap: 1.5rem; align-items: center; }
.topbar-info span { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar svg { width: 14px; height: 14px; opacity: 0.8; }
@media (max-width: 900px) { .topbar { display: none; } }

header.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(226,232,240,0.6);
    transition: box-shadow 200ms;
}
header.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
header.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; gap: 1rem;
}

/* Logo — real clinic artwork (PNG, transparent bg). Sized by height so it
   scales cleanly into any container without layout shift. */
.logo { display: inline-flex; align-items: center; gap: 0.625rem; }
.logo-img {
    height: 48px; width: auto;
    display: block;
}
@media (max-width: 480px) {
    .logo-img { height: 40px; }
}
/* Dark-background variant — used in the footer. A subtle white halo lifts the
   brand colors off the navy without hiding the transparency. */
.logo-img--on-dark {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

nav.primary { display: none; align-items: center; gap: 0.25rem; }
nav.primary a {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem; font-weight: 500;
    color: var(--slate-700);
    border-radius: var(--radius-sm);
    transition: color 150ms, background 150ms;
}
nav.primary a:hover { color: var(--teal-700); background: var(--teal-50); }
nav.primary a.active { color: var(--teal-700); background: var(--teal-50); }
@media (min-width: 1024px) { nav.primary { display: inline-flex; } }

.header-ctas { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 1024px) { .header-ctas { display: inline-flex; } }

.menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--radius); color: var(--slate-700);
}
.menu-toggle:hover { background: var(--slate-100); }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.mobile-nav {
    display: none;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 1rem 0;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
    display: block;
    padding: 0.875rem 0.25rem;
    font-size: 1rem; font-weight: 500;
    color: var(--slate-800);
    border-bottom: 1px solid var(--slate-100);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a.active { color: var(--teal-700); }
.mobile-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem 0 0; }

/* ---------- 10. Hero (with Ken-Burns background image) ---------------- */
.hero {
    position: relative;
    padding: 4.5rem 0 3rem;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

/* Background image layer — separated so we can animate it (pan + zoom)
   independently of the content. Gradient overlay keeps text readable. */
.hero__bg {
    position: absolute; inset: 0;
    z-index: -2;
    /* Path relative to this CSS file — works in both root + subfolder deploys. */
    background: url("../images/hero.jpg") center/cover no-repeat;
    background-color: var(--teal-900);
    transform-origin: 50% 45%;
    animation: kenburns 20s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kenburns {
    0%   { transform: scale(1.05) translate3d(-0.5%, -0.5%, 0); }
    50%  { transform: scale(1.12) translate3d(0.8%, 1%, 0); }
    100% { transform: scale(1.07) translate3d(-1%, 0.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__bg { animation: none; transform: scale(1.04); }
}

.hero::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    /* Darker on the left where the headline sits; image breathes through on the
       right. Bottom is very lightly dimmed so stats + trust row stay readable. */
    background:
        linear-gradient(100deg, rgba(0,45,77,0.72) 0%, rgba(0,71,112,0.42) 40%, rgba(0,119,182,0.18) 75%, rgba(0,71,112,0.12) 100%),
        linear-gradient(180deg, rgba(0,45,77,0) 55%, rgba(0,45,77,0.35) 100%);
}

.hero-grid {
    display: grid; grid-template-columns: 1fr; gap: 2.5rem;
    align-items: center;
    min-height: calc(100svh - 10rem);
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 4rem; padding: 2rem 0; } }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.15); }
.hero h1 span { color: var(--amber-400); }
.hero-description { margin: 1.25rem 0 2rem; max-width: 34rem; font-size: 1.0625rem; color: rgba(255,255,255,.88); line-height: 1.7; }
.hero-description strong { color: #fff; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.hero-ctas .btn-outline { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.hero-ctas .btn-outline:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; font-size: 0.875rem; color: rgba(255,255,255,.78); }
.hero-trust span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-trust svg { width: 16px; height: 16px; color: var(--amber-400); }
.hero .eyebrow { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(8px); }

.hero-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-glow);
}
.hero-card h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; }
.hero-rating {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 999px;
    font-size: 0.8125rem; font-weight: 500;
    color: #92400e;
    margin-bottom: 1.25rem;
}
.hero-rating svg { width: 14px; height: 14px; color: #f59e0b; fill: currentColor; }
.doctor-block {
    display: flex; gap: 1rem; align-items: center;
    padding: 1rem;
    border: 1px solid var(--slate-100);
    background: var(--slate-50);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.doctor-avatar {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    color: #fff; font-weight: 700; font-size: 1rem;
}
.doctor-info { display: flex; flex-direction: column; gap: 2px; }
.doctor-info b { font-size: 0.9375rem; color: var(--slate-900); }
.doctor-info small { font-size: 0.8125rem; color: var(--slate-500); }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.mini-stat {
    padding: 0.875rem 0.5rem;
    text-align: center;
    background: var(--slate-50);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-sm);
}
.mini-stat b { font-size: 1.125rem; font-family: var(--font-display); color: var(--slate-900); display: block; line-height: 1; }
.mini-stat small { display: block; font-size: 0.6875rem; color: var(--slate-500); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 4px; }

.offer-block {
    display: flex; gap: 0.75rem; align-items: center;
    padding: 0.875rem 1rem;
    background: linear-gradient(90deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.offer-block .dot { width: 40px; height: 40px; border-radius: 10px; background: var(--amber-500); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.offer-block small { color: #92400e; font-size: 0.8125rem; display: block; }
.offer-block b { color: #78350f; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.quick-grid div { padding: 0.625rem 0.75rem; background: var(--slate-50); border: 1px solid var(--slate-100); border-radius: var(--radius-sm); font-size: 0.8125rem; text-align: center; font-weight: 500; color: var(--slate-700); }

/* ---------- 11. Stats strip ------------------------------------------- */
.stats-strip {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
}
.stats-strip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; text-align: center; }
@media (min-width: 768px) { .stats-strip-grid { grid-template-columns: repeat(4, 1fr); } }
.stats-strip-grid b { font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw, 2.5rem); font-weight: 600; color: var(--teal-700); display: block; line-height: 1; }
.stats-strip-grid small { font-size: 0.875rem; color: var(--slate-500); display: block; margin-top: 0.5rem; }

/* ---------- 12. Sections -------------------------------------------- */
.section-head { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 { margin-bottom: 1rem; }

.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 480px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

/* Auto-balance helper: children decide their own column count based on viewport +
   natural card width. Useful for grids where the item count may vary. */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Blurred price + "Know Price" WA CTA ------------------------------------
   Used wherever a treatment price is shown. Blurring creates a lead moment
   (prices vary by case complexity, materials, and insurance) while staying
   visually honest — the customer can see "there is a number here" without
   being locked into a specific figure. */
.price-blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    display: inline-block;
}
.price-reveal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.price-reveal__cta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: rgba(37,211,102,0.12);
    color: #075e54;
    border: 1px solid rgba(37,211,102,0.32);
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.3;
    transition: all 150ms;
}
.price-reveal__cta:hover {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}
.price-reveal__cta svg { width: 12px; height: 12px; fill: currentColor; }

/* Service card — uses the "stretched link" pattern (Bootstrap / shadcn).
   The card is a <div>; a dedicated invisible <a class="stretched-link">
   sits above it and absorbs clicks across the whole surface. Inside, the
   "Know Price" <a> overrides that overlay via a higher z-index so it
   still opens WhatsApp.

   Why: HTML5 forbids nested <a> tags, so making the outer card an <a>
   while also embedding an interactive Know Price <a> silently breaks the
   DOM — the browser closes the outer anchor early, which visually splits
   each card in two. The stretched-link pattern avoids that completely. */
.service-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    isolation: isolate;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--teal-200); box-shadow: var(--shadow-md); }
.service-card .icon {
    width: 48px; height: 48px; border-radius: 10px;
    background: var(--teal-50); color: var(--teal-700);
    display: grid; place-items: center;
    margin-bottom: 1.25rem;
    border: 1px solid var(--teal-100);
}
.service-card .icon svg { width: 24px; height: 24px; }
.service-card h3 { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 600; margin-bottom: 0.5rem; color: var(--slate-900); }
.service-card p  { font-size: 0.9375rem; color: var(--slate-600); line-height: 1.65; flex: 1; }
.service-card .foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 1.25rem; margin-top: 1.25rem;
    border-top: 1px solid var(--slate-100);
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Invisible click-catcher covering the card. */
.stretched-link::before {
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    background: transparent;
    border-radius: inherit;
}
/* Raise any genuinely interactive child above the stretched overlay. */
.service-card .price-reveal,
.service-card .price-reveal__cta {
    position: relative;
    z-index: 2;
}
.service-card .price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--teal-700); }
.service-card .price small { font-size: 0.75rem; color: var(--slate-500); font-weight: 400; margin-right: 4px; }
.service-card .price.free { color: var(--amber-600); }

/* USP card */
.usp-card {
    padding: 1.5rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.usp-card .icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--teal-50); color: var(--teal-700);
    display: grid; place-items: center; margin-bottom: 1rem;
}
.usp-card h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; margin-bottom: 0.375rem; }
.usp-card p  { font-size: 0.9375rem; color: var(--slate-600); line-height: 1.65; }

/* Testimonial */
.testimonial {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    display: flex; flex-direction: column;
}
.testimonial .stars { display: flex; gap: 2px; color: var(--amber-500); margin-bottom: 0.875rem; }
.testimonial .stars svg { width: 15px; height: 15px; fill: currentColor; }
.testimonial blockquote { font-size: 0.9375rem; color: var(--slate-700); line-height: 1.75; flex: 1; margin-bottom: 1.25rem; }
.testimonial .author { display: flex; gap: 0.75rem; align-items: center; border-top: 1px solid var(--slate-100); padding-top: 1rem; }
.testimonial .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; }
.testimonial .author b { display: block; font-size: 0.9375rem; color: var(--slate-900); }
.testimonial .author small { font-size: 0.75rem; color: var(--slate-500); }

/* Branch card */
.branch-card {
    display: flex; flex-direction: column;
    padding: 1.75rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden;
}
.branch-card .map {
    margin: -1.75rem -1.75rem 1.5rem;
    aspect-ratio: 16/10; background: var(--slate-100);
    border-bottom: 1px solid var(--border);
}
.branch-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.branch-card h3 { font-size: 1.25rem; font-family: var(--font-display); font-weight: 600; margin-bottom: 0.25rem; }
.branch-card .meta { font-size: 0.8125rem; color: var(--teal-700); font-weight: 500; margin-bottom: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; }
.branch-card address { font-style: normal; font-size: 0.9375rem; color: var(--slate-600); line-height: 1.7; margin-bottom: 1.25rem; }
.branch-card .actions { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: auto; }

/* FAQ accordion */
.faq { border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--slate-100); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-weight: 500; font-size: 1rem; color: var(--slate-900);
    cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; width: 22px; height: 22px; flex-shrink: 0;
    background: var(--slate-100); border-radius: 50%;
    display: grid; place-items: center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2.6 3.6a.8.8 0 0 1 1.1 0L6 5.9l2.3-2.3a.8.8 0 0 1 1.1 1.1L6.6 7.5a.8.8 0 0 1-1.1 0L2.6 4.7a.8.8 0 0 1 0-1.1Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 200ms;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] summary { color: var(--teal-700); }
.faq .faq-body { padding: 0 1.5rem 1.25rem; color: var(--slate-600); font-size: 0.9375rem; line-height: 1.75; }

/* Pricing table */
.pricing {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.pricing-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--slate-100);
}
.pricing-row:last-child { border-bottom: 0; }
.pricing-row h4 { font-size: 0.9375rem; font-family: var(--font-sans); font-weight: 500; }
.pricing-row .cost { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--teal-700); }
.pricing-row .cost.free { color: var(--amber-600); }
@media (max-width: 640px) { .pricing-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } }

/* CTA band */
.cta-band {
    background: linear-gradient(135deg, var(--teal-800), var(--teal-900));
    color: #fff;
    padding: 3.5rem 0;
    border-radius: var(--radius-xl);
    margin: 4rem auto;
    max-width: 1140px;
    position: relative; overflow: hidden;
}
.cta-band::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px circle at top right, rgba(94,234,212,0.2), transparent 45%),
                radial-gradient(400px circle at bottom left, rgba(94,234,212,0.1), transparent 55%);
    pointer-events: none;
}
.cta-band h2 { color: #fff; margin-bottom: 0.75rem; }
.cta-band p  { color: rgba(255,255,255,0.75); max-width: 36rem; margin: 0 auto 1.5rem; }
.cta-band .btns { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.cta-band .btn-primary { background: #fff; color: var(--teal-800); }
.cta-band .btn-primary:hover { background: var(--slate-50); color: var(--teal-900); }
.cta-band .btn-outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.cta-band .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }

/* Doctor card (About page) */
.doctor-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    padding: 1.75rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.doctor-card .avatar-lg {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-600), var(--teal-800));
    color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 2rem;
    display: grid; place-items: center;
}
.doctor-card h3 { font-size: 1.375rem; margin-bottom: 0.125rem; }
.doctor-card .role { color: var(--teal-700); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 1rem; }
.doctor-card p { font-size: 0.9375rem; margin-bottom: 1rem; }
.doctor-card ul { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.doctor-card ul li { padding: 3px 10px; background: var(--slate-100); border-radius: 999px; font-size: 0.75rem; color: var(--slate-700); }
@media (max-width: 640px) { .doctor-card { grid-template-columns: 1fr; text-align: center; } .doctor-card .avatar-lg { margin: 0 auto; } .doctor-card ul { justify-content: center; } }

/* Process steps */
.process { display: grid; gap: 1rem; counter-reset: step; }
.process-step {
    display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    counter-increment: step;
}
.process-step::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
    color: var(--teal-600);
    width: 48px; text-align: left; line-height: 1;
}
.process-step h4 { margin-bottom: 0.25rem; }
.process-step p  { font-size: 0.9375rem; }

/* Benefits list */
.benefits-list { display: grid; gap: 0.75rem; }
.benefits-list li {
    display: flex; gap: 0.625rem; align-items: flex-start;
    color: var(--slate-700);
    font-size: 0.9375rem;
}
.benefits-list li::before {
    content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px;
    background: var(--teal-50);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230077b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 2 2 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Breadcrumbs */
.breadcrumbs { padding: 1rem 0; font-size: 0.8125rem; color: var(--slate-500); }
.breadcrumbs ol { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumbs a { color: var(--slate-500); }
.breadcrumbs a:hover { color: var(--teal-700); }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--slate-300); }
.breadcrumbs li.current { color: var(--slate-900); font-weight: 500; }

/* Page hero (non-home pages) */
.page-hero {
    position: relative;
    isolation: isolate;
    padding: 3rem 0 2.5rem;
    background: linear-gradient(180deg, var(--teal-50) 0%, transparent 100%);
    border-bottom: 1px solid var(--slate-100);
    text-align: center;
    overflow: hidden;
}
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 { max-width: 40rem; margin: 0 auto 1rem; }
.page-hero p  { max-width: 38rem; margin: 0 auto; color: var(--slate-600); }

/* Image variant — pages opt in by adding the `page-hero--image` class and
   setting `--hero-img` inline. Gets a subtle Ken-Burns animation and a
   gradient overlay tuned for white copy. */
.page-hero--image {
    padding: 5rem 0 4rem;
    background: none;
    border-bottom: 0;
    color: #fff;
}
.page-hero--image::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -2;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    background-color: var(--teal-800);
    transform-origin: 50% 50%;
    animation: kenburns-slow 30s ease-in-out infinite alternate;
    will-change: transform;
}
.page-hero--image::after {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0,45,77,0.58) 0%, rgba(0,71,112,0.48) 55%, rgba(0,45,77,0.62) 100%);
}
.page-hero--image h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
.page-hero--image p  { color: rgba(255,255,255,0.88); }
.page-hero--image .lead { color: rgba(255,255,255,0.85); }
.page-hero--image .eyebrow {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.page-hero--image .badge {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.26);
}
.page-hero--image .badge-primary { background: rgba(0,119,182,0.85); color:#fff; border-color: transparent; }
.page-hero--image .badge-accent  { background: rgba(245,118,32,0.9);  color:#fff; border-color: transparent; }

@keyframes kenburns-slow {
    0%   { transform: scale(1.04); }
    100% { transform: scale(1.12) translateY(-1%); }
}
@media (prefers-reduced-motion: reduce) {
    .page-hero--image::before { animation: none; transform: scale(1.04); }
}
@media (max-width: 640px) {
    .page-hero--image { padding: 3.25rem 0 2.75rem; }
}

/* ---------- 13. Footer ----------------------------------------------- */
footer.site-footer {
    background: var(--slate-900);
    color: var(--slate-300);
    padding: 4.5rem 0 0;
}
footer.site-footer .foot-grid {
    display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 768px) { footer.site-footer .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 3rem; } }
footer.site-footer h4 { color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; }
footer.site-footer ul li { margin-bottom: 0.75rem; }
footer.site-footer a { color: var(--slate-400); transition: color 150ms; font-size: 0.9375rem; }
footer.site-footer a:hover { color: var(--teal-300); }
footer.site-footer p { font-size: 0.9375rem; color: var(--slate-400); line-height: 1.75; margin-bottom: 1.25rem; }
.social { display: flex; gap: 0.5rem; }
.social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    transition: background 200ms, color 200ms;
}
.social a:hover { background: var(--teal-600); color: #fff; }
.contact-list li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; color: var(--slate-400); }
.contact-list li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--teal-400); flex-shrink: 0; }
.footer-foot {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1.5rem 0;
    margin-top: 3.5rem;
    font-size: 0.8125rem;
    color: var(--slate-500);
}
.footer-foot .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- 14. WhatsApp chat widget --------------------------------- */
.wa-widget {
    position: fixed; right: 1.25rem; bottom: 1.25rem;
    z-index: 60;
    font-family: var(--font-sans);
}

/* The floating button */
.wa-fab {
    position: relative;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    background: #25d366;
    color: #fff; border-radius: 50%;
    box-shadow: 0 10px 30px -10px rgba(37,211,102,0.6);
    animation: wa-pulse 2.2s ease-in-out infinite;
    cursor: pointer;
    border: 0;
    transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.wa-fab:hover { transform: scale(1.05); }
.wa-fab:active { transform: scale(0.98); }
.wa-fab svg { fill: currentColor; }
.wa-fab__icon { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 180ms, transform 180ms; }
.wa-fab__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.wa-widget.is-open .wa-fab { animation: none; }
.wa-widget.is-open .wa-fab__icon--chat { opacity: 0; transform: rotate(90deg) scale(0.6); }
.wa-widget.is-open .wa-fab__icon--close{ opacity: 1; transform: rotate(0) scale(1); }

@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55), 0 10px 30px -10px rgba(37,211,102,0.4); }
    50%      { box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 10px 30px -10px rgba(37,211,102,0.4); }
}
@media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } }

/* The slide-up panel */
.wa-panel {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 2.5rem);
    max-height: min(560px, calc(100vh - 8rem));
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -10px rgba(0,0,0,0.25), 0 10px 24px -8px rgba(0,0,0,0.12);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.16,1,0.3,1), transform 220ms cubic-bezier(0.16,1,0.3,1);
}
.wa-widget.is-open .wa-panel {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

.wa-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 14px 16px;
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
}
.wa-panel__id { display: flex; align-items: center; gap: 10px; }
.wa-panel__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: grid; place-items: center;
    color: #fff;
}
.wa-panel__avatar svg { width: 22px; height: 22px; fill: currentColor; }
.wa-panel__name   { font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.wa-panel__status { font-size: 0.75rem; opacity: 0.9; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wa-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #b5ff7a;
    box-shadow: 0 0 0 2px rgba(181,255,122,0.25);
    animation: wa-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes wa-dot-pulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

.wa-panel__close {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 50%;
    transition: background 150ms;
}
.wa-panel__close:hover { background: rgba(255,255,255,0.28); }

.wa-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    /* WhatsApp-esque chat pattern */
    background:
        radial-gradient(circle at 10% 10%, rgba(37,211,102,0.03), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(37,211,102,0.04), transparent 40%),
        #f7f5f3;
}
.wa-bubble {
    padding: 10px 14px;
    background: #fff;
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    max-width: 85%;
    margin-bottom: 14px;
    position: relative;
}
.wa-bubble::before {
    content: '';
    position: absolute;
    top: 0; left: -8px;
    border: 8px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
}
.wa-bubble p { font-size: 0.875rem; line-height: 1.55; color: var(--slate-800); }

.wa-quick {
    display: flex; flex-direction: column; gap: 8px;
}
.wa-quick li { list-style: none; }
.wa-quick a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    font-size: 0.8125rem; font-weight: 500;
    color: var(--slate-800);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: all 160ms cubic-bezier(0.16,1,0.3,1);
}
.wa-quick a span { flex: 1; }
.wa-quick a svg {
    color: #25d366; flex-shrink: 0;
    transition: transform 160ms;
}
.wa-quick a:hover {
    border-color: #25d366; color: #075e54;
    box-shadow: 0 4px 10px -2px rgba(37,211,102,0.18);
    transform: translateY(-1px);
}
.wa-quick a:hover svg { transform: translateX(3px); }

.wa-panel__foot {
    padding: 12px 16px 14px;
    background: #fff;
    border-top: 1px solid var(--slate-100);
}
.wa-panel__foot .btn-whatsapp { gap: 8px; }
.wa-panel__legal {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 0.6875rem;
    color: var(--slate-500);
}

/* Mobile tweaks — keep the panel usable on 320px screens */
@media (max-width: 480px) {
    .wa-widget { right: 1rem; bottom: 1rem; }
    .wa-fab { width: 54px; height: 54px; }
    .wa-panel {
        width: calc(100vw - 2rem);
        max-height: min(560px, calc(100vh - 6rem));
    }
}

/* ---------- 15. Utilities --------------------------------------------- */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.hidden-md { display: none; }
@media (min-width: 768px) { .hidden-md { display: initial; } }

/* ---------- 16. Social (Instagram + Facebook embeds) ------------------ */
.social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px)  { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .social-grid { grid-template-columns: repeat(3, 1fr); } }
.social-tile {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 500px;
    transition: transform 250ms cubic-bezier(0.16,1,0.3,1), box-shadow 250ms;
}
.social-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.social-tile iframe { width: 100%; min-height: 500px; border: 0; display: block; background: #fff; }

.facebook-wrap {
    display: flex; justify-content: center;
    padding: 0 1rem;
}
.facebook-wrap iframe {
    max-width: 100%;
    width: 500px; height: 720px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
}

/* ---------- 17. Animations --------------------------------------------- */
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal-up 600ms cubic-bezier(0.16,1,0.3,1) both; }
.reveal-d1 { animation-delay: 0.05s; }
.reveal-d2 { animation-delay: 0.1s; }
.reveal-d3 { animation-delay: 0.15s; }
.reveal-d4 { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* ---------- 18. Mobile polish (≤ 640px global) ------------------------ */
@media (max-width: 640px) {
    body { font-size: 15px; }
    .section, .section-lg { padding: 2.5rem 0; }
    .section-head { margin-bottom: 2rem; }
    .container, .container-narrow { padding: 0 1.125rem; }

    /* Hero shrinks less padding + smaller type so the image stays hero-sized */
    .hero { padding: 2.75rem 0 2rem; }
    .hero-grid { min-height: auto; gap: 1.5rem; }
    .hero-description { margin: 1rem 0 1.5rem; font-size: 1rem; }
    .hero-ctas { gap: 0.5rem; margin-bottom: 1.5rem; }
    .hero-ctas .btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
    .hero-trust { gap: 0.75rem 1.25rem; font-size: 0.8125rem; }
    .stats-strip { padding: 1.75rem 0; }
    .stats-strip-grid { gap: 1.25rem; }

    /* Service / USP / testimonial cards */
    .service-card, .usp-card, .testimonial, .branch-card, .doctor-card { padding: 1.25rem; }
    .card { padding: 1.25rem; }

    /* Forms: every field full-width, slightly larger tap targets */
    .form-grid { grid-template-columns: 1fr; gap: 0.875rem; }
    .input, .select, .textarea { padding: 0.875rem 0.875rem; font-size: 1rem; }
    .btn { padding: 0.875rem 1.25rem; min-height: 44px; }
    .btn-sm { min-height: 40px; padding: 0.625rem 1rem; }

    /* FAQ */
    .faq summary { padding: 1rem 1.125rem; font-size: 0.9375rem; }
    .faq .faq-body { padding: 0 1.125rem 1rem; font-size: 0.875rem; }

    /* CTA band */
    .cta-band { margin: 2rem 1rem; padding: 2.5rem 1.25rem; }
    .cta-band .btns .btn { flex: 1 1 100%; }

    /* Branch card: map edge-to-edge on mobile */
    .branch-card .map { margin: -1.25rem -1.25rem 1rem; aspect-ratio: 4/3; }

    /* Social tiles */
    .social-tile { min-height: 560px; }
    .social-tile iframe { min-height: 560px; }
    .facebook-wrap iframe { width: 100%; height: 640px; }

    /* Header CTA chip on the topbar stays full width for easy tap */
    .topbar { padding: 0.5rem 0; font-size: 0.75rem; }
    .topbar .container { flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
    .topbar-info { display: none; } /* collapse info; phone pill is what matters */

    /* Page hero compression */
    .page-hero { padding: 2rem 0 1.5rem; }

    /* WhatsApp button slightly smaller */
    .wa-fab { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
    .wa-fab svg { width: 26px; height: 26px; }

    /* Service detail pricing sidebar slides below instead of side-by-side */
    .hero-grid { grid-template-columns: 1fr !important; }
}

/* Very-small phones (≤ 380px) — extra-cautious spacing */
@media (max-width: 380px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }
    .hero-ctas .btn { flex: 1 1 100%; }
    .mini-stats { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
    .quick-grid { grid-template-columns: 1fr 1fr; gap: 0.25rem; }
    .logo-img { height: 36px; }
    header.site-header .container { height: 60px; }
}

/* Prevent any accidental horizontal overflow anywhere on the site */
html, body { overflow-x: hidden; }
img, iframe, video, svg { max-width: 100%; }

/* ---------- 19. Print -------------------------------------------------- */
@media print {
    .wa-fab, header.site-header, footer.site-footer, .topbar, .cta-band { display: none; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}