:root {
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --secondary: #f59e0b;
    --bg: #ffffff;
    --surface: #faf5ff;
    --surface-alt: #f3e8ff;
    --text: #2d3748;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --border: #e2e8f0;
    --shadow: rgba(0,0,0,0.06);
    --font-heading: Montserrat, sans-serif;
    --font-body: Nunito, sans-serif;
    --radius: 16px;
    --max-width: 1200px;
}

[data-theme="dark"] {
    --primary: #a78bfa;
    --primary-hover: #8b5cf6;
    --secondary: #fbbf24;
    --bg: #0f0b24;
    --surface: #1e1b3a;
    --surface-alt: #2d2650;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-inverse: #0f0b24;
    --border: #3b3060;
    --shadow: rgba(0,0,0,0.4);
}


* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; color: var(--text); }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ── Buttons ───────────────────────────────────────────────────────────────
   Site-wide modern treatment: gradient fill that slides on hover, a coloured
   glow that blooms under it, a light sweep across the face, and a springy
   lift. Corner radius stays at var(--radius) to match the rest of the UI. */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(120deg, var(--primary) 0%, #a855f7 45%, var(--primary-hover) 100%);
    background-size: 220% 100%;
    background-position: 0 0;
    box-shadow: 0 4px 14px -3px rgba(124, 58, 237, 0.5), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), box-shadow .28s ease, background-position .55s ease;
}
/* Light sweep. Sits below the label but above the gradient; the isolation
   above keeps that negative z-index contained to the button. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.38) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .75s ease;
}
.btn:hover {
    transform: translateY(-3px);
    background-position: 100% 0;
    box-shadow: 0 14px 30px -8px rgba(124, 58, 237, 0.6), 0 3px 8px rgba(0, 0, 0, 0.1);
}
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(-1px); transition-duration: .08s; }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.btn:disabled, .btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: 0 4px 14px -3px rgba(124, 58, 237, 0.5), 0 1px 3px rgba(0, 0, 0, 0.08); }
.btn:disabled::before, .btn[disabled]::before { display: none; }

.btn-primary { color: #fff; }

/* Outline keeps its flat look - no gradient, no sweep, just the lift. */
.btn-outline { border: 2px solid var(--primary); color: var(--primary); background: none; box-shadow: none; }
.btn-outline:hover { background: none; box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.45); }
.btn-outline::before { display: none; }

/* Trailing arrow - opt-in per button, currently the Virtual Consult CTA. */
.btn-glow-arrow { flex: none; transition: transform .28s cubic-bezier(.34, 1.4, .64, 1); }
.btn:hover .btn-glow-arrow { transform: translateX(4px); }

/* Header */
.site-header { background: var(--surface); box-shadow: 0 1px 4px var(--shadow); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 98px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.logo img { height: 75px; }
.nav ul { display: flex; gap: 24px; list-style: none; }
.nav li { position: relative; }
.nav a { font-size: 0.95rem; font-weight: 500; color: var(--text); text-decoration: none; padding: 8px 0; display: block; }
.nav a:hover { color: var(--primary); }
.nav li.active > a { color: var(--primary); }

/* Dropdown Navigation */
.nav .has-dropdown > a::after { content: '▾'; margin-left: 4px; font-size: 0.7em; }
.nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow); min-width: 200px; padding: 8px 0; z-index: 200; flex-direction: column; gap: 0; }
.nav .dropdown-menu li { width: 100%; }
.nav .dropdown-menu a { padding: 10px 20px; white-space: nowrap; font-size: 0.9rem; }
.nav .dropdown-menu a:hover { background: var(--surface-alt); }
.nav .has-dropdown:hover .dropdown-menu { display: flex; }

/* Mobile nav toggle */
.mobile-nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }



.theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); background: var(--bg); border-radius: 50%; cursor: pointer; color: var(--text); transition: all 0.2s; }
.theme-toggle-btn:hover { background: var(--surface-alt); border-color: var(--primary); color: var(--primary); }
.theme-toggle-btn svg { display: block; }

/* Hero */
/* The hero background image renders as an absolutely-positioned <img> (not a
   CSS background-image), so the Image Adjust crop/pan/zoom (object-position +
   transform: scale) applies identically to the live editor preview. .hero
   needs position: relative + overflow: hidden so the image layer positions
   relative to the section and never overflows it. */
.hero { padding: 100px 0; position: relative; overflow: hidden; }
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero > .container { position: relative; z-index: 1; }
.hero-has-bg-img h1 { color: #fff; }
.hero-has-bg-img p { color: rgba(255,255,255,0.9); }
.hero-has-bg-img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 0; }
.hero-fullbleed { min-height: 500px; display: flex; align-items: center; }
.hero-centered { text-align: center; }
.hero-centered .hero-content { max-width: 800px; margin: 0 auto; }
.hero-minimal { min-height: 400px; display: flex; align-items: center; }
.hero h1 { font-size: 3.2rem; margin-bottom: 16px; }
.hero p { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 28px; max-width: 600px; }

/* Sub-page banner */
.page-banner { padding: 60px 0; background: var(--surface-alt); text-align: center; }
.page-banner h1 { font-size: 2.5rem; }

/* Sections */
section { padding: 80px 0; }
section h2 { font-size: 2.2rem; margin-bottom: 16px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.8; }
.about img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* Meet Dr. Sikka: text on the left, portrait on the right with a tight gap.
   The photo's real aspect ratio (250x322, no padding) replaces the shared
   4:3 box - that box was landscape while the source is portrait, which
   forced black pillarbox bars down both sides. Fixed-width second column
   (rather than 1fr 1fr) keeps the gap small without starving the bio text.
   The source is a low-res old scan (500x644 upscaled once already) - capping
   the display width at 320px keeps it under that ceiling so the browser
   downscales instead of stretching it further and breaking up into pixels. */
body.page-meet-dr-sikka .about-grid { grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
body.page-meet-dr-sikka .about-grid img { width: 100%; max-width: 320px; aspect-ratio: 250 / 322; margin: 0; display: block; }



/* Services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.service-card { background: var(--surface); padding: 32px; border-radius: var(--radius); box-shadow: 0 1px 4px var(--shadow); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; color: inherit; display: block; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow); }
.service-icon { font-size: 2.2rem; margin-bottom: 12px; display: block; }
.service-card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.service-card p { color: var(--text-muted); font-size: 0.9rem; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 40px; }
.team-card { text-align: center; }
.team-card img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; box-shadow: 0 4px 12px var(--shadow); overflow: hidden; font-size: 0; color: transparent; }
.team-card h3 { margin-bottom: 4px; }
.team-role { color: var(--primary); font-size: 0.85rem; margin-bottom: 6px; }
.team-bio { color: var(--text-muted); font-size: 0.85rem; }

/* Testimonials */
.testimonials { background: var(--surface); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; }
.testimonial-card { background: var(--bg); padding: 28px; border-radius: var(--radius); border-left: 4px solid var(--primary); }
.testimonial-quote { font-style: italic; color: var(--text); line-height: 1.7; margin-bottom: 12px; }
.testimonial-author { font-weight: 600; }

/* FAQ */
.faq-list { max-width: 700px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--primary); font-size: 1.2rem; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; }



/* CTA */
.cta-banner { background: var(--primary); color: var(--text-inverse); text-align: center; }
.cta-banner h2 { color: var(--text-inverse); }
.cta-banner p { opacity: 0.9; margin-bottom: 24px; font-size: 1.1rem; }
.cta-banner .btn { color: var(--primary); background: linear-gradient(120deg, #ffffff 0%, #f3ecff 50%, #ffffff 100%); background-size: 220% 100%; box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.22); }
.cta-banner .btn:hover { background-position: 100% 0; box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.3); }
/* A white sweep is invisible on a white button, so tint this one. */
.cta-banner .btn::before { background: linear-gradient(100deg, transparent 25%, rgba(124, 58, 237, 0.16) 50%, transparent 75%); }
.cta-card { background: var(--surface); border-radius: var(--radius); padding: 60px 40px; text-align: center; max-width: 700px; margin: 0 auto; box-shadow: 0 4px 16px var(--shadow); }

/* Contact */
.contact-info { text-align: center; margin-top: 20px; }
.contact-info p { margin: 6px 0; color: var(--text-muted); }

/* Map */
.map-section { background: var(--surface); padding: 60px 0; }
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 12px var(--shadow); }

/* Carousel / Gallery */
.carousel { background: var(--surface); padding: 0; }
/* Full-bleed: the wrapper now sits outside .container (see index.html) so it
   can span the viewport edge-to-edge, with no rounded corners and no
   prev/next arrows - dots are the only navigation. */
.carousel-wrapper { position: relative; overflow: hidden; }
/* Height tracks the source photos' own ratio (1920x880), trimmed to ~76% of
   that height. object-fit: cover centers by default, so shrinking the box
   this way crops the same band off the top and bottom of every slide
   uniformly, instead of a fixed 400px box that cropped some photos more
   than others. */
.carousel-track { position: relative; aspect-ratio: 1920 / 669; }
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.carousel-slide.active { opacity: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.carousel-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--border); cursor: pointer; transition: background 0.2s; }
.carousel-dot.active { background: var(--primary); }

/* Footer */
.site-footer { background: #1f2937; color: #d1d5db; padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; margin-bottom: 12px; }
.site-footer p { font-size: 0.9rem; }
.copyright { text-align: center; padding-top: 24px; border-top: 1px solid #374151; margin-top: 24px; font-size: 0.85rem; color: #9ca3af; }



/* Responsive */
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .services-grid { grid-template-columns: 1fr; }
    .nav { display: none; }
    .nav.open { display: block; position: absolute; top: 70px; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 16px 24px; box-shadow: 0 4px 12px var(--shadow); }
    .nav.open ul { flex-direction: column; gap: 0; }
    .nav.open li { padding: 8px 0; }
    .nav .dropdown-menu { position: static; box-shadow: none; border: none; padding-left: 16px; display: flex; }
    .mobile-nav-toggle { display: block; }
}


body { font-size: 16px; font-family: Nunito, sans-serif; line-height: 1.7 }
h1, h2, h3, h4, h5, h6 { font-family: Montserrat, sans-serif; font-weight: 600 }
.btn-primary { padding: 14px 32px; font-size: 16px; font-weight: 700; border-radius: 16px }

.section-cta-1 .subtext { color: rgba(255,255,255,0.9) }
.section-cta-1 .headline { font-size: 36px; color: #ffffff }
.section-cta-1 { padding: 80px 0; text-align: center }
.section-faq-1 .headline { font-size: 36px; text-align: center }
.section-faq-1 { padding: 80px 0 }
.section-hero-1 .subtext { font-size: 18px; max-width: 680px }
.section-hero-1 .headline { font-size: 48px }
.section-hero-1 { padding: 80px 0 40px }
.section-about-1 .body { font-size: 17px }
.section-about-1 .headline { font-size: 36px }
.section-about-1 { padding: 80px 0 }
/* Homepage only: the hero's CTA button sits right above this section's own
   masthead heading, so the usual 80px top padding doubled up with the hero's
   bottom padding into a gap that read as an empty band between them. */
body.page-home .section-about-1 { padding-top: 40px }
.section-header-1 .nav { flex: 1; white-space: nowrap; padding-left: 40px }
.section-header-1 .button { display: none }
.section-hero-page .button { display: none }
.section-hero-page .subtext { font-weight: 700; color: #ffffff }
.section-services-1 .card { padding: 28px; border-radius: 16px }
.section-services-1 .headline { font-size: 36px; text-align: center }
.section-services-1 { padding: 80px 0 }
.section-testimonials-1 .card { padding: 28px; border-radius: 16px }
.section-testimonials-1 .headline { font-size: 36px; text-align: center }
.section-testimonials-1 { padding: 80px 0 }

[data-theme="dark"] .section-cta-1 .subtext { color: rgba(15,11,36,0.9) }
[data-theme="dark"] .section-cta-1 .headline { color: #0f0b24 }
[data-theme="dark"] .section-hero-page .subtext { color: #ffffff }

@media (max-width: 1024px) {
    body { font-size: 15px }
    .section-hero-1 .headline { font-size: 2.25rem }
    .section-hero-1 { padding: 60px 0 }
}

@media (max-width: 768px) {
    body { font-size: 14px }
    .section-hero-1 .headline { font-size: 1.75rem }
    .section-hero-1 { padding: 40px 16px }
    .section-services-1 .card { padding: 16px }
    .section-services-1 { padding: 40px 16px }
}


/* ═══ Booking Section ═══ */
.tr-booking { padding: 3rem 1rem; }
.tr-booking .container { max-width: 1100px; margin: 0 auto; }
.tr-booking-header { text-align: center; margin-bottom: 2rem; }
.tr-booking-header .headline { margin-bottom: 0.5rem; }
.tr-booking-header .subtext { color: var(--text-muted); max-width: 600px; margin: 0 auto; }

.tr-booking-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }

/* Left column: treatment + calendar + slots */
.tr-booking-when { display: flex; flex-direction: column; gap: 1.5rem; }

/* Field groups */
.tr-booking-field-group { display: flex; flex-direction: column; gap: 0.4rem; }
.tr-booking-field-group label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.tr-booking-field-group input,
.tr-booking-field-group select,
.tr-booking-field-group textarea {
    padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius, 6px);
    font-size: 0.95rem; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box;
}
.tr-booking-field-group input:focus,
.tr-booking-field-group select:focus,
.tr-booking-field-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59,130,246), 0.15); }

/* Calendar */
.tr-booking-calendar { border: 1px solid var(--text); border-radius: var(--radius, 8px); padding: 1rem; background: var(--surface); }
.tr-booking-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.tr-booking-calendar-nav button { background: none;  color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.tr-booking-calendar-nav button:hover { background: var(--surface-alt); }
.tr-booking-calendar-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.tr-booking-calendar-nav span { font-weight: 600; font-size: 0.95rem; }

.tr-booking-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; }
.tr-booking-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tr-booking-day { padding: 0.5rem 0; text-align: center; border-radius: 4px; font-size: 0.85rem; cursor: default; color: var(--text-muted); }
.tr-booking-day--available { cursor: pointer; color: var(--text); font-weight: 500; }
.tr-booking-day--available:hover { background: var(--surface-alt); }
.tr-booking-day--selected { background: var(--primary); color: var(--text-inverse, #fff); font-weight: 600; }
.tr-booking-day--today { border: 1px solid var(--primary); }
.tr-booking-day--disabled { opacity: 0.35; cursor: not-allowed; }

/* Slots */
.tr-booking-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 2.5rem; }
.tr-booking-slots-placeholder { color: var(--text-muted); font-size: 0.85rem; font-style: italic; }
.tr-booking-slot { padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius, 6px); background: var(--surface); cursor: pointer; font-size: 0.85rem; transition: all 0.15s; color: var(--text) ;}
.tr-booking-slot:hover { border-color: var(--primary); background: var(--surface-alt); }
.tr-booking-slot--selected { background: var(--primary); color: var(--text-inverse, #fff); border-color: var(--primary); }
.tr-booking-slot--loading { opacity: 0.5; pointer-events: none; }

/* Right column: patient form */
.tr-booking-who { display: flex; flex-direction: column; gap: 1rem; }

/* Summary */
.tr-booking-summary { padding: 0.75rem 1rem; background: var(--surface-alt); border-radius: var(--radius, 6px); border: 1px solid var(--border); }

/* Submit */
.tr-booking-submit { margin-top: 0.5rem; width: 100%; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; }
.tr-booking-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.tr-booking-submit--loading { position: relative; color: transparent; }
.tr-booking-submit--loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--text-inverse, #fff); border-top-color: transparent; border-radius: 50%; animation: booking-spin 0.6s linear infinite; }
@keyframes booking-spin { to { transform: rotate(360deg); } }

/* Form status */
.tr-booking-form-status { font-size: 0.85rem; min-height: 1.5rem; }
.tr-booking-form-status--error { color: #dc2626; }
.tr-booking-form-status--success { color: #16a34a; }

/* Per-field validation */
.tr-booking-field-error { color: #dc2626; font-size: 0.8rem; margin: 0.25rem 0 0; }
.tr-booking-field-group--invalid input,
.tr-booking-field-group--invalid select,
.tr-booking-field-group--invalid textarea { border-color: #dc2626; }
.tr-booking-field-group--invalid input:focus,
.tr-booking-field-group--invalid select:focus,
.tr-booking-field-group--invalid textarea:focus { outline-color: #dc2626; }
.tr-booking-slots--invalid { outline: 1px solid #dc2626; outline-offset: 4px; border-radius: var(--radius, 6px);}

/* ═══ Status View ═══ */
.tr-booking-status-view { padding: 3rem 1rem; }
.tr-booking-status-view .container { max-width: 600px; margin: 0 auto; }
.tr-booking-status-card { text-align: center; padding: 2.5rem 2rem; border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface); }
.tr-booking-status-icon { font-size: 2.5rem; margin-bottom: 1rem; color: #16a34a; }
.tr-booking-status-card h2 { margin-bottom: 0.5rem; }
.tr-booking-status-card > p { color: var(--text-muted); margin-bottom: 1.5rem; }

.tr-booking-status-details { text-align: left; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 1rem; }
.tr-booking-status-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.tr-booking-status-row:last-child { border-bottom: none; }
.tr-booking-status-label { font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
.tr-booking-status-badge { padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }
.tr-booking-status-badge--pending { background: #fef3c7; color: #92400e; }
.tr-booking-status-badge--confirmed { background: #d1fae5; color: #065f46; }
.tr-booking-status-badge--cancelled { background: #fee2e2; color: #991b1b; }
.tr-booking-status-badge--suggested { background: #dbeafe; color: #1e40af; }
.tr-booking-status-badge--rescheduled { background: #dbeafe; color: #1e40af; }

.tr-booking-status-note { color: var(--text-muted); font-size: 0.9rem; margin-top: 1.5rem; }
.tr-booking-status-contact { margin-top: 0.75rem; font-size: 0.9rem; }
.tr-booking-status-contact a { color: var(--primary); text-decoration: none; }

/* ═══ Suggestions view (patient answering staff-proposed times) ═══ */
/* Stacked full-width rows rather than the form's inline chips: there are at most
   three, they carry a full date as well as a time, and one of them is a decision. */
.tr-booking-suggest-slots { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.tr-booking-suggest-slot { padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface); cursor: pointer; font-size: 0.95rem; text-align: left; transition: all 0.15s; }
.tr-booking-suggest-slot:hover { border-color: var(--primary); background: var(--surface-alt); }
.tr-booking-suggest-slot--selected { background: var(--primary); color: var(--text-inverse, #fff); border-color: var(--primary); }
.tr-booking-suggest-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.tr-booking-suggest-decline { background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; text-decoration: underline; padding: 0.5rem; }
.tr-booking-suggest-decline:hover { color: var(--primary); }
.tr-booking-suggest-decline:disabled { opacity: 0.6; cursor: not-allowed; }

/* ═══ Loading skeleton ═══ */
.tr-booking-loading { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.tr-booking-loading::after { content: ''; width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: booking-spin 0.7s linear infinite; }

/* ═══ Responsive ═══ */
@media (max-width: 768px) {
    .tr-booking-body { grid-template-columns: 1fr; }
    .tr-booking-status-card { padding: 1.5rem 1rem; }
}

.contact-hours { margin: 32px auto 0; max-width: 420px; }
.contact-hours h3 { font-size: 1.15rem; text-align: center; margin-bottom: 12px; }
.contact-hours p { text-align: center; color: var(--text-muted); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td { padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 1rem; }
.hours-table th { text-align: left; font-weight: 600; color: var(--text); }
.hours-table td { text-align: right; color: var(--text-muted); white-space: nowrap; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none; }

/* Rich text */
.wb-rich > p,
.wb-rich > ul,
.wb-rich > ol,
.wb-rich li {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
}
.wb-rich > p { margin: 0 0 0.9em; }
.wb-rich > ul, .wb-rich > ol { margin: 0 0 0.9em; padding-left: 1.5em; }
.wb-rich > ul { list-style: disc; }
.wb-rich > ol { list-style: decimal; }
.wb-rich li { margin-bottom: 0.3em; }
.wb-rich > :last-child { margin-bottom: 0; }
.wb-rich a { color: var(--primary); text-decoration: underline; }
.wb-rich strong, .wb-rich b { font-weight: 700; }
.wb-rich em, .wb-rich i { font-style: italic; }
.wb-rich u { text-decoration: underline; }

/* Wrapper-level type styles, mirroring the `X p` rules these fields picked up
   when their wrapper WAS the <p>. */
.about .wb-rich { color: var(--text-muted); font-size: 1.05rem; line-height: 1.8; }
.service-card .wb-rich { color: var(--text-muted); font-size: 0.9rem; }
.faq-item .wb-rich { margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; }

/* Quick contact form */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-form { max-width: 520px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 12px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.95rem; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-muted); letter-spacing: 0.08em; font-size: 0.8rem; text-transform: uppercase; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--surface-alt); }
.contact-form .btn { align-self: flex-start; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-form-note { min-height: 1.4em; margin: 0; font-size: 0.85rem; color: var(--text-muted); }

/* Affiliation logos below the map */
.affiliation-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; margin-top: 32px; }
.affiliation-logos img { height: 64px; width: auto; object-fit: contain; }
@media (max-width: 768px) {
    .affiliation-logos { gap: 24px; }
    .affiliation-logos img { height: 48px; }
}

/* Sub-page banners: these are meant to read as a band, not the whole frame.
   The default object-position (centre) cropped equally off the top and bottom,
   which took the tops of people's heads off. Anchoring to the top keeps the
   subject and drops the floor instead. Height stays content-driven, so no
   page can clip its own copy. */
.hero-bg-img { object-position: center top; }
/* Same problem, same fix: the headshots are 275x367 portraits squeezed into a
   150px circle, so a centred crop trims the top of the head and keeps torso.
   (.about images are 1.5 sources in a 4:3 box - they crop at the sides only,
   so vertical anchoring would do nothing there, and the carousel panels
   already sit fully in frame.) */
.team-card img { object-position: center top; }

/* Homepage About: the scrape flattened this block into one flat run of <p> tags
   inside a half-width grid column, so the sub-headings read as body copy and
   the text was squeezed into a narrow strip. Re-arranged to the live site's
   shape - centred masthead, rule, then a full-width article with the photo
   floated right. Text is untouched; only the elements around it changed. */
.about-masthead { text-align: center; padding-bottom: 28px; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.about-masthead .headline { margin-bottom: 10px; letter-spacing: 0.03em; }
.about-tagline { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.95rem; color: var(--text-muted); margin-bottom: 14px; }
.about-masthead-link a { font-weight: 700; }
/* flow-root contains the floated figure. Without it a short intro lets the
   image hang below its own section and intrude on the next one, which
   shortens that section's line boxes and knocks centred headings askew. */
.about-body { display: flow-root; }
.about-body > .headline { text-align: center; margin-bottom: 28px; }
.about .about-figure { float: right; width: min(38%, 400px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin: 4px 0 24px 32px; }
.about-body .wb-rich h3 { font-size: 1.3rem; margin: 30px 0 10px; letter-spacing: 0.02em; }
.about-body .wb-rich > :first-child { margin-top: 0; }
.about-actions { clear: both; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 36px; }
@media (max-width: 768px) {
    .about .about-figure { float: none; width: 100%; margin: 0 0 24px; }
    .about-actions .btn { width: 100%; text-align: center; }
}

/* Dark mode: --primary lightens, so the label flips to dark ink. */
[data-theme="dark"] .btn { color: #14082b; box-shadow: 0 4px 16px -3px rgba(167, 139, 250, 0.4); }
[data-theme="dark"] .btn:hover { box-shadow: 0 14px 32px -8px rgba(167, 139, 250, 0.55); }
[data-theme="dark"] .btn:disabled:hover, [data-theme="dark"] .btn[disabled]:hover { box-shadow: 0 4px 16px -3px rgba(167, 139, 250, 0.4); }
[data-theme="dark"] .btn-primary { color: #14082b; }
[data-theme="dark"] .btn-outline { color: var(--primary); }
[data-theme="dark"] .cta-banner .btn { color: #4c1d95; }

@media (prefers-reduced-motion: reduce) {
    .btn, .btn::before, .btn-glow-arrow { transition: none; }
    .btn:hover { transform: none; }
    .btn:hover::before { transform: translateX(-130%); }
}

/* ── Testimonials (homepage) ───────────────────────────────────────────────
   Photo with a dark quote panel overlapping its inner edge, one review at a
   time. The listing pages (patient-reviews, testimonials) keep the card grid
   above - a 15-item list should not be paginated one at a time. */
.testimonials.tstm-section { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.tstm { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; margin-top: 44px; }

.tstm-media { grid-area: 1 / 1; margin: 0; }
.tstm-media img { display: block; width: 100%; aspect-ratio: 1105 / 707; object-fit: cover; border-radius: calc(var(--radius) * 1.5); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45); }

/* Sits in column 2 and reaches back over the photo. */
.tstm-panel { grid-area: 1 / 2; position: relative; z-index: 2; margin-left: -18%; padding: 44px 44px 30px; border-radius: calc(var(--radius) * 1.5); color: #fff; background: linear-gradient(150deg, #261c52 0%, #171130 55%, #120e26 100%); box-shadow: 0 30px 70px -24px rgba(43, 20, 92, 0.65); }
/* Oversized opening quote, purely decorative. */
.tstm-panel::before { content: "“"; position: absolute; top: 10px; right: 34px; font-family: Georgia, serif; font-size: 128px; line-height: 1; color: var(--primary); opacity: 0.26; pointer-events: none; }

.tstm-slides { min-height: 200px; }
.tstm-eyebrow { margin: 0 0 18px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #b9a3ff; }

/* All slides share one grid cell, so the panel is sized by the longest quote
   and never jumps height when the review changes. */
/* The active slide is in normal flow, the rest are pulled out of it, so the
   panel is exactly as tall as the quote on screen - no padding out to the
   longest one - and it still works with JS disabled. The outgoing quote
   fades before the incoming one arrives, which hides the height change. */
.tstm-slides { position: relative; }
.tstm-slide { position: absolute; inset: 0 0 auto; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .26s ease, transform .26s ease, visibility .26s; }
.tstm-slide.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .12s, transform .45s ease .12s; }
.tstm-quote { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.75; font-style: italic; color: rgba(255, 255, 255, 0.92); }
.tstm-author { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }

.tstm-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tstm-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.tstm-arrow:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.tstm-arrow:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.tstm-dots { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tstm-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: width .3s ease, background .3s ease; }
.tstm-dot:hover { background: rgba(255, 255, 255, 0.55); }
.tstm-dot.is-active { width: 26px; background: var(--primary); }
.tstm-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 900px) {
    .tstm { grid-template-columns: 1fr; }
    .tstm-media { grid-area: 1 / 1; }
    .tstm-panel { grid-area: 2 / 1; margin: -52px 20px 0; padding: 34px 28px 24px; }
    .tstm-panel::before { font-size: 100px; right: 20px; }
}
@media (max-width: 560px) {
    .tstm-panel { margin: -36px 0 0; padding: 28px 22px 20px; }
    .tstm-panel::before { font-size: 84px; right: 12px; }
    .tstm-nav { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .tstm-slide, .tstm-arrow, .tstm-dot { transition: none; }
    .tstm-arrow:hover { transform: none; }
}

/* Dark mode: the light-mode panel is darker than the dark page background,
   so it disappears. Invert the relationship - panel lighter than the page,
   with a rim light and a purple cast instead of a black drop shadow. */
[data-theme="dark"] .testimonials.tstm-section { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
[data-theme="dark"] .tstm-panel { background: linear-gradient(150deg, #342a63 0%, #271f4c 55%, #201a3d 100%); border: 1px solid rgba(167, 139, 250, 0.22); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(167, 139, 250, 0.06); }
[data-theme="dark"] .tstm-media img { box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.8); }
[data-theme="dark"] .tstm-eyebrow { color: #c9b8ff; }
[data-theme="dark"] .tstm-panel::before { opacity: 0.34; }

/* ── Blog index ────────────────────────────────────────────────────────────
   Replaces the old accordion listing, which hid every post behind a <details>
   and kept the copy out of search results. */
.section-blog-index { padding: 80px 0; }
.blog-intro { max-width: 680px; margin: 0 auto 32px; text-align: center; color: var(--text-muted); font-size: 1.05rem; }

.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.blog-filter { padding: 9px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-muted); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.blog-filter:hover { color: var(--primary); border-color: var(--primary); }
.blog-filter.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.blog-filter:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.blog-filter-n { opacity: .65; font-size: .8em; margin-left: 2px; }
[data-theme="dark"] .blog-filter.is-active { color: #14082b; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
/* [hidden] only sets display:none in the UA stylesheet, so the author-level
   display below outranks it. Without this the filter sets the attribute
   and nothing visibly changes. */
.blog-card[hidden] { display: none; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.blog-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px -16px rgba(124, 58, 237, .35); }
.blog-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.blog-card-media { display: block; aspect-ratio: 3 / 2; background: var(--surface-alt); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .4s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex: 1; }
.blog-card-cat { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.blog-card-title { font-family: var(--font-heading); font-size: 1.12rem; line-height: 1.3; color: var(--text); }
.blog-card-excerpt { font-size: .92rem; line-height: 1.65; color: var(--text-muted); flex: 1; }
.blog-card-meta { font-size: .8rem; color: var(--text-muted); opacity: .85; margin-top: 4px; }
.blog-empty { text-align: center; color: var(--text-muted); margin-top: 32px; }

/* ── Single post ──────────────────────────────────────────────────────────
   One readable measure; no sidebar competing with the copy. */
.section-post-1 { padding: 64px 0 80px; }
.post-container { max-width: 760px; }
.post-back a { font-weight: 600; font-size: .92rem; }
.post-back-end { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 22px; font-size: .85rem; color: var(--text-muted); }
.post-cat { padding: 5px 13px; border-radius: 999px; background: var(--surface-alt); color: var(--primary); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.post-hero { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; border-radius: var(--radius); margin-bottom: 34px; }
.post-body { font-size: 1.06rem; line-height: 1.85; color: var(--text); }
.post-body h2 { font-size: 1.5rem; margin: 38px 0 12px; }
.post-body h3 { font-size: 1.2rem; margin: 28px 0 10px; }
.post-body p { margin: 0 0 1.1em; }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: .5em; }
.post-body a { color: var(--primary); text-decoration: underline; }
.post-body > :first-child { margin-top: 0; }

@media (max-width: 640px) {
    .section-blog-index, .section-post-1 { padding: 48px 0 56px; }
    .blog-grid { grid-template-columns: 1fr; gap: 22px; }
    .post-body { font-size: 1rem; }
}

/* ── Patient Forms ─────────────────────────────────────────────────────────
   The scrape flattened this page into one column of <p> tags, so the section
   headings read as body copy and the download links were pipe-separated text.
   Reuses .about-body / .about-figure so it matches the homepage About block. */
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.form-row-label { font-weight: 600; color: var(--text); margin-right: 4px; }
.form-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.form-chip:hover { background: var(--primary); border-color: var(--primary); color: #fff; text-decoration: none; }
.form-chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
[data-theme="dark"] .form-chip:hover { color: #14082b; }

/* Download lists read better as rows than as bulleted links. Scoped to this
   page: the homepage About block shares .about-body and its list is ordinary
   bulleted prose, which list-style:none would strip. */
body.page-patient-forms .about-body .wb-rich ul { list-style: none; padding-left: 0; }
body.page-patient-forms .about-body .wb-rich li { margin-bottom: 8px; }
body.page-patient-forms .about-body .wb-rich li > a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .2s, background .2s, transform .2s; }
body.page-patient-forms .about-body .wb-rich li > a::before { content: "\2193"; font-size: .95em; opacity: .7; }
body.page-patient-forms .about-body .wb-rich li > a:hover { border-color: var(--primary); background: var(--surface); transform: translateX(2px); }

.pdf-note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); }

/* Second masthead CTA, stacked under the Virtual Consult button. */
.about-masthead-pay { margin-top: 14px; }

/* Accordion bodies can now hold steps, not just a paragraph. */
.faq-item ol, .faq-item ul { margin: 12px 0 4px; padding-left: 1.5em; color: var(--text-muted); font-size: .95rem; }
.faq-item ol { list-style: decimal; }
.faq-item ul { list-style: disc; }
.faq-item li { margin-bottom: 10px; line-height: 1.7; }
.faq-item strong { color: var(--text); }
.faq-item a { text-decoration: underline; }

/* ── Teledentistry request steps ───────────────────────────────────────────
   Page content, not an accordion: these are the instructions for actually
   requesting a visit, so they should be readable without a click. */
.section-steps-1 { padding: 0 0 72px; }
.steps-container { max-width: 860px; }
.section-steps-1 .wb-rich { color: var(--text-muted); font-size: 1.02rem; line-height: 1.8; }
.section-steps-1 .wb-rich strong { color: var(--text); }
.section-steps-1 .wb-rich > ol { margin: 18px 0; padding-left: 1.6em; }
.section-steps-1 .wb-rich li { margin-bottom: 14px; }
.section-steps-1 .wb-rich li::marker { color: var(--primary); font-weight: 700; }
.section-steps-1 .wb-rich > p:last-child { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .section-steps-1 { padding-bottom: 48px; } }