/* Sunbeam Dental: all mechanisms (ratios, vh, %, flex/grid, @media). Fixed values come from
   tokens.css. Section numbers follow v2-specs/homepage-spec.md. No innerWidth JS anywhere. */

/* ------------------------------------------------------------------ 0 base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root { --chrome-h: var(--header-h); }
@media (max-width: 1023px) { :root { --chrome-h: var(--mbar-h); } }

body {
  margin: 0;
  /* 0.9 canvas: the ONE atmospheric device (mahwah-int swirl canvas reinterpreted) */
  background: var(--canvas) url("../assets/canvas-rays.svg") repeat center top / 640px 640px;
  background-attachment: scroll;
  color: var(--body-ink);
  font: 400 16px/27.2px var(--font-body);
}
h1, h2, h3, h4, p, figure, blockquote, ul, table { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
svg { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-light); outline-offset: var(--focus-offset); }
main:focus, .intro-band:focus { outline: none; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 1001;
  background: #fff; color: var(--ink); padding: 10px 16px;
  font: 700 16px/24px var(--font-body); text-decoration: none;
}
.skip-link:focus { left: 16px; }

/* 0.5 the button atom (one recipe sitewide) */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--pill-h); padding: 0 var(--pill-pad-x);
  border: var(--pill-border); border-radius: var(--radius-pill);
  background: #fff; color: var(--steel);
  font: 700 18px/1 var(--font-body); text-transform: none; letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: var(--pill-transition);
}
.pill:hover, .pill:focus-visible { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.pill svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
/* utility pill (ADDENDUM 3): the same atom drawn as a 36px face inside a 44px transparent hit
   area; the negative block margin cancels the extra 8px, so layout counts 36 (zero shift) */
.pill--util {
  position: relative; z-index: 0; height: var(--pill-h-util);
  margin-block: calc((var(--pill-h-util-face) - var(--pill-h-util)) / 2);
  background: transparent; border-color: transparent;
}
.pill--util::before {
  content: ""; position: absolute; z-index: -1; left: -1px; right: -1px;
  top: calc((var(--pill-h-util) - var(--pill-h-util-face)) / 2 - 1px);
  bottom: calc((var(--pill-h-util) - var(--pill-h-util-face)) / 2 - 1px);
  border: var(--pill-border); border-radius: var(--radius-pill); background: #fff;
  transition: var(--pill-transition);
}
.pill--util:hover, .pill--util:focus-visible { background: transparent; border-color: transparent; color: var(--ink); outline: none; }
.pill--util:hover::before, .pill--util:focus-visible::before { background: var(--sun); border-color: var(--sun); }
.pill--util:focus-visible::before { outline: var(--focus-light); outline-offset: var(--focus-offset); }

/* ------------------------------------------------------------------ 1 header (>= 1024) */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 200;
  background: var(--header-frost); box-shadow: var(--shadow-df);
  /* height is a SUM: util 50 + brand 75 = 125 (ADDENDUM 3; never authored) */
  display: flex; flex-direction: column; justify-content: space-between; gap: 0; padding: 0;
  transition: background-color 0.4s ease-in-out;
}
.site-header.is-scrolled { background: #fff; }

/* max-width (ADDENDUM 4): unchanged at <= 1728; above it the two halves stop widening, so the
   G, which is centred in its half, can never drift under the two-tier logo mark (it would between
   ~1777 and ~2378 at 50% halves). Its gap to the mark is >= 12 at every width */
.util-tier { display: flex; flex-flow: row; align-items: center; height: var(--util-tier-h); width: 100%; max-width: 1728px; margin: 0 auto; }
.util-half { flex: 0 0 50%; display: flex; justify-content: center; align-items: center; gap: 5px; }
.g-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; transition: opacity 0.2s ease; }
.g-link:hover { opacity: 0.8; }
.g-mark { width: 30px; height: 30px; }

.brand-tier { display: flex; flex-flow: row; justify-content: center; align-items: center; height: var(--brand-tier-h); }

/* lockup = decorative c4 mark (alt="") + the live wordmark, ONE link (ADDENDUM 4) */
.lockup { text-decoration: none; display: flex; align-items: center; }
.lockup__mark { display: block; flex: none; width: auto; max-width: none; }
.lockup__text { display: flex; flex-direction: column; }
.lockup__name { color: var(--steel); white-space: nowrap; }
.lockup__doctor { color: var(--ink); white-space: nowrap; }
.lockup--header { flex: 0 0 auto; gap: var(--logo-mark-gap); }
/* the mark spans both tiers: 105 tall, centred on the HEADER (y 10-115) while it sits in the
   brand tier's lockup link. With align-items:center, a top margin of minus the utility-tier
   height lifts its centre by util/2 = 25 (brand centre 87.5 -> header centre 62.5) and leaves a
   55px margin box, so neither the link nor the 75px tier grows. Header height stays 125 */
.lockup--header .lockup__mark { height: var(--logo-mark-h); margin-top: calc(-1 * var(--util-tier-h)); }
.lockup--header .lockup__text { flex: 0 0 var(--lockup-header-w); min-width: var(--lockup-header-w); gap: 3px; }
.lockup--header .lockup__name { font: 400 34px/36px var(--font-display); }
.lockup--header .lockup__doctor { font: 600 12.5px/16px var(--font-body); letter-spacing: 0.2px; }

.nav-list { display: flex; margin-left: 12px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  position: relative; display: flex; align-items: center; height: 56px; padding: 0 10px;
  font: 600 15.75px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color 0.4s ease;
}
.has-panel > .nav-link { padding: 0 0 0 10px; }
.nav-link:hover { color: var(--steel); }
.nav-caret {
  width: 44px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  transition: color 0.4s ease;
}
.nav-caret svg { width: 12px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.4s ease; }

/* dropdown panel: top edge at y = --dd-top (= --header-h, 125) in header coordinates at every
   viewport, flush under the bar; the li box (56 tall) is centred in the brand tier under the
   utility tier, so every offset below is derived from the tier tokens */
.dd-panel {
  position: absolute; left: 0; z-index: 1000;
  top: calc(var(--dd-top) - var(--util-tier-h) - (var(--brand-tier-h) - 56px) / 2);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-dropdown); box-shadow: var(--shadow-dropdown);
  padding: 36px 40px 32px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* close: fade 0.4s, then hide; open: visible at once so an immediate Tab can enter */
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
/* hover bridge across the gap between the 56px link box and the panel (9.5px at a 125 header) */
.dd-panel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: calc(var(--dd-top) - var(--util-tier-h) - (var(--brand-tier-h) - 56px) / 2 - 56px + 1px);
}
.dd-panel--about, .dd-panel--before-after { width: 260px; }
.dd-panel--services, .dd-panel--patient-info { width: 295px; }
.dd-panel--contact { width: 460px; padding: 30px; right: 0; left: auto; }
/* notch: 10px tall, 20px base, centred on the trigger label, y 150-160 */
.has-panel > .nav-link::after {
  content: ""; position: absolute; z-index: 1001;
  left: calc(50% + 5px); top: calc(var(--dd-top) - 10px - var(--util-tier-h) - (var(--brand-tier-h) - 56px) / 2);
  margin-left: -10px; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff;
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.nav-item:hover > .dd-panel,
.nav-item.is-open > .dd-panel,
html:not(.js) .nav-item:focus-within > .dd-panel,
.nav-item:hover > .nav-link::after,
.nav-item.is-open > .nav-link::after,
html:not(.js) .nav-item:focus-within > .nav-link::after {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s;
}
.nav-item:hover > .nav-link, .nav-item.is-open > .nav-link,
.nav-item:hover > .nav-caret, .nav-item.is-open > .nav-caret,
html:not(.js) .nav-item:focus-within > .nav-link { color: var(--steel); }
.nav-item:hover > .nav-caret svg, .nav-item.is-open > .nav-caret svg,
html:not(.js) .nav-item:focus-within > .nav-caret svg { transform: rotate(180deg); }

.dd-link {
  display: block; min-height: 44px; padding: 11px 0;
  font: 400 16px/22px var(--font-body); text-transform: uppercase; color: var(--grey-text);
  text-decoration: none; transition: color 0.4s ease;
}
.dd-link:hover { color: var(--steel); }
.dd-link[aria-current="page"] { color: var(--steel); box-shadow: inset 3px 0 0 var(--sun); padding-left: 12px; }
.dd-contact-line { margin-top: 4px; font: 400 18px/26px var(--font-body); color: var(--grey-text); }
.dd-photo { width: 400px; height: 225px; object-fit: cover; border-radius: 0; margin-top: 16px; }
.dd-nap { margin-top: 12px; font: 400 15px/22px var(--font-body); color: var(--grey-text); }
.dd-nap a { display: inline-block; padding: 11px 0; color: var(--steel); text-decoration: underline; }
.dd-nap a:hover { color: var(--ink); }

/* active marker (delta 1.7): per-page state lives on <body>; chrome stays byte-identical */
body[data-section="home"] .nav-item--home > .nav-link,
body[data-section="about"] .nav-item--about > .nav-link,
body[data-section="services"] .nav-item--services > .nav-link,
body[data-section="before-after"] .nav-item--before-after > .nav-link,
body[data-section="patient-info"] .nav-item--patient-info > .nav-link,
body[data-section="contact"] .nav-item--contact > .nav-link { color: var(--steel); box-shadow: inset 0 -4px 0 var(--sun); }

/* compact desktop track (delta 1.10). ADDENDUM 4: upper bound 1100 -> 1189.98, because the
   two-tier mark widens the full group to ~1145.4px, which keeps the 20px edge only from 1186 up.
   The compact group (mark + 12 + 200 + 12 + ~684 nav) fits a 105 mark from ~1055; below that
   the mark scales down with the viewport (still centred on the header, still spanning both
   tiers): 950 = 2 x 20 edge + 12 gap + 200 wordmark + 12 + 684 nav (+ 2 spare); 1.0152 = aspect */
@media (min-width: 1024px) and (max-width: 1189.98px) {
  .lockup--header .lockup__text { flex-basis: 200px; min-width: 200px; }
  .lockup--header .lockup__mark { height: min(var(--logo-mark-h), calc((100vw - 950px) / 1.0152)); }
  .lockup--header .lockup__name { font-size: 27.2px; line-height: 29px; }
  .lockup--header .lockup__doctor { font-size: 10px; line-height: 13px; letter-spacing: 0; }
  .nav-link { font-size: 14px; padding: 0 6px; }
  .has-panel > .nav-link { padding: 0 0 0 6px; }
}

/* ------------------------------------------------------------------ 11 house mobile chrome */
.m-bar, .m-drawer, .action-bar { display: none; }
@media (max-width: 1023px) {
  .site-header { display: none; }
  .m-bar {
    display: flex; position: fixed; top: 0; left: 0; right: 0; height: var(--mbar-h); z-index: 200;
    background: #fff; border-bottom: 1px solid var(--rule);
    align-items: center; justify-content: space-between; padding: 0 20px;
  }
  .m-drawer {
    display: block; position: fixed; top: var(--mbar-h); left: 0; right: 0; bottom: 0; z-index: 190;
    background: var(--ink); overflow-y: auto; padding: 8px 0 24px;
    visibility: hidden; transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0.25s;
  }
  body.is-menu-open { overflow: hidden; }
  body.is-menu-open .m-drawer { visibility: visible; transform: none; }
}
.lockup--bar { gap: var(--bar-mark-gap); min-height: 44px; }
.lockup--bar .lockup__mark { height: var(--bar-mark-h); }
.lockup--bar .lockup__text { gap: 2px; }
.lockup--bar .lockup__name { font: 400 24px/26px var(--font-display); }
.lockup--bar .lockup__doctor { font: 600 11px/14px var(--font-body); }
.m-bar__right { display: flex; align-items: center; gap: 8px; }
.m-tel { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--steel); }
.m-tel svg { width: 22px; height: 22px; fill: currentColor; }
.m-menu {
  width: 64px; height: 44px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: var(--steel); color: #fff; transition: background-color 0.2s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.m-menu:hover { background: var(--ink); }
.m-menu__icon svg { width: 20px; height: 14px; fill: currentColor; }
.m-menu .i-close { display: none; fill: none; stroke: currentColor; stroke-width: 2; }
body.is-menu-open .m-menu .i-bars { display: none; }
body.is-menu-open .m-menu .i-close { display: block; }
.m-menu__label { font: 700 10px/1 var(--font-body); letter-spacing: 1px; text-transform: uppercase; }

.dr-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--on-dark-line); }
.dr-link {
  flex: 1; display: flex; align-items: center; min-height: 56px; padding: 0 20px;
  font: 600 18px/1.3 var(--font-body); color: #fff; text-decoration: none;
}
.dr-toggle {
  flex: none; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.dr-toggle svg { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.25s ease; }
.dr-item.is-open .dr-toggle svg { transform: rotate(180deg); }
.dr-sub { display: none; }
.dr-item.is-open > .dr-sub, html:not(.js) .dr-sub { display: block; }
.dr-child {
  display: flex; align-items: center; min-height: 48px; padding: 0 20px 0 36px;
  font: 400 17px/1.3 var(--font-body); color: rgba(255, 255, 255, 0.88); text-decoration: none;
  border-bottom: 1px solid var(--on-dark-line-soft);
}
body[data-section="home"] .dr-item--home > .dr-row,
body[data-section="about"] .dr-item--about > .dr-row,
body[data-section="services"] .dr-item--services > .dr-row,
body[data-section="before-after"] .dr-item--before-after > .dr-row,
body[data-section="patient-info"] .dr-item--patient-info > .dr-row,
body[data-section="contact"] .dr-item--contact > .dr-row { box-shadow: inset 4px 0 0 var(--sun); }
.dr-child[aria-current="page"] { box-shadow: inset 4px 0 0 var(--sun); color: #fff; }
.dr-util { margin-top: 24px; padding: 0 20px; }
.dr-tel {
  display: flex; align-items: center; gap: 10px; min-height: 48px; width: fit-content;
  font: 700 20px/1 var(--font-body); color: #fff; text-decoration: none;
}
.dr-tel svg { width: 20px; height: 20px; fill: currentColor; }
.dr-hours { font: 400 15px/22px var(--font-body); color: var(--on-dark-soft); }
.dr-request { display: flex; width: fit-content; margin-top: 16px; }
.dr-dir {
  display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 8px;
  font: 600 16px/1 var(--font-body); color: #fff; text-decoration: underline;
}
.m-drawer :focus-visible { outline: var(--focus-dark); outline-offset: -3px; }
.m-drawer .pill:focus-visible { outline-offset: 2px; }

@media (max-width: 600px) {
  .action-bar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
    height: calc(var(--actionbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  }
  body.is-menu-open .action-bar { display: none; }
}
.ab-seg {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 15px/1 var(--font-body); text-decoration: none;
}
.ab-seg svg { width: 18px; height: 18px; fill: currentColor; }
.ab-seg .glyph-stroke { fill: none; stroke: currentColor; stroke-width: 1.9; }
.ab-call { background: var(--steel); color: #fff; }
.ab-request { background: var(--sun); color: var(--ink); }
.ab-dir { background: var(--ink); color: #fff; }
.ab-call:focus-visible, .ab-dir:focus-visible { outline: var(--focus-dark); outline-offset: -5px; }
.ab-request:focus-visible { outline: var(--focus-light); outline-offset: -5px; }

/* ------------------------------------------------------------------ 2 hero */
.hero { position: relative; width: 100%; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
.hero-stack {
  /* belladental card scale law as one unit: height term on desktop, width clamp on phones */
  --hero-u: min(calc(100vh / 900), calc((100vw - 40px) / 554.25));
  /* ADDENDUM 4: the c4 mark above the name, in the concept sheet's proportion (70 mark : 34 name,
     10 gap : 34 name), so it scales with the card through the same unit */
  --hero-name: calc(var(--hero-u) * 60);
  --hero-mark-h: calc(var(--hero-name) * 70 / 34);
  --hero-mark-gap: calc(var(--hero-name) * 10 / 34);
  position: relative; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: var(--chrome-h); padding-bottom: 20vh;
}
.hero-card {
  flex: none;
  /* padding unchanged: the card grows by exactly the mark and its gap */
  width: calc(var(--hero-u) * 554.25); height: calc(var(--hero-u) * 190.5 + var(--hero-mark-h) + var(--hero-mark-gap));
  background: var(--card-frost-white); border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.hero-lockup {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 calc(var(--hero-u) * 40); text-align: center; font-weight: 400;
}
/* name in --ink on the card only (ADDENDUM 2 s1, class B): steel measured 2.6-2.9:1 on the frost
   composite; the header lockup keeps steel on its own white/frost slab */
.hero-mark { display: block; flex: none; width: auto; max-width: none; height: var(--hero-mark-h); margin-bottom: var(--hero-mark-gap); }
.hero-lockup__name { font: 400 var(--hero-name)/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.hero-lockup__doctor { margin-top: calc(var(--hero-u) * 10); font: 600 max(13px, calc(var(--hero-u) * 19))/1.25 var(--font-body); color: var(--ink); }
.hero-lockup__services { margin-top: calc(var(--hero-u) * 4); font: 400 max(12px, calc(var(--hero-u) * 16))/1.3 var(--font-body); color: var(--ink); }

.hero-cue {
  position: absolute; bottom: 20px; left: 50%; margin-left: -60px; width: 120px; height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  color: #fff; text-decoration: none; text-align: center;
  font: 700 22px/26px var(--font-body);
}
.hero-cue svg { width: 64px; height: 40px; flex: none; fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: miter; transition: stroke 0.2s ease; }
.hero-cue:hover svg, .hero-cue:focus-visible svg { stroke: var(--sun); }
.hero-cue:focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }
@media (max-width: 978.98px) {
  .hero-cue { width: 46px; height: 46px; margin-left: -23px; justify-content: center; }
  .hero-cue__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-cue svg { width: 32px; height: 20px; stroke-width: 3.5; }
}
@media (max-width: 479.98px) {
  .hero-cue { width: 44px; height: 44px; margin-left: -22px; }
}
/* build delta B1: the house action bar owns the bottom 56px at <= 600, so the cue's 20px
   bottom-edge anchor is measured from the bar's top edge (it sat hidden under the bar) */
@media (max-width: 600px) {
  .hero-cue { bottom: calc(20px + var(--actionbar-h)); }
}

/* ------------------------------------------------------------------ 0.4 containers */
.wrap-1120 { max-width: 1120px; margin: 0 auto; padding: 15px 30px; }
.wrap-1200 { width: calc(100% - 64px); max-width: 1200px; margin: 0 auto; }
.wrap-bella { max-width: 1200px; margin: 0 auto; padding: 0 36px; }
@media (max-width: 1219px) { .wrap-bella { max-width: 94%; } }

/* ------------------------------------------------------------------ 3 intro */
.intro-band { background: #fff; scroll-margin-top: var(--chrome-h); }
.intro {
  max-width: 1060px; margin: 0 auto; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 30px;
}
.intro p { width: 100%; max-width: 1000px; font: 400 20px/28px var(--font-body); color: var(--body-ink); text-align: center; }

/* ------------------------------------------------------------------ 4 doctor card */
.doctor-band { padding: 3% 0; }
.doctor-card {
  width: min(var(--doctor-card-w), 100% - 60px); margin: 0 auto;
  background: #fff; box-shadow: var(--shadow-df); border-radius: 0;
  padding: 15px 7px 30px;
}
.doctor-split { display: flex; flex-flow: row; }
.doctor-split > .doctor-col { flex: 0 0 523px; }
.doctor-col--portrait { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.doctor-col--text { padding: 0 15px; text-align: center; }
.doctor-portrait { width: var(--portrait-w); }
.doctor-portrait img { width: var(--portrait-w); height: var(--portrait-h); object-fit: cover; border-radius: 0; }
.doctor-portrait figcaption {
  max-width: var(--portrait-w); margin: 12px auto 0; text-align: center;
  font: 400 14px/20px var(--font-body); color: var(--grey-text);
}
.doctor-name { font: 500 39.06px/1.2 var(--font-display); color: var(--steel); }
/* first-person bio LEFT-ALIGNED, ragged right, under the centred name (recipe CORRECTION
   2026-09-25, hanoverendo-int/04: every line starts at the column's content edge) */
.doctor-quote { margin-top: 16px; font: 400 20px/28px var(--font-body); color: var(--body-ink); text-align: left; }
.doctor-quote + .doctor-quote { margin-top: 20px; }
.doctor-more { padding: 0 15px; text-align: center; }
.doctor-lead { margin-top: 28px; font: 400 20px/28px var(--font-body); color: var(--body-ink); text-align: left; }
.cred-h3 { margin-top: 32px; font: 500 28px/1.25 var(--font-display); color: var(--steel); }
.cred-row { margin-top: 20px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
.cred { flex: 0 0 254px; display: flex; align-items: center; justify-content: center; }
.cred-inner { max-width: 214px; text-align: center; }
.cred-name { display: block; font: 400 20px/26px var(--font-display); color: var(--steel); }
.cred-detail { display: block; margin-top: 6px; font: 400 15px/21px var(--font-body); color: var(--grey-text); }
.doctor-more .pill { margin-top: 28px; }

@media (max-width: 1119px) {
  .doctor-split { flex-flow: column; }
  .doctor-split > .doctor-col { flex: none; width: 100%; }
  .doctor-col--text { margin-top: 24px; }
  .cred-row { row-gap: 20px; }
}

/* ------------------------------------------------------------------ 5 feature splits */
.splits { background: #fff; padding: 45px 0 32px; overflow-x: clip; }
.split-row { display: flex; gap: 4%; align-items: flex-start; }
.split-row + .split-row { margin-top: 51px; }
.split-row--b { flex-direction: row-reverse; }
.split-media, .split-text { flex: 0 0 48%; min-width: 0; }
.split-media { position: relative; }
.split-media::after {
  content: ""; position: absolute; z-index: 3;
  width: var(--split-tab-w); height: var(--split-tab-h);
  bottom: -0.7em; right: -5%; background: var(--sun);
}
.split-figure { position: relative; }
.split-figure img { display: block; width: 100%; height: auto; }
.split-curtain {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; z-index: 2;
  background: #fff; transition: width 0.8s ease-out;
}
.split-figure.is-revealed .split-curtain { width: 0; }
.split-chip {
  position: absolute; bottom: 12px; z-index: 1;
  padding: 6px 10px; border-radius: 0; background: rgba(33, 46, 71, 0.78);
  font: 600 14px/1 var(--font-body); color: #fff;
}
.split-chip--before { left: 12px; }
.split-chip--after { left: calc(50% + 13px); }
.split-h2 { margin: 0 0 20px; font: 400 36.56px/40.2px var(--font-display); letter-spacing: -0.99px; color: var(--steel); }
.split-text p { font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
.split-text .pill { margin-top: 24px; }

@media (max-width: 900px) {
  .splits .split-row { width: 100%; max-width: none; flex-direction: column; gap: 0; }
  .split-media { order: -1; }
  .split-media, .split-text { flex: none; width: 100%; }
  .split-media::after { display: none; }
  .split-text { padding: 0 32px; }
  .split-h2 { margin-top: 20px; font-size: 33px; line-height: 1.1; }
}

/* ------------------------------------------------------------------ 6 services grid */
.services { padding: 30px 0 45px; }
.services-h2 { margin-bottom: 20px; font: 400 45.71px/1.2 var(--font-display); color: var(--steel); text-align: center; }
.services-intro { max-width: 1128px; margin: 0 auto 25px; font: 400 16px/27.2px var(--font-body); color: var(--body-ink); text-align: center; }
/* the recipe's 1130 holder inside the 1128 well: one px past each side (lands 370-wide tiles) */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: calc(100% + 2px); max-width: 1130px; margin: 0 -1px;
}
.svc-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 0; color: #fff; text-decoration: none; }
.svc-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.17, 0.73, 0.66, 0.99), opacity 0.4s;
}
.svc-scrim { position: absolute; inset: 0; background: var(--tile-scrim); }
.svc-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 30px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  font: 500 18px/1.3 var(--font-display); letter-spacing: 1px; text-transform: uppercase; color: #fff;
  transition: opacity 0.4s cubic-bezier(0.17, 0.73, 0.66, 0.99), transform 0.4s cubic-bezier(0.17, 0.73, 0.66, 0.99);
}
.svc-chev { display: none; flex: none; width: 10px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.svc-more {
  position: absolute; left: 0; right: 0; top: 50%; height: 74px; margin-top: -37px;
  display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0;
  font: 600 16px/1 var(--font-body); text-transform: uppercase; color: #fff;
  transition: opacity 0.4s cubic-bezier(0.17, 0.73, 0.66, 0.99);
}
.svc-more svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) {
  .svc-tile:hover .svc-img { transform: scale(1.08); }
  .svc-tile:hover .svc-label { opacity: 0; transform: translateY(-8px); }
  .svc-tile:hover .svc-more { opacity: 1; }
}
.svc-tile:focus-visible .svc-img { transform: scale(1.08); }
.svc-tile:focus-visible .svc-label { opacity: 0; transform: translateY(-8px); }
.svc-tile:focus-visible .svc-more { opacity: 1; }
@media (hover: none) { .svc-chev { display: block; } }
.pill--svc { display: flex; width: var(--svc-pill-w); margin: 31px auto 0; }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); width: 100vw; max-width: none; margin: 0 0 0 calc(50% - 50vw); }
}

/* ------------------------------------------------------------------ 7 patient info */
.pinfo { background: #fff; padding: 0 0 32px; }
.pinfo-band { position: relative; height: var(--pinfo-band-h); overflow: hidden; }
.pinfo-layer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150%;
  background: url("../assets/pinfo-waiting-room.jpg") center bottom / cover no-repeat;
  transform: translate3d(0, calc(var(--p, 0) * var(--pinfo-band-h) * 0.5), 0);
}
.pinfo-card {
  position: relative; z-index: 1; margin-top: var(--pinfo-knife);
  background: #fff; padding: 32px 32px 0; text-align: center;
}
.pinfo-h2 { margin-bottom: 30px; font: 400 36.56px/40.2px var(--font-display); letter-spacing: -0.99px; color: var(--steel); }
.pinfo-head p { font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
.pinfo-head .pill { margin-top: 24px; }
.pinfo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.pinfo-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 553 / 277; color: #fff; text-decoration: none; }
.pinfo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pinfo-overlay { position: absolute; inset: 0; background: var(--pinfo-scrim); opacity: 1; transition: opacity 0.4s ease; }
.pinfo-label {
  position: absolute; inset: 0; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 500 20px/1.2 var(--font-display); letter-spacing: -0.44px; text-transform: uppercase; color: #fff;
}
/* inverted scrim ("the lights come on"), shallower than mahwah's 0.1 so the label keeps 3:1 */
.pinfo-tile:hover .pinfo-overlay, .pinfo-tile:focus-visible .pinfo-overlay { opacity: calc(var(--pinfo-scrim-hover-a) / var(--pinfo-scrim-a)); }

/* one-shot entrance (mahwah data-fade); hidden only after JS arms it, never without JS */
.fade-pending { opacity: 0; transform: translateY(20px); }
.fade-pending.is-in { opacity: 1; transform: none; transition: opacity 2s ease, transform 2s ease; }

@media (max-width: 900px) {
  .pinfo-layer { transform: none; }
  .pinfo-card { width: 100%; margin-top: 0; }
  .pinfo-grid { width: 100vw; margin-left: calc(50% - 50vw); gap: 18px; }
}

/* ------------------------------------------------------------------ 8 reviews */
.reviews { padding: 30px; }
.reviews-plate {
  width: 100%; max-width: var(--plate-max); margin: 0 auto; padding: 30px;
  background: var(--plate); display: flex; justify-content: center; align-items: center;
}
.review-card {
  width: 100%; background: #fff; border-radius: var(--radius-review); box-shadow: var(--shadow-df);
  padding: 30px 45px; display: flex; flex-direction: row; align-items: center; gap: 40px;
}
.ghost-quote { flex: none; width: 55px; height: 44px; fill: var(--ghost-quote); }
.ghost-quote--open { align-self: flex-start; margin-top: 48px; }
.ghost-quote--close { align-self: flex-end; margin-bottom: 84px; }
.review-body { flex: 1; min-width: 0; text-align: center; }
.review-title { font: 400 30px/36px var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--grey-title); }
.review-rating {
  margin-top: 10px; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/24px var(--font-body); color: var(--grey-text);
}
.g-mark--sm { width: 20px; height: 20px; }
.rating-stars { position: relative; display: block; width: 80px; height: 16px; }
.rating-stars__row { position: absolute; left: 0; top: 0; height: 16px; display: flex; overflow: hidden; }
.rating-stars__row svg { flex: none; width: 16px; height: 16px; }
.rating-stars__row--empty svg { fill: var(--g-star-empty); }
.rating-stars__row--fill svg { fill: var(--g-star-amber); }
.review-slides { display: grid; margin-top: 20px; }
.review-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s; }
.review-slide.is-active { visibility: visible; opacity: 1; }
.review-quote { font: 400 22px/30.8px var(--font-body); color: var(--grey-title); white-space: pre-wrap; }
.review-stars { margin-top: 18px; display: flex; justify-content: center; }
.review-stars svg { width: 32px; height: 32px; fill: var(--g-star-amber); }
.review-attrib { margin-top: 12px; font: 500 18px/24px var(--font-display); color: var(--grey-title); }
.review-controls { margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.review-prev, .review-next {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--steel); border-radius: var(--radius-pill); background: #fff; color: var(--steel);
  display: flex; align-items: center; justify-content: center; transition: var(--pill-transition);
}
.review-prev svg, .review-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.review-prev:hover, .review-prev:focus-visible, .review-next:hover, .review-next:focus-visible { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.review-count { min-width: 4.5em; font: 600 15px/1 var(--font-body); color: var(--grey-text); }
.review-link {
  display: inline-block; margin-top: 14px; padding: 10px 0;
  font: 600 16px/24px var(--font-body); color: var(--steel); text-decoration: underline;
}
.review-link:hover { color: var(--ink); }

@media (max-width: 1119px) {
  .review-card { flex-direction: column; gap: 20px; }
  .ghost-quote--open, .ghost-quote--close { align-self: center; margin: 0; }
  .review-body { width: 100%; }
}

/* ------------------------------------------------------------------ 9 contact band */
.contact-band {
  background: radial-gradient(ellipse at 50% 50%, var(--ink-glow) 0%, var(--ink) 100%);
  padding: 48px 0; color: #fff;
}
.contact-well { max-width: 1120px; margin: 0 auto; padding: 0 30px; }
.contact-heading { max-width: 892px; margin: 0 auto 30px; font: 400 37px/48px var(--font-body); color: #fff; text-align: center; }
.contact-row { display: flex; flex-flow: row; gap: 20px; align-items: stretch; }
.contact-card {
  flex: 0 0 var(--contact-card-w); background: #fff; box-shadow: var(--shadow-df); border-radius: 0;
  padding: 25px 15px; text-align: center; color: var(--body-ink);
}
.contact-name { margin-bottom: 36px; font: 400 40px/48px var(--font-display); color: var(--steel); }
.contact-micro {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px;
  font: 700 18px/25px var(--font-body); text-transform: uppercase; color: var(--ink);
}
.contact-micro svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.contact-micro .glyph-fill { fill: currentColor; stroke: none; }
.contact-micro--gap { margin-top: 28px; }
.contact-addr, .contact-tel { font: 400 18px/25px var(--font-body); color: var(--body-ink); }
.contact-dir {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px;
  font: 400 18px/25px var(--font-body); text-transform: uppercase; color: var(--steel); text-decoration: underline;
}
.contact-dir svg { width: 18px; height: 18px; fill: currentColor; }
.contact-way { margin-top: 8px; font: 400 15px/23px var(--font-body); color: var(--body-ink); }
.contact-tel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--steel); text-decoration: underline; }
.contact-dir:hover, .contact-tel a:hover { color: var(--ink); }
.hours { width: 100%; border-collapse: collapse; font: 400 15px/20px var(--font-body); }
.hours th, .hours td { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.hours th { text-align: left; font-weight: 600; color: var(--ink); }
.hours td { text-align: right; font-weight: 400; color: var(--body-ink); }
.hours-note { margin-top: 10px; font: 400 15px/20px var(--font-body); color: var(--body-ink); }

.contact-form { flex: 1 1 var(--contact-form-w); min-width: 0; display: flex; flex-direction: column; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; row-gap: 18px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label { margin-bottom: 6px; font: 700 16px/22px var(--font-body); color: #fff; }
.req { color: var(--sun); }
.field input, .field select, .field textarea {
  width: 100%; height: 45px; padding: 0 20px; border: 0; border-radius: var(--radius-field);
  background: #fff; font: 400 16px/1.4 var(--font-body); color: var(--body-ink);
}
.select { position: relative; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select svg { position: absolute; right: 20px; top: 50%; width: 12px; height: 7px; margin-top: -3.5px; pointer-events: none; fill: none; stroke: var(--steel); stroke-width: 1.5; }
.field--full { margin-top: 18px; }
.field--message { margin-top: 18px; flex: 1 1 auto; }
.field--message textarea { flex: 1 1 auto; height: auto; min-height: 125px; padding: 14px 20px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-contact); outline-offset: 2px; }
.form-fine { margin-top: 18px; font: 400 15px/22px var(--font-body); color: var(--on-dark-soft); }
.form-fine.is-notice { color: #fff; font-weight: 600; }
.form-fine:focus-visible, .form-fine:focus { outline: var(--focus-contact); outline-offset: 4px; }
.form-submit { margin-top: 18px; align-self: flex-start; }
.contact-band .form-submit:focus-visible { outline: var(--focus-contact); }
.contact-map { display: block; width: 100%; height: var(--map-h); margin-top: 30px; border: 0; border-radius: 0; box-shadow: none; background: rgb(229, 227, 223); }

@media (max-width: 1023px) {
  .contact-row { flex-direction: column; }
  .contact-card, .contact-form { flex: none; }
}

/* ------------------------------------------------------------------ 10 footer + legal strip */
.site-footer { position: relative; width: 100%; background: var(--footer-grey); color: #fff; }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 20px 15px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.footer-menu, .legal-menu {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  width: fit-content; max-width: 100%; background: var(--footer-chip);
}
.footer-link {
  display: block; padding: 13px 5px; font: 600 14px/18px var(--font-body);
  text-transform: uppercase; color: #fff; text-decoration: none;
}
.footer-link:hover { text-decoration: underline; }
.footer-link[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--sun);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.footer-nap { font: 400 16px/24px var(--font-body); text-align: center; }
.footer-nap a {
  display: inline-block; padding: 10px 0; color: #fff;
  text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.footer-copy { font: 400 14px/20px var(--font-body); text-transform: uppercase; }
.footer-attrib { font: 400 13px/18px var(--font-body); }
.footer-attrib a { display: inline-block; padding: 13px 0; color: #fff; text-decoration: underline; }
.site-footer :focus-visible { outline: var(--focus-dark); outline-offset: var(--focus-offset); }

/* ------------------------------------------------------------------ <= 600 phone system */
@media (max-width: 600px) {
  /* 02 intro: 20px gutter, band padding x0.6; hairline spans the 350 well */
  .intro-band .wrap-1120 { padding: 0 20px; }
  .intro { padding: 24px 0; }

  /* 03 doctor card: vw - 16 sheet, portrait bleeds to the card edge */
  .doctor-card { width: calc(100vw - 16px); padding: 24px 12px 28px; }
  .doctor-portrait { width: calc(100% + 24px); margin: 0 -12px; }
  .doctor-portrait img { width: 100%; height: auto; aspect-ratio: 400 / 533; }
  .doctor-portrait figcaption { max-width: none; padding: 0 12px; }
  .doctor-col--text, .doctor-more { padding: 0; }
  .doctor-name { font-size: 31px; }
  .cred-h3 { font-size: 24px; }
  .cred-row { flex-direction: column; gap: 20px; }
  .cred { flex: none; width: 100%; }
  .cred-inner { max-width: none; }

  /* 04 splits */
  .splits { padding: 27px 0 19px; }
  .split-row + .split-row { margin-top: 31px; }
  .split-text { padding: 0 20px; }
  .split-h2 { font-size: 30px; line-height: 1.1; }
  .split-text .pill { margin-top: 20px; }
  .split-curtain { display: none; }

  /* 05 services */
  .services { padding: 18px 0 27px; }
  .wrap-bella { max-width: none; padding: 0 20px; }
  .services-h2 { font-size: 34px; }
  .svc-grid { grid-template-columns: 1fr; }
  .pill--svc { width: min(var(--svc-pill-w), 100%); margin-top: 19px; }

  /* 06 patient info */
  .pinfo { padding-bottom: 19px; }
  .pinfo-band { height: auto; aspect-ratio: 4 / 3; }
  .pinfo-layer { height: 100%; }
  .pinfo-card { padding: 19px 20px 0; }
  .pinfo-h2 { font-size: 30px; line-height: 33px; }
  .pinfo-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .pinfo-tile { aspect-ratio: 2 / 1; }

  /* 07 reviews: the sliver fix */
  .reviews { padding: 18px 8px; }
  .reviews-plate { padding: 12px 6px; }
  .review-card { padding: 24px 18px; }
  .ghost-quote { display: none; }
  .review-title { font-size: 26px; line-height: 31.2px; }

  /* 08 contact */
  .contact-band { padding: 29px 0; }
  .contact-well { padding: 0 20px; }
  .contact-heading { margin-bottom: 18px; font-size: 30px; line-height: 1.3; }
  .contact-row { gap: 24px; }
  .contact-name { font-size: 32px; line-height: 38.4px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-map { width: 100vw; height: 280px; margin: 29px 0 0 calc(50% - 50vw); }

  /* 09 footer pays for the action bar */
  .footer-inner { padding: 20px 20px calc(20px + var(--actionbar-h) + 40px); }
}

/* ------------------------------------------------------------------ narrow-phone guards (<= 374)
   no horizontal overflow at 320/360 (mobile.md): the frozen pill labels ("Learn more about
   magnification" = 339px) exceed a 280px well, and the bar's lockup + tel + MENU exceed 280.
   Untouched at 390 and above. */
@media (max-width: 374px) {
  .pill { max-width: 100%; height: auto; min-height: var(--pill-h); padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; line-height: 1.25; }
  .pill--util { min-height: var(--pill-h-util); }
  .m-bar { padding: 0 12px; }
  .m-bar__right { gap: 4px; }
}
/* ADDENDUM 4: the bar lockup gains the mark (42 + 9.2px), so below 385px the bar's tel icon
   yields; the action bar's Call segment (<= 600) carries the same tel link on screen */
@media (max-width: 384.98px) {
  .m-tel { display: none; }
}
@media (max-width: 359px) {
  .m-bar { padding: 0 10px; }
  .ab-seg { gap: 4px; }
  .ab-seg svg { width: 15px; height: 15px; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pinfo-layer { transform: none; }
  .m-drawer, .review-slide, .dr-toggle svg { transition: none; }
  .fade-pending { opacity: 1; transform: none; }
}