/* src/styles/legacy-migration.css */
/* ============================================================================
   Mason Park Dental for Kids — site stylesheet
   Client-First (Finsweet) naming, following the house mapping in
   deliver/brandklout/dr-nahlah/workflows/07-webflow-build/.tmp/CF-MAPPING.md

   TWO LAYERS, and the split is the point:
     1. STYLE GUIDE  — utilities, hyphenated: padding-global, container-large,
        text-size-medium, heading-style-h2, button. Reused everywhere, never
        page-specific. Adding a page must not add classes here.
     2. COMPONENTS   — custom classes with the Client-First underscore:
        <component>_<element>, e.g. service-card_icon. One block per component,
        used by every page that needs it.

   Nothing is styled by bare tag name except the document defaults below, because
   a bare-tag rule collides site-wide the moment this is pasted into a builder —
   the same failure the Client-First validator flags.

   INSTATIC: this ships as one site-wide code asset. Page HTML carries classes
   only and links no stylesheet of its own.

   TYPEFACE: headings on the WordPress site were Adobe Typekit "stolzl",
   licensed through the ThemeREX theme's kit. That licence does not travel, so
   headings use Figtree. Swap the @import and --font-display to change it.
   ========================================================================= */

/* ---------------------------------------------------------------- variables */
/* Colours sampled from the recovered pediatric site, not guessed. The style
   guide is the parent practice's, unchanged — same token names, same utilities,
   same components — and only the accent moves, to the brighter cyan this brand
   actually published (#1bc1ff, the most-used colour in its own markup after
   white). --accent-dark is a darkened companion used wherever the accent has to
   carry TEXT on white, where #1bc1ff is nowhere near a 4.5:1 contrast ratio.
   --sun is the one addition: a warm counterweight for a children's practice,
   used on iconography only, never on text. */
:root {
  --ink: #2b2b2d;
  --body: #6e7276;
  --muted: #98a0a8;
  --accent: #1bc1ff;
  --accent-dark: #0a7490;
  --sun: #ffb100;
  --sage: #a0b5ab;
  --sage-dark: #8ba393;
  --slate: #545f62;
  --tan: #ccbca6;
  --white: #ffffff;
  --paper: #f7f9fb;
  --line: #e6eaee;

  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --container-large: 1200px;
  --container-medium: 940px;
  --container-small: 720px;

  --radius: 14px;
  --radius-large: 22px;
  --shadow: 0 18px 48px -24px rgba(43, 43, 45, .35);
}

/* ------------------------------------------------------- document defaults */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font: 400 17px/1.65 var(--font-body);
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-dark); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
button { font: inherit; }

/* ===========================================================================
   1. STYLE GUIDE
   ======================================================================== */

/* --- structure ----------------------------------------------------------- */
.page-wrapper { overflow: clip; }
.main-wrapper { display: block; }

/* The horizontal gutter. Every section gets exactly one. */
.padding-global { padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }

.container-large { width: 100%; max-width: var(--container-large); margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: var(--container-medium); margin-left: auto; margin-right: auto; }
.container-small { width: 100%; max-width: var(--container-small); margin-left: auto; margin-right: auto; }

/* Vertical rhythm. Sections use these instead of ad-hoc margins. */
.padding-section-small { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.padding-section-medium { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.padding-section-large { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }

/* --- spacers ------------------------------------------------------------- */
/* Empty divs that own the gap, so no component carries a margin that only makes
   sense in one arrangement. */
.spacer-xxsmall { width: 100%; padding-top: .25rem; }
.spacer-xsmall { width: 100%; padding-top: .5rem; }
.spacer-small { width: 100%; padding-top: 1rem; }
.spacer-medium { width: 100%; padding-top: 1.5rem; }
.spacer-large { width: 100%; padding-top: 2rem; }
.spacer-xlarge { width: 100%; padding-top: 3rem; }
.spacer-xxlarge { width: 100%; padding-top: 4rem; }

/* --- typography ---------------------------------------------------------- */
.heading-style-h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.55rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.heading-style-h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.heading-style-h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.heading-style-h4 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.heading-style-h5 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.heading-style-h6 { font-size: .95rem; font-weight: 600; line-height: 1.35; }

.text-size-tiny { font-size: .78rem; line-height: 1.5; }
.text-size-small { font-size: .88rem; line-height: 1.6; }
.text-size-regular { font-size: 1rem; line-height: 1.65; }
.text-size-medium { font-size: 1.08rem; line-height: 1.6; }
.text-size-large { font-size: 1.25rem; line-height: 1.5; }

.text-weight-normal { font-weight: 400; }
.text-weight-medium { font-weight: 500; }
.text-weight-semibold { font-weight: 600; }
.text-weight-bold { font-weight: 700; }

.text-style-allcaps { text-transform: uppercase; letter-spacing: .14em; }
.text-style-muted { color: var(--muted); }
.text-align-center { text-align: center; }

.text-color-white { color: var(--white); }
.text-color-ink { color: var(--ink); }
.text-color-accent { color: var(--accent); }

/* The eyebrow above a heading — frequent enough to earn a utility. */
.text-style-eyebrow {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}

/* --- max widths ---------------------------------------------------------- */
.max-width-xsmall { width: 100%; max-width: 22rem; }
.max-width-small { width: 100%; max-width: 30rem; }
.max-width-medium { width: 100%; max-width: 42rem; }
.max-width-large { width: 100%; max-width: 56rem; }
.max-width-full { width: 100%; max-width: none; }
.align-center { margin-left: auto; margin-right: auto; }

/* --- buttons ------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.9rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: var(--white); cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.button:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-1px); }
.button.is-secondary { background: var(--sage); }
.button.is-secondary:hover { background: var(--sage-dark); }
.button.is-slate { background: var(--slate); }
.button.is-slate:hover { background: var(--ink); }
.button.is-ghost { background: transparent; border-color: currentColor; color: var(--ink); }
.button.is-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* --- rich text ----------------------------------------------------------- */
/* One scoped block for prose the practice wrote, so tag rules cannot leak. */
.text-rich-text { max-width: 74ch; }
/* A data table is not prose: the reading measure that helps a paragraph
   squeezes a 4-column table to half the page and starts its horizontal
   scroll far earlier than it needs to. */
.text-rich-text.is-wide { max-width: none; }
.text-rich-text > * + * { margin-top: 1.15em; }
.text-rich-text h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin-top: 2.4rem; }
.text-rich-text h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1.2; margin-top: 1.9rem; }
.text-rich-text h4 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); margin-top: 1.5rem; }
.text-rich-text > :first-child { margin-top: 0; }
.text-rich-text ul { list-style: disc; padding-left: 1.35em; }
.text-rich-text ol { list-style: decimal; padding-left: 1.35em; }
.text-rich-text li + li { margin-top: .45em; }
.text-rich-text img { border-radius: var(--radius); margin: 1.75rem 0; }
.text-rich-text strong, .text-rich-text b { color: var(--ink); font-weight: 600; }
.text-rich-text table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.text-rich-text th, .text-rich-text td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.text-rich-text th { background: var(--paper); font-family: var(--font-display); color: var(--ink); }
.text-rich-text blockquote { padding: 1rem 0 1rem 1.5rem; border-left: 3px solid var(--accent); color: var(--ink); font-size: 1.08rem; }

/* --- backgrounds --------------------------------------------------------- */
.background-color-white { background-color: var(--white); }
.background-color-paper { background-color: var(--paper); }
.background-color-ink { background-color: var(--ink); color: #d7dade; }
.background-color-tan { background-color: var(--tan); color: var(--white); }
.background-color-slate { background-color: var(--slate); color: #e3e7e9; }
/* An inverted section inverts its headings — but a white card inside one keeps
   the normal palette, or its text goes white on white. */
.background-color-ink :is(h1,h2,h3,h4,h5,h6),
.background-color-tan :is(h1,h2,h3,h4,h5,h6),
.background-color-slate :is(h1,h2,h3,h4,h5,h6) { color: var(--white); }
.background-color-ink a, .background-color-tan a { color: var(--white); }
.background-color-ink .text-style-eyebrow { color: var(--sage); }

/* --- layout helpers ------------------------------------------------------ */
/* Grid items default to min-width:auto, so one wide child (a table) stretches
   the column past the container and scrolls the whole page sideways. */
.layout-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.layout-grid > * { min-width: 0; }
.layout-grid.is-1col { grid-template-columns: 1fr; }
.layout-grid.is-2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.layout-grid.is-3col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }
.layout-grid.is-4col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.layout-split { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.layout-split > * { min-width: 0; }
@media (min-width: 900px) {
  .layout-split { grid-template-columns: 1fr 1fr; }
  .layout-split.is-text-wide { grid-template-columns: 1.15fr .85fr; }
  .layout-split.is-flipped > :first-child { order: 2; }
}
.layout-split img { border-radius: var(--radius-large); box-shadow: var(--shadow); }

.overflow-scroll-x { overflow-x: auto; max-width: 100%; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   2. COMPONENTS
   ======================================================================== */

/* --- topbar_ ------------------------------------------------------------- */
.topbar_component { background: var(--slate); color: var(--white); text-align: center; padding: .55rem clamp(1.25rem, 4vw, 3rem); font-size: .82rem; }
.topbar_component a { color: var(--white); text-decoration: none; }
.topbar_component a:hover { text-decoration: underline; }

/* --- navbar_ ------------------------------------------------------------- */
.navbar_component { position: sticky; top: 0; z-index: 60; background: var(--white); border-bottom: 1px solid var(--line); }
.navbar_container { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-block: .9rem; }
.navbar_logo-link { flex: 0 0 auto; text-decoration: none; }
.navbar_logo { width: clamp(140px, 14vw, 185px); }
.navbar_menu { margin-left: auto; }
.navbar_menu-list { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem); }
.navbar_item { position: relative; }
.navbar_link {
  display: block; font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; padding: .55rem 0; white-space: nowrap;
}
.navbar_link:hover, .navbar_link[aria-current="page"] { color: var(--accent); }
.navbar_link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.navbar_dropdown-list {
  position: absolute; top: 100%; left: -1rem; min-width: 255px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.navbar_dropdown-list .navbar_dropdown-list { top: -.5rem; left: 100%; }
.navbar_item:hover > .navbar_dropdown-list,
.navbar_item:focus-within > .navbar_dropdown-list { opacity: 1; visibility: visible; transform: none; }
.navbar_dropdown-list .navbar_link { text-transform: none; letter-spacing: .01em; font-size: .88rem; padding: .5rem 1.1rem; }
.navbar_dropdown-list .navbar_link:hover { background: var(--paper); }
.navbar_item.has-dropdown > .navbar_link::after { content: "\203A"; display: inline-block; margin-left: .35rem; transform: rotate(90deg); font-size: .9em; }
.navbar_dropdown-list .navbar_item.has-dropdown > .navbar_link::after { transform: none; float: right; }
.navbar_actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.navbar_phone, .phone-link_component {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  text-decoration: none; font-size: .95rem;
}
.navbar_phone:hover, .phone-link_component:hover { color: var(--accent); }
.navbar_toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--ink); }
.navbar_toggle svg { width: 26px; height: 26px; }
.navbar_scrim { display: none; }

@media (max-width: 1150px) {
  .navbar_toggle { display: block; order: 3; }
  .navbar_actions { order: 2; margin-left: auto; }
  .navbar_actions .button { display: none; }
  .navbar_menu {
    position: fixed; inset: 0 0 0 auto; width: min(380px, 88vw); z-index: 58; margin: 0;
    background: var(--white); padding: 5.5rem 1.5rem 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--shadow);
  }
  body.nav-open .navbar_menu { transform: none; }
  body.nav-open .navbar_scrim { opacity: 1; visibility: visible; }
  .navbar_scrim {
    display: block; position: fixed; inset: 0; z-index: 57; border: 0;
    background: rgba(43, 43, 45, .45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  }
  .navbar_menu-list { flex-direction: column; align-items: stretch; gap: 0; }
  .navbar_item { border-bottom: 1px solid var(--line); }
  .navbar_link { padding: .85rem 0; }
  .navbar_dropdown-list {
    position: static; opacity: 1; visibility: visible; transform: none; display: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .5rem .9rem;
  }
  .navbar_item.is-open > .navbar_dropdown-list { display: block; }
  .navbar_item.has-dropdown > .navbar_link::after { float: right; transform: rotate(90deg); }
}

/* --- hero_ --------------------------------------------------------------- */
.hero_component.is-overlay { position: relative; }
/* Taller than the parent site's hero, and cropped from the upper third: the
   photographs here are group shots and portraits, and a centred crop of a
   standing line-up removes the faces. */
.hero_image { width: 100%; height: clamp(300px, 40vw, 520px); object-fit: cover; object-position: center 22%; }
.hero_overlay {
  position: absolute; inset: auto 0 0 0; padding-block: clamp(1.75rem, 4vw, 3rem);
  /* several header photos are pale interiors, so the scrim has to hold white
     text at AA over the lightest of them */
  background: linear-gradient(to top, rgba(30,30,32,.92) 0%, rgba(30,30,32,.72) 45%, rgba(30,30,32,0) 100%);
}
.hero_overlay :is(h1, .text-style-eyebrow) { color: var(--white); }
.hero_overlay h1 { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero_component.is-plain { background: var(--paper); border-bottom: 1px solid var(--line); }
.hero_media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius-large); }

/* --- breadcrumb_ --------------------------------------------------------- */
.breadcrumb_component { font-size: .82rem; color: var(--muted); padding-block: 1rem; }
.breadcrumb_component a { color: var(--muted); text-decoration: none; }
.breadcrumb_component a:hover { color: var(--accent-dark); }
.breadcrumb_item + .breadcrumb_item::before { content: "/"; margin: 0 .5rem; opacity: .55; }

/* --- section-heading_ ---------------------------------------------------- */
.section-heading_component { max-width: 58ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-heading_component.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading_component > * + * { margin-top: .75rem; }

/* --- card_ (the surface every card variant builds on) -------------------- */
.card_component {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.65rem; height: 100%;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card_component > * + * { margin-top: .75rem; }
.card_component.is-link { text-decoration: none; color: inherit; display: block; }
a.card_component:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.card_meta { font-size: .82rem; color: var(--muted); }
/* Cards keep the ink palette even inside an inverted section. */
.background-color-ink .card_component,
.background-color-slate .card_component,
.background-color-tan .card_component { color: var(--body); }
.background-color-ink .card_component :is(h1,h2,h3,h4,h5,h6),
.background-color-slate .card_component :is(h1,h2,h3,h4,h5,h6),
.background-color-tan .card_component :is(h1,h2,h3,h4,h5,h6) { color: var(--ink); }

/* --- service-card_ ------------------------------------------------------- */
.service-card_icon { width: 54px; height: 54px; object-fit: contain; }

/* --- doctor-card_ -------------------------------------------------------- */
.doctor-card_component { text-align: center; text-decoration: none; color: inherit; display: block; }
.doctor-card_image { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.1rem; }
.doctor-card_name { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.doctor-card_role { font-size: .95rem; }

/* --- review-card_ -------------------------------------------------------- */
/* Reviews vary hugely in length, so they pack as columns rather than a grid: a
   grid row is as tall as its longest review and leaves the rest half empty. */
.review-list_component { columns: 3; column-gap: clamp(1.25rem, 3vw, 2rem); }
.review-card_component {
  break-inside: avoid; margin-bottom: clamp(1.25rem, 3vw, 2rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem;
}
.review-card_stars { color: #f5a623; letter-spacing: .12em; font-size: .95rem; margin-bottom: .75rem; }
.review-card_quote { margin-bottom: 1rem; font-size: 1.02rem; color: var(--body); }
.review-card_author { font-family: var(--font-display); font-style: normal; font-weight: 600; color: var(--ink); font-size: .95rem; }
@media (max-width: 960px) { .review-list_component { columns: 2; } }
@media (max-width: 620px) { .review-list_component { columns: 1; } }

/* --- offer-card_ --------------------------------------------------------- */
.offer-card_component {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; height: 100%; display: flex; flex-direction: column;
}
.offer-card_price {
  font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700; color: var(--accent-dark); line-height: 1; margin-bottom: .5rem;
  letter-spacing: -.03em;
}
.offer-card_title { font-size: 1.15rem; margin-bottom: .75rem; }
.offer-card_body { font-size: .97rem; }
.offer-card_body > * + * { margin-top: .75rem; }

/* --- step-card_ ---------------------------------------------------------- */
.step-list_component { counter-reset: step; }
.step-card_component::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--white); font-family: var(--font-display);
  font-weight: 700; margin-bottom: 1rem;
}

/* --- faq_ ---------------------------------------------------------------- */
/* <details>/<summary>, so it works with JavaScript disabled. */
.faq_item { border-bottom: 1px solid var(--line); }
.faq_item:first-of-type { border-top: 1px solid var(--line); }
.faq_question {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.05rem;
}
.faq_question::-webkit-details-marker { display: none; }
.faq_question::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--accent); line-height: 1;
}
.faq_item[open] .faq_question::after { content: "\2013"; }
.faq_answer { padding-bottom: 1.25rem; }
.faq_answer > * + * { margin-top: 1em; }

/* --- notice_ ------------------------------------------------------------- */
.notice_component {
  border-left: 3px solid var(--accent); background: var(--paper);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem;
}
.notice_component > * + * { margin-top: .75em; }

/* --- embed_ -------------------------------------------------------------- */
.embed_component { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.embed_component iframe { display: block; width: 100%; height: clamp(300px, 42vw, 460px); border: 0; }
.embed_component.is-form iframe { height: clamp(640px, 80vw, 760px); }

/* --- article_ / sidebar_ ------------------------------------------------- */
.article_layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
.article_layout > * { min-width: 0; }
@media (min-width: 1000px) { .article_layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.sidebar_component {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem; position: sticky; top: 6.5rem;
}
.sidebar_component > * + * { margin-top: 1rem; }
.sidebar_list { font-size: .95rem; }
.sidebar_list li + li { margin-top: .55rem; }
.sidebar_list a { text-decoration: none; color: var(--body); }
.sidebar_list a:hover { color: var(--accent-dark); }

/* --- link-list_ ---------------------------------------------------------- */
.link-list_component { columns: 2; column-gap: 2.5rem; }
.link-list_item { margin-bottom: .55rem; break-inside: avoid; }
/* These were body-coloured with no underline, which left a list of links looking
   exactly like a list of sentences until you hovered one — the only signal that
   they were clickable was a mouse, which is no signal at all on a phone. */
.link-list_component a { text-decoration: none; color: var(--accent-dark); }
.link-list_component a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) { .link-list_component { columns: 1; } }

/* --- hours_ -------------------------------------------------------------- */
.hours_list { font-size: inherit; }
.hours_row { display: flex; justify-content: space-between; gap: 1rem; }
.hours_row + .hours_row { margin-top: .35rem; }

/* --- badge-strip_ -------------------------------------------------------- */
.badge-strip_component { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.badge-strip_item { flex: 1 1 170px; display: grid; place-items: center; padding: 2rem 1.25rem; border-right: 1px solid rgba(255,255,255,.22); }
.badge-strip_item:last-child { border-right: 0; }
.badge-strip_logo { max-height: 62px; width: auto; filter: brightness(0) invert(1); opacity: .95; }

/* --- info-band_ ---------------------------------------------------------- */
.info-band_component { text-align: center; }
.info-band_title { font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .75rem; }
.info-band_component p + p { margin-top: .3rem; }

/* --- footer_ ------------------------------------------------------------- */
.footer_component { background: var(--ink); color: #a9aeb4; font-size: .95rem; }
.footer_grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.footer_heading { color: var(--white); font-size: 1.05rem; margin-bottom: 1.1rem; }
.footer_list li + li { margin-top: .6rem; }
.footer_component a { color: #a9aeb4; text-decoration: none; }
.footer_component a:hover { color: var(--accent); }
.footer_logo { width: 165px; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 1.25rem; }
.footer_legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.5rem; font-size: .85rem; color: #82878d; }

/* --- callbar_ (mobile only) ---------------------------------------------- */
.callbar_component {
  position: fixed; inset: auto 0 0 0; z-index: 70; display: none;
  background: var(--accent); color: var(--white); text-align: center; padding: .9rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; font-size: .85rem;
}
@media (max-width: 640px) {
  .callbar_component { display: block; }
  body { padding-bottom: 3.25rem; }
}

/* --- service-card_ / service-grid_ ---------------------------------------- */
/* Replaces the icon strip the live pages hotlinked from the parent practice's
   server. The glyph is inline SVG, so it inherits the accent and costs no
   request. */
.service-grid_component {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.service-card_component {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.15rem 1.25rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.service-card_component:hover {
  border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink);
}
.service-card_glyph { width: 30px; height: 30px; flex: 0 0 auto; color: var(--accent); }
.service-card_component:hover .service-card_glyph { color: var(--sun); }
.service-card_go { margin-left: auto; color: var(--muted); transition: transform .2s, color .2s; }
.service-card_component:hover .service-card_go { color: var(--accent); transform: translateX(3px); }

/* --- service-group_ ------------------------------------------------------- */
.service-group_grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.service-group_component {
  padding: 1.6rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-large);
}
.service-group_head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem; }
.service-group_head .service-card_glyph { width: 34px; height: 34px; margin-top: .15rem; }
.service-group_link { color: inherit; text-decoration: none; }
.service-group_link:hover { color: var(--accent-dark); }
.service-group_list { border-top: 1px solid var(--line); padding-top: .9rem; }
.service-group_list li + li { margin-top: .1rem; }
.service-group_list a {
  display: block; padding: .45rem .65rem; margin-inline: -.65rem;
  border-radius: 8px; text-decoration: none; color: var(--body);
}
.service-group_list a:hover { background: var(--paper); color: var(--accent-dark); }

/* --- team-card_ ----------------------------------------------------------- */
.team-grid_component {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.team-card_component { margin: 0; text-align: center; }
.team-card_image {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-large); margin-bottom: .85rem;
}
.team-card_name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.team-card_role { font-size: .82rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem; }

/* --- stat_ ---------------------------------------------------------------- */
.stat-list_component { display: grid; gap: .9rem; }
.stat_component {
  padding: 1.1rem 1.25rem; background: var(--white);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}
.stat_value { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.2rem; }
.stat_label { font-size: .88rem; line-height: 1.5; margin-top: .2rem; }

/* --- odds and ends -------------------------------------------------------- */
/* A portrait shot beside four lines of copy makes a column twice the height of
   its neighbour and a band of empty white beside the text. Cap it and crop. */
.media_rounded { border-radius: var(--radius-large); width: 100%; max-height: 470px; object-fit: cover; }
.button-group.is-centered { justify-content: center; }
/* A dropdown parent that leads nowhere: labelled, not a link into a 404. */
.navbar_link.is-static { cursor: default; color: var(--ink); }
.navbar_link.is-static:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* src/styles/mason-park-kids-core.css */
/* Fluid root font-size — webzite-house-v1. Generated by scripts/fluid-root.mjs; do not hand-edit. */
:root {
  --font-from: 18;
  --font-to: 20;
  --vw-from: calc(1920 / 100);
  --vw-to: calc(2400 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
}

html {
  font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw);
}

@media screen and (max-width: 1920px) {
  :root {
    --font-from: 16;
    --font-to: 18;
    --vw-from: calc(1440 / 100);
    --vw-to: calc(1920 / 100);
  }
}

@media screen and (max-width: 1440px) {
  :root {
    --font-from: 16;
    --font-to: 16;
    --vw-from: calc(479 / 100);
    --vw-to: calc(1440 / 100);
  }
}

@media screen and (max-width: 479px) {
  :root {
    --font-from: 12;
    --font-to: 16;
    --vw-from: calc(320 / 100);
    --vw-to: calc(479 / 100);
  }
}

/* ============================================================================
   Mason Park Dental for Kids — the core pages' stylesheet  (2026-09-02)

   THIS IS THE PEDIATRIC BRAND'S OWN SYSTEM, built on the parent practice's
   PROCESS and none of its look. The parent site (bk-mason-park, workflow 09)
   is a copper-and-newsprint editorial journey for adults. This practice is the
   children's brand in the same building, and its identity is its own logo:
   slate "MASON PARK", sage "DENTAL", a hand-written "for kids". So:

     - the palette is sampled from the logo (slate #505860, sage #a0b0a8), with
       one warm accent added for a children's practice (sun) and one cool tint
       (sky) taken from the mural walls in the staff portraits. Nothing cyan:
       the old WordPress theme's #1bc1ff was the theme's colour, not the brand's.
     - the display face is Fraunces, a soft optical-size serif, and the body
       face is Nunito, rounded. Both are Google faces Instatic can self-host.
     - corners are round, buttons are pills, panels are stickers. The parent's
       hairlines and 2px radii would read as a grown-up's site with the words
       swapped.

   WHAT IS KEPT FROM THE PARENT, because it is process and not taste:
     - the fluid root above, as the FIRST rule, and no px or clamp() font-sizes
     - Client-First naming: hyphenated utilities, underscore components
     - the chapter architecture (`section[data-chapter]`, the `.ch` shell, the
       chapter tag, `data-theme` atmosphere shifts) from DESIGN-STANDARD.md
     - the journey runtime's contract: `has-journey` on the body, the measured
       `--jr-nav-h`, `data-anim="hide"`, the generic hooks
     - the mechanical lessons: `.ch .wrap` in longhand, `.ch [data-write]` at
       (0,2,0), the hamburger drawn in CSS because Instatic's button takes no
       children, the drawer hidden with `visibility`, one stack breakpoint

   THE CHROME CLASSES ARE DELIBERATELY NOT THE OLD SITE'S. The 43 migrated
   pages on Instatic keep their own `navbar_*` / `footer_*` stylesheet as a
   second code asset. This sheet uses `masthead_*`, `topline_*`, `foot_*` and
   `ring_*` so the two sheets can share one site without a single collision.

   INSTATIC: ships as one site-wide code asset. Pages carry classes only.
   ========================================================================= */

/* --------------------------------------------------- the variable faces ----
   THE PUBLISHED SITE WAS SETTING EVERY HEADING IN THE WRONG CUT OF FRAUNCES,
   and this block is the fix. Added 2026-09-08.

   Instatic's font installer (`/admin/api/cms/fonts/install`) asks Google for a
   list of static WEIGHTS, so what it installed was five static instances.
   `font-variation-settings: "SOFT" 100, "opsz" 144` is on every display face
   below and a static instance ignores it in silence. Measured by
   `.tmp/font-axes.mjs` on the same string at the same size:

       local   opsz 9 -> 1665px,  opsz 144 -> 1340px   the axes move it
       live    opsz 9 -> 1657px,  opsz 144 -> 1657px   the axes do nothing

   So live was rendering the TEXT cut at display size: every heading 10-20%
   wider than designed, wrong contrast, no softness, no wonk - on all
   fifty-seven pages. `diff-live.mjs` had been reporting it as a geometry
   difference for a week.

   ONE SOURCE PER FACE, RELATIVE, and `import-styles.mjs` rewrites it to the
   Instatic upload path on the way in, from `.tmp/font-map.json`. The first
   attempt listed BOTH - the upload path first, the relative one behind it -
   which does work, because the font loading algorithm walks the list. It also
   put three `net::ERR_FILE_NOT_FOUND` in the console of every page opened from
   `file://`, on every run of `shot.mjs`, for ever. A gate that always reports
   three harmless errors is a gate nobody reads, so the rewrite happens once,
   at import, and each copy of this sheet names only the path that exists
   where it lives.

   The family is "Fraunces VF", never "Fraunces": the five static instances are
   still installed and registered on the shell, and two `@font-face` sets
   claiming one family name would be decided by asset order - exactly the trap
   `reorder-styles.mjs` exists for. A distinct name in front of the stack
   cannot collide, and if an upload ever goes missing the stack falls back to
   the static Fraunces, which is only what live had before.

   Paths come from `.tmp/font-map.json`. Re-uploading changes them; edit here.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces VF";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/uploads/Ne7TS3GTxt8FDn2XYl8Lw-fraunces-vf.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces VF";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/uploads/nnEy5ljIN-SXIIFqfPwWT-fraunces-vf-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito VF";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/uploads/F9Le8ew7ZzqMcFoFdUUmb-nunito-vf.woff2") format("woff2");
}

/* ---------------------------------------------------------------- variables */
:root {
  /* The four type tiers. --t-ui is the label tier, floored at 12px; --t-text
     is body copy; --t-head and --t-sub carry the two heading sizes the chrome
     and the plain pages use. All 1 from 479 to 1440, where the root is flat. */
  --t-ui: 1;
  --t-text: 1;
  --t-head: 1;
  --t-sub: 1;

  /* From the logo. */
  --slate: #505860;
  --sage: #a3b5aa;
  /* Derived from it. */
  --ink: #2f3940;          /* headings, the darkest text */
  --ink-deep: #242c32;     /* the ground of a dark chapter */
  --ink-mid: #2e373e;      /* a raised panel on that ground */
  --body: #56616a;         /* running copy */
  --muted: #8a949b;        /* captions, timestamps */
  --sage-deep: #587a68;    /* the sage taken dark enough to carry text on white (4.7:1) */
  --sage-tint: #edf2ee;    /* a light sage ground */
  --sage-line: #d3ddd6;    /* rules and card edges */
  /* Added for a children's practice. Never text on a light ground. */
  --sun: #f6c04b;
  --sun-deep: #9a6a0a;     /* sun taken dark enough for a glyph (5.6:1 on white) */
  --sun-tint: #fff3d6;
  --sky: #d7e6ee;
  --sky-deep: #3f6f88;
  --cream: #fbf8f2;        /* the warm ground */
  --white: #ffffff;

  --font-display: "Fraunces VF", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito VF", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Nunito VF", "Nunito", "Segoe UI", system-ui, sans-serif;

  --radius: 1.5rem;
  --radius-sm: .9rem;
  --pill: 999px;
  --shadow: 0 24px 60px -36px rgba(47, 57, 64, .45);
  --shadow-sm: 0 10px 30px -18px rgba(47, 57, 64, .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* The confetti. Drawn, not downloaded: a few soft dots in an inline SVG,
     tiled at low opacity over the warm and dark grounds. Under 400 bytes,
     resolution independent, cannot 404. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23000'%3E%3Ccircle cx='14' cy='22' r='2.2'/%3E%3Ccircle cx='72' cy='10' r='1.6'/%3E%3Ccircle cx='104' cy='48' r='2.4'/%3E%3Ccircle cx='40' cy='70' r='1.4'/%3E%3Ccircle cx='86' cy='96' r='2'/%3E%3Ccircle cx='22' cy='108' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 1279px) { :root { --t-head: .95; } }
@media (max-width: 991px)  { :root { --t-head: .86; --t-sub: .96; } }
@media (max-width: 767px)  { :root { --t-head: .76; --t-sub: .93; } }
@media (max-width: 478px)  { :root { --t-ui: 1.24; --t-text: 1.193; } }

/* ------------------------------------------------------- document defaults */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font: 400 calc(1.0625rem * var(--t-text))/1.7 var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: "SOFT" 60, "WONK" 0;
}
p { margin: 0; }
/* The UA gives <figure> `margin: 1em 40px`, and this reset never took it away.
   Eight components had each quietly worked around it with their own
   `margin: 0`; the two that had not - `.pe-plate` and `.pr-portrait` on the
   home page - sat 80px narrower than the grid track they were given. Found by
   `diff-live.mjs` on 2026-09-09, which reported them 434px against 514px live:
   the PUBLISHED pages were right, because Instatic's own base stylesheet zeroes
   it, and the local file was the one rendering the design wrong. Reset it here,
   once, where the rest of the reset lives. */
figure { margin: 0; }
blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--sage-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
button { font: inherit; }
::selection { background: var(--sun-tint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.visually-hidden:focus {
  position: fixed; top: 1rem; left: 1rem; width: auto; height: auto; margin: 0;
  padding: .75rem 1.25rem; clip: auto; background: var(--ink); color: #fff; z-index: 2000;
  border-radius: var(--pill); text-decoration: none;
}

/* ===========================================================================
   1. STYLE GUIDE
   ======================================================================== */

/* --- buttons ------------------------------------------------------------ */
/* A pill, because every corner on this site is round. The fill slides up on
   hover so the hover has a direction; the ghost variants keep the slide. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border: 2px solid var(--sage-deep);
  border-radius: var(--pill);
  background: var(--sage-deep);
  color: #fff;
  font-family: var(--font-ui);
  font-size: calc(.86rem * var(--t-text));
  font-weight: 800;
  letter-spacing: .04em;
  /* Stated, not inherited: the migration's stylesheet shares this site and
     sets `.button` uppercase. Every property the two sheets both touch is
     stated here so the button reads the same whichever sheet the bundler
     puts last. */
  text-transform: none;
  text-decoration: none;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* The button is its own stacking context so the sliding fill below can sit
     at z-index -1: above the button's own background, BELOW its text. Until
     2026-09-09 (evening) the fill was at z-index 0 and the label was a bare
     text node, so on hover the ink slid up and covered the words on every
     button on the site. `.button > *` lifted CHILDREN above the fill, but
     these buttons have none; the text is the anchor's own. */
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
  z-index: -1;
}
.button > * { position: relative; z-index: 1; }
.button:hover { color: #fff; border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.button:hover::after { transform: translateY(0); }
.button.is-lg { padding: 1.15rem 2.2rem; font-size: calc(.92rem * var(--t-text)); }
.button.is-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.button.is-sun:hover { color: #fff; }
.button.is-ghost { background: transparent; color: var(--sage-deep); }
.button.is-ghost:hover { color: #fff; }
.button.is-ghost-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.button.is-ghost-light::after { background: #fff; }
.button.is-ghost-light:hover { color: var(--ink); border-color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-ui);
  font-size: calc(.8rem * var(--t-ui));
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--sage-line);
  transition: gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover { gap: 1rem; border-color: var(--sage-deep); color: var(--sage-deep); }
.link-arrow.is-light { color: #fff; border-color: rgba(255, 255, 255, .35); }
.link-arrow.is-light:hover { border-color: #fff; color: #fff; }

/* The eyebrow label, used above headings everywhere. */
.kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: calc(.78rem * var(--t-ui));
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* ===========================================================================
   2. THE CHROME
   ======================================================================== */

/* --- the top line --------------------------------------------------------- */
.topline_component {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem 1.5rem;
  padding: .5rem clamp(1.25rem, 4.6vw, 5.5rem);
  background: var(--ink-deep); color: rgba(255, 255, 255, .8);
  font-family: var(--font-ui); font-weight: 700; font-size: calc(.76rem * var(--t-ui));
  letter-spacing: .08em; text-transform: uppercase;
}
.topline_component a { color: #fff; text-decoration: none; }
.topline_component a:hover { text-decoration: underline; }
.topline_note { color: rgba(255, 255, 255, .6); }

/* --- the masthead ---------------------------------------------------------- */
.masthead_component {
  position: sticky; top: 0; z-index: 90;
  background: var(--white); border-bottom: 1px solid var(--sage-line);
}
.masthead_inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 6rem;
  max-width: 97.5rem; margin-left: auto; margin-right: auto;
  padding-left: clamp(1.25rem, 4.6vw, 5.5rem); padding-right: clamp(1.25rem, 4.6vw, 5.5rem);
}
.masthead_logo-link { display: inline-flex; flex: 0 0 auto; }
.masthead_logo { width: clamp(10rem, 13vw, 13.5rem); height: auto; }

.masthead_menu { flex: 1 1 auto; display: flex; justify-content: center; }
.masthead_list { display: flex; align-items: center; gap: clamp(.25rem, 1.2vw, 1rem); }
.masthead_item { position: relative; }
.masthead_link {
  display: inline-block; padding: .55rem .8rem;
  font-family: var(--font-ui); font-weight: 800; font-size: calc(.82rem * var(--t-ui));
  letter-spacing: .06em; text-decoration: none; color: var(--ink);
  border-radius: var(--pill);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.masthead_link:hover,
.masthead_link[aria-current="page"] { color: var(--sage-deep); background: var(--sage-tint); }

.masthead_sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(.5rem);
  min-width: 16rem; padding: .7rem;
  background: var(--white); border: 1px solid var(--sage-line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.masthead_item.has-sub:hover > .masthead_sub,
.masthead_item.has-sub:focus-within > .masthead_sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.masthead_sub .masthead_item { position: relative; }
.masthead_sub .masthead_link {
  display: block; padding: .5rem .9rem; letter-spacing: 0; text-transform: none;
  font-weight: 700; font-size: calc(.92rem * var(--t-text)); color: var(--body);
  border-radius: var(--radius-sm);
}
.masthead_sub .masthead_link:hover { color: var(--sage-deep); background: var(--sage-tint); }

.masthead_actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.masthead_phone {
  font-family: var(--font-ui); font-weight: 800; font-size: calc(.86rem * var(--t-ui)); letter-spacing: .02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.masthead_phone:hover { color: var(--sage-deep); }
.masthead_actions .button { padding: .8rem 1.4rem; }

/* The hamburger is drawn in three background stripes because the button
   itself cannot hold a child: Instatic's `base.button` module takes a text
   label and no children, so an inline svg inside it is dropped at import and
   the live button comes out empty. Painting it on the element's own background
   renders identically locally and on Instatic. */
.masthead_toggle {
  display: none; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  background: transparent; border: 2px solid var(--sage-line); border-radius: var(--pill);
  color: var(--ink); cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor);
  background-size: 1.25rem 2px;
  background-repeat: no-repeat;
  background-position: center calc(50% - .4rem), center 50%, center calc(50% + .4rem);
}
.masthead_scrim {
  position: fixed; inset: 0; z-index: 80; padding: 0; border: 0;
  background: rgba(36, 44, 50, .5); opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.nav-open .masthead_scrim { opacity: 1; visibility: visible; }

/* --- the footer ------------------------------------------------------------ */
.foot_component {
  background: var(--ink-deep); color: rgba(255, 255, 255, .74);
  position: relative; overflow: clip;
}
.foot_component::before {
  content: ""; position: absolute; inset: 0; background-image: var(--dots);
  background-size: 120px 120px; opacity: .08; filter: invert(1); pointer-events: none;
}
.foot_inner {
  position: relative;
  max-width: 97.5rem; margin-left: auto; margin-right: auto;
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 4.6vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}
.foot_grid {
  display: grid; gap: clamp(1.75rem, 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
}
.foot_logo { width: 12rem; margin-bottom: 1.25rem; filter: brightness(0) invert(1); opacity: .92; }
.foot_blurb { color: rgba(255, 255, 255, .6); max-width: 32ch; font-size: calc(.95rem * var(--t-text)); margin-bottom: 1.25rem; }
.foot_heading {
  font-family: var(--font-ui); font-weight: 800; font-size: calc(.76rem * var(--t-ui)); letter-spacing: .18em;
  text-transform: uppercase; color: var(--sun); margin-bottom: 1.1rem;
}
.foot_list { display: flex; flex-direction: column; gap: .55rem; }
.foot_list a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: calc(.96rem * var(--t-text)); }
.foot_list a:hover { color: #fff; }
.foot_hours { display: flex; flex-direction: column; }
.foot_hours li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: calc(.92rem * var(--t-text));
  color: rgba(255, 255, 255, .62);
}
.foot_hours strong { color: #fff; font-weight: 700; }
.foot_legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-ui); font-weight: 700; font-size: calc(.76rem * var(--t-ui));
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.foot_legal a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.foot_legal a:hover { color: #fff; }

/* --- the ring, a sticky call bar on phones only --------------------------- */
.ring_component {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none;
  padding: 1rem; text-align: center; text-decoration: none;
  background: var(--sage-deep); color: #fff;
  font-family: var(--font-ui); font-weight: 800; font-size: calc(.82rem * var(--t-ui));
  letter-spacing: .1em; text-transform: uppercase;
}

/* --- the drawer ------------------------------------------------------------ */
@media (max-width: 1150px) {
  .masthead_menu {
    position: fixed; inset: 0 0 0 auto; z-index: 85; width: min(24rem, 86vw);
    display: block; padding: 6.5rem 1.75rem 2.5rem; overflow-y: auto;
    background: var(--white); border-left: 1px solid var(--sage-line);
    /* `visibility`, not only `transform`: a drawer pushed off screen with a
       transform is still in the accessibility tree and still focusable. */
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
  }
  .nav-open .masthead_menu { transform: translateX(0); visibility: visible; }
  .masthead_list { flex-direction: column; align-items: stretch; gap: 0; }
  .masthead_item { border-bottom: 1px solid var(--sage-line); }
  .masthead_link { display: block; padding: .95rem .25rem; border-radius: 0; }
  .masthead_link:hover, .masthead_link[aria-current="page"] { background: transparent; }
  .masthead_sub {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; padding: 0 0 .75rem .9rem; border: 0; box-shadow: none; border-radius: 0;
    display: none;
  }
  .masthead_item.is-open > .masthead_sub { display: block; }
  .masthead_item.has-sub:hover > .masthead_sub { display: none; }
  .masthead_item.has-sub.is-open:hover > .masthead_sub { display: block; }
  .masthead_sub .masthead_item { border-bottom: 0; }
  .masthead_sub .masthead_link { padding: .5rem .25rem; }
  /* One z-index above the drawer, or the drawer traps its own close button:
     both are in the header's stacking context and a fixed element paints above
     a static one whatever the DOM order. */
  .masthead_toggle { display: inline-flex; position: relative; z-index: 86; }
  .masthead_phone { display: none; }
  .masthead_inner { min-height: 5.25rem; }
}
@media (max-width: 767px) {
  body { font-size: calc(1rem * var(--t-text)); }
  .foot_grid { grid-template-columns: minmax(0, 1fr); }
  .topline_component { justify-content: center; text-align: center; }
  .topline_note { display: none; }
  .ring_component { display: block; }
  .foot_component { padding-bottom: 3.5rem; }
  .masthead_actions .button { display: none; }
}
@media (min-width: 768px) and (max-width: 999px) {
  .foot_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .masthead_component, .topline_component, .ring_component, .foot_component { display: none; }
}

/* ===========================================================================
   3. THE JOURNEY LAYER
   Chapters, not bands. Every section is a named scene with a job; scroll
   drives at least three of them on every page. See DESIGN-STANDARD.md.
   ======================================================================== */

/* ---------------------------------------------------------------- theme */
:root {
  --bg: var(--white);
  --bg-2: var(--cream);
  --panel: var(--white);
  --fg: var(--ink);
  --fg-body: var(--body);
  --fg-soft: var(--muted);
  --rule: var(--sage-line);
  --rule-strong: var(--sage);
  --accent: var(--sage-deep);
  --accent-lg: var(--sage);
  --pop: var(--sun);

  /* The display tiers, Dr. Nahlah's proportions on the house fluid root,
     softened one step for a children's practice. Plain rem times a unitless
     multiplier stepped at px breakpoints; never clamp() on a font-size. */
  --t-disp: 1; --t-lg: 1; --t-mid: 1; --t-sm: 1;

  --f-d1: calc(6.2rem * var(--t-disp));    /* the arrival headline */
  --f-d2: calc(4.3rem * var(--t-disp));    /* chapter headlines */
  --f-d3: calc(3rem * var(--t-lg));        /* the written statement, the quote */
  --f-h3: calc(1.7rem * var(--t-mid));     /* card headings */
  --f-h4: calc(1.25rem * var(--t-sm));
  --f-lede: calc(1.15rem * var(--t-text));
  --f-body: calc(1rem * var(--t-text));
  --f-label: calc(.78rem * var(--t-ui));   /* Nunito 800 uppercase, floored at 12px */

  --maxw: 97.5rem;
  --ch-pad: 8.5rem;
  --bleed: 4.5rem;
}
@media (max-width: 1279px) { :root { --t-disp: .82; --t-lg: .82; --t-mid: .82; --t-sm: .84; --ch-pad: 7rem; --bleed: 3.5rem } }
@media (max-width: 991px)  { :root { --t-disp: .69; --t-lg: .68; --t-mid: .76; --t-sm: .82; --ch-pad: 6rem; --bleed: 2.5rem } }
@media (max-width: 767px)  { :root { --t-disp: .55; --t-lg: .6; --ch-pad: 5rem; --bleed: 1.5rem } }
@media (max-width: 478px)  { :root { --t-lg: .69; --t-mid: .87; --t-sm: .95; --ch-pad: 4.25rem } }

.ch[data-theme="dark"] {
  --bg: var(--ink-deep); --bg-2: var(--ink-mid); --panel: var(--ink-mid);
  --fg: #ffffff;
  --fg-body: rgba(255, 255, 255, .78);
  --fg-soft: rgba(255, 255, 255, .56);
  --rule: rgba(255, 255, 255, .14);
  --rule-strong: rgba(255, 255, 255, .3);
  --accent: #b9cdc0;        /* the sage, taken light enough to clear AA on ink */
  --accent-lg: var(--sage);
  background: var(--bg);
  color: var(--fg-body);
}
.ch[data-theme="warm"] { --bg: var(--cream); --bg-2: var(--white); --panel: var(--white); background: var(--bg); }
.ch[data-theme="sage"] { --bg: var(--sage-tint); --bg-2: var(--white); --panel: var(--white); --rule: #c9d6cd; background: var(--bg); }
.ch[data-theme="sun"]  { --bg: var(--sun-tint); --bg-2: var(--white); --panel: var(--white); --rule: #ecd9a8; --rule-strong: #d9b76a; --accent: var(--sun-deep); background: var(--bg); }

/* ------------------------------------------------------------- chapter shell */
.ch {
  position: relative;
  background: var(--bg);
  color: var(--fg-body);
  padding: var(--ch-pad) 0;
  overflow: clip;
}
/* Longhand only. The shorthand `margin: 0 auto` resets margin-block and ate
   every vertical gap on the parent's first pass. Same for padding. */
.ch .wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}
.ch h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--f-d2);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--fg);
  max-width: 16ch;
  font-variation-settings: "SOFT" 80, "opsz" 144;
}
.ch h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--f-h3);
  line-height: 1.16;
  color: var(--fg);
}
.ch p { color: var(--fg-body); }
.ch em { font-style: italic; color: var(--accent); font-variation-settings: "SOFT" 100, "WONK" 1; }
.ch[data-theme="dark"] em { color: var(--sun); }

/* The warm and dark grounds carry the confetti. On a pseudo element so it
   never tints the content. */
.ch[data-theme="warm"]::before,
.ch[data-theme="sage"]::before,
.ch[data-theme="sun"]::before,
.ch[data-theme="dark"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--dots);
  background-size: 120px 120px;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.ch[data-theme="dark"]::before { opacity: .09; filter: invert(1); }
.ch > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------- chapter tag */
/* The continuity device: a sun dot and the beat's name. Named, never numbered. */
.chapter-tag {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.4rem;
  font-family: var(--font-ui);
  font-size: var(--f-label);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.chapter-tag i {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--pop);
  flex: none;
  transform-origin: center;
}
.chapter-tag b { font-weight: 800; color: var(--accent); }

/* The chapter head, shared: tag, headline, and an optional lede beside it. */
.ch-head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.ch-head .lede { margin-top: 1.1rem; max-width: 48ch; font-size: var(--f-lede); line-height: 1.7; color: var(--fg-body); }
@media (min-width: 900px) {
  .ch-head.is-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
  .ch-head.is-split .lede { margin-top: 0; }
}
.ch-foot { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.ch-note {
  font-size: calc(.88rem * var(--t-text));
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 62ch;
  padding-left: 1rem;
  border-left: 3px solid var(--rule-strong);
  border-radius: 2px;
}

/* ------------------------------------------------------- the generic hooks */
/* journey.js binds these by ATTRIBUTE. Each has three states the CSS alone
   has to leave readable: unwritten, written, and failed (no GSAP or reduced
   motion). `.ch [data-write]` is (0,2,0) on purpose so `.ch p` cannot beat
   the unwritten colour. */
.ch { --jr-unwritten: rgba(47, 57, 64, .18); }
.ch[data-theme="dark"] { --jr-unwritten: rgba(255, 255, 255, .22); }
.ch [data-write] { color: var(--jr-unwritten); }
html.jr-fail .ch [data-write],
html:not(.jr-ready) .ch [data-write] { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .ch [data-write] { color: var(--fg) !important; } }
[data-wipe] { overflow: hidden; }

/* --- masked line reveals, and why the titles used to crop ------------------
   GSAP SplitText is asked for `{ type: "lines", mask: "lines" }`, and a masked
   line is an extra div, `overflow: clip`, sized to the LINE BOX. Every display
   size on this site runs a line-height at or below 1 (the h1 is .98), and
   Fraunces' ink overshoots its line box at BOTH edges at those sizes. The mask
   therefore cut the tops of the caps and every descender - measured 2026-09-08
   by `.tmp/crop-probe.mjs` as 131 headings across the eleven pages, up to 13px
   above and 11.8px below on the h1.

   The fix does NOT resize anything. Two earlier attempts did, and both were
   wrong for the same reason:
     - padding on the mask alone leaves the reveal's start state visible: the
       travel is a yPercent of the LINE's height, so a taller mask is no longer
       cleared and the tops of the glyphs peek above the edge;
     - padding on the line plus a negative margin on the mask needs the split
       element to stop margins collapsing, and the only display that does that
       without side effects is a flex column - which SplitText then re-measures
       when the webfonts land (it re-splits on `document.fonts.ready`) and
       every WORD becomes its own line. The h1 came back 875px tall.
   So the box is left exactly as it is and the CLIP is moved instead:
     1. `clip-path` with a negative vertical inset bleeds the mask past its own
        edges by more than the ink overshoots (0.18em against a measured
        0.131em at the worst heading), and `overflow` is neutralised so the
        clip-path is the only thing cutting. Horizontal stays at 0 - the mask's
        job there is unchanged;
     2. the bleed at the BOTTOM is the edge the line rises from, so the reveal
        now has to start further down to stay hidden behind it. journey.js
        travels 150% of a line instead of 112/108, which clears H + 0.18em of
        bleed + 0.131em of cap overshoot at every heading size on the site
        (the tightest, the h1 at line-height .98, needs 133%).
   Nothing here changes the layout, the split, or the line breaks, which is
   the point: it survives the re-split. */
.jr-line-mask {
  overflow: visible !important;
  clip-path: inset(-.18em 0);
}

/* The written statement. Display size, soft, the words arrive as you scroll. */
.statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--f-d3);
  line-height: 1.22;
  letter-spacing: -.012em;
  margin: 0;
  font-variation-settings: "SOFT" 100, "opsz" 72;
}

/* ===========================================================================
   READING PROGRESS AND THE READOUT
   ======================================================================== */
.jr-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--sun); transform: scaleX(0); transform-origin: left center;
  z-index: 1200; pointer-events: none;
}
.jr-readout {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1150;
  display: none; align-items: center; gap: .55rem;
  padding: .6rem 1rem;
  background: rgba(36, 44, 50, .9); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--font-ui); font-size: calc(.76rem * var(--t-text));
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--pill);
}
.jr-readout::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); }
@media (min-width: 900px) { .jr-readout.is-on { display: flex } }

/* ===========================================================================
   MOTION GUARDS
   ======================================================================== */
html.jr-ready [data-anim="hide"] { visibility: hidden; }
html.jr-fail [data-anim="hide"] { visibility: visible !important; }
@media (prefers-reduced-motion: reduce) {
  html [data-anim="hide"] { visibility: visible !important; }
  .ar-cue i { animation: none; }
  .pa-shot img { filter: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ===========================================================================
   THE CHROME OVER A FULL BLEED HERO
   Scoped to `.has-journey`. The masthead floats over the arrival chapter,
   inverted to white, and resolves to solid once the hero is behind you.
   `--jr-nav-h` is measured by journey.js, never assumed.
   ======================================================================== */
html.jr-ready .has-journey .main-wrapper { margin-top: calc(-1 * var(--jr-nav-h, 6rem)); }
.has-journey .topline_component { position: relative; z-index: 95; }
.has-journey .masthead_component {
  position: sticky; top: 0; z-index: 94;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.has-journey .masthead_component .masthead_logo { filter: brightness(0) invert(1); transition: filter .45s var(--ease); }
.has-journey .masthead_component .masthead_link,
.has-journey .masthead_component .masthead_phone { color: #fff; transition: color .45s var(--ease); }
.has-journey .masthead_component .masthead_link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.has-journey .masthead_component .masthead_toggle { color: #fff; border-color: rgba(255, 255, 255, .5); transition: color .45s var(--ease), border-color .45s var(--ease); }
.has-journey .masthead_component .masthead_actions .button { border-color: var(--sun); background: var(--sun); color: var(--ink); }
/* That rule outweighs `.button:hover`, so without this the masthead's Book
   stayed ink-on-ink while the fill slid up (2026-09-09, evening). */
.has-journey .masthead_component .masthead_actions .button:hover { color: #fff; border-color: var(--ink); }

.has-journey .masthead_component.is-solid,
html:not(.jr-ready) .has-journey .masthead_component { background: var(--white); border-bottom-color: var(--sage-line); }
.has-journey .masthead_component.is-solid .masthead_logo,
html:not(.jr-ready) .has-journey .masthead_component .masthead_logo { filter: none; }
.has-journey .masthead_component.is-solid .masthead_link,
html:not(.jr-ready) .has-journey .masthead_component .masthead_link { color: var(--ink); }
.has-journey .masthead_component.is-solid .masthead_link:hover,
html:not(.jr-ready) .has-journey .masthead_component .masthead_link:hover { color: var(--sage-deep); background: var(--sage-tint); }
.has-journey .masthead_component.is-solid .masthead_phone,
html:not(.jr-ready) .has-journey .masthead_component .masthead_phone { color: var(--ink); }
.has-journey .masthead_component.is-solid .masthead_toggle,
html:not(.jr-ready) .has-journey .masthead_component .masthead_toggle { color: var(--ink); border-color: var(--sage-line); }
.has-journey .masthead_component.is-solid .masthead_actions .button,
html:not(.jr-ready) .has-journey .masthead_component .masthead_actions .button { border-color: var(--sage-deep); background: var(--sage-deep); color: #fff; }

body.nav-open.has-journey .masthead_component { background: var(--white); border-bottom-color: var(--sage-line); }
body.nav-open.has-journey .masthead_component .masthead_logo { filter: none; }
body.nav-open.has-journey .masthead_component .masthead_link { color: var(--ink); }
body.nav-open.has-journey .masthead_component .masthead_toggle { color: var(--ink); border-color: var(--sage-line); }

/* The dropdown panel is an opaque white card in every state, so its links are
   restated LAST: over the hero the inversion above would paint them white on
   white. */
.has-journey .masthead_component .masthead_sub .masthead_link,
.has-journey .masthead_component.is-solid .masthead_sub .masthead_link,
html:not(.jr-ready) .has-journey .masthead_component .masthead_sub .masthead_link,
body.nav-open.has-journey .masthead_component .masthead_sub .masthead_link { color: var(--body); }
.has-journey .masthead_component .masthead_sub .masthead_link:hover,
.has-journey .masthead_component.is-solid .masthead_sub .masthead_link:hover,
html:not(.jr-ready) .has-journey .masthead_component .masthead_sub .masthead_link:hover,
body.nav-open.has-journey .masthead_component .masthead_sub .masthead_link:hover { color: var(--sage-deep); background: var(--sage-tint); }

/* ===========================================================================
   ARRIVAL
   Full bleed, the practice's own photograph, one sentence set very large,
   and three round stickers with the facts a parent asks first.
   ======================================================================== */
.ch-arrival {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--jr-nav-h, 6rem) + 1.5rem) 0 clamp(3rem, 7vh, 6rem);
  color: #fff;
}
.ch-arrival::before { display: none; }
.ar-bg { position: absolute; inset: -6% 0; z-index: 0; }
.ar-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* The homepage frame (`smile-flip`) has Dr. Nguyen's glasses at its very
   top edge. The default 30% cut her off at the eyes once the frame was
   mirrored to put her on the visible side (2026-09-09, evening), and so did
   the parallax: the box bleeds 6% above the viewport and the drift starts at
   scale 1.09 shifted up 4%, which together hide the top fifth of the frame.
   So this hero holds the top, sits flush, and carries no `data-drift`. What
   is still missing above her glasses is missing from the photograph. */
.ar-bg.is-top { inset: 0; }
.ar-bg.is-top img { object-position: 50% 0%; }
.ar-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(36, 44, 50, .74) 0%, rgba(36, 44, 50, .22) 34%, rgba(36, 44, 50, .5) 66%, rgba(36, 44, 50, .92) 100%),
    linear-gradient(94deg, rgba(36, 44, 50, .8) 0%, rgba(36, 44, 50, .42) 46%, rgba(36, 44, 50, .06) 82%);
}
.ar-in {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
  padding-left: var(--bleed); padding-right: var(--bleed);
}
.ar-in .chapter-tag { color: rgba(255, 255, 255, .75); }
.ar-in .chapter-tag b { color: #fff; }
.ar-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--f-d1);
  line-height: .98;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 1.5rem;
  max-width: 14ch;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.ar-title em { font-style: italic; color: var(--sun); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.ar-lede { max-width: 46ch; font-size: var(--f-lede); line-height: 1.62; color: rgba(255, 255, 255, .86); margin: 0 0 2.2rem; }
.ar-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 3rem; }
.ar-meta { display: flex; flex-wrap: wrap; gap: .9rem; }
/* Stickers, not a hairline strip. */
.ar-meta div {
  display: grid; gap: .1rem;
  padding: .9rem 1.3rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
}
.ar-meta b { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: #fff; }
.ar-meta span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.ar-cue {
  position: absolute; right: var(--bleed); bottom: clamp(3rem, 7vh, 6rem); z-index: 2;
  display: flex; align-items: center; gap: .8rem; margin: 0;
  font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.ar-cue i {
  width: 2px; height: 3.5rem; border-radius: 2px;
  background: linear-gradient(180deg, var(--sun), transparent);
  animation: cue 2.4s var(--ease) infinite; transform-origin: top center;
}
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* The compact arrival every inner page uses: two thirds height, and a veil
   dark enough for white chrome whatever the photograph is doing. */
.ch-arrival.is-compact { min-height: 68svh; }
.ch-arrival.is-compact .ar-veil {
  background:
    linear-gradient(180deg, rgba(36, 44, 50, .88) 0%, rgba(36, 44, 50, .66) 20%, rgba(36, 44, 50, .34) 44%, rgba(36, 44, 50, .6) 74%, rgba(36, 44, 50, .94) 100%),
    linear-gradient(94deg, rgba(36, 44, 50, .82) 0%, rgba(36, 44, 50, .45) 46%, rgba(36, 44, 50, .08) 82%);
}
.ch-arrival.is-compact .ar-title { font-size: calc(var(--f-d1) * .78); }
.ch-arrival.is-compact .ar-actions { margin-bottom: 0; }
/* A compact hero never carried the chip row until the blog (2026-09-09,
   evening), so its buttons had no space below them; the chips sat flush
   against the buttons on every article. When the row follows, space it. */
.ch-arrival.is-compact .ar-actions + .ar-meta { margin-top: 2.5rem; }

@media (max-width: 767px) {
  .ar-cue { display: none; }
  .ch-arrival { min-height: auto; padding-bottom: 5.5rem; }
  .ch-arrival.is-compact { min-height: auto; }
  .ar-lede { margin-bottom: 1.8rem; }
  .ar-actions { margin-bottom: 2rem; gap: .7rem; }
  .ar-actions .button { flex: 1 1 auto; padding-inline: 1.1rem; }
  .ar-meta div { padding: .7rem 1rem; }
}

/* ===========================================================================
   THE CHAPTER PHOTOGRAPH
   A shared scene, like the written statement and the rail, added 2026-09-08.

   WHY. Eight of the eleven pages carried a photograph in the arrival and one
   in the invitation and NOTHING in between: financing, services, reviews and
   thank-you had two pictures each, and the whole middle of those pages was
   type on a flat ground. The client asked for more imagery and they were
   right - the house standard is a photograph in every chapter.

   Three shapes, and the rule is the README's: the shared scenes may recur,
   the SEQUENCE may not. No two pages use the same mix in the same order, and
   each still keeps the two layouts that appear on no other page.
     .is-band    the chapter's own width, short and wide. The default.
     .is-plate   4:5, stands beside a head or a column.
     .is-inset   3:2, small, sits inside a column of text.
   `data-wipe` reveals it from the top edge, `data-drift` parallaxes the frame
   inside it; both are journey.js hooks that already existed, so nothing new
   has to run for these to move.

   `figcaption` is optional AND IS NOT FOR STOCK. A caption under a stock
   photograph is what turns it into a claim about this practice - see the
   policy in the header of .tmp/get-stock.mjs. Caption the practice's own
   frames; leave the bought ones to speak as decoration, which is what they
   are.
   ======================================================================== */
.ch-figure {
  margin: clamp(2.25rem, 4.5vw, 4rem) 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--rule);
}
.ch-figure img { display: block; width: 100%; object-fit: cover; }
.ch-figure.is-band img { aspect-ratio: 21 / 9; object-position: 50% 40%; }
.ch-figure.is-plate img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.ch-figure.is-inset img { aspect-ratio: 3 / 2; object-position: 50% 45%; }
/* A caption sits ON the frame, bottom left, on a soft scrim - the pages have
   no room for a line of type under every picture. */
.ch-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem .9rem;
  font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(36, 44, 50, .62), rgba(36, 44, 50, 0));
}
/* A plate or an inset dropped into a chapter's full width would be a band
   with the wrong aspect, so each keeps its own measure, and `is-right` puts it
   on the other side of the column so two chapters running never rhyme. */
.ch-figure.is-plate { max-width: 27rem; }
.ch-figure.is-inset { max-width: 34rem; }
.ch-figure.is-right { margin-left: auto; }
.ch-figure.is-centre { margin-left: auto; margin-right: auto; }
/* A band is a horizon; at phone widths a 21:9 horizon is a stripe. */
/* A portrait source cut to a band keeps its top, where the face is. */
.ch-figure.is-top img { object-position: 50% 18%; }
@media (max-width: 767px) {
  .ch-figure.is-band img { aspect-ratio: 16 / 10; }
  .ch-figure.is-plate img { aspect-ratio: 3 / 4; }
}
/* Beside a head rather than under it. The page decides the columns; this only
   says that when there are two, the picture keeps its own.

   2026-09-09 (evening): this is also the cure for a DANGLING plate. The
   2026-09-08 pass appended `.is-plate` and `.is-inset` figures as their own
   `.wrap` after the chapter body, which on a one-column body (the three
   promises, the price list) left the picture hanging alone at the foot of
   the chapter with nothing beside it. The client called those sections
   "unorganized". A plate belongs BESIDE a column: wrap body and figure in
   `.ch-withfig` and the plate takes the second column and holds its place
   while the column scrolls. Where the body already fills the width (a table,
   a card grid, two columns of Q and A) the picture is a `.is-band` under it
   instead, and where the chapter already carries photographs it has none. */
.ch-withfig {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.ch-withfig .ch-figure { margin-top: 0; }
.ch-withfig .ch-figure.is-plate { max-width: none; position: sticky; top: calc(var(--jr-nav-h, 5rem) + 1.5rem); }
@media (max-width: 899px) { .ch-withfig { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
   THE CREDENTIAL STRIP AND THE BREADCRUMB
   ======================================================================== */
.badges { background: var(--ink-deep); }
.badges-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
  padding: 1.75rem var(--bleed);
}
.badges-label { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0; }
.badges ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem); flex: 1; justify-content: space-between; }
.badges img { height: 2.5rem; width: auto; object-fit: contain; opacity: .9; }
@media (max-width: 767px) { .badges img { height: 1.9rem; } }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
  padding: 1.1rem var(--bleed);
  font-family: var(--font-ui); font-weight: 800; font-size: var(--f-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--sage-line);
}
.crumbs span + span::before { content: "/"; margin-right: .5rem; color: var(--sage); }
.crumbs a { color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--sage-deep); }

/* ===========================================================================
   THE PATH — pinned horizontal travel
   ======================================================================== */
.ch-path { padding: 0; background: var(--bg); }
.pa-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2rem, 5svh, 4.5rem); }
.pa-head { max-width: var(--maxw); margin-left: auto; margin-right: auto; margin-bottom: clamp(1.5rem, 4svh, 3rem); padding-left: var(--bleed); padding-right: var(--bleed); }
.pa-head h2 { font-size: var(--f-d3); max-width: 22ch; }
.pa-track { display: flex; gap: 1.4rem; padding: 0 var(--bleed); width: max-content; }
.pa-card {
  width: clamp(17rem, 27vw, 24rem);
  flex: none;
  padding: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pa-card.is-on { border-color: var(--sage); box-shadow: var(--shadow-sm); }
.pa-shot { overflow: hidden; border-radius: var(--radius-sm); margin-bottom: .3rem; }
.pa-shot img { width: 100%; height: clamp(8rem, 20svh, 14rem); object-fit: cover; filter: grayscale(1); transition: filter .6s var(--ease); }
.pa-card.is-on .pa-shot img { filter: none; }
.pa-no {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--sun); color: var(--ink);
  font-family: var(--font-ui); font-weight: 800; font-size: calc(.95rem * var(--t-text));
}
.pa-card h3 { font-size: var(--f-h4); }
.pa-card p { font-size: var(--f-body); line-height: 1.66; }
.pa-card.is-cta { background: var(--sun-tint); border-color: #ecd9a8; justify-content: center; }
.pa-card.is-cta h3 { font-size: var(--f-h3); }
.pa-card.is-cta .button { align-self: flex-start; margin-top: .4rem; }
.pa-call { font-size: calc(.86rem * var(--t-text)); color: var(--fg-soft); }
.pa-bar { max-width: var(--maxw); margin-left: auto; margin-right: auto; margin-top: clamp(1.25rem, 3svh, 2.5rem); padding-left: var(--bleed); padding-right: var(--bleed); }
.pa-bar i { display: block; height: 4px; border-radius: 4px; background: var(--sun); transform: scaleX(0); transform-origin: left center; }
.pa-bar::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--rule); margin-bottom: -4px; }
.ch-path.is-static .pa-track { flex-wrap: wrap; width: auto; }
.ch-path.is-static .pa-card { width: auto; flex: 1 1 17rem; }
.ch-path.is-static .pa-bar { display: none; }
.ch-path.is-static .pa-pin { min-height: 0; display: block; padding-block: var(--ch-pad); }
.ch-path.is-static .pa-shot img { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .pa-pin { min-height: 0; display: block; padding-block: var(--ch-pad); }
  .pa-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--bleed); -webkit-overflow-scrolling: touch; width: auto; padding-bottom: 1rem; }
  .pa-card { width: 78vw; scroll-snap-align: start; }
  .pa-shot img { filter: none; height: auto; aspect-ratio: 4 / 3; }
  .pa-bar { display: none; }
}

/* ===========================================================================
   THE PROOF — one written quote, then a rail
   ======================================================================== */
.pr-lead { display: grid; gap: 2.5rem; margin-bottom: 4rem; }
@media (min-width: 900px) { .pr-lead { grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } }
.pr-quote { position: relative; margin: 0; }
.pr-mark {
  position: absolute; left: -.2rem; top: -3rem;
  font-family: var(--font-display); font-size: calc(9rem * var(--t-lg)); line-height: 1;
  color: var(--sun); opacity: .55; z-index: 0;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
/* A whole review at display size. One step under the statement, because a
   sixty word review at 3rem is a wall; nothing is trimmed to make it fit. */
.pr-quote blockquote { position: relative; z-index: 1; margin: 0; max-width: 32ch; }
.ch .pr-quote .statement { font-size: calc(2.1rem * var(--t-lg)); line-height: 1.32; }
.pr-quote figcaption {
  display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem;
  font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
}
.pr-quote figcaption i { width: 2rem; height: 3px; border-radius: 3px; background: var(--sun); flex: none; }
.pr-quote figcaption b { font-weight: 700; color: var(--fg-soft); }
.pr-portrait { overflow: hidden; border-radius: var(--radius); }
.pr-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transform: scale(1.04); }
.pr-stars { display: inline-flex; gap: .15rem; color: var(--sun); font-size: calc(1.1rem * var(--t-text)); letter-spacing: .05em; margin-bottom: .8rem; }

.pr-rail { overflow: hidden; padding: .5rem 0 1rem; }
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .pr-rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--bleed); }
  .pr-chip { scroll-snap-align: start; }
}
.pr-rail-in { display: flex; gap: 1.2rem; padding: 0 var(--bleed); will-change: transform; }
/* Sized to the reviews: no clamp, no ellipsis. A review is shown whole. */
.pr-chip {
  flex: none; display: flex; flex-direction: column;
  width: clamp(17rem, 27vw, 25rem); margin: 0; padding: 1.6rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
}
.pr-chip p { font-size: var(--f-body); line-height: 1.68; color: var(--fg-body); }
.pr-chip .pr-stars { font-size: calc(.9rem * var(--t-text)); }
.pr-chip cite {
  display: block; margin-top: auto; padding-top: 1.1rem;
  font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.pr-chip cite span { display: block; color: var(--fg-soft); font-weight: 700; letter-spacing: .08em; margin-top: .2rem; }
.pr-foot { margin-top: 2.5rem; }

/* ===========================================================================
   THE INVITATION — everything needed to act, and the questions
   ======================================================================== */
.iv-top { display: grid; gap: 3rem; padding-bottom: 4rem; }
@media (min-width: 900px) { .iv-top { grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: start; } }
.iv-copy { min-width: 0; }
.iv-lede { font-size: var(--f-lede); line-height: 1.7; max-width: 44ch; margin: 1.4rem 0 2.2rem; }
.iv-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3rem; }
.iv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem 1.75rem; margin: 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.iv-facts dt { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin-bottom: .6rem; }
.iv-facts dd { margin: 0; font-size: var(--f-body); line-height: 1.7; color: var(--fg-body); }
.iv-facts dd a { color: var(--fg-body); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.iv-facts dd a:hover { color: #fff; }
.iv-facts b { color: var(--fg); font-weight: 700; }
.iv-aside { display: grid; gap: 1.5rem; }
.iv-shot { margin: 0; }
.iv-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.iv-shot figcaption { padding-top: .8rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; color: var(--fg-soft); }
.iv-map, .iv-map .embed_component { background: var(--ink-mid); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.iv-map .embed_component { border: 0; border-radius: 0; }
.iv-map .embed_component iframe { display: block; width: 100%; height: 15rem; border: 0; filter: grayscale(.4) contrast(1.05) brightness(.92); }
.iv-aside .link-arrow { justify-self: start; }

.iv-faq { padding-top: 3.5rem; border-top: 1px solid var(--rule); }
.iv-faq h3 { margin-bottom: 1.5rem; }
.faq_list { border-top: 1px solid var(--rule); margin-bottom: 2rem; }
.faq_item { border-bottom: 1px solid var(--rule); }
.faq_question {
  display: block; cursor: pointer; list-style: none;
  padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg);
}
.faq_question::-webkit-details-marker { display: none; }
.faq_question::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: .65rem; height: .65rem; margin-top: -.45rem;
  border-right: 2px solid var(--sun); border-bottom: 2px solid var(--sun);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
/* `content` restated: the migration's sheet swaps the marker for an en dash
   on open, and would otherwise draw it beside the chevron. */
.faq_item[open] .faq_question::after { content: ""; transform: rotate(-135deg); margin-top: -.15rem; }
.faq_item:first-of-type { border-top: 0; }
.faq_answer { padding: 0 3rem 1.4rem 0; font-size: var(--f-body); line-height: 1.75; color: var(--fg-body); }
.faq_answer a { color: var(--accent); }

/* ===========================================================================
   THE GROWTH CHART — the signature scene
   A sticky ruler on the left that fills as the page scrolls, a big age that
   changes as each stage passes the middle of the window, and the stages
   themselves on the right. `data-grow` on the section binds it; the rest is
   CSS. Below 900 the ruler goes horizontal above the stages.
   ======================================================================== */
.gr-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .gr-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .gr-side { position: sticky; top: calc(var(--jr-nav-h, 6rem) + 2rem); }
}
.gr-side { display: grid; gap: 1.5rem; }
.gr-age {
  font-family: var(--font-display); font-weight: 500; line-height: .95; letter-spacing: -.03em;
  font-size: calc(7rem * var(--t-disp)); color: var(--fg);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.gr-age small { display: block; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: .8rem; }
.gr-ruler { position: relative; height: 1rem; border-radius: var(--pill); background: var(--rule); overflow: hidden; }
.gr-ruler i { position: absolute; inset: 0; border-radius: var(--pill); background: linear-gradient(90deg, var(--sage), var(--sun)); transform: scaleX(0); transform-origin: left center; }
.gr-ticks { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .08em; color: var(--fg-soft); }
.gr-stages { display: grid; gap: 1.25rem; }
.gr-stage {
  display: grid; gap: 1rem;
  padding: 1.6rem 1.7rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
  opacity: .55;
}
.gr-stage.is-on { opacity: 1; border-color: var(--sage); box-shadow: var(--shadow-sm); transform: translateX(.35rem); }
.gr-stage_when { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.gr-stage h3 { font-size: var(--f-h3); }
.gr-stage p { font-size: var(--f-body); line-height: 1.66; }
.gr-stage ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.gr-stage li {
  font-family: var(--font-ui); font-size: calc(.8rem * var(--t-text)); font-weight: 700;
  padding: .35rem .8rem; border-radius: var(--pill); background: var(--sage-tint); color: var(--sage-deep);
}
.gr-stage li a { color: inherit; text-decoration: none; }
.gr-stage li a:hover { text-decoration: underline; }
.ch[data-theme="dark"] .gr-stage li { background: rgba(255, 255, 255, .1); color: #fff; }
@media (max-width: 899px) {
  .gr-age { font-size: calc(5rem * var(--t-disp)); }
  .gr-stage { opacity: 1; }
  .gr-stage.is-on { transform: none; }
}

/* ===========================================================================
   HOMEPAGE CHAPTERS
   ======================================================================== */

/* --- 01 The First Tooth: the statement beside a sticky photograph --------- */
.ft-grid { display: grid; gap: 3rem; }
.ft-copy { min-width: 0; }
@media (min-width: 900px) {
  .ft-grid { grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .ft-side { position: sticky; top: calc(var(--jr-nav-h, 6rem) + 1.5rem); }
}
.ft-after { display: grid; gap: 1.1rem; max-width: 46ch; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.ft-after p { font-size: calc(1.02rem * var(--t-text)); line-height: 1.78; }
.ft-media { margin: 0; position: relative; }
.ft-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius); }
.ft-media figcaption { padding-top: .9rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; color: var(--fg-soft); line-height: 1.6; }
/* The sticker on the photograph: the one fact a parent has not heard. */
.ft-sticker {
  position: absolute; left: 1.2rem; bottom: 4.2rem;
  max-width: 15rem; padding: 1rem 1.2rem;
  background: var(--sun); color: var(--ink); border-radius: var(--radius-sm);
  transform: rotate(-3deg);
  font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); line-height: 1.25;
  box-shadow: var(--shadow-sm);
}
.ft-turn {
  margin: 2rem 0 0; padding-top: 1.5rem; border-top: 3px solid var(--sun); border-radius: 2px;
  font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); line-height: 1.22; color: var(--fg); max-width: 20ch;
}

/* --- 03 The Comfort: four stickers and a photograph ------------------------ */
.cf-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three columns, the photograph in the middle spanning both rows, two
   stickers either side of it. Explicit placement: auto-placing five children
   around a two-row item leaves a hole. */
@media (min-width: 1100px) {
  .cf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .cf-shot { grid-column: 2; grid-row: 1 / span 2; min-height: 0; }
  .cf-card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .cf-card:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .cf-card:nth-of-type(3) { grid-column: 1; grid-row: 2; }
  .cf-card:nth-of-type(4) { grid-column: 3; grid-row: 2; }
}
.cf-card {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.7rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cf-card h3 { font-size: var(--f-h3); max-width: 18ch; }
.cf-card p { font-size: var(--f-body); line-height: 1.68; }
.cf-glyph {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--sage-tint); color: var(--sage-deep); font-family: var(--font-display); font-weight: 600; font-size: calc(1.3rem * var(--t-text));
}
.cf-card.is-sun .cf-glyph { background: var(--sun-tint); color: var(--sun-deep); }
.cf-card.is-sky .cf-glyph { background: var(--sky); color: var(--sky-deep); }
.cf-card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .8rem; }
.cf-shot { margin: 0; position: relative; min-height: 18rem; border-radius: var(--radius); overflow: hidden; }
.cf-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-shot figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  padding: .8rem 1rem; background: rgba(36, 44, 50, .82); color: #fff; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; line-height: 1.5;
}
.cf-list { display: grid; gap: .5rem; margin-top: .3rem; }
.cf-list li { display: flex; gap: .7rem; align-items: baseline; font-size: var(--f-body); line-height: 1.55; }
.cf-list li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); transform: translateY(-.1rem); }

/* --- 04 The People: one plate, one band ------------------------------------ */
.pe-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .pe-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } }
.pe-plate { position: relative; overflow: hidden; border-radius: var(--radius); }
.pe-plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.pe-badge {
  position: absolute; right: 1.2rem; top: 1.2rem;
  padding: .6rem 1rem; border-radius: var(--pill);
  background: var(--sun); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.pe-copy { min-width: 0; }
.pe-copy h3 { font-size: var(--f-d3); max-width: 14ch; margin: .4rem 0 .6rem; }
.pe-role { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pe-quote {
  margin: 1.6rem 0 1.4rem; padding-left: 1.2rem; border-left: 3px solid var(--sun); border-radius: 2px;
  font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: calc(1.3rem * var(--t-mid)); line-height: 1.45; color: var(--fg);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.pe-blurb { font-size: var(--f-body); line-height: 1.72; max-width: 58ch; }
.pe-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1.6rem 0 0; }
.pe-facts div { padding: .9rem 1rem; background: var(--bg-2); border-radius: var(--radius-sm); }
.pe-facts b { display: block; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }
.pe-facts span { font-size: calc(.92rem * var(--t-text)); color: var(--fg-body); }
.pe-band { position: relative; margin-top: clamp(3rem, 6vw, 5rem); border-radius: var(--radius); overflow: hidden; }
.pe-band img { width: 100%; height: clamp(18rem, 42vh, 30rem); object-fit: cover; object-position: 50% 30%; }
.pe-band-in {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem;
  padding: 3.5rem 2rem 1.8rem;
  background: linear-gradient(180deg, transparent, rgba(36, 44, 50, .88));
}
.pe-band-in p { color: #fff; font-size: var(--f-lede); max-width: 36ch; margin: 0; }

/* ===========================================================================
   THE CORE PAGES' FURNITURE
   The chrome is constant and the chapter bodies vary: every page below
   carries at least two layouts that appear on no other page, and the shared
   scrubbed scenes (the written statement, the rail, the pinned path) recur,
   never in the same sequence. Blocks are grouped by page and prefixed by it.
   ======================================================================== */

/* --- shared by the inner pages ------------------------------------------- */
/* The written manifesto: one sentence centred at statement size. */
.manifesto { max-width: 42ch; margin-left: auto; margin-right: auto; text-align: center; }
.manifesto .kicker { margin-bottom: 1.4rem; }
.manifesto .statement { font-size: calc(2.6rem * var(--t-lg)); line-height: 1.24; }
/* Counted figures on a hairline grid. Every value is in the HTML before any
   script runs; the tween counts UP to it. */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.figures div { padding: 1.5rem 1.4rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); display: grid; gap: .4rem; }
.figures b { font-family: var(--font-display); font-weight: 500; font-size: calc(3.2rem * var(--t-lg)); line-height: 1; color: var(--accent); font-variation-settings: "SOFT" 100, "opsz" 144; }
.figures span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.figures small { font-size: calc(.88rem * var(--t-text)); color: var(--fg-body); line-height: 1.5; }
@media (max-width: 899px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* One short review at display size, and nothing else in the chapter. */
.oneword { text-align: center; margin-left: auto; margin-right: auto; }
/* The measure is on the QUOTE, in its own ch. On the figure it was 30ch of
   body copy, which wrapped a nine word review onto eight lines. */
.oneword blockquote { margin: 0 auto; max-width: 20ch; font-family: var(--font-display); font-weight: 500; font-size: var(--f-d2); line-height: 1.05; letter-spacing: -.02em; color: var(--fg); font-variation-settings: "SOFT" 100, "opsz" 144; }
.oneword figcaption { margin-top: 1.6rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.oneword figcaption span { color: var(--fg-soft); font-weight: 700; }
.oneword-foot { text-align: center; }
/* The ticker: a velocity-reactive marquee of short words. */
.ticker { margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 1.1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; white-space: nowrap; }
.ticker_row { display: inline-flex; align-items: center; gap: 1.4rem; will-change: transform; }
.ticker_row span { font-family: var(--font-display); font-weight: 500; font-size: calc(1.5rem * var(--t-mid)); color: var(--fg); }
.ticker_row i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sun); flex: none; }
/* The prose frames for a long-form page. */
.lf-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
/* minmax(0, ...) on the one-column case too: an implicit `auto` column
   takes the min-content width of its widest child, and one long unbreakable
   run (a URL, a product name) in a blog post pushed the whole article column
   to 527px inside a 390px phone, so every h3 in it lost its right edge to
   the section's clip on 32 posts (2026-09-09, evening). Long runs now wrap
   inside the column instead of widening it. */
.lf-section p, .lf-section li, .lf-section h3 { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .lf-layout.lf-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .lf-layout.lf-split .lf-head { position: sticky; top: calc(var(--jr-nav-h, 6rem) + 1.5rem); }
}
.lf-layout.is-solo { max-width: 72ch; }
.lf-section + .lf-section { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); }
.lf-section h3 { margin-bottom: .8rem; }
.lf-section p + p { margin-top: 1rem; }
.lf-section p { font-size: calc(1.02rem * var(--t-text)); line-height: 1.78; }
.lf-lead { font-family: var(--font-ui); font-weight: 800; font-size: var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.lf-ticks { display: grid; gap: .6rem; margin: 1rem 0; }
.lf-ticks li { display: flex; gap: .75rem; align-items: baseline; font-size: var(--f-body); line-height: 1.6; color: var(--fg-body); }
.lf-ticks li::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sun); transform: translateY(-.1rem); }
.lf-more { margin-top: 1.25rem; }
.lf-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lf-more summary::-webkit-details-marker { display: none; }
.lf-more summary::after { content: "+"; font-size: 1.1em; }
.lf-more[open] summary::after { content: "\2212"; }
.lf-more-in { margin-top: 1rem; }
/* A figure in a prose column. */
.lf-figure { margin: 1.5rem 0 0; }
.lf-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.lf-figure figcaption { padding-top: .7rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; color: var(--fg-soft); }
/* A card grid: two, three or four across, stickers. */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); color: inherit; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
a.card:hover h3 { color: var(--accent); }
.card h3 { font-size: var(--f-h4); }
.card p { font-size: var(--f-body); line-height: 1.62; }
.card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .6rem; }
.card_media { overflow: hidden; border-radius: var(--radius-sm); margin: -.4rem 0 .4rem; }
.card_media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card_no { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sun-tint); color: var(--sun-deep); font-family: var(--font-ui); font-weight: 800; font-size: calc(.9rem * var(--t-text)); }
.card.is-fill { background: var(--sun-tint); border-color: #ecd9a8; }
.ch[data-theme="dark"] .card.is-fill { background: var(--ink-mid); border-color: var(--rule-strong); }
/* The callout band: a full width filled panel with one thing to do. */
.callout { display: grid; gap: 1.5rem; padding: clamp(2rem, 4vw, 3.5rem); background: var(--sun-tint); border-radius: var(--radius); }
@media (min-width: 900px) { .callout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; } }
.callout h3 { font-size: var(--f-d3); max-width: 18ch; }
.callout p { max-width: 48ch; }
.callout_actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-self: start; }
@media (min-width: 900px) { .callout_actions { justify-self: end; } }
.ch[data-theme="dark"] .callout { background: var(--ink-mid); }
/* No inline styles anywhere in the pages: the converter drops the attribute.
   The two rhythms a callout needs are here instead. */
.callout h3 + p, .callout p + p { margin-top: 1rem; }
.ch .callout .statement { font-size: calc(1.3rem * var(--t-mid)); line-height: 1.5; }
.ty-callbox_copy { margin-top: 1rem; max-width: 46ch; }

/* ===========================================================================
   ABOUT THE PRACTICE  (/about-us/)
   ======================================================================== */
/* The mosaic: three photographs at three sizes on a twelve column grid, with
   one caption panel. */
.ab-mosaic { display: grid; gap: 1.25rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ab-mosaic figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.ab-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.ab-mosaic figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .7rem 1rem; background: rgba(36, 44, 50, .82); color: #fff; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.ab-mosaic .is-a { grid-column: span 12; aspect-ratio: 21 / 9; }
.ab-mosaic .is-b { grid-column: span 5; aspect-ratio: 4 / 5; }
.ab-panel { grid-column: span 7; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.ab-panel h3 { font-size: var(--f-d3); max-width: 16ch; }
.ab-panel p { font-size: var(--f-lede); line-height: 1.68; max-width: 44ch; }
.ab-mosaic .is-c { grid-column: span 7; aspect-ratio: 3 / 2; }
.ab-mosaic .is-d { grid-column: span 5; aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .ab-mosaic .is-a { grid-column: span 7; aspect-ratio: 3 / 2; }
  .ab-mosaic .is-b { grid-column: span 5; aspect-ratio: auto; }
  .ab-panel { grid-column: span 5; }
  .ab-mosaic .is-c { grid-column: span 4; aspect-ratio: 4 / 5; }
  .ab-mosaic .is-d { grid-column: span 3; aspect-ratio: auto; }
}
@media (max-width: 599px) { .ab-mosaic > * { grid-column: span 12 !important; } .ab-mosaic .is-b, .ab-mosaic .is-d { aspect-ratio: 4 / 3; } }

/* The diptych: two practices, one wall. A sage door and a slate door. */
.ab-diptych { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .ab-diptych { grid-template-columns: 1fr 1fr; gap: 0; } }
.ab-door { padding: clamp(1.8rem, 4vw, 3.5rem); border-radius: var(--radius); display: grid; gap: 1rem; align-content: start; }
.ab-door.is-kids { background: var(--sage-tint); }
.ab-door.is-adults { background: var(--ink-deep); color: rgba(255, 255, 255, .8); }
.ab-door.is-adults h3, .ab-door.is-adults p { color: inherit; }
.ab-door.is-adults h3 { color: #fff; }
@media (min-width: 900px) { .ab-door.is-kids { border-radius: var(--radius) 0 0 var(--radius); } .ab-door.is-adults { border-radius: 0 var(--radius) var(--radius) 0; } }
.ab-door_pill { justify-self: start; padding: .45rem .9rem; border-radius: var(--pill); font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ab-door.is-kids .ab-door_pill { background: var(--sun); color: var(--ink); }
.ab-door.is-adults .ab-door_pill { background: rgba(255, 255, 255, .12); color: #fff; }
.ab-door h3 { font-size: var(--f-d3); max-width: 14ch; }
.ab-door ul { display: grid; gap: .5rem; margin-top: .5rem; }
.ab-door li { display: flex; gap: .7rem; align-items: baseline; font-size: var(--f-body); line-height: 1.55; }
.ab-door li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); transform: translateY(-.1rem); }
.ab-door .link-arrow { margin-top: .8rem; justify-self: start; }

/* The ribbon: Pay It Forward, a statement written on a sun ground. */
.ab-ribbon { display: grid; gap: 2rem; }
@media (min-width: 900px) { .ab-ribbon { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; } }
.ab-ribbon .statement { font-size: calc(2.4rem * var(--t-lg)); max-width: 24ch; }
.ab-ribbon_aside { display: grid; gap: 1rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.ab-ribbon_aside b { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); color: var(--fg); }
.ab-ribbon_aside p { font-size: var(--f-body); line-height: 1.66; }

/* ===========================================================================
   MEET THE DOCTORS  (/our-doctors/)
   ======================================================================== */
/* The split: half ink with the portrait edge to edge, half warm with her own
   words written word by word. */
.ch-specialist { padding: 0; }
.dr-split { display: grid; }
@media (min-width: 900px) { .dr-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.dr-split_ink { position: relative; background: var(--ink-deep); min-height: 28rem; }
.dr-split_ink img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
@media (max-width: 899px) { .dr-split_ink { min-height: 0; } .dr-split_ink img { position: static; aspect-ratio: 4 / 5; } }
.dr-split_ink .pe-badge { z-index: 2; }
.dr-split_warm { padding: clamp(2.5rem, 5vw, 5rem) var(--bleed); display: grid; gap: 1.4rem; align-content: center; }
.dr-split_warm h2 { font-size: var(--f-d3); }
.dr-split_warm .statement { font-size: calc(1.7rem * var(--t-mid)); line-height: 1.4; font-style: italic; max-width: 40ch; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 48; }
.dr-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: .5rem 0 0; }
.dr-dl div { padding: .9rem 1rem; background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.dr-dl dt { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }
.dr-dl dd { margin: 0; font-size: calc(.92rem * var(--t-text)); color: var(--fg-body); line-height: 1.5; }
.dr-bio { display: grid; gap: 1rem; max-width: 60ch; }
.dr-bio p { font-size: calc(1.02rem * var(--t-text)); line-height: 1.76; }

/* The dossier: one general dentist, portrait capped to its asset. */
.dr-dossier { display: grid; gap: 2rem; }
@media (min-width: 700px) { .dr-dossier { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } }
.dr-dossier_shot { margin: 0; border-radius: var(--radius); overflow: hidden; }
.dr-dossier_shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.dr-dossier h3 { font-size: var(--f-d3); margin: .3rem 0 .8rem; }

/* The schools: institution at display size, the person and degree beside. */
.dr-schools { border-top: 1px solid var(--rule); }
.dr-school { display: grid; gap: .4rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .dr-school { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: baseline; } }
.dr-school b { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); color: var(--fg); }
.dr-school span { font-size: var(--f-body); color: var(--fg-body); }
.dr-school span i { font-style: normal; font-family: var(--font-ui); font-weight: 800; font-size: var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-right: .6rem; }

/* The voices: one whole review per doctor, side by side. */
.dr-voices { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .dr-voices { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.dr-voice { margin: 0; padding: 1.8rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); display: flex; flex-direction: column; gap: 1rem; }
.dr-voice .kicker { color: var(--sun-deep); }
.dr-voice blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(1.25rem * var(--t-mid)); line-height: 1.5; color: var(--fg); font-variation-settings: "SOFT" 100, "opsz" 24; }
.dr-voice figcaption { margin-top: auto; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.dr-voice figcaption span { display: block; color: var(--fg-soft); font-weight: 700; letter-spacing: .06em; margin-top: .2rem; }

/* ===========================================================================
   MEET THE TEAM  (/our-team/)
   ======================================================================== */
/* The wall: three groups, nine round portraits. */
.tm-group + .tm-group { margin-top: clamp(2rem, 4vw, 3.5rem); }
.tm-group_head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.tm-group_head h3 { font-size: var(--f-h3); }
.tm-group_head span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.tm-wall { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) { .tm-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tm-cell { margin: 0; text-align: center; display: grid; gap: .8rem; justify-items: center; }
.tm-cell img { width: min(100%, 13rem); aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; border-radius: 50%; border: 5px solid var(--panel); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease); }
.tm-cell:hover img { transform: rotate(-3deg) scale(1.04); }
.tm-cell figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); }
.tm-cell figcaption span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* The named: a first name at statement size beside the review it came from. */
.tm-rows { border-top: 1px solid var(--rule); }
.tm-row { display: grid; gap: 1rem 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .tm-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.tm-row_name { font-family: var(--font-display); font-weight: 500; font-size: var(--f-d3); line-height: 1; color: var(--fg); font-variation-settings: "SOFT" 100, "opsz" 144; }
.tm-row_name small { display: block; margin-top: .6rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.tm-copy { display: grid; gap: .8rem; }
.tm-copy blockquote { margin: 0; font-size: calc(1.05rem * var(--t-text)); line-height: 1.72; color: var(--fg-body); }
.tm-copy cite { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }

/* The bylines: the two doctors, one strip. */
.tm-bylines { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .tm-bylines { grid-template-columns: 1fr 1fr; } }
.tm-byline { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 1.2rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); color: inherit; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tm-byline:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tm-byline img { width: 5.5rem; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 50%; }
.tm-byline b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); }
.tm-byline span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* ===========================================================================
   SERVICES OVERVIEW  (/our-services/)
   ======================================================================== */
/* The map: eight departments on a twelve column sheet, tiles sized by how
   many treatments they hold, every treatment a chip. */
.sv-depts { display: grid; gap: 1.25rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sv-dept { grid-column: span 12; display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
@media (min-width: 700px) { .sv-dept { grid-column: span 6; } .sv-dept.is-12 { grid-column: span 12; } }
@media (min-width: 1100px) { .sv-dept.is-3 { grid-column: span 3; } .sv-dept.is-4 { grid-column: span 4; } .sv-dept.is-5 { grid-column: span 5; } .sv-dept.is-6 { grid-column: span 6; } .sv-dept.is-7 { grid-column: span 7; } .sv-dept.is-8 { grid-column: span 8; } .sv-dept.is-12 { grid-column: span 12; } }
.sv-dept_no { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sun-deep); }
.sv-dept h3 { font-size: var(--f-h3); }
.sv-dept h3 a { color: inherit; text-decoration: none; }
.sv-dept h3 a:hover { color: var(--accent); }
.sv-dept p { font-size: var(--f-body); line-height: 1.6; }
.sv-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.sv-chips a { font-family: var(--font-ui); font-size: calc(.8rem * var(--t-text)); font-weight: 700; padding: .4rem .85rem; border-radius: var(--pill); background: var(--sage-tint); color: var(--sage-deep); text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.sv-chips a:hover { background: var(--sage-deep); color: #fff; }

/* The finder: what is wrong on the left, where the practice would start on
   the right. */
.sv-finder { border-top: 1px solid var(--rule); }
.sv-find { display: grid; gap: .6rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); align-items: center; }
@media (min-width: 900px) { .sv-find { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.2fr); } }
.sv-find_if { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); color: var(--fg); }
.sv-find_arrow { display: none; color: var(--sun); font-size: 1.4rem; text-align: center; }
@media (min-width: 900px) { .sv-find_arrow { display: block; } }
.sv-find_then { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sv-find_then a { font-family: var(--font-ui); font-size: calc(.85rem * var(--t-text)); font-weight: 800; padding: .5rem 1rem; border-radius: var(--pill); background: var(--panel); border: 1px solid var(--rule-strong); color: var(--accent); text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.sv-find_then a:hover { background: var(--accent); color: #fff; }
.sv-find_then span { font-size: calc(.88rem * var(--t-text)); color: var(--fg-soft); }

/* The ages: the growth chart's five stages as a rail the page scrolls sideways. */
.sv-rail { overflow: hidden; padding: .5rem 0 1rem; }
@media (max-width: 899px) { .sv-rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--bleed); } .sv-age { scroll-snap-align: start; } }
.sv-rail-in { display: flex; gap: 1.2rem; padding: 0 var(--bleed); will-change: transform; }
.sv-age { flex: none; width: clamp(17rem, 26vw, 23rem); display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.sv-age b { font-family: var(--font-display); font-weight: 500; font-size: calc(2.8rem * var(--t-lg)); line-height: 1; color: var(--accent); font-variation-settings: "SOFT" 100, "opsz" 144; }
/* rem, not em: an em fraction of the numeral rode the root down to 10.6px on
   a phone. --f-label is floored at 12px. */
.sv-age b small { font-size: var(--f-label); font-family: var(--font-ui); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); margin-left: .4rem; }
.sv-age h3 { font-size: var(--f-h4); }
.sv-age p { font-size: var(--f-body); line-height: 1.6; }
.sv-age .sv-chips { padding-top: .6rem; }

/* The menu: the published offers as a price list with dotted leaders. */
.sv-menu { max-width: 46rem; }
.sv-menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-strong); }
.sv-menu b { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); }
.sv-menu i { font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); color: var(--accent); white-space: nowrap; }
.sv-menu span { grid-column: 1 / -1; font-size: calc(.9rem * var(--t-text)); color: var(--fg-body); line-height: 1.55; }
.sv-menu_note { margin-top: 1.2rem; font-size: calc(.82rem * var(--t-text)); color: var(--fg-soft); max-width: 60ch; }

/* ===========================================================================
   THE SERVICE PAGE TEMPLATE  (/services/<treatment>/)
   ======================================================================== */
/* The compact arrival is followed by the credential strip and the breadcrumb,
   then the beats: qualify, the treatment, why here, the path, questions,
   proof, invitation. A beat with nothing behind it is dropped, not invented. */
.sq-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .sq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sq-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.sq-card .cf-glyph { margin-bottom: .2rem; }
.sq-card h3 { font-size: var(--f-h4); }
.sq-card p { font-size: var(--f-body); line-height: 1.62; }
/* The why cards on a warm ground overlap a photograph: the panel sits ON the
   picture from 900 up. */
.sw-overlap { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .sw-overlap { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .sw-overlap_shot { grid-column: 1 / 8; grid-row: 1; } .sw-overlap_panel { grid-column: 7 / 13; grid-row: 1; } }
.sw-overlap_shot { margin: 0; border-radius: var(--radius); overflow: hidden; }
.sw-overlap_shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* The panel must PAINT above the photograph. `data-drift` puts a transform on
   the figure, and a transformed element paints in the positioned layer, above
   any sibling that is neither positioned nor transformed - so without this the
   photograph rode over the panel's bullets on all nineteen overlap pages
   (found 2026-09-09, the evening pass). */
.sw-overlap_panel { position: relative; z-index: 1; }
.sw-overlap_panel { display: grid; gap: 1rem; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.sw-overlap_panel h3 { font-size: var(--f-d3); max-width: 16ch; }
.sw-overlap_panel ul { display: grid; gap: .6rem; }
.sw-overlap_panel li { display: flex; gap: .7rem; align-items: baseline; font-size: var(--f-body); line-height: 1.55; }
.sw-overlap_panel li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); transform: translateY(-.1rem); }

/* ===========================================================================
   NEW PATIENTS  (/new-patients/)
   ======================================================================== */
/* The ticket: the offer at arrival size, the inclusions as a receipt, and
   two stubs on a dashed edge. */
.np-ticket { display: grid; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .np-ticket { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.np-ticket_main { padding: clamp(1.8rem, 4vw, 3.5rem); display: grid; gap: 1rem; align-content: start; }
.np-price { font-family: var(--font-display); font-weight: 500; font-size: calc(6.5rem * var(--t-disp)); line-height: .9; letter-spacing: -.03em; color: var(--fg); font-variation-settings: "SOFT" 100, "opsz" 144; }
.np-price sup { font-size: .4em; vertical-align: top; margin-right: .05em; color: var(--accent); }
.np-price small { display: block; margin-top: .8rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sun-deep); }
.np-receipt { display: grid; gap: .55rem; margin-top: .5rem; padding-top: 1.2rem; border-top: 2px dashed var(--rule-strong); }
.np-receipt li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--f-body); color: var(--fg-body); }
.np-receipt li b { font-family: var(--font-ui); font-weight: 800; color: var(--accent); font-size: var(--f-label); letter-spacing: .1em; text-transform: uppercase; }
.np-ticket_stubs { display: grid; border-top: 2px dashed var(--rule-strong); }
@media (min-width: 900px) { .np-ticket_stubs { border-top: 0; border-left: 2px dashed var(--rule-strong); } }
.np-stub { padding: 1.6rem clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: .3rem; align-content: center; }
.np-stub + .np-stub { border-top: 1px solid var(--rule); }
.np-stub b { font-family: var(--font-display); font-weight: 500; font-size: calc(2.4rem * var(--t-lg)); line-height: 1; color: var(--fg); }
.np-stub span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.np-stub p { font-size: calc(.88rem * var(--t-text)); line-height: 1.5; }
.np-fine { margin-top: 1rem; font-size: calc(.8rem * var(--t-text)); color: var(--fg-soft); max-width: 70ch; }

/* The bag: what to bring, beside the two rooms you will see. */
.np-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .np-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } }
.np-check { display: grid; gap: .8rem; counter-reset: bag; }
.np-check li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.2rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.np-check li::before { counter-increment: bag; content: counter(bag); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sun); color: var(--ink); font-family: var(--font-ui); font-weight: 800; font-size: calc(.9rem * var(--t-text)); }
.np-check b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); margin-bottom: .2rem; }
.np-check p { font-size: calc(.92rem * var(--t-text)); line-height: 1.55; }
.np-tour { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.np-tour figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; }
.np-tour figure:first-child { grid-column: 1 / -1; }
.np-tour img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.np-tour figure + figure img { aspect-ratio: 1; }
.np-tour figcaption { position: absolute; left: .8rem; bottom: .8rem; right: .8rem; padding: .6rem .9rem; background: rgba(36, 44, 50, .82); color: #fff; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; }

/* The steps: a vertical timeline down one rule. */
.np-steps { position: relative; display: grid; gap: 1.5rem; padding-left: 3.2rem; max-width: 60rem; }
.np-steps::before { content: ""; position: absolute; left: 1.1rem; top: .5rem; bottom: .5rem; width: 3px; border-radius: 3px; background: var(--rule-strong); }
.np-step { position: relative; display: grid; gap: .4rem; }
.np-step::before { content: ""; position: absolute; left: -2.65rem; top: .35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sun); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--rule-strong); }
.np-step h3 { font-size: var(--f-h3); }
.np-step p { font-size: var(--f-body); line-height: 1.66; max-width: 60ch; }

/* The open Q and A: no accordion, two columns, every answer visible. */
.np-qa { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .np-qa { grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; } }
.np-qa_row { padding: 1.4rem 0 0; border-top: 2px solid var(--rule-strong); display: grid; gap: .5rem; }
.np-qa_row h3 { font-size: var(--f-h4); }
.np-qa_row p { font-size: var(--f-body); line-height: 1.66; }

/* ===========================================================================
   INSURANCE AND FINANCING  (/financing/)
   ======================================================================== */
/* The promises: three lines written word by word, each stepped further in. */
.fi-promises { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.fi-promise { max-width: 30ch; }
.fi-promise .statement { font-size: calc(2.3rem * var(--t-lg)); }
.fi-promise small { display: block; margin-top: .7rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
@media (min-width: 900px) { .fi-promise:nth-child(2) { margin-left: 12%; } .fi-promise:nth-child(3) { margin-left: 24%; } }

/* The network: twelve in-network carriers as tiles. */
.fi-network { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .fi-network { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fi-network { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fi-network li { display: grid; place-items: center; min-height: 5.5rem; padding: 1rem; text-align: center; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.fi-network li:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.fi-network li small { display: block; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; color: var(--fg-soft); margin-top: .2rem; }

/* The matrix: a real table above 768, labelled cards below. */
.fi-matrix { width: 100%; border-collapse: collapse; }
.fi-matrix th, .fi-matrix td { text-align: left; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: var(--f-body); line-height: 1.55; }
.fi-matrix th { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border-bottom-color: var(--rule-strong); }
.fi-matrix td:first-child { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); white-space: nowrap; }
.fi-matrix .fi-pill { display: inline-block; padding: .3rem .7rem; border-radius: var(--pill); background: var(--sage-tint); color: var(--sage-deep); font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 767px) {
  .fi-matrix thead { display: none; }
  .fi-matrix, .fi-matrix tbody, .fi-matrix tr, .fi-matrix td { display: block; }
  .fi-matrix tr { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .fi-matrix td { padding: .25rem 0; border: 0; }
  .fi-matrix td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: .5rem 0 .1rem; }
}

/* ===========================================================================
   MEMBERSHIP PLAN  (/dental-saving-plan/)
   ======================================================================== */
/* The card: the plan drawn as a membership card, tilted, that straightens on
   hover. */
.mb-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .mb-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } }
.mb-card { position: relative; aspect-ratio: 1.586; max-width: 30rem; padding: 1.6rem 1.8rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, var(--sage-deep), #3e5c4c); color: #fff; border-radius: 1.2rem; box-shadow: var(--shadow); transform: rotate(-4deg); transition: transform .6s var(--ease-out); overflow: hidden; }
.mb-card:hover { transform: rotate(0deg) translateY(-4px); }
.mb-card::before { content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: 120px 120px; opacity: .1; filter: invert(1); }
.mb-card > * { position: relative; }
.mb-card_top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.mb-card_top img { width: 7.5rem; filter: brightness(0) invert(1); }
.mb-card_chip { width: 2.6rem; height: 2rem; border-radius: .4rem; background: var(--sun); }
/* `.ch p` is (0,1,1) and beat the card's own white: the plan's name came out
   ink on green. Restated at (0,2,1). */
.ch .mb-card p, .mb-card_name { color: #fff; }
.mb-card_name { font-family: var(--font-display); font-weight: 500; font-size: calc(1.9rem * var(--t-mid)); line-height: 1.05; }
.mb-card_meta { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mb-copy { display: grid; gap: 1.2rem; }
.mb-copy .statement { font-size: calc(2rem * var(--t-lg)); line-height: 1.28; }

/* The ledger: what is inside, as tiles on a 1px gap. */
.mb-ledger { display: grid; gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .mb-ledger { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mb-ledger div { padding: 1.4rem 1.2rem; background: var(--panel); display: grid; gap: .4rem; align-content: start; }
.mb-ledger b { font-family: var(--font-display); font-weight: 500; font-size: calc(2.2rem * var(--t-lg)); line-height: 1; color: var(--accent); font-variation-settings: "SOFT" 100, "opsz" 144; }
.mb-ledger span { font-size: calc(.92rem * var(--t-text)); line-height: 1.5; color: var(--fg-body); }
.mb-vs { margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--rule-strong); }
.mb-vs_row { display: grid; grid-template-columns: 1fr; gap: .4rem 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .mb-vs_row { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }
.mb-vs_row.is-head { padding: .7rem 0; }
.mb-vs_row.is-head span { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.mb-vs_row.is-head .mb-vs_a { color: var(--accent); }
.mb-vs_q { font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); }
.mb-vs_a { color: var(--fg); font-weight: 700; font-size: var(--f-body); }
.mb-vs_b { color: var(--fg-soft); font-size: var(--f-body); }
@media (max-width: 767px) { .mb-vs_row.is-head { display: none; } .mb-vs_a::before { content: "The plan: "; color: var(--accent); font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .mb-vs_b::before { content: "Typical insurance: "; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } }

/* The situations: who it is for, beside a photograph. */
.mb-who { display: grid; gap: 2rem; }
@media (min-width: 900px) { .mb-who { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } }
.mb-situations { display: grid; gap: .8rem; }
.mb-situations li { padding: 1.1rem 1.3rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; font-size: var(--f-h4); color: var(--fg); }
.mb-situations li span { display: block; margin-top: .3rem; font-family: var(--font-body); font-weight: 400; font-size: calc(.92rem * var(--t-text)); color: var(--fg-body); }
.mb-shot { margin: 0; border-radius: var(--radius); overflow: hidden; }
.mb-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* The steps, inline on one hairline. */
.mb-steps { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .mb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.mb-step { padding-top: 1.2rem; border-top: 3px solid var(--rule-strong); display: grid; gap: .5rem; }
.mb-step b { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.mb-step h3 { font-size: var(--f-h4); }
.mb-step p { font-size: var(--f-body); line-height: 1.6; }

/* ===========================================================================
   PATIENT REVIEWS  (/patient-reviews/)
   ======================================================================== */
/* The wall: CSS columns, so no review is trimmed to fit a row. */
.rv-wall { columns: 1; column-gap: 1.25rem; }
@media (min-width: 700px) { .rv-wall { columns: 2; } }
@media (min-width: 1100px) { .rv-wall { columns: 3; } }
.rv-item { break-inside: avoid; margin: 0 0 1.25rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); display: grid; gap: .9rem; }
.rv-item blockquote { margin: 0; font-size: var(--f-body); line-height: 1.7; color: var(--fg-body); }
.rv-item.is-lead blockquote { font-family: var(--font-display); font-size: calc(1.3rem * var(--t-mid)); line-height: 1.45; color: var(--fg); font-variation-settings: "SOFT" 100, "opsz" 24; }
.rv-item figcaption { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rv-item figcaption span { display: block; color: var(--fg-soft); font-weight: 700; letter-spacing: .06em; margin-top: .2rem; }
.rv-item_who { display: flex; flex-wrap: wrap; gap: .4rem; }
.rv-item_who span { font-family: var(--font-ui); font-size: calc(.78rem * var(--t-text)); font-weight: 800; padding: .3rem .7rem; border-radius: var(--pill); background: var(--sun-tint); color: var(--sun-deep); }

/* ===========================================================================
   THANK YOU  (/thank-you/)
   ======================================================================== */
/* The call box: the number at chapter headline size, with the hours. */
.ty-callbox { display: grid; gap: 1.5rem; padding: clamp(1.8rem, 4vw, 3.5rem); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
@media (min-width: 900px) { .ty-callbox { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; } }
.ty-callbox a.ty-number { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--f-d2); line-height: 1; letter-spacing: -.02em; color: var(--fg); text-decoration: none; font-variation-settings: "SOFT" 100, "opsz" 144; }
.ty-callbox a.ty-number:hover { color: var(--accent); }
.ty-callbox .kicker { margin-bottom: .8rem; }
.ty-hours { display: grid; gap: .4rem; }
.ty-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: var(--f-body); }
.ty-hours b { color: var(--fg); font-weight: 700; }
/* The moments: three, down a rule. */
.ty-moments { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .ty-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.ty-moment { display: grid; gap: .6rem; padding-top: 1.2rem; border-top: 3px solid var(--sun); }
.ty-moment b { font-family: var(--font-display); font-weight: 500; font-size: calc(2.4rem * var(--t-lg)); line-height: 1; color: var(--accent); font-variation-settings: "SOFT" 100, "opsz" 144; }
.ty-moment h3 { font-size: var(--f-h4); }
.ty-moment p { font-size: var(--f-body); line-height: 1.6; }

/* ===========================================================================
   THE FORTY-SIX MIGRATED PAGES
   Repairs, not a redesign. Added 2026-09-08.

   Two sheets share this Instatic site: `legacy-migration.css` for the pages
   the 02 migration imported, and this one, which sorts last and therefore
   wins. The 03 import already took the type and the palette across, so those
   pages are in Fraunces and Nunito with the sage accent. What it did NOT take
   across is anything the old theme got wrong, and an audit of all fifty-seven
   live routes on 2026-09-08 (`.tmp/audit-live.mjs`) found the same two faults
   on all forty-six of them and on none of the eleven:

     - SIX RUNS OF TEXT UNDER 12px at 390. The top bar, the nav links, the
       eyebrow, the breadcrumb and the call bar all compute to 10.7-11.7px on
       a phone. The whole point of the fluid root at the top of this file is
       that the label tier is FLOORED at 12px; the old theme set px sizes and
       floored nothing.
     - A TAN CONTACT BAND, `rgb(204, 188, 166)`. It is the old theme's accent
       and it belongs to no part of this brand - the palette is slate, sage,
       sun and sky, sampled from the logo. Sitting directly above the slate
       accreditation strip and the ink footer, it reads as a mistake, which
       is what the client saw.

   Everything here is keyed to a `legacy-migration.css` class name, so none of
   it can reach the eleven redesigned pages: those carry `masthead_*`,
   `topline_*`, `foot_*` and `.ch`, and share not one selector below.
   ======================================================================== */
/* 1. Nothing on a phone may be smaller than the label tier's floor. */
.topbar_component,
.topbar_component a,
.topbar_component span,
.navbar_link,
.breadcrumb_item,
.breadcrumb_component a,
.callbar_component,
.footer_legal,
.footer_legal a,
.text-style-eyebrow {
  font-size: max(0.75rem, var(--f-label));
}
/* The eyebrow is a heading's kicker and carries tracking, so it needs the
   size AND the room; at 10.7px it was a grey smudge. */
.text-style-eyebrow { letter-spacing: .1em; line-height: 1.5; }

/* 2. The tan band becomes the sage tint the rest of the site uses. The old
      theme put white text on that tan, so the text colours have to come with
      it or the band is unreadable - the ground is light now. */
.background-color-tan,
.section_contact-band.background-color-tan {
  background-color: var(--sage-tint) !important;
  color: var(--body);
}
.background-color-tan h1, .background-color-tan h2,
.background-color-tan h3, .background-color-tan h4,
.background-color-tan b, .background-color-tan strong { color: var(--ink); }
.background-color-tan p, .background-color-tan li, .background-color-tan span { color: var(--body); }
.background-color-tan a:not([class]) { color: var(--sage-deep); }
/* A button drawn for a dark tan ground disappears on a light one. */
.background-color-tan .button:not(.is-ghost) { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.background-color-tan .button.is-ghost { color: var(--ink); border-color: var(--sage-line); }

/* ===========================================================================
   THE BLOG  (2026-09-09, evening)
   /blog/ and /blog/<slug>/, built by .tmp/build-blog.mjs from the 157 posts
   the old WordPress site published. Two layouts that appear on no other
   page: the feature spread on the overview (one long read beside two short
   ones) and the year archive (one <details> per year, a row per post). The
   article itself is the long-form frame every migrated page already uses
   (`.lf-layout.lf-split`), with the sticky head carrying a table of contents
   and a byline instead of a note.
   ======================================================================== */
/* the sticky head of an article: contents, then byline, then the picture */
.bl-toc { margin-top: 1.4rem; counter-reset: toc; }
.bl-toc li { counter-increment: toc; display: flex; gap: .7rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--rule); font-size: calc(.92rem * var(--t-text)); line-height: 1.45; }
.bl-toc li::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.bl-toc a { color: var(--fg); text-decoration: none; }
.bl-toc a:hover { color: var(--sage-deep); }
.bl-byline { display: grid; gap: .55rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.bl-byline div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem; align-items: baseline; }
.bl-byline dt { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.bl-byline dd { margin: 0; font-size: calc(.9rem * var(--t-text)); line-height: 1.5; color: var(--fg-body); }
.bl-byline dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
/* a section that only continues the one above it: no rule, no gap */
.lf-section[data-cont] { margin-top: 1rem; padding-top: 0; border-top: 0; }
.lf-steps { display: grid; gap: .6rem; margin: 1rem 0; padding-left: 1.4rem; }
.lf-steps li { font-size: var(--f-body); line-height: 1.6; color: var(--fg-body); }
.lf-section p a { color: var(--sage-deep); text-decoration: none; border-bottom: 1px solid var(--sage-line, var(--rule-strong)); }
.lf-section p a:hover { color: var(--ink); border-color: var(--ink); }

/* a post card, in the feature spread, the read-next row and the topics row */
.bl-kicker { display: flex; flex-wrap: wrap; gap: .3rem 0; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.bl-kicker span + span::before { content: "\00b7"; margin: 0 .55em; color: var(--fg-soft); }
.bl-card h3 a { color: inherit; text-decoration: none; }
.bl-card h3 a:hover { color: var(--sage-deep); }
.bl-card .is-soon { color: var(--fg-soft); }
.bl-soon { margin-top: auto; padding-top: .6rem; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); }
.bl-feature { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .bl-feature { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .bl-feature .bl-card-big { grid-row: 1 / span 2; }
}
.bl-card-big .card_media { flex: 1 1 auto; min-height: 16rem; }
.bl-card-big .card_media img { aspect-ratio: auto; height: 100%; min-height: 16rem; }
.bl-card-big h3 { font-size: var(--f-h3); max-width: 22ch; }
.bl-card-big > p:not(.bl-kicker) { font-size: var(--f-lede); line-height: 1.65; }
.bl-topics .card_no { margin-bottom: .2rem; }
.bl-topics .card { color: inherit; }

/* the year archive */
.bl-archive { border-top: 1px solid var(--rule-strong); }
.bl-year { border-bottom: 1px solid var(--rule-strong); }
.bl-year summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.2rem 0; font-family: var(--font-display); font-weight: 500; font-size: var(--f-h3); color: var(--fg); font-variation-settings: "SOFT" 100, "opsz" 144; }
.bl-year summary::-webkit-details-marker { display: none; }
.bl-year summary small { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.bl-year summary small::after { content: "+"; margin-left: 1rem; font-size: 1.2em; color: var(--accent); }
.bl-year[open] summary small::after { content: "\2212"; }
.bl-rows { padding-bottom: 1.2rem; }
.bl-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: .2rem 1.2rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--rule); }
.bl-row time { font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .06em; color: var(--fg-soft); }
.bl-row a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule-strong); line-height: 1.45; }
.bl-row a:hover { color: var(--sage-deep); border-color: var(--sage-deep); }
.bl-row .is-soon { color: var(--fg-soft); line-height: 1.45; }
.bl-row em { font-style: normal; font-family: var(--font-ui); font-size: var(--f-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); white-space: nowrap; }
@media (max-width: 767px) {
  .bl-row { grid-template-columns: minmax(0, 1fr); }
  .bl-row em { white-space: normal; }
}

/* == end of the stylesheet: page blocks are appended above this line == */