/* ─────────────────────────────────────────────────────────
   Madison Square Dental — modern-minimal design system
   2026-05-07 redesign: single sans, large display type,
   generous spacing, scroll-reveal motion, pill CTAs.
───────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --teal:       #5BAFA0;
  --teal-600:   #3D8F82;
  --teal-700:   #2D7068;
  --teal-50:    #EDF7F5;
  --teal-100:   #cee9ee;
  --gold:       #c9a05a;
  --gold-light: #f5ebd6;
  --ink:        #0f172a;          /* slate-900 */
  --mid:        #475569;          /* slate-600 */
  --soft:       #94a3b8;          /* slate-400 */
  --line:       #e2e8f0;          /* slate-200 */
  --bg-soft:    #f8fafc;          /* slate-50 */
  --white:      #ffffff;

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, sans-serif;

  --container: 1240px;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow:    0 4px 12px rgba(15,23,42,0.06);
  --shadow-md: 0 10px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 24px 48px rgba(15,23,42,0.12);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.22s var(--ease);

  --space-section: clamp(64px, 9vw, 120px);
}

/* ── RESET / BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: hidden;
  max-width: 100%;
  font-family: var(--sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  margin: 0;
  font-size: 1rem;
  overflow-x: hidden; /* prevent any rogue horizontal scroll on mobile */
}
img, video { max-width: 100%; display: block; height: auto; }
a { text-decoration: none; color: inherit; transition: color var(--t); }
a:hover { color: var(--teal); }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem);  line-height: 1.1;  letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin: 0 0 1em; }

/* GeneratePress override — let our own header/footer sit on top */
.site-header, .site-footer { display: none !important; }
.site-content, .site .site-content > * { padding: 0 !important; max-width: none; margin: 0; }
.entry-content { margin-top: 0; }

/* ── UTILITY ───────────────────────────────────────────── */
.msd-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.msd-section { padding: var(--space-section) 0; position: relative; }
.msd-section--soft { background: var(--bg-soft); }
.msd-section--ink  { background: var(--ink); color: rgba(255,255,255,0.92); }
.msd-section--teal { background: var(--teal-700); color: #fff; }
.msd-section--ink h1, .msd-section--ink h2, .msd-section--ink h3,
.msd-section--teal h1, .msd-section--teal h2, .msd-section--teal h3 { color: #fff; }

/* Buttons — pill-shaped, larger, modern */
.msd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t);
  border: 1.5px solid transparent;
  white-space: nowrap;
  line-height: 1;
}
.msd-btn:hover { transform: translateY(-1px); }
.msd-btn-primary { background: var(--teal-700); color: #fff; }
.msd-btn-primary:hover { background: var(--teal-600); color: #fff; box-shadow: var(--shadow-md); }
.msd-btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.msd-btn-outline:hover { background: var(--ink); color: #fff; }
.msd-btn-ghost { color: var(--ink); background: transparent; padding: 12px 20px; }
.msd-btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }
.msd-btn-white { background: #fff; color: var(--ink); }
.msd-btn-white:hover { background: var(--bg-soft); color: var(--ink); }
.msd-btn-light  { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
.msd-btn-light:hover { background: rgba(255,255,255,0.1); color: #fff; }
.msd-btn-lg { padding: 20px 36px; font-size: 1.05rem; }

.msd-btn .msd-icon { width: 18px; height: 18px; }

/* Eyebrow / label — refined */
.msd-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.msd-section--ink .msd-label { color: var(--gold); }
.msd-section--teal .msd-label { color: rgba(255,255,255,0.9); }

/* Section title */
.msd-section-title { color: var(--ink); margin-bottom: 16px; max-width: 22ch; }
.msd-section-sub {
  color: var(--mid);
  font-size: 1.05rem;
  margin: 0 0 56px;
  max-width: 56ch;
  line-height: 1.6;
}
.msd-section--ink .msd-section-sub { color: rgba(255,255,255,0.7); }
.msd-section--teal .msd-section-sub { color: rgba(255,255,255,0.85); }

/* Feature list with custom dots / checks */
.msd-feature-list { list-style: none; display: grid; gap: 14px; padding: 0; margin: 0 0 32px; }
.msd-feature-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 0.98rem; color: var(--ink); }
.msd-feature-list li::before {
  content: '';
  width: 22px; height: 22px;
  background: var(--teal-50);
  border-radius: 50%;
  flex-shrink: 0; margin-top: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d8ca0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}

.msd-dual-cta { display: flex; gap: 20px; flex-wrap: wrap; }

.msd-icon { display: inline-block; width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }

/* Chip / pill */
.msd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--teal-50); color: var(--teal-700);
  font-size: 0.78rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-pill);
}
.msd-chip-outline {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 0.85rem; padding: 9px 18px; border-radius: var(--radius-pill);
  transition: all var(--t);
}
.msd-chip-outline:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }

/* ── PROMO BAR (top of page) ───────────────────────────── */
.msd-promo {
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  padding: 10px 0;
  text-align: center;
}
.msd-promo strong { color: var(--gold); margin-right: 8px; }
.msd-promo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; }

/* ── TOP BAR ──────────────────────────────────────────── */
.msd-topbar { background: var(--bg-soft); color: var(--mid); font-size: 0.82rem; padding: 10px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 300; }
.msd-topbar .msd-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; text-align: center; }
.msd-topbar a { color: var(--mid); }
.msd-topbar a:hover { color: var(--teal); }
.msd-topbar-left { display: inline-flex; gap: 8px; align-items: center; }
.msd-topbar-left span { display: block !important; font-size: 0.82rem; }
.msd-topbar-right { display: inline-flex; gap: 20px; align-items: center; }
.msd-topbar-phone { color: var(--ink) !important; font-weight: 600; }
.msd-icon-link { display: inline-flex; align-items: center; gap: 6px; }
.msd-icon-link .msd-icon { width: 14px; height: 14px; }

/* ── MAIN NAV ─────────────────────────────────────────── */
.msd-nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--topbar-h, 38px);
  z-index: 200;
}
/* Nav uses a wider container than the rest of the site so all 9 menu items
   fit on one line alongside the logo + booking CTA. Body content stays at
   the standard 1240px max-width via .msd-container. */
.msd-nav > .msd-container { max-width: 1480px; }
.msd-nav-inner { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 88px; gap: 20px; position: relative; }

/* Split-logo lockup — tooth icon on the left, "Madison Square Dental" wordmark
   rendered as type on the right so the brand reads cleanly on a single line. */
.msd-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
.msd-nav-logo:hover { color: inherit; }
.msd-nav-tooth { height: 64px; width: auto; object-fit: contain; display: block; flex-shrink: 0; }
.msd-nav-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
}
.msd-nav-wordmark-1 {
  font-size: 1.25rem;
  color: var(--teal);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.msd-nav-wordmark-2 {
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.36em;
  font-weight: 700;
  margin-top: 4px;
  padding-left: 1px;
}
/* Old single-image fallback kept tidy if no tooth icon is generated yet. */
.msd-nav-logo > img:not(.msd-nav-tooth) { height: 60px; width: auto; max-width: 220px; object-fit: contain; display: block; }

@media (max-width: 1280px) {
  .msd-nav-tooth { height: 52px; }
  .msd-nav-wordmark-1 { font-size: 1.1rem; }
  .msd-nav-wordmark-2 { font-size: 0.7rem; letter-spacing: 0.32em; }
}
@media (max-width: 1100px) {
  .msd-nav-logo { gap: 10px; }
  .msd-nav-tooth { height: 44px; }
  .msd-nav-wordmark-1 { font-size: 1rem; letter-spacing: 0.04em; }
  .msd-nav-wordmark-2 { font-size: 0.62rem; letter-spacing: 0.26em; }
}
@media (max-width: 700px) {
  .msd-nav-inner { height: 76px; }
  .msd-nav-tooth { height: 44px; }
  .msd-nav-wordmark-1 { font-size: 1rem; }
  .msd-nav-wordmark-2 { font-size: 0.62rem; letter-spacing: 0.22em; }
  .msd-nav-logo > img:not(.msd-nav-tooth) { height: 48px; max-width: 200px; }
}
@media (max-width: 480px) {
  /* Drop the wordmark on tiny screens — tooth alone reads as the logo. */
  .msd-nav-wordmark { display: flex; }
  .msd-nav-wordmark-1 { font-size: 0.85rem; letter-spacing: 0.03em; }
  .msd-nav-wordmark-2 { font-size: 0.55rem; letter-spacing: 0.18em; }
  .msd-nav-tooth { height: 36px; }
  .msd-nav-inner { justify-content: space-between; position: relative; }
  .msd-nav-logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; }
  .msd-nav-toggle { position: relative; z-index: 2; }
  .msd-nav-cta { position: relative; z-index: 2; }
}

/* ── BOOK ONLINE CTA — high-conversion nav button ──────
   Zocdoc-style vibrant yellow-gold. Pops hard against the teal nav
   and matches the visual language patients already associate with
   booking flows. Subtle ambient pulse (shadow, no scale) keeps it
   active without becoming distracting. */
.msd-btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: #F0B429;
  color: var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1.5px solid transparent;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(245, 184, 0, 0.4);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  animation: msdBookPulse 2.6s var(--ease) infinite;
  position: relative;
}
.msd-btn-book:hover {
  background: #ffc629;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 184, 0, 0.55);
  animation: none;
}
.msd-btn-book:active { transform: translateY(0); }
.msd-btn-book:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  animation: none;
}
.msd-btn-book .msd-icon { color: inherit; }

@keyframes msdBookPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(245, 184, 0, 0.4); }
  50%      { box-shadow: 0 4px 20px rgba(245, 184, 0, 0.6), 0 0 0 6px rgba(245, 184, 0, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .msd-btn-book { animation: none; }
}
@media (max-width: 1100px) {
  .msd-btn-book { padding: 12px 22px; font-size: 0.88rem; }
}

/* Pulse modifier for in-page CTAs that keep their own background color
   (e.g. hero teal button) — borrows the rhythm of the nav button so the
   primary action reads as alive without breaking the color hierarchy. */
.msd-btn-pulse-primary {
  animation: msdBookPulsePrimary 2.6s var(--ease) infinite;
}
.msd-btn-pulse-primary:hover { animation: none; }
@keyframes msdBookPulsePrimary {
  0%, 100% { box-shadow: 0 4px 14px rgba(45, 112, 104, 0.40); }
  50%      { box-shadow: 0 4px 20px rgba(45, 112, 104, 0.60), 0 0 0 6px rgba(45, 112, 104, 0.20); }
}
@media (prefers-reduced-motion: reduce) {
  .msd-btn-pulse-primary { animation: none; }
}
.msd-nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
.msd-nav-item { position: static; flex-shrink: 0; }
.msd-nav-links a,
.msd-nav-trigger {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mid);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--t);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.msd-nav-links a:hover, .msd-nav-trigger:hover { color: var(--ink); }
.msd-nav-links .current-menu-item > a,
.msd-nav-links .current_page_item > a,
.msd-nav-item.is-open > .msd-nav-trigger { color: var(--teal); }
.msd-nav-caret { transition: transform var(--t); }
.msd-nav-item.is-open .msd-nav-caret { transform: rotate(180deg); }
.msd-nav-cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.msd-nav-cta .msd-btn { padding: 13px 22px; font-size: 0.9rem; }
/* Mid-desktop range: tighten further so nothing wraps between 1100-1280px */
@media (max-width: 1280px) {
  .msd-nav-links { gap: 18px; }
  .msd-nav-links a, .msd-nav-trigger { font-size: 0.86rem; }
  .msd-nav-logo img { max-width: 180px; }
  .msd-nav-cta .msd-btn { padding: 12px 18px; font-size: 0.86rem; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  /* Hide lowest-priority items first on smaller desktops so the rest still fit */
  .msd-nav-links { gap: 14px; }
  .msd-nav-links a, .msd-nav-trigger { font-size: 0.82rem; }
}
.msd-nav-toggle {
  display: none;
  background: none; border: none; padding: 8px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;
}
.msd-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.2s; border-radius: 2px; }
/* Hamburger open — teal X animation */
.msd-nav-toggle.is-active span,
.msd-nav-toggle[aria-expanded="true"] span { background: var(--teal); }
.msd-nav-toggle.is-active span:nth-child(1),
.msd-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.msd-nav-toggle.is-active span:nth-child(2),
.msd-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.msd-nav-toggle.is-active span:nth-child(3),
.msd-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SIMPLE NAV DROPDOWN (e.g. About) ─────────────────── */
.msd-nav-item.has-sub { position: relative; }
.msd-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
  padding: 8px 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
  z-index: 99;
  pointer-events: none;
}
.msd-nav-item.has-sub > .msd-nav-trigger { position: relative; }
.msd-nav-item.has-sub > .msd-nav-trigger::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 24px;
  background: transparent;
  pointer-events: auto;
}
.msd-nav-item.has-sub:hover .msd-submenu,
.msd-nav-item.has-sub:focus-within .msd-submenu,
.msd-nav-item.has-sub.is-open .msd-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear;
}
.msd-submenu li { margin: 0; }
.msd-submenu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t), padding-left var(--t);
}
.msd-submenu a:hover,
.msd-submenu a:focus-visible {
  background: var(--teal-50);
  color: var(--teal);
  padding-left: 22px;
}

/* ── MEGA MENU ────────────────────────────────────────── */
.msd-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(15,23,42,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
  z-index: 99;
  pointer-events: none;
}
/* Hover bridge: a transparent strip below the trigger that fills the visual
   gap between the menu trigger and the mega panel. Without this, the cursor
   leaves the trigger before reaching the mega, which collapses :hover state
   and dismisses the menu prematurely. */
.msd-nav-item.has-mega > .msd-nav-trigger { position: relative; }
.msd-nav-item.has-mega > .msd-nav-trigger::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -24px;
  right: -24px;
  height: 36px;
  background: transparent;
  pointer-events: auto;
}
.msd-nav-item.has-mega:hover .msd-mega,
.msd-nav-item.has-mega:focus-within .msd-mega,
.msd-nav-item.is-open .msd-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear;
}
.msd-mega-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 36px 24px 40px;
}
.msd-mega-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.3fr;
  gap: 32px;
}
.msd-mega-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msd-mega-col-head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--teal-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--t), border-color var(--t);
}
.msd-mega-col-head:hover { color: var(--teal); border-color: var(--teal); }
.msd-mega-col-arrow { color: var(--soft); font-weight: 400; transition: transform var(--t), color var(--t); }
.msd-mega-col-head:hover .msd-mega-col-arrow { color: var(--teal); transform: translateX(4px); }
.msd-mega-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msd-mega-list a {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--mid);
  display: inline-block;
  padding: 4px 0;
  transition: color var(--t), padding-left var(--t);
}
.msd-mega-list a:hover { color: var(--teal); padding-left: 4px; }

.msd-mega-feature {
  background: linear-gradient(135deg, var(--teal-50) 0%, #fff 100%);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msd-mega-feature-eyebrow {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal);
}
.msd-mega-feature-title { font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.msd-mega-feature-desc { font-size: 0.85rem; color: var(--mid); line-height: 1.55; margin: 0 0 8px; }
.msd-mega-feature .msd-btn { width: 100%; }
.msd-mega-feature-link {
  font-size: 0.85rem; font-weight: 600;
  color: var(--teal);
  text-align: center;
  padding-top: 4px;
}
.msd-mega-feature-link:hover { color: var(--teal-600); }

/* ── HERO ──────────────────────────────────────────────── */
.msd-hero {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 120px 0 100px;
}
.msd-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.msd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.55) 50%, rgba(15,23,42,0.25) 100%); z-index: 1; }
.msd-hero-content { position: relative; z-index: 2; max-width: 720px; }
.msd-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}
.msd-hero-eyebrow .msd-icon { width: 14px; height: 14px; color: var(--gold); }
.msd-hero h1 {
  color: #fff;
  margin-bottom: 24px;
  max-width: 18ch;
}
.msd-hero p.msd-hero-sub {
  color: rgba(255,255,255,0.85);
  font-size: 1.15rem;
  max-width: 50ch;
  margin: 0 0 36px;
  line-height: 1.55;
}
.msd-hero-rating {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 36px;
  color: #fff;
}
.msd-hero-rating-stars { color: #fbbf24; font-size: 1.05rem; letter-spacing: 0.05em; }
.msd-hero-rating-text { font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.9); }
.msd-hero-rating-text strong { font-weight: 700; }

.msd-hero .msd-dual-cta .msd-btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.msd-hero .msd-dual-cta .msd-btn-outline:hover { background: #fff; color: var(--ink); }

/* Stat strip floating below hero */
.msd-hero-stats {
  position: relative;
  margin-top: -60px;
  z-index: 3;
}
.msd-hero-stats-inner {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.msd-stat-item {
  padding: 28px 28px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.msd-stat-item:last-child { border-right: none; }
.msd-stat-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.02em;
}
.msd-stat-label { font-size: 0.78rem; color: var(--mid); margin-top: 8px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }

/* ── TRUST STRIP ──────────────────────────────────────── */
.msd-trust-strip {
  padding: 60px 0;
  background: #fff;
}
/* Tight pairing when the trust strip sits directly under the hero stats card —
   collapses the visual seam so the strip reads as a continuation of the hero. */
.msd-hero-stats-section + .msd-trust-strip {
  padding-top: 28px;
  padding-bottom: 48px;
}
.msd-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  text-align: center;
}
.msd-trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 16px 8px;
}
.msd-trust-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-50);
  color: var(--teal);
  border-radius: var(--radius-pill);
}
.msd-trust-icon .msd-icon { width: 26px; height: 26px; }
.msd-trust-item h3 { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.msd-trust-item p { font-size: 0.84rem; color: var(--mid); margin: 0; line-height: 1.5; max-width: 22ch; }

/* ── WELCOME ──────────────────────────────────────────── */
.msd-welcome-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.msd-welcome-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-md); }
.msd-welcome-img img { width: 100%; height: 100%; object-fit: cover; }
.msd-welcome-text p { color: var(--mid); font-size: 1.05rem; line-height: 1.7; margin: 0 0 24px; }
.msd-welcome-text .msd-h3 { font-size: 1.15rem; font-weight: 500; color: var(--mid); margin: 0 0 24px; }

/* ── DOCTORS GRID (3-card) ─────────────────────────────── */
.msd-doctors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.msd-doctor-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: block;
}
.msd-doctor-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--teal-100); }
.msd-doctor-img { aspect-ratio: 4/5; overflow: hidden; background: var(--bg-soft); }
.msd-doctor-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.msd-doctor-card:hover .msd-doctor-img img { transform: scale(1.04); }
.msd-doctor-body { padding: 28px; }
.msd-doctor-name { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.msd-doctor-specialty { font-size: 0.78rem; color: var(--teal); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 16px; }
.msd-doctor-bio { font-size: 0.95rem; color: var(--mid); line-height: 1.65; margin: 0 0 20px; }
.msd-doctor-link { font-size: 0.9rem; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; transition: gap var(--t); }
.msd-doctor-link:hover { color: var(--teal-600); gap: 10px; }
.msd-doctor-link::after { content: '→'; transition: transform var(--t); }
.msd-doctor-card:hover .msd-doctor-link::after { transform: translateX(4px); }

/* ── NEW PATIENTS ─────────────────────────────────────── */
.msd-np-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.msd-np-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t);
}
.msd-np-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.msd-np-card-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--teal-50);
  color: var(--teal);
  font-size: 1.1rem; font-weight: 700;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.msd-np-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.msd-np-card p { font-size: 0.95rem; color: var(--mid); line-height: 1.65; margin: 0; }

.msd-insurance-banner {
  background: linear-gradient(135deg, var(--ink) 0%, #1e293b 100%);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  color: #fff;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .msd-insurance-banner { padding: 28px 24px; gap: 20px; }
  .msd-insurance-banner .msd-btn { width: 100%; }
}
.msd-insurance-text h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 8px; color: #fff; letter-spacing: -0.01em; }
.msd-insurance-text p { font-size: 0.95rem; color: rgba(255,255,255,0.7); margin: 0; }
.msd-insurance-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.msd-insurance-banner .msd-chip { background: rgba(255,255,255,0.1); color: #fff; }
.msd-insurance-banner .msd-btn-primary { background: var(--gold); color: var(--ink); flex-shrink: 0; }
.msd-insurance-banner .msd-btn-primary:hover { background: #b7884c; color: var(--ink); }

/* ── WHY CHOOSE ───────────────────────────────────────── */
.msd-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.msd-why-features { display: flex; flex-direction: column; gap: 36px; }
.msd-why-item { display: flex; gap: 24px; }
.msd-why-num {
  font-size: 2.2rem; font-weight: 800;
  color: var(--teal);
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
  letter-spacing: -0.03em;
  padding-top: 4px;
  position: relative;
}
.msd-why-num::after {
  content: '';
  position: absolute;
  left: 0; right: 16px;
  bottom: -10px;
  height: 2px;
  background: var(--teal-50);
}
.msd-why-item-text h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.msd-why-item-text p { font-size: 0.95rem; color: var(--mid); line-height: 1.65; margin: 0; }
.msd-why-img-wrap { position: relative; }
.msd-why-img { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 3/4; }
.msd-why-img img { width: 100%; height: 100%; object-fit: cover; }
.msd-why-badge {
  position: absolute; bottom: -24px; left: -24px;
  background: var(--teal); color: #fff;
  padding: 24px 28px; border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.msd-why-badge-num { font-size: 2.2rem; font-weight: 800; display: block; line-height: 1; letter-spacing: -0.02em; }
.msd-why-badge-text { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.9; font-weight: 600; }

/* ── CITY INTRO ───────────────────────────────────────── */
.msd-city-intro { text-align: center; }
.msd-city-intro .msd-section-title { margin-left: auto; margin-right: auto; max-width: 18ch; }
.msd-city-intro p { color: var(--mid); font-size: 1.05rem; line-height: 1.7; max-width: 65ch; margin: 0 auto 28px; }
.msd-city-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }

/* ── SERVICES OVERVIEW — 4×2 icon grid ─────────────────── */
.msd-services-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.msd-service-icon-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  transition: transform var(--t), background var(--t), border-color var(--t);
  position: relative;
}
.msd-service-icon-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.msd-service-icon-circle {
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(29,140,160,0.18), rgba(201,160,90,0.12));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 4px;
  transition: transform var(--t), color var(--t);
}
.msd-service-icon-card:hover .msd-service-icon-circle { transform: scale(1.05); color: #fff; }
.msd-service-icon-card h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.01em; }
.msd-service-icon-card p { font-size: 0.86rem; color: rgba(255,255,255,0.7); line-height: 1.55; margin: 0; flex: 1; }
.msd-service-icon-arrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  transition: gap var(--t);
}
.msd-service-icon-card:hover .msd-service-icon-arrow { gap: 8px; color: #fff; }

/* Old image-card style retained as fallback for any legacy references. */
.msd-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.msd-service-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  transition: transform var(--t), border-color var(--t), background var(--t);
  aspect-ratio: 4/5;
}
.msd-service-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; }
.msd-service-card-img { position: absolute; inset: 0; }
.msd-service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); filter: brightness(0.55) saturate(1.1); }
.msd-service-card:hover .msd-service-card-img img { transform: scale(1.06); filter: brightness(0.65) saturate(1.2); }
.msd-service-card-body {
  position: relative;
  z-index: 2;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.msd-service-card-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  align-self: flex-start;
}
.msd-service-card h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; }
.msd-service-card p { font-size: 0.88rem; color: rgba(255,255,255,0.85); line-height: 1.55; margin: 0 0 16px; }
.msd-service-card-arrow { font-size: 0.85rem; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--t); }
.msd-service-card:hover .msd-service-card-arrow { gap: 10px; }
.msd-services-footer { margin-top: 48px; display: flex; justify-content: center; }

/* ── BEFORE / AFTER — interactive comparison slider ──── */
.msd-ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.msd-ba-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform var(--t), box-shadow var(--t);
}
.msd-ba-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.msd-ba-compare {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: ew-resize;
  --pos: 50%;
}
.msd-ba-img-before,
.msd-ba-img-after {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.msd-ba-after-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--pos));
  -webkit-clip-path: inset(0 0 0 var(--pos));
}
.msd-ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.msd-ba-handle-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.msd-ba-handle-circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.msd-ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.msd-ba-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 60px; height: 100%; cursor: ew-resize; }
.msd-ba-range::-moz-range-thumb { width: 60px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.msd-ba-range:focus-visible { outline: 0; }
.msd-ba-compare:focus-within .msd-ba-handle-circle { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 4px rgba(29,140,160,0.45); }

.msd-ba-tag {
  position: absolute;
  top: 14px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.msd-ba-tag-before { left: 14px; background: rgba(15,23,42,0.85); color: #fff; }
.msd-ba-tag-after  { right: 14px; background: var(--teal); color: #fff; }

.msd-ba-label {
  padding: 18px 22px;
  background: #fff;
  font-size: 0.92rem;
  color: var(--mid);
  display: flex; flex-direction: column; gap: 2px;
}
.msd-ba-label strong { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.msd-ba-label > span { font-size: 0.85rem; }
.msd-ba-stock {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--soft);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.msd-ba-placeholder { aspect-ratio: 1/1; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--soft); font-size: 0.85rem; text-align: center; padding: 24px; }

/* ── DOCTOR FEATURE (single doctor section) ───────────── */
.msd-doctor-feature { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: start; }
.msd-doctor-feature-img { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.msd-doctor-feature-img img { width: 100%; object-fit: cover; }
.msd-doctor-quote { border-left: 3px solid var(--gold); padding: 4px 0 4px 24px; margin: 36px 0; }
.msd-doctor-quote blockquote { font-size: 1.15rem; font-weight: 500; color: var(--ink); line-height: 1.55; margin: 0; }
.msd-doctor-credentials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.msd-cred-tag { background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink); font-size: 0.78rem; padding: 6px 14px; border-radius: var(--radius-pill); font-weight: 500; }

/* ── CTA STRIP ────────────────────────────────────────── */
.msd-cta-strip { padding: 96px 0; text-align: center; }
.msd-cta-strip .msd-section-title { color: #fff; margin-left: auto; margin-right: auto; max-width: 22ch; }
.msd-cta-strip p { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin: 0 auto 36px; max-width: 50ch; }
.msd-cta-strip .msd-dual-cta { justify-content: center; }
.msd-cta-strip .msd-btn-primary { background: #fff; color: var(--ink); }
.msd-cta-strip .msd-btn-primary:hover { background: var(--bg-soft); color: var(--ink); }

/* ── REVIEWS ──────────────────────────────────────────── */
.msd-reviews-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; flex-wrap: wrap; gap: 24px; }
.msd-reviews-rating { text-align: right; display: flex; align-items: center; gap: 18px; }
.msd-rating-num { font-size: 3.2rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.msd-rating-stars { color: #fbbf24; font-size: 1.2rem; letter-spacing: 0.05em; }
.msd-rating-count { font-size: 0.85rem; color: var(--mid); margin-top: 6px; }
.msd-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; }
.msd-review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.msd-review-card:hover { transform: translateY(-4px); border-color: var(--teal-100); box-shadow: var(--shadow); }
.msd-review-card .msd-rating-stars { font-size: 0.95rem; margin-bottom: 16px; display: inline-block; }
.msd-review-text { font-size: 1rem; color: var(--ink); line-height: 1.65; margin: 0 0 24px; }
.msd-review-author { font-size: 0.85rem; font-weight: 600; color: var(--mid); }

/* Trustindex review widget — center it within the section, give it breathing room */
.msd-trustindex-wrap { margin: 0 0 56px; }
.msd-trustindex-wrap .ti-widget { margin: 0 auto !important; }

.msd-map-row { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 48px; align-items: stretch; }
.msd-map-embed { border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; background: var(--bg-soft); border: 1px solid var(--line); }
.msd-map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.msd-map-info { padding: 36px; background: var(--ink); color: #fff; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 20px; font-size: 0.95rem; }
.msd-map-info strong { color: #fff; display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.msd-map-info a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.msd-map-info > div:not(:last-child) { padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* ── FAQ ACCORDION ────────────────────────────────────── */
.msd-faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.msd-faq-item { border-bottom: 1px solid var(--line); }
.msd-faq-q {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.msd-faq-q::-webkit-details-marker { display: none; }
.msd-faq-icon { width: 16px; height: 16px; position: relative; flex-shrink: 0; }
.msd-faq-icon::before, .msd-faq-icon::after {
  content: ''; position: absolute; background: var(--teal); transition: transform var(--t);
  top: 50%; left: 0; width: 16px; height: 2px; transform: translateY(-50%); border-radius: 2px;
}
.msd-faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.msd-faq-item[open] .msd-faq-icon::after { transform: translateY(-50%) rotate(0); }
.msd-faq-a { padding: 0 0 24px; color: var(--mid); font-size: 0.98rem; line-height: 1.7; }
.msd-faq-a p { margin: 0 0 12px; }
.msd-faq-a p:last-child { margin: 0; }

/* ── FOOTER ───────────────────────────────────────────── */
.msd-footer { position: relative; overflow: hidden; background: var(--ink); color: rgba(255,255,255,0.6); padding: 80px 0 32px; }
.msd-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 64px; }
/* Footer logo lockup — same split layout as the header, recolored for dark bg */
.msd-footer-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; text-decoration: none; }
.msd-footer-tooth { height: 52px; width: auto; object-fit: contain; filter: brightness(0) invert(1) opacity(0.9); }
.msd-footer-wordmark { display: inline-flex; flex-direction: column; line-height: 1; text-transform: uppercase; }
.msd-footer-wordmark-1 { font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: 0.06em; }
.msd-footer-wordmark-2 { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.32em; margin-top: 4px; padding-left: 1px; }

/* Old single-image fallback */
.msd-footer-brand > img { height: 56px; max-width: 240px; margin-bottom: 18px; filter: brightness(0) invert(1) opacity(0.9); object-fit: contain; }
.msd-footer-brand p { font-size: 0.9rem; line-height: 1.7; margin: 0 0 20px; max-width: 32ch; }

/* Social icons — brand colors */
.msd-footer-social { display: flex; gap: 10px; }
.msd-social {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-pill);
  transition: background var(--t), transform var(--t);
  overflow: hidden;
}
.msd-social svg { width: 18px; height: 18px; }
.msd-social:hover { transform: translateY(-2px); }
/* Facebook */
.msd-social--facebook { background: #1877F2; }
.msd-social--facebook:hover { background: #166fe5; }
.msd-social--facebook svg { fill: #fff; }
/* Instagram — gradient */
.msd-social--instagram { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); }
.msd-social--instagram:hover { filter: brightness(1.08); }
.msd-social--instagram svg { fill: #fff; }
/* Google — leave the multi-color SVG visible on a near-white tile */
.msd-social--google { background: #fff; }
.msd-social--google:hover { background: #f1f5f9; }
.msd-social--google svg { width: 22px; height: 22px; }
.msd-footer-col h4 { color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; }
.msd-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.msd-footer-col li a { font-size: 0.88rem; color: rgba(255,255,255,0.6); transition: color var(--t); }
.msd-footer-col li a:hover { color: #fff; }
.msd-footer-col li.msd-static { font-size: 0.88rem; color: rgba(255,255,255,0.6); }

.msd-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; font-size: 0.78rem; flex-wrap: wrap; gap: 8px; align-items: center; }
.msd-footer-legal-links a { margin: 0 4px; color: rgba(255,255,255,0.55); }
.msd-footer-legal-links a:hover { color: #fff; }

/* ── MOBILE STICKY CALL BAR ───────────────────────────── */
.msd-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  z-index: 90;
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
}
.msd-sticky-cta-inner { display: flex; gap: 8px; max-width: var(--container); margin: 0 auto; }
.msd-sticky-cta .msd-btn { flex: 1; padding: 14px 16px; font-size: 0.92rem; }

/* ── BREADCRUMBS ──────────────────────────────────────── */
.msd-breadcrumbs { font-size: 0.82rem; margin: 0 0 18px; color: var(--mid); }
.msd-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msd-breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.msd-breadcrumbs a { color: var(--mid); text-decoration: none; transition: color var(--t); }
.msd-breadcrumbs a:hover { color: var(--teal); }
.msd-breadcrumbs li[aria-current="page"] span { color: var(--ink); font-weight: 500; }
.msd-breadcrumb-sep { color: var(--soft); font-weight: 400; }

/* ── PAGE INTROS / GENERIC PAGE LAYOUTS ───────────────── */
.msd-page-hero { padding: 96px 0 64px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.msd-page-hero h1 { margin: 0 0 16px; max-width: 22ch; }
.msd-page-hero p { color: var(--mid); font-size: 1.1rem; max-width: 56ch; margin: 0; line-height: 1.6; }
.msd-page-content { padding: 80px 0; }
.msd-page-content .msd-container { max-width: 800px; }
.msd-page-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 56px 0 20px; letter-spacing: -0.02em; }
.msd-page-content h3 { font-size: 1.3rem; margin: 36px 0 14px; }
.msd-page-content p { margin: 0 0 18px; line-height: 1.75; color: var(--mid); }
.msd-page-content ul, .msd-page-content ol { padding-left: 24px; margin: 0 0 24px; }
.msd-page-content li { margin: 0 0 10px; line-height: 1.7; color: var(--mid); }
.msd-page-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.msd-page-content a:hover { color: var(--teal-600); }

/* ── 404 ──────────────────────────────────────────────── */
.msd-404 { padding: 140px 0; text-align: center; }
.msd-404 h1 { font-size: 6rem; color: var(--teal); margin: 0 0 12px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.msd-404 h2 { font-size: 1.6rem; font-weight: 600; margin: 0 0 16px; }
.msd-404 p { color: var(--mid); max-width: 56ch; margin: 0 auto 32px; line-height: 1.6; font-size: 1.05rem; }

/* ── LANDING PAGES (direct-response) ──────────────────── */
.msd-lp-hero { padding: 80px 0 56px; background: var(--bg-soft); }
.msd-lp-hero h1 { letter-spacing: -0.03em; margin: 0 0 24px; }
.msd-lp-price-banner {
  background: var(--gold); color: var(--ink);
  padding: 22px 28px; border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; gap: 18px;
  margin: 0 0 32px; box-shadow: var(--shadow-md);
}
.msd-lp-price-banner .msd-lp-price { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.msd-lp-price-banner .msd-lp-price-sub { font-size: 0.92rem; line-height: 1.4; font-weight: 500; }

/* ── FORMS (contact, etc.) ────────────────────────────── */
.msd-form { display: flex; flex-direction: column; gap: 18px; }
.msd-form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msd-form-row { display: flex; flex-direction: column; gap: 6px; }
.msd-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.msd-form label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.msd-req { color: var(--teal); font-weight: 700; }
.msd-form input[type="text"],
.msd-form input[type="tel"],
.msd-form input[type="email"],
.msd-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.msd-form input::placeholder,
.msd-form textarea::placeholder { color: var(--soft); }
.msd-form input:focus,
.msd-form textarea:focus {
  outline: 0;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,140,160,0.15);
}
.msd-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.msd-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--mid) !important;
  line-height: 1.55;
  cursor: pointer;
}
.msd-form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.msd-form-consent a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.msd-form-consent a:hover { color: var(--teal-600); }
.msd-form-disclaimer {
  margin: 8px 0 12px;
  padding: 14px 18px;
  background: #fff8e6;
  border: 1px solid #f5d877;
  border-left: 4px solid #d4a017;
  border-radius: var(--radius);
  font-size: 0.86rem;
  color: #6b4f0f;
  line-height: 1.55;
}
.msd-form-disclaimer strong { color: #4a3608; }
.msd-form-alert {
  padding: 14px 18px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #b91c1c;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: #7f1d1d;
}
.msd-form button[type="submit"] { align-self: flex-start; }
@media (max-width: 700px) {
  .msd-form-grid-2 { grid-template-columns: 1fr; }
  .msd-form button[type="submit"] { width: 100%; align-self: stretch; justify-content: center; }
}

/* ── ACCESSIBILITY: focus rings ───────────────────────── */
*:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.msd-btn:focus-visible { outline-offset: 4px; }
.msd-hero a:focus-visible, .msd-section--ink a:focus-visible, .msd-section--teal a:focus-visible { outline-color: #fff; }

/* ── SCROLL-REVEAL ────────────────────────────────────── */
[data-msd-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  will-change: opacity, transform;
}
[data-msd-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-msd-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .msd-services-grid { grid-template-columns: repeat(2, 1fr); }
  .msd-services-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .msd-trust-grid { grid-template-columns: repeat(3, 1fr); }
  .msd-footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .msd-services-icon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .msd-welcome-grid,
  .msd-why-grid,
  .msd-doctor-feature,
  .msd-map-row { grid-template-columns: 1fr; gap: 40px; }
  .msd-doctors-grid,
  .msd-np-cards,
  .msd-reviews-grid,
  .msd-ba-grid { grid-template-columns: 1fr 1fr; }
  .msd-hero-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .msd-stat-item:nth-child(2) { border-right: none; }
  .msd-stat-item:nth-child(1), .msd-stat-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .msd-why-badge { display: none; }
  .msd-insurance-banner { flex-direction: column; align-items: flex-start; }
  .msd-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .msd-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .msd-doctor-feature { grid-template-columns: 1fr; gap: 32px; }
  .msd-doctor-feature-img { max-width: 320px; }
}
@media (max-width: 700px) {
  .msd-nav-links { display: none; position: fixed; top: 76px; left: 0; right: 0; width: 100%; background: #fff; flex-direction: column; padding: 20px; box-shadow: var(--shadow-md); gap: 4px; align-items: stretch; border-top: 1px solid var(--line); max-height: calc(100vh - 76px); overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 99; touch-action: pan-y; }
  .msd-nav-links.is-open { display: flex; }
  .msd-nav-links > li > a,
  .msd-nav-links .msd-nav-trigger {
    /* Tap-target: ≥48px height per Google's mobile guidelines. */
    min-height: 48px; display: flex; align-items: center; padding: 12px 8px; font-size: 1rem;
    border-bottom: 1px solid var(--line);
    width: 100%;
  }
  .msd-nav-links > li:last-child > a { border-bottom: 0; }
  .msd-nav-toggle { display: block; min-width: 44px; min-height: 44px; }
  .msd-nav-cta { display: none; }
  /* Mega menu — collapse to inline accordion on mobile */
  .msd-nav-item.has-mega { width: 100%; }
  .msd-nav-trigger { width: 100%; justify-content: space-between; }
  .msd-mega { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; border: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
  .msd-nav-item.has-mega.is-open .msd-mega { max-height: none; overflow-y: visible; }
  .msd-mega-inner { padding: 4px 0 4px; }
  .msd-mega-grid { grid-template-columns: 1fr; gap: 14px; }
  .msd-mega-col-head { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .msd-mega-list a { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; }
  .msd-mega-feature { display: none; }
  /* Simple submenu — inline-stacked under its parent on mobile */
  .msd-nav-item.has-sub { width: 100%; }
  .msd-nav-item.has-sub > .msd-nav-trigger::after { display: none; }
  .msd-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
    min-width: 0;
    width: 100%;
    display: none;
  }
  .msd-nav-item.has-sub.is-open > .msd-submenu {
    display: block;
  }
  .msd-submenu a {
    padding-left: 28px;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
  }
  .msd-submenu a:hover { padding-left: 28px; }
  .msd-doctors-grid,
  .msd-np-cards,
  .msd-reviews-grid,
  .msd-ba-grid,
  .msd-services-grid,
  .msd-trust-grid { grid-template-columns: 1fr; }
  .msd-topbar-left span:not(:first-child) { display: none; }
  .msd-hero { min-height: 540px; padding: 64px 0 64px; }
  .msd-hero h1 { font-size: 2.2rem; line-height: 1.1; }
  .msd-hero p.msd-hero-sub { font-size: 1rem; }
  .msd-hero-stats { margin-top: 0; padding-top: 28px; }
  .msd-stat-num { font-size: 1.5rem; }
  .msd-stat-label { font-size: 0.7rem; }
  .msd-sticky-cta { display: block; }
  body { padding-bottom: 76px; }
  /* Stop the hero rating + CTA stack from getting cramped */
  .msd-hero-rating { gap: 10px; font-size: 0.85rem; }
  .msd-hero .msd-dual-cta { width: 100%; }
  .msd-hero .msd-dual-cta .msd-btn { flex: 1; min-width: 0; }
  /* Mobile-friendly button minimums */
  .msd-btn { min-height: 48px; padding: 14px 24px; }
  .msd-btn-lg { min-height: 56px; padding: 16px 28px; }
  /* Breadcrumbs need to stay readable */
  .msd-breadcrumbs { font-size: 0.78rem; }
  /* Page hero slimmer on phones */
  .msd-page-hero { padding: 56px 0 36px; }
  .msd-page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .msd-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .msd-reviews-header { flex-direction: column; align-items: flex-start; }
  .msd-reviews-rating { flex-direction: row; text-align: left; }
  .msd-cta-strip { padding: 64px 0; }
  .msd-cta-strip .msd-dual-cta { flex-direction: column; }
  .msd-cta-strip .msd-btn { width: 100%; }
}

/* ── INSURANCE ARCHIVE CARDS ───────────────────────────
   Uniform logo block on top, card details below. Logo container is a fixed
   height/width "logo well" with object-fit: contain so different aspect-ratio
   logos all read the same size. Carriers without a logo file show a styled
   monogram so the grid still feels uniform. */
.msd-insurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.msd-insurance-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.msd-insurance-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-100);
  box-shadow: 0 16px 32px rgba(15,23,42,0.08);
  color: inherit;
}
.msd-insurance-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #fafcfd 0%, #f4f7f9 100%);
  border-bottom: 1px solid var(--line);
}
.msd-insurance-card-logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  transition: opacity var(--t);
}
.msd-insurance-card-monogram {
  font-family: var(--font-display, inherit);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--teal-700);
  background: linear-gradient(135deg, var(--teal-50) 0%, #fff 100%);
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--teal-100);
}
.msd-insurance-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.msd-insurance-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.msd-insurance-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--mid);
}
.msd-insurance-card-type {
  display: inline-block;
  padding: 3px 10px;
  background: var(--teal-50);
  color: var(--teal-700);
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.msd-insurance-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--mid);
}
.msd-insurance-card-status.is-in-network { color: #1f6a4d; }
.msd-insurance-card-status.is-in-network .msd-icon { color: #2f8c66; }
.msd-insurance-card-link {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
  border-top: 1px solid var(--line);
}
.msd-insurance-card-link svg { transition: transform var(--t); }
.msd-insurance-card:hover .msd-insurance-card-link svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .msd-insurance-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .msd-insurance-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .msd-insurance-card-logo { height: 76px; padding: 12px 16px; }
  .msd-insurance-card-logo img { max-height: 48px; }
  .msd-insurance-card-monogram { width: 52px; height: 52px; font-size: 1.3rem; }
  .msd-insurance-card-body { padding: 12px 14px 14px; }
  .msd-insurance-card-name { font-size: 0.92rem; }
}

/* ── SPECIALS PAGE ─────────────────────────────────────
   Tone palette (used by .msd-tone-{name} on cards): five paired colors that
   rotate so adjacent cards visually contrast. Each tone defines a soft
   surface (--t-bg), a saturated accent (--t-accent), and a deep ink-on-tone
   for the price (--t-ink). */
.msd-tone-teal     { --t-bg: #EDF7F5; --t-accent: #5BAFA0; --t-ink: #2D7068; --t-grad: linear-gradient(135deg, #5BAFA0 0%, #3D8F82 100%); }
.msd-tone-gold     { --t-bg: #fcf3e2; --t-accent: #c9a05a; --t-ink: #6f4f1b; --t-grad: linear-gradient(135deg, #d9b06a 0%, #b88742 100%); }
.msd-tone-coral    { --t-bg: #fdecec; --t-accent: #e86a6a; --t-ink: #8a2727; --t-grad: linear-gradient(135deg, #f08585 0%, #d05050 100%); }
.msd-tone-mint     { --t-bg: #e6f6ee; --t-accent: #3aa97c; --t-ink: #1f6a4d; --t-grad: linear-gradient(135deg, #4cc391 0%, #2f8c66 100%); }
.msd-tone-lavender { --t-bg: #efebfc; --t-accent: #7a6bd1; --t-ink: #463c8a; --t-grad: linear-gradient(135deg, #8e80de 0%, #6356b8 100%); }

.msd-specials-page { background: #fff; }

/* Hero — bold gradient header, less reliant on stock imagery than other heros. */
.msd-specials-hero {
  background: radial-gradient(circle at 18% 30%, rgba(201,160,90,0.22) 0%, transparent 55%),
              radial-gradient(circle at 82% 70%, rgba(29,140,160,0.22) 0%, transparent 60%),
              linear-gradient(180deg, #f8fbfc 0%, #fff 100%);
  padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
  position: relative;
  overflow: hidden;
}
.msd-specials-hero-inner { max-width: 760px; }
.msd-specials-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  color: var(--teal);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--teal-100);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  margin-bottom: 20px;
}
.msd-specials-hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.msd-specials-hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--mid);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 640px;
}
.msd-specials-hero-cta { display: flex; flex-wrap: wrap; gap: 56px 56px; }
.msd-specials-hero-note {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 22px 0 0;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--teal-100);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.5;
  max-width: 640px;
}
.msd-specials-hero-note .msd-icon { color: var(--teal); flex-shrink: 0; }
.msd-specials-hero-note strong { color: var(--teal-700); }

/* Featured trio — large, eye-catching cards with tone-based gradient backdrop. */
.msd-specials-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.msd-special-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 30px 30px;
  border-radius: var(--radius-lg);
  background: var(--t-grad);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 36px rgba(15,23,42,0.10);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.msd-special-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% -10%, rgba(255,255,255,0.22) 0%, transparent 55%),
    radial-gradient(circle at -10% 110%, rgba(0,0,0,0.18) 0%, transparent 55%);
  z-index: -1;
}
.msd-special-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px rgba(15,23,42,0.16);
  color: #fff;
}
.msd-special-feature-badge {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
}
.msd-special-feature-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  color: #fff;
  margin-top: 8px;
}
.msd-special-feature-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 4px 0 0;
  line-height: 1.2;
}
.msd-special-feature-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.msd-special-feature-price-num {
  font-size: clamp(2.4rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.msd-special-feature-price-unit {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.msd-special-feature-price-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: -4px;
}
.msd-special-feature-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 8px 0 0;
}
.msd-special-feature-fine {
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  font-style: italic;
  margin: 4px 0 0;
}
/* Action buttons — paired Book Online + Learn More on every specials card. */
.msd-special-feature-actions,
.msd-special-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}
.msd-special-feature-actions { border-top: 1px solid rgba(255,255,255,0.25); }
.msd-special-card-actions { border-top: 1px solid var(--line); }
.msd-special-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t);
}
.msd-special-btn-sm { padding: 8px 14px; font-size: 0.8rem; }
.msd-special-btn svg { transition: transform var(--t); }
.msd-special-btn:hover svg { transform: translateX(2px); }

/* Featured (on dark gradient background) */
.msd-special-feature .msd-special-btn-book {
  background: #fff;
  color: var(--t-ink);
}
.msd-special-feature .msd-special-btn-book:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-2px);
}
.msd-special-feature .msd-special-btn-learn {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.msd-special-feature .msd-special-btn-learn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.85);
  color: #fff;
}

/* Standard cards (on white background) */
.msd-special-card .msd-special-btn-book {
  background: var(--t-accent);
  color: #fff;
}
.msd-special-card .msd-special-btn-book:hover {
  background: var(--t-ink);
  color: #fff;
  transform: translateY(-1px);
}
.msd-special-card .msd-special-btn-learn {
  background: transparent;
  color: var(--t-ink);
  border-color: var(--line);
}
.msd-special-card .msd-special-btn-learn:hover {
  background: var(--t-bg);
  border-color: var(--t-accent);
  color: var(--t-ink);
}

/* Standard specials grid — softer, tone-tinted cards. */
.msd-specials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}
.msd-special-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--t-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.msd-special-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(15,23,42,0.08);
}
.msd-special-card-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--t-bg);
  color: var(--t-accent);
  border-radius: 14px;
}
.msd-special-card-sub {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-accent);
  margin-top: 4px;
}
.msd-special-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.25;
}
.msd-special-card-price {
  font-size: clamp(1.7rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--t-ink);
  line-height: 1;
  margin: 2px 0 4px;
}
.msd-special-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--mid);
  margin: 0;
}
.msd-special-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t-accent);
  text-decoration: none;
}
.msd-special-card-cta svg { transition: transform var(--t); }
.msd-special-card-cta:hover { color: var(--t-ink); }
.msd-special-card-cta:hover svg { transform: translateX(3px); }

.msd-specials-disclaimer {
  margin-top: 48px;
  padding: 22px 26px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--mid);
}
.msd-specials-disclaimer a { color: var(--teal); font-weight: 600; }

@media (max-width: 1024px) {
  .msd-specials-featured,
  .msd-specials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .msd-specials-featured,
  .msd-specials-grid { grid-template-columns: 1fr; }
  .msd-specials-hero-cta .msd-btn { min-width: 0; justify-content: center; padding-left: 32px; padding-right: 32px; margin-bottom: 12px; }
  .msd-special-feature { padding: 28px 22px 24px; }
  .msd-special-card { padding: 24px 22px 22px; }
}

/* ── SERVICE PAGE TEMPLATE (modern) ────────────────────
   Design system for single-service detail pages — hero with stat row,
   benefits grid, 4-step process timeline, candidate split, cost banner,
   FAQ accordion. Applied to single-msd_service.php for all services. */
.msd-svc .msd-section { padding: clamp(40px, 5vw, 72px) 0; }
.msd-svc .msd-section + .msd-section { padding-top: 0; }
.msd-svc .msd-section--soft + .msd-section,
.msd-svc .msd-section--cream + .msd-section,
.msd-svc .msd-section + .msd-section--soft,
.msd-svc .msd-section + .msd-section--cream { padding-top: clamp(40px, 5vw, 72px); }
.msd-svc .msd-section-sub { margin-bottom: 24px; }

/* Hero */
.msd-svc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5.5vw, 72px) 0 clamp(36px, 4.5vw, 60px);
  /* Cream wash blankets the entire right side (top to bottom, edge to ~30%
     across) at full saturation before fading. Image's cream background
     sits on solid matching cream — no seam at any corner. */
  background:
    radial-gradient(ellipse 90% 140% at 78% 50%, #f4ecd8 0%, #f4ecd8 55%, rgba(244,236,216,0.55) 80%, rgba(244,236,216,0) 100%),
    radial-gradient(circle at 5% 90%, rgba(29,140,160,0.14) 0%, transparent 55%),
    linear-gradient(180deg, #fbf8f1 0%, #fefdfb 100%);
}
.msd-svc-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.msd-svc-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  color: var(--teal);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--teal-100);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  margin-bottom: 18px;
}
.msd-svc-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.msd-svc-hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--mid);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 560px;
}
.msd-svc-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 24px;
  padding: 18px 22px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(15,23,42,0.05);
  margin-bottom: 28px;
  width: fit-content;
}
.msd-svc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.msd-svc-stat:last-child { border-right: 0; padding-right: 0; }
.msd-svc-stat-num {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--teal);
  line-height: 1;
}
.msd-svc-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}
.msd-svc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.msd-svc-hero-art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.msd-svc-hero-art svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(15,23,42,0.10));
}
/* Anatomy hero: cropped 3D-render with a cream background that exactly
   matches the right-side wash on .msd-svc-hero. A radial mask softens the
   image's left edge so it dissolves into the gradient instead of ending in
   a hard rectangle. No card frame — image sits raw in the hero. */
.msd-svc-hero-figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.msd-svc-hero-figure img {
  width: 100%;
  max-width: 405px;
  height: auto;
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  /* Soft drop shadow tinted to the cream backdrop instead of cool grey. */
  filter: drop-shadow(0 22px 36px rgba(140,110,60,0.16)) drop-shadow(0 6px 14px rgba(15,23,42,0.05));
  /* Soft radial vignette: keeps the implant + labels solid in the center,
     fades all four edges of the rectangular cream JPEG into transparency
     so the image dissolves into the surrounding gradient on every side. */
  -webkit-mask-image: radial-gradient(ellipse 95% 100% at 45% 50%, #000 55%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 95% 100% at 45% 50%, #000 55%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0) 100%);
}

/* Overview — 2-column with photo */
.msd-svc-overview {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.msd-svc-overview-text { display: flex; flex-direction: column; align-items: flex-start; }
.msd-svc-overview-lead {
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 16px 0 18px;
  font-weight: 500;
}
.msd-svc-overview p { color: var(--mid); line-height: 1.7; }
.msd-svc-overview-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}
/* When a service has no overview image, the text occupies the full width */
.msd-svc-overview--no-image { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.msd-svc-overview--no-image .msd-svc-overview-text { align-items: center; }
/* When a service has no hero image, the content column takes the full hero */
.msd-svc-hero-grid--no-image { grid-template-columns: 1fr; max-width: 720px; }

/* Benefits grid */
.msd-svc-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.msd-svc-benefit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.msd-svc-benefit:hover {
  transform: translateY(-4px);
  border-color: var(--teal-100);
  box-shadow: 0 14px 28px rgba(15,23,42,0.06);
}
.msd-svc-benefit-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--teal-50) 0%, #fff 100%);
  border: 1px solid var(--teal-100);
  border-radius: 12px;
  color: var(--teal);
}
.msd-svc-benefit-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.msd-svc-benefit-desc {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.55;
  margin: 0;
}

/* Process / 4-step */
.msd-svc-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  counter-reset: step;
}
/* Connector line behind steps */
.msd-svc-process::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--teal-100) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.msd-svc-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
}
.msd-svc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-700) 100%);
  color: #fff;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(29,140,160,0.35), 0 0 0 6px #fff;
  margin-bottom: 18px;
}
.msd-svc-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  color: var(--teal);
  background: var(--teal-50);
  border-radius: 14px;
  margin-bottom: 14px;
}
.msd-svc-step-icon svg { width: 32px; height: 32px; }

/* Photo-led step variant — image on top with the number badge overlaid. */
.msd-svc-process--photo .msd-svc-step { align-items: stretch; text-align: left; }
.msd-svc-step-img {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(15,23,42,0.08);
  aspect-ratio: 4 / 3;
  background: var(--teal-50);
}
.msd-svc-step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.msd-svc-step:hover .msd-svc-step-img img { transform: scale(1.04); }
.msd-svc-step-img-placeholder {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, var(--teal-50) 0%, #f4f7f9 100%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(29,140,160,0.04) 12px 24px);
}
/* Hero placeholder — subtle box with the SVG diagram inside */
.msd-svc-hero-placeholder svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}
.msd-svc-hero-placeholder code {
  background: var(--teal-50);
  color: var(--teal-700);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
}
/* Candidate without image — text takes full width */
.msd-svc-candidate--no-image { grid-template-columns: 1fr; }
.msd-svc-process--photo .msd-svc-step-num {
  position: absolute;
  top: 12px; left: 12px;
  width: 48px; height: 48px;
  font-size: 1rem;
  margin-bottom: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25), 0 0 0 4px #fff;
  z-index: 2;
}
.msd-svc-process--photo .msd-svc-step-title { margin: 0 0 8px; text-align: left; }
.msd-svc-process--photo .msd-svc-step-desc { text-align: left; max-width: none; }
.msd-svc-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.3;
}
.msd-svc-step-desc {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.55;
  margin: 0;
  max-width: 240px;
}

/* Candidate split — image on the left, text+list on the right */
.msd-svc-candidate {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.msd-svc-candidate-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  aspect-ratio: 5 / 6;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
}
.msd-svc-candidate-text .msd-section-title { margin-top: 8px; }
.msd-svc-candidate-text > p { color: var(--mid); line-height: 1.7; margin-bottom: 24px; }
.msd-svc-candidate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 28px;
}
.msd-svc-candidate-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.5;
}
.msd-svc-candidate-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: #e6f6ee;
  color: #2f8c66;
  border-radius: 50%;
  margin-top: 1px;
}
.msd-svc-candidate-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
  padding: 18px 22px;
  background: #fff;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
}
.msd-svc-candidate-note .msd-icon { color: var(--teal); flex-shrink: 0; margin-top: 2px; }

/* Cost callout */
.msd-svc-cost {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-700) 100%);
  color: #fff;
  padding: 48px clamp(28px, 5vw, 56px);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.msd-svc-cost::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% -10%, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(circle at -10% 110%, rgba(0,0,0,0.20) 0%, transparent 55%);
  z-index: -1;
}
.msd-svc-cost-pill {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.msd-svc-cost-title {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.15;
}
.msd-svc-cost-desc {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
}
.msd-svc-cost-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.msd-svc-cost .msd-btn-primary {
  background: #fff;
  color: var(--teal-700);
}
.msd-svc-cost .msd-btn-primary:hover { background: rgba(255,255,255,0.92); color: var(--teal-700); }
.msd-svc-cost .msd-btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.msd-svc-cost .msd-btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.85);
  color: #fff;
}

/* Materials & Technology — clinical detail spec rows */
.msd-svc-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.msd-svc-spec {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.msd-svc-spec:hover {
  transform: translateY(-3px);
  border-color: var(--teal-100);
  box-shadow: 0 14px 28px rgba(15,23,42,0.06);
}
.msd-svc-spec-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--teal-50) 0%, #fff 100%);
  border: 1px solid var(--teal-100);
  border-radius: 12px;
  color: var(--teal);
}
.msd-svc-spec-body { flex: 1; }
.msd-svc-spec-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}
.msd-svc-spec-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.msd-svc-spec-desc {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* FAQ accordion */
.msd-svc-faq-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.msd-svc-faq-head .msd-label,
.msd-svc-faq-head .msd-section-title,
.msd-svc-faq-head .msd-section-sub { margin-left: auto; margin-right: auto; }
.msd-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msd-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.msd-faq-item[open] {
  border-color: var(--teal-100);
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}
.msd-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.msd-faq-q::-webkit-details-marker { display: none; }
.msd-faq-q::marker { content: ''; }
.msd-faq-q:hover { background: var(--teal-50); color: var(--teal-700); }
.msd-faq-q:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.msd-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease), background 0.2s var(--ease);
}
.msd-faq-item[open] > .msd-faq-q { background: var(--teal-50); }
.msd-faq-item[open] .msd-faq-icon {
  transform: rotate(180deg);
  background: var(--teal);
  color: #fff;
}
.msd-faq-a {
  padding: 4px 22px 22px;
  color: var(--mid);
  font-size: 0.94rem;
  line-height: 1.65;
  border-top: 1px solid transparent;
}
.msd-faq-a > div > p:first-child { margin-top: 0; }
.msd-faq-a > div > p:last-child  { margin-bottom: 0; }
.msd-faq-a a { color: var(--teal); font-weight: 600; }
.msd-faq-a strong { color: var(--ink); }
.msd-faq-a em { color: var(--ink); font-style: italic; }

/* Open animation — uses content-visibility + height transition where supported. */
@supports (interpolate-size: allow-keywords) {
  .msd-faq-item { interpolate-size: allow-keywords; }
  .msd-faq-item:not([open]) { height: auto; }
  .msd-faq-item:not([open]) > :not(summary) { display: revert; }
}

/* Responsive */
@media (max-width: 1024px) {
  .msd-svc-benefits { grid-template-columns: repeat(2, 1fr); }
  .msd-svc-process { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .msd-svc-process::before { display: none; }
  .msd-svc-hero-grid { gap: 40px; }
}
@media (max-width: 760px) {
  .msd-svc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .msd-svc-hero-art,
  .msd-svc-hero-figure { order: -1; max-width: 210px; margin: 0 auto; }
  .msd-svc-candidate { grid-template-columns: 1fr; gap: 32px; }
  .msd-svc-overview { grid-template-columns: 1fr; gap: 32px; }
  .msd-svc-benefits,
  .msd-svc-process { grid-template-columns: 1fr; }
  .msd-svc-specs { grid-template-columns: 1fr; }
  .msd-svc-hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .msd-svc-stat { padding-right: 0; padding-bottom: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .msd-svc-stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .msd-svc-cost { padding: 36px 24px; }
  .msd-faq-q { padding: 16px 18px; font-size: 0.94rem; }
  .msd-faq-a { padding: 4px 18px 18px; }
}

/* ── MOBILE ALIGNMENT SWEEP ────────────────────────────
   Consolidated fixes for the common mobile problems patients hit:
   tight container, topbar overflow, hero stats stacking, button sizing,
   section spacing, and per-page layout issues across specials, services,
   insurance, doctors, and homepage sections. */
@media (max-width: 700px) {
  /* Tighter container — 24px edge gutter eats too much on 360px phones */
  .msd-container { padding: 0 18px; }

  /* Topbar: stack the rows so address+hours and CTAs don't fight for width */
  .msd-topbar .msd-container { flex-direction: column; align-items: center; gap: 4px; }
  .msd-topbar-left,
  .msd-topbar-right { gap: 12px; flex-wrap: wrap; }
  .msd-topbar-right { justify-content: center; }

  /* Page hero — reduce top space so the H1 lands above the fold */
  .msd-page-hero { padding: 36px 0 28px; }
  .msd-page-hero p { font-size: 0.95rem; }

  /* Hero stats: 4-col → 2-col on tablet, then 1-col on phone with stacked separators */
  .msd-hero-stats-inner { grid-template-columns: 1fr 1fr; }
  .msd-stat-item { padding: 18px 14px; }
  .msd-stat-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .msd-stat-item:nth-child(even) { border-right: 0; }
  .msd-stat-item:nth-child(1),
  .msd-stat-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .msd-hero-stats { padding: 20px 18px 0; }

  /* Section vertical rhythm — avoid stacked sections eating the screen */
  .msd-section { padding: 48px 0; }

  /* Buttons inside dual-CTA stacks should always go full-width on phones */
  .msd-dual-cta { flex-direction: column; gap: 10px; }
  .msd-dual-cta .msd-btn { width: 100%; }

  /* Specials hero/featured/grid alignment */
  .msd-specials-hero { padding: 40px 0 28px; }
  .msd-specials-hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .msd-special-feature-actions,
  .msd-special-card-actions { flex-direction: column; }
  .msd-special-btn { width: 100%; }

  /* Service archive doctor-card-style grids — already 1-col, but the
     internal padding can crowd; loosen it. */
  .msd-doctor-card { padding: 0; }
  .msd-doctor-body { padding: 18px 18px 20px; }

  /* Service detail (single-msd_service.php) — hero figure goes above text */
  .msd-svc-hero { padding: 36px 0 28px; }
  .msd-svc-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .msd-svc-hero-figure { max-width: 240px; margin: 0 auto; }
  .msd-svc-hero-figure img { max-width: 100%; }
  /* On mobile, the cream wash splits across the whole hero — extend it */
  .msd-svc-hero {
    background:
      radial-gradient(ellipse 140% 70% at 50% 30%, #f4ecd8 0%, rgba(244,236,216,0.5) 50%, rgba(244,236,216,0) 80%),
      linear-gradient(180deg, #fbf8f1 0%, #fefdfb 100%);
  }
  .msd-svc-hero-figure img {
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 65%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 65%, rgba(0,0,0,0) 100%);
  }

  /* Service page: process timeline + benefits + specs all single column */
  .msd-svc-process { gap: 28px; }
  .msd-svc-step-img { aspect-ratio: 16 / 10; }
  .msd-svc-step { text-align: left; }
  .msd-svc-overview { gap: 28px; }
  .msd-svc-candidate { gap: 24px; }
  .msd-svc-candidate-list { padding: 22px; }
  .msd-svc-candidate-list li { font-size: 0.92rem; }
  .msd-svc-candidate-note { padding: 14px 16px; font-size: 0.86rem; }
  .msd-svc-cost-title { font-size: 1.5rem; }
  .msd-svc-cost-desc { font-size: 0.92rem; }
  .msd-svc-cost-actions { flex-direction: column; }
  .msd-svc-cost-actions .msd-btn { width: 100%; }
  .msd-svc-spec { flex-direction: row; padding: 20px; gap: 14px; }
  .msd-svc-spec-icon { width: 38px; height: 38px; }

  /* Mega menu feature card already hides on mobile, but ensure simple
     dropdown items keep 44px tap targets */
  .msd-submenu a { font-size: 0.95rem; }

  /* Footer brand-mark alignment */
  .msd-footer-logo { justify-content: flex-start; }
  .msd-footer-tooth { width: 36px; height: 36px; }
  .msd-footer-wordmark { font-size: 1.1rem; }
  .msd-footer-social { justify-content: flex-start; }
  .msd-footer p { font-size: 0.88rem; }
  .msd-footer h4 { font-size: 0.92rem; }

  /* Mobile sticky CTA bar — flex even, full width */
  .msd-sticky-cta-inner { gap: 8px; padding: 8px 12px; }
  .msd-sticky-cta .msd-btn { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: 0.85rem; }

  /* Insurance archive cards: already responsive, but tighten internal padding */
  .msd-insurance-card-logo { height: 70px; padding: 10px 14px; }
  .msd-insurance-card-body { padding: 12px 14px 14px; gap: 6px; }

  /* Section headers on mobile shouldn't lose breathing room */
  .msd-section-title { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 12px; }
  .msd-section-sub { font-size: 0.95rem; margin-bottom: 24px; }
  .msd-label { font-size: 0.7rem; }

  /* Map row: stack iframe + info evenly */
  .msd-map-embed { aspect-ratio: 4 / 3; }
  .msd-map-info { padding: 22px; }
  .msd-map-info > div { font-size: 0.9rem; }

  /* Reviews + trustindex widget breathing room */
  .msd-trustindex-wrap { margin-top: 20px; }
}

/* Ultra-small phones (< 400px) — tighten padding further */
@media (max-width: 400px) {
  .msd-container { padding: 0 14px; }
  .msd-section { padding: 36px 0; }
  .msd-hero h1 { font-size: 1.85rem; }
  .msd-svc-hero h1 { font-size: 1.6rem; }
  .msd-svc-hero-figure { max-width: 210px; }
  .msd-special-feature-price-num { font-size: 2.2rem; }
  .msd-svc-cost { padding: 28px 20px; }
  .msd-faq-q { padding: 14px 16px; font-size: 0.9rem; }
  .msd-faq-a { padding: 0 16px 16px; font-size: 0.88rem; }
}

/* Anything that horizontally overflows on small screens — global guard */
@media (max-width: 700px) {
  body { overflow-x: hidden; }
  .msd-section,
  .msd-svc-hero,
  .msd-page-hero,
  .msd-cta-strip { overflow: hidden; }
}

/* ========================================
   KPD MOBILE OPTIMIZATIONS
   ======================================== */
@media (max-width: 700px) {

  /* === SPACING === */
  .msd-section { padding: 48px 0; }
  .msd-section--soft { padding: 40px 0; }
  .msd-container { padding: 0 16px; }

  /* === TYPOGRAPHY === */
  h1, .msd-section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.15; }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }
  p { font-size: 0.95rem; line-height: 1.65; }

  /* === HERO === */
  .msd-hero { min-height: 480px; padding: 56px 0 48px; }
  .msd-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); margin-bottom: 12px; }
  .msd-hero p.msd-hero-sub { font-size: 0.95rem; margin-bottom: 20px; }
  .msd-hero-eyebrow { font-size: 0.78rem; margin-bottom: 10px; }

  /* === SECTIONS === */
  .msd-section-title { margin-bottom: 24px; }
  .msd-section-lead { font-size: 1rem; margin-bottom: 28px; }
  .msd-label { font-size: 0.72rem; margin-bottom: 10px; }

  /* === CARDS & GRIDS === */
  .msd-svc-cards,
  .msd-specials-cards,
  .msd-benefit-cards { grid-template-columns: 1fr; gap: 16px; }
  .msd-np-cards { grid-template-columns: 1fr; gap: 16px; }
  .msd-city-list { gap: 8px; }
  .msd-chip-outline { font-size: 0.82rem; padding: 8px 14px; }

  /* === SERVICE HERO === */
  .msd-svc-hero { padding: 48px 0 36px; }
  .msd-svc-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .msd-svc-intro { font-size: 1rem; }

  /* === STATS === */
  .msd-hero-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .msd-svc-stats { gap: 12px; }
  .msd-svc-stat { padding: 16px 12px; }
  .msd-svc-stat-num { font-size: 1.6rem; }

  /* === STEPS === */
  .msd-steps { gap: 20px; }
  .msd-step { padding: 20px 16px; }

  /* === BENEFITS === */
  .msd-benefits { gap: 16px; }
  .msd-benefit { padding: 16px; }

  /* === FAQ === */
  .msd-faq-q { font-size: 0.95rem; padding: 14px 16px; }
  .msd-faq-a { padding: 12px 16px 16px; font-size: 0.9rem; }

  /* === COST/CTA BLOCKS === */
  .msd-cost { padding: 24px 16px; }
  .msd-cost-price { font-size: 2rem; }
  .msd-cta-strip { padding: 48px 0; }

  /* === WELCOME SECTION === */
  .msd-welcome { grid-template-columns: 1fr; gap: 28px; }
  .msd-welcome-img { max-height: 280px; overflow: hidden; }
  .msd-welcome-text { padding: 0; }

  /* === DOCTORS === */
  .msd-doctors-grid { gap: 20px; }
  .msd-doctor-card { padding-bottom: 20px; }

  /* === REVIEWS === */
  .msd-reviews-grid { gap: 16px; }
  .msd-review-card { padding: 20px 16px; }

  /* === WHY CHOOSE === */
  .msd-why-grid { grid-template-columns: 1fr; gap: 16px; }
  .msd-why-item { padding: 20px 16px; }

  /* === TRUST STRIP === */
  .msd-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .msd-trust-item { padding: 16px 12px; }
  .msd-trust-num { font-size: 1.6rem; }

  /* === TOPBAR === */
  .msd-topbar { padding: 6px 16px; font-size: 0.78rem; }

  /* === FOOTER === */
  .msd-footer { padding: 48px 0 28px; }
  .msd-footer h4 { font-size: 0.9rem; margin-bottom: 10px; }
  .msd-footer ul li { font-size: 0.85rem; }
  .msd-footer-bottom { font-size: 0.78rem; padding-top: 20px; }

  /* === FORMS === */
  .ff-el-input--content input,
  .ff-el-input--content textarea,
  .ff-el-input--content select { font-size: 16px !important; padding: 12px 14px !important; }

  /* === PAGE CONTENT === */
  .msd-page-content { padding: 36px 0; }
  .msd-page-hero { padding: 48px 0 28px; }

  /* === SPECIALS PAGE === */
  .msd-specials-hero { padding: 48px 0 36px; }
  .msd-special-feature { padding: 28px 20px; }
  .msd-special-feature-price-num { font-size: 2.4rem; }
}

@media (max-width: 400px) {
  .msd-container { padding: 0 14px; }
  h1, .msd-section-title { font-size: 1.5rem; }
  .msd-hero h1 { font-size: 1.6rem; }
  .msd-btn { padding: 13px 20px; font-size: 0.9rem; }
  .msd-trust-grid { grid-template-columns: 1fr; }
  .msd-hero-stats-inner { grid-template-columns: 1fr 1fr; }
}

/* ── FLUENT FORMS SUBMIT BUTTON ─────────────────────── */
.ff-btn-submit,
.ff-btn-submit.ff-btn-primary,
.ff-btn-submit.wpf_has_custom_css {
  background: var(--teal-700) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 36px !important;
  border-radius: 150px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  display: inline-block !important;
  min-width: 180px !important;
  transition: background 0.2s, transform 0.15s !important;
  font-size: 0 !important; /* hide any empty/broken text node */
}
.ff-btn-submit::after {
  content: 'Book Appointment';
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
}
.ff-btn-submit:hover {
  background: var(--teal-600) !important;
  transform: translateY(-1px) !important;
}