/* ================================================================
   NEURON CLINIC — RESPONSIVE STYLESHEET v2.0
   ─────────────────────────────────────────────────────────────
   Loaded after style.css — same specificity, last declaration
   wins in the cascade.  No !important abuse; clean overrides.

   Breakpoint scale (desktop-first, max-width):
   ──────────────────────────────────────────────
   1280  xl    Container refinement on wide screens
   1100  lg    Tablet landscape — grid collapses begin
    900  md    Primary breakpoint — nav collapses, layouts shift
    768  sm+   Narrow tablets / phablets
    640  sm    Phones in landscape / large portrait phones
    480  xs    Standard phones  (iPhone 12/13/14/15 etc.)
    375  2xs   Small phones     (iPhone SE, Galaxy A series)
================================================================ */


/* ══════════════════════════════════════════════════════════════
   §1 · BASE TOKENS & CONTAINER
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root {
    --r:    16px;
    --r-lg: 24px;
  }

  .wrap { padding: 0 24px }
}

@media (max-width: 640px) {
  :root {
    --r:    14px;
    --r-lg: 20px;
  }

  .wrap { padding: 0 18px }
}

@media (max-width: 375px) {
  .wrap { padding: 0 14px }
}


/* ══════════════════════════════════════════════════════════════
   §2 · VERTICAL SECTION RHYTHM
   All major content sections share a consistent vertical scale
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .services,
  .about,
  .stats,
  .team,
  .insurance,
  .videos,
  .locations,
  .testi,
  .articles,
  .faq,
  .booking,
  .careers,
  .plans,
  .svc-list {
    padding: 80px 0;
  }

  .cta-band { padding: 80px 0 100px }
}

@media (max-width: 640px) {
  .services,
  .about,
  .stats,
  .team,
  .insurance,
  .videos,
  .locations,
  .testi,
  .articles,
  .faq,
  .booking,
  .careers,
  .plans,
  .svc-list {
    padding: 60px 0;
  }

  .cta-band { padding: 60px 0 80px }
}

@media (max-width: 480px) {
  .services,
  .about,
  .stats,
  .team,
  .insurance,
  .videos,
  .locations,
  .testi,
  .articles,
  .faq,
  .booking,
  .careers,
  .plans,
  .svc-list {
    padding: 52px 0;
  }

  .cta-band { padding: 52px 0 70px }
}


/* ══════════════════════════════════════════════════════════════
   §3 · SECTION HEADINGS & EYEBROW
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .sec-head { margin-bottom: 44px }
}

@media (max-width: 640px) {
  .sec-head      { margin-bottom: 32px }
  .sec-head h2   { font-size: clamp(1.75rem, 6.5vw, 2.5rem) }
  .sec-head p    { font-size: .96rem }

  .eyebrow {
    font-size: 1.15rem;
    letter-spacing: .14em;
    margin-bottom: 14px;
  }
}

@media (max-width: 480px) {
  .sec-head h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) }
  .sec-head p  { font-size: .92rem }
}

@media (max-width: 375px) {
  .sec-head h2 { font-size: clamp(1.45rem, 7.5vw, 2rem) }

  .eyebrow {
    font-size: 1rem;
    letter-spacing: .12em;
  }
}


/* ══════════════════════════════════════════════════════════════
   §4 · BUTTONS
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .btn {
    padding: 14px 26px;
    font-size: .94rem;
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 13px 22px;
    font-size: .9rem;
    min-height: 46px;
  }
}


/* ══════════════════════════════════════════════════════════════
   §5 · HEADER / NAVBAR / MOBILE MENU
══════════════════════════════════════════════════════════════ */

/* ── 5a. Desktop nav tightening ── */
@media (max-width: 1280px) {
  .nav-links { gap: 0 }
  .nav-links a { padding: 10px 9px }
}

@media (max-width: 1100px) {
  .nav-links a {
    padding: 10px 7px;
    font-size: .83rem;
  }
}

/* ── 5b. Navigation collapse at md ── */
@media (max-width: 900px) {
  /* Hide desktop elements */
  .nav-links,
  .nav-cta .btn,
  .topbar-l  { display: none }

  /* Reveal burger */
  .burger    { display: flex }

  /* Nav bar height */
  .nav .wrap                   { height: 70px }
  header.scrolled .nav .wrap   { height: 60px }

  /* Logo */
  .logo-txt img                 { height: 52px }
  header.scrolled .logo-txt img { height: 40px }
}

/* ── 5c. Small phones ── */
@media (max-width: 640px) {
  .nav .wrap                    { height: 64px }
  header.scrolled .nav .wrap    { height: 56px }

  .logo-txt img                  { height: 44px }
  header.scrolled .logo-txt img  { height: 36px }

  .burger {
    width: 40px;
    height: 40px;
  }
}

/* ── 5d. Mobile menu ── */
@media (max-width: 900px) {
  .mobile-menu {
    padding: 90px 24px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .mobile-menu a {
    font-size: 1.1rem;
    padding: 15px 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    border-bottom-color: rgba(255,255,255,.06);
  }

  .mobile-menu .btn {
    margin-top: 22px;
    width: 100%;
    padding: 15px 24px;
    font-size: .95rem;
    min-height: 52px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .mobile-menu { padding: 84px 18px 32px }
  .mobile-menu a { font-size: 1rem; min-height: 50px }
}

@media (max-width: 375px) {
  .mobile-menu { padding: 80px 14px 28px }
}

/* ── 5e. Safe-area support (notched / Dynamic-Island phones) ── */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 900px) {
    .mobile-menu {
      padding-top: max(90px, calc(70px + env(safe-area-inset-top)));
      padding-bottom: max(40px, env(safe-area-inset-bottom));
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
    }
  }
}


/* ══════════════════════════════════════════════════════════════
   §6 · HERO + STAT CHIPS
══════════════════════════════════════════════════════════════ */

/* ── 6a. Spine motif ── */
@media (max-width: 1000px) {
  .spine-motif { display: none }
}

/* ── 6b. Hero layout — tablet ── */
@media (max-width: 900px) {
  .hero {
    min-height: 74vh;
    padding: 100px 0 28px;
  }

  .hero h1 { font-size: clamp(1.85rem, 5.5vw, 2.9rem) }

  .hero p.lead {
    font-size: .98rem;
    max-width: 100%;
  }

  .hero .cta-row { gap: 12px }

  .hero-chips .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── 6c. Hero layout — phone portrait ── */
@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 106px 0 20px;
  }

  .hero h1 { font-size: clamp(1.65rem, 7vw, 2.4rem) }

  .hero h1 .ln:nth-child(2) i { font-size: .68em }
  .hero h1 .ln:nth-child(3) i { font-size: .83em }

  .hero p.lead {
    font-size: .94rem;
    line-height: 1.82;
    margin-top: 16px;
  }

  /* Stack CTA row vertically */
  .hero .cta-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin-top: 22px;
  }

  .hero .cta-row .btn { justify-content: center }

  /* Chips */
  .hero-chips .wrap { gap: 8px }

  .chip {
    padding: 16px 10px;
    border-radius: var(--r);
  }

  .chip b     { font-size: clamp(1.25rem, 5.5vw, 1.6rem) }
  .chip span  { font-size: .68rem; margin-top: 4px }
}

/* ── 6d. Hero — small phones ── */
@media (max-width: 480px) {
  .hero { padding: 98px 0 16px }
  .hero h1 { font-size: clamp(1.5rem, 7.5vw, 2rem) }

  .hero p.lead { font-size: .9rem }
}

/* ── 6e. Hero — very small phones ── */
@media (max-width: 375px) {
  .hero { padding: 90px 0 12px }
  .hero h1 { font-size: clamp(1.4rem, 8vw, 1.85rem) }

  .hero .cta-row { gap: 8px }

  .hero-chips .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .chip { padding: 14px 8px }
  .chip b { font-size: clamp(1.15rem, 6vw, 1.45rem) }
}


/* ══════════════════════════════════════════════════════════════
   §7 · SERVICES SLIDER
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .serv-stage { gap: 12px }
  .serv-arrow { width: 44px; height: 44px }
}

@media (max-width: 760px) {
  .serv-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .serv-card .ph   { height: 220px }
  .serv-card .body { padding: 30px 28px }
  .serv-card h3    { font-size: 1.35rem }
}

@media (max-width: 640px) {
  .serv-card .ph   { height: 200px }
  .serv-card .body { padding: 24px 20px }
  .serv-card h3    { font-size: 1.2rem }
  .serv-card p     { font-size: .9rem }

  .serv-footer { margin-top: 28px }
}

@media (max-width: 480px) {
  .serv-stage { gap: 6px }

  .serv-arrow     { width: 38px; height: 38px }
  .serv-arrow svg { width: 16px; height: 16px }

  .serv-card .ph   { height: 180px }
  .serv-card .body { padding: 20px 18px }
}

@media (max-width: 375px) {
  .serv-card .ph { height: 160px }
}


/* ══════════════════════════════════════════════════════════════
   §8 · ABOUT
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 900px) {
  .about-grid { gap: 44px }

  .about-media {
    margin-bottom: 50px;
    max-width: 560px;
    margin-inline: auto;
  }

  .about-media .main-img { height: 440px }

  .about-badge {
    inset-inline-start: -10px;
    padding: 16px 20px;
  }

  .about-badge b    { font-size: 2.2rem }
  .about-badge span { font-size: .78rem }
}

@media (max-width: 640px) {
  .about-grid { gap: 32px }

  .about-media .main-img { height: 320px }

  /* Hide small overlay image on mobile to avoid overflow */
  .about-media .sub-img { display: none }

  .about-badge {
    top: 16px;
    inset-inline-start: 12px;
    padding: 14px 16px;
    border-radius: 14px;
  }

  .about-badge b    { font-size: 1.9rem }

  .vm {
    padding: 16px;
    gap: 12px;
  }

  .vm-ic { width: 44px; height: 44px }
  .vm h4 { font-size: 1rem }
  .vm p  { font-size: .88rem }
}

@media (max-width: 480px) {
  .about-media .main-img { height: 260px }
  .about-media { margin-bottom: 0 }
}


/* ══════════════════════════════════════════════════════════════
   §9 · STATS
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .stats-grid { gap: 14px }
  .stat { flex: 1 1 200px }
}

@media (max-width: 640px) {
  .stats-grid { gap: 10px }

  /* Two per row on phones */
  .stat {
    flex: 1 1 calc(50% - 10px);
    max-width: none;
    padding: 24px 12px;
  }

  .stat b    { font-size: clamp(2rem, 7.5vw, 2.8rem) }
  .stat span { font-size: .86rem; margin-top: 8px }
}

@media (max-width: 375px) {
  /* Single column on very small phones */
  .stat {
    flex: 1 1 100%;
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════
   §10 · TEAM GRID
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .doc-img  { height: 230px }
  .doc-body { padding: 16px }
  .doc-body h3   { font-size: 1.1rem }
  .doc-body p    { font-size: .82rem }
  .doc-body .spec { font-size: .66rem }
  .doc-view { font-size: .8rem }
}

@media (max-width: 400px) {
  /* Single column on very small phones */
  .team-grid { grid-template-columns: 1fr }
  .doc-img   { height: 280px }
}


/* ══════════════════════════════════════════════════════════════
   §11 · SERVICES DETAIL LIST
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .svc-row {
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 22px 8px;
  }

  .svc-row .arrow { display: none }

  .svc-row .t h3 { font-size: 1.2rem; margin-bottom: 4px }
  .svc-row .t p  { font-size: .88rem }

  /* Remove the indent hover effect on mobile */
  .svc-row:hover { padding-inline-start: 8px }
}

@media (max-width: 480px) {
  .svc-row {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 18px 6px;
  }

  .svc-row .t h3 { font-size: 1.1rem }
  .svc-row .t p  { font-size: .85rem }
}


/* ══════════════════════════════════════════════════════════════
   §12 · SUBSCRIPTION PLANS
══════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .plans-grid { grid-template-columns: repeat(2, 1fr) }

  .plan-card.featured          { transform: none }
  .plan-card.featured:hover    { transform: translateY(-8px) }
}

@media (max-width: 640px) {
  .plans-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }

  .plan-card { padding: 28px 22px }
}

@media (max-width: 480px) {
  .plans-grid { max-width: 100% }
  .plan-card  { padding: 24px 18px }
}


/* ══════════════════════════════════════════════════════════════
   §13 · INSURANCE COMPANIES
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .ins-grid { grid-template-columns: repeat(4, 1fr) }
  .ins-grid .ins-card:nth-child(n+9)  { display: none }
}

@media (max-width: 900px) {
  .ins-grid { grid-template-columns: repeat(3, 1fr) }
  .ins-grid .ins-card:nth-child(n+9)  { display: flex }
  .ins-grid .ins-card:nth-child(n+7)  { display: none }

  .ins-trust { gap: 10px; flex-wrap: wrap }
}

@media (max-width: 640px) {
  .ins-trust {
    flex-direction: column;
    align-items: center;
  }

  .ins-card {
    min-width: 0;
    width: 100%;
    padding: 13px 16px;
  }
}

@media (max-width: 480px) {
  .ins-grid { grid-template-columns: repeat(2, 1fr) }

  /* Show first 4 insurance cards on small phones */
  .ins-grid .ins-card:nth-child(n+7) { display: flex }
  .ins-grid .ins-card:nth-child(n+5) { display: none }
}

/* Insurance modal */
@media (max-width: 700px) {
  .ins-modal-grid { grid-template-columns: repeat(3, 1fr) }
}

@media (max-width: 480px) {
  .ins-modal-grid { grid-template-columns: repeat(2, 1fr) }
}


/* ══════════════════════════════════════════════════════════════
   §14 · VIDEOS
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .vid-grid { grid-template-columns: 1fr }

  .vid-col { grid-template-columns: repeat(2, 1fr) }

  .vid.main     { min-height: 340px }

  .vid-grid--all { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 640px) {
  .vid.main  { min-height: 260px }
  .vid.small { min-height: 150px }
}

@media (max-width: 560px) {
  .vid-col       { grid-template-columns: 1fr }
  .vid-grid--all { grid-template-columns: 1fr }

  .vid.main  { min-height: 230px }
  .vid.small { min-height: 180px }
}

@media (max-width: 480px) {
  .vid.main  { min-height: 200px }
  .vid.small { min-height: 160px }
}


/* ══════════════════════════════════════════════════════════════
   §15 · LOCATIONS
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .loc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .loc-map {
    position: relative;
    top: 0;
    height: 400px;
  }
}

@media (max-width: 640px) {
  .loc-map    { height: 300px }
  .loc-card   { padding: 20px 18px }
  .loc-card h3 { font-size: 1.2rem }
}

@media (max-width: 480px) {
  .loc-map { height: 240px }
  .loc-card { padding: 18px 16px }
}


/* ══════════════════════════════════════════════════════════════
   §16 · TESTIMONIALS
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .testi-stage  { gap: 12px }
  .testi-header { margin-bottom: 44px }

  .testi-arrow { width: 44px; height: 44px }

  .testi-card {
    padding: 36px 30px;
    max-width: 100%;
  }

  .testi-wm-q   { font-size: 7rem; opacity: .2 }
  .testi-quote  { font-size: 1.1rem }

  .testi-rating-badge {
    padding: 8px 16px;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .testi-stage { gap: 8px }

  .testi-card { padding: 28px 22px }

  .testi-arrow      { width: 38px; height: 38px }
  .testi-arrow svg  { width: 16px; height: 16px }

  .testi-wm-q  { font-size: 5rem }
  .testi-quote { font-size: 1rem }

  .testi-verified-label  { display: none }
  .testi-badge-info strong { font-size: 1.3rem }
  .testi-badge-info span   { font-size: .84rem }

  .testi-pills  { gap: 6px }
  .testi-footer { margin-top: 28px }
}

@media (max-width: 480px) {
  .testi-stage { gap: 4px }

  .testi-card { padding: 22px 18px }

  .testi-arrow     { width: 34px; height: 34px }
  .testi-arrow svg { width: 14px; height: 14px }

  .testi-quote { font-size: .95rem }
  .testi-wm-q  { font-size: 4rem }

  .testi-av-wrap .av {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .testi-meta strong { font-size: .94rem }
}


/* ══════════════════════════════════════════════════════════════
   §17 · ARTICLES
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .art-grid    { grid-template-columns: repeat(2, 1fr) }
  .career-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 640px) {
  .art-grid    { grid-template-columns: 1fr }
  .career-grid { grid-template-columns: 1fr }

  .art-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }
}

@media (max-width: 480px) {
  .art-img   { height: 200px }
  .art-body  { padding: 20px 18px }
  .art-body h3 { font-size: 1.15rem }
}


/* ══════════════════════════════════════════════════════════════
   §18 · FAQ
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-page-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Move the CTA sidebar above the FAQ list on mobile */
  .faq-page-grid .faq-side { order: -1 }

  .faq-side {
    position: relative;
    top: 0;
    padding: 36px 30px;
  }
}

@media (max-width: 640px) {
  .faq-q {
    padding: 20px 18px;
    font-size: 1rem;
    gap: 14px;
  }

  .faq-q .ic { width: 30px; height: 30px }
  .faq-q .ic svg { width: 16px; height: 16px }

  .faq-a p { padding: 0 18px 20px }

  .faq-side {
    padding: 28px 22px;
    border-radius: var(--r);
  }

  .faq-side h3 { font-size: 1.3rem }

  .faq-side .contact-line { padding: 14px 0 }
  .faq-side .contact-line svg {
    width: 38px;
    height: 38px;
    padding: 9px;
  }
}


/* ══════════════════════════════════════════════════════════════
   §19 · BOOKING FORM
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .book-card {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-inline: auto;
  }

  .book-side { padding: 48px 40px }
  .book-form { padding: 48px 40px }
}

@media (max-width: 900px) {
  .book-card  { max-width: 100% }
  .book-side h2 { font-size: 1.9rem }
}

@media (max-width: 640px) {
  .book-side { padding: 36px 22px }
  .book-form { padding: 36px 22px }

  .book-side h2 { font-size: 1.65rem }

  .form-row { grid-template-columns: 1fr }
}

@media (max-width: 480px) {
  .book-side { padding: 28px 18px }
  .book-form { padding: 28px 18px }

  .book-side h2 { font-size: 1.45rem }

  .book-feat .bf-ic { width: 38px; height: 38px }
  .book-feat svg    { width: 18px; height: 18px }
}


/* ══════════════════════════════════════════════════════════════
   §20 · CAREERS
══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Single-row career card layout collapse */
  .career-grid--single .job {
    grid-template-columns: 1fr;
    padding: 30px 22px;
  }

  .career-grid--single .job-type,
  .career-grid--single .job h3,
  .career-grid--single .job p,
  .career-grid--single .job-foot {
    grid-column: 1;
    grid-row: auto;
  }

  .career-grid--single .job-foot {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .job { padding: 22px 18px }
  .career-grid--single .job { padding: 24px 18px }
}


/* ══════════════════════════════════════════════════════════════
   §21 · CTA BANNER
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cta-inner {
    padding: 48px 22px;
    border-radius: var(--r);
  }

  .cta-inner h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem) }
  .cta-inner p  { font-size: .94rem }

  .cta-inner .cta-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .cta-inner .cta-row .btn {
    width: 100%;
    max-width: 360px;
  }
}

@media (max-width: 480px) {
  .cta-inner { padding: 36px 16px }
  .cta-inner h2 { font-size: clamp(1.45rem, 7vw, 2rem) }
}


/* ══════════════════════════════════════════════════════════════
   §22 · FOOTER
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .foot-inner { padding: 48px 0 36px }

  /* Center column titles underline */
  .foot-col-title::after {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .foot-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 18px 0;
  }

  .foot-legal { justify-content: center }
}

@media (max-width: 480px) {
  .foot-logo-img     { height: 60px }
  .foot-brand-desc   { font-size: .86rem }
  .foot-book-cta     { font-size: .82rem }
}


/* ══════════════════════════════════════════════════════════════
   §23 · MODAL
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .modal-card {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .modal-img { min-height: 220px }
}

@media (max-width: 640px) {
  .modal { padding: 14px }

  .modal-card {
    max-height: 92vh;
    border-radius: var(--r);
  }

  .modal-body      { padding: 28px 20px }
  .modal-body h3   { font-size: 1.5rem }
  .modal-body .modal-sub { font-size: .9rem }
}

@media (max-width: 480px) {
  .modal         { padding: 10px }
  .modal-body    { padding: 22px 16px }
  .modal-body h3 { font-size: 1.35rem }
}


/* ══════════════════════════════════════════════════════════════
   §24 · FLOATING ACTION BUTTONS + BACK-TO-TOP + CHAT WIDGET
══════════════════════════════════════════════════════════════ */

/* ── 24a. FAB stack ── */
@media (max-width: 640px) {
  .fab-stack {
    bottom: 16px;
    inset-inline-end: 16px;
    gap: 10px;
  }

  .fab {
    width: 50px;
    height: 50px;
  }

  .fab svg {
    width: 22px;
    height: 22px;
  }

  /* Tooltips are not useful on touch; remove them */
  .fab-tooltip { display: none }

  /* Shift to-top button to avoid overlapping FAB stack */
  .totop {
    width: 44px;
    height: 44px;
    bottom: 80px;
    inset-inline-end: 76px;
  }

  .totop svg { width: 18px; height: 18px }
}

/* ── 24b. Full-width chat panel on phones ── */
@media (max-width: 480px) {
  .chat-widget {
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    width: auto;
    bottom: 80px;
    max-height: min(70dvh, 520px);
    border-radius: 16px;
  }

  .fab-stack {
    bottom: 14px;
    inset-inline-end: 14px;
    gap: 8px;
  }

  .fab { width: 48px; height: 48px }

  .totop {
    bottom: 76px;
    inset-inline-end: 72px;
    width: 42px;
    height: 42px;
  }
}

/* ── 24c. Safe-area insets for notched/home-indicator phones ── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .fab-stack {
      bottom: max(16px, env(safe-area-inset-bottom));
    }

    .totop {
      bottom: max(80px, calc(64px + env(safe-area-inset-bottom)));
    }
  }

  @media (max-width: 480px) {
    .chat-widget {
      bottom: max(80px, calc(64px + env(safe-area-inset-bottom)));
    }

    .fab-stack {
      bottom: max(14px, env(safe-area-inset-bottom));
    }

    .totop {
      bottom: max(76px, calc(60px + env(safe-area-inset-bottom)));
    }
  }
}


/* ══════════════════════════════════════════════════════════════
   §25 · INNER PAGE HEAD (articles, doctors, branches, faq…)
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .page-head {
    padding: 140px 0 50px;
  }
}

@media (max-width: 640px) {
  .page-head {
    padding: 110px 0 36px;
    text-align: center;
  }

  .page-head h1   { font-size: clamp(1.6rem, 6.5vw, 2.2rem) }
  .page-head .crumbs { font-size: .8rem }

  .page-section { padding: 48px 0 }
}

@media (max-width: 480px) {
  .page-head { padding: 100px 0 28px }
  .page-section { padding: 40px 0 }
}


/* ══════════════════════════════════════════════════════════════
   §26 · DOCTOR PROFILE PAGE
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .doc-img { height: 240px }
}

@media (max-width: 480px) {
  .doc-img { height: 200px }
}


/* ══════════════════════════════════════════════════════════════
   §27 · PAGER
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .pager { gap: 6px }
}


/* ══════════════════════════════════════════════════════════════
   §28 · SCROLLBAR — hide on mobile (native momentum scroll)
══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  ::-webkit-scrollbar       { width: 0; height: 0 }
  ::-webkit-scrollbar-track { background: transparent }
  ::-webkit-scrollbar-thumb { background: transparent }
}


/* ══════════════════════════════════════════════════════════════
   §29 · ACCESSIBILITY — honour reduced-motion preference
══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .chip,
  .doc,
  .art,
  .job,
  .loc-card,
  .plan-card,
  .stat,
  .vm,
  .ins-card,
  .testi-card {
    transition-duration: .01ms !important;
    animation:           none  !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   §30 · PRINT — strip decorative chrome
══════════════════════════════════════════════════════════════ */

@media print {
  header,
  .fab-stack,
  .totop,
  .chat-widget,
  .mobile-menu { display: none !important }

  .wrap  { padding: 0 }
  body   { font-size: 11pt; color: #000 }

  a      { color: inherit; text-decoration: none }
}