/* =============================================================================
   Forward Oral Surgery, base.css. Reset, type roles, bands, focus ring, the page chrome (x01 header, treatments and
   phone panels, menu overlay, request modal, x02 footer with its curve) and reduced motion; the header and menu are in nav.css.
   Every colour, size, radius and easing is a token from tokens.css (DNA.md, DETAILS.md, MOTION.md). One breakpoint:
   phone layout to 1023px, desktop from 1024px (DNA.md 6). No shadows (DNA.md 5), no tracked uppercase, no monospace.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr-h); background: var(--anchor); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: var(--t-p3-size); line-height: var(--t-p3-lh); font-weight: var(--t-p3-weight);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--display-weight); }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--anchor); outline-offset: 3px; border-radius: var(--r-pill); box-shadow: 0 0 0 5px var(--ground); }
.is-dark-ground :focus-visible, .band--dark :focus-visible, .foot :focus-visible, .nav :focus-visible, .modal :focus-visible,
.hdr .is-dark:focus-visible, .hdr .is-dark :focus-visible, html.menu-open .hdr :focus-visible, .s-hero__media :focus-visible {
  outline-color: var(--ground); box-shadow: 0 0 0 5px var(--anchor);
}
::selection { background: var(--tint); color: var(--anchor); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gap-12); top: -80px; z-index: 300; background: var(--anchor); color: var(--ink-invert);
  padding: var(--gap-12) var(--gap-24); border-radius: var(--r-pill); font-weight: 700; transition: top var(--dur-fast) var(--ease-io); }
.skip:focus { top: var(--gap-12); }/* ---- type roles (DNA.md 3) ------------------------------------------------ */

.t-dl   { font-family: var(--t-display-l-family);   font-size: var(--t-display-l-size);   line-height: var(--t-display-l-lh);   font-weight: 400; letter-spacing: var(--t-display-l-track); }
.t-d    { font-family: var(--t-display-family);     font-size: var(--t-display-size);     line-height: var(--t-display-lh);     font-weight: 400; letter-spacing: var(--t-display-track); }
.t-h2   { font-family: var(--t-h2-family); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); font-weight: 400; letter-spacing: var(--t-h2-track); }
.t-h4   { font-family: var(--t-h4-family); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); font-weight: 400; letter-spacing: var(--t-h4-track); }
.t-h5   { font-family: var(--t-h5-family); font-size: var(--t-h5-size); line-height: var(--t-h5-lh); font-weight: 400; letter-spacing: var(--t-h5-track); }
.t-p1   { font-family: var(--t-p1-family); font-size: var(--t-p1-size); line-height: var(--t-p1-lh); font-weight: var(--t-p1-weight); letter-spacing: var(--t-p1-track); }
.t-p3   { font-family: var(--t-p3-family); font-size: var(--t-p3-size); line-height: var(--t-p3-lh); font-weight: var(--t-p3-weight); letter-spacing: var(--t-p3-track); }
.t-c2   { font-family: var(--t-c2-family); font-size: var(--t-c2-size); line-height: var(--t-c2-lh); font-weight: var(--t-c2-weight); letter-spacing: var(--t-c2-track); }
.t-c3   { font-family: var(--t-c3-family); font-size: var(--t-c3-size); line-height: var(--t-c3-lh); font-weight: var(--t-c3-weight); letter-spacing: var(--t-c3-track); }
.t-d em, .t-dl em, .t-h2 em, .t-h4 em, .t-h5 em, .split-h em { font-style: italic; }
.quiet { color: var(--ink-quiet); }
.band--dark .quiet, .is-dark-ground .quiet { color: var(--ink-soft); }

/* ---- bands (SIGNATURES grammar: light or dark, full width, flush) -------- */
.band { position: relative; }
.band--light { background: var(--ground); color: var(--ink); }
.band--dark { background: var(--anchor); color: var(--ink-invert); }
.wrap { max-width: calc(var(--content) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); }
.pad { padding-top: var(--pad-sec); padding-bottom: var(--pad-sec); }
main { display: block; }

/* x01 header, Services and phone panels, menu overlay: assets/css/nav.css (builder N, NAV-REDESIGN v2) */

/* ---- request modal (M5 .call-modal), a <dialog> --------------------------- */
.modal { width: min(720px, calc(100vw - 2 * var(--pad-x))); max-height: calc(100svh - 2 * var(--gap-24)); margin: auto; padding: var(--gap-48);
  border: 0; border-radius: var(--r-card); background: var(--anchor); color: var(--ink-invert); overflow-y: auto; }
.modal::backdrop { background: var(--scrim); }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-24); margin-bottom: var(--gap-32); }
.modal__x { flex: none; }
.modal__note { margin-top: var(--gap-12); color: var(--ink-soft); }

/* =============================================================================
   x02 FOOTER (DETAILS D18, SIGNATURES S10/S11): dark, a convex top rising over the band above, centred mark, the form.
   ========================================================================== */

/* =============================================================================
   phones (DNA.md 6: one breakpoint; below 1024 the header is logo + two circles)
   ========================================================================== */
@media (max-width: 1023px) {
  .modal { padding: var(--gap-24) var(--gap-16); }
}

/* =============================================================================
   reduced motion: every device stills (site.js reads the same query)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}