/* Brand typography (Omega Dental Brand Guide 2026):
   - Nunito Sans 700/800 -> H1/H2 (free Gotham alternative, brand-approved)
   - Lato 400/700        -> eyebrows, captions, metadata
   - Poppins 300-800     -> H3, body, UI (kept as primary UI typeface) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ── Doctor Modal ──────────────────────────────────────────────────────── */


































/* ── Tech Modal (reuses treatment modal styles) ────────────────────────── */














/* ── Treatment Modal ───────────────────────────────────────────────────── */


































.tmodal-card{
    background: rgba(255,255,255,0.32);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tmodal-card:hover{
    background: rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

.tmodal-card strong{
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e1b1e;
    letter-spacing: -0.01em;
}

.tmodal-card span{
    font-size: 0.8rem;
    color: rgba(30,27,30,0.7);
    line-height: 1.55;
}

.tmodal-card-link{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tmodal-card span.tmodal-go{
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #00807c;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.tmodal-card-link:hover .tmodal-go{ gap: 8px; }









/* ── Booking Modal ─────────────────────────────────────────────────────── */










































/* Custom select wrapper */




/* ── Date + time picker (real Orion availability) ──────────────────── */

.bk-picker.bk-field-err{
    box-shadow: 0 0 0 2px rgba(220,50,50,0.5);
}
/* Calendar */








.bk-day{
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.13s ease;
}
.bk-day:hover:not(:disabled){
    background: rgba(0,173,167,0.12);
}
.bk-day-pad{ pointer-events: none; }
.bk-day-off{
    color: rgba(0,0,0,0.25);
    cursor: default;
}
.bk-day-sel,
.bk-day-sel:hover{
    background: var(--teal, #00ADA7) !important;
    color: #fff !important;
    font-weight: 700;
}
/* Times column */




.bk-time-slot{
    padding: 8px 4px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 9px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.13s ease;
    text-align: center;
}
.bk-time-slot:hover{
    background: rgba(0,173,167,0.12);
    border-color: rgba(0,173,167,0.4);
}
.bk-time-sel,
.bk-time-sel:hover{
    background: var(--teal, #00ADA7);
    border-color: var(--teal, #00ADA7);
    color: #fff;
}
.bk-times-none{
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: rgba(0,0,0,0.55);
    padding: 8px 2px;
}


/* Validation states */
.bk-field-err{
    border-color: rgba(220,50,50,0.5) !important;
    background: rgba(255,220,220,0.3) !important;
}
@keyframes bkShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.bk-shake{ animation: bkShake 0.45s ease; }







*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    scroll-behavior: smooth;
}

:root{
    color-scheme: light;
    /* ── Brand palette (Omega Dental Brand Guide 2026) ─────────────────── */
    /* Verified against the actual brand-guide PDF. Earlier values for
       logo-grey, logo-silver, tantalizing-teal, lime-granita, springtime,
       and slate were guesses that didn't match the guide. Corrected here. */
    /* Primary teal family */
    --omega-teal:         #00ADA7;   /* Brand primary */
    --tantalizing-teal:   #87DCCE;   /* Pastel teal - lighter, separate token */
    --logo-grey:          #9BA3AC;   /* From logo mark */
    --logo-silver:        #C8CDD2;   /* From logo mark */
    /* Secondary / supporting */
    --julep:              #57AA80;
    --green-vibes:        #D4E7C3;
    --lime-granita:       #DCE1B8;   /* Muted sage, not bright lime */
    --springtime:         #E9E5B3;   /* Pale cream, not bright spring-green */
    --pineapple-cream:    #F2EAC3;
    --daffodil:           #FAD97A;
    /* Neutrals */
    --charcoal:           #2E2E2E;
    --slate:              #4A5A66;   /* Cool blue-tinged grey */
    --website-bg:         #F6F5F0;

    /* ── Compatibility aliases for the brand teal ─────────────────────────
       --accent and --background are aliases of --omega-teal kept for back-
       compat with rules that pre-dated the brand-token rename. --accent-dark
       was removed (it was an invented #006B66 not in the brand palette);
       its uses migrated to --charcoal for text/bg or --omega-teal for
       decorative accents. */
    --accent:       #00ADA7;
    --accent-light: #00c4be;
    --accent-rgb:   0, 173, 167;
    --background:   #00ADA7;
    --text:         #1e1b1e;
    --bg-page:    #F6F5F0;   /* brand Website BG (was #F0EAE2) */
    --bg-card:    #FDFCFA;
    --bg-subtle:  #FAF8F5;
    --bg-input:   #F5F2EE;

    /* ── Semantic button tokens (Teal + Charcoal per brand guide) ──────── */
    /* July 2026 a11y audit: keep Eli's white-on-teal look but on a darker
       accessible teal. White on #007771 = 5.42:1 (AA pass), hover #006B66
       = 6.37:1. Text-on-white teal uses --teal-text below. */
    --btn-bg:        #007771;
    --btn-bg-hover:  #006B66;
    --btn-text:      #fff;
    /* Teal dark enough to use as TEXT on white/off-white surfaces
       (5.42:1 on #fff, 4.96:1 on #F6F5F0, 5.28:1 on #FDFCFA). */
    --teal-text:     #007771;

    /* ── Typography (Omega Dental Brand Guide 2026) ────────────────────── */
    --font-display: 'Nunito', sans-serif;   /* H1, H2 */
    --font-body:    'Nunito', sans-serif;                  /* H3, body, UI */
    --font-caption: 'Lato', 'Nunito', sans-serif;          /* eyebrows, meta */
}

/* ── Global type cascade ────────────────────────────────────────────────
   Set font-family + base weight on the element level so every existing
   per-class size/color rule throughout the file inherits the right brand
   typeface without us having to touch each one. Per-class font-size,
   color, letter-spacing values still apply via specificity. */
h1{
    font-family: var(--font-display);
    font-weight: 800;   /* Nunito Sans ExtraBold */
    line-height: 1.1;
    letter-spacing: -0.02em;
}
h2{
    font-family: var(--font-display);
    font-weight: 700;   /* Nunito Sans Bold */
    line-height: 1.15;
    letter-spacing: -0.01em;
}
h3, h4, h5, h6{
    font-family: var(--font-body);
    font-weight: 600;   /* Poppins SemiBold */
}
body{
    font-family: var(--font-body);
    line-height: 1.8;   /* Brand default body line-height */
    color: var(--text);
}
/* Eyebrows / section labels / small captions per brand: Lato.
   Letter-spacing intentionally left to per-class rules to preserve the
   existing visual rhythm; only the typeface is brand-aligned here. */
.sec-label,
.sec-label-light,
.hero-stat small,
.eyebrow,
.caption,
.meta{
    font-family: var(--font-caption);
}







html,
body{
    width: 100%;
    height: 100%;
}



/* THE BUG.
   .section-wrap had NO width declaration anywhere in style.css. Because
   it's a child of #container (display: flex; align-items: center) it
   was getting shrunk to its content width - so on a 1440px viewport it
   ended up ~1411px wide and centered, leaving ~14px gaps on either
   side where the body's bg-card (lighter) leaked through. EVERY section
   wrapped in <div class="section-wrap"> showed the same pattern.
   Locking width: 100% restores full-bleed for every wrapped section. */


/* ── Hero Section ────────────────────────────────────────────────────────── */


/* Outer 2-col grid: open value-prop text left, specials carousel right */


/* ── Left column ────────────────────────────────────────────────────────── */


/* Slideshow box */





/* Slide 1 ships as a real <img> (LCP discovery in every browser - Safari
   and Firefox don't honor preload priority on CSS backgrounds). The scrim
   (::after) and .hero-offer still paint above it in tree order. */


/* Offer overlay - the big banner now sells specials. Dark scrim at the
   bottom keeps the white headline/CTA legible over any photo. */











/* Slide dots - bottom centre of the slideshow box */

/* Slide dots: visible dot stays tiny but the button hit area is 24x24
   (WCAG 2.5.5 touch target). The visible dot is rendered as a centered
   ::before pseudo-element inside a transparent 24x24 button. */





/* CTA card - below slideshow */











.hero-stats{
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    border-top: 1px solid rgba(30, 27, 30, 0.07);
    border-bottom: 1px solid rgba(30, 27, 30, 0.07);
}
.hero-stat{ display: flex; flex-direction: column; gap: 2px; }
.hero-stat span{
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e1b1e;
    line-height: 1;
}
.hero-stat small{
    font-size: 0.6rem;
    color: rgba(30, 27, 30, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hero-stat-div{
    width: 1px;
    height: 28px;
    background: rgba(30, 27, 30, 0.1);
    margin: 0 24px;
}



.hero-book-btn{
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}
.hero-book-btn:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }

.cta-phone{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e1b1e;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    /* opacity:0.6 was compositing dark text down to #777576 (4.46:1 - barely
       fails AA). 0.8 pushes it to ~5.5:1 and visually nearly identical. */
    opacity: 0.8;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.cta-phone:hover{ opacity: 1; }
.cta-phone i{ color: var(--charcoal); }

/* ── Right column: wrapper for insurance + specials carousel ─────────────── */


/* ── Right column: Insurance Card ───────────────────────────────────────── */


/* Teal accent at very top - brand: Omega Teal -> Julep (per 2026 brand
   "Julep + Website BG" pairing for accents on cards on the site bg) */


/* ── Insurance Chat Flow ─────────────────────────────────────────────────── */

/* Top bar */




@keyframes insOnlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}




/* Progress bar */



/* Chat messages scroll area */


/* Bot bubble row */
.ins-bubble-row{
    display: flex;
    align-items: flex-end;
    gap: 7px;
    animation: insChatIn 0.22s ease both;
}
.ins-bubble-icon{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 10px;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.ins-bubble-bot{
    background: var(--bg-subtle);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px 14px 14px 3px;
    padding: 9px 13px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #1e1b1e;
    max-width: calc(100% - 32px);
}
.ins-bubble-bot.match{
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.3);
    color: #134d25;
}
.ins-bubble-bot.no-match{
    background: rgba(234,179,8,0.07);
    border-color: rgba(234,179,8,0.25);
}

/* User echo bubble */
.ins-bubble-user{
    align-self: flex-end;
    background: var(--charcoal);
    color: #fff;
    border-radius: 14px 14px 3px 14px;
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 500;
    max-width: 82%;
    animation: insChatIn 0.18s ease both;
}

/* Typing indicator */
.ins-typing-row{
    display: flex;
    align-items: flex-end;
    gap: 7px;
    animation: insChatIn 0.18s ease both;
}
.ins-typing-dots{
    background: var(--bg-subtle);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px 14px 14px 3px;
    padding: 10px 14px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.ins-typing-dots span{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(30,27,30,0.2);
    animation: insTypingBounce 1.1s infinite ease-in-out;
}
.ins-typing-dots span:nth-child(2){ animation-delay: 0.18s; }
.ins-typing-dots span:nth-child(3){ animation-delay: 0.36s; }

@keyframes insTypingBounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.3; }
    30%            { transform: translateY(-5px); opacity: 1;   }
}
@keyframes insChatIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Response area */


/* Chip buttons (treatment / quick insurers) */
.ins-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ins-chip-btn{
    background: var(--bg-input);
    border: 1.5px solid rgba(0,0,0,0.09);
    border-radius: 20px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: all 0.14s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ins-chip-btn:hover{
    background: rgba(var(--accent-rgb), 0.09);
    border-color: var(--accent);
    color: var(--charcoal);
}
.ins-chip-btn.full-width{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 12px 16px;
    font-size: 13px;
}

/* Text inputs */
.ins-chat-input-row{
    display: flex;
    gap: 7px;
    align-items: center;
}
.ins-chat-input-row input{
    flex: 1;
    padding: 9px 14px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 22px;
    font-size: 13px;
    font-family: 'Nunito', sans-serif;
    color: #1e1b1e;
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, background 0.18s;
    min-width: 0;
}
.ins-chat-input-row input:focus{
    border-color: var(--accent);
    background: #fff;
}
.ins-chat-input-row input.input-error{ border-color: #e05050; }
.ins-chat-send-btn{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    border: none;
    color: var(--btn-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.14s;
}
.ins-chat-send-btn:hover{ background: var(--btn-bg-hover); }

.ins-chat-skip{
    display: block;
    text-align: center;
    font-size: 11px;
    color: rgba(30,27,30,0.32);
    cursor: pointer;
    margin-top: 7px;
    transition: color 0.14s;
}
.ins-chat-skip:hover{ color: rgba(30,27,30,0.7); }

/* Insurer search inside chat - inline, no absolute dropdown */
.ins-chat-search-wrap{
    position: relative;
    margin-bottom: 8px;
}
.ins-chat-search-icon{
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(30,27,30,0.7);
    font-size: 13px;
    pointer-events: none;
}
.ins-chat-search-input{
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px 9px 34px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 22px;
    font-size: 12.5px;
    font-family: 'Nunito', sans-serif;
    color: #1e1b1e;
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, background 0.18s;
}
.ins-chat-search-input:focus{
    border-color: var(--accent);
    background: #fff;
}

/* Result CTAs */
.ins-chat-result-cta{
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ins-chat-book-btn{
    width: 100%;
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: background 0.14s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ins-chat-book-btn:hover{ background: var(--btn-bg-hover); }
.ins-chat-browse-btn{
    background: transparent;
    border: none;
    color: rgba(30,27,30,0.7);
    font-size: 11px;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    text-align: center;
    padding: 3px;
    transition: color 0.14s;
}
.ins-chat-browse-btn:hover{ color: rgba(30,27,30,0.7); }

/* Slot picker buttons */
.ins-slots-wrap{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ins-slot-btn{
    width: 100%;
    background: var(--bg-input);
    border: 1.5px solid rgba(0,0,0,0.09);
    border-radius: 13px;
    padding: 10px 13px;
    text-align: left;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: all 0.14s;
    box-sizing: border-box;
}
.ins-slot-btn:hover{
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
}
.ins-slot-icon{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 13px;
    flex-shrink: 0;
}
.ins-slot-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ins-slot-date{
    font-size: 12.5px;
    font-weight: 700;
    color: #1e1b1e;
    line-height: 1;
}
.ins-slot-meta{
    font-size: 10.5px;
    color: rgba(30,27,30,0.42);
}
.ins-slot-arrow{
    margin-left: auto;
    color: rgba(30,27,30,0.7);
    font-size: 14px;
    transition: transform 0.14s, color 0.14s;
}
.ins-slot-btn:hover .ins-slot-arrow{
    transform: translateX(2px);
    color: var(--charcoal);
}

/* Confirmed state */
.ins-confirmed-wrap{
    background: rgba(34,197,94,0.08);
    border: 1.5px solid rgba(34,197,94,0.25);
    border-radius: 14px;
    padding: 14px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.ins-confirmed-icon{
    font-size: 26px;
    color: #22c55e;
    line-height: 1;
}
.ins-confirmed-title{
    font-size: 12.5px;
    font-weight: 700;
    color: #134d25;
}
.ins-confirmed-sub{
    font-size: 11px;
    color: rgba(30,27,30,0.7);
    line-height: 1.4;
}

.ins-card-body{
    padding: 20px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ins-body-label{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(30, 27, 30, 0.7);
    margin: 0;
}

.ins-payers{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ins-payer-btn{
    background: var(--bg-input);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    text-align: left;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ins-payer-btn::before{
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
    transition: all 0.18s;
}
.ins-payer-btn:hover{
    background: rgba(var(--accent-rgb), 0.06);
    border-color: var(--accent);
    color: var(--charcoal);
}
.ins-payer-btn:hover::before{
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px #fff;
}
.ins-payer-btn.selected{
    background: rgba(var(--accent-rgb), 0.08);
    border-color: var(--accent);
    color: var(--charcoal);
}
.ins-payer-btn.selected::before{
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px #fff;
}

.ins-divider-row{
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(30, 27, 30, 0.3);
    font-size: 11px;
    font-weight: 500;
}
.ins-divider-row::before,
.ins-divider-row::after{
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.08);
}

.ins-search-row{
    position: relative;
    display: flex;
    align-items: center;
}
.ins-search-icon{
    position: absolute;
    left: 14px;
    color: rgba(30,27,30,0.7);
    font-size: 15px;
    pointer-events: none;
}
.ins-search-row input{
    width: 100%;
    padding: 11px 36px 11px 38px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #1e1b1e;
    background: var(--bg-input);
    outline: none;
    font-family: 'Nunito', sans-serif;
    transition: border-color 0.2s, background 0.2s;
}
.ins-search-row input:focus{
    border-color: var(--accent);
    background: #fff;
}

/* Dropdown caret */
.ins-dd-caret{
    position: absolute;
    right: 13px;
    color: rgba(30,27,30,0.7);
    font-size: 16px;
    pointer-events: none;
    transition: transform 0.2s ease;
}
.ins-dd-caret.open{ transform: rotate(180deg); }

/* Dropdown wrap + list */
.ins-dropdown-wrap{ position: relative; }

.ins-dropdown-list{
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.13);
    max-height: 224px;
    overflow-y: auto;
    z-index: 200;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.ins-dropdown-list.open{ display: block; }

.ins-dd-option{
    padding: 10px 16px;
    font-size: 13px;
    font-family: 'Nunito', sans-serif;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.12s, color 0.12s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ins-dd-option:last-child{ border-bottom: none; }
.ins-dd-option::before{
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.25);
    flex-shrink: 0;
    transition: background 0.12s;
}
.ins-dd-option:hover,
.ins-dd-option.focused{
    background: rgba(var(--accent-rgb), 0.07);
    color: var(--charcoal);
}
.ins-dd-option:hover::before,
.ins-dd-option.focused::before{ background: var(--accent); }

.ins-dd-empty{
    padding: 16px;
    font-size: 13px;
    /* Was #999 = 2.85:1 (fails AA at 13px); #5a5a5a = 7:1 AAA. */
    color: #5a5a5a;
    font-style: italic;
    text-align: center;
}
.ins-dd-empty span{
    color: var(--teal-text);
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
}

/* Result state - replaces the body content */
.ins-result{
    margin: 0 24px;
    padding: 18px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
}
.ins-result.in-network{
    background: rgba(var(--accent-rgb), 0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    color: #006e6a;
}
.ins-result.out-of-network{
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.08);
    color: #555;
}
.ins-result strong{ display: block; font-size: 14px; margin-bottom: 6px; }

.ins-result-cta{
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: background 0.2s;
    text-align: center;
}
.ins-result-cta:hover{ background: var(--btn-bg-hover); }

.ins-reset-btn{
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    background: transparent;
    /* Was #aaa = 2.32:1 (fails AA at 11px); #5a5a5a = 7:1 AAA. */
    color: #5a5a5a;
    border: none;
    font-size: 11px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    transition: color 0.15s;
}
.ins-reset-btn:hover{ color: #555; }







/* ── Specials carousel - fills the right column below the insurance card ─ */
#hero-specials-card{
    /* basis: 0 (not auto) so this grows purely from the flex grow ratio,
       absorbing exactly the leftover space inside #hero-right. No
       intrinsic min-height - it will always size to fit alongside the
       insurance card and lock the column bottom in place. */
    flex: 1 1 0;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(38,22,8,0.07), 0 1px 4px rgba(38,22,8,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
#hero-specials-card::before{
    content: '';
    display: block;
    height: 3px;
    /* Brand: Teal -> Julep gradient adds palette variety on this
       card-in-card composition (per 2026 brand guide: Julep is the
       supporting green used for accents on cards over the site bg). */
    background: linear-gradient(90deg, var(--omega-teal) 0%, var(--julep) 100%);
    flex-shrink: 0;
}

.specials-header{
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.specials-eyebrow{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(30,27,30,0.7);
}
.specials-pulse{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Brand: Daffodil for promotional / seasonal accents (per 2026 brand
       guide). Yellow pulse reads as "fresh offer" without competing with
       the teal CTAs nearby. Charcoal hairline ring meets WCAG 1.4.11
       (non-text contrast 3:1) - Daffodil alone is too faint on the white
       card (1.34:1) to be visible without the outline. */
    background: var(--daffodil);
    border: 1px solid rgba(46, 46, 46, 0.85);
    box-sizing: border-box;
    box-shadow: 0 0 0 0 rgba(250, 217, 122, 0.55);
    animation: specialsPulse 1.8s ease-out infinite;
}
@keyframes specialsPulse {
    0%   { box-shadow: 0 0 0 0 rgba(250, 217, 122, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(250, 217, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 217, 122, 0); }
}
.specials-controls{
    display: flex;
    gap: 4px;
}
.specials-arrow{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.08);
    background: transparent;
    color: rgba(30,27,30,0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    transition: all 0.15s ease;
    /* Larger touch target on phones */
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px){
    .specials-arrow{ width: 36px; height: 36px; font-size: 16px; }
}
.specials-arrow:hover{
    color: var(--charcoal);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.06);
}

/* Track holds all special cards stacked at the same position; we toggle the
   .active class to fade the right one in. */
.specials-track{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
/*
 * Each card is an absolutely-positioned overlay so they can fade through
 * the same space. Layout: a square image on the left, content stack on
 * the right (tag, headline, sub, CTA). Width-matched to the insurance
 * card above because they share the same #hero-right column.
 */
.special-card{
    position: absolute;
    inset: 0;
    padding: 14px 16px 16px;
    display: flex;
    align-items: stretch;
    gap: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.special-card.active{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.special-image{
    width: 110px;
    flex-shrink: 0;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-color: rgba(var(--accent-rgb), 0.08);
    box-shadow: 0 2px 8px rgba(38,22,8,0.08);
    /* Soft inner highlight so the photo doesn't feel pasted on */
    position: relative;
}
.special-image::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.06);
    pointer-events: none;
}
.special-body{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.special-tag{
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    /* --accent-dark for AA at 9.5px small text */
    color: var(--charcoal);
}
.special-headline{
    font-size: 15px;
    font-weight: 700;
    color: #1e1b1e;
    line-height: 1.22;
}
.special-sub{
    font-size: 11.5px;
    color: rgba(30,27,30,0.7);
    line-height: 1.4;
}
.special-cta{
    align-self: flex-start;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.08);
    /* AA: --accent-dark on tinted-teal background reads cleanly */
    color: var(--charcoal);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.special-cta:hover{
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    color: var(--btn-text);
    border-color: var(--btn-bg);
}
.special-cta i{ font-size: 12px; }

/* Dots - bigger hit area while the visible dot stays small */
.specials-dots{
    display: flex;
    justify-content: center;
    /* Was 4px - too tight; Lighthouse flagged adjacent touch targets as
       partially obscuring each other. 12px clears WCAG 2.5.5 spacing. */
    gap: 12px;
    /* Top padding was 4px - the carousel card above visually crowded
       the dots by ~3.5px (Lighthouse flagged the dots as "partially
       obscured" — 24x20.5 effective). 12px gives the dots clean
       vertical clearance. */
    padding: 12px 0 12px;
    flex-shrink: 0;
}
.specials-dot{
    /* Hit area must be ≥ 24x24 (WCAG 2.5.5). The visible dot is drawn
       via ::before so the clickable area is much larger than the 6px
       pip you see. (Was 18x18 — failed Lighthouse target-size audit.) */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: none;
}
.specials-dot::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}
.specials-dot:hover::before{ background: rgba(0,0,0,0.35); }
.specials-dot.active::before{
    background: var(--teal-text);
    width: 18px;
    border-radius: 3px;
}

/* Mobile: image shrinks, padding tightens */
@media (max-width: 768px){
    .special-card{ padding: 12px 14px 14px; gap: 12px; }
    .special-image{ width: 88px; }
    .special-headline{ font-size: 14px; }
    .special-sub{ font-size: 11px; }
}

/* Logo */
.nav-logo{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.nav-logo img{
    height: 36px;
    width: auto;
    
}

/* Centre links */
.nav-links{
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}
.nav-link{
    font-size: 13px;
    font-weight: 500;
    /* Bumped from rgba(30,27,30,0.7) (4.46:1, just fails AA) to 0.75
       (~7:1, clean pass). Visually almost identical, screen readers
       and ADA happy. */
    color: rgba(30,27,30,0.75);
    text-decoration: none;
    padding: 6px 13px;
    border-radius: 6px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
}
.nav-link:hover{
    color: var(--charcoal);
    background: rgba(var(--accent-rgb), 0.06);
}

/* Right group */
.nav-right{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-phone{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(30,27,30,0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s;
}
.nav-phone i{ color: var(--charcoal); font-size: 14px; }
.nav-phone:hover{ color: var(--charcoal); }

.nav-cta{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 12px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    transition: background 0.18s, transform 0.15s;
}
.nav-cta:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }

.nav-menu-btn{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(30,27,30,0.05);
    border: 1px solid rgba(30,27,30,0.08);
    color: rgba(30,27,30,0.7);
    font-size: 17px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.18s;
    /* Mobile-only: the desktop nav has its own inline links, so the
       hamburger is hidden by default and only revealed at <=768px. */
    display: none;
}
.nav-menu-btn:hover{ background: rgba(30,27,30,0.09); }

.lang-toggle{
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(30,27,30,0.06);
    border: 1px solid rgba(30,27,30,0.1);
    border-radius: 50px;
    padding: 4px;
    cursor: pointer;
    user-select: none;
}
.lang-pill{
    position: absolute;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 50px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.lang-toggle.es .lang-pill{
    transform: translateX(100%);
}
.lang-opt{
    position: relative;
    z-index: 1;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    /* Bumped from 0.45 (2.76:1 fails) to 0.70 (~6:1 passes AA). */
    color: rgba(30,27,30,0.70);
    transition: color 0.3s ease;
    min-width: 36px;
    text-align: center;
}
.lang-toggle:not(.es) #lang-en,
.lang-toggle.es #lang-es{
    color: #1e1b1e;
}

#rightnav1{
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid var(--text);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
}

#rightnav1:hover{
    background-color: var(--text);
    color: var(--background);
}


#homeimg{
    position: absolute;
    width: 460px;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
    z-index: 2;
}

#hometext{
    position: relative;
    z-index: 2;
}

/* TREATMENTS */
























/* Entrance reveal, fail-open by construction: the HIDDEN state is a class
   that JS REMOVES when the grid scrolls into view. If the animation clock
   is throttled (iOS Low Power Mode) the card still lands on its visible
   base state instantly; if JS never runs, the class is never added and
   nothing is ever hidden. */
.treatment-card{
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.treatment-card.reveal-pending{
    opacity: 0;
    transform: translateY(40px) scale(0.96);
}

.treatment-card{
    background: var(--bg-subtle);
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
    border-radius: 24px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.treatment-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}











.treatment-card h3{
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e1b1e;
    line-height: 1.2;
    padding-right: 40px;
}

.treatment-card p{
    font-size: 0.82rem;
    color: rgba(0,0,0,0.7);
    line-height: 1.6;
    flex: 1;
}







.sec-label{
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* --accent-dark passes AA at 12px small text */
    color: var(--charcoal);
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sec-label::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.stat-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 95%;
}

.stat-card{
    background: rgba(175, 201, 200, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
}

.stat-card--dark{
    background: rgba(30, 30, 30, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

.stat-card--dark .stat-num,
.stat-card--dark .stat-label{
    color: #fff;
}

.stat-num{
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label{
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(0,0,0,0.7);
}


.secdiv{
    display: flex;
    align-items: start;
    justify-content: space-evenly;
    flex-direction: column;
    margin: 0px 100px;
    color: #3a3a3a;
}

.secdiv:nth-child(1){
    width: 60%;
    height: 100%;
    padding: 30px 0px;
}

.secdiv:nth-child(2){
    width: 40%;
    height: 100%;
}

.secimgdiv{
    width: 95%;
    height: 90%;
    border-radius: 40px;
    overflow: hidden;
}

.secdiv:nth-child(1) h1, .secdiv:nth-child(1) h2{
    font-size: 50px;
    line-height: 1.1;
}

.secimgdiv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.secimgdiv img:hover{
    transform: scale(1.1);
}

.doubleimg{
    display: flex;
}

.roundimgdiv{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
}

.roundimgdiv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.roundimgdiv:nth-child(1){ z-index: 5; }
.roundimgdiv:nth-child(2){ z-index: 4; margin-left: -15px; }
.roundimgdiv:nth-child(3){ z-index: 3; margin-left: -15px; }
.roundimgdiv:nth-child(4){ z-index: 2; margin-left: -15px; }
.roundimgdiv:nth-child(5){ z-index: 1; margin-left: -15px; }
.roundimgdiv:nth-child(6){ z-index: 0; margin-left: -15px; }

.secdiv button{
    padding: 15px 40px;
    border-radius: 50px;
    color: #3a3a3a;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    border: 2px solid #3a3a3a;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.secdiv button:hover{
    color: #fff;
    background-color: #3a3a3a;
}

/* THIRD PAGE - SERVICES */
/* ── Meet the Team ─────────────────────────────────────────────────────── */





























.team-card-photo-placeholder{
    font-size: 4rem;
    color: rgba(30,27,30,0.7);
}









/* FOURTH PAGE */
/* ── Technology Section ─────────────────────────────────────────────────── */




.tech-card{
    background: var(--bg-card);
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.tech-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}

.tech-card-photo{
    width: 100%;
    height: 160px;
    overflow: hidden;
    flex-shrink: 0;
}

.tech-card-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.tech-card:hover .tech-card-photo img{
    transform: scale(1.05);
}

.tech-card-body{
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.tech-card-icon{
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #1e1b1e;
    margin-bottom: 4px;
}

.tech-card--no-photo{
    padding: 28px 24px;
    gap: 12px;
}

.tech-card--no-photo .tech-card-body{
    padding: 0;
}

.tech-card h3{
    font-size: 1rem;
    font-weight: 700;
    color: #1e1b1e;
    letter-spacing: -0.01em;
}

.tech-card p{
    font-size: 0.8rem;
    color: rgba(30,27,30,0.7);
    line-height: 1.65;
}

/* ── Practice Section ───────────────────────────────────────────────────── */


































/* FIFTH PAGE - REVIEWS */




/* Header */










/* Ticker wrapper - clips overflow and fades edges */


/* Scrolling track */




/* WCAG 2.2.2: moving content needs a pause mechanism. Hover/focus pause
   plus a visible toggle button (.paused set by toggleTicker in app.js). */

.reviews-track.paused,
.ins-ticker-track.paused{
    animation-play-state: paused !important;
}



@keyframes reviewsLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes reviewsRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Individual review card - Brand: Pineapple Cream bg + Teal accents
   (per 2026 brand guide: "testimonial cards"). Cream is warm and inviting
   while the teal avatar/accent ties it back to the primary palette.
   Pineapple Cream on the section's --bg-page is only 1.11:1 luminance
   difference - cards would disappear without a stronger edge.
   Brand-teal border (25% alpha) + deeper warm shadow give clear lift. */




















/* FOOTER CTA */






















/* The legacy slide-out #menu-bar drawer was removed: nothing called its
   opener since the real nav drawer (#nav-drawer) shipped. Markup, JS, and
   styles all retired together. */

/* FOOTER */
footer{
    width: 100%;
    /* Brand: Charcoal #2E2E2E (was off-brand #0a1a19 near-black with
       teal tint - not in the brand palette). Carries the same
       anchor-at-bottom feel while staying brand-strict. */
    background: var(--charcoal);
    padding: 70px 80px 0;
}



/* Brand column */


.footer-logo-mark{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.footer-omega{
    font-size: 36px;
    font-weight: 800;
    color: var(--background);
    line-height: 1;
}

.footer-logo-text{
    display: flex;
    flex-direction: column;
}

.footer-name{
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.footer-specialists{
    font-size: 12px;
    font-weight: 400;
    /* AA on accent-dark footer bg */
    color: rgba(255,255,255,0.78);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}









/* Link columns */








/* Contact column */










/* Bottom bar */










/* ============================================================
   PAWZ WIDGET - Floating intercom
   ============================================================ */

/* Re-enable interaction only on the actual widgets, not the empty
   container space around them. */

/* #pawz-panel already sets pointer-events: none when closed and
   pointer-events: all on .pawz-panel-open, so it manages itself. */





/* Panel */


#pawz-panel.pawz-panel-open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header */


















/* Tabs */




/* Tab label: --accent-dark text for AA at 13px (5.05:1); --accent only on
   the underline (non-text, 3:1 needed - passes via tint). */



/* Tab content */


/* --- CHAT PANE --- */




.pawz-msg-user{ align-self: flex-end; }




.pawz-msg-user .pawz-msg-bubble{ background: var(--charcoal); color: #fff; border-bottom-right-radius: 4px; }








@keyframes pawzBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-6px); }
}

















/* --- ARTICLES PANE --- */


/* Search icon: was #bbb = 1.92:1 (fails 1.4.11); #6b6b6b = 5.74:1. */

















.pawz-article-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}

.pawz-article-item:hover{ background: #f0f5f5; }

.pawz-article-icon{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eaf2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    /* --accent on light-teal tint = 2.45:1 (fails 1.4.11);
       --accent-dark = 4.5:1+ AA on this background. */
    color: var(--charcoal);
    flex-shrink: 0;
}

.pawz-article-title{
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: #1a2a2a;
    line-height: 1.4;
}

/* Arrow icon: #ccc was 1.61:1 (invisible); #6b6b6b = 5.74:1 (AA non-text + text). */
.pawz-article-arrow{ font-size: 18px; color: #6b6b6b; flex-shrink: 0; }

/* "No results" text: #bbb was 1.92:1 (fails AA); #5a5a5a = 7:1 AAA. */
.pawz-no-results{ text-align: center; color: #5a5a5a; font-size: 13px; padding: 32px 0; }

/* Footer bar */


/* Footer logo text: was #999 = 2.85:1 (fails AA); #5a5a5a = 7:1 AAA. */
.pawz-footer-logo{ font-weight: 700; color: #5a5a5a; }
.pawz-footer-logo span{ color: var(--background); }

/* ============================================================
   ARTICLE MODAL
   ============================================================ */




















.article-cat-implants{ background: #e0f0ee; color: #1a5c58; }
.article-cat-orthodontics{ background: #e8e4f8; color: #4a2d8a; }
.article-cat-oral-surgery{ background: #fde8e0; color: #8a3020; }
.article-cat-root-canal{ background: #fef0e0; color: #8a5a10; }
.article-cat-gum-care{ background: #e4f4e0; color: #2a6a1a; }
.article-cat-cosmetic{ background: #fce8f4; color: #8a1a5c; }
.article-cat-general{ background: #e8eef8; color: #1a3a7a; }







.article-intro{
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 28px;
    font-weight: 400;
}

/* The widget article view is a teaser: intro + this CTA to the real page. */
.article-read-full{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--omega-teal, #00ADA7);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-read-full:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 173, 167, 0.3);
}

.article-section-h{
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 28px 0 10px;
}

.article-section-b{
    font-size: 14.5px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 6px;
}

.article-points{
    background: #f0f8f7;
    border-left: 4px solid var(--background);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    margin: 32px 0 0;
}

.article-points h4{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2a6260;
    margin-bottom: 12px;
}

.article-points ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.article-points ul li{
    font-size: 13.5px;
    color: #1a3a38;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.article-points ul li::before{
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--background);
    font-weight: 700;
}















/* ── Emergency Strip ──────────────────────────────────────────────────────── */
/* Omega Teal solid bg + white text (June 2026 revision). */
#emergency-strip{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--omega-teal);
    color: #fff;
    padding: 13px 24px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

#emergency-strip i{
    font-size: 18px;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

#emergency-strip span{
    opacity: 0.95;
}

#emergency-strip a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.2s;
    white-space: nowrap;
}

#emergency-strip a:hover{ background: rgba(255,255,255,0.28); }

/* ── Insurance Ticker ─────────────────────────────────────────────────────── */










/*
 * Each chip carries its own right margin instead of using flex `gap`.
 * Why: the track contains two identical halves (26 chips total). With
 * `gap`, half-width is (13 chips + 12.5 gaps) while one full set's stride
 * is (13 chips + 13 gaps), so translate(-50%) lands half a gap short
 * and you see a visible seam every loop. Per-chip margin makes the
 * half-width and the stride match exactly, giving a true seamless loop.
 */
@keyframes insLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}







/* ── Before & After Gallery ───────────────────────────────────────────────── */
/* ── Before & After Lightbox ──────────────────────────────────────────────── */
/* ── New Patients ─────────────────────────────────────────────────────────── */



























/* ── Pricing ──────────────────────────────────────────────────────────────── */






































/* ── Financing ────────────────────────────────────────────────────────────── */

































/* ── FAQ ──────────────────────────────────────────────────────────────────── */




/* Homepage FAQ items: rounded white cards. The old rule was just a
   border-bottom row, but the specialty-page .faq-item rule (rounded
   cards) leaked here via later source order. Made the styling
   explicit + intentional here, and scoped the specialty rule down
   below to .faq-list .faq-item only. */







/* --accent-dark passes AA at 15.5px (5.05:1) on white; --accent fails (2.79:1) */
.faq-q.open{ color: var(--charcoal); }



.faq-q.open i{ transform: rotate(45deg); }



.faq-a.open{
    max-height: 2000px;
    visibility: visible;
    transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1), visibility 0s;
}




/* ============================================================
   RESPONSIVE - Mobile & Tablet
   900px: tablet   768px: mobile   480px: small mobile
   ============================================================ */

/* ── Tablet (≤900px) ────────────────────────────────────────── */


/* ── Mobile (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px){

  /* ── Nav ────────────────────────────── */
  nav{
    padding: 0 16px;
    height: 60px;
  }
  .nav-links{ display: none; }
  .nav-phone{ display: none; }
  /* Header toggle is hidden on mobile for space; the always-visible footer
     language link (.footer-lang) is the mobile Spanish/English entry point. */
  .lang-toggle{ display: none; }
  .nav-cta{ padding: 8px 13px; font-size: 12px; }
  .nav-menu-btn{ display: flex; }

  /* ── Hero ───────────────────────────── */
  
  
  
  /* Override the desktop flex:1 rule so the explicit 220px height takes
     effect. Without flex:0 0 auto, the slideshow tries to grow within
     its flex parent (#hero-left, flex:0 1 auto) which provides no extra
     space - and collapses to 0px tall on mobile. */
  /* Taller on mobile than the old photo-only slide: the banner now carries
     an offer headline + sub + CTA that need vertical room. */
  
  /* On a short banner the offer block can reach the lighter top of the photo,
     so darken the top slightly too (keeps the tag + headline legible) and
     tighten the text so the whole offer stays in the lower, scrimmed half. */
  
  
  
  
  
  
  
  
  .hero-stats{ flex-wrap: wrap; gap: 8px 16px; }
  .hero-stat-div{ display: none; }
  
  .hero-book-btn{ flex: 1; justify-content: center; }
  /* Single-column mobile layout - cards revert to natural height instead
     of the desktop proportional-flex split. */
  
  
  #hero-specials-card{ flex: 0 0 auto; min-height: 200px; }

  /* ── Insurance chat card ─────────────── */
  

  /* ── Section padding ─────────────────── */
  
  
  #fourthpage{ padding: 60px 20px; }
  
  
  
  
  
  

  /* ── Section headings ────────────────── */
  
  
  

  /* The doctors section (#thirdpage) uses .team-header instead of
     .treatments-header - it never got a mobile stack rule, so on mobile
     .team-header-right sat beside the left column and overflowed the
     viewport by ~77px. Same treatment as .treatments-header above. */
  
  
  

  /* ── Grids ───────────────────────────── */
  
  .treatment-card{ padding: 22px 18px; border-radius: 18px; }

  

  
  .tech-card{ border-radius: 18px; }
  .tech-card-photo{ height: 140px; }

  
  
  

  /* ── Practice ────────────────────────── */
  
  

  /* ── FYS widget ──────────────────────── */
  .fys-options{ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); }

  /* ── Footer CTA ──────────────────────── */
  
  
  
  
  

  /* ── Footer main ─────────────────────── */
  
  

  /* ── Booking modal (mobile): the OVERLAY scrolls the whole form. The modal
       anchors to the top (never "pushed down"), the header stays pinned, and
       every field incl. the submit button is reachable by scrolling. ───── */
  
  
  
  
  

  /* ── Floating widgets ─────────────────── */
  
}

/* ── Small mobile (≤480px) ──────────────────────────────────── */
@media (max-width: 480px){
  nav{ padding: 0 12px; }
  .nav-cta{ display: none; }

  /* The banner now carries an offer (tag + headline + sub + CTA), so it
     needs more height than the old photo-only 180px even on small phones. */
  
  
  

  
  
  
  
  

  .fys-options{ grid-template-columns: 1fr 1fr; }

  
  
  
  

  
}

/* ============================================================
   MODAL / POPUP MOBILE FIXES  (768px + 480px)
   ============================================================ */

@media (max-width: 768px){

  /* ── Doctor modal → full-height scrollable sheet ─────────
     Fills the screen on mobile so there is no dead gap above
     it (the old 90svh sheet left ~10% blank at the top, which
     read as the modal being "pushed down"). The whole bio +
     memberships + the Request-an-Appointment CTA are now
     reachable by scrolling. The modal's own transform and
     backdrop-filter are cleared here because either property
     creates a containing block that traps position:fixed
     descendants - that was stopping the close button from
     staying pinned to the corner while the sheet scrolls. */
  
  
  /* top/right offsets add the iPhone safe-area insets: with
     viewport-fit=cover the page draws under the notch / status
     bar / dynamic island, so a plain top:14px would sit under
     them. env() falls back to 0 on devices without a notch. */
  
  
  
  /* Frame the face with a little headroom instead of cropping
     the top of the head (object-position:top did that). */
  
  
  

  /* ── Treatment modal ───────────────────────────────────── */
  
  
  /* Hero bleeds to modal edge - recalc for 20px padding */
  
  
  
  
  
  

  /* ── Tech modal ────────────────────────────────────────── */
  
  
  

  /* ── Before & After lightbox ───────────────────────────── */
  /* ── Practice bento ────────────────────────────────────── */
  /* Removing span-2 row so single-column grid works cleanly */
  
  
  

}

/* ── Small mobile fixes (≤480px) ─────────────────────────── */
@media (max-width: 480px){

  /* Treatment / Tech modal */
  
  
  

  
  

  /* Doctor modal */
  

  /* BA lightbox */
  /* Practice bento */
  

}


/* ════════════════════════════════════════════════════════════════════════════
   STATIC SUBPAGES - specialty / team / utility pages built by tools/build-pages.py
   ════════════════════════════════════════════════════════════════════════════ */

/* Page hero - used by every subpage */
.page-hero{
    background: var(--bg-card);
    padding: 80px 48px 60px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.page-hero-thin{ padding: 60px 48px 40px; }
.page-hero-inner{
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 48px;
    align-items: center;
}
.page-hero-doctor .page-hero-inner{ gap: 56px; }
.page-hero-text{ flex: 1; min-width: 0; }
.page-hero-text h1{
    /* Brand: Nunito Sans ExtraBold (per 2026 brand guide H1 spec).
       This rule's specificity (0,0,1,1) overrides the global h1 cascade,
       so the family must be declared explicitly here too. */
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    color: #1e1b1e;
    margin: 12px 0 18px;
    letter-spacing: -0.02em;
}
.page-hero-lead{
    font-size: 16px;
    line-height: 1.65;
    color: rgba(30,27,30,0.7);
    max-width: 640px;
    margin: 0 0 28px;
}
.page-hero-actions{
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Doctor hero photo (on individual doctor pages) */
.doctor-hero-photo{
    width: 280px;
    height: 280px;
    flex-shrink: 0;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.doctor-hero-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Page sections */
.page-section{
    padding: 80px 48px;
    background: #fff;
}
.page-section-alt{ background: var(--bg-card); }
.page-section-cta{
    text-align: center;
    background: linear-gradient(180deg, var(--bg-card) 0%, #fff 100%);
}
.page-section-cta h2{
    /* Brand: Nunito Sans Bold (per 2026 brand guide H2 spec) */
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    margin: 0 0 12px;
    color: #1e1b1e;
}
.page-section-cta p{
    font-size: 15px;
    color: rgba(30,27,30,0.7);
    margin: 0 auto 24px;
    max-width: 560px;
}
.page-section-inner{
    max-width: 1100px;
    margin: 0 auto;
}
.page-section h2{
    /* Brand: Nunito Sans Bold (per 2026 brand guide H2 spec) */
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    color: #1e1b1e;
    margin: 6px 0 32px;
    letter-spacing: -0.01em;
}

/* Treatment grid (specialty pages) */
.treatment-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.treatment-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 16px;
    padding: 22px 22px 20px;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.treatment-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.35);
}
.treatment-meta{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.treatment-from{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* --accent-dark at 10.5px so brand teal reads at AA (5.05:1 on white);
       --accent at 10.5px is only 2.79:1 = WCAG fail. */
    color: var(--charcoal);
    background: rgba(var(--accent-rgb), 0.10);
    padding: 4px 9px;
    border-radius: 999px;
}
.treatment-card h3{
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1e1b1e;
    margin: 0 0 8px;
}
.treatment-card p{
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(30,27,30,0.7);
    margin: 0;
}
.treatment-disclaimer{
    margin-top: 26px;
    font-size: 12.5px;
    color: rgba(30,27,30,0.7);
    line-height: 1.6;
    max-width: 760px;
}
/* --accent-dark on white passes AA for body-size links (5.05:1); --accent fails (2.79:1). */
.treatment-disclaimer a{ color: var(--charcoal); text-decoration: none; }
.treatment-disclaimer a:hover{ text-decoration: underline; }

/* Doctor grid (used on /our-team/ and specialty pages) */
.doctor-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.doctor-grid-team{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.doctor-card{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.doctor-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    border-color: rgba(var(--accent-rgb), 0.35);
}
.doctor-card img{
    width: 100%;
    /* The <img> carries height="400" (from img_with_srcset). With no explicit
       CSS height that attribute wins and forces a 218x400 box, defeating the
       1:1 crop and zooming into the face (worst on taller 3:4 portraits like
       Dr. Farhadian's). height:auto lets aspect-ratio drive a true square. */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Headshots sit upper-centre; bias the square crop up so faces frame
       cleanly instead of cropping to the chin/shoulders. */
    object-position: center 22%;
    display: block;
    background: rgba(var(--accent-rgb), 0.06);
}
.doctor-card-info{
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.doctor-card-info strong{
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1e1b1e;
}
.doctor-card-info span{
    font-size: 12.5px;
    color: var(--teal-text);
    font-weight: 500;
}
.doctor-card-info small{
    font-size: 11.5px;
    color: rgba(30,27,30,0.7);
    margin-top: 2px;
}

/* Doctor memberships (on individual doctor pages) */
.doctor-memberships{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.doctor-membership{
    background: rgba(var(--accent-rgb), 0.08);
    /* On tinted-teal bg, --accent-dark reads cleanly at 12px (4.7:1+) */
    color: var(--charcoal);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 500;
}

/* Contact page */
.contact-grid{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 36px;
}
.contact-details h2{
    margin-top: 0;
}
.contact-details p{
    font-size: 15px;
    color: rgba(30,27,30,0.75);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact-details p i{
    color: var(--charcoal);
    font-size: 18px;
}
.contact-details a{
    color: #1e1b1e;
    text-decoration: none;
    font-weight: 500;
}
.contact-details a:hover{ color: var(--charcoal); }
.contact-map iframe{
    width: 100%;
    height: 360px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Legal pages */
.article-body{
    max-width: 760px;
    margin: 0 auto;
}
.article-body h2{
    font-size: 22px;
    margin: 36px 0 12px;
}
.article-body h2:first-of-type{ margin-top: 0; }
.article-body p{
    font-size: 15px;
    line-height: 1.75;
    color: rgba(30,27,30,0.75);
    margin: 0 0 16px;
}
.article-body a{
    /* --accent-dark on white passes AA for inline body links (5.05:1) */
    color: var(--charcoal);
    text-decoration: none;
}
.article-body a:hover{ text-decoration: underline; }

/* Page footer (replaces hash-only homepage footer for subpages).
   Brand: Charcoal #2E2E2E (was off-brand #1e1b1e near-black).
   Matches the homepage <footer> for visual consistency across pages. */
.page-footer{
    background: var(--charcoal);
    color: rgba(255,255,255,0.75);
    padding: 60px 48px 28px;
}
.page-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 36px;
}
.footer-col h4{
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin: 0 0 14px;
}
.footer-col a{
    display: block;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    transition: color 0.15s;
}
.footer-col a:hover{ color: #fff; }
.footer-col p{
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    margin: 0 0 12px;
}
.footer-logo{
    height: 28px;
    width: auto;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}
.footer-address{
    font-size: 13px !important;
    color: rgba(255,255,255,0.55) !important;
}
.footer-address a{ display: inline; color: rgba(255,255,255,0.85); }
/* Footer is on --accent-dark (#006B66). Was: hover -> var(--accent)
   (#00ADA7) which gave 1.49:1 contrast - link essentially DISAPPEARED.
   Now: brighten to full white + underline for clear hover affordance. */
.footer-address a:hover{ color: #fff; text-decoration: underline; }
.page-footer-base{
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
}

/* Inline mobile menu (hamburger) */
.inline-menu{
    display: none;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 14px 24px;
    flex-direction: column;
    gap: 4px;
}
.inline-menu.open{ display: flex; }
.inline-menu a{
    color: #1e1b1e;
    text-decoration: none;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.inline-menu a:hover{ color: var(--charcoal); }
.inline-menu a:last-child{ border-bottom: none; }

/* Responsive - subpages */
@media (max-width: 900px){
    .page-hero{ padding: 56px 24px 48px; }
    .page-hero-inner{ flex-direction: column; gap: 28px; }
    .doctor-hero-photo{ width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1; }
    .page-section{ padding: 56px 24px; }
    .contact-grid{ grid-template-columns: 1fr; gap: 24px; }
    .page-footer-inner{ grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 600px){
    .page-hero-text h1{ font-size: 28px; }
    .page-hero-lead{ font-size: 14.5px; }
    .doctor-hero-photo{ max-width: 240px; }
    .page-footer{ padding: 40px 24px 20px; }
    .page-footer-inner{ grid-template-columns: 1fr; }
    .page-footer-base{ flex-direction: column; gap: 6px; text-align: center; }
}


/* ── FAQ accordion (native <details>) ── specialty-page version ──────
   All rules scoped under .faq-list so they don't leak onto the
   homepage .faq-grid (which has its own .faq-grid .faq-item rules
   scoped above). */
.faq-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 820px;
}
.faq-list .faq-item{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.faq-list .faq-item[open]{
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.faq-list .faq-item summary{
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #1e1b1e;
}
.faq-list .faq-item summary::-webkit-details-marker{ display: none; }
.faq-list .faq-item summary i{
    color: var(--charcoal);
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-list .faq-item[open] summary i{ transform: rotate(45deg); }
.faq-answer{
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(30,27,30,0.7);
}
.faq-answer p{ margin: 0; }

/* ── Related specialty cards ──────────────────────────────────────────── */
.related-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.related-card{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    position: relative;
}
.related-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    border-color: rgba(var(--accent-rgb), 0.35);
}
.related-card strong{
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1e1b1e;
}
.related-card span{
    font-size: 12.5px;
    color: rgba(30,27,30,0.7);
    line-height: 1.45;
}
.related-arrow{
    position: absolute;
    top: 18px;
    right: 18px;
    color: rgba(0,0,0,0.7);
    font-size: 18px;
    transition: color 0.18s, transform 0.18s;
}
.related-card:hover .related-arrow{
    color: var(--charcoal);
    transform: translateX(2px);
}

/* ── 404 page grid (uses .treatment-grid + .notfound-grid) ────────────── */
.notfound-grid .treatment-card{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.notfound-grid .treatment-card h3{ font-size: 15px; }
.notfound-grid .treatment-card p{ font-size: 12.5px; }


/* ── Lead form (contact page) ──────────────────────────────────────────── */
.lead-form{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lead-form-heading{
    /* Brand: applied to an <h2> ("Request an appointment") - use Nunito Sans
       Bold per 2026 brand guide H2 spec. Class-level rule overrides the
       global h2 cascade so the family must be re-stated here. */
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: #1e1b1e;
    margin: 0 0 6px;
}
.lead-form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.lead-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lead-field > span{
    font-size: 12px;
    font-weight: 600;
    color: rgba(30,27,30,0.7);
    letter-spacing: 0.01em;
}
.lead-field > span em{
    /* Required-field asterisk - --accent-dark passes AA at 12px (5.05:1);
       --accent (brand light teal) fails (2.79:1). */
    color: var(--charcoal);
    font-style: normal;
}
.lead-field > span em.optional{
    color: rgba(30,27,30,0.7);
    font-weight: 500;
    font-size: 11px;
}
.lead-field input[type="text"],
.lead-field input[type="tel"],
.lead-field input[type="email"],
.lead-field select{
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14.5px;
    font-family: inherit;
    color: #1e1b1e;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.lead-field input:focus,
.lead-field select:focus{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.lead-field select{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.lead-field-checkbox{
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.lead-field-checkbox input[type="checkbox"]{
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}
.lead-field-checkbox > span{
    font-size: 12.5px;
    color: rgba(30,27,30,0.7);
    line-height: 1.5;
    font-weight: 500;
}

.lead-submit{
    margin-top: 8px;
    padding: 14px 20px;
    /* Brand: teal button, white text. */
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.18s, transform 0.12s;
}
.lead-submit:hover{ background: var(--btn-bg-hover); }
.lead-submit:active{ transform: translateY(1px); }
.lead-submit:disabled{
    background: rgba(0,0,0,0.18);
    cursor: not-allowed;
    transform: none;
}
.lead-submit.is-loading .lead-submit-label::after{
    content: '…';
}

.lead-status{
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    display: none;
}
.lead-status:not(:empty){ display: block; }
.lead-status-info{
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--charcoal);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
}
.lead-status-success{
    background: rgba(34, 197, 94, 0.10);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.lead-status-error{
    background: rgba(239, 68, 68, 0.08);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

@media (max-width: 600px){
    .lead-form{ padding: 22px 18px; }
    .lead-form-row{ grid-template-columns: 1fr; }
}

/* ── A11y polish: skip link, focus-visible, reduced motion ─────────────── */

/* Skip-to-content: hidden until a keyboard user tabs into it. Critical for
   screen-reader and keyboard navigation since our nav has many links. */
.skip-link{
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--charcoal);
    color: #fff;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 0 0 12px 0;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
    top: 0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.4);
}

/* Visible focus ring on every interactive element when keyboard-navigated.
   We intentionally use :focus-visible so mouse clicks don't show the ring
   (browsers handle :focus-visible heuristically: keyboard yes, mouse no). */
:focus-visible{
    outline: 3px solid #007771;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
    border-radius: 4px;
}

/* Buttons that already have brand colours need a contrast-safe ring instead.
   Footer buttons sit on a Charcoal bg, so a Charcoal halo would be invisible -
   Omega Teal halo stays visible against both white (nav) and Charcoal (footer). */
.nav-cta:focus-visible,
.hero-book-btn:focus-visible,
.cta-phone:focus-visible,
.footer-btn-call:focus-visible,
.footer-btn-book:focus-visible{
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--omega-teal);
}

/* Respect users who prefer no animation. Disables our anime.js entrances,
   parallax, and any decorative transitions while leaving functional
   transitions (open/close states) at a fast 0.01ms so JS toggles still
   work but no visible movement happens. */
@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;
    }
    /* Stop our hero slideshow auto-advance for motion-sensitive users.
       The reduced-motion CSS variable here is checked by the slideshow
       loop in app.js, which pauses when set. */
    :root{ --reduced-motion: 1; }
}

/* Screen-reader-only utility: visually hides content while leaving it
   in the accessibility tree, so screen-reader rotor navigation has the
   heading it needs but sighted users see nothing. */
.visually-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Contact-page map facade: lightweight placeholder that swaps to a real
   Google Maps iframe on click. Saves 500KB-1MB of Maps SDK for visitors
   who never interact with the map. */
.contact-map{ position: relative; }
.contact-map-cover{
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: 18px;
    /* Accessible teal bg + white text (5.42:1, AA pass). */
    background: #007771;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    transition: filter 0.2s;
    position: relative;
    overflow: hidden;
}
.contact-map-cover::before{
    /* Subtle dotted grid overlay so the placeholder doesn't read as a flat
       colour block - hints at "this is a map" without loading any tiles. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.5;
    pointer-events: none;
}
.contact-map-cover:hover{ filter: brightness(1.05); }
.contact-map-cover-inner{
    position: relative;
    text-align: center;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.contact-map-cover-inner i{
    font-size: 44px;
    margin-bottom: 4px;
    opacity: 0.95;
}
.contact-map-cover-inner strong{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1px;
}
.contact-map-cover-inner span{
    font-size: 13px;
    opacity: 0.85;
    font-weight: 500;
}
.contact-map iframe{
    display: block;
    border-radius: 18px;
    width: 100%;
    height: 380px;
    border: 0;
}

/* Honeypot field for the lead form. Visually hidden + off-screen + aria-
   hidden, so humans never see it and bots happily fill it in. The form
   handler rejects submissions where this comes back non-empty. */
.lead-honey{
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* HIPAA/privacy consent block below the lead-form submit button. Small,
   muted, but readable. The links to Privacy + Terms get the brand accent
   so they're discoverable. */
.lead-consent{
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(30,27,30,0.7);
    max-width: 580px;
}
.lead-consent a{
    color: var(--charcoal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.lead-consent a:hover{ color: var(--charcoal); }

/* ── Analytics-notice banner (soft, non-blocking) ──────────────────────
   Bottom-fixed strip with a one-line "we use GA, see privacy" notice
   and a dismiss button. Dismissal persists in localStorage; analytics
   fires regardless of dismissal. */
#analytics-notice{
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    /* Must sit ABOVE normal page content but BELOW the modal overlays
       (z-index 998-999). At its old z-index of 9000 this fixed bottom
       banner painted on top of every open modal - and on mobile, where
       modals run nearly full-height, it covered the modal's bottom
       buttons (e.g. the booking form's submit) so they couldn't be
       tapped. 100 keeps it above the nav (99) and page content while
       a modal overlay correctly covers it when open. */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px 12px 18px;
    background: #1e1b1e;
    color: rgba(255,255,255,0.95);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    max-width: 640px;
    margin: 0 auto;
    animation: omega-notice-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
#analytics-notice a{
    color: var(--accent-light);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
#analytics-notice a:hover{ color: #fff; }
#analytics-notice button{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-radius: 7px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s;
}
#analytics-notice button:hover{ background: rgba(255,255,255,0.18); }
#analytics-notice.analytics-notice-hide{
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.28s, transform 0.28s;
}
@keyframes omega-notice-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 520px){
    #analytics-notice{
        font-size: 12px;
        padding: 10px 12px 10px 14px;
        gap: 10px;
    }
}
@media (prefers-reduced-motion: reduce){
    #analytics-notice{ animation: none; }
    #analytics-notice.analytics-notice-hide{ transition: none; }
}

/* Push body content up so the analytics notice doesn't overlay form
   submit buttons or footer CTAs. JS toggles this class. */
body.has-analytics-notice{ padding-bottom: 90px; }
@media (max-width: 520px){
    body.has-analytics-notice{ padding-bottom: 110px; }
}

/* Carrier wordmark inside the insurance-checker "in-network" result
   bubble. White rounded plate so brand-coloured logos sit on a neutral
   background regardless of which carrier matched. */
.ins-result-logo{
    background: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ins-result-logo img{
    display: block;
    height: 28px;
    width: auto;
}

/* ── Print styles ──────────────────────────────────────────────────────
   Patients print the financing, contact, and doctor pages. Strip the
   interactive chrome (nav, modals, sticky bars, floating chat widget,
   analytics banner), force readable black-on-white text, expand links so
   the destination is visible on paper, and keep headings with their
   content. */
@media print{
    /* Hide everything that's navigation, decoration, or interactive. */
    nav,
    #analytics-notice,
    /* #pawz-widget catches the floating trigger + panel + any popups -
       the old "#pawz-panel, #pawz-launcher" listed a wrong ID
       (#pawz-launcher doesn't exist; the trigger is #pawz-trigger),
       which left the floating chat button visible on prints. */
    #pawz-widget,
    .skip-link,
    #doctor-overlay, #tech-overlay, #treatment-overlay, #booking-overlay,
    .ins-ticker-outer, #insurance-ticker,
    #hero-slideshow, .slide-dots,
    .hero-book-btn, .nav-cta, .cta-phone,
    .footer-btn-call, .footer-btn-book,
    .specials-arrow, .specials-dots,
    button, .inline-menu, .nav-menu-btn{
        display: none !important;
    }

    /* Reset the page to plain black-on-white. */
    html, body, #container{
        background: #fff !important;
        color: #000 !important;
    }
    *{
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #000 !important;
    }

    /* Full-width content, no fixed heights from the screen layout. */
    #home, #container, .section-wrap, .page-section, .page-hero{
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        padding: 12pt 0 !important;
        display: block !important;
    }

    body{
        font-size: 11pt;
        line-height: 1.45;
    }
    h1{ font-size: 20pt; }
    h2{ font-size: 15pt; }
    h3{ font-size: 12pt; }

    /* Keep headings attached to the content that follows them. */
    h1, h2, h3, h4{
        page-break-after: avoid;
        break-after: avoid;
    }
    /* Don't split a card, FAQ item, or doctor profile across pages. */
    .treatment-card, .faq-item, .doctor-card,
    .pricing-card, .financing-card, .page-section-inner > p{
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Expand links so the URL is visible on paper - but not for
       in-page anchors, tel:, or mailto: where it'd just be noise. */
    a[href^="http"]::after{
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555 !important;
        word-break: break-all;
    }
    a[href^="/"]::after{
        content: " (omegadentists.com" attr(href) ")";
        font-size: 9pt;
        color: #555 !important;
    }
    a[href^="#"]::after,
    a[href^="tel:"]::after,
    a[href^="mailto:"]::after{
        content: "";
    }

    /* A print-only footer line so a stray printed page is still
       identifiable and has the phone number on it. */
    #foot::after, .page-footer::after{
        content: "Omega Dental Specialists  -  106 W Gray St, Houston, TX 77019  -  (713) 322-7474";
        display: block;
        margin-top: 12pt;
        padding-top: 8pt;
        border-top: 1pt solid #999;
        font-size: 9pt;
        color: #333 !important;
    }

    /* Images: cap height so a hero shot doesn't eat a whole page. */
    img{
        max-width: 100% !important;
        max-height: 240pt !important;
    }

    @page {
        margin: 1.5cm;
    }
}

/* ── Mobile fixes ──────────────────────────────────────────────────────
   Two iOS-specific issues caught in the mobile audit:

   1. iOS Safari ZOOMS IN when the user taps a form field with
      font-size < 16px (it assumes the text is too small to read).
      That zoom is jarring mid-form-fill. The CSS below forces every
      text input/select/textarea up to 16px on phone-sized screens so
      the field accepts taps without triggering the zoom.

   2. WCAG 2.5.5 Target Size + Apple HIG both want 44x44 minimum for
      interactive controls. The hamburger nav button, the chat send
      buttons, and the analytics-notice dismiss were 28-40px. Bumped
      to 44x44 so fat-finger taps reliably hit them on phones. */
@media (max-width: 768px){
    .ins-chat-search-input,
    .ins-chat-input-row input,
    .ins-search-row input,
    .pawz-input-row input,
    .pawz-search-row input,
    .hcw-form input,
    .booking-field textarea,
    .hcw-input-row input,
    .lead-field select{
        font-size: 16px;
    }

    /* Touch-target expansion - 44x44 minimum for primary mobile controls. */
    .nav-menu-btn{
        width: 44px;
        height: 44px;
    }
    .ins-chat-send-btn,
    .pawz-send-btn,
    .hcw-input-row button{
        width: 44px;
        height: 44px;
    }
    #analytics-notice button{
        /* Was 28x28 - too small for fat-finger dismiss on a banner that
           a patient might want to dismiss quickly. */
        width: 44px;
        height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   SPANISH-LANGUAGE LAYOUT TWEAKS
   ─────────────────────────────────────────────────────────────────
   Spanish text averages 15-25% longer than English at the word level,
   which can break tight horizontal layouts (nav rows, button rows,
   card chip rows) and squish vertical layouts where cards in a grid
   end up uneven heights from text-length variation.

   Rules below target html[lang="es"] only so English layout is not
   disturbed. They use small, surgical adjustments — tighter nav
   padding, allow-wrap on buttons, equal-row card alignment — rather
   than restyling components.
   ───────────────────────────────────────────────────────────────── */

html[lang="es"] .nav-link{
    /* "Cirugía Oral" + "Nuestro Equipo" together are ~20% wider than
       the English equivalents. Shrink horizontal padding from 13px to
       9px so all 5 nav items still fit on a 1024px viewport without
       wrapping into a second row. */
    padding: 6px 9px;
    font-size: 12.5px;
}

html[lang="es"] .nav-cta{
    /* "Reservar Cita" is shorter than "Book Appointment" but the icon +
       wider Spanish padding can still push the CTA close to the menu
       button. Tighten left-right padding slightly. */
    padding-left: 14px;
    padding-right: 14px;
}

html[lang="es"] .hero-title,
html[lang="es"] .hero-subtitle{
    /* Hero copy in Spanish wraps more aggressively. Allow it to use
       the full content width and balance lines naturally. */
    text-wrap: balance;
}

html[lang="es"] .treatment-card h3,
html[lang="es"] .team-card-specialty,
html[lang="es"] .tech-tile h3,
html[lang="es"] .special-card-title{
    /* Spanish specialty + treatment names are longer than English
       ("Odontología Estética" vs "Cosmetic", "Cirugía Oral" vs
       "Surgery"). Allow these to wrap to 2 lines without truncating
       and keep cards in a grid the same height. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

html[lang="es"] .treatment-grid,
html[lang="es"] .tech-grid,
html[lang="es"] .specialty-cards{
    /* Force grid rows to align by stretching cards to the tallest in
       the row (default in CSS Grid, but explicit here so Safari is
       happy). */
    align-items: stretch;
}

html[lang="es"] .treatment-card,
html[lang="es"] .tech-tile,
html[lang="es"] .special-card{
    /* Equal heights inside a row, content stacks top-aligned, CTA
       pinned to bottom via flex if the card uses it. */
    height: 100%;
}

html[lang="es"] .ins-chip-btn,
html[lang="es"] .lead-submit,
html[lang="es"] .hero-book-btn,
html[lang="es"] .cta-phone{
    /* CTAs / chips: Spanish "Reservar una Consulta" is wider than
       English "Book Consultation". Use auto-width with text wrapping
       so the button can grow into 2 lines rather than overflowing. */
    white-space: normal;
    line-height: 1.25;
}

@media (max-width: 900px){
    html[lang="es"] .nav-link{
        /* On smaller screens the desktop nav already starts hiding
           items; the remaining ones get even less room. */
        padding: 6px 7px;
        font-size: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PRINT STYLES
   ─────────────────────────────────────────────────────────────────────────
   Stripped-down layout for users who print pages — common for older
   patients who want a paper copy of treatment info or FAQs to read at
   home. Goals:
     - Drop nav, footer, chat widget, cookie banner — page chrome doesn't
       belong on paper.
     - Auto-expand <details> accordions so FAQs are visible (would
       otherwise print collapsed).
     - Force black-on-white for max contrast on monochrome printers.
     - Show URL after every link so paper readers can find the page later.
     - Honor page breaks so cards/sections don't split mid-content.
   ───────────────────────────────────────────────────────────────────────── */
@media print{
    /* Hide site chrome */
    nav,
    footer,
    .inline-menu,
    .menu-bar,
    .lang-toggle,
    #lang-toggle,
    #pawz-launcher,
    #pawz-panel,
    .pawz-launcher,
    #analytics-notice,
    .nav-cta,
    .nav-menu-btn,
    .skip-link,
    .ins-checker,
    .booking-modal,
    .doctor-overlay,
    .tech-overlay,
    .treatment-overlay,
    .article-overlay,
    .hero-slideshow,
    .specials-carousel,
    .specials-nav,
    .specials-dots,
    .slide-dots,
    .hero-book-btn,
    .cta-phone,
    .page-hero-actions,
    .page-section-cta,
    .footer-bottom-links,
    .page-footer{
        display: none !important;
    }

    /* Pure black-on-white for printer-friendly contrast */
    html, body{
        background: #fff !important;
        color: #000 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }

    h1, h2, h3, h4, h5, h6{
        color: #000 !important;
        page-break-after: avoid;
        font-family: Georgia, "Times New Roman", serif !important;
    }

    h1{ font-size: 22pt !important; }
    h2{ font-size: 16pt !important; }
    h3{ font-size: 13pt !important; }

    /* Auto-expand FAQ accordions so they print as visible text */
    details{
        display: block !important;
    }
    details > *{
        display: block !important;
    }
    details summary{
        font-weight: 700;
        page-break-after: avoid;
        list-style: none;
    }
    details summary i,
    details summary .ri-add-line{
        display: none !important;
    }
    details .faq-answer{
        margin-top: 4pt;
        margin-bottom: 12pt;
    }

    /* Hero / section padding shrink — saves paper */
    .page-hero,
    .page-section{
        padding: 12pt 0 !important;
        background: #fff !important;
    }
    .page-section-alt{
        background: #fff !important;
        border-top: 1pt solid #999 !important;
    }
    .page-section-inner,
    .page-hero-inner{
        max-width: 100% !important;
        padding: 0 !important;
    }
    .sec-label{
        color: #555 !important;
        font-size: 9pt !important;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    /* Print URLs after links so paper readers can find pages */
    a[href]::after{
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444;
        font-style: italic;
    }
    /* Don't suffix internal anchors or tel:/mailto: which are noisy */
    a[href^="#"]::after,
    a[href^="tel:"]::after,
    a[href^="mailto:"]::after{
        content: "";
    }

    /* Cards: 1-column, no shadows, keep together */
    .treatment-grid,
    .doctor-grid,
    .related-grid{
        grid-template-columns: 1fr !important;
        gap: 8pt !important;
    }
    .treatment-card,
    .doctor-card,
    .related-card{
        page-break-inside: avoid;
        border: 0.5pt solid #999 !important;
        padding: 8pt !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    /* Images print smaller and on-color */
    img{
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }

    /* Tables print neatly */
    table{
        border-collapse: collapse;
        width: 100% !important;
        page-break-inside: avoid;
    }
    table td, table th{
        border: 0.5pt solid #999;
        padding: 4pt 6pt !important;
    }

    /* Practice address + phone show prominently */
    .practice-address,
    .footer-address,
    .contact-details{
        page-break-inside: avoid;
        border-top: 1pt solid #000;
        padding-top: 8pt;
        margin-top: 16pt;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   NEWSLETTER SIGNUP BLOCK
   ─────────────────────────────────────────────────────────────────────── */











.newsletter-submit.is-loading .newsletter-submit-label::after{
    content: "…";
}



.newsletter-status-success{ color: #2E7D32; font-weight: 600; }
.newsletter-status-error{ color: #C62828; font-weight: 600; }
.newsletter-status-info{ color: var(--slate); }



/* ═══════════════════════════════════════════════════════════════════════
   Phone layout (≤600px), June 2026: the desktop grids collapsed to one
   giant column and made the page ~31 screens tall. Three sections carry
   their own phone-specific layout now. Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px){

  /* ── Specialties: compact 2-across tiles ────────────────────────────── */
  
  .treatment-card{
    padding: 16px 14px 14px;
  }
  
  .treatment-card h3{
    font-size: 15px;
    margin: 10px 0 4px;
  }
  .treatment-card p{
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  
  

  /* ── Doctors: one-card-tall swipe carousel with next-card peek ──────── */
  
  
  
  

  /* ── Technology: compact 2-across tiles (detail lives in the modal) ─── */
  
  .tech-card-photo{
    height: auto;   /* desktop fixes 160px; the aspect-ratio img rules here */
  }
  .tech-card-body{
    flex: 0 0 auto;
  }
  .tech-card-photo img{
    aspect-ratio: 16 / 10;
    object-fit: cover;
    height: auto;
  }
  .tech-card-body{
    padding: 12px 12px 14px;
  }
  .tech-card-body h3{
    font-size: 14px;
    margin: 0;
  }
  .tech-card-body p{ display: none; }

  /* ── What to Expect (new patients): 2-across steps ──────────────────── */
  
  
  
  
  

  /* ── Hero CTA card: tighter headline block on phones ────────────────── */
  
  
  
  /* tagline already hidden at <=480; extend through 600 so mid-size
     phones get the same compact card */
  
  
}


/* ═══ Mobile nav drawer ═══════════════════════════════════════════════════
   Slide-in panel behind the hamburger. Class-toggled inline (no JS file
   dependency). Hidden entirely on desktop where the full nav shows. */
.nav-drawer{
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}
.nav-drawer.open{
    pointer-events: auto;
    visibility: visible;
}
.nav-drawer-scrim{
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 26, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.nav-drawer.open .nav-drawer-scrim{ opacity: 1; }
.nav-drawer-panel{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(330px, 88vw);
    background: var(--bg-card, #FDFCFA);
    box-shadow: -12px 0 40px rgba(0,0,0,0.18);
    transform: translateX(102%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    padding: 18px 20px 28px;
    display: flex;
    flex-direction: column;
}
.nav-drawer.open .nav-drawer-panel{ transform: none; }
.nav-drawer-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.nav-drawer-head img{ height: 30px; width: auto; }
.nav-drawer-close{
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: rgba(30,27,30,0.06);
    color: var(--charcoal, #2E2E2E);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-drawer-book{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: var(--btn-bg, #00ADA7);
    color: var(--btn-text, #fff);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 18px;
}
.nav-drawer-label{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--omega-teal, #00ADA7);
    margin: 6px 0 8px;
}
.nav-drawer-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
}
.nav-drawer-grid a{
    display: block;
    padding: 9px 10px;
    border-radius: 9px;
    background: var(--bg-subtle, #FAF8F5);
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--charcoal, #2E2E2E);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}
.nav-drawer-list{
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.nav-drawer-list a{
    padding: 10px 2px;
    color: var(--charcoal, #2E2E2E);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-drawer-list a:last-child{ border-bottom: none; }
.nav-drawer-phone{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    color: var(--omega-teal, #00ADA7);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.nav-drawer-hours{
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--slate, #4A5A66);
}
@media (min-width: 769px){
    .nav-drawer{ display: none; }
}


/* ═══ Mobile spacing fixes (June 2026): stop desktop blocks stretching ═══
   into one giant column on phones. Appended last so it wins the cascade
   over the earlier 480/600 breakpoints. Desktop/tablet untouched. */
@media (max-width: 600px){

  /* Practice bento: headline full-width, the 3 stats in ONE compact row,
     info cards full-width. Was 6+ giant stacked full-width blocks. */
  
  
  
  
  
  

  /* Footer: link lists go 2-across so Navigation/Specialties aren't a
     tall single-file tower. Tighter column gap too. */
  
  

  /* Financing cards: trim the roomy desktop padding so they read tighter. */
  
  
}


/* ═══ Mobile section rhythm (June 2026) ════════════════════════════════════
   One consistent vertical cadence on phones instead of the 60-80px desktop
   padding that stretched the page. Appended last so it wins the cascade.
   Desktop/tablet untouched. */
@media (max-width: 600px){
  
  /* Reviews + nav header are full-bleed (carousel/ticker) - tighten the
     vertical only, leave horizontal at 0. */
  
  
  .page-footer{ padding-top: 44px; padding-bottom: 22px; padding-left: 20px; padding-right: 20px; }
  /* The practice hero image had generous spacing below it before the bento. */
  
}


/* ═══ Specialty-page treatment cost cards: 2-across on phones ══════════════
   These live in .treatment-grid (singular) - distinct from the homepage's
   .treatments-grid. minmax(260px,1fr) forced 1 column on phones, so each
   cost card took the full width. Now a compact 2-across grid. The earlier
   homepage rule clamps .treatment-card p to 2 lines; undo that here so the
   specialty descriptions stay full. */
@media (max-width: 600px){
  .treatment-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .treatment-grid .treatment-card{ padding: 13px 12px; }
  .treatment-grid .treatment-card .treatment-meta{ margin-bottom: 4px; }
  .treatment-grid .treatment-card .treatment-from{ font-size: 11.5px; }
  .treatment-grid .treatment-card h3{
    font-size: 14px;
    margin: 4px 0 5px;
    line-height: 1.2;
  }
  .treatment-grid .treatment-card p{
    font-size: 11.5px;
    line-height: 1.42;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }
}


/* ═══ Homepage pricing ("What to Expect" cost cards): 2-across on phones ═══
   A later mobile rule forced .pricing-grid to 1 column + 480px max-width, so
   each cost card went full-width and huge. They're tiny (icon + name + price
   + one line) - 2-across fits cleanly. Appended last to win the cascade. */
@media (max-width: 600px){
  
  
  
  
  
  
  
  /* the "Not sure what you need?" CTA card spans both columns */
  
  
}

/* Insurance page: carrier logo grid + check-coverage CTA */
.ins-logo-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 20px 0 24px;
}
.ins-logo-card{
    background: #fff;
    border: 1px solid #e6eaec;
    border-radius: 14px;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ins-logo-card img{
    max-width: 130px;
    max-height: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.ins-page-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #007D79;
    color: #fff;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: gap 0.2s ease, background 0.2s ease;
}
.ins-page-cta:hover{ background: #00645f; gap: 10px; }

/* Financing page: partner cards */
.fin-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0 24px;
}
.fin-card{
    background: var(--bg-card, #fff);
    border: 1px solid #e6eaec;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fin-logo{ height: 38px; display: flex; align-items: center; }
.fin-logo img{ max-height: 34px; max-width: 150px; width: auto; object-fit: contain; }
.fin-logo-text{ font-weight: 800; font-size: 1.25rem; color: #1e1b1e; letter-spacing: -0.01em; line-height: 1.1; }
.fin-card p{ font-size: 0.85rem; color: rgba(0,0,0,0.62); line-height: 1.55; flex: 1; margin: 0; }
.fin-apply{ font-weight: 700; font-size: 0.82rem; color: #007D79; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; transition: gap 0.2s ease; }
.fin-apply:hover{ gap: 9px; }

/* ============================================================
   Hero redesign (client PDF 2026): value-prop left, specials
   carousel right, insurance check moved to its own full-width
   band below the carrier strip. Desktop-focused; mobile keeps
   the single-column stack from the 768px block above.
   ============================================================ */
/* Left column: open text on the page, no card chrome (matches client mockup) */


















/* Insurance band: full-bleed teal section, content capped + centered, fully fluid.
   width:100% is required because #container is a centered flex column - without it
   the section shrink-wraps to its content and floats with side gaps (not full bleed). */











/* Card sizes to its content (was stretching to fill the old hero column) */

/* On the teal band the card is a clean white card - drop the teal/green
   top accent strip that was meant for the card on the cream page bg. */





/* ============================================================
   Carousel PROMO slide — composed branded offer (treated B&W
   photo + solid Omega-teal panel with a real price + CTA).
   Replaces the plain photo-with-text-overlay look.
   ============================================================ */
.hero-slide--promo .hero-slide-img{ filter: grayscale(1) contrast(1.04); }
.hero-slide--promo::after{ display: none; }          /* drop the dark scrim */
.promo-panel{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    background: #007771; color: #fff;
    padding: 22px 28px 50px;                            /* bottom clears the dots */
    border-top: 4px solid rgba(255,255,255,0.16);
}
.promo-eyebrow{
    display: inline-block; font-size: 11.5px; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.92); margin-bottom: 6px;
}
.promo-headline{ font-size: clamp(18px, 2vw, 22px); font-weight: 700; line-height: 1.15; margin: 0 0 12px; color: #fff; }
.promo-price{ display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 16px; }
.promo-amt{ font-size: clamp(38px, 5vw, 46px); font-weight: 800; line-height: 0.9; letter-spacing: -0.02em; }
.promo-unit{ font-size: 13px; color: #fff; }
.promo-cta{
    background: #fff; color: #007771; border: none; border-radius: 999px;
    padding: 11px 22px; font-family: inherit; font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.promo-cta:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

/* ── Hero carousel prev/next arrows ───────────────────────────────────────
   Click-through controls for the specials slideshow (complement the dots).
   Sit at the vertical centre of the right edge stacked with the left edge;
   subtle by default, clearer on hover. Above the slides + offer overlay. */









.footer-lang{
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--accent, #00ADA7);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.footer-lang:hover{ text-decoration: underline; }
.page-footer-base{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-footer-base .footer-lang{ margin-left: auto; }

@media (max-width: 768px){
  .page-footer-base .footer-lang{ margin-left: 0; }
}

/* Resources index article list. Must NOT reuse .footer-links (white text for
   the dark footer) - these sit on a light content section, so links are dark. */
.resource-links{
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  columns: 2;
  column-gap: 40px;
}
.resource-links li{
  margin: 0 0 10px;
  break-inside: avoid;
}
.resource-links li a{
  font-size: 15px;
  line-height: 1.4;
  color: #2e2e2e;
  text-decoration: none;
  transition: color 0.18s ease;
}
.resource-links li a:hover,
.resource-links li a:focus{ color: var(--accent, #00ADA7); text-decoration: underline; }
@media (max-width: 640px){
  .resource-links{ columns: 1; }
}

/* Table of contents on long-form articles. */
.article-toc{
  background: #fff;
  border: 1px solid var(--line, #e3e7ee);
  border-left: 4px solid var(--accent, #00ADA7);
  border-radius: 10px;
  padding: 16px 20px 8px;
  margin: 6px 0 8px;
}
.article-toc .sec-label{ margin-bottom: 6px; }
/* The shared .resource-links uses CSS multi-column, which does not establish
   containment inside the bordered TOC box: the list overflowed the box and
   overlapped the booking strip + first heading. Use grid here instead, and
   flow-root so the box always wraps its content. */
.article-toc{ display: flow-root; }
.article-toc .resource-links{
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 28px;
  margin-bottom: 8px;
}
.article-toc .resource-links li{ break-inside: auto; margin: 0 0 8px; }
@media (max-width: 640px){
  .article-toc .resource-links{ grid-template-columns: 1fr; }
}
html{ scroll-behavior: smooth; }
h2[id]{ scroll-margin-top: 90px; }


/* 8-link desktop nav: shed width gracefully instead of overflowing.
   (Pre-existing 1024px overflow fixed here too - lang toggle stays visible.) */
@media (max-width: 1280px){
    .nav-link{ padding: 6px 9px; font-size: 12.5px; }
}
@media (max-width: 1180px){
    .nav-phone{ display: none; }
    .nav-link{ padding: 5px 7px; font-size: 12px; }
    .nav-cta{ padding: 9px 14px; font-size: 12.5px; }
}
/* Below 1000px the 8-link row cannot fit: switch to the drawer early
   (was 768px, which left a 768-1000px band with a clipped nav). */
@media (max-width: 1000px){
    .nav-links{ display: none; }
    .nav-menu-btn{ display: flex; }
}


/* Inputs whose :focus rules suppress the outline still get a visible
   keyboard focus indicator (mouse focus keeps the custom border look). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline: 3px solid #007771 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff !important;
}