/* =============================================================================
   Halden Orthodontics, 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; }
}

/* the landing page request form: the closing Book button jumps here, so keep the heading above it in view under the header */
form[data-form="ixl"] { scroll-margin-top: 200px; }