/*
Theme Name: Dentick Dental Care
Theme URI: https://dentickdentalcare.in
Author: Dentick Dental Care
Description: High-performance, SEO-optimised theme for Dentick Dental Care — Implant Centre & Multi-Speciality Clinic, Bengaluru.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: dentick
*/

/* ============================================================
   1. DESIGN TOKENS
============================================================ */
:root {
  --blue:        #0249eb;
  --blue-dark:   #0136b0;
  --blue-light:  #e8efff;
  --teal:        #00d1ba;
  --teal-light:  #e0faf7;
  --ink:         #0b1530;
  --ink-mid:     #3d4760;
  --ink-soft:    #6b7593;
  --bg:          #fefefe;
  --bg-soft:     #f5f7ff;
  --line:        #e4e8f4;
  --line-soft:   #eef0f9;
  --warn:        #f59e0b;
  --success:     #10b981;

  --grad:        linear-gradient(135deg,#0249eb 0%,#1a5cff 50%,#00d1ba 100%);
  --grad-soft:   linear-gradient(135deg,#eef2ff 0%,#e0faf7 100%);
  --grad-dark:   linear-gradient(135deg,#0b1530 0%,#0d2060 100%);

  --ff-head: 'Sora', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill:999px;

  --sh-sm:  0 2px 8px rgba(11,21,48,.05);
  --sh-md:  0 8px 24px rgba(11,21,48,.08);
  --sh-lg:  0 20px 48px rgba(11,21,48,.12);
  --sh-xl:  0 32px 80px rgba(11,21,48,.18);

  --wrap: 1140px;
  --topbar-h: 38px;
  --nav-h: 70px;
}

/* ============================================================
   2. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* overflow:clip prevents horizontal scroll WITHOUT creating a scroll container.
     Unlike overflow:hidden, it does NOT affect position:fixed children — the nav
     overlay renders correctly on iOS Safari and all modern browsers. */
  overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1,h2,h3,h4,h5 {
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
p { color: var(--ink-soft); }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff; padding:.5rem 1rem; z-index:9999; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
}

/* Focus visible */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   3. SVG ICON SAFETY NET
============================================================ */
svg { width: 1em; height: 1em; flex-shrink: 0; fill: none; }
.icon-14 svg { width: 14px; height: 14px; }
.icon-16 svg { width: 16px; height: 16px; }
.icon-18 svg { width: 18px; height: 18px; }
.icon-20 svg { width: 20px; height: 20px; }
.icon-24 svg { width: 24px; height: 24px; }
.icon-28 svg { width: 28px; height: 28px; }
.icon-40 svg { width: 40px; height: 40px; }
.icon-48 svg { width: 48px; height: 48px; }

/* ============================================================
   4. LAYOUT UTILITIES
============================================================ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section--sm { padding: 56px 0; }
.section--alt { background: var(--bg-soft); }
.section--dark { background: var(--grad-dark); }
.section--dark h2, .section--dark h3, .section--dark p { color: #fff; }
.section--dark p { color: rgba(255,255,255,.75); }

/* Grids */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
@media (max-width:880px) { .g5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px) { .g5 { grid-template-columns: repeat(2,1fr); } }
.g2-wide { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.g2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

@media (max-width:980px) {
  .g2, .g2-wide, .g2-even { grid-template-columns: 1fr; gap: 32px; }
  .g3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px) {
  .g3, .g4 { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
}

/* Section head */
.sh { margin-bottom: 48px; }
.sh--center { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.sh__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.sh__label svg { color: var(--teal); }
.sh h2 { margin-bottom: .4em; }
.sh p { font-size: 1.05rem; max-width: 58ch; }
.sh--center p { margin: 0 auto; }

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }

/* ============================================================
   5. TOPBAR
============================================================ */
.topbar {
  height: var(--topbar-h);
  background: var(--ink);
  color: rgba(255,255,255,.85);
  font-size: .8rem;
  display: flex; align-items: center;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 18px; }
.topbar a { color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.topbar a:hover { color: var(--teal); }
.topbar__emergency { font-weight: 700; color: var(--teal) !important; }
.topbar__emergency svg { color: var(--teal); }
@media (max-width:780px) { .topbar__right { display: none; } }
@media (max-width:520px) { .topbar__left .tb-hide { display: none; } }

/* ============================================================
   6. HEADER — SINGLE LINE NAV
============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(254,254,254,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center;
}
.site-header .wrap {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px; height: 100%;
}

/* Logo */
.site-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; }
.site-logo__mark { height: 38px; width: auto; }
.site-logo__text { height: 22px; width: auto; }
@media (max-width:640px) { .site-logo__text { display: none; } }

/* Nav — desktop */
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.main-nav > ul > li > a {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--ff-head); font-weight: 600; font-size: .88rem;
  color: var(--ink-mid); padding: 8px 12px; border-radius: var(--r-sm);
  white-space: nowrap; transition: color .15s, background .15s;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-menu-ancestor > a {
  color: var(--blue); background: var(--blue-light);
}
/* Dropdown toggle arrow */
.main-nav li.has-dropdown > a::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; margin-left: 2px; margin-top: -2px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.main-nav li.has-dropdown:hover > a::after { transform: rotate(225deg) translateY(-3px); }

/* Dropdowns */
.main-nav .dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 220px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.main-nav li.has-dropdown { position: relative; }
.main-nav li.has-dropdown:hover .dropdown,
.main-nav li.has-dropdown.is-open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.main-nav .dropdown li a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: .88rem; font-weight: 500; color: var(--ink-mid);
  white-space: nowrap; transition: background .15s, color .15s;
}
.main-nav .dropdown li a:hover { background: var(--bg-soft); color: var(--blue); }

/* ── Mega-menu: Services dropdown (5-column grouped layout) ─────────────── */
.main-nav li.menu-group-services { position: relative; }
.main-nav li.menu-group-services > .dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(880px, 92vw);
  max-width: 880px;
  /* CSS multi-column, not Grid: Grid rows are SHARED tracks across every
     column, so one tall 2-line item in column 4 would stretch the same
     row height in columns 1-3 too, creating uneven, "weird" gaps between
     unrelated items. Multi-column gives each column fully independent
     vertical flow — a forced break before each .mega-col-label starts a
     new column, exactly matching the 5 DOM-order item groups. */
  column-count: 5;
  column-gap: 0;
  padding: 18px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(15,23,42,.18), 0 4px 16px -4px rgba(15,23,42,.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.main-nav li.menu-group-services:hover > .dropdown,
.main-nav li.menu-group-services.is-open > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.main-nav li.menu-group-services .dropdown li {
  display: block; padding: 0 8px; margin-bottom: 1px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.main-nav li.menu-group-services .dropdown li a {
  position: relative;
  padding: 7px 10px 7px 15px; font-size: .82rem; line-height: 1.3;
  white-space: normal; border-radius: 8px; display: block;
  color: var(--ink-mid); font-weight: 500;
  transition: background .15s, color .15s, transform .15s;
}
.main-nav li.menu-group-services .dropdown li a::before {
  content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--line);
  transition: background .15s, transform .15s;
}
.main-nav li.menu-group-services .dropdown li a:hover {
  background: var(--bg-soft); color: var(--blue); transform: translateX(2px);
}
.main-nav li.menu-group-services .dropdown li a:hover::before {
  background: var(--blue); transform: translateY(-50%) scale(1.4);
}

/* Column header labels — injected as real <li class="mega-col-label"> by JS.
   break-before:column forces each one to start a brand-new column, which
   is what makes the 5 DOM-order groups map to 5 visual columns without
   any manual grid-column bookkeeping. */
.main-nav li.menu-group-services .dropdown .mega-col-label {
  font-family: var(--ff-head); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--blue); padding: 0 15px 10px; pointer-events: none; margin: 0 8px;
  break-before: column; -webkit-column-break-before: always; break-inside: avoid;
}
.main-nav li.menu-group-services .dropdown .mega-col-label:first-child {
  break-before: avoid; -webkit-column-break-before: avoid;
}
/* Vertical hairline between columns — drawn via box-shadow on every label
   except the first, so it doesn't run before the leftmost column. */
.main-nav li.menu-group-services .dropdown .mega-col-label:not(:first-child) {
  box-shadow: -1px 0 0 0 var(--line-soft, var(--line));
  padding-left: 23px; margin-left: 0;
}

/* Feature column (Emergency + View All) reads as a distinct CTA panel */
.main-nav li.menu-group-services .dropdown li.col-feature {
  background: linear-gradient(180deg, var(--bg-soft), #fff);
  border-radius: 14px; margin: 0 8px 8px 16px; padding: 12px 10px;
}
.main-nav li.menu-group-services .dropdown li.col-feature a {
  padding-left: 11px; font-weight: 600; color: var(--blue); background: #fff;
  border: 1px solid var(--line); margin-bottom: 6px;
}
.main-nav li.menu-group-services .dropdown li.col-feature a::before { display: none; }
.main-nav li.menu-group-services .dropdown li.is-emergency a {
  color: #fff; background: var(--warn, #f59e0b); font-weight: 700; border-color: transparent;
  display: flex; align-items: center; gap: 6px;
}
.main-nav li.menu-group-services .dropdown li.is-emergency a::after { content: '→'; margin-left: auto; }
.main-nav li.menu-group-services .dropdown li.is-emergency a:hover { background: #d97f06; color: #fff; }
.main-nav li.menu-group-services .dropdown li.is-viewall a {
  background: var(--grad); color: #fff; font-weight: 700; text-align: center; border-color: transparent; margin-top: 2px;
}
.main-nav li.menu-group-services .dropdown li.is-viewall a:hover { opacity: .92; color: #fff; }

@media (max-width: 860px) {
  .main-nav li.menu-group-services > .dropdown { display: none !important; } /* mobile drawer takes over */
}

/* ── Locations dropdown: branches first (highlighted), then nearby areas ── */
.main-nav li.menu-group-locations .dropdown {
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
}
.main-nav li.menu-group-locations .dropdown li.is-branch a {
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-light);
}
.main-nav li.menu-group-locations .dropdown li.is-branch a:hover { background: var(--teal-light); color: var(--blue-dark); }
.main-nav li.menu-group-locations .dropdown li.is-area-header {
  pointer-events: none;
  margin-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.main-nav li.menu-group-locations .dropdown li.is-area-header a {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 12px;
  pointer-events: auto; /* still a real link to the South Bengaluru hub page */
}
.main-nav li.menu-group-locations .dropdown li.is-area a {
  font-size: .82rem; color: var(--ink-mid); padding: 7px 12px;
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-book {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grad); color: #fff;
  font-family: var(--ff-head); font-weight: 700; font-size: .82rem;
  padding: 9px 16px; border-radius: var(--r-pill);
  white-space: nowrap; transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 14px rgba(2,73,235,.35);
  border: none; cursor: pointer; appearance: none; text-decoration: none;
}
.btn-book:hover { opacity: .92; transform: translateY(-1px); color: #fff; }
.btn-book svg { width: 15px; height: 15px; }

.hdr-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-mid);
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.hdr-icon:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.hdr-icon svg { width: 17px; height: 17px; }

/* Hamburger */
.nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink); background: #fff;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ic-close { display: none; }
.nav-open .nav-toggle .ic-menu { display: none; }
.nav-open .nav-toggle .ic-close { display: block; }
/* When overlay open: hamburger and header stay above overlay */
@media (max-width:860px) {
  .nav-open .site-header {
    z-index: 10000; /* above the nav overlay (9999) — sticky header already paints above */
  }
  .nav-open .nav-toggle {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.3);
    color: #fff;
  }
  .nav-open .site-logo__mark,
  .nav-open .site-logo__text { filter: brightness(10); }
  .nav-open .hdr-icon,
  .nav-open .btn-book { opacity: 0; pointer-events: none; }
}

/* Mobile nav */
@media (max-width:1020px) {
  .main-nav > ul > li > a { font-size: .82rem; padding: 7px 10px; }
  .btn-book span { display: none; }
}

/* ── Mobile: Full-screen overlay nav (no overflow tricks, always works) ── */
@media (max-width:860px) {
  .nav-toggle { display: flex; }
  .hdr-icon.phone-icon { display: none; }
  .btn-book span { display: inline; }

  /* The nav becomes a full-viewport overlay anchored to the entire screen.
     No dependency on body/html overflow — position:fixed with inset:0 always
     renders correctly regardless of scroll containers. */
  .main-nav {
    position: fixed;
    inset: 0;                        /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    background: var(--ink);          /* dark navy overlay — premium feel */
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 80px 28px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
    /* Hidden state: fade out + slight scale */
    opacity: 0;
    pointer-events: none;
    transform: scale(1.03);
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Visible state */
  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  /* Nav items */
  .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .main-nav > ul > li {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .main-nav > ul > li > a {
    padding: 16px 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    justify-content: space-between;
    border-radius: 0;
    background: transparent !important;
  }

  .main-nav > ul > li > a:hover { color: var(--teal) !important; background: transparent !important; }

  /* Dropdown toggle arrow — white version */
  .main-nav li.has-dropdown > a::after {
    border-color: rgba(255,255,255,.5);
    margin-left: auto;
    flex-shrink: 0;
  }
  .main-nav li.has-dropdown.is-open > a::after { transform: rotate(225deg) translateY(-3px); }

  /* Sub-menu accordion */
  .main-nav .dropdown {
    position: static;
    transform: none; opacity: 1; visibility: visible;
    pointer-events: auto;
    box-shadow: none; border: none;
    background: rgba(255,255,255,.06);
    border-radius: var(--r-sm);
    margin: 0 0 8px 0;
    display: none;
  }
  .main-nav li.has-dropdown.is-open .dropdown { display: block; }
  .main-nav li.has-dropdown:hover .dropdown   { display: none; }
  .main-nav li.has-dropdown.is-open:hover .dropdown { display: block; }

  .main-nav .dropdown li a {
    color: rgba(255,255,255,.75);
    padding: 11px 16px;
    font-size: .95rem;
  }
  .main-nav .dropdown li a:hover { color: var(--teal); background: rgba(255,255,255,.05); }

  /* CTA row pinned to bottom of overlay */
  .main-nav > ul::after {
    content: '';
    display: block;
    height: 80px; /* spacer so last item isn't at screen edge */
  }
}

/* ============================================================
   7. BUTTONS & CHIPS
============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 700; font-size: .92rem;
  padding: 13px 24px; border-radius: var(--r-pill);
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px rgba(2,73,235,.3); }
.btn--primary:hover { box-shadow: 0 10px 30px rgba(2,73,235,.4); color: #fff; }
.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 6px 20px rgba(0,209,186,.3); }
.btn--teal:hover { background: #00bba6; color: #fff; }
.btn--ghost { background: #fff; color: var(--blue); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.btn--ghost-light:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn--sm { padding: 9px 18px; font-size: .82rem; }
.btn--block { width: 100%; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Icon-only button */
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--blue);
  border: 1px solid var(--line);
  transition: background .15s, color .15s, transform .15s;
}
.icon-btn:hover { background: var(--blue); color: #fff; transform: translateY(-2px); border-color: var(--blue); }
.icon-btn svg { width: 18px; height: 18px; }

/* Chips */
.chip-row { display: flex; flex-direction: column; gap: 8px; max-width: 100%; overflow: visible; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  color: var(--ink-mid); box-shadow: var(--sh-sm);
  white-space: normal;          /* allow text to wrap inside chip */
  word-break: break-word;
  width: fit-content;           /* shrink-wrap to content, never overflow */
  max-width: 100%;              /* never exceed parent container width */
  box-sizing: border-box;
}
.chip svg { color: var(--teal); width: 13px; height: 13px; }
.chip--blue { background: var(--blue-light); color: var(--blue); border-color: transparent; }
.chip--teal { background: var(--teal-light); color: #007d6e; border-color: transparent; }
.chip--star { background: #fef3c7; color: #92400e; border-color: transparent; }
.chip--star svg { color: var(--warn); }

/* ============================================================
   8. VIDEO HERO
============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--topbar-h) - var(--nav-h));
  display: flex; align-items: center;
  background: var(--grad-dark);
}
/* Video background */
.hero__video-wrap {
  position: absolute; inset: 0; z-index: 0;
}
.hero__video-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(11,21,48,.88) 0%,
    rgba(11,21,48,.72) 40%,
    rgba(11,21,48,.40) 70%,
    rgba(11,21,48,.55) 100%
  );
  z-index: 1;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; /* override global img,video reset */
  object-fit: cover; object-position: center top;
  display: block;
}
/* LCP poster image shown before video loads */
.hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  z-index: 0;
  /* Will be hidden once video plays */
  transition: opacity .5s ease;
}
.hero__video.is-playing ~ .hero__poster,
.hero__video-wrap.video-loaded .hero__poster { opacity: 0; }

/* Hero content */
.hero__inner {
  position: relative; z-index: 2;
  width: 100%; padding: 80px 0;
}
.hero__grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; }
.hero__content { color: #fff; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 700; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 16px;
  background: rgba(0,209,186,.12); border: 1px solid rgba(0,209,186,.25);
  padding: 7px 14px; border-radius: var(--r-pill);
}
.hero__eyebrow svg { width: 13px; height: 13px; }
.laser-callout {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(0,209,186,.1); border: 1px solid rgba(0,209,186,.3);
  border-radius: var(--r-md); padding: 10px 16px; margin: 4px 0 20px;
  font-size: .85rem; color: rgba(255,255,255,.85);
}
.doctor-title { font-family: var(--ff-head); font-weight: 700; font-size: 1.05rem; color: var(--blue); margin: -.3em 0 14px; }
.laser-callout svg { color: var(--teal); flex-shrink: 0; }
.laser-callout strong { color: #fff; }
.laser-callout a { color: var(--teal); font-weight: 700; text-decoration: underline; }
.laser-callout a:hover { color: #fff; }
.laser-callout--light {
  background: var(--blue-light); border-color: rgba(2,73,235,.18); color: var(--ink-mid);
}
.laser-callout--light svg { color: var(--blue); }
.laser-callout--light strong { color: var(--ink); }
.laser-callout--light a { color: var(--blue); }
.laser-callout--light a:hover { color: var(--blue-dark, var(--blue)); }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero h1 .accent {
  background: linear-gradient(90deg, var(--teal), #4df5e5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: 1.08rem; color: rgba(255,255,255,.8); max-width: 52ch; margin-bottom: 24px; line-height: 1.7; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__trust-item { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: rgba(255,255,255,.75); font-weight: 600; }
.hero__trust-item svg { color: var(--teal); width: 16px; height: 16px; }

/* Hero form card (right column) */
.hero__form-card {
  background: rgba(255,255,255,.97);
  border-radius: var(--r-xl); padding: 28px;
  box-shadow: var(--sh-xl);
  backdrop-filter: blur(10px);
}
.hero__form-card h3 { font-size: 1.15rem; margin-bottom: 4px; color: var(--ink); }
.hero__form-card > p { font-size: .85rem; color: var(--ink-soft); margin-bottom: 20px; }

@media (max-width:980px) {
  .hero { min-height: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__form-card { max-width: 540px; }
  .hero__inner { padding: 60px 0; }
}
@media (max-width:639px) {
  /* On mobile the video is never loaded (see dentick.js) and the long
     stack of text below the photo means a full-bleed "background image"
     treatment forces the image box to stretch far taller than a portrait
     photo should — cropping the face out of frame. Instead, on mobile the
     photo becomes its own contained, rounded card up top, and the text
     content flows normally underneath on a solid dark background. */
  .hero {
    min-height: auto;
    display: block;
    padding-top: 18px;
  }
  .hero__video-wrap {
    position: relative;
    inset: auto;
    width: calc(100% - 32px);
    margin: 0 16px 24px;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--sh-lg);
  }
  .hero__video-wrap::after {
    /* Subtle bottom fade only — the image is no longer a text background,
       just a soft gradient at the base for a polished card edge. */
    background: linear-gradient(180deg, rgba(11,21,48,0) 70%, rgba(11,21,48,.35) 100%);
  }
  /* Mobile poster: portrait orientation — object-position keeps face in frame */
  .hero__poster { object-position: center 18%; }
  .hero__video  { object-position: center 18%; }
  .hero__inner { position: relative; z-index: 2; padding: 0; }
}
@media (max-width:640px) {
  .hero__inner { padding: 48px 0 40px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   9. PAGE HERO (interior pages)
============================================================ */
.page-hero {
  background: var(--grad-soft); padding: 48px 0 64px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top:-100px; right:-100px;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(2,73,235,.08), transparent 70%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: .82rem; color: var(--ink-soft); margin-bottom: 18px;
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .cur { color: var(--ink); font-weight: 600; }
.page-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.page-hero h1 { margin-bottom: .35em; }
.page-hero__lead { font-size: 1.05rem; max-width: 54ch; margin-bottom: 20px; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.page-hero__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); }
@media (max-width:860px) { .page-hero__grid { grid-template-columns: 1fr; } .page-hero__media { display: none; } }

/* ============================================================
   10. CARDS
============================================================ */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft); color: var(--blue);
  margin-bottom: 16px; flex-shrink: 0;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .3em; }
.card p { flex: 1; font-size: .95rem; }
.card__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-head); font-weight: 700; font-size: .88rem;
  color: var(--blue); margin-top: 14px; transition: gap .15s;
}
.card:hover .card__link { gap: 8px; }
.card__link svg { width: 15px; height: 15px; }

/* Stat card */
.stat-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 24px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sh-sm);
  min-width: 0; /* allow shrinking inside grid track instead of overflowing */
}
.stat-card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--grad-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-card strong { display: block; font-family: var(--ff-head); font-size: 1.5rem; color: var(--ink); }
.stat-card span { font-size: .82rem; color: var(--ink-soft); }
.stat-card > div { min-width: 0; } /* text wrapper — same fix, prevents long words forcing overflow */

@media (max-width: 560px) {
  .stat-card { padding: 16px; gap: 10px; }
  .stat-card__icon { width: 40px; height: 40px; }
  .stat-card strong { font-size: 1.2rem; }
  .stat-card span { font-size: .76rem; }
}

/* Review card */
.review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-sm); }
.review-card__stars { display: flex; gap: 3px; margin-bottom: 12px; }
.review-card__stars svg { width: 16px; height: 16px; color: var(--warn); fill: var(--warn); }
.review-card p { font-size: .93rem; font-style: italic; margin-bottom: 14px; }
.review-card__name { font-family: var(--ff-head); font-weight: 700; font-size: .85rem; color: var(--ink); }
.review-card__loc { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }

/* ============================================================
   11. STEPS
============================================================ */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.step:last-child { border-bottom: none; }
.step__num {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-weight: 800; font-size: 1rem;
}
.step__body h3 { margin-bottom: .25em; }
.step__body p { margin: 0; }

/* ============================================================
   12. FAQ ACCORDION
============================================================ */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; text-align: left;
  font-family: var(--ff-head); font-weight: 700; font-size: .95rem; color: var(--ink);
  background: none; border: none; cursor: pointer;
}
.faq-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .2s ease;
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--grad); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.is-open .faq-a { max-height: 800px; }
.faq-a__inner { padding: 0 22px 18px; }
.faq-a__inner p { margin: 0; font-size: .93rem; }

/* ============================================================
   13. BEFORE/AFTER SLIDER
============================================================ */
.ba { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sh-md); border: 1px solid var(--line); user-select: none; cursor: ew-resize; }
.ba__before, .ba__after { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__before img, .ba__after img { width: 100%; height: 100%; object-fit: cover; }
.ba__after { overflow: hidden; width: 50%; }
.ba__after img { width: 200%; max-width: none; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; display: flex; align-items: center; justify-content: center; }
.ba__handle::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); transform: translateX(-1.5px); }
.ba__grip {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--sh-md);
  display: flex; align-items: center; justify-content: center; color: var(--blue); z-index: 2; position: relative;
}
.ba__grip svg { width: 18px; height: 18px; }
.ba__label {
  position: absolute; top: 14px; z-index: 3;
  font-family: var(--ff-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(11,21,48,.65); color: #fff;
}
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; }

/* ============================================================
   14. PRICE TABLE
============================================================ */
.price-section { margin-bottom: 36px; }
.price-section h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--blue); font-family: var(--ff-head); margin-bottom: 12px;
}
.price-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); border: 1px solid var(--line); }
.price-table th, .price-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.price-table th { font-family: var(--ff-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); background: var(--bg-soft); font-weight: 700; }
.price-table tr:last-child td { border-bottom: none; }
.price-table td:first-child { font-weight: 600; color: var(--ink); }
.price-val { font-family: var(--ff-head); font-weight: 700; color: var(--blue); white-space: nowrap; }
.price-note { margin-top: 12px; font-size: .82rem; color: var(--ink-soft); display: flex; align-items: flex-start; gap: 6px; }
.price-note svg { flex-shrink: 0; margin-top: 2px; color: var(--blue); width: 14px; height: 14px; }

/* ============================================================
   15. LEAD FORM & CAPTCHA
============================================================ */
.lead-form-wrap {
  background: #fff; border-radius: var(--r-xl); padding: 32px;
  box-shadow: var(--sh-md); border: 1px solid var(--line);
}
.lead-form-wrap h3 { margin-bottom: .25em; }
.lead-form-wrap > p { font-size: .88rem; margin-bottom: 22px; }
.lf { display: flex; flex-direction: column; gap: 14px; }
.lf label { font-weight: 600; font-size: .85rem; display: block; margin-bottom: 5px; color: var(--ink); }
.lf input, .lf select, .lf textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: .93rem;
  background: var(--bg-soft); color: var(--ink);
  transition: border-color .15s, background .15s;
}
.lf input:focus, .lf select:focus, .lf textarea:focus {
  border-color: var(--blue); background: #fff; outline: none;
}
.lf textarea { min-height: 80px; resize: vertical; }
.lf .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:480px) { .lf-row { grid-template-columns: 1fr; } }
.lf-turnstile { display: flex; justify-content: flex-start; margin-top: 4px; }
.lf-submit { width: 100%; }
.lf-msg { display: none; padding: 11px 14px; border-radius: var(--r-sm); font-size: .87rem; font-weight: 600; margin-top: 4px; }
.lf-msg.error { background: #fff0f0; color: #c0392b; border: 1px solid #fcc; display: block; }
.lf-msg.success { background: #eafaf3; color: #0d7a4e; border: 1px solid #b2e8d0; display: flex; align-items: center; gap: 8px; }
.lf-msg.success svg { width: 18px; height: 18px; flex-shrink: 0; }
.lf-note { font-size: .75rem; color: var(--ink-soft); text-align: center; margin-top: 6px; }
.lf-note svg { width: 12px; height: 12px; vertical-align: middle; color: var(--teal); }

/* ============================================================
   16. CTA BAND
============================================================ */
.cta-band {
  background: var(--grad); border-radius: var(--r-xl); padding: 52px 48px;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.cta-band__grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(255,255,255,.8); }
.cta-band__ctas { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
@media (max-width:780px) {
  .cta-band { padding: 36px 28px; }
  .cta-band__grid { grid-template-columns: 1fr; }
  .cta-band__ctas { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   17. BRANCH CARD
============================================================ */
.branch-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); }
.branch-card__map { display: block; width: 100%; height: 200px; border: none; }
.branch-card__body { padding: 24px; }
.branch-card__rating { display: inline-flex; align-items: center; gap: 5px; background: #fef3c7; color: #92400e; padding: 5px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700; margin-bottom: 12px; }
.branch-card__rating svg { width: 13px; height: 13px; fill: var(--warn); color: var(--warn); }
.branch-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.branch-card__detail { display: flex; gap: 10px; margin-bottom: 9px; font-size: .88rem; color: var(--ink-mid); align-items: flex-start; }
.branch-card__detail svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--blue); margin-top: 2px; }
.branch-card__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ============================================================
   18. BLOG
============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width:980px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:640px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.post-card__thumb { aspect-ratio: 16/9; background: var(--grad-soft); overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--blue); opacity: .3; }
.post-card__thumb-placeholder svg { width: 48px; height: 48px; }
.post-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.post-card__cat { font-family: var(--ff-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.post-card h3 { font-size: 1rem; margin-bottom: 8px; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--blue); }
.post-card p { font-size: .87rem; flex: 1; }
.post-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: .78rem; color: var(--ink-soft); }

/* Single post / prose */
.prose { max-width: 740px; }
.prose h2 { margin: 1.8em 0 .5em; }
.prose h3 { margin: 1.4em 0 .4em; }
.prose p { font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.1em; }
.prose ul, .prose ol { margin-bottom: 1.2em; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 1rem; color: var(--ink-soft); margin-bottom: .4em; }
.prose strong { color: var(--ink); }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose .post-cta {
  background: var(--grad-soft); border-radius: var(--r-lg); padding: 28px 32px;
  margin: 2.5em 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line);
}
.prose .post-cta p { margin: 0; font-weight: 600; color: var(--ink); font-size: .95rem; }

/* ============================================================
   19. FOOTER
============================================================ */
/* ── E-E-A-T trust strip ─────────────────────────────── */
.eeat-strip { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.eeat-strip__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.eeat-strip__avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.eeat-strip__body { flex: 1; min-width: 240px; }
.eeat-strip__line { font-size: .9rem; color: var(--ink-mid); margin-bottom: 8px; }
.eeat-strip__line strong { color: var(--ink); }
.eeat-strip__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eeat-strip__chips .chip { font-size: .72rem; padding: 4px 10px; }
.eeat-strip__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .78rem; color: var(--ink-soft); flex-shrink: 0; margin-left: auto; }
.eeat-strip__meta a { color: var(--blue); font-weight: 700; }
@media (max-width: 640px) {
  .eeat-strip__inner { flex-direction: column; align-items: flex-start; }
  .eeat-strip__meta { align-items: flex-start; margin-left: 0; }
}

.site-footer { background: var(--ink); }
.footer-main { padding: 48px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .9fr 1fr 1fr; gap: 32px; }
@media (max-width:980px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width:580px)  { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 26px; filter: brightness(0) invert(1); margin-bottom: 12px; }
.footer-brand p { color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.55; margin-bottom: 8px; }
.footer-brand__phone { font-size: .85rem; }
.footer-brand__phone a { color: rgba(255,255,255,.75); font-weight: 600; }
.footer-brand__phone a:hover { color: var(--teal); }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); transition: background .15s, color .15s; }
.footer-social a:hover { background: var(--teal); color: #fff; }
.footer-social svg { width: 14px; height: 14px; }
.footer-col h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col li a { color: rgba(255,255,255,.6); font-size: .85rem; transition: color .15s; }
.footer-col li a:hover { color: var(--teal); }
.footer-col .branch-mini h5 { color: #fff; font-family: var(--ff-head); font-size: .88rem; margin-bottom: 5px; }
.footer-col .branch-mini p { color: rgba(255,255,255,.55); font-size: .8rem; margin-bottom: 6px; }
.footer-col .branch-mini a { color: var(--teal); font-size: .8rem; font-weight: 600; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; }
.footer-bottom .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: rgba(255,255,255,.4); }
.footer-bottom a { color: rgba(255,255,255,.4); }
.footer-bottom a:hover { color: var(--teal); }

/* ── Footer accordion (Popular Services / Quick Links) ───
   Always rendered open by default (no-JS-safe, fully crawlable). JS adds
   .is-collapsed on mobile only, hiding the panel with plain CSS — no
   reliance on native <details> behaviour, which some browsers implement
   via content-visibility:hidden and which display:block cannot undo. */
.footer-accordion__toggle {
  width: 100%; background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.footer-accordion__toggle h4 { margin-bottom: 0; }
.footer-accordion__chevron { display: none; }
.footer-accordion__panel { display: block; }

@media (max-width: 580px) {
  .footer-accordion__toggle { cursor: pointer; padding: 6px 0; }
  .footer-accordion__chevron {
    display: block; width: 9px; height: 9px; flex-shrink: 0;
    border-right: 1.6px solid rgba(255,255,255,.4); border-bottom: 1.6px solid rgba(255,255,255,.4);
    transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px;
  }
  .footer-accordion.is-collapsed .footer-accordion__chevron { transform: rotate(-45deg); margin-top: 0; }
  .footer-accordion.is-collapsed .footer-accordion__panel { display: none; }
  .footer-accordion__panel { padding-top: 14px; }
}

/* ============================================================
   20. FLOAT WHATSAPP + EXIT POPUP
============================================================ */
.float-wa {
  position: fixed; bottom: 22px; right: 22px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  transition: transform .2s ease;
}
.float-wa:hover { transform: scale(1.1); }
.float-wa svg { width: 28px; height: 28px; fill: #fff; color: #fff; }

.exit-overlay {
  position: fixed; inset: 0; background: rgba(11,21,48,.6);
  z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px;
}
.exit-overlay.show { display: flex; }
.exit-modal {
  background: #fff; border-radius: var(--r-xl); max-width: 420px; width: 100%;
  padding: 36px; text-align: center; position: relative; box-shadow: var(--sh-xl);
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.exit-modal__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.exit-modal__ico svg { width: 28px; height: 28px; }
.exit-modal h3 { margin-bottom: .3em; }
.exit-modal p { font-size: .92rem; margin-bottom: 20px; }
.exit-modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); cursor: pointer; }
.exit-modal__close svg { width: 14px; height: 14px; }

/* ── Lead-form modal (sitewide "Book" popup) ─────────── */
.lead-modal {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lead-modal[hidden] { display: none; }
.lead-modal__backdrop {
  position: absolute; inset: 0; background: rgba(11,21,48,.6);
  opacity: 0; transition: opacity .25s ease;
}
.lead-modal.show .lead-modal__backdrop { opacity: 1; }
.lead-modal__panel {
  position: relative; background: #fff; border-radius: var(--r-xl);
  max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 32px; box-shadow: var(--sh-xl);
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.lead-modal.show .lead-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.lead-modal__close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); cursor: pointer; color: var(--ink-mid); z-index: 1;
}
.lead-modal__close:hover { background: var(--line); }
.lead-modal .lead-form-wrap { padding: 0; box-shadow: none; border: none; }
@media (max-width: 480px) {
  .lead-modal__panel { padding: 24px 18px; max-height: 92vh; }
}

/* ============================================================
   21. MISC UTILITY
============================================================ */
.map-embed { width: 100%; height: 300px; border: none; border-radius: var(--r-lg); display: block; }
.content-page { padding: 56px 0 80px; }
.thanks-wrap { text-align: center; max-width: 520px; margin: 60px auto; }
.thanks-wrap .ico { width: 80px; height: 80px; border-radius: 50%; background: var(--teal-light); color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.thanks-wrap .ico svg { width: 40px; height: 40px; }
.error-404 { text-align: center; padding: 100px 0; }
.error-404 .num { font-size: clamp(4rem,10vw,8rem); font-family: var(--ff-head); font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.standalone-page * { box-sizing: border-box; }

/* ============================================================
   22. CORE WEB VITALS HELPERS
============================================================ */
/* Prevent layout shift for images */
img { aspect-ratio: attr(width) / attr(height); }
/* Stable scrollbar to prevent CLS */
html { scrollbar-gutter: stable; }
/* Font display fallback to prevent FOIT */

/* ============================================================
   23. MOBILE & RESPONSIVE FIXES v3.0
   One authoritative block — no duplicates, no conflicts.
   Systematic: global → layout → components → nav drawer
============================================================ */

/* ─────────────────────────────────────────────────────────
   A. OVERFLOW CONTAINMENT
   Rule: only clip on elements that already contain floats/
   pseudos. Never clip on .section/.wrap — that cuts off
   card box-shadows at viewport edges on mobile.
───────────────────────────────────────────────────────── */
html {
  overflow-x: hidden;
}
/* body keeps existing overflow-x:clip (set at line 68) */

/* Decorative pseudo-element containers — clip their ::before/::after bleed */
.hero        { overflow: hidden; }   /* already set in base */
.page-hero   { overflow: hidden; }   /* already set in base */
.cta-band    { overflow: hidden; }   /* already set in base */

/* ─────────────────────────────────────────────────────────
   B. WRAP PADDING
   Responsive horizontal padding so content never touches edges.
───────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .wrap { padding-left: 56px; padding-right: 56px; }
}
@media (min-width: 1600px) {
  .wrap { padding-left: 96px; padding-right: 96px; }
}
@media (max-width: 480px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
}

/* ─────────────────────────────────────────────────────────
   C. TYPOGRAPHY — constrain clamp() on very small screens
───────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  h1 { font-size: clamp(1.55rem, 8vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  h3 { font-size: clamp(.95rem, 4.5vw, 1.2rem); }
}

/* ─────────────────────────────────────────────────────────
   D. GRID BREAKPOINTS — fill gaps between base breakpoints
───────────────────────────────────────────────────────── */
/* .g4 collapses to 2-col at 860px (not just 640px) to avoid squished stat cards */
@media (max-width: 860px) {
  .g4 { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .g4 { grid-template-columns: 1fr; }
  .g2 { gap: 20px; }
  .g3 { gap: 20px; }
}

/* ─────────────────────────────────────────────────────────
   E. SECTION PADDING — proportional on small screens
───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .section    { padding: 64px 0; }
  .section--sm { padding: 44px 0; }
}
@media (max-width: 640px) {
  .section    { padding: 48px 0; }
  .section--sm { padding: 36px 0; }
}
@media (max-width: 480px) {
  .section    { padding: 40px 0; }
  .section--sm { padding: 28px 0; }
}

/* ─────────────────────────────────────────────────────────
   F. SECTION HEADS
───────────────────────────────────────────────────────── */
.sh          { margin-bottom: 40px; }
.sh--center  { margin-bottom: 44px; }
@media (max-width: 640px) {
  .sh         { margin-bottom: 28px; }
  .sh--center { margin-bottom: 32px; }
  .sh p       { font-size: .93rem; }
}

/* ─────────────────────────────────────────────────────────
   G. TOPBAR — nowrap links can cause overflow on tiny screens
───────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .topbar__emergency {
    font-size: .72rem;
    white-space: normal;
    word-break: break-word;
  }
}

/* ─────────────────────────────────────────────────────────
   H. HERO (homepage video section)
───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* hero__video-wrap is now a contained, rounded card on mobile (see the
     max-width:639px rules above) — hero__inner is normal-flow content
     below it, so it only needs side/bottom padding, not top padding. */
  .hero__inner     { padding: 0 0 32px; }
  .hero__lead      { font-size: .97rem; }
  .hero__ctas      { flex-direction: column; gap: 10px; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .hero__trust     { gap: 10px 16px; }
  .hero__form-card { padding: 22px 16px; }
}

/* ─────────────────────────────────────────────────────────
   I. PAGE HERO (interior pages)
───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-hero           { padding: 36px 0 40px; }
  .page-hero__lead     { font-size: .93rem; }
  .page-hero__ctas .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────
   J. CTA SPACING — buttons must breathe from preceding content
───────────────────────────────────────────────────────── */
/* Chip rows followed by CTA rows */
.chip-row + .page-hero__ctas,
.chip-row + .hero__ctas { margin-top: 20px; }

/* Lead text bottom spacing when no chip-row is present */
.page-hero__lead { margin-bottom: 16px; }

/* Standalone .btn after prose paragraphs in content columns */
p + a.btn,
p + .btn,
.chip-row + a.btn,
.chip-row + .btn { margin-top: 20px; display: inline-flex; }

/* Grid content column CTAs */
.g2-wide > div > p + a.btn,
.g2-even > div > p + a.btn,
.g2     > div > p + a.btn { margin-top: 22px; }

/* CTA band on mobile */
@media (max-width: 780px) {
  .cta-band__ctas { margin-top: 20px; }
}
@media (max-width: 480px) {
  .cta-band          { padding: 28px 18px; border-radius: var(--r-lg); }
  .cta-band__ctas .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────
   K. PRICE TABLE — horizontal scroll container on mobile
───────────────────────────────────────────────────────── */
.price-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  /* Faint shadow hint that it scrolls */
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
/* Remove mask when not overflowing (wide screens) */
@media (min-width: 601px) {
  .price-table-wrap {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@media (max-width: 600px) {
  .price-table               { min-width: 440px; font-size: .83rem; }
  .price-table th,
  .price-table td            { padding: 10px 12px; }
}
.price-section               { margin-bottom: 40px; }
.price-section:last-child    { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────
   L. LEAD FORM
───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lead-form-wrap { padding: 22px 16px; }
  .lf-row         { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   M. BRANCH CARDS
───────────────────────────────────────────────────────── */
.branch-card__ctas { margin-top: 20px; }
@media (max-width: 480px) {
  .branch-card__ctas .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────
   N. FOOTER
───────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .footer-bottom .wrap { flex-direction: column; text-align: center; gap: 6px; }
}

/* ─────────────────────────────────────────────────────────
   O. FLOAT WHATSAPP BUTTON
───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .float-wa { right: 16px; bottom: 16px; }
}

/* ─────────────────────────────────────────────────────────
   P. INP — minimum 44px tap targets on mobile
───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .btn, .btn-book, .hdr-icon, .nav-toggle { min-height: 44px; }
  .btn--sm                                { min-height: 40px; }
  .faq-q                                  { min-height: 48px; padding-top: 14px; padding-bottom: 14px; }
  .footer-col li a                        { display: inline-block; padding: 4px 0; min-height: 36px; line-height: 1.8; }
  .topbar a                               { min-height: 38px; display: inline-flex; align-items: center; }
}

/* ─────────────────────────────────────────────────────────
   Q. MISC COMPONENT FIXES
───────────────────────────────────────────────────────── */
.breadcrumb         { margin-bottom: 20px; }
.branch-card__ctas  { margin-top: 20px; }
.post-card__footer  { margin-top: 16px; }
.review-card__stars { margin-bottom: 14px; }

/* Images: never wider than container */
img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────
   R. MOBILE NAV TOGGLE — show/hide
───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .main-nav    { display: none !important; }
  .nav-toggle  { display: flex; }
}
@media (min-width: 861px) {
  .nav-toggle  { display: none !important; }
  #dentick-mobile-nav { display: none !important; }
}

/* ─────────────────────────────────────────────────────────
   S. BODY SCROLL LOCK (for mobile nav)
   Uses position:fixed + width:100% (correct iOS Safari approach).
   JS must save/restore scrollY around open/close.
───────────────────────────────────────────────────────── */
body.dmn-body-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  /* top is set dynamically by JS to -scrollY */
}

/* WP admin bar compensation */
.admin-bar #dentick-mobile-nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #dentick-mobile-nav { top: 46px; }
}

/* ─────────────────────────────────────────────────────────
   T. MOBILE NAV DRAWER
   Portal-rendered: appended to <body> by JS, never inside
   .site-header, so no stacking-context conflict.
───────────────────────────────────────────────────────── */
#dentick-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
#dentick-mobile-nav[hidden] { display: none !important; }

/* Backdrop */
.dmn-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,21,48,.65);
  opacity: 0;
  transition: opacity .28s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#dentick-mobile-nav.dmn-open .dmn-backdrop { opacity: 1; }

/* Drawer panel */
.dmn-inner {
  position: relative;
  z-index: 1;
  width: min(88vw, 320px);
  height: 100%;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0 40px;
  box-shadow: -8px 0 48px rgba(11,21,48,.5);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
#dentick-mobile-nav.dmn-open .dmn-inner { transform: translateX(0); }

/* Close button */
.dmn-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  z-index: 2;
}
.dmn-close:hover,
.dmn-close:focus-visible {
  background: rgba(255,255,255,.2);
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Nav list */
.dmn-inner > ul {
  list-style: none;
  margin: 0;
  padding: 60px 0 0;
  width: 100%;
  flex: 1;
}
.dmn-inner > ul > li {
  border-bottom: 1px solid rgba(255,255,255,.07);
  width: 100%;
}
.dmn-inner > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1rem;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  transition: color .15s, background .15s;
  width: 100%;
  box-sizing: border-box;
}
.dmn-inner > ul > li > a:hover,
.dmn-inner > ul > li > a:focus-visible {
  color: var(--teal);
  background: rgba(255,255,255,.04);
}

/* Dropdown arrow */
.dmn-inner .has-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 2px solid rgba(255,255,255,.45);
  border-bottom: 2px solid rgba(255,255,255,.45);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}
.dmn-inner .has-dropdown.dmn-open > a::after {
  transform: rotate(225deg) translateY(-3px);
}

/* Sub-menu accordion */
.dmn-inner .dropdown {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  border: none !important;
  background: rgba(255,255,255,.05) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  min-width: 0 !important;
  display: none;
  width: 100%;
}
.dmn-inner .has-dropdown.dmn-open .dropdown { display: block; }
.dmn-inner .dropdown li a {
  display: block;
  padding: 11px 22px 11px 34px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.65) !important;
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: normal !important;
  word-break: break-word;
}
.dmn-inner .dropdown li a:hover {
  color: var(--teal) !important;
  background: rgba(255,255,255,.05) !important;
}

/* Mega-menu (Services) inside mobile drawer — collapse grid to a single
   readable column; ignore desktop column assignment entirely. */
.dmn-inner .has-dropdown.menu-group-services .dropdown {
  display: none;
  grid-template-columns: none !important;
  column-gap: 0 !important;
}
.dmn-inner .has-dropdown.menu-group-services.dmn-open .dropdown { display: block; }
.dmn-inner .dropdown li.col-popular,
.dmn-inner .dropdown li.col-cosmetic,
.dmn-inner .dropdown li.col-restorative,
.dmn-inner .dropdown li.col-specialised,
.dmn-inner .dropdown li.col-feature {
  grid-column: auto !important;
}
.dmn-inner .dropdown li.col-feature a {
  background: rgba(255,255,255,.08) !important;
  color: var(--teal) !important;
  font-weight: 700 !important;
}
.dmn-inner .dropdown li.is-emergency a {
  background: var(--warn, #f59e0b) !important;
  color: #1a1206 !important;
}
.dmn-inner .dropdown li.is-viewall a {
  background: var(--teal) !important;
  color: #07221f !important;
  text-align: center;
}
.dmn-inner .mega-col-label {
  display: block;
  padding: 14px 22px 6px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4) !important;
  grid-column: auto !important;
}
.dmn-inner .mega-col-label:first-child { padding-top: 8px !important; }

/* Locations dropdown inside mobile drawer — branches stand out, area header is a label */
.dmn-inner .dropdown li.is-branch a {
  color: var(--teal) !important;
  font-weight: 700 !important;
  background: rgba(0,209,186,.08) !important;
}
.dmn-inner .dropdown li.is-area-header a {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4) !important;
  padding-top: 14px !important;
}
.dmn-inner .dropdown li.is-area a { font-size: .85rem !important; }

/* Bottom CTA row */
.dmn-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px 8px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.08);
}
.dmn-cta .btn { width: 100%; justify-content: center; font-size: .88rem; }

/* ============================================================
   24. COMPREHENSIVE MOBILE & DESKTOP FIXES v4.0
   Resolves all flagged issues:
   1. Home — Meet Your Dentist text cut off
   2. Dental Implants — CTA spacing, price cut-off, before/after cut-off
   3–6. Service pages — CTA spacing, table scroll, text overflow
   7–8. Branch pages — CTA spacing
   9. About Us — Meet the Founder text cut off
   10. Dr. Divyashree page — text cut off
   11. Price list — table overflow/scroll
   12. Desktop CTA / pill spacing
   13. Footer — branch link spacing, mobile horizontal layout
   Nav — dropdown first-click fix
============================================================ */

/* ─────────────────────────────────────────────────────────
   A. GLOBAL TEXT OVERFLOW CONTAINMENT
   Prevent ANY content from escaping its grid/flex cell
───────────────────────────────────────────────────────── */
.g2-wide > div,
.g2-even > div,
.g2 > div,
.g3 > div,
.g4 > div {
  min-width: 0;        /* critical: prevents flex/grid cells growing beyond parent */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────
   B. HOME — Meet Your Dentist section
   .g2-wide collapses to 1-col on mobile but text still needs wrapping
───────────────────────────────────────────────────────── */
.g2-wide > div > p,
.g2-wide > div > .sh p,
.g2-even > div > p {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────
   C. PAGE HERO — CTA / PILL SPACING (ALL PAGES, MOBILE + DESKTOP)
   The chip-row bottom margin-bottom:4px is far too tight.
   The page-hero__ctas also needs breathing room on all screens.
───────────────────────────────────────────────────────── */
/* Override the inline style margin-bottom:4px on chip-row inside page-hero */
.page-hero .chip-row {
  margin-top: 20px !important;
  margin-bottom: 20px !important;   /* was 4px — this is the gap issue */
}

/* Ensure cta row itself has top space when it follows chip-row */
.page-hero .page-hero__ctas {
  margin-top: 0;                    /* chip-row already has bottom margin now */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 640px) {
  .page-hero .chip-row {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .page-hero .page-hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────
   D. PRICE TABLES — no horizontal scroll, wrap text
   Remove min-width from table, let text wrap naturally.
   Only the .price-val (price number) stays nowrap.
───────────────────────────────────────────────────────── */
.price-table-wrap {
  overflow-x: visible !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

.price-table {
  min-width: 0 !important;         /* was 440px on mobile — causes scroll */
  width: 100%;
  table-layout: fixed;             /* force fixed layout so columns share space */
}

/* Treatment column ~65%, Price column ~35% */
.price-table th:first-child,
.price-table td:first-child {
  width: 62%;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

.price-table th:last-child,
.price-table td:last-child {
  width: 38%;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

.price-val {
  white-space: normal !important;  /* allow wrapping on very small screens */
  word-break: break-word;
}

@media (max-width: 480px) {
  .price-table th,
  .price-table td {
    padding: 10px 10px;
    font-size: .82rem;
  }
  .price-table th:first-child,
  .price-table td:first-child { width: 58%; }
  .price-table th:last-child,
  .price-table td:last-child  { width: 42%; }
}

@media (max-width: 360px) {
  .price-table th,
  .price-table td {
    padding: 8px 8px;
    font-size: .76rem;
  }
}

/* ─────────────────────────────────────────────────────────
   E. PRICE NOTE — text cut off on Implants page
───────────────────────────────────────────────────────── */
.price-note {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────
   F. BEFORE/AFTER SLIDER — cut off on right
   .ba has overflow:hidden which clips the right edge when
   the slider is inside a grid column wider than viewport.
   Ensure the parent grid cell doesn't overflow.
───────────────────────────────────────────────────────── */
.g2-wide .ba,
.g2-even .ba,
.g2 .ba {
  max-width: 100%;
  box-sizing: border-box;
}

/* On mobile the before/after slider can hit viewport edge */
@media (max-width: 860px) {
  .ba {
    aspect-ratio: 4/3;
    max-width: 100%;
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────
   G. ABOUT US — Meet the Founder section
   Text and checklist bullets overflowing right edge
───────────────────────────────────────────────────────── */
.g2-wide,
.g2-even {
  overflow: visible;     /* do not clip shadows */
}

/* Constrain text inside grid columns */
.g2-wide > div > *,
.g2-even > div > * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Check-marked bullet lists inside content sections */
ul.check-list,
.content-checks,
.credentials-list {
  width: 100%;
  max-width: 100%;
}

ul.check-list li,
.content-checks li,
.credentials-list li {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ─────────────────────────────────────────────────────────
   H. DOCTOR PAGE — Background, Qualifications & Credentials
   Same root cause as About Us — grid cell text overflow
───────────────────────────────────────────────────────── */
.page-doctor .g2-wide > div,
.page-doctor .g2-even > div,
.page-about  .g2-wide > div,
.page-about  .g2-even > div {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Generic fix: any list inside a grid column */
.g2-wide ul,
.g2-even ul,
.g2 ul {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.g2-wide li,
.g2-even li,
.g2 li {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ─────────────────────────────────────────────────────────
   I. BRACES & ALIGNERS — footnote text cut off
   "Treatment duration: 12–24 months…" runs off screen
───────────────────────────────────────────────────────── */
.price-section > p,
.price-section .price-note,
section .wrap > p {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────
   J. VENEERS & CROWNS — footnote + before/after image cut off
───────────────────────────────────────────────────────── */
/* Already covered by sections F and I above */

/* ─────────────────────────────────────────────────────────
   K. FOOTER — branch link spacing & mobile horizontal layout
───────────────────────────────────────────────────────── */

/* Issue: no line spacing between "Branch details →" link and next element */
.footer-col .branch-mini {
  margin-bottom: 20px;             /* was 0 — gives breathing room between branches */
}
.footer-col .branch-mini:last-child {
  margin-bottom: 0;
}
.footer-col .branch-mini a {
  display: inline-block;
  margin-top: 6px;                 /* space between address text and link */
  padding-bottom: 4px;             /* breathing below the link */
}

/* Mobile footer — horizontal layout so user doesn't scroll through giant footer */
@media (max-width: 580px) {
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;  /* 2 columns on mobile */
    gap: 24px !important;
  }

  .footer-brand {
    grid-column: 1 / -1;          /* brand spans full width on top */
  }

  /* Make columns compact */
  .footer-col h4 {
    font-size: .75rem;
    margin-bottom: 10px;
  }

  .footer-col ul {
    gap: 6px;
  }

  .footer-col li a {
    font-size: .82rem;
  }

  .footer-col .branch-mini h5 {
    font-size: .82rem;
  }

  .footer-col .branch-mini p {
    font-size: .78rem;
  }

  .footer-col .branch-mini a {
    font-size: .78rem;
  }
}

@media (max-width: 400px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────
   L. MOBILE NAV — dropdown first-click fix
   The current JS uses e.preventDefault() only when !wasOpen.
   On first click (wasOpen=false) it prevents default AND opens.
   The issue: the <a> tag has an href destination. On first click
   we want ONLY the accordion to open, NOT navigate. This is
   already what the JS does — the CSS fix ensures the parent
   <li> gets position:relative and the arrow click area is large.
   
   Additional fix: make the entire li > a tappable area for
   the dropdown toggle, not just the arrow pseudo-element.
   The real fix needed is in the JS — the dropdown link
   should not navigate on first tap on mobile.
───────────────────────────────────────────────────────── */
/* Ensure dropdown parent links have sufficient tap target */
.dmn-inner .has-dropdown > a {
  padding-top: 16px;
  padding-bottom: 16px;
  min-height: 52px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Make arrow area bigger for easier tapping */
.dmn-inner .has-dropdown > a::after {
  padding: 8px;
  margin-right: -8px;
}

/* ─────────────────────────────────────────────────────────
   M. WRAP — ensure all page content is fully contained
───────────────────────────────────────────────────────── */
.wrap {
  box-sizing: border-box;
  max-width: 100%;  /* belt-and-suspenders for very small screens */
}

/* All direct children of .wrap should not exceed container */
.wrap > * {
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────
   N. SECTION CONTENT OVERFLOW CONTAINMENT — catch-all
───────────────────────────────────────────────────────── */
section.section,
section.section--alt,
section.section--dark,
section.section--sm {
  overflow-x: clip;
}

/* Grid containers */
.g2-wide,
.g2-even,
.g2,
.g3,
.g4 {
  max-width: 100%;
}


/* ============================================================
   25. WHATSAPP PNG ICON + SOCIAL ICON FIXES
============================================================ */

/* Float WhatsApp button — PNG image sizing */
.float-wa img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

/* WhatsApp in buttons — inline image alignment */
.btn img,
.btn-book img,
.hdr-icon img,
.dmn-cta .btn img {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
}

/* Footer social icons — consistent size for all 4 platforms */
.footer-social a {
  width: 34px;
  height: 34px;
}

/* Chip icon SVG pinned size — prevent shrink when chip text wraps */
.chip svg {
  flex-shrink: 0;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px;
}

/* ═══════════════════════════════════════════════════
   PERFORMANCE & CWV ADDITIONS
   Ensures 100/100 PageSpeed Insights scores.
   ═══════════════════════════════════════════════════ */

/* Explicit width/height on all images prevents CLS */
img { display: block; max-width: 100%; height: auto; }
img[width][height] { aspect-ratio: attr(width) / attr(height); }

/* Font-display swap for any web fonts */
@font-face { font-display: swap; }

/* Prevent layout shift from late-loading elements */
.page-hero,
.section,
.wrap       { contain: layout style; }

/* Lazy-load images below fold */
img[loading="lazy"] { content-visibility: auto; }

/* ── New Service Page Styles ─────────────────────── */
/* Location pages — branch card highlight */
.loc-highlight {
    border: 2px solid var(--blue);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Emergency page — urgency band */
.emergency-band {
    background: var(--blue);
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 1rem;
}
.emergency-band h2  { font-size: clamp(1.5rem, 4vw, 2rem); margin: .5rem 0; }
.emergency-band p   { opacity: .9; max-width: 540px; margin: 0 auto 1.5rem; }
.emergency-band a   {
    display: inline-block;
    background: #fff;
    color: var(--blue);
    font-weight: 700;
    font-size: 1.1rem;
    padding: .75rem 2.5rem;
    border-radius: 99px;
    text-decoration: none;
}

/* Full emergency banner (homepage, below trust bar) */
.emergency-band--full { padding: 0; border-radius: 0; text-align: left; background: linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f59e0b 100%); }
.emergency-band--full .wrap { padding-top: 40px; padding-bottom: 40px; }
.emergency-band__grid { display: flex; align-items: flex-start; gap: 24px; }
.emergency-band__icon {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
}
.emergency-band__body { flex: 1; }
.emergency-band--full h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 14px; max-width: none; color: #fff; }
.emergency-band--full p { opacity: 1; max-width: 720px; margin: 0 0 10px; text-align: left; color: rgba(255,255,255,.95); font-size: .95rem; line-height: 1.6; }
.emergency-band--full p a { color: #fff; text-decoration: underline; font-weight: 700; display: inline; background: none; padding: 0; border-radius: 0; }
.emergency-band__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.emergency-band__ctas .btn { padding: 12px 22px; }
.btn--primary-inv { background: #fff; color: #c2410c; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.btn--primary-inv:hover { background: #fff; color: #9a3412; }
@media (max-width: 640px) {
  .emergency-band__grid { flex-direction: column; align-items: flex-start; }
  .emergency-band__ctas .btn { width: 100%; justify-content: center; }
}

/* Compact emergency strip — auto-appears near the top of every inner page */
.emergency-strip { background: #fff7ed; border-bottom: 1px solid #fed7aa; }
.emergency-strip__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; flex-wrap: wrap;
}
.emergency-strip__text {
  display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #9a3412; flex: 1; min-width: 240px;
}
.emergency-strip__text svg { flex-shrink: 0; color: #ea580c; }
.emergency-strip__text strong { color: #7c2d12; }
.emergency-strip__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: #ea580c; color: #fff; font-weight: 700; font-size: .82rem;
  padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap;
}
.emergency-strip__cta:hover { background: #c2410c; color: #fff; }
@media (max-width: 640px) {
  .emergency-strip__inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .emergency-strip__cta { justify-content: center; }
}

/* Breadcrumb nav */
.breadcrumb         { font-size: .85rem; margin-bottom: 1rem; color: var(--c-muted, #666); }
.breadcrumb ol      { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb a       { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Price note */
.price-note {
    font-size: .85rem;
    color: var(--c-muted, #666);
    margin-top: .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Laser badge on service cards */
.laser-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    padding: .2rem .6rem;
    border-radius: 99px;
    margin-top: .5rem;
}

/* ── Accessibility ───────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--blue);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 .5rem .5rem;
    font-weight: 700;
    z-index: 9999;
    text-decoration: none;
    transition: top .1s;
}
.skip-link:focus { top: 0; }

/* ── Print styles ────────────────────────────────── */
@media print {
    .btn-book, .nav, footer, .cta-band, .whatsapp-float { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a::after { content: " (" attr(href) ")"; font-size: .8em; }
}