:root {
    /* === RE-SAMPLED FROM ACTUAL SCREEN-RECORDING PIXELS (higher confidence than the earlier
       JPEG-based guess, but still not the real CSS source — verify against Lovable export
       if pixel-perfect match is required) === */
    --navy-950: #1c1650;
    --navy-900: #25207f;
    --navy-800: #2a1e5f;
    --purple-600: #483986;
    --purple-500: #4a2f9e;
    --sky-100: #eaf6fc;
    --sky-200: #cdeaf7;
    --accent-sky: #2ba2d9;
    --ink: #291e81;
    --ink-soft: #4b4570;
    --white: #ffffff;
    --footer-bg: #eceff3;
    --gold: #f2b632;
    --line: rgba(255,255,255,0.14);

    /* Font family is a visual approximation of a rounded/geometric sans seen in the
       recording — I could not confirm the exact typeface. Verify against source if this matters. */
    --font-display: 'Poppins', 'Quicksand', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-pill: 999px;
    --radius-lg: 20px;
    --radius-md: 14px;

    --container: 1180px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  /* ---------- Accessibility: skip-to-content link ---------- */
  /* Off-screen until keyboard-focused (WCAG 2.4.1 Bypass Blocks) — lets keyboard and screen
     reader users jump straight past the repeated header/nav on every page. */
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--navy-900); color: var(--white);
    padding: 12px 22px; border-radius: 0 0 10px 0;
    font-weight: 600; font-size: 14px; text-decoration: none;
  }
  .skip-link:focus { left: 0; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; }
  /* Prevents awkward single-word "orphan" line breaks in headings and body text as the layout
     resizes across screen widths — e.g. a heading breaking into "Your smile is our" / "priority"
     on one lone line. Pure progressive enhancement: browsers without support (Firefox lacks
     `pretty` specifically, as of early 2026) just fall back to normal wrapping — no breakage
     either way, just no extra polish there. */
  h1, h2, h3, .stat-label, .doctor-role, .section-eyebrow, .eyebrow { text-wrap: balance; }
  p, .testimonial-text, .doctor-bio, .doctor-quote { text-wrap: pretty; }

  /* ---------- Reveal-on-scroll: safe by default, never permanently hidden ---------- */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s ease;
  }
  .js-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
  }
  .js-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .js-ready .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* Staggered children: containers marked .stagger keep their own children hidden until the
     container is revealed, then reveal each child with an increasing delay (nth-child-based)
     for a cascading, card-by-card animation — closer to the Lovable reference than the whole
     grid appearing as one block. */
  .js-ready .stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .js-ready .stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
  .stagger > *:nth-child(1) { transition-delay: 0ms; }
  .stagger > *:nth-child(2) { transition-delay: 90ms; }
  .stagger > *:nth-child(3) { transition-delay: 180ms; }
  .stagger > *:nth-child(4) { transition-delay: 270ms; }
  .stagger > *:nth-child(5) { transition-delay: 360ms; }
  .stagger > *:nth-child(6) { transition-delay: 450ms; }
  @media (prefers-reduced-motion: reduce) {
    .js-ready .stagger > * { opacity: 1; transform: none; transition: none; }
  }
  /* When a container is both .reveal and .stagger, let only the children animate —
     the container itself should stay visible so it doesn't double up with its children's fade. */
  .js-ready .reveal.stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ---------- Header ---------- */
  /* Simplified design: header stays transparent-over-video at the very top, then becomes a
     solid navy bar once scrolled — background changes, but text/logo color never does (always
     white). This replaces an earlier design that swapped between a white logo and a navy logo
     depending on scroll state; that dual-logo swap was the likely cause of a real bug where the
     logo could flash invisible when scrolling back to the top. Keeping one logo color and only
     ever changing the background removes that failure point entirely rather than patching it. */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: transparent;
    transition: background .25s ease, box-shadow .25s ease;
  }
  .site-header.scrolled {
    background: var(--navy-900);
    box-shadow: 0 2px 14px rgba(0,0,0,0.15);
  }
  .site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 76px;
  }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 600; }
  .brand img { height: 34px; width: auto; }
  /* Only the white logo is used now — always visible, since the header background is always
     either transparent-over-dark-video or solid navy, both of which the white logo reads
     clearly against. The navy logo variant is unused here but kept in assets/ in case a
     light-background header treatment is wanted somewhere else later. */
  .brand .logo-navy { display: none; }
  .nav-links { display: none; gap: 28px; color: var(--white); font-size: 14.5px; }
  .nav-links a { opacity: .85; }
  .nav-links a:hover { opacity: 1; }
  .nav-call {
    background: var(--white); color: var(--navy-900);
    padding: 10px 20px; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 600; white-space: nowrap;
  }
  /* About dropdown — mirrors the real site's nav structure (About Us / Our Doctors /
     New Patient / Office Hours grouped under a single "About" item). */
  .nav-dropdown { position: relative; }
  .nav-dropdown > a { display: flex; align-items: center; gap: 5px; cursor: pointer; }
  .nav-dropdown-menu {
    position: absolute; top: 100%; left: 0; margin-top: 14px;
    background: var(--white); border-radius: 12px; box-shadow: 0 16px 40px rgba(37,32,127,0.18);
    padding: 8px; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav-dropdown-menu a {
    display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink) !important;
    font-size: 14px; opacity: 1 !important;
  }
  .nav-dropdown-menu a:hover { background: var(--sky-100); }
  /* Recording showed a hamburger-only nav even at wide widths — reproducing that exactly is
     an odd default for desktop, so I've kept a conventional responsive breakpoint here instead.
     Flag if you specifically want hamburger-always-on. */
  @media (min-width: 900px) { .nav-links { display: flex; } }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    background: var(--navy-950);
    color: var(--white);
    overflow: hidden;
    padding: 90px 0 60px;
    /* min-height: the background video's sizing math (further down) assumes this container is
       a full 100vh tall. Without an explicit height here, the box was only ever as tall as its
       content needed — often well under 100vh — while the video was still being sized as if it
       had a full 100vh to fill. On a large monitor, 100vh is a much bigger absolute pixel height
       than that content-driven box, so the oversized video got clipped hard by this section's
       overflow:hidden, cropping out a large chunk (likely including the subject's face) — this
       was the "video looks cut in half on a 32-inch screen" bug. Giving the container a real
       min-height of 100vh makes it actually match what the video math assumes.
       IMPORTANT — do not add `display:flex; align-items:center` here again: an earlier version
       of this fix did, to vertically center the text content, but that broke mobile — when the
       stacked content (headline, subtext, buttons, stats, ticker) is taller than 100vh, which
       is common on a narrow phone screen, centering pushes the excess equally off the top AND
       bottom, and overflow:hidden clips both — silently hiding the stats/testimonial row. Plain
       top-aligned block flow (the default, left as-is below) has no such failure mode regardless
       of how tall the content gets relative to the 100vh minimum — it just adds empty space
       below on short-content/tall-viewport combinations, which is harmless.
       See the -76px margin-top below for a related but separate fix (header/hero overlap). */
    min-height: 100vh;
    /* The header is `position: sticky`, which still occupies its own normal 76px of layout
       space at the top of the page (sticky elements only "stick" once you scroll past their
       original position — they don't remove themselves from flow like fixed/absolute would).
       Without this negative margin, the hero simply starts *below* that 76px, leaving the
       header sitting on the plain white body background instead of overlapping the hero's own
       navy/video background — which is what was actually causing the white strip at the top,
       independent of the video issue. This pulls the hero up underneath the header so the
       header's transparent background has the hero's own background to show through instead of
       the page background. The 90px top padding below already provides clearance so the
       hero's own headline text isn't hidden under the header once pulled up.
       Note: repeat this exact -76px margin-top on any other page's equivalent top section if
       one is ever added, since it depends on the header's height matching (currently 76px). */
    margin-top: -76px;
  }
  .hero > .container { width: 100%; }
  .hero-video-wrap {
    position: absolute; inset: 0; overflow: hidden;
  }
  .hero-video-wrap iframe {
    position: absolute; top: 50%; left: 50%; width: 177.77vh; height: 100vh;
    min-width: 100%; min-height: 56.25vw;
    transform: translate(-50%, -50%); pointer-events: none;
    /* Critical fallback: an <iframe> always defaults to a white background of its own,
       completely independent of any CSS on its parent — this is true regardless of what the
       parent or .hero sets. Since this iframe is sized to cover the entire hero, if the video
       is ever slow, blocked (ad blockers, restrictive network policies, some preview/sandboxed
       environments), or simply hasn't loaded yet, that default white shows through and covers
       the .hero navy fallback completely, no matter how it's styled. Setting the iframe's own
       background here is the fix — not a preview-only issue, this could show up for real
       visitors too under slow or blocked conditions. */
    background: var(--navy-950);
  }
  /* The blue/navy tint sits ON TOP of the video as its own layer, at partial opacity,
     so the video reads clearly through it — matches what's visible in the reference
     recording (a person's face is clearly visible behind the tint in the hero). */
  .hero-tint {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(37,32,127,0.72) 0%, rgba(43,162,217,0.42) 100%);
    z-index: 1;
  }
  .hero-inner { position: relative; z-index: 2; max-width: 720px; }
  /* Hero load-in animation: staggered fade-up on page load, since the hero is above the
     fold and can't rely on scroll-triggered reveal. Each direct child animates in with
     an increasing delay for a cascading effect. */
  .hero-inner > * {
    opacity: 0;
    transform: translateY(22px);
    animation: hero-in .8s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-inner > *:nth-child(1) { animation-delay: .05s; }
  .hero-inner > *:nth-child(2) { animation-delay: .15s; }
  .hero-inner > *:nth-child(3) { animation-delay: .25s; }
  .hero-inner > *:nth-child(4) { animation-delay: .38s; }
  .hero-inner > *:nth-child(5) { animation-delay: .5s; }
  @keyframes hero-in {
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-inner > * { animation: none; opacity: 1; transform: none; }
  }
  .eyebrow {
    display: inline-block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(255,255,255,0.1); border: 1px solid var(--line);
    padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: 22px;
  }
  .hero h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 600; }
  .hero h1 em { font-style: normal; color: var(--gold); }
  .hero p.lede { margin-top: 18px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 520px; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px;
    border: 1px solid transparent; cursor: pointer;
  }
  .btn-primary { background: var(--white); color: var(--navy-900); }
  .btn-primary:hover { background: var(--sky-200); }
  .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
  .btn-outline:hover { border-color: var(--white); }

  .hero-stats {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-top: 54px; max-width: 640px;
  }
  .stat-card {
    background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 16px 14px;
  }
  .stat-num { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
  .stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,0.7); margin-top: 4px; }

  /* On narrow phones, 3 equal columns leaves ~70px of usable text width per card — fine for
     "500+" but not for the full-sentence testimonial that now lives in the 3rd slot (can wrap
     to 6+ lines and look badly lopsided next to its short siblings). Switch to 2 columns and
     let the testimonial span full width instead, where it actually has room. */
  @media (max-width: 640px) {
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .testimonial-rotator { grid-column: 1 / -1; }
  }

  .hero-ticker {
    position: relative; z-index: 2; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 13px; color: rgba(255,255,255,0.65); letter-spacing: .02em;
  }

  /* ---------- Section shell ---------- */
  section { padding: 88px 0; }
  .section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
  .section-eyebrow { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--purple-500); font-weight: 700; }
  .section-head h2 { font-size: clamp(26px, 4vw, 38px); margin-top: 10px; color: var(--ink); }
  .section-head p { margin-top: 14px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

  /* ---------- Services ---------- */
  .services { background: var(--sky-100); }
  .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
  .tab-btn {
    padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid rgba(21,15,60,0.15);
    background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  }
  .tab-btn.active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
  .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .service-card {
    background: var(--white); border-radius: var(--radius-lg); padding: 26px;
    border: 1px solid rgba(21,15,60,0.08);
  }
  .service-card h3 { font-size: 19px; color: var(--ink); }
  .service-card p { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
  .service-panel { display: none; }
  .service-panel.active { display: grid; }

  /* ---------- Why us ---------- */
  .why-us .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
  .why-us h2 { font-size: clamp(26px, 4vw, 36px); }
  .why-us p.lede { color: var(--ink-soft); margin-top: 16px; line-height: 1.65; font-size: 16px; }
  .why-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
  .why-list li { display: flex; gap: 12px; font-size: 15.5px; color: var(--ink); }
  .why-list li::before { content: "✓"; color: var(--purple-500); font-weight: 700; }
  .why-panel {
    background: linear-gradient(160deg, var(--navy-900), var(--purple-500));
    border-radius: var(--radius-lg); padding: 34px; color: var(--white);
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  }
  .why-panel .stat-num { font-size: 30px; }
  @media (max-width: 860px) { .why-us .container { grid-template-columns: 1fr; } }

  /* ---------- Doctors ---------- */
  .doctors { background: var(--sky-100); }
  .doctor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
  .doctor-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(21,15,60,0.08); }
  .doctor-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 20%; }
  .doctor-body { padding: 22px; }
  .doctor-body h3 { font-size: 18.5px; }
  .doctor-role { font-size: 13px; color: var(--purple-500); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
  .doctor-quote { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; font-style: italic; }
  .doctor-bio { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.55; }
  .doctor-profile-link, .panel-link { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--purple-500); }
  .doctor-profile-link:hover, .panel-link:hover { text-decoration: underline; }

  /* ---------- Testimonials ---------- */
  .testimonial-card {
    max-width: 640px; margin: 0 auto; text-align: center;
    background: var(--white); border: 1px solid rgba(21,15,60,0.08); border-radius: var(--radius-lg);
    padding: 40px 32px;
  }
  .testimonial-card p { font-size: 18px; line-height: 1.6; color: var(--ink); font-style: italic; }
  .testimonial-card .name { margin-top: 16px; font-size: 14px; color: var(--ink-soft); font-weight: 600; font-style: normal; }
  .testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
  .testimonial-grid .testimonial-card { max-width:none; margin:0; padding:28px 24px; }
  .testimonial-grid .testimonial-card p { font-size:16px; }
  .testimonial-grid .testimonial-stars { color:#f5a623; letter-spacing:2px; margin-bottom:10px; }
  .testimonial-cta { text-align:center; margin-top:28px; }
  .placeholder-flag {
    display: inline-block; margin-top: 14px; font-size: 11.5px; padding: 4px 10px;
    background: #fff3cd; color: #7a5b00; border-radius: 6px; font-style: normal;
  }

  /* ---------- FAQ ---------- */
  .faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
  .faq-item { border: 1px solid rgba(21,15,60,0.1); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
  .faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 18px 22px; font-size: 15.5px; font-weight: 600; color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .faq-q .icon { transition: transform .25s ease; font-size: 18px; color: var(--purple-500); }
  .faq-item.open .faq-q .icon { transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 22px; }
  .faq-item.open .faq-a { max-height: 220px; padding-bottom: 18px; }
  .faq-a p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

  /* ---------- Contact / CTA ---------- */
  .cta {
    background: linear-gradient(140deg, var(--navy-900), var(--purple-600));
    color: var(--white); text-align: center; border-radius: var(--radius-lg);
    margin: 0 24px; padding: 64px 32px;
  }
  .cta h2 { font-size: clamp(24px, 4vw, 34px); }
  .cta p { margin-top: 12px; color: rgba(255,255,255,0.8); font-size: 15.5px; }
  .cta .hero-ctas { justify-content: center; margin-top: 28px; }

  /* ---------- Footer ---------- */
  /* Corrected: real footer is a light neutral background with navy text/icons, not dark navy. */
  footer { background: var(--footer-bg); color: var(--ink-soft); padding: 64px 0 110px; }
  body { padding-bottom: 0; } /* sticky-bar is position:fixed, so it floats over content; footer's extra bottom padding keeps it clear */
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  .footer-brand { color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 10px; }
  .footer-brand img { height: 30px; }
  .footer-tag { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
  footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 14px; }
  footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
  footer ul a:hover { color: var(--navy-900); }
  .footer-social { display: flex; gap: 12px; margin-top: 4px; }
  .footer-social a {
    width: 40px; height: 40px; border-radius: 50%; background: var(--navy-900);
    color: var(--white); display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .footer-bottom {
    margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(41,30,129,0.12);
    /* Was rgba(41,30,129,0.5) — measured contrast against --footer-bg was 2.92:1, failing
       WCAG AA's 4.5:1 minimum for normal-size text. var(--ink-soft) gives 7.64:1 here. */
    font-size: 13px; color: var(--ink-soft);
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  }
  @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }

  /* ---------- Sticky bottom bar: split into two independent halves (Call / Book Now) ---------- */
  .sticky-bar {
    position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 60;
    display: flex; border-radius: var(--radius-pill); overflow: hidden;
    box-shadow: 0 12px 30px rgba(37,32,127,0.35);
  }
  .sticky-bar-half {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 14px; font-weight: 700; font-size: 15px; text-align: center;
    transition: background .15s ease;
  }
  .sticky-bar-call { background: var(--navy-800); color: var(--white); }
  .sticky-bar-call:hover { background: var(--navy-900); }
  .sticky-bar-book { background: var(--white); color: var(--navy-900); }
  .sticky-bar-book:hover { background: var(--sky-100); }

/* ================= Shared additions: dropdown nav + inner-page header/hero ================= */

.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(21,15,60,0.16);
  min-width: 220px; padding: 10px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 80;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 14px; color: var(--ink); font-weight: 500;
}
.nav-dropdown-menu a:hover { background: var(--sky-100); color: var(--navy-900); }

/* Mobile nav toggle — the original build never gave mobile a way to reach nav links
   beyond the call button; adding dedicated pages makes that gap worth fixing. */
.nav-toggle {
  display: flex; background: none; border: 1px solid var(--line); color: var(--white);
  width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; transition: color .25s ease, border-color .25s ease;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-menu {
  display: none; position: fixed; inset: 76px 0 0 0; background: var(--white); z-index: 55;
  padding: 20px 24px; overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 14px 4px; font-size: 16px; color: var(--ink); border-bottom: 1px solid rgba(21,15,60,0.08); }
.mobile-menu .mobile-sub a { padding-left: 20px; font-size: 14.5px; color: var(--ink-soft); }
@media (min-width: 900px) { .mobile-menu { display: none !important; } }

/* Inner-page hero — a lighter-weight banner for non-Home pages, using the same navy/sky
   palette, but no video (keeps other pages fast and focused). */
.page-hero {
  background: linear-gradient(135deg, var(--navy-900), var(--purple-600));
  color: var(--white); padding: 130px 0 60px; text-align: center;
  /* Same fix as .hero: pulls this section up underneath the sticky header, which otherwise
     just sits on the plain white body background above it instead of overlapping. */
  margin-top: -76px;
}
.page-hero .section-eyebrow { color: var(--accent-sky); }
.page-hero h1 { font-size: clamp(30px, 5vw, 46px); margin-top: 10px; }
.page-hero p { margin-top: 14px; color: rgba(255,255,255,0.82); max-width: 560px; margin-left: auto; margin-right: auto; }

.content-section { padding: 72px 0; }
.content-narrow { max-width: 760px; margin: 0 auto; }
.content-narrow p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 0 20px; }
.content-narrow h2 { font-size: 26px; color: var(--ink); margin: 40px 0 16px; }
.content-narrow h2:first-child { margin-top: 0; }

.pill-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }

.doc-download {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy-900); color: var(--white); padding: 14px 24px;
  border-radius: var(--radius-pill); font-weight: 600; font-size: 14.5px; margin-top: 8px;
}
.doc-download:hover { background: var(--navy-800); }

.info-card {
  background: var(--sky-100); border-radius: var(--radius-lg); padding: 28px;
  display: grid; gap: 14px; max-width: 420px; margin: 0 auto;
}
.info-card .row { display: flex; justify-content: space-between; font-size: 15px; }
.info-card .row span:first-child { color: var(--ink-soft); }
.info-card .row span:last-child { font-weight: 600; color: var(--ink); }

.quote-block {
  text-align: center; max-width: 620px; margin: 48px auto 0; padding: 32px;
  border-top: 1px solid rgba(21,15,60,0.1); border-bottom: 1px solid rgba(21,15,60,0.1);
}

/* ---------- Insurance provider list (Financing & Insurance page) ---------- */
.insurance-panel {
  background: var(--sky-100); border-radius: var(--radius-lg); padding: 36px;
  max-width: 900px; margin: 0 auto;
}
.insurance-group { margin-bottom: 22px; }
.insurance-group:last-child { margin-bottom: 0; }
.insurance-group h3 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--purple-500);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px;
}
.insurance-group ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 28px;
}
@media (min-width: 700px) { .insurance-group ul { columns: 3; } }
.insurance-group li {
  font-size: 14px; color: var(--ink); line-height: 1.6; break-inside: avoid;
  padding: 3px 0;
}
.insurance-note {
  text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 24px;
}
.quote-block p { font-style: italic; font-size: 18px; color: var(--ink); }
.quote-block cite { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); font-style: normal; }

.back-home-link { display: inline-block; margin-bottom: 24px; font-size: 14px; color: var(--purple-500); font-weight: 600; }

/* ---------- Language toggle (header + footer) ---------- */
.lang-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
}
.lang-toggle a {
  padding: 4px 8px; border-radius: 6px; opacity: .6; transition: opacity .15s ease;
}
.lang-toggle a.active { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.lang-toggle a:hover { opacity: 1; }
.lang-toggle .divider { opacity: .4; }

/* Header placement: sits just left of the phone button */
.header-lang-toggle { color: var(--white); margin-right: 6px; }

/* Footer placement: small, sits in the footer-bottom row */
.footer-lang-toggle { color: var(--ink-soft); }
.footer-lang-toggle a { color: var(--ink-soft); }
.footer-lang-toggle a.active { color: var(--navy-900); }

@media (max-width: 640px) {
  .header-lang-toggle { display: none; } /* shown inside mobile menu instead, see .mobile-lang-toggle */
}
.mobile-lang-toggle {
  display: none; padding: 14px 4px 4px; margin-top: 8px; border-top: 1px solid rgba(21,15,60,0.08);
}
@media (max-width: 640px) {
  .mobile-lang-toggle { display: flex; }
}

/* ---------- Booking form (Contact section) ---------- */
.booking-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 36px; max-width: 620px; margin: 40px auto 0;
  box-shadow: 0 20px 50px rgba(37,32,127,0.12);
  text-align: left;
}
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.booking-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.booking-field.full { grid-column: 1 / -1; }
.booking-field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.booking-field input, .booking-field select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  border: 1.5px solid rgba(21,15,60,0.15); border-radius: 10px;
  padding: 12px 14px; background: var(--white); outline: none;
  transition: border-color .15s ease;
}
/* border-color alone was too subtle a focus indicator (WCAG 2.4.7) for keyboard users —
   the box-shadow ring makes the focused field unambiguous. */
.booking-field input:focus, .booking-field select:focus {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 3px rgba(74,47,158,0.25);
}
.booking-field select { cursor: pointer; }
.booking-submit {
  width: 100%; margin-top: 8px; border: none; cursor: pointer;
  padding: 16px 26px; border-radius: var(--radius-pill); font-weight: 700; font-size: 15.5px;
  background: var(--navy-900); color: var(--white); transition: background .15s ease, opacity .15s ease;
}
.booking-submit:hover:not(:disabled) { background: var(--purple-500); }
.booking-submit:disabled { background: #C8C4DE; color: rgba(255,255,255,0.85); cursor: not-allowed; }
.booking-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.booking-status { font-size: 13.5px; margin-top: 12px; text-align: center; min-height: 18px; color: var(--purple-500); font-weight: 600; }
.booking-alt-contact {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 28px; flex-wrap: wrap;
}
.booking-alt-contact .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); }
.booking-alt-contact .btn-outline:hover { border-color: var(--white); }
.booking-alt-label { font-size: 13px; color: rgba(255,255,255,0.7); width: 100%; text-align: center; margin-bottom: 4px; }

@media (max-width: 560px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-card { padding: 26px 20px; }
}

/* Secondary "Call" link next to the new primary "Book Now" header button */
.nav-call-secondary {
  font-size: 13px; font-weight: 600; color: var(--white); opacity: .8;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; margin-right: 4px;
}
.nav-call-secondary:hover { opacity: 1; }
@media (max-width: 480px) {
  .nav-call-secondary-num { display: none; } /* keep just the phone icon on very small screens */
}

/* ---------- Hero testimonial rotator (replaces the "18 Services Offered" stat card) ---------- */
.testimonial-rotator {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 84px;
}
.testimonial-stars { color: #f2c14e; font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; }
.testimonial-text {
  font-size: 13.5px; line-height: 1.4; color: var(--white); font-style: italic;
  opacity: 1; transition: opacity .35s ease;
}
.testimonial-text.fading { opacity: 0; }
.testimonial-author {
  display: block; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,0.65);
  font-style: normal; text-decoration: none;
}
.testimonial-author:hover { color: rgba(255,255,255,0.9); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-text { transition: none; }
}

  .doctor-photo-placeholder { width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--navy-900), var(--purple-600)); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 56px; letter-spacing: .04em; }

/* Clickable testimonial cards (link to Google Business Profile) */
a.testimonial-link { display:block; color:inherit; text-decoration:none; transition:transform .2s, box-shadow .2s; }
a.testimonial-link:hover, a.testimonial-link:focus-visible { transform:translateY(-3px); box-shadow:0 10px 28px rgba(21,15,60,0.12); }
.testimonial-more { display:block; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--purple-500); font-style:normal; }

/* Hero location pill as a Google Maps directions link */
a.eyebrow-link { text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
a.eyebrow-link:hover, a.eyebrow-link:focus-visible { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }

/* Jotform embedded booking widget */
.jotform-wrap { min-height: 120px; }

/* Jotform widget: give the card extra room so the form is not squeezed or cut off */
.booking-card.jotform-wrap { max-width: 780px; padding: 24px; overflow: visible; }
.booking-card.jotform-wrap iframe { max-width: 100% !important; }
@media (max-width: 640px) { .booking-card.jotform-wrap { padding: 12px; } }

/* ---- Individual service pages + clickable service cards ---- */
a.service-card { display: block; color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.service-card:hover, a.service-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37,32,127,0.12); border-color: var(--purple-500); }
a.service-card:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }
.card-more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--purple-500); }
a.service-card:hover .card-more { text-decoration: underline; }

.svc-intro p { font-size: 17.5px; }
.svc-h2 { font-size: 26px; color: var(--ink); margin: 56px 0 20px; text-align: center; }
.svc-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.svc-benefit { background: var(--sky-100); border-radius: var(--radius-lg); padding: 24px; }
.svc-benefit h3 { font-size: 17.5px; color: var(--ink); margin-top: 10px; }
.svc-benefit p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.svc-check { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 15px; font-weight: 700; }
.svc-good { max-width: 760px; margin: 56px auto 0; background: var(--white); border: 1px solid rgba(21,15,60,0.1); border-radius: var(--radius-lg); padding: 30px; }
.svc-good .svc-h2 { text-align: left; font-size: 23px; margin-bottom: 10px; }
.svc-good p { color: var(--ink-soft); margin: 0 0 12px; }
.svc-good ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink); line-height: 1.55; }
.svc-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; display: grid; gap: 16px; }
.svc-step { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid rgba(21,15,60,0.08); border-radius: var(--radius-lg); padding: 20px 22px; }
.svc-num { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--purple-500); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.svc-step h3 { font-size: 17.5px; color: var(--ink); margin: 0; }
.svc-step p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.svc-inline-cta { text-align: center; margin-top: 40px; }
.svc-faqs { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.svc-faq { border: 1px solid rgba(21,15,60,0.1); border-radius: var(--radius-md); background: var(--white); padding: 0 22px; }
.svc-faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; color: var(--purple-500); font-size: 20px; line-height: 1; }
.svc-faq[open] summary::after { content: "–"; }
.svc-faq p { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
.svc-disclaimer { max-width: 760px; margin: 18px auto 0; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.svc-cta { background: linear-gradient(135deg, var(--navy-900), var(--purple-500)); color: #fff; padding: 64px 0; text-align: center; }
.svc-cta h2 { color: #fff; font-size: clamp(26px, 4vw, 34px); }
.svc-cta p { max-width: 640px; margin: 14px auto 0; color: rgba(255,255,255,0.88); line-height: 1.6; }
.svc-cta .btn-primary { background: #fff; color: var(--navy-900); }
.svc-cta .svc-cta-note { font-size: 13.5px; margin-top: 16px; color: rgba(255,255,255,0.8); }
.svc-cta .svc-cta-note a { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .svc-h2 { font-size: 22px; margin-top: 44px; } .svc-good { padding: 22px; } }

/* Hero video poster + tap-to-watch fallback (iPhone/iPad block autoplay in embedded players) */
.hero-video-wrap { background: #1b1760 center / cover no-repeat; }
.hero-watch[hidden] { display: none; }
.video-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(10,8,40,0.92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.video-modal[hidden] { display: none; }
.video-modal-box { width: 100%; max-width: 900px; aspect-ratio: 16 / 9; }
.video-modal-box iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.video-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

.footer-address { color: inherit; text-decoration: underline; text-decoration-color: rgba(74,47,158,0.35); text-underline-offset: 3px; }
.footer-address:hover { color: var(--purple-500); text-decoration-color: var(--purple-500); }

/* Self-hosted hero background video (plays on every browser, muted + inline) */
.hero-video-wrap { background: #1b1760 url('hero-poster.jpg') center / cover no-repeat; }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-bg-video { display: none; } }