/* Seymour Family Dentistry
   Plain, print-like system: Libre Franklin for headings and controls, Source Serif 4 for reading,
   hairline rules instead of boxes, square buttons, colours from the oval logo. */

@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --paper: #faf7f1;
  --paper-2: #f1ebdf;
  --white: #fffdf9;
  --ink: #1f1b1c;
  --ink-2: #463f41;
  --muted: #645c5e;
  --rule: #d8cfbf;
  --maroon: #8a2a2e;
  --maroon-dark: #6b1e22;
  --gold: #e3bd3c;
  --night: #1e1a1b;
  --focus: #1f5fbf;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 72px;
  --r: 3px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cream: #f4ecdf;
  --cream-2: #bfb3a3;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--serif); -webkit-font-smoothing: antialiased; }
@media (min-width: 900px) { body { font-size: 1.1875rem; } }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 0.25s var(--ease-out), text-decoration-color 0.25s var(--ease-out); }
a:hover { color: var(--maroon-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hero :focus-visible, .page-hero :focus-visible, .ticker :focus-visible, .site-header:not(.is-stuck) :focus-visible,
.section--maroon :focus-visible, .cta-band :focus-visible, .book-card :focus-visible, .section--dark :focus-visible { outline-color: var(--gold); }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.5em; color: var(--ink); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.6rem); line-height: 1.03; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.55rem, 1.3rem + 1vw, 2.15rem); letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li::marker { color: var(--maroon); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.label { font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--maroon); margin: 0 0 0.75rem; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; font: 600 1rem var(--sans); text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.2em; border: 1px solid transparent; border-radius: var(--r);
  font: 600 1rem/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--arrow::after { content: "→"; display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn--arrow:hover::after { transform: translateX(4px); }
.btn--primary { background: var(--maroon); color: #fff; }
.btn--primary:hover { background: var(--maroon-dark); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #f0cd52; color: var(--ink); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0.5em 0.9em; font-size: 0.925rem; }
.btn--block { width: 100%; }
.more { font: 600 0.975rem/1.3 var(--sans); }
.more::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform 0.35s var(--ease-out); }
.more:hover::after { transform: translateX(4px); }
.chip { display: inline-block; padding: 0.3em 0.7em; border: 1px solid var(--rule); border-radius: var(--r); font: 500 0.9rem var(--sans); color: var(--ink); text-decoration: none; background: var(--white); transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.chip:hover { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
a.chip:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Top bar + header ---------- */
.topbar { display: none; background: var(--night); color: #d9d0c3; font: 500 0.85rem/1 var(--sans); border-bottom: 3px solid var(--gold); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 36px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar__group { display: flex; gap: 1.75rem; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.site-header.is-stuck { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--rule), 0 10px 24px -20px rgba(30, 26, 27, 0.45); }
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { width: 112px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-phone { display: none; font: 700 1.05rem/1 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--maroon); text-decoration: underline; }
.header-book { display: none; }
.header-call { display: inline-flex; }
.menu-toggle { min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--ink); border-radius: var(--r); background: transparent; color: var(--ink); font: 600 0.95rem var(--sans); cursor: pointer; }
.menu-toggle .when-open { display: none; }
.menu-toggle[aria-expanded="true"] .when-open { display: inline; }
.menu-toggle[aria-expanded="true"] .when-closed { display: none; }

/* Navigation: drawer under 1100px, mega menu above. */
.nav {
  position: fixed; inset: calc(var(--header-h) + 1px) 0 0; z-index: 49; background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) calc(6rem + env(safe-area-inset-bottom));
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s;
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s; }
.nav.is-open .nav__item { animation: fade-up 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__item { border-bottom: 1px solid var(--rule); }
.nav__trigger, .nav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0;
  background: none; border: 0; cursor: pointer; font: 700 1.2rem/1.2 var(--sans); color: var(--ink); text-decoration: none; text-align: left;
}
.nav__trigger::after { content: "+"; font-weight: 400; font-size: 1.4rem; color: var(--maroon); transition: transform 0.35s var(--ease-out); }
.nav__trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
.nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.nav__panel > .nav__panel-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.45s; }
.nav__panel.is-open { grid-template-rows: 1fr; }
.nav__panel.is-open > .nav__panel-inner { visibility: visible; transition: visibility 0s; padding-bottom: 1.25rem; }
.nav__group + .nav__group { margin-top: 1rem; }
.nav__group-title { margin: 0 0 0.3rem; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.nav__group ul { list-style: none; margin: 0; padding: 0; }
.nav__group a { display: block; padding: 0.4rem 0; font: 500 1rem/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.nav__group a:hover { color: var(--maroon); text-decoration: underline; }
.nav__group a[aria-current="page"] { color: var(--maroon); font-weight: 700; }
.nav__all { display: inline-block; margin-top: 1rem; }
.nav__mobile-cta { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
body.nav-open { overflow: hidden; }

@media (min-width: 640px) { .header-book { display: inline-flex; } }
@media (min-width: 1100px) {
  :root { --header-h: 82px; }
  .topbar { display: block; }
  .brand { margin-right: 0; }
  .brand img { width: 128px; }
  .site-header__bar { gap: 2rem; transition: min-height 0.4s var(--ease-out); }
  .site-header.is-stuck .site-header__bar { min-height: 66px; }
  .brand img { transition: width 0.4s var(--ease-out); }
  .site-header.is-stuck .brand img { width: 108px; }
  .menu-toggle, .header-call, .nav__mobile-cta, .nav__all { display: none; }
  .header-phone { display: inline; }
  .nav { position: static; inset: auto; z-index: auto; flex: 1; background: none; overflow: visible; padding: 0; visibility: visible; opacity: 1; transition: none; }
  .nav__list { display: flex; gap: 0.25rem; }
  .nav__item { border: 0; }
  .nav__trigger, .nav__link { width: auto; padding: 0.55rem 0.7rem; font: 600 1rem/1.2 var(--sans); }
  .nav__trigger::after { content: ""; width: 0.45em; height: 0.45em; margin-left: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
  .nav__trigger::after { color: inherit; transition: transform 0.35s var(--ease-out); }
  .nav__trigger[aria-expanded="true"]::after { content: ""; transform: translateY(0.1em) rotate(-135deg); }
  .nav__trigger, .nav__link { position: relative; transition: color 0.25s var(--ease-out); }
  .nav__trigger::before, .nav__link::before { content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.2rem; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); }
  .nav__trigger:hover, .nav__link:hover, .nav__trigger[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--maroon); }
  .nav__trigger:hover::before, .nav__link:hover::before, .nav__trigger[aria-expanded="true"]::before, .nav__link[aria-current="page"]::before { transform: scaleX(1); }
  /* Dropdowns: the header's charcoal, lightening smoothly toward the bottom; gold titles, cream links. */
  .nav__panel { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 0;
    background: linear-gradient(180deg, var(--night) 0%, #453c3e 100%);
    border-top: 1px solid rgba(244, 236, 223, 0.12); border-bottom: 3px solid var(--maroon);
    visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out), visibility 0s 0.35s; }
  .nav__panel.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s; }
  .nav__panel > .nav__panel-inner, .nav__panel.is-open > .nav__panel-inner { overflow: visible; visibility: inherit; transition: none; }
  .nav__panel.is-open .nav__group { animation: fade-up 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
  .nav.is-open .nav__item { animation: none; }
  .nav { transform: none; }
  .nav__panel .nav__panel-inner, .nav__panel.is-open .nav__panel-inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding: 1.75rem 0 2rem; }
  .nav__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.5rem 2.5rem; }
  .nav__group + .nav__group { margin-top: 0; }
  .nav__group-title { padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(244, 236, 223, 0.18); color: var(--gold); }
  .nav__panel .nav__group a { color: var(--cream); }
  .nav__panel .nav__group a:hover, .nav__panel .nav__group a[aria-current="page"] { color: var(--gold); }
  .nav__panel a.more { color: var(--gold); }
  .nav__panel :focus-visible { outline-color: var(--gold); }
  .nav__group a { padding: 0.28rem 0; font-size: 0.95rem; }
  .nav__panel-foot { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(244, 236, 223, 0.18); }
}
.nav__panel-foot { margin: 1rem 0 0; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.25rem); }
.section--rule { border-top: 1px solid var(--rule); }
.section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); padding-bottom: 0.85rem; }
.section-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--maroon); transform-origin: left; transition: transform 0.6s var(--ease-out) 0.05s; }
/* Most homepage sections take the hero's charcoal scheme (gold headings, cream text); a few stay paper.
   Redefining the ink/rule colours flips every component inside without restyling each one. */
.section--dark { --ink: var(--cream); --ink-2: var(--cream-2); --muted: var(--cream-2); --rule: rgba(244, 236, 223, 0.14); background: var(--night); color: var(--cream-2); }
.section--dark h2 { color: var(--gold); }
.section--dark a:not(.btn) { color: var(--cream); text-decoration-color: rgba(227, 189, 60, 0.7); }
.section--dark a:not(.btn):hover { color: var(--gold); }
.section--dark a.more, .section--dark .label { color: var(--gold); }
.section--dark .quotes blockquote::before { color: var(--gold); }
.section--paper { background: var(--paper); padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
/* Maroon bands, the badge's ring colour: edged in gold and lit with LED-sign dots like the hero's stage. */
.section--maroon, .cta-band, .book-card { background: var(--maroon) radial-gradient(rgba(227, 189, 60, 0.2) 1.1px, transparent 1.6px) 0 0 / 15px 15px; color: var(--cream); border-top: 3px solid var(--gold); }
.section--maroon a:not(.btn), .cta-band a:not(.btn), .book-card a:not(.btn) { color: var(--cream); }
.section.section--maroon { padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.section-head h2 { margin: 0; }
.section-head p { flex-basis: 100%; margin: 0.5rem 0 0; max-width: 42rem; color: var(--ink-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 0.85fr; } .split--even { grid-template-columns: 1fr 1fr; } }

/* Generic "card": a ruled block, not a box. */
.card { border-top: 1px solid var(--rule); padding: 1.1rem 0 0.5rem; }
.card h3 { margin-bottom: 0.35em; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--maroon); text-decoration: underline; }
.card p { color: var(--ink-2); }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 0 2.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* ---------- Home ---------- */
/* Full-bleed hero in the logo's charcoal and gold, one screen tall under the header (site.js measures
   --hero-top), up to 50rem on very tall screens. The header sits on it (dark) until you scroll. */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: min(calc(100svh - var(--hero-top, 7rem)), 50rem); background: var(--night); color: var(--cream); padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.hero__inner { margin-block: auto; }
.hero__inner { display: grid; gap: 1.5rem clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.05fr 1fr; } }
.hero__side { padding-bottom: 0.35rem; }
/* The stage: the services board and the doctors, standing on the maroon band. Phones and tablets stack
   them (doctors first); the band is clipped at the stage's foot so it never shows past the ticker. */
.hero__stage { position: relative; flex: 1 0 auto; margin-top: clamp(1rem, 0.5rem + 2vw, 2rem); display: flex; flex-direction: column; align-items: center; overflow: visible clip; }
.hero__stage .doctors { order: -1; }
/* Laptops and desktops: board on the left, doctors filling the rest of the row. The stage takes the
   height that's left (a size container: 100cqh is its height) but never more than the doctors need
   at full column width, so there's no empty band of charcoal around them. */
@media (min-width: 1000px) and (min-height: 560px) {
  .hero__stage {
    display: grid; grid-template-columns: minmax(16rem, 25rem) minmax(0, 1fr); gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); align-items: end;
    flex: 1 1 0; min-height: 19rem; max-height: min(26rem, calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 28rem) / 2.185)); container-type: size;
  }
  .hero__stage .doctors { order: 0; justify-self: center; width: min(100%, 100cqh * 2.185); }
  .hero__stage .services-board { align-self: stretch; }
}
/* Short laptop screens: a slightly smaller headline so everything still fits. */
@media (min-width: 1000px) and (max-height: 780px) {
  .hero__title { font-size: clamp(2.4rem, 0.9rem + 3vw, 3.7rem); }
  .hero__lead { margin-bottom: 1.1rem; }
  .hero__hours { margin-top: 1rem; padding-top: 0.75rem; }
  .hero__stage { min-height: 16rem; margin-top: 1rem; }
  .services-board { padding: 0.6rem 0.75rem 0.7rem; }
  .services-board__title { margin-bottom: 0.35rem; }
  .services-board li a { padding: 0.4rem 0.65rem; font-size: 0.9rem; }
  .services-board__all { margin-top: 0.5rem; padding-block: 0.5rem; }
}
.hero__title { color: var(--gold); font-size: clamp(2.6rem, 1.2rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.04em; margin: 0; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: inline-block; animation: line-up 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
/* "Since 2002" on the badge's pointed cream banner, set like its DENTISTRY: heavy, caps, charcoal. */
.hero__title .line:has(.hero__banner) { margin-top: 0.14em; padding-bottom: 0.1em; }
.hero__banner { padding: 0.15em 0.62em 0.13em; background: var(--cream); color: var(--night); font-size: 0.74em; font-weight: 850; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase;
  clip-path: polygon(0 50%, 0.5em 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0.5em 100%); }
.hero__title .line > .hero__banner { animation: unfurl 0.9s var(--ease-out) 0.5s both; }
.hero__lead { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); color: var(--cream-2); max-width: 33rem; margin-bottom: 1.5rem; animation: fade-up 0.9s var(--ease-out) 0.5s both; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; animation: fade-up 0.9s var(--ease-out) 0.62s both; }
.hero__call { font: 600 1rem/1.3 var(--sans); color: var(--cream-2); }
.hero__call a { color: var(--cream); font-weight: 700; text-decoration-color: rgba(227, 189, 60, 0.7); }
.hero__call a:hover { color: var(--gold); }
/* One line of hours under the button, with a maroon rule like the badge's ring. */
.hero__hours { position: relative; margin: 1.35rem 0 0; padding-top: 1rem; font: 500 0.95rem/1.45 var(--sans); color: var(--cream-2); animation: fade-up 0.9s var(--ease-out) 0.75s both; }
.hero__hours::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--maroon); transform-origin: left; animation: rule-draw 1.2s var(--ease-out) 0.8s both; }
.hero__hours strong { margin-right: 0.6em; font-weight: 700; color: var(--gold); }
/* The doctors and the badge: separate layers so the doctors can step in and their hands can move. */
.doctors { position: relative; width: min(100%, 780px); margin: 0; }
/* The doctors stand in front of a full-width maroon stage, edged in gold and lit with LED-sign dots.
   Its gold edge runs through the points of the badge's banner (58.3% down the artwork, per doctors/layout.json). */
.doctors::before {
  content: ""; position: absolute; z-index: -1; top: calc(58.3% - 1.5px); bottom: -100vh; left: -100vw; right: -100vw;
  border-top: 3px solid var(--gold); background: var(--maroon) radial-gradient(rgba(227, 189, 60, 0.2) 1.1px, transparent 1.6px) 0 0 / 15px 15px;
  transform-origin: left; animation: rule-draw 1.3s var(--ease-out) 0.3s both;
}
.doctors img { position: absolute; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.doctors__who { position: absolute; inset: 0; }
.doctors__badge { animation: badge-in 1s var(--ease-out) 0.45s both; }
.doctors__who--left { animation: step-in-left 1.1s var(--ease-out) 0.7s both; }
.doctors__who--right { animation: step-in-right 1.1s var(--ease-out) 0.8s both; }
.doctors__hand--wave { animation: wave 5.2s ease-in-out 2.2s infinite; }
.doctors__hand--brush { animation: brush 4s ease-in-out 3s infinite; }
.doctors__hand { will-change: transform; backface-visibility: hidden; }
.hero .btn--gold:hover { background: #f2cf55; }

/* Services board: an LED sign standing on the stage beside the doctors, like the office's sign out front
   (and the boards the doctors lean on inside). It rises into place, then its rows light up one after
   another; hovering a row lights it gold with a bar and an arrow. */
.services-board { position: relative; z-index: 1; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 0.8rem 0.9rem 0.9rem;
  background: #0e0c0c radial-gradient(rgba(227, 189, 60, 0.12) 0.9px, transparent 1.3px) 0 0 / 6px 6px; border: 3px solid #4a4344; box-shadow: inset 0 0 0 1px #000;
  color: var(--cream); animation: badge-in 0.9s var(--ease-out) 0.7s both; }
.services-board__title { margin: 0 0 0.5rem; padding-left: 0.2rem; font: 700 0.78rem/1.2 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 8px rgba(227, 189, 60, 0.45); animation: led-on 1.2s steps(1) 1.1s both; }
.services-board ul { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; list-style: none; margin: 0; padding: 0; }
.services-board li { display: flex; border-top: 1px solid rgba(244, 236, 223, 0.12); animation: led-on 1s steps(1) both; animation-delay: calc(1.3s + var(--i, 0) * 110ms); }
.services-board li:nth-child(odd) { border-right: 1px solid rgba(244, 236, 223, 0.12); }
.services-board li a { position: relative; flex: 1; display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem; font: 700 0.95rem/1.25 var(--sans); color: var(--cream); text-decoration: none; transition: background-color 0.3s var(--ease-out), color 0.25s var(--ease-out); }
.services-board li a::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; background: var(--gold); transform: scaleY(0); transition: transform 0.4s var(--ease-out); }
.services-board li a::after { content: "→"; margin-left: auto; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out); }
.services-board li a:hover, .services-board li a:focus-visible { background-color: rgba(227, 189, 60, 0.09); color: var(--gold); }
.services-board li a:hover::before, .services-board li a:focus-visible::before { transform: scaleY(1); }
.services-board li a:hover::after, .services-board li a:focus-visible::after { opacity: 1; transform: none; }
.services-board__all { display: flex; align-items: center; justify-content: center; margin-top: 0.7rem; padding: 0.65rem 1rem; border-radius: 2px; background: var(--gold); color: var(--ink); font: 700 0.92rem/1.2 var(--sans); text-decoration: none; transition: background-color 0.25s var(--ease-out); animation: led-on 1s steps(1) 2s both; }
.services-board__all::after { content: "→"; margin-left: 0.4em; transition: transform 0.35s var(--ease-out); }
.services-board__all:hover, .services-board__all:focus-visible { background: #f2cf55; color: var(--ink); }
.services-board__all:hover::after { transform: translateX(4px); }
@media (max-width: 999px) {
  .services-board { margin-top: 1.25rem; }
  .services-board ul { grid-auto-rows: auto; }
  .services-board li a { padding: 0.55rem 0.7rem; font-size: 0.92rem; }
}

/* The office's LED sign, as a slow ticker along the bottom of the hero. */
.ticker { position: relative; overflow: hidden; border-top: 1px solid rgba(244, 236, 223, 0.14); background: #161314; color: var(--gold);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 55s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker ul { display: flex; list-style: none; margin: 0; padding: 0.95rem 0; }
.ticker li { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; font: 600 0.8rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.ticker li::after { content: ""; width: 6px; height: 6px; background: var(--maroon); transform: rotate(45deg); }

/* Header: dark over the charcoal hero (every page has one), paper once you scroll. */
.site-header:not(.is-stuck) { background: var(--night); border-bottom-color: rgba(244, 236, 223, 0.12); }
.site-header:not(.is-stuck) .menu-toggle, .site-header:not(.is-stuck) .header-call { color: var(--cream); border-color: rgba(244, 236, 223, 0.55); }
.site-header:not(.is-stuck) .menu-toggle, .site-header:not(.is-stuck) .header-call, .site-header .menu-toggle, .site-header .header-call { transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), background-color 0.3s; }
@media (min-width: 1100px) {
  .site-header:not(.is-stuck) .nav__trigger, .site-header:not(.is-stuck) .nav__link, .site-header:not(.is-stuck) .header-phone { color: var(--cream); }
  .site-header:not(.is-stuck) .nav__trigger:hover, .site-header:not(.is-stuck) .nav__trigger[aria-expanded="true"], .site-header:not(.is-stuck) .nav__link:hover, .site-header:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--gold); }
  .site-header .header-phone { transition: color 0.45s var(--ease-out); }
}


.dentists { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.dentist { position: relative; isolation: isolate; display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; align-items: start; }
.dentist::before { content: ""; position: absolute; z-index: -1; left: 8px; top: 8px; width: 130px; height: 130px; background: var(--maroon); border-radius: 2px; transition: transform 0.5s var(--ease-out) 0.2s; }
.dentist img { width: 130px; height: 130px; object-fit: cover; object-position: 50% 20%; border-radius: 2px; }
.dentist h3 { font-size: 1.3rem; margin-bottom: 0.15em; }
.dentist .role { font: 500 0.95rem var(--sans); color: var(--muted); margin-bottom: 0.6rem; }
@media (max-width: 480px) { .dentist { grid-template-columns: 96px 1fr; gap: 1rem; } .dentist img { width: 96px; height: 96px; } }

.pullquote { position: relative; margin: 0; max-width: 48rem; padding-left: clamp(1rem, 0.5rem + 2vw, 2rem); }
.pullquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform-origin: top; transition: transform 0.6s var(--ease-out) 0.05s; }
.quote-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .quote-split { grid-template-columns: minmax(0, 1fr) 190px; gap: 4rem; } }
.signpost { margin: 0; max-width: 190px; }
.signpost img { width: 100%; border: 3px solid var(--cream); border-radius: 2px; transition: transform 0.6s var(--ease-out); }
.signpost:hover img { transform: rotate(-1.2deg) scale(1.02); }
.signpost figcaption { margin-top: 0.55rem; font: italic 400 0.95rem/1.4 var(--serif); color: var(--cream); }
@media (max-width: 899px) { .signpost { display: flex; align-items: flex-end; gap: 1rem; max-width: none; } .signpost img { width: 120px; flex: none; } .signpost figcaption { margin: 0; } }
.pullquote p { font: italic 400 clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem)/1.4 var(--serif); color: var(--cream); margin-bottom: 0.75rem; }
.pullquote cite { font: 600 0.975rem var(--sans); font-style: normal; color: var(--cream); }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.75rem; padding: 1rem 0; background: linear-gradient(var(--rule), var(--rule)) top left / 100% 1px no-repeat; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 2px; background: var(--maroon); font: 800 1.15rem/1 var(--sans); color: var(--cream); }
.steps h3 { margin: 0.1rem 0 0.25rem; }
.steps p { margin: 0; color: var(--ink-2); }

.cols { display: grid; gap: 1.5rem 0; }
@media (min-width: 900px) { .cols { grid-template-columns: repeat(3, 1fr); } .cols > * { padding: 0 2rem; border-left: 1px solid var(--rule); } .cols > :first-child { padding-left: 0; border-left: 0; } }
.cols h3 { margin-bottom: 0.4em; }
.cols p { color: var(--ink-2); }

.quotes { display: grid; gap: 0 3rem; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three across on wide screens; a review left alone on the last row spans the row, its text set in three
   columns that line up with the ones above. */
@media (min-width: 1100px) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quotes figure:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .quotes figure:last-child:nth-child(3n + 1) blockquote p { column-count: 3; column-gap: 3rem; }
}
.quotes figure { margin: 0; padding: 1.25rem 0; background: linear-gradient(var(--rule), var(--rule)) top left / 100% 1px no-repeat; }
.quotes blockquote { margin: 0 0 0.5rem; font-style: italic; color: var(--ink); }
.quotes blockquote::before { content: "\201C"; display: block; height: 0.55em; margin-bottom: 0.15em; font: 700 3.6rem/1 var(--serif); font-style: normal; color: var(--maroon); }
.quotes blockquote p { margin: 0; }
.quotes figcaption { font: 600 0.95rem var(--sans); color: var(--ink-2); }
.quotes figcaption::before { content: "— "; }
.link-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.5rem; font: 600 0.975rem var(--sans); }

/* Hours + contact details */
.hours-table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font: 500 1rem/1.4 var(--sans); }
.hours-table th, .hours-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 500; }
.hours-table td { text-align: right; color: var(--ink-2); }
.hours-table tr.is-today th, .hours-table tr.is-today td { font-weight: 700; color: var(--cream); background: var(--maroon); border-bottom-color: var(--maroon); }
.hours-table tr.is-today th { padding-left: 0.65rem; }
.hours-table tr.is-today td { padding-right: 0.65rem; }
.hours-table tr.is-today th::after { content: " (today)"; font-weight: 500; color: var(--cream); }
.contact-lines { list-style: none; padding: 0; margin: 0 0 1.5rem; font: 500 1.05rem/1.5 var(--sans); }
.contact-lines li { padding: 0.15rem 0; }
.contact-lines .icon { display: none; }
.contact-lines a { color: var(--ink); }
.map-frame { width: 100%; min-width: 0; aspect-ratio: 4 / 3; min-height: 300px; border: 1px solid var(--ink); background: var(--paper-2); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Closing call-to-action */
.cta-band { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cta-band__inner { display: grid; gap: 1.25rem 3rem; align-items: center; padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: var(--cream); margin-bottom: 0.3em; }
.cta-band p { margin: 0; color: var(--cream); }
.cta-band .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.cta-band .phone { font: 800 1.5rem/1 var(--sans); color: var(--gold); text-decoration: none; letter-spacing: -0.01em; }
.cta-band .phone:hover { color: #f6d873; text-decoration: underline; }

/* ---------- Inner page header ---------- */
/* Charcoal band like the homepage hero, standing on a maroon floor edged in gold (the homepage's stage),
   with one of the doctors leaning on a little LED board on the right. */
.page-hero {
  --floor: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); --pad-b: calc(var(--floor) + clamp(1.5rem, 1.2rem + 1vw, 2.25rem));
  position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--cream); padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) 0 var(--pad-b);
}
.page-hero::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--floor);
  border-top: 3px solid var(--gold); background: var(--maroon) radial-gradient(rgba(227, 189, 60, 0.2) 1.1px, transparent 1.6px) 0 0 / 15px 15px;
  transform-origin: left; animation: rule-draw 1.2s var(--ease-out) 0.2s both;
}
.page-hero__inner { display: grid; gap: 1.5rem clamp(2rem, 1rem + 3vw, 4rem); align-items: end; }
.page-hero .breadcrumbs { animation: fade-in 0.6s var(--ease-out) both; }
.page-hero h1 { animation: fade-up 0.8s var(--ease-out) 0.05s both; }
.page-hero .lead, .page-hero .link-row { animation: fade-up 0.8s var(--ease-out) 0.16s both; }
.page-hero h1 { color: var(--gold); font-size: clamp(2.05rem, 1.5rem + 2.2vw, 3.2rem); max-width: 22ch; margin-bottom: 0.4em; }
.page-hero .lead { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem); color: var(--cream-2); max-width: 42rem; margin: 0; }
.page-hero a { color: var(--cream); text-decoration-color: rgba(227, 189, 60, 0.7); }
.page-hero a:hover { color: var(--gold); }
.page-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.breadcrumbs { margin-bottom: 1.1rem; font: 500 0.875rem/1.4 var(--sans); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35em; }
.breadcrumbs li { color: var(--cream-2); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.35em; color: rgba(244, 236, 223, 0.3); }
.page-hero .breadcrumbs a { color: var(--cream-2); text-decoration-color: rgba(244, 236, 223, 0.35); }
.page-hero .breadcrumbs a:hover { color: var(--gold); }
.breadcrumbs [aria-current] { color: var(--cream); }

/* The doctor and his board. Sized per artwork pixel (--s) so both doctors come out the same scale. */
.cameo { display: none; }
@media (min-width: 900px) {
  .page-hero__inner:has(.cameo) { grid-template-columns: minmax(0, 1fr) auto; }
  .cameo { --s: clamp(0.24px, 0.09px + 0.0146vw, 0.31px); display: block; position: relative; width: calc(var(--cw) * var(--s)); margin-bottom: calc(-1 * var(--pad-b)); }
}
.cameo img { position: absolute; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.cameo__who { position: absolute; inset: 0; z-index: 2; animation: step-in-left 1.1s var(--ease-out) 0.35s both; }
.cameo--left .cameo__who { animation-name: step-in-right; }
.cameo__sign {
  position: absolute; z-index: 1; container-type: inline-size; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 0.5em; padding: 0.5rem 0.55rem;
  background: #0e0c0c radial-gradient(rgba(227, 189, 60, 0.13) 0.9px, transparent 1.3px) 0 0 / 6px 6px;
  border: 3px solid #4a4344; border-bottom: 0; box-shadow: inset 0 0 0 1px #000;
  color: var(--gold); text-align: center; animation: badge-in 0.9s var(--ease-out) 0.2s both;
}
.cameo__status { margin: 0; font: 700 max(0.68rem, 6.2cqi)/1.25 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 0 8px rgba(227, 189, 60, 0.45); animation: led-on 1.4s steps(1) 0.9s both; }
.cameo__status span { display: block; }
.cameo__phone { font: 800 max(0.85rem, 9.6cqi)/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap; color: var(--gold); text-decoration: none; text-shadow: 0 0 10px rgba(227, 189, 60, 0.5); animation: led-on 1.4s steps(1) 1.05s both; }
.page-hero .cameo__phone { color: var(--gold); }
.cameo__phone:hover, .page-hero .cameo__phone:hover { color: #f6d873; text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- Article ---------- */
.article { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); }
@media (min-width: 1000px) { .article { grid-template-columns: minmax(0, 1fr) 300px; } .article__aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.article__aside { display: grid; gap: 2rem; }

.prose { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose h2 + h3 { margin-top: 0.75em; }
.prose li { margin: 0.3em 0; }
.prose li > ul { margin: 0.25em 0 0.5em; }
.prose ol > li::marker { font: 700 0.95em var(--sans); }
.prose strong { font-weight: 650; }
.prose img { border-radius: 2px; margin: 1.5rem 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.callout, .md-note { margin: 1.75rem 0; padding: 1rem 1.25rem; background: var(--paper-2); border-left: 3px solid var(--maroon); }
.callout > :last-child, .md-note > :last-child, .md-warning > :last-child { margin-bottom: 0; }
.md-warning { margin: 1.75rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--maroon); background: #f7e9e6; }
.md-columns > ul { margin: 0 0 1em; }
.md-columns li { break-inside: avoid; }
@media (min-width: 720px) { .md-columns > ul { columns: 2; column-gap: 2.5rem; } }
.md-cards { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 1.5rem 0; }
.md-card { border-top: 2px solid var(--ink); padding: 0.85rem 0 1rem; }
.md-card > :last-child { margin-bottom: 0; }
.md-card h3 { margin-top: 0 !important; font-size: 1.15rem; }
.md-card ul { padding-left: 1.1em; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table-wrap th, .table-wrap td { padding: 0.65rem 0.75rem 0.65rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table-wrap thead th { font: 700 0.85rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.table-wrap tbody th { font-weight: 650; }

/* Sidebar */
.side-nav__title { margin: 0; padding-bottom: 0.5rem; border-bottom: 3px solid var(--maroon); font: 700 0.8rem/1.3 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; }
.side-nav__title a { color: var(--ink); text-decoration: none; }
.side-nav ul { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow: hidden auto; }
.side-nav li { border-bottom: 1px solid var(--rule); }
.side-nav a { display: block; padding: 0.5rem 0 0.5rem 0.75rem; border-left: 3px solid transparent; font: 500 0.95rem/1.35 var(--sans); color: var(--ink); text-decoration: none; transition: color 0.25s var(--ease-out), border-color 0.35s var(--ease-out), padding 0.35s var(--ease-out); }
.side-nav a:hover { padding-left: 1rem; }
.side-nav a:hover { color: var(--maroon); text-decoration: underline; }
.side-nav a[aria-current="page"] { border-left-color: var(--maroon); color: var(--maroon); font-weight: 700; }
.book-card { padding: 1.25rem; }
.book-card h2 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--cream); }
.book-card p { font-size: 1rem; color: var(--cream); margin-bottom: 0.75rem; }
.book-card .phone, .book-card a.phone { display: block; margin-bottom: 1rem; font: 800 1.45rem/1 var(--sans); color: var(--gold); text-decoration: none; }
.book-card a.phone:hover { color: #f6d873; text-decoration: underline; }
.book-card .status { font: 500 0.9rem var(--sans); color: var(--cream); margin: 0.75rem 0 0; }

/* Hub topic list */
.hub__topics > .label { padding-bottom: 0.6rem; border-bottom: 3px solid var(--maroon); }
.hub { display: grid; gap: 2.5rem clamp(2.5rem, 1rem + 4vw, 5rem); }
@media (min-width: 1000px) {
  .hub--split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
  .hub--split .hub__topics { padding-top: 0.35rem; }
  .hub--split .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub--split .is-pinned-top { position: sticky; top: calc(var(--header-h) + 24px); }
  .hub--split .is-pinned-bottom { position: sticky; bottom: 24px; align-self: end; }
}
.hub-grid { display: grid; gap: 0 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.hub-grid .card { padding: 1rem 0 1.25rem; border-top: 0; background: linear-gradient(var(--rule), var(--rule)) top left / 100% 1px no-repeat; }
.hub-grid .card h3 a { transition: color 0.25s var(--ease-out); }
.hub-grid h3 { font-size: 1.1rem; }
.hub-grid p { font-size: 1rem; margin: 0; }
.related { margin-top: 3rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.related h2 { font-size: 1.1rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Bio + team */
.bio { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 4rem); padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); }
@media (min-width: 900px) { .bio { grid-template-columns: 260px minmax(0, 1fr); } }
.bio__photo img { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 2px; }
.facts { list-style: none; padding: 0; margin: 1rem 0 0; font: 600 0.975rem/1.4 var(--sans); }
.facts li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.facts .icon { display: none; }
.team-grid { display: grid; gap: 1rem 2.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.team-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; border-radius: 2px; margin-bottom: 1rem; }
.team-card .role { font: 500 0.95rem var(--sans); color: var(--muted); margin: -0.2rem 0 0.75rem; }

/* Gallery */
.cases { display: grid; gap: 0; }
.case { display: grid; gap: 1.25rem 2.5rem; padding: 1.75rem 0; }
@media (min-width: 900px) { .case { grid-template-columns: minmax(0, 560px) 1fr; align-items: start; } }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.6rem; }
.photo-grid, .md-photos { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: 1rem 0 2.5rem; }
.photo-grid img, .md-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; margin: 0; }

/* FAQ */
.faq { border-top: 3px solid var(--maroon); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font: 650 1.1rem/1.35 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { transition: color 0.25s var(--ease-out); }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--maroon); transition: transform 0.4s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--maroon); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .faq__body { padding: 0 0 1.25rem; }

/* Forms */
.form { display: grid; gap: 1.1rem; }
.form-card { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--ink); background: var(--white); }
.field { display: grid; gap: 0.35rem; }
.field label, .field legend { font: 600 0.975rem/1.3 var(--sans); }
.field .hint, .hint { font: 400 0.9rem/1.4 var(--sans); color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.75rem; border: 1px solid #8c8284; border-radius: 2px; background: #fff; font: 400 1rem/1.4 var(--sans); color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(31, 95, 191, 0.3); outline-offset: 0; border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: #a1231b; border-width: 2px; }
.field .error { margin: 0; color: #a1231b; font: 600 0.9rem var(--sans); }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
fieldset.field { border: 0; padding: 0; margin: 0; }
.options { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.option { display: inline-flex; align-items: center; gap: 0.45em; font: 500 1rem var(--sans); cursor: pointer; }
.option input { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--maroon); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 0.9rem 1.1rem; font: 600 1rem/1.4 var(--sans); border-left: 3px solid; }
.alert--ok { background: #e9f3eb; color: #1f5c33; border-color: #2f7a46; }
.alert--error { background: #f9e8e5; color: #8f1f17; border-color: #a1231b; }
.form-note { margin: 0; font: 400 0.9rem/1.45 var(--sans); color: var(--muted); }
.quiz { border-top: 2px solid var(--ink); }
.quiz .q { display: grid; gap: 0.5rem 1.5rem; padding: 0.9rem 0; margin: 0; border: 0; border-bottom: 1px solid var(--rule); counter-increment: q; }
@media (min-width: 640px) { .quiz .q { grid-template-columns: 1fr auto; align-items: center; } }
.quiz { counter-reset: q; }
.quiz .q legend { float: left; width: 100%; padding: 0; font: 500 1.05rem/1.4 var(--serif); }
.quiz .q legend::before { content: counter(q) ". "; font: 700 1rem var(--sans); color: var(--maroon); }

/* Documents / video */
.doc-list { list-style: none; padding: 0; margin: 0 0 2rem; columns: 2 200px; column-gap: 2.5rem; }
.doc-list li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.doc-list a { display: block; padding: 0.55rem 0; font: 500 1rem var(--sans); }
.doc-list a::after { content: " (PDF)"; color: var(--muted); font-weight: 400; }
.video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--night); }
.video-embed iframe, .video-embed button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed button { display: grid; place-items: center; background: var(--night) center / cover no-repeat; color: #fff; cursor: pointer; }
.video-embed button .icon { width: 72px; height: 72px; color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #d6cdbf; padding: clamp(2.75rem, 2rem + 3vw, 4.5rem) 0 1.75rem; font: 400 0.975rem/1.6 var(--sans); border-top: 3px solid var(--gold); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); } }
.footer-brand img { width: 150px; margin-bottom: 1.25rem; }
.footer-title { margin: 0 0 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font: 700 0.78rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer .contact-lines { font-size: 1rem; }
.site-footer .contact-lines a { color: #fff; }
.footer-hours { width: 100%; max-width: 260px; border-collapse: collapse; }
.footer-hours th, .footer-hours td { padding: 0.2rem 0; text-align: left; font-weight: 400; }
.footer-hours td { text-align: right; color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.875rem; color: #b2a898; }
.footer-bottom p { margin: 0; }
.footer-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.footer-bottom a { color: #d6cdbf; }

/* Sticky phone bar on small screens */
.mobile-cta { animation: bar-in 0.6s var(--ease-out) 0.5s both; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--night); border-top: 3px solid var(--gold); padding-bottom: env(safe-area-inset-bottom); }
.mobile-cta a { display: flex; align-items: center; justify-content: center; min-height: 54px; color: #fff; text-decoration: none; font: 600 0.95rem var(--sans); }
.mobile-cta a + a { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.mobile-cta .is-primary { background: var(--maroon); border-left: 0; }
body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) { .mobile-cta { display: none; } body { padding-bottom: 0; } }

@media print { .site-header, .topbar, .mobile-cta, .site-footer, .article__aside { display: none !important; } body { padding: 0; background: #fff; } }

/* ---------- Motion ---------- */
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes led-on { 0% { opacity: 0; } 20% { opacity: 0.55; } 28% { opacity: 0.15; } 40%, 100% { opacity: 1; } }
@keyframes unfurl { from { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%); } }
@keyframes badge-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes step-in-left { from { opacity: 0; transform: translateX(-36px); } }
@keyframes step-in-right { from { opacity: 0; transform: translateX(36px); } }
/* A small wave every few seconds, then rest. */
@keyframes wave { 0%, 52%, 100% { transform: rotate(0); } 9% { transform: rotate(-7deg); } 18% { transform: rotate(4deg); } 27% { transform: rotate(-5deg); } 37% { transform: rotate(2deg); } }
/* A slight toothbrush wiggle. */
@keyframes brush { 0%, 58%, 100% { transform: rotate(0); } 12% { transform: rotate(3.5deg); } 24% { transform: rotate(-1.5deg); } 36% { transform: rotate(3deg); } 47% { transform: rotate(-0.5deg); } }
@keyframes art-in { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(28px) scale(1.04); } to { opacity: 1; clip-path: inset(0); } }
@keyframes frame-in { from { opacity: 0; transform: translate(-14px, -14px); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes bar-in { from { transform: translateY(100%); } }
@keyframes failsafe { to { opacity: 1; transform: none; clip-path: inset(0); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Scroll reveals (site.js adds .is-in). Content stays visible without JS. */
  .js [data-reveal] { transition: opacity 0.45s var(--ease-out) calc(var(--d, 0) * 1ms), transform 0.45s var(--ease-out) calc(var(--d, 0) * 1ms), background-size 0.7s var(--ease-out) calc(var(--d, 0) * 1ms), background-color 0.35s var(--ease-out); }
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
  .js:not(.reveal-ready) [data-reveal]:not(.is-in) { animation: failsafe 0.01s 3s forwards; }
  .js .steps li:not(.is-in), .js .quotes figure:not(.is-in), .js .hub-grid .card:not(.is-in) { background-size: 0% 1px; }
  .js .pullquote:not(.is-in)::before { transform: scaleY(0); }
  .js .section-head:not(.is-in)::after { transform: scaleX(0); }
  .js .dentist:not(.is-in)::before { transform: translate(-8px, -8px); }
  /* A maroon bar under the header fills as you read down the page. */
  @supports (animation-timeline: scroll()) {
    .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--maroon); transform-origin: left; pointer-events: none; animation: read-progress linear both; animation-timeline: scroll(root block); }
    @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
  .js .dentist img { clip-path: inset(0); transition: clip-path 0.55s var(--ease-out) 0.05s; }
  .js .dentist:not(.is-in) img { clip-path: inset(0 0 100% 0); }
  .js .map-frame:not(.is-in) { transform: translateY(14px) scale(0.99); }

  /* Page-to-page: header stays put, the page underneath fades and lifts. */
  @view-transition { navigation: auto; }
  .topbar { view-transition-name: topbar; }
  .site-header { view-transition-name: site-header; }
  main { view-transition-name: main; }
  ::view-transition-old(main) { animation: vt-out 0.22s var(--ease-in-out) both; }
  ::view-transition-new(main) { animation: vt-in 0.5s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
  :root { interpolate-size: allow-keywords; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { animation: none !important; width: auto; }
  .doctors__hand { animation: none !important; }
  .ticker__track ul { flex-wrap: wrap; justify-content: center; row-gap: 0.75rem; padding-inline: var(--gutter); }
  .ticker__track ul[aria-hidden] { display: none; }
}