/* ============================================================
   Maison BE Dental Studio — theme styles
   Tokens extracted from the Next.js globals.css (brand palette,
   fonts). Verify rendered values against live in Phase 3 before
   trusting any color/size. Section styles are appended per-section.
   ============================================================ */

/* Heading font "goldenbook" is loaded from Adobe Typekit (kit vjo8oma, enqueued in
   functions.php) exactly as the live DL CSS does via @import — so headings render
   in the real DL typeface. Cormorant Garamond stays as the fallback in --mbe-heading.
   The DL script font (hautecouture) is self-hosted from the theme. */
@font-face {
  font-family: "hautecouture-regular";
  src: url("../fonts/hautecouture-regular-webfont.woff") format("woff");
  font-display: swap;
}

:root {
  --mbe-ink:    #292929;
  --mbe-cream:  #faf7f2;
  --mbe-taupe:  #aea18f;
  --mbe-gold:   #a1927d;
  --mbe-slate:  #616b87;
  --mbe-border: #e9e4dc;
  --mbe-white:  #ffffff;

  --mbe-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Real DL heading face from Typekit; Cormorant Garamond is the fallback. */
  --mbe-heading: "goldenbook", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* The real DL script (self-hosted above); Pinyon Script only as fallback. */
  --mbe-script: "hautecouture-regular", "Pinyon Script", cursive;

  --mbe-nav-h: 64px;
  --mbe-maxw: 1200px;
}
@media (min-width: 1024px) { :root { --mbe-nav-h: 120px; } }

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--mbe-sans); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mbe-white);
  color: var(--mbe-ink);
  font-weight: 300;
  font-feature-settings: "kern","liga","calt";
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--mbe-heading);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; line-height: 1.7; }

/* ---- shared utilities (reused by sections) ---- */
.container { width: 100%; max-width: var(--mbe-maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1024px) { .container { padding-left: 48px; padding-right: 48px; } }

/* Section eyebrow — the "hautecouture" script (stand-in: Pinyon Script), ink, on white sections. */
.eyebrow {
  font-family: var(--mbe-script);
  color: var(--mbe-ink);
  font-size: 2rem; /* DL: fixed 32px at every width */
  line-height: 1.3;
  letter-spacing: 5px; /* DL: all script eyebrows track 5px (welcome/real/featured/contact) */
  text-transform: capitalize;
}
/* DL section titles are taupe goldenbook (RESULTS, REVIEWS, INFORMATION). */
.real-results__title, .reviews-teaser__title, .contact-info__title { color: var(--mbe-gold); }

.display {
  font-family: var(--mbe-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mbe-ink);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
}
.lede {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  color: rgba(41,41,41,0.8);
  font-size: 1rem;
  line-height: 1.7;
}
@media (min-width: 1024px) { .lede { font-size: 1.125rem; } }

.section--page { padding: 80px 0; }
@media (min-width: 1024px) { .section--page { padding: 112px 0 96px; } }
.bg-cream { background: var(--mbe-cream); }
.bg-white { background: var(--mbe-white); }

/* DL .btn: taupe pill — goldenbook (→Cormorant) uppercase, radius 40, 16/24 padding. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px; border-radius: 40px;
  /* DL buttons are set in "goldenbook" (not embedded → plain serif). Match that
     declaration exactly so WP pills render identically to the golden source. */
  font-family: goldenbook, serif; text-transform: uppercase;
  font-size: 0.9rem; font-weight: 400; letter-spacing: normal; /* DL: 14.4px, no tracking */
  white-space: nowrap; text-align: center;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
/* DL buttons invert on hover: taupe→cream bg, white→taupe text. */
.btn--primary { background: var(--mbe-taupe); color: #fff; border: 1px solid var(--mbe-taupe); }
.btn--primary:hover { background: var(--mbe-cream); color: var(--mbe-taupe); border-color: var(--mbe-taupe); }
.btn--outline { background: transparent; color: var(--mbe-ink); border: 1px solid var(--mbe-taupe); }
.btn--outline:hover { background: var(--mbe-taupe); color: #fff; border-color: var(--mbe-taupe); }

.link-underline {
  display: inline-block; width: fit-content;
  border-bottom: 1px solid var(--mbe-ink);
  padding-bottom: 4px;
  font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em;
}
.link-underline:hover { border-color: var(--mbe-gold); color: var(--mbe-gold); }

/* ============================================================
   Header — fixed transparent overlay (matches live)
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: auto; right: 0; width: 100%; z-index: 50;
  height: var(--mbe-nav-h); background: transparent;
  transition: background-color .3s, box-shadow .3s, right .3s ease;
}
/* DL: while the slide-menu is open the whole header shifts left by the panel
   width, pushing the CTAs and the (gold) X to the panel's left edge. */
body.mbe-drawer-open .site-header { right: 280px; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 100%; padding: 0 20px;
}
@media (min-width: 1024px) { .site-header__inner { padding: 0 40px; } }
.site-header__cta { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .site-header__cta { gap: 12px; } }
/* Logo hidden over the hero; revealed when the header gains its scrolled state. */
.site-header__logo { opacity: 0; transition: opacity .3s; pointer-events: none; display: inline-flex; align-items: center; }
.site-header__logo img { height: 38px; width: auto; }
@media (min-width: 1024px) { .site-header__logo img { height: 52px; } }
.site-header.is-scrolled { background: var(--mbe-gold); box-shadow: 0 5px 10px rgba(0,0,0,.1); }
.site-header.is-scrolled .site-header__logo { opacity: 1; pointer-events: auto; }

/* DL header pills, two states: at top of page taupe bg / white text; once
   scrolled (header--scroll) they invert to white bg / taupe text. Radius 40,
   8/20 padding, no icons → 42px tall. Hovers mirror the opposite state. */
.hdr-pill {
  display: none; align-items: center;
  border-radius: 40px; border: 1px solid var(--mbe-taupe); background: var(--mbe-taupe);
  color: #fff; padding: 8px 20px; font-size: 1rem; line-height: 1.5;
  font-family: Montserrat, sans-serif; font-weight: 400; /* DL header pills: Montserrat 400 */
  transition: background-color .2s, color .2s;
}
.hdr-pill:hover { background: #fff; color: var(--mbe-taupe); border-color: var(--mbe-taupe); }
.site-header.is-scrolled .hdr-pill { background: #fff; color: var(--mbe-taupe); }
.site-header.is-scrolled .hdr-pill:hover { background: var(--mbe-taupe); color: #fff; }
@media (min-width: 1024px) { .hdr-pill--desktop { display: inline-flex; } }

/* DL hamburger bars: gold #a1927d at top of page, white once scrolled. */
.hdr-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: var(--mbe-gold);
  background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .2s, color .2s;
}
.site-header.is-scrolled .hdr-icon--toggle { color: #fff; }
.hdr-icon:hover { opacity: .7; }
.hdr-icon svg { width: 24px; height: 24px; }
/* DL mobile header glyphs (phone/calendar/hamburger): gold over the transparent
   hero header, white once the bar turns solid (scrolled or solid-nav pages). */
.hdr-icon--mobile { color: var(--mbe-gold); }
.site-header.is-scrolled .hdr-icon--mobile,
body.nav-solid .hdr-icon--mobile { color: #fff; }
.hdr-icon--mobile svg { width: 20px; height: 20px; }
button.hdr-icon { margin-left: 8px; }
@media (min-width: 1024px) {
  .hdr-icon--mobile { display: none; }
  button.hdr-icon { margin-left: 16px; }
}
/* Hamburger morphs into an X while the drawer is open (DL nav-toggle behavior). */
.hdr-icon__open, .hdr-icon__close { display: inline-flex; align-items: center; justify-content: center; }
.hdr-icon__close { display: none; }
.hdr-icon--toggle[aria-expanded="true"] .hdr-icon__open { display: none; }
.hdr-icon--toggle[aria-expanded="true"] .hdr-icon__close { display: inline-flex; }

/* ---- drawer — DL "slide-menu": fixed right panel, 280px, taupe #aea18f,
   white Montserrat links in 44px rows, NO dividers, NO backdrop. Submenus
   slide in horizontally (the slider shifts -280px per level); each submenu's
   first row is the parent label acting as the back control. Like DL, the
   panel stacks ABOVE the header (covering the pills + toggle); it closes by
   clicking outside the panel or pressing Escape. ---- */
.drawer {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: 280px; height: 100vh; overflow-x: hidden; overflow-y: auto;
  background: var(--mbe-taupe); color: #fff;
  transform: translateX(100%); transition: transform .3s ease;
}
.drawer.is-open { transform: translateX(0); }
.drawer__slider { position: relative; min-height: 100%; transition: transform .3s ease; }
.drawer__menu { list-style: none; margin: 0; padding: 20px 0; width: 280px; }
.drawer__menu--sub {
  position: absolute; top: 0; left: 100%;
  min-height: 100%; display: none;
  background: var(--mbe-taupe);
}
.drawer__menu li.is-active > .drawer__menu--sub { display: block; }
.drawer__link {
  display: flex; align-items: center;
  padding: 10px; font-size: 1rem; line-height: 1.5; color: #fff;
  transition: opacity .2s;
}
.drawer__link:hover { opacity: .75; }
.drawer__chev { margin-left: 1em; line-height: 1; }
.drawer__link--back::before { content: "\2039"; margin-right: 1em; line-height: 1; }

/* ============================================================
   Footer — taupe band (matches Doctor Logic source)
   ============================================================ */
/* DL footer: stacked + centered on mobile; >=991 a horizontal layout —
   logo left (20% col), social icons right, then full-width address +
   copyright rows (.footer__* rules in the DL home bundle). */
.site-footer { background: var(--mbe-taupe); color: #fff; }
.site-footer__inner {
  /* Golden centers footer content in a fixed ~1235px column (copyright-row driven);
     border-box 1315 − 80px side padding = 1235px content box, so logo/social edges align. */
  max-width: 1315px; margin: 0 auto;
  padding: 20px 40px; text-align: center;
  display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.site-footer__logo { display: flex; align-items: center; justify-content: center; padding: 20px 20px 40px; }
/* Golden paints the wordmark into a fixed background-size:contain box; the <img>
   equivalent is the same box + object-fit:contain. Golden's box is 200×70 on mobile
   (compact lockup) and 200×180 on desktop — so the art letterboxes accordingly. */
.site-footer__logo img { width: 200px; height: 70px; object-fit: contain; }
.site-footer__social { display: flex; align-items: center; justify-content: center; padding: 20px 0 0; }
.site-footer__social a { color: #fff; display: inline-flex; align-items: center; padding: 2px 10px; transition: opacity .2s; }
.site-footer__social a:hover { opacity: .75; }
.site-footer__social svg { width: 32px; height: 32px; }
.site-footer__address {
  font-style: normal; font-size: .95rem; line-height: 1.7; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px 0;
}
.site-footer__address p { margin: 0; padding: 0 5px; }
.site-footer__legal {
  display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 20px 20px 0; gap: 8px 0; font-size: clamp(.9rem, 1vw, 1rem); color: #fff;
}
.site-footer__legal a { color: #fff; }
.site-footer__legal a:hover { color: var(--mbe-gold); }
@media (min-width: 991px) {
  .site-footer__inner { flex-direction: row; }
  .site-footer__logo { flex: 0 0 20%; justify-content: flex-start; padding: 0 0 0 20px; }
  .site-footer__social { flex: 0 0 auto; margin-left: auto; padding: 0; }
  .site-footer__address { flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; }
  .site-footer__legal { flex: 0 0 100%; flex-direction: row; }
  .site-footer__legal a, .site-footer__legal span { padding: 0 20px; }
  .site-footer__logo img { height: 180px; }
}

/* ============================================================
   SECTIONS
   ============================================================ */

/* ---- prose (WYSIWYG body) ---- */
.prose { color: rgba(41,41,41,.8); font-size: 1rem; line-height: 1.7; }
@media (min-width:1024px){ .prose { font-size: 1.125rem; } }
.prose > * + * { margin-top: 1.25rem; }
.prose h2, .prose h3, .prose h4 { color: var(--mbe-ink); margin-top: 2rem; }
.prose h2 { font-size: 1.75rem; } .prose h3 { font-size: 1.4rem; }
.prose a { color: var(--mbe-gold); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.25rem; } .prose li { margin: .4rem 0; }
.prose img { border-radius: 2px; margin: 1.5rem 0; }

/* ---- home hero (full-viewport, matches Doctor Logic) ---- */
.hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
@media (min-width:768px){ .hero { min-height: 900px; } }
.hero__bg { position:absolute; inset:0; background-size:cover; background-repeat:no-repeat; background-position:50% 0%; }
.hero__tint { position:absolute; inset:0; background: rgba(250,250,250,.4); }
.hero__centerpiece {
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 200px; height: 500px; background-size: contain; background-repeat:no-repeat; background-position:50% 50%;
}
@media (min-width:1024px){ .hero__centerpiece { width: 650px; } }
.hero__btn {
  position:absolute; top:74.5%; left:50%; transform: translateX(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--mbe-taupe); border:1px solid var(--mbe-taupe); border-radius:40px;
  padding:16px 24px; color:#fff; text-transform:uppercase;
  font-family: var(--mbe-heading); font-weight:400; font-size:14.4px; line-height:16.56px;
}
.hero__btn:hover { background:var(--mbe-cream); border-color:var(--mbe-taupe); color:var(--mbe-taupe); }

/* ---- doorways — DL .doorways__items--1: tight 24-col grid (8px gaps), images
   GRAYSCALE until hover, 1-col → 2-col (>=569) → 3-col (>=991); at >=1241 the
   grid is inset 10% with 100px top margin and ~600px rows. ---- */
.doorways__inner { padding:8px; }
@media (min-width:1241px){ .doorways__inner { padding:0 10%; margin:100px auto 0; } }
.doorways__heading { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.5px; color:var(--mbe-taupe); text-align:left; font-size:2rem; margin-bottom:2rem; }
.doorways__grid { display:grid; grid-template-columns:1fr; gap:8px; grid-auto-rows:379px; }
@media (min-width:569px){ .doorways__grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(327px,auto); } }
@media (min-width:768px){ .doorways__grid { grid-template-columns:repeat(3,1fr); grid-auto-rows:488px; } }
@media (min-width:991px){ .doorways__grid { grid-auto-rows:500px; } }
@media (min-width:1241px){ .doorways__grid { grid-auto-rows:596px; } }
.doorway { position:relative; display:block; overflow:hidden; }
.doorway__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .3s; }
.doorway:hover .doorway__img { filter:grayscale(0); }
.doorway__scrim { position:absolute; inset:0; background:rgba(41,41,41,.2); transition:background .3s; }
.doorway:hover .doorway__scrim { background:rgba(41,41,41,.5); }
.doorway__body { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:20px; color:#fff; }
.doorway__title { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:200; letter-spacing:normal; font-size:clamp(1.6rem,2.2vw,2rem); line-height:1; margin:0 0 20px; }
.doorway__blurb { margin:16px 0; max-width:22rem; font-size:1rem; line-height:1.5; opacity:0; transition:opacity .3s; }
.doorway:hover .doorway__blurb { opacity:1; }
/* Blurb-less link cards (e.g. About → "Learn More" Doctors/Office/Services):
   shorter tiles with a vertically-centered label, no hover reveal. */
.doorways__grid:not(:has(.doorway__blurb)) { grid-auto-rows:300px; }
.doorway:not(:has(.doorway__blurb)) .doorway__body { justify-content:center; }
.doorway:not(:has(.doorway__blurb)) .doorway__title { margin:0; }
/* DL .category__button: the ALL SERVICES pill centered below the grid. */
.doorways__more { display:flex; justify-content:center; margin:40px 0; }

/* ---- real results — DL .content-3: centered stacked column (title → body →
   full-width before/after slider → pill button), max-width 1400. ---- */
.real-results__inner {
  max-width:1400px; margin:0 auto; padding:40px 10px;
  display:flex; flex-direction:column; align-items:center;
}
@media (min-width:768px){ .real-results__inner { padding:40px 20px; } }
.real-results__text { display:flex; flex-direction:column; align-items:center; text-align:center; }
.real-results__title { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.5px; font-size:3rem; }
@media (min-width:1024px){ .real-results__title { font-size:3.6rem; } }
.real-results__body { max-width:none; color:rgba(41,41,41,.8); margin:1rem 0 2rem; line-height:1.5; text-align:center; }
.real-results__media { width:100%; max-width:1000px; margin-inline:auto; }
.real-results__media img { width:100%; height:600px; object-fit:cover; }
.real-results__text > * + * { margin-top: 1.25rem; }
.real-results__btn { margin-top:40px; }

/* ---- doctor cards — DL /doctors: 2-up bordered cards (name + 16:9 photo + bio
   + Learn More pill). Distinct from the home full-width doctor_feature. ---- */
.doctor-cards__inner { max-width:1000px; margin:0 auto; padding:48px 24px 80px; }
.doctor-cards__heading { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:.5px; color:var(--mbe-taupe); font-size:clamp(2rem,3.6vw,3rem); text-align:center; margin:0 0 2rem; }
.doctor-cards__grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .doctor-cards__grid { grid-template-columns:repeat(2,1fr); } }
.doctor-card { display:flex; flex-direction:column; border:1px solid #dcdcdc; padding:20px; }
.doctor-card__name { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:200; color:var(--mbe-taupe); font-size:2rem; line-height:1.1; margin:0 0 1rem; }
.doctor-card__photo { width:100%; aspect-ratio:16/9; background-size:cover; background-position:center top; margin-bottom:1rem; }
.doctor-card__bio { color:rgba(41,41,41,.8); font-size:.95rem; line-height:1.6; margin:0 0 1.5rem; flex:1 1 auto; }
.doctor-card__link { align-self:flex-start; }

/* ---- doctor feature — DL .doctor: ONE skewed cream band (skewY -5deg) behind
   all adjacent doctor sections (.doctor-band wraps them via the dispatcher);
   taupe names, 800px-min portraits, photo left for #1 / right for #2. ---- */
.doctor-band { position:relative; }
@media (min-width:1024px){
  .doctor-band { margin:0 40px; }
  .doctor-band::before {
    content:""; display:block; position:absolute; left:0; top:5%;
    width:100%; height:90%; background:var(--mbe-cream); transform:skewY(-5deg);
  }
}
.doctor-feature { position:relative; }
.doctor-feature__inner { max-width:1600px; margin:10px auto; padding:0; display:grid; gap:0; align-items:center; }
/* DL goes 2-col at >=768 (image fills the row height), not 1024. */
@media (min-width:768px){ .doctor-feature__inner { grid-template-columns:1fr 1fr; gap:10px; } }
@media (min-width:1024px){ .doctor-feature__inner { margin:60px auto; } }
.doctor-feature__name { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.06em; font-size:2.25rem; color:var(--mbe-taupe); }
@media (min-width:1024px){ .doctor-feature__name { font-size:3.6rem; } }
.doctor-feature__intro { color:rgba(41,41,41,.8); line-height:1.7; }
.doctor-feature__text { display:flex; flex-direction:column; align-items:flex-start; padding:20px; }
@media (min-width:1024px){ .doctor-feature__text { padding:40px; } }
.doctor-feature__text > * + * { margin-top:1.25rem; }
.doctor-feature__media { align-self:stretch; }
/* DL mobile portrait is a fixed 500px-tall cover image; >=768 it fills the row. */
.doctor-feature__media img, .doctor-feature__placeholder { width:100%; height:500px; object-fit:cover; object-position:top center; display:block; }
@media (min-width:768px){ .doctor-feature__media img, .doctor-feature__placeholder { height:100%; } }
@media (min-width:1024px){ .doctor-feature__media img, .doctor-feature__placeholder { min-height:800px; } }
.doctor-feature__placeholder { background:linear-gradient(135deg, rgba(174,161,143,.6), rgba(161,146,125,.4)); }
/* photo side: --img-left = photo first (DL content-4); --img-right mirrors it (content-5). */
@media (min-width:768px){
  .doctor-feature--img-left .doctor-feature__media { order:-1; }
  .doctor-feature--img-right .doctor-feature__text { order:-1; align-items:flex-end; }
}

/* ---- reviews teaser — DL .reviews: white bg, 40px margin + 150px vertical
   padding at desktop; rotator shows 3 cards per slide >=768 (2 at >=569);
   inline stats row + ALL REVIEWS pill. ---- */
.reviews-teaser { padding:40px 20px; }
@media (min-width:1024px){ .reviews-teaser { margin:40px; padding:150px 0; } }
.reviews-teaser__inner { margin:0 auto; text-align:center; }
.reviews-teaser__title { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.08em; font-size:3rem; margin-top:.5rem; }
@media (min-width:1024px){ .reviews-teaser__title { font-size:4.5rem; } }
/* DL star fill is solid yellow rgb(255,221,0) (#star-full gradient stops). */
.reviews-teaser__stars { display:inline-flex; justify-content:center; gap:4px; color:#fd0; }
.reviews-teaser__stars svg { width:16px; height:16px; }
@media (min-width:991px){ .reviews-teaser__stars svg { width:24px; height:24px; } }
.reviews-teaser__quote { max-width:42rem; margin:2rem auto 0; font-style:italic; color:rgba(41,41,41,.8); line-height:1.7; }
/* real review cards in an auto-rotating carousel + rating stats */
.reviews-teaser__carousel { overflow:hidden; margin:1rem 0 0; }
.reviews-teaser__track { display:flex; transition:transform .6s ease; }
.review-card { flex:0 0 100%; box-sizing:border-box; padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; margin:0; }
@media (min-width:569px){ .review-card { flex-basis:50%; } }
@media (min-width:768px){ .review-card { flex-basis:33.3333%; } }
.review-card__quote { margin:0; font-size:1rem; line-height:1.7; color:rgba(41,41,41,.85); font-style:normal; }
.review-card__by { margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.review-card__author { font-weight:500; font-size:.95rem; color:var(--mbe-ink); }
.review-card__source { font-style:italic; font-size:.85rem; color:rgba(41,41,41,.6); }
/* DL stats: one inline row — "57 Total Reviews ★★★★★ 5 Average Rating". */
.reviews-teaser__stats { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 24px; margin-top:2rem; }
.rstat { color:var(--mbe-ink); font-size:1rem; }
.rstat__num { font-weight:600; }
.reviews-teaser__btn { margin-top:2.5rem; }

/* ---- contact info — DL .contact: 24-col grid. Mobile: map on top (order 1),
   cream info card below (margin 20px). >=1241: section margin 40px, map
   full-bleed 90vh, white card overlaid on cols 1-10 with an arch top
   (border-top-left/right-radius 50%) and 100px top padding. ---- */
.contact-info { display:grid; grid-template-columns:repeat(24,1fr); }
.contact-info__card {
  grid-column:1 / -1; order:2; background:var(--mbe-cream); margin:20px; padding:40px 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.contact-info__map { grid-column:1 / -1; order:1; min-height:500px; line-height:0; }
/* DL renders the map via the Google Maps JS API with a muted brand style array
   (greyscale roads, hidden POIs). The keyless embed iframe can't take a style
   array, so approximate the muted look with a filter for local/dev. Production:
   swap to the Maps JS API + style JSON + a gated API key for an exact match. */
.contact-info__map iframe { display:block; width:100%; height:100%; min-height:500px; border:0; filter:grayscale(.85) contrast(.92) brightness(1.05) sepia(.1); }
@media (min-width:1241px){
  .contact-info { margin:40px; }
  .contact-info__map { grid-column:1 / span 24; grid-row:1; height:90vh; }
  .contact-info__card {
    grid-column:1 / span 10; grid-row:1; z-index:2; order:1;
    background:#fff; margin:40px 40px 0; padding-top:100px;
    border-top-left-radius:50%; border-top-right-radius:50%;
  }
}
.contact-info__title { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.5px; font-size:clamp(2.5rem,4vw,4rem); margin-top:.25rem; }
.contact-info__label { color:var(--mbe-gold); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:500; letter-spacing:1px; text-transform:uppercase; margin-top:1.5rem; }
.contact-info__addr { font-style:normal; font-size:1rem; line-height:1.7; color:var(--mbe-ink); margin:0 0 20px; }
.contact-info__phone { display:inline-block; margin-bottom:25px; font-size:1rem; color:var(--mbe-ink); }
.contact-info__phone:hover { color:var(--mbe-gold); }
.contact-info__hours { list-style:none; margin:8px 0 25px; padding:0; font-size:1rem; line-height:1.7; color:var(--mbe-ink); }
.contact-info__hours li { display:flex; gap:10px; }
.contact-info__hours-day { min-width:54px; }
.contact-info__actions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:1rem; }

/* ---- page hero — DL .masthead: full-bleed photo banner, taupe wash, white
   serif title + breadcrumb. The fixed header overlays it; the dark image keeps
   the white logo/nav legible (cream version hid them — that was Next.js legacy). */
.page-hero { position:relative; min-height:360px; background-size:cover; background-position:center; background-repeat:no-repeat; display:flex; align-items:center; }
@media (min-width:768px){ .page-hero { min-height:440px; } }
@media (min-width:1024px){ .page-hero { min-height:560px; } }
/* Masthead photo sits BELOW the solid header with a gap (no overlay gradient). */
.page-hero:not(.page-hero--plain) { margin-top: calc(var(--mbe-nav-h) + 24px); }
.page-hero__inner { position:relative; z-index:1; max-width:1400px; width:100%; margin:0 auto; padding:48px 40px; color:#fff; text-align:left; }
@media (min-width:1024px){ .page-hero__inner { padding:64px 40px; } }
/* Keep the white title/breadcrumb legible on the un-tinted photo. */
.page-hero:not(.page-hero--plain) .page-hero__title,
.page-hero:not(.page-hero--plain) .page-hero__crumbs { text-shadow:0 1px 16px rgba(0,0,0,.4); }
.page-hero__eyebrow { color:#fff; }
.page-hero__title { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.5px; font-size:clamp(2.5rem,4vw,3.6rem); line-height:1.05; color:#fff; margin:0; overflow-wrap:break-word; }
.page-hero__lede { color:rgba(255,255,255,.92); max-width:48rem; margin-top:1rem; }
.page-hero__crumbs { margin-top:1.1rem; font-size:16px; display:flex; flex-wrap:wrap; align-items:center; gap:.45em; }
.page-hero__crumb { color:#fff; text-decoration:none; }
.page-hero__crumb:hover { text-decoration:underline; }
.page-hero__crumb--current { opacity:.85; }
.page-hero__crumb-sep { opacity:.7; }
/* Plain header (no image) — breadcrumb above a dark serif title on white; the
   header is solid (body.nav-solid) so the white logo stays legible. DL /doctors. */
.page-hero--plain { min-height:0; display:block; background:#fff; }
.page-hero--plain .page-hero__inner { padding:calc(var(--mbe-nav-h) + 32px) 40px 28px; color:var(--mbe-ink); text-align:left; }
.page-hero--plain .page-hero__title { color:var(--mbe-ink); }
.page-hero--plain .page-hero__crumbs { margin:0 0 .6rem; color:var(--mbe-ink); }
.page-hero--plain .page-hero__crumb { color:var(--mbe-ink); }
.page-hero--plain .page-hero__crumb--current { color:var(--mbe-taupe); }
/* Solid header on plain-hero pages — reuse the scrolled look from the start. */
body.nav-solid .site-header { background:var(--mbe-gold); }
body.nav-solid .site-header__logo { opacity:1; pointer-events:auto; }
body.nav-solid .hdr-pill { background:#fff; color:var(--mbe-taupe); }
body.nav-solid .hdr-pill:hover { background:var(--mbe-taupe); color:#fff; }
body.nav-solid .hdr-icon--toggle { color:#fff; }

/* ---- text section ---- */
.text-section__inner { max-width:800px; margin:0 auto; padding:64px 24px; }
@media (min-width:1024px){ .text-section__inner { padding:80px 48px; } }
.text-section--wide .text-section__inner { max-width:1400px; }
@media (min-width:1024px){ .text-section--wide .text-section__inner { padding:64px 40px; } }
.text-section--center .text-section__inner { text-align:center; }
.text-section__heading { font-family:var(--mbe-heading); font-size:2.25rem; margin-bottom:1.25rem; }
/* DL content heading (about "Learn About Us", etc.): taupe serif uppercase. */
.text-section--h-section .text-section__heading { color:var(--mbe-taupe); text-transform:uppercase; font-weight:400; letter-spacing:.5px; font-size:2rem; }

/* ---- text + media ---- */
.text-media__inner { max-width:1200px; margin:0 auto; padding:80px 24px; display:grid; gap:40px; align-items:center; }
@media (min-width:1024px){ .text-media__inner { grid-template-columns:1fr 1fr; gap:64px; } }
.text-media__heading { font-family:var(--mbe-heading); font-size:2.25rem; margin-bottom:1.25rem; }
.text-media__media img, .text-media__placeholder { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block; }
.text-media__placeholder { background:linear-gradient(135deg, rgba(174,161,143,.6), rgba(161,146,125,.3)); }
/* Logo variant: contain on a light card (DL financing's CareCredit block). */
.text-media--fit-contain .text-media__media { display:flex; align-items:center; justify-content:center; background:#f5f4f2; border-radius:2px; padding:48px 40px; }
.text-media--fit-contain .text-media__media img { aspect-ratio:auto; object-fit:contain; max-height:180px; border-radius:0; }
@media (min-width:1024px){ .text-media--img-left .text-media__media { order:-1; } }
/* Optional full-width section header above the two columns (DL Financing). */
.text-media__header { max-width:1200px; margin:0 auto; padding:48px 24px 0; }
@media (min-width:1024px){ .text-media__header { padding:56px 24px 0; } }
.text-media__lead-heading { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:.5px; color:var(--mbe-taupe); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.05; margin:0 0 1rem; }
.text-media__lead { font-family:Montserrat,sans-serif; font-size:1.05rem; line-height:1.6; color:var(--mbe-ink); margin:0; max-width:1100px; }
.text-media__rule { border:0; border-top:1px solid var(--mbe-border); margin:32px 0 0; }
.text-media__header + .text-media__inner { padding-top:48px; }
.text-media__cta { align-self:flex-start; margin-top:1.5rem; }
.text-media__text { display:flex; flex-direction:column; align-items:flex-start; }

/* ---- service list — DL procedure grid: cream section, 4-up cards, each a
   centered taupe serif title + description + stacked Research/Photos pills. ---- */
.service-list { background:var(--mbe-cream); }
.service-list__inner { max-width:1400px; margin:0 auto; padding:80px 24px; }
@media (min-width:1024px){ .service-list__inner { padding:100px 40px; } }
.service-list__head { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 .35rem; }
.service-list__eyebrow { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.08em; color:var(--mbe-taupe); font-size:1rem; margin:0; }
.service-list__heading { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.5px; color:var(--mbe-taupe); font-size:clamp(2rem,3.6vw,3.6rem); margin:0 0 2.5rem; }
.service-list__grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:569px){ .service-list__grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .service-list__grid { grid-template-columns:repeat(4,1fr); } }

/* Search filter pill (top-right of the head row) — opens a CSS-only modal (DL procedurelist). */
.service-list__toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; min-width:150px; height:44px; padding:0 20px; background:var(--mbe-taupe); border-radius:30px; color:#fff; font-family:Montserrat,sans-serif; font-size:1rem; text-transform:uppercase; cursor:pointer; }
.service-list__toggle svg { width:22px; height:22px; fill:#fff; flex:0 0 auto; }
.service-list__modal { position:fixed; inset:0; z-index:1000; display:none; }
.service-list__modal-toggle:checked ~ .service-list__modal { display:block; }
.service-list__modal-backdrop { position:absolute; inset:0; background:rgba(41,41,41,.55); cursor:pointer; }
.service-list__modal-panel { position:absolute; top:0; right:0; width:min(420px,90vw); height:100%; overflow-y:auto; background:#fff; padding:56px 32px 40px; box-shadow:-8px 0 40px rgba(0,0,0,.15); }
.service-list__modal-close { position:absolute; top:14px; right:22px; font-size:2rem; line-height:1; color:var(--mbe-ink); cursor:pointer; }
.service-list__filter-group + .service-list__filter-group { margin-top:24px; }
.service-list__filter-heading { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.03em; font-size:1.35rem; font-weight:500; color:var(--mbe-taupe); margin:0 0 8px; }
.service-list__filter { display:block; padding:6px 0; font-family:Montserrat, sans-serif; font-size:.95rem; color:rgba(41,41,41,.75); text-decoration:none; transition:color .2s; }
.service-list__filter:hover { color:var(--mbe-taupe); }
.procedure-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 20px; background:var(--mbe-cream); border:1px solid #dcdcdc; }
.procedure-card__title { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:200; letter-spacing:normal; color:var(--mbe-taupe); font-size:2rem; line-height:1.1; margin:0 0 1rem; }
.procedure-card__blurb { color:rgba(41,41,41,.8); font-size:.95rem; line-height:1.6; margin:0 0 1.5rem; flex:1 1 auto; }
.procedure-card__actions { display:flex; flex-direction:column; gap:10px; width:100%; margin-top:auto; }
.procedure-card__actions .btn { width:100%; }

/* ---- faq ---- */
.faq__inner { max-width:900px; margin:0 auto; padding:80px 24px; }
@media (min-width:1024px){ .faq--split .faq__inner { max-width:1200px; display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start; } }
.faq__heading { font-family:var(--mbe-heading); font-size:2.25rem; }
.faq__lead { margin-top:1rem; color:rgba(41,41,41,.7); line-height:1.7; }
.faq__item { border-bottom:1px solid var(--mbe-border); }
.faq__q { padding:18px 0; font-family:var(--mbe-heading); font-size:1.25rem; cursor:pointer; list-style:none; }
.faq__q::-webkit-details-marker { display:none; }
.faq__item[open] .faq__q { color:var(--mbe-gold); }
.faq__a { padding:0 0 18px; }

/* ---- gallery (DL smile gallery: collapsible facet sidebar + before/after cards) ---- */
.gallery__inner { max-width:1500px; margin:0 auto; padding:48px 24px 88px; }
@media (min-width:1024px){ .gallery__inner { padding:64px 40px 104px; } }
.gallery__layout { display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .gallery__layout { grid-template-columns:300px 1fr; gap:56px; align-items:start; } }
.gallery__main { min-width:0; }
/* results line — gold serif, "N RESULTS [FOR <CATEGORY>]" (DL .testimoniallist count). */
.gallery__results { margin:0 0 1.5rem; font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500; color:var(--mbe-gold); }
/* sidebar: native <details> groups — serif heading + a "−/+" disclosure marker,
   sans-serif sub-links, a hairline divider between groups (DL .filter--sidebar). */
.gallery__filters { display:flex; flex-direction:column; }
@media (min-width:900px){ .gallery__filters { position:sticky; top:108px; } }
.gallery__group { border-bottom:1px solid rgba(41,41,41,.12); padding:6px 0 14px; }
.gallery__group:first-child { padding-top:0; }
.gallery__group-head { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gallery__group-head::-webkit-details-marker { display:none; }
.gallery__group-title { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.5rem,2.2vw,2rem); font-weight:500; color:var(--mbe-ink); margin:14px 0 4px; line-height:1.1; }
/* +/− disclosure marker on the right of the heading. */
.gallery__group-head::after { content:"+"; font-family:var(--mbe-heading); font-size:1.5rem; color:var(--mbe-ink); line-height:1; }
.gallery__group[open] .gallery__group-head::after { content:"\2212"; }
.gallery__group-body { display:flex; flex-direction:column; padding-top:4px; }
.gallery__filter { background:none; border:0; padding:5px 0; cursor:pointer; text-align:left; font-family:Montserrat,sans-serif; font-size:.9rem; line-height:1.4; color:rgba(41,41,41,.78); transition:color .2s; }
.gallery__filter:hover { color:var(--mbe-taupe); }
.gallery__filter.is-active { color:var(--mbe-ink); font-weight:600; }
/* card grid: a white card = before/after pair + label + full-width taupe CTA bar. */
.gallery__grid { display:grid; grid-template-columns:1fr; gap:32px 28px; }
@media (min-width:600px){ .gallery__grid { grid-template-columns:repeat(2,1fr); } }
.gallery__item { display:flex; flex-direction:column; margin:0; text-decoration:none; color:var(--mbe-ink); background:#fff; }
.gallery__ba { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; }
.gallery__ba-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .5s ease; }
.gallery__item:hover .gallery__ba-img { transform:scale(1.03); }
.gallery__caption { display:block; padding:22px 24px 18px; font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.01em; font-size:clamp(1.3rem,1.7vw,1.6rem); font-weight:500; color:var(--mbe-ink); }
/* "View Photos" — full-width taupe bar with white serif text (DL card CTA). */
.gallery__view { display:block; margin-top:auto; padding:18px 24px; background:var(--mbe-taupe); color:#fff; text-align:center; font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; transition:background .2s; }
.gallery__item:hover .gallery__view { background:var(--mbe-gold); }

/* ---- contact ---- */
.contact__inner { max-width:1400px; margin:0 auto; padding:80px 24px; display:grid; gap:48px; }
@media (min-width:1024px){ .contact__inner { grid-template-columns:2fr 3fr; gap:64px; padding:96px 48px; } }
.contact__heading { font-family:var(--mbe-heading); font-size:2.25rem; }
.contact__intro { margin:1rem 0 1.5rem; color:rgba(41,41,41,.8); line-height:1.7; }
.contact__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.contact__list li { display:flex; flex-direction:column; gap:2px; }
.contact__k { font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:rgba(41,41,41,.6); }
.contact__list a:hover { color:var(--mbe-gold); }
.contact__map { margin-top:1.5rem; border-radius:2px; overflow:hidden; }
.contact__map iframe { filter:grayscale(.85) contrast(.92) brightness(1.05) sepia(.1); }
.contact__noform { color:rgba(41,41,41,.5); font-size:.9rem; }

/* ---- virtual consult scheduler (DL: left info+day picker, right lead form) ---- */
.vconsult__inner { max-width:1500px; margin:0 auto; padding:56px 24px; display:grid; gap:40px; }
@media (min-width:1024px){ .vconsult__inner { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; padding:64px 40px; align-items:start; } }
.vconsult__info { background:#f8f8f8; padding:24px 28px 32px; }
.vconsult__heading { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:normal; color:var(--mbe-taupe); font-size:2rem; line-height:1.1; margin:0 0 1rem; }
.vconsult__intro { font-family:Montserrat,sans-serif; font-size:1rem; line-height:1.5; color:#000; margin:0 0 1.75rem; }
.vconsult__success { background:var(--mbe-taupe); color:#fff; padding:12px 16px; font-size:.95rem; margin:0 0 1.5rem; }
.vconsult__days { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vconsult__day-label { font-family:Montserrat,sans-serif; font-size:1rem; color:#000; margin:0 0 12px; }
.vconsult__day { position:relative; display:flex; align-items:center; justify-content:center; width:100%; max-width:175px; height:42px; margin-bottom:18px; padding:7px; border:2px solid var(--mbe-taupe); border-radius:3px; background:var(--mbe-taupe); color:#fff; font-family:Montserrat,sans-serif; font-size:1rem; text-transform:uppercase; cursor:pointer; transition:background .15s,border-color .15s; }
.vconsult__day input { position:absolute; opacity:0; width:0; height:0; }
.vconsult__day:has(input:checked) { background:var(--mbe-gold); border-color:var(--mbe-gold); }
.vconsult__day--disabled { background:#c4c4c4; border-color:#c4c4c4; color:rgba(255,255,255,.5); cursor:default; }
.vconsult__form { display:flex; flex-direction:column; }
.vconsult__field { margin-bottom:1.4rem; }
.vconsult__row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vconsult__field label { display:block; font-family:Montserrat,sans-serif; font-size:1rem; color:#000; margin:0 0 6px; }
.vconsult__field input, .vconsult__field select, .vconsult__field textarea { width:100%; border:0; border-bottom:1px solid #b9b9b9; background:transparent; padding:8px 2px; font-family:Montserrat,sans-serif; font-size:1rem; color:#000; border-radius:0; }
.vconsult__field textarea { resize:vertical; min-height:64px; }
.vconsult__field input:focus, .vconsult__field select:focus, .vconsult__field textarea:focus { outline:none; border-bottom-color:var(--mbe-taupe); }
.vconsult__field input::placeholder, .vconsult__field textarea::placeholder { color:rgba(0,0,0,.35); }
.vconsult__submit { align-self:flex-end; margin-top:.5rem; background:var(--mbe-taupe); border:1px solid var(--mbe-taupe); color:#fff; border-radius:40px; padding:16px 24px; font-family:var(--mbe-heading); font-size:.9rem; text-transform:uppercase; cursor:pointer; }
.vconsult__submit:hover { background:var(--mbe-gold); border-color:var(--mbe-gold); }
@media (max-width:568px){ .vconsult__days, .vconsult__row { grid-template-columns:1fr; } .vconsult__day { max-width:none; } .vconsult__submit { align-self:stretch; } }

/* ---- plans (DL membership: heading + rule, then 2-up plan columns) ---- */
.plans__inner { max-width:1400px; margin:0 auto; padding:48px 40px 72px; }
.plans__heading { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:.5px; color:var(--mbe-taupe); font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.05; margin:0 0 24px; padding-bottom:24px; border-bottom:1px solid var(--mbe-border); }
.plans__grid { display:grid; grid-template-columns:1fr; gap:48px; margin-top:40px; }
@media (min-width:768px){ .plans__grid { grid-template-columns:1fr 1fr; gap:64px; } }
.plans__title { font-family:Montserrat,sans-serif; text-transform:uppercase; font-weight:600; letter-spacing:.02em; color:var(--mbe-gold); font-size:1.4rem; line-height:1.3; margin:0 0 1.5rem; }
.plans__list { list-style:disc; margin:0; padding-left:1.25rem; }
.plans__list li { font-family:Montserrat,sans-serif; font-size:1rem; line-height:1.5; color:var(--mbe-ink); margin-bottom:1rem; padding-left:.25rem; }

/* ---- contact (DL /contact-us: heading + form|map, then address/phone | hours) ---- */
.contact-form__inner { max-width:1440px; margin:0 auto; padding:56px 40px 80px; }
.contact-form__heading { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:.5px; color:var(--mbe-taupe); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.1; margin:0 0 2rem; }
.contact-form__cols { display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:900px){ .contact-form__cols { grid-template-columns:1fr 1fr; gap:48px; } }
.contact-form__form { display:flex; flex-direction:column; }
.contact-form__field { margin-bottom:1.4rem; }
.contact-form__field label { display:block; font-family:Montserrat,sans-serif; font-size:1rem; color:#000; margin:0 0 6px; }
.contact-form__field input, .contact-form__field select, .contact-form__field textarea { width:100%; border:0; border-bottom:1px solid #b9b9b9; background:transparent; padding:8px 2px; font-family:Montserrat,sans-serif; font-size:1rem; color:#000; border-radius:0; }
.contact-form__field textarea { resize:vertical; min-height:64px; }
.contact-form__field input:focus, .contact-form__field select:focus, .contact-form__field textarea:focus { outline:none; border-bottom-color:var(--mbe-taupe); }
.contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color:rgba(0,0,0,.35); }
.contact-form__success { background:var(--mbe-taupe); color:#fff; padding:12px 16px; font-size:.95rem; margin:0 0 1.25rem; }
.contact-form__submit { align-self:flex-start; margin-top:.5rem; background:var(--mbe-taupe); border:1px solid var(--mbe-taupe); color:#fff; border-radius:40px; padding:16px 24px; font-family:var(--mbe-heading); font-size:.9rem; text-transform:uppercase; cursor:pointer; }
.contact-form__submit:hover { background:var(--mbe-gold); border-color:var(--mbe-gold); }
.contact-form__map { width:100%; height:100%; min-height:340px; }
.contact-form__map iframe { width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.85) contrast(.92) brightness(1.05) sepia(.1); }
@media (min-width:900px){ .contact-form__map, .contact-form__map iframe { height:607px; } }
.contact-form__details { display:grid; grid-template-columns:1fr; gap:32px; margin-top:48px; }
@media (min-width:700px){ .contact-form__details { grid-template-columns:1fr 1fr; max-width:760px; } }
.contact-form__label { color:var(--mbe-gold); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin:1.25rem 0 .4rem; }
.contact-form__label:first-child { margin-top:0; }
.contact-form__facility { font-weight:600; color:var(--mbe-ink); margin:0 0 .25rem; }
.contact-form__addr { font-style:normal; font-size:1rem; line-height:1.7; color:var(--mbe-ink); margin:0; }
.contact-form__phone { display:inline-block; font-size:1rem; color:var(--mbe-ink); }
.contact-form__phone:hover { color:var(--mbe-gold); }
.contact-form__hours { list-style:none; margin:0; padding:0; font-size:1rem; line-height:1.9; color:var(--mbe-ink); }
.contact-form__hours li { display:flex; gap:12px; }
.contact-form__hours-day { min-width:90px; }

/* ---- review sources (DL "Leave a Review": intro + per-provider source-logo cards) ---- */
.review-sources__inner { max-width:1200px; margin:0 auto; padding:64px 24px 80px; text-align:center; }
.review-sources__heading { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:.5px; color:var(--mbe-ink); font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.1; margin:0 0 1.25rem; }
.review-sources__intro { max-width:900px; margin:0 auto; font-family:Montserrat,sans-serif; font-size:1.05rem; line-height:1.6; color:var(--mbe-ink); }
.review-sources__rule { border:0; border-top:1px solid var(--mbe-border); margin:48px 0; }
.review-sources__script { font-family:var(--mbe-script); color:var(--mbe-ink); font-size:clamp(2.2rem,4.5vw,3rem); line-height:1.1; margin:0 0 1rem; }
.review-sources__script-intro { max-width:860px; margin:0 auto; font-family:Montserrat,sans-serif; font-size:1.05rem; line-height:1.6; color:var(--mbe-ink); }
.review-sources__provider { margin-top:56px; text-align:left; }
.review-sources__provider-name { font-family:var(--mbe-heading); text-transform:uppercase; font-weight:400; letter-spacing:.5px; color:var(--mbe-taupe); font-size:clamp(1.8rem,3.6vw,2.4rem); margin:0 0 24px; padding-bottom:20px; border-bottom:1px solid var(--mbe-border); }
.review-sources__grid { display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:700px){ .review-sources__grid { grid-template-columns:repeat(2,1fr); } }
.review-sources__card { display:flex; align-items:center; justify-content:center; min-height:200px; padding:20px; background:#f7f7f8; border-radius:14px; transition:box-shadow .2s,transform .2s; }
.review-sources__card:hover { box-shadow:0 8px 30px rgba(0,0,0,.08); transform:translateY(-2px); }
.review-sources__logo { max-width:55%; max-height:120px; object-fit:contain; }

/* ---- procedure reviews (DL 2-col .reviews module: carousel + lead form) ---- */
.proc-reviews__inner { max-width:1400px; margin:0 auto; padding:64px 24px; display:grid; gap:48px; }
@media (min-width:1024px){ .proc-reviews__inner { grid-template-columns:1fr 1fr; gap:64px; padding:80px 48px; align-items:start; } }
/* Let the columns shrink below their content so the overflow-hidden carousel
   clips instead of forcing horizontal scroll (grid items default min-width:auto). */
.proc-reviews__reviews, .proc-reviews__form { min-width:0; }
.proc-reviews__heading { font-family:var(--mbe-heading); text-transform:uppercase; font-size:2rem; font-weight:400; color:var(--mbe-taupe); margin:0 0 1.5rem; }
.proc-reviews__carousel { overflow:hidden; min-width:0; }
.proc-reviews__track { display:flex; transition:transform .6s ease; }
/* Left-aligned cards (DL procedure variant) vs the centered home teaser cards. */
.review-card--left { align-items:flex-start; text-align:left; padding:12px 16px 12px 0; }
.review-card--left .review-card__by { align-items:flex-start; }
.review-card--left .review-card__quote { font-size:.95rem; }
.proc-reviews__stats { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:1.5rem; }
.proc-reviews__stars { display:inline-flex; gap:3px; color:#fd0; }
.proc-reviews__stars svg { width:22px; height:22px; }
.proc-reviews__btn { margin-top:2rem; }
@media (min-width:1024px){ .proc-reviews__btn { display:block; width:max-content; margin-inline:auto; } }
/* Lead form — bordered inputs + taupe submit, matching the DL "Get In Touch" form. */
.proc-reviews__form .fluentform input:not([type=submit]),
.proc-reviews__form .fluentform textarea,
.proc-reviews__form .fluentform select { width:100%; box-sizing:border-box; border:1px solid var(--mbe-taupe); border-radius:2px; padding:14px 16px; margin-bottom:16px; font-family:inherit; font-size:1rem; background:#fff; }
.proc-reviews__form .fluentform textarea { min-height:140px; }
/* Override Fluent's blue default submit with the DL taupe pill. Fluent applies
   its button colour at high specificity, so the colour pair needs !important. */
.proc-reviews__form .fluentform .ff-btn-submit { background:var(--mbe-taupe) !important; color:#fff !important; border:0; border-radius:40px; padding:14px 32px; font-family:goldenbook, serif; font-size:.9rem; text-transform:uppercase; letter-spacing:.02em; cursor:pointer; transition:background .2s; }
.proc-reviews__form .fluentform .ff-btn-submit:hover { background:var(--mbe-gold) !important; }

/* ---- review list (DL /reviews: full-width intro + faceted sidebar + cards) ---- */
.review-list__inner { max-width:1400px; margin:0 auto; padding:48px 24px 88px; }
@media (min-width:1024px){ .review-list__inner { padding:56px 40px 104px; } }
/* full-width intro — taupe uppercase serif headline + body (DL .section--text). */
.review-list__intro { margin:0 0 48px; }
.review-list__intro-heading { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.75rem,3vw,2rem); font-weight:500; color:var(--mbe-taupe); margin:0 0 1rem; }
.review-list__intro-body { font-size:1rem; line-height:1.8; color:rgba(41,41,41,.82); max-width:none; }
.review-list__intro-body p { margin:0 0 1rem; }
.review-list__layout { display:grid; gap:40px; }
@media (min-width:900px){ .review-list__layout { grid-template-columns:300px 1fr; gap:56px; align-items:start; } }
.review-list__main { min-width:0; }
/* "Reviews for <facility/facet>" — taupe serif uppercase (DL .listcard__headline). */
.review-list__list-heading { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.6rem,2.6vw,2rem); font-weight:500; color:var(--mbe-taupe); margin:0 0 1.5rem; }
/* sidebar — taupe serif uppercase group headings (DL testimonial .filter--sidebar). */
.review-list__filters { display:flex; flex-direction:column; gap:2px; }
@media (min-width:900px){ .review-list__filters { position:sticky; top:108px; } }
.review-list__group { display:flex; flex-direction:column; gap:1px; }
.review-list__group + .review-list__group { margin-top:24px; }
.review-list__filter-heading { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.03em; font-size:1.35rem; font-weight:500; color:var(--mbe-taupe); margin:0 0 10px; }
.review-list__filter { background:none; border:0; padding:6px 0; cursor:pointer; font-family:Montserrat, sans-serif; font-size:1rem; color:var(--mbe-ink); text-align:left; transition:color .2s; }
.review-list__filter:hover { color:var(--mbe-taupe); }
.review-list__filter.is-active { color:var(--mbe-taupe); font-weight:600; }
.review-list__count { color:rgba(41,41,41,.5); font-size:.92rem; }
/* cards — bordered; source logo left, rating/author/source/date beside it, body below. */
.review-list__grid { display:grid; gap:24px; min-width:0; }
@media (min-width:680px){ .review-list__grid { grid-template-columns:1fr 1fr; } }
.review-list__card { border:1px solid rgba(41,41,41,.14); padding:24px; display:flex; flex-direction:column; background:#fff; }
.review-list__head { display:flex; align-items:flex-start; gap:18px; }
.review-list__src-logo { width:auto; height:48px; object-fit:contain; flex:0 0 auto; }
.review-list__head-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.review-list__rating { display:inline-flex; align-items:center; gap:8px; margin-bottom:2px; }
.review-list__rating strong { font-family:Montserrat, sans-serif; font-size:1.4rem; font-weight:700; color:var(--mbe-ink); }
.review-list__stars { display:inline-flex; gap:2px; color:#fd0; }
.review-list__stars svg { width:18px; height:18px; }
.review-list__author { margin:0; font-family:Montserrat, sans-serif; font-size:.9rem; color:var(--mbe-ink); }
.review-list__author span { font-weight:600; }
.review-list__meta { margin:0; font-size:.82rem; color:rgba(41,41,41,.55); }
.review-list__body { margin:16px 0 0; font-size:.95rem; line-height:1.7; color:rgba(41,41,41,.85); }


/* ---- blog index + cards ---- */
.blog-index__inner { max-width:1400px; margin:0 auto; padding:64px 24px; }
@media (min-width:1024px){ .blog-index__inner { padding:80px 48px; } }
.blog-grid { display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:640px){ .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .blog-grid { grid-template-columns:repeat(3,1fr); gap:40px; } }
.post-card { background:#fff; }
.post-card__link { display:flex; flex-direction:column; gap:10px; }
.post-card__media { display:block; overflow:hidden; border-radius:2px; aspect-ratio:3/2; }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card__link:hover .post-card__media img { transform:scale(1.04); }
.post-card__date { font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--mbe-gold); }
.post-card__title { font-family:var(--mbe-heading); font-size:1.5rem; line-height:1.2; color:var(--mbe-ink); }
.post-card__excerpt { font-size:.95rem; color:rgba(41,41,41,.7); line-height:1.6; }
.post-card__more { margin-top:6px; }
.blog-pagination { margin-top:48px; text-align:center; }
.blog-pagination .page-numbers { display:inline-block; padding:8px 14px; margin:0 2px; border:1px solid var(--mbe-border); border-radius:2px; }
.blog-pagination .page-numbers.current { background:var(--mbe-ink); color:#fff; border-color:var(--mbe-ink); }

/* ---- single post ---- */
.single-post__byline { margin-top:.85rem; font-size:.9rem; color:rgba(41,41,41,.65); }
.single-post__featured { max-width:1000px; margin:0 auto; padding:0 24px; }
.single-post__featured img { width:100%; max-height:520px; object-fit:cover; border-radius:2px; margin-top:-24px; }
.single-post__body { max-width:760px; margin:0 auto; padding:56px 24px 0; }
.single-post__foot { max-width:760px; margin:0 auto; padding:48px 24px 80px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }

/* ---- welcome (full-bleed parallax intro — matches Doctor Logic) ---- */
.welcome { position:relative; overflow:hidden; background:var(--mbe-taupe); color:#fff; margin:20px; padding:20px 20px 0; }
/* DL: background-attachment scroll at base, FIXED (parallax) only >=1441. */
.welcome__bg { position:absolute; inset:0; background-size:cover; background-position:50% 50%; background-repeat:no-repeat; background-attachment:scroll; }
.welcome__tint { position:absolute; inset:0; background:var(--mbe-taupe); opacity:.8; }
.welcome__inner { position:relative; z-index:2; margin:0 auto; padding:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0; }
/* DL: content-1 and content-2 each carry their own 60px padding (>=768),
   and both span the full section width. */
.welcome__intro { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; width:100%; }
.welcome__mark { padding:20px; width:100%; }
@media (min-width:768px){ .welcome__intro, .welcome__mark { padding:60px; } }
.welcome__eyebrow { font-family:var(--mbe-script); text-transform:capitalize; font-size:2rem; line-height:1.1; color:#fff; }
.welcome__title { font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.5px; font-size:clamp(2.5rem,4vw,4rem); line-height:1.2; margin-top:.25rem; color:#fff; }
.welcome__body { margin:1.5rem 0 0; color:#fff; font-size:1rem; line-height:1.6; }
.welcome__body > * + * { margin-top:1rem; }
.welcome__btn {
  display:inline-flex; align-items:center; justify-content:center; margin-top:25px;
  padding:16px 24px; border-radius:40px; background:var(--mbe-taupe); border:1px solid #fff;
  color:#fff; font-family:var(--mbe-heading); text-transform:uppercase; letter-spacing:.06em; font-size:clamp(.9rem,1vw,1rem); transition:opacity .2s, background-color .2s, color .2s;
}
.welcome__btn:hover { background:#fff; color:var(--mbe-taupe); }
.welcome__mark { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; line-height:1; }
/* DL renders the wordmark lockup 704px wide at 1440. */
.welcome__wordmark { width:100%; max-width:704px; height:auto; }
.welcome__tagline { font-family:var(--mbe-script); color:#fff; font-size:clamp(2.5rem,6vw,5.4rem); line-height:1; } /* DL: 86.4px at desktop */
/* >=1441 (DL .content-1/.content-2 2-col state): inset 40px, lighter wash,
   parallax ON, and the left text sits in a CREAM ARCH CARD (#faf7f2,
   border-top radius 50%, max-width 800, min-height 900) — that card is what
   keeps the copy readable over the photo, not an overlay tweak. */
@media (min-width:1441px) {
  .welcome { margin:40px; min-height:900px; padding-top:60px; }
  .welcome__bg { background-attachment:fixed; }
  .welcome__tint { opacity:.6; }
  .welcome__inner { flex-direction:row; align-items:stretch; text-align:center; gap:0; padding:0; max-width:none; }
  .welcome__intro {
    flex:0 0 50%; max-width:800px; min-height:900px; padding:60px;
    background:var(--mbe-cream); border-top-left-radius:50%; border-top-right-radius:50%;
  }
  .welcome__eyebrow { color:var(--mbe-taupe); }
  .welcome__title { color:var(--mbe-ink); }
  .welcome__body { color:var(--mbe-ink); }
  .welcome__btn { border-color:var(--mbe-taupe); }
  .welcome__btn:hover { background:var(--mbe-cream); color:var(--mbe-taupe); }
  .welcome__mark { flex:1 1 50%; min-height:900px; padding:60px; }
}

/* ---- real results: before/after slider — DL .comparison is 600px tall at every width ---- */
.real-results__ba { position:relative; width:100%; min-height:600px; height:600px; overflow:hidden; --ba-pos:50%; touch-action:none; }
.real-results__ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.real-results__ba .ba__before { clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0); }
/* DL labels: plain text at bottom 60px — "Before" ink on the left, "After" white on the right. */
.ba__label { position:absolute; bottom:60px; font-size:14px; pointer-events:none; }
.ba__label--before { left:20px; color:var(--mbe-ink); }
.ba__label--after { right:20px; color:#fff; }
.ba__divider { position:absolute; top:0; bottom:0; left:var(--ba-pos); width:2px; margin-left:-1px; background:#fff; pointer-events:none; }
.ba__handle { position:absolute; bottom:22px; left:50%; width:16px; height:16px; transform:translateX(-50%); border-radius:2px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.ba__range { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent; }
.ba__range::-webkit-slider-thumb { -webkit-appearance:none; width:46px; height:100%; }
.ba__range::-moz-range-thumb { width:46px; height:100%; border:0; background:transparent; }

/* ---- home tag (SEO H1, visually hidden) ---- */
.home-tag { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- disclaimer (fine print above footer) ---- */
.disclaimer { background:#fff; text-align:center; padding:24px; }
.disclaimer p { max-width:1000px; margin:0 auto; font-size:.75rem; line-height:1.5; color:rgba(41,41,41,.5); }