/*! Elite Orthodontics & Pediatric Dentistry. Site stylesheet.
    The class-based form of the homepage approved after the two Loom reviews,
    plus a corrections layer (section 15) and the interior system (section 16).
    Mobile first, one file, no framework, self hosted fonts. Every colour is
    lifted from the Elite logo. */

/* ==========================================================================
   0. FONTS - self hosted, variable, latin subset. No third party request.
   ========================================================================== */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var-latin.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TOKENS - every colour is lifted from the Elite logo
   ========================================================================== */
:root {
  --ink: #1a1236;
  --ink-deep: #120c26;
  --body: #5a5570;
  --muted: #948fa8;
  --line: #e6e3ee;
  --paper: #fbfafc;
  --mist: #f3f1f7;
  --card: #fff;

  --ortho: #462d88;
  --ortho-dark: #35206a;
  --ortho-tint: #eee9f7;
  --ped: #0b6f7d;
  --ped-dark: #085966;
  --ped-tint: #e3f4f6;
  --cyan: #3aecf1;
  --star: #e0a32e;
  --warn: #9a7b33;
  --warn-bg: rgba(180, 118, 42, 0.08);

  --display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --text: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* fluid type: mobile value first, desktop ceiling second */
  --fs-h1: clamp(2rem, 1.15rem + 3.7vw, 3.825rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.5875rem);
  --fs-h3: clamp(1.375rem, 1.18rem + 0.95vw, 1.8rem);
  --fs-h4: clamp(1.0625rem, 1.02rem + 0.24vw, 1.3125rem);
  --fs-lede: clamp(1.03rem, 0.99rem + 0.22vw, 1.1875rem);
  --fs-body: 1.03rem;
  --fs-sm: 0.925rem;
  --fs-xs: 0.82rem;

  --gut: 1.25rem;
  --wrap: 82rem;
  --sect: clamp(3.25rem, 2.2rem + 4.4vw, 6.5rem);
  --r-ctl: 6px;
  --r-card: 10px;
  --lift: 0 1px 2px rgba(26, 18, 54, 0.05), 0 18px 38px -24px rgba(26, 18, 54, 0.34);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.14; letter-spacing: -0.028em; }
h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.037em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.026em; }
h4 { font-size: var(--fs-h4); font-family: var(--text); font-weight: 600; letter-spacing: -0.01em; line-height: 1.32; }

p, ul, ol, figure, blockquote, table { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--ortho); text-decoration: none; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ortho); outline-offset: 2px; border-radius: 3px;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-ctl) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sect); }
.section--tight { padding-block: calc(var(--sect) * 0.66); }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist); border-block: 1px solid var(--line); }
.section--card { background: var(--card); border-top: 1px solid var(--line); }
.section--ped { background: var(--ped-tint); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

/* on an ink field the pediatric accent is unreadable, so it becomes the logo cyan */
.section--ink, .site-footer, .panel--dark, .card--ink { --ped: var(--cyan); }

.grid { display: grid; gap: 1.25rem; }
.grid--2, .grid--3, .grid--4, .grid--5, .grid--6, .grid--7 { grid-template-columns: 1fr; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.between { display: flex; flex-direction: column; gap: 1.5rem; }

.sect-head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.sect-head__copy { max-width: 42rem; }
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex-shrink: 0; }
.eyebrow--ortho { color: var(--ortho); }
.eyebrow--ped { color: var(--ped); }
.eyebrow--dual::before { background: var(--ortho); }
.eyebrow--dual::after { content: ""; width: 1.75rem; height: 2px; background: var(--ped); order: -1; margin-right: -0.4rem; }
.section--ink .eyebrow { color: rgba(255, 255, 255, 0.6); }
.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--body); text-wrap: pretty; }
h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 1rem; }
.section--ink .lede { color: rgba(255, 255, 255, 0.68); }

/* ==========================================================================
   4. THE ARCH - the logo mark is a half dome on a flat base, which is also a
   dental arch. Portrait and square images take it. Landscape never does.
   ========================================================================== */
.arch { border-radius: 9999px 9999px 12px 12px; overflow: hidden; background: var(--ortho-tint); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.arch--echo { position: relative; }
.arch--echo::before {
  content: ""; position: absolute; inset: -1.5rem -1.5rem auto auto; width: 100%; height: 100%;
  background: var(--ortho-tint); border-radius: inherit; z-index: -1;
}
@media (max-width: 28.75rem) { .arch { border-radius: 190px 190px 12px 12px; } }

/* branded stand-in for any slot with no authentic photograph behind it */
.panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center; padding: 1.75rem; border-radius: var(--r-card);
  background-color: var(--ortho-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cpath d='M14 66V36a24 24 0 0 1 48 0v30' fill='none' stroke='%23462d88' stroke-opacity='.2' stroke-width='1.6'/%3E%3C/svg%3E");
}
.panel--ped {
  background-color: var(--ped-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cpath d='M14 66V36a24 24 0 0 1 48 0v30' fill='none' stroke='%230b6f7d' stroke-opacity='.22' stroke-width='1.6'/%3E%3C/svg%3E");
}
.panel--dark {
  background-color: rgba(255, 255, 255, 0.045);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cpath d='M14 66V36a24 24 0 0 1 48 0v30' fill='none' stroke='%233aecf1' stroke-opacity='.2' stroke-width='1.6'/%3E%3C/svg%3E");
}
.panel__k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ortho); }
.panel--ped .panel__k { color: var(--ped); }
.panel--dark .panel__k { color: var(--cyan); }
.panel__note { font-size: var(--fs-sm); line-height: 1.5; color: var(--body); max-width: 20rem; }
.panel--dark .panel__note { color: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   5. BUTTONS - the two lanes share geometry exactly. Only hue differs.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: var(--r-ctl);
  font-family: var(--text); font-size: 0.97rem; font-weight: 600; line-height: 1.25; text-align: center;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn svg { flex-shrink: 0; }
.btn--ortho { background: var(--ortho); color: #fff; }
.btn--ortho:hover { background: var(--ortho-dark); color: #fff; }
.btn--ped { background: var(--ped); color: #fff; }
.btn--ped:hover { background: var(--ped-dark); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-deep); color: #fff; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ortho); }
.btn--light:hover { background: var(--ortho-tint); color: var(--ortho); }
.btn--cyan { background: var(--cyan); color: var(--ink); }
.btn--cyan:hover { background: #7ff2f5; color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { min-height: 58px; font-size: 1.03rem; }
.btn[aria-disabled="true"] { background: #c3bfd2; pointer-events: none; }
.section--ink .btn--outline { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.section--ink .btn--outline:hover { background: #fff; color: var(--ink); }

/* a booking button that carries the next open slot under its label */
.btn--stacked { align-items: center; text-align: left; padding: 0.8rem 1.5rem; }
.btn__wrap { display: flex; align-items: center; gap: 0.85rem; width: 100%; }
.btn__wrap > span { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.btn--stacked .btn__slot { font-size: 0.8rem; font-weight: 400; line-height: 1.35; color: rgba(255, 255, 255, 0.74); }
.btn--stacked .btn__slot strong { color: #fff; font-weight: 600; }
.btn--stacked .tbd { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.45); }

.pill {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0 1.05rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
}
.pill svg { color: var(--ortho); flex-shrink: 0; }
.pill:hover { border-color: var(--ortho); color: var(--ink); }

.tlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.tlink:hover { border-bottom-color: var(--ink); color: var(--ink); }
.section--ink .tlink { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.3); }

.tag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.7rem; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ortho-tint); color: var(--ortho);
}
.tag--ped { background: var(--ped-tint); color: var(--ped); }
.tag--warn { background: rgba(180, 118, 42, 0.12); color: var(--warn); }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.8rem;
  border: 1px solid var(--line); border-radius: 4px; font-size: var(--fs-sm); color: var(--body);
}

/* unverified content. Nothing in this state reaches production. */
.tbd { color: var(--warn); background: var(--warn-bg); border-bottom: 1px dashed rgba(180, 118, 42, 0.5); padding: 0 3px; font-style: italic; }
.section--ink .tbd { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.card--lift { box-shadow: var(--lift); }
.card--ortho { border-top: 4px solid var(--ortho); }
.card--ped { border-top: 4px solid var(--ped); }
.card--ink { background: var(--ink); color: #fff; border-color: transparent; }
.card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.card__body > * { margin: 0; }
.card__media { aspect-ratio: 16 / 10; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.svc {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink);
}
.svc:hover { border-color: var(--ortho); color: var(--ink); }
.svc svg { color: var(--ortho); }
.svc p { font-size: var(--fs-sm); line-height: 1.55; color: var(--body); }
.svc--ped { background: #fff; border-color: rgba(11, 111, 125, 0.22); flex-direction: row; gap: 0.9rem; }
.svc--ped:hover { border-color: var(--ped); }
.svc--ped svg { color: var(--ped); flex-shrink: 0; margin-top: 2px; }
.svc--unverified { border-style: dashed; border-color: rgba(180, 118, 42, 0.5); background: rgba(255, 255, 255, 0.55); position: relative; }
.svc--unverified .tag { position: absolute; top: 0.7rem; right: 0.7rem; }
.svc--cta { background: var(--ortho); color: #fff; justify-content: space-between; }
.svc--cta p { color: rgba(255, 255, 255, 0.78); }
.svc--cta:hover { background: var(--ortho-dark); color: #fff; }

.person__photo { aspect-ratio: 4 / 5; }
.person h3 { margin-top: 0.85rem; }
.person p { font-size: var(--fs-sm); line-height: 1.55; color: var(--body); }
.person--sm h4 { margin-top: 0.7rem; font-size: 0.93rem; }
.person--sm .person__photo { aspect-ratio: 1 / 1.16; }

.quote { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--r-card); background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12); }
.quote__mark { font-family: var(--display); font-size: 2.6rem; line-height: 0.6; color: var(--cyan); }
.quote blockquote { margin: 1.1rem 0 0; font-family: var(--display); font-size: 1.15rem; font-weight: 500; line-height: 1.42; color: #fff; text-wrap: pretty; }
.quote figcaption { margin-top: auto; padding-top: 1.5rem; display: flex; align-items: center; gap: 0.8rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); }
.quote__avatar {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 999px 999px 8px 8px; background: rgba(58, 236, 241, 0.16); color: var(--cyan);
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
}
.quote__who { display: block; color: #fff; font-weight: 600; }

.stars { display: inline-flex; gap: 2px; color: var(--star); }
.rating { display: flex; align-items: center; gap: 0.65rem; }
.rating__num { font-family: var(--display); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.numbered { display: flex; flex-direction: column; }
.numbered__item { display: flex; gap: 1.1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.numbered__item:last-child { border-bottom: 0; }
.numbered__n { font-family: var(--display); font-size: 0.95rem; font-weight: 700; color: var(--ortho); flex-shrink: 0; padding-top: 0.35rem; min-width: 2rem; }
.numbered h3 { font-family: var(--text); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.012em; }
.numbered p { margin-top: 0.6rem; color: var(--body); }

.ticks { display: flex; flex-direction: column; gap: 0.8rem; }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; list-style: none; }
.ticks svg { color: var(--ortho); flex-shrink: 0; margin-top: 4px; }
.ticks { padding: 0; margin: 0; }

.proof { display: grid; gap: 0; }
.proof__item { padding-block: 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); display: flex; gap: 0.9rem; align-items: flex-start; }
.proof__item:last-child { border-bottom: 0; }
.proof__item svg { color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.proof__item h3 { font-family: var(--text); font-size: 0.97rem; font-weight: 600; letter-spacing: -0.005em; }
.proof__item p { margin-top: 0.35rem; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.65); }

/* ==========================================================================
   7. FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field > label, .field__label {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--body);
}
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0.75rem 0.95rem;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper);
  font-family: var(--text); font-size: 0.97rem; color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a5a1b8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ortho); background: #fff; box-shadow: 0 0 0 3px rgba(70, 45, 136, 0.15);
}
.field--error input { border-color: #b33a3a; }
.field__error { font-size: 0.8rem; color: #b33a3a; }

.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.5rem;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  font-size: var(--fs-sm); font-weight: 500; color: var(--body); cursor: pointer; text-align: center;
}
.choice input:checked + label { border: 1.5px solid var(--ortho); background: var(--ortho-tint); color: var(--ortho); font-weight: 600; }
.choice input:focus-visible + label { outline: 3px solid var(--ortho); outline-offset: 2px; }
.choice--ped input:checked + label { border-color: var(--ped); background: var(--ped-tint); color: var(--ped); }

.steps { display: grid; gap: 0.75rem; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.steps__n { font-family: var(--display); font-size: 0.8rem; font-weight: 700; color: var(--ortho); }
.steps p { margin-top: 0.35rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--body); }

/* ==========================================================================
   8. FAQ - details/summary, no JavaScript needed
   ========================================================================== */
.faq { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.25rem; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.008em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 18px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5570' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__a { padding: 0 1.25rem 1.25rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--body); }

/* ==========================================================================
   9. HEADER
   ========================================================================== */
.util { background: var(--ink-deep); color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; }
.util__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 46px; }
.util a { color: rgba(255, 255, 255, 0.72); display: inline-flex; align-items: center; gap: 0.5rem; }
.util a:hover { color: #fff; }
.util__primary a { color: #fff; font-weight: 600; }
.util__left, .util__right { display: flex; align-items: center; gap: 1.1rem; }
.util__social { display: flex; align-items: center; gap: 0.8rem; }
.util__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.18); }

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 60; }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand img { width: 132px; }
.brand__sep { width: 1px; height: 28px; background: var(--line); }
.brand__desc { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.085em; text-transform: uppercase; color: var(--body); line-height: 1.35; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; color: var(--ink); cursor: pointer;
}
.icon-btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }

.nav-desktop { display: none; }
.nav-toggle { display: flex; }
.cta-desktop { display: none; }
.util { display: none; }

/* mobile drawer */
.nav-drawer {
  position: fixed; inset: 0; z-index: 100; background: var(--paper);
  display: flex; flex-direction: column; padding: var(--gut);
  transform: translateX(100%); transition: transform 0.22s ease; visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-drawer[data-open="true"] { transform: none; visibility: visible; }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer > ul > li > a,
.nav-drawer .menu-item > a {
  display: flex; align-items: center; min-height: 52px; font-size: 1.1rem; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.nav-drawer .sub-menu { padding-left: 0.9rem; border-left: 2px solid var(--ortho-tint); margin-bottom: 0.5rem; }
.nav-drawer .sub-menu a { font-size: 0.97rem; font-weight: 500; color: var(--body); min-height: 46px; border-bottom: 0; }
.nav-drawer__cta { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
body.nav-open { overflow: hidden; }

/* ==========================================================================
   10. PAGE HERO (interior pages)
   ========================================================================== */
.phero { background: var(--paper); padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.phero__in { display: flex; flex-direction: column; gap: 1.5rem; }
.phero h1 { text-wrap: pretty; }
.phero--ortho { background: var(--ortho-tint); }
.phero--ped { background: var(--ped-tint); }
.breadcrumbs { font-size: var(--fs-xs); color: var(--body); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumbs a { color: var(--body); }
.breadcrumbs a:hover { color: var(--ortho); }

/* ==========================================================================
   11. ARTICLE / EDITOR CONTENT
   ========================================================================== */
.prose { max-width: 44rem; font-size: 1.06rem; line-height: 1.72; color: var(--body); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.5rem; color: var(--ink); }
.prose h3 { margin-top: 2rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.45rem; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote {
  margin: 1.75rem 0; padding: 1rem 0 1rem 1.25rem; border-left: 3px solid var(--ortho);
  font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: var(--ink);
}
.prose img, .prose .wp-block-image { border-radius: var(--r-card); }
.prose figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--fs-sm); color: var(--body); }
.meta__rev { display: inline-flex; align-items: center; gap: 0.5rem; }
.reviewed {
  display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; font-size: var(--fs-sm); color: var(--body);
}
.reviewed img { width: 48px; height: 54px; border-radius: 999px 999px 4px 4px; object-fit: cover; flex-shrink: 0; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 0.75rem;
  border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
}
.pagination .page-numbers.current { background: var(--ortho); border-color: var(--ortho); color: #fff; }

/* ==========================================================================
   12. FOOTER + STICKY ACTION BAR
   ========================================================================== */
.site-footer { background: var(--ink-deep); color: rgba(255, 255, 255, 0.62); padding-top: 3rem; font-size: var(--fs-sm); }
.site-footer h3 { font-family: var(--text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.site-footer a { color: rgba(255, 255, 255, 0.62); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .brand img { filter: brightness(0) invert(1); }
.site-footer .brand__sep { background: rgba(255, 255, 255, 0.22); }
.site-footer .brand__desc { color: rgba(255, 255, 255, 0.72); }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; padding-bottom: 2.5rem; }
.footer__brandcol { grid-column: 1 / -1; }
.footer__phone { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 1.05rem; font-weight: 600; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-ctl); }
.footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 1.5rem 2rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--fs-xs); }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 54px 1fr 1fr; gap: 0.6rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -14px rgba(26, 18, 54, 0.4);
}
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--r-ctl); font-size: 0.9rem; font-weight: 600; }
.actionbar__call { border: 1px solid var(--line); color: var(--ink); }
body { padding-bottom: 5.5rem; }

/* ==========================================================================
   13. BREAKPOINTS - mobile first, so everything above this line is the phone
   ========================================================================== */
@media (min-width: 40rem) {
  .grid--2, .grid--4, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3, .grid--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card__body { padding: 1.75rem; }
}

@media (min-width: 64rem) {
  :root { --gut: 2.5rem; }
  body { padding-bottom: 0; }
  .actionbar { display: none; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none; }
  .cta-desktop { display: inline-flex; }
  .util { display: block; }
  .header-actions .icon-btn:not(.nav-toggle) { display: none; }

  .nav-desktop { display: flex; align-items: center; gap: 1.1rem; }
  .nav-desktop ul { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
  .nav-desktop a { color: var(--ink); font-size: 0.87rem; font-weight: 500; white-space: nowrap; padding-bottom: 2px; }
  .nav-desktop a:hover { color: var(--ortho); }
  .nav-desktop .current-menu-item > a, .nav-desktop .current-menu-ancestor > a { border-bottom: 0px solid var(--ortho); }
  .nav-desktop li { position: relative; }
  .nav-desktop .sub-menu {
    position: absolute; top: 100%; left: -1rem; min-width: 15rem; display: none; flex-direction: column;
    gap: 0; padding: 0.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--lift); z-index: 70;
  }
  .nav-desktop li:hover > .sub-menu, .nav-desktop li:focus-within > .sub-menu { display: flex; }
  .nav-desktop .sub-menu a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--r-ctl); font-size: 0.9rem; }
  .nav-desktop .sub-menu a:hover { background: var(--ortho-tint); }

  .site-header__in { min-height: 88px; }
  .brand img { width: 158px; }
  .brand__sep { height: 33px; }
  .brand__desc { font-size: 0.63rem; }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .grid { gap: 1.5rem; }

  .between { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; }
  .sect-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }

  .proof { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Divider rules sit in their own gutter: copy never touches a border. */
  .proof__item { padding: 2.25rem 2rem; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); flex-direction: column; gap: 0.85rem; }
  .proof__item:first-child { padding-left: 0; }
  .proof__item:last-child { padding-right: 0; border-right: 0; }

  .numbered__item { gap: 1.75rem; padding-block: 2rem; }
  .card__body { padding: 2.25rem 2.5rem 2.5rem; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.75rem; padding-bottom: 3.5rem; }
  .footer__brandcol { grid-column: auto; }
  .footer__legal { flex-direction: row; align-items: center; justify-content: space-between; }
  .phero__in { max-width: 52rem; }
  .quote blockquote { font-size: 1.3rem; }
}

/* ==========================================================================
   14. PRINT
   ========================================================================== */
/* Under-hero proof band: keep copy off the divider rules at every width.
   Five narrow columns only once there is genuinely room for them. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  /* Three across, then two across: no orphan column, no rule left hanging. */
  .proof { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .proof__item { grid-column: span 2; padding: 1.9rem 1.75rem; }
  .proof__item:nth-child(4), .proof__item:nth-child(5) { grid-column: span 3; }
  .proof__item:nth-child(1), .proof__item:nth-child(4) { padding-left: 0; }
  .proof__item:nth-child(3), .proof__item:nth-child(5) { padding-right: 0; border-right: 0; }
  .proof__item:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .proof__item { padding-block: 1.6rem; }
  .proof__item:last-child { grid-column: 1 / -1; }
  .proof__item:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media print {
  .util, .site-header, .actionbar, .nav-drawer, .site-footer nav { display: none; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1rem; }
}


/* ==========================================================================
   15. CORRECTIONS

   Everything above this line is the approved stylesheet: the class-based
   reproduction of the homepage the client signed off after the two Loom
   reviews. Everything below is additive and closes a fault that was measured
   in a browser. Nothing here changes how the approved homepage renders at
   390 or at 1440, except the three colour tokens in 15.3, which are noted.
   ========================================================================== */

/* --- 15.1 the tag -----------------------------------------------------------
   In the approved artboard every tag carries align-self: flex-start inline.
   The class reproduction dropped it, and inside a flex column a tag stretches
   to the column width: 522px in the client's screenshot. Pinned here at the
   root, so it cannot come back in any other column. Text blocks that should
   fill the column still do. */
.card__body { align-items: flex-start; }
.card__body > p, .card__body > .row, .card__body > ul, .card__body > .ticks,
.card__body > form, .card__body > .steps, .card__body > .table-scroll, .card__body > .grid,
.card__body > .stack, .card__body > .faq, .card__body > .prose, .card__body > .btn--block,
.card__body > .amelia__slot, .card__body > .amelia__steps, .card__body > .person { align-self: stretch; }
.tag, .chip, .stars, .rating { align-self: flex-start; }

/* --- 15.2 WCAG ----------------------------------------------------------------
   Three tokens measured below AA. Small print at 2.99:1 on paper, the amber
   markers at 3.84:1, the rating stars at 2.22:1 on white. Each is the nearest
   darker value of the same hue that clears the bar on every light field the
   site uses; on the dark fields the star goes back to a bright gold. */
:root { --muted: #6f6b7e; --warn: #80662a; --star: #b38225; }
.section--ink, .site-footer, .card--ink, .panel--dark { --star: #e8ad33; }

/* --- 15.3 the approved mobile ------------------------------------------------
   The approved mobile artboard was 13,350px tall. The class reproduction
   stacked everything to one column, which made the same page 22,061px. These
   restore what the artboard actually did: three portraits across in the hero,
   provider cards and review cards that swipe, staff three across, treatment
   cards two across. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
/* Phone only. An unqualified rule here sits later in the file than the approved
   64rem grid rules and would beat them at every width; that is how a four
   column grid once rendered as two columns on desktop. */
@media (max-width: 39.9375rem) {
  .grid--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .svc--ped { flex-direction: column; }
  .svc--ped svg { margin-top: 0; }
}
@media (min-width: 40rem) and (max-width: 47.9375rem) {
  .grid--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rail {
  display: flex; gap: 0.9rem; overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 var(--rail-w, 264px); scroll-snap-align: start; }
.rail--quotes > * { flex-basis: 290px; }


@media (min-width: 64rem) {
  .rail { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; gap: 1.5rem; }
  .rail > * { flex: none; }
}

/* --- 15.4 the masthead at 1024 ----------------------------------------------
   Desktop chrome switches on at 64rem. At exactly 1024 the brand (249px), the
   nav (663px), the button (141px) and their gaps need 1085px inside a 944px
   container, so the Book Appointment button was pushed past the viewport and
   clipped. That is iPad landscape. Between 64rem and 73.75rem the nav takes
   its own row under the brand; from 73.75rem the approved single row returns. */
@media (min-width: 64rem) and (max-width: 73.6875rem) {
  .site-header__in { flex-wrap: wrap; min-height: 0; padding-top: 0.85rem; }
  .brand, .header-actions { min-height: 56px; }
  .nav-desktop { order: 3; flex-basis: 100%; border-top: 1px solid var(--line); margin-top: 0.5rem; }
  .nav-desktop ul { gap: 1.5rem; }
  .nav-desktop a { display: inline-flex; align-items: center; min-height: 46px; padding-bottom: 0; }
}
.header-actions { flex-shrink: 0; }
.cta-desktop { white-space: nowrap; }

/* --- 15.5 tablet ---------------------------------------------------------------
   The approved artboards are 390 and 1440. Between 40rem and 64rem the
   stylesheet had nothing for two-column layouts, so a split stacked and a
   section head lost its lede. These open them earlier without touching the
   two approved widths. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
  .split--article { grid-template-columns: 1fr; }
  .sect-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phero__in--split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; }
}

/* --- 15.6 the article and its aside -----------------------------------------
   On the thirteen treatment pages the article column measured 2,179px beside
   an 844px aside, so 1,335px of every page was a dead gutter at every desktop
   width. The aside now travels with the reader, and the booking card is first
   in it, so the part a short laptop screen can see is the part that converts.
   align-self has to be start, or a sticky element is stretched to the row and
   never moves. */
.split__aside { align-self: start; }
@media (min-width: 64rem) {
  .split--article { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
  .split__aside { position: sticky; top: 1.5rem; }
}

/* --- 15.7 the interior hero ---------------------------------------------------
   The approved interior hero is one column capped at 52rem, which on a 1440
   screen leaves the right half of the first screen empty. Pages with something
   worth putting there now put it there: on a treatment page, the specialty,
   the typical length, the specialist and the booking action. The card is the
   approved card. */
.phero__in--split .phero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.phero__in--split .phero__copy > * { margin: 0; }
.phero__aside .card__body dl { margin: 0; display: flex; flex-direction: column; align-self: stretch; }
.phero__aside .card__body dl div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding-block: 0.65rem; border-top: 1px solid var(--line);
}
.phero__aside dt { font-size: var(--fs-sm); color: var(--body); flex-shrink: 0; }
.phero__aside dd { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-align: right; }
.phero__who { display: flex; align-items: center; gap: 0.85rem; font-size: var(--fs-sm); line-height: 1.4; }
.phero__who .arch { width: 54px; flex-shrink: 0; aspect-ratio: 4 / 5; }
@media (min-width: 64rem) {
  .phero__in--split { display: grid; grid-template-columns: 1.55fr minmax(19rem, 1fr); gap: 3.5rem; align-items: center; max-width: none; }
}

/* --- 15.8 one specialist ------------------------------------------------------
   Elite has one pediatric specialist. Rendered as one card inside a three
   column grid, two thirds of the row was empty: the client's second
   screenshot. One person gets a spotlight, built from the approved card. */
.spotlight { display: grid; gap: 1.5rem; align-items: center; }
.spotlight__photo { display: block; width: 100%; max-width: 17rem; aspect-ratio: 4 / 5; }
.spotlight .card__body { gap: 0.8rem; }
@media (min-width: 40rem) {
  .spotlight { grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 2rem; }
}
@media (min-width: 64rem) {
  .spotlight { grid-template-columns: minmax(14rem, 19rem) 1fr; gap: 3rem; }
}

/* --- 15.9 the booking wizard --------------------------------------------------
   Booking is the Amelia plugin, which the client asked for after the approved
   design was drawn. The approved booking card stays exactly as it was: heading,
   one line, three steps, phone fallback. The five fields in the middle become
   the space Amelia renders into, drawn as the shape it takes and captioned so
   nobody reads it as real availability. */
.amelia__slot { width: 100%; }
.amelia__frame {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--ortho-tint), var(--paper)); padding: 1.1rem;
}
.amelia__prog { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.amelia__prog span {
  flex: 1 1 5rem; min-height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.amelia__prog .is-on { background: var(--ortho); border-color: var(--ortho); color: #fff; }
.amelia__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.amelia__cell { aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); }
.amelia__cell.is-on { background: var(--ortho); border-color: var(--ortho); }
.amelia__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.amelia__chips span { height: 34px; flex: 1 1 4.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); }
.amelia__slotnote { margin: 0.75rem 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); text-align: center; }
.amelia__lane { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ortho); }
[data-lane="ped"] .amelia__lane { color: var(--ped); }
[data-lane="ped"] .amelia__prog .is-on, [data-lane="ped"] .amelia__cell.is-on { background: var(--ped); border-color: var(--ped); }
[data-lane="ped"] .amelia__frame { background: linear-gradient(180deg, var(--ped-tint), var(--paper)); }

/* --- 15.10 links that went nowhere -----------------------------------------
   Eight article teasers and the town list pointed at "#". They are planned
   content, and the brief forbids writing the clinical text to fill them, so
   the card says so rather than sending the visitor back to the top. */
.resource { padding: 1.25rem; }
.resource h3 { margin-top: 0.85rem; font-family: var(--text); font-size: 1.02rem; font-weight: 600; line-height: 1.34; color: var(--ink); }
.resource__by { display: block; margin-top: 1rem; font-size: var(--fs-sm); color: var(--body); }
.chip--planned {
  margin-top: 0.75rem; background: var(--warn-bg); border-color: rgba(128, 102, 42, 0.32); color: var(--warn);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.svc--static { cursor: default; }
.svc--static:hover { border-color: var(--line); }

/* --- 15.11 a real photograph on the contact page ------------------------------
   The homepage keeps its approved map placeholder, which stands in for the
   Google Business Profile embed. The contact page, whose whole job is getting
   someone to the door, shows the door. */
.shot { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); background: var(--ortho-tint); aspect-ratio: 16 / 10; color: #fff; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__cap {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 0.25rem;
  padding: 2.5rem 1.25rem 1.25rem;
  background: linear-gradient(180deg, rgba(18, 12, 38, 0) 0%, rgba(18, 12, 38, 0.82) 62%);
}
.shot__cap .panel__k { color: #fff; }
.shot__cap .panel__note { color: rgba(255, 255, 255, 0.82); max-width: none; }

/* --- 15.12 keyboard and screen reader ----------------------------------------
   The one focus ring was brand violet, invisible on every dark field. */
.section--ink :where(a, button, summary):focus-visible,
.card--ink :where(a, button):focus-visible,
.util :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible { outline-color: #fff; }

/* --- 15.13 the closing card on a phone ---------------------------------------
   Below 64rem the approved closing card's two halves are a plain block, and
   with gap:0 inline the photo slot sat flush against the copy. */
.cta-card .panel--dark { min-height: 12rem; }
@media (min-width: 64rem) { .cta-card .panel--dark { min-height: 16rem; } }

/* --- 15.14 the logo link ------------------------------------------------------
   The approved 66px bar holds a 132px logo, a 39px tall link. A taller hit
   area inside the same bar changes nothing visible. */
.brand { min-height: 44px; }

/* --- 15.15 treatment cards on a phone ----------------------------------------
   The approved mobile artboard set treatment cards two across with a two line
   summary. The pediatric grid was stacking to one column, and the desktop
   summaries ran to five lines, which is most of the gap between 13,350px and
   what the class reproduction produced. Two across, three lines, and the full
   summary is one tap away on the treatment page. */
@media (max-width: 39.9375rem) {
  .grid--svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .svc p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* --- 15.16 two tap targets under 40px --------------------------------------
   Desktop nav links measured 20px tall (22px with the underline). The target
   grows upward to 40px; the text and the underline do not move, and the
   header keeps its height because the margin cancels the padding. The doctor
   name links in the provider cards measured 28px on a phone; same treatment,
   in both directions. Layout is unchanged in both cases. */
@media (min-width: 64rem) {
  .nav-desktop > ul > li > a { display: inline-block; padding-top: 18px; margin-top: -18px; }
}
.person h3 a { display: inline-block; padding-block: 8px; margin-block: -8px; }


/* ==========================================================================
   16. THE INTERIOR SYSTEM

   The homepage is approved and frozen. Everything else on the site is built
   from the same tokens, type, arch and buttons, but the pages themselves had
   one shape: a flat tinted rectangle with text on the left, then a stack of
   bordered boxes. This section gives the interior pages a real layout system.

   Devices, in the order a visitor meets them:
     ihero      a hero with a visual, the brand arch as a large faint shape,
                and a facts strip that overlaps into the page
     subnav     a sticky "on this page" bar for long treatment pages
     timeline   the five steps as a spine with numbered nodes
     meet       the treating specialist, at portrait size
     disc       an icon on a tinted disc, on every treatment card
     table      a proper comparison table
   ========================================================================== */

/* --- shared ---------------------------------------------------------------- */
:root { --r-big: 16px; }
.section > .wrap > [id], main [id] { scroll-margin-top: 5.5rem; }

/* --- 16.1 the interior hero --------------------------------------------------
   The approved interior hero was a flat tint with text on the left and the
   right half empty. This one keeps the tint, adds the logo arch as a large
   faint shape running off the top right, and gives the right half a visual:
   Elite's own treatment illustration in a white arch, or the specialists.   */
.ihero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper);
  padding-block: clamp(2.25rem, 1.4rem + 3vw, 4rem) clamp(4.5rem, 3.5rem + 4vw, 7rem);
}
.ihero--ortho { background: radial-gradient(60% 80% at 86% 12%, rgba(70, 45, 136, 0.1), transparent 64%), var(--ortho-tint); }
.ihero--ped { background: radial-gradient(60% 80% at 86% 12%, rgba(11, 111, 125, 0.1), transparent 64%), var(--ped-tint); }
.ihero--paper { background: radial-gradient(55% 70% at 50% 0%, rgba(70, 45, 136, 0.06), transparent 62%), var(--paper); }
/* a hero without a visual is centred: no half-empty first screen */
.ihero__in--solo { grid-template-columns: minmax(0, 46rem); justify-content: center; text-align: center; }
.ihero__in--solo .ihero__copy { align-items: center; }
.ihero__in--solo .ihero__copy > * { justify-content: center; }
.ihero__in--solo .ihero__copy .lede { max-width: 54ch; }
.ihero__in { display: grid; gap: 2rem; align-items: center; }
.ihero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.ihero__copy > * { margin: 0; }
.ihero__copy .lede { max-width: 40ch; }
.ihero__copy h1 { text-wrap: balance; }
.ihero__visual { display: flex; justify-content: center; }
.ihero__art {
  width: min(100%, 22rem); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 9999px 9999px var(--r-big) var(--r-big);
  background: #fff; box-shadow: var(--lift);
  display: flex; align-items: center; justify-content: center;
}
.ihero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.ihero__art--mark img { width: 58%; height: auto; object-fit: contain; }
.ihero__art--mark { background: #fff; }
.ihero__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: min(100%, 30rem); }
.ihero__pair .arch { aspect-ratio: 4 / 5; background: #fff; box-shadow: var(--lift); }
.ihero__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; width: min(100%, 34rem); }
.ihero__trio .arch { aspect-ratio: 4 / 5; background: #fff; box-shadow: var(--lift); }
.ihero__figure {
  font-family: var(--display); font-size: clamp(4rem, 2.5rem + 6vw, 7.5rem); font-weight: 700;
  line-height: 0.9; letter-spacing: -0.045em; color: var(--ortho); font-variant-numeric: tabular-nums;
}
.ihero__figure small { display: block; margin-top: 0.75rem; font-family: var(--text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body); }

@media (min-width: 48rem) {
  .ihero__in { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
  .ihero__visual { justify-content: flex-end; }
}
@media (min-width: 64rem) {
  .ihero__in { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
  .ihero__art { width: min(100%, 24rem); }
}

/* --- 16.2 the facts strip ----------------------------------------------------
   The questions a page is opened to answer, in a white strip that overlaps
   the hero's bottom edge. Two across on a phone, one row on desktop.        */
.facts {
  position: relative; z-index: 2; margin-top: -3rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--lift);
  overflow: hidden;
}
.fact { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.fact:nth-child(even)::before { content: ""; position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem; width: 1px; background: var(--line); }
.fact--cta::before { display: none; }
.fact__k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body); }
.fact__v { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.fact__v .tbd { font-style: normal; }
.fact--who { flex-direction: row; align-items: center; gap: 0.85rem; }
.fact--who .arch { width: 44px; flex-shrink: 0; aspect-ratio: 4 / 5; }
.fact--who > div { display: flex; flex-direction: column; gap: 0.2rem; }
.fact--cta { grid-column: 1 / -1; border-right: 0; border-bottom: 0; padding: 1rem 1.25rem; background: var(--paper); }
.fact--cta .btn { width: 100%; }
@media (min-width: 64rem) {
  .facts { grid-template-columns: repeat(var(--facts, 4), minmax(0, 1fr)) auto; margin-top: -3.5rem; }
  .fact { border-bottom: 0; padding: 1.35rem 1.5rem; }
  .fact:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 1px; background: var(--line); }
  .fact--cta::before { display: block; }
  .fact--cta { grid-column: auto; border-right: 0; display: flex; align-items: center; justify-content: center; padding: 1rem 1.25rem; background: #fff; }
  .fact--cta .btn { width: auto; min-width: 13rem; }
}

/* --- 16.3 the sticky "on this page" bar ------------------------------------ */
.subnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 252, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav ul {
  display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 0.85rem;
  font-size: 0.86rem; font-weight: 600; color: var(--body); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--ink); }
.subnav a.is-current { color: var(--ortho); border-bottom-color: var(--ortho); }
.ihero--ped ~ .subnav a.is-current, [data-lane="ped"] .subnav a.is-current { color: var(--ped); border-bottom-color: var(--ped); }
@media (min-width: 64rem) {
  .subnav ul { margin-inline: 0; padding-inline: 0; gap: 0.5rem; }
  .subnav a { min-height: 52px; padding: 0 1rem; }
}

/* --- 16.4 the timeline ---------------------------------------------------------
   Five steps used to be a list with a number beside each. A spine with
   numbered nodes reads as a sequence, which is what it is.                   */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 3.25rem; display: flex; flex-direction: column; gap: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 1.125rem; top: 1.25rem; bottom: 1.25rem; width: 2px; background: var(--line); }
.timeline__step { position: relative; }
.timeline__n {
  position: absolute; left: -3.25rem; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--ortho-tint); color: var(--ortho);
  font-family: var(--display); font-size: 0.8rem; font-weight: 700; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.timeline--ped .timeline__n { background: var(--ped-tint); color: var(--ped); }
.timeline h3 { font-family: var(--text); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.012em; padding-top: 0.35rem; }
.timeline p { margin-top: 0.45rem; color: var(--body); }

/* --- 16.5 the specialist -------------------------------------------------------
   The treating specialist at portrait size, on a tinted field, instead of a
   thumbnail in a sidebar card.                                                 */
.meet { display: grid; gap: 1.5rem; align-items: center; }
.meet__photo { width: min(100%, 15rem); aspect-ratio: 4 / 5; box-shadow: var(--lift); background: #fff; }
.meet__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.meet__body > * { margin: 0; }
.meet__role { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--ortho); }
.meet--ped .meet__role { color: var(--ped); }
.meet__body p { color: var(--body); max-width: 52ch; }
@media (min-width: 40rem) { .meet { grid-template-columns: minmax(11rem, 15rem) 1fr; gap: 2.5rem; } }
@media (min-width: 64rem) { .meet { grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 3.5rem; } .meet__photo { width: min(100%, 18rem); } }

/* --- 16.6 icon discs -------------------------------------------------------------
   A bare stroke icon floating in a card is the tell of a template. On a
   tinted disc it becomes a component.                                        */
.disc {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: var(--ortho-tint); color: var(--ortho);
}
.disc--ped { background: var(--ped-tint); color: var(--ped); }
.disc--ink { background: rgba(255, 255, 255, 0.1); color: var(--cyan); }
.svc .disc { margin-bottom: 0.25rem; }
.svc--ped .disc { margin-bottom: 0; }

/* --- 16.7 cards and motion -------------------------------------------------------
   Depth on the things you can press, and nothing else.                       */
.svc, .card--lift, .person .arch img, .resource { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.svc:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.svc--static:hover { transform: none; box-shadow: none; }
a.card:hover, .card--lift:hover { box-shadow: 0 1px 2px rgba(26, 18, 54, 0.05), 0 24px 44px -26px rgba(26, 18, 54, 0.4); }
.arch img { transition: transform 0.45s ease; }
.person a:hover .arch img, .meet__photo:hover img, .ihero__pair a:hover img, .ihero__trio a:hover img { transform: scale(1.03); }
.section--mist .card, .section--ped .card, .ihero .card { border-color: transparent; }
.svc--tile { background: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(26, 18, 54, 0.05); }
.section--paper .svc--tile { border-color: var(--line); box-shadow: none; }

/* --- 16.8 the comparison table --------------------------------------------------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.table th { text-align: left; padding: 0.8rem 0.9rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body); border-bottom: 1px solid var(--line); }
.table th.is-ortho { color: var(--ortho); }
.table th.is-ped { color: var(--ped); }
.table td { padding: 0.95rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td:first-child { font-weight: 600; color: var(--ink); }
.table tbody tr:nth-child(odd) td { background: var(--paper); }
.table tbody tr:last-child td { border-bottom: 0; }

/* --- 16.9 a rail of small portraits ---------------------------------------------
   The patient care team is one row: seven across on desktop, as approved,
   and one swipeable row below that, so it never becomes a grid of giant
   portraits at tablet widths or under Windows display scaling.               */
.rail--staff > * { flex: 0 0 118px; }
.rail--staff .person__photo { aspect-ratio: 1 / 1.16; }

/* --- 16.10 two column FAQ page ---------------------------------------------------- */
.faqpage { display: grid; gap: 2rem; }
.faqpage__nav { display: none; }
@media (min-width: 64rem) {
  .faqpage { grid-template-columns: 15rem 1fr; gap: 4rem; align-items: start; }
  .faqpage__nav { display: block; position: sticky; top: 5rem; }
  .faqpage__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
  .faqpage__nav a { display: block; padding: 0.55rem 0.85rem; border-radius: var(--r-ctl); font-size: var(--fs-sm); font-weight: 600; color: var(--body); }
  .faqpage__nav a:hover { background: var(--mist); color: var(--ink); }
}

/* --- 16.11 a quote pulled into a page ------------------------------------------- */
.pull { padding: 1.75rem; border-radius: var(--r-card); background: var(--ink); color: #fff; }
.pull blockquote { margin: 0.75rem 0 0; font-family: var(--display); font-size: 1.2rem; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.pull figcaption { margin-top: 1rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.62); }
.pull .quote__mark { color: var(--cyan); }

/* --- 16.12 interior section heads ----------------------------------------------- */
.sect-head--center { align-items: center; text-align: center; }
.sect-head--center .sect-head__copy { margin-inline: auto; }
.sect-head--center .eyebrow { justify-content: center; }
.kicker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.kicker .tag { align-self: center; }
.kicker__rule { flex: 1; height: 1px; background: var(--line); }

/* --- 16.13 photography ---------------------------------------------------------
   The client's two references, and their own words: real images, not icons at
   image size. A photo takes an approved slot without changing the slot's box:
   the tiled arch stand-in disappears behind it. Treatment cards on interior
   pages carry a photo head. Every hero visual is a photograph.               */
.panel.has-photo { padding: 0; position: relative; overflow: hidden; background-image: none; }
.panel.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.panel.has-photo .panel__k, .panel.has-photo .panel__note { display: none; }
a.panel.has-photo:hover img { transform: scale(1.02); }
.panel.has-photo img { transition: transform 0.45s ease; }
.ihero__art--photo img { object-position: center 35%; }
.ihero__art--wide { aspect-ratio: 5 / 4; width: min(100%, 30rem); border-radius: var(--r-big); }
@media (min-width: 64rem) { .ihero__art--wide { width: min(100%, 34rem); } }

.svc--img { padding: 0; overflow: hidden; }
.svc--img .svc__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ortho-tint); }
.svc--img .svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.svc--img:hover .svc__media img { transform: scale(1.04); }
.svc--img > div { padding: 1.1rem 1.25rem 1.3rem; }
.svc--img .disc { position: absolute; top: 0.85rem; left: 0.85rem; margin: 0; box-shadow: 0 6px 16px -8px rgba(26, 18, 54, 0.5); background: #fff; }
.svc--img { position: relative; }
.svc--ped.svc--img { flex-direction: column; }
.svc--img .tag--warn { top: 0.85rem; right: 0.85rem; }
@media (max-width: 39.9375rem) { .svc--img .svc__media { aspect-ratio: 16 / 11; } .svc--img > div { padding: 0.9rem 1rem 1.1rem; } }

/* the dark closing card's lede was falling back to body grey on ink: 2.1:1 */
.card--ink .lede { color: rgba(255, 255, 255, 0.72); }

/* 16.14 A lone card in the last row of a two column phone grid takes the full
   width, instead of sitting alone on the left. Only odd counts are affected;
   the approved homepage grids are even and never match. */
@media (max-width: 39.9375rem) {
  .grid--svc > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 16.15 The closing card's photograph fills its column. The approved slot was a
   16:9 tile that left the dark field showing beneath it; with a real picture
   the box stretches to the card's height on desktop and keeps a 16:10 frame
   where the card stacks. */
   The stretch has to open at the same width the split becomes two columns,
   which corrections 15.5 does at 48rem, not 64rem. At 768 a 16:10 tile is
   about 227px in a row about 560px tall, so a third of the column was bare
   ink below the photograph. */
.cta-card .panel.has-photo { aspect-ratio: 16 / 10; }
@media (min-width: 48rem) {
  .cta-card .panel.has-photo { aspect-ratio: auto; align-self: stretch; min-height: 18rem; }
}

/* 16.16 Alternatives inside a treatment article: a compact row with a
   thumbnail, not a full-width photo card. */
.svc--row, .svc--ped.svc--row { flex-direction: row; align-items: center; gap: 1rem; padding: 0.75rem 1rem 0.75rem 0.75rem; }
.svc--row .svc__thumb { width: 5.25rem; aspect-ratio: 1; flex-shrink: 0; border-radius: var(--r-ctl); overflow: hidden; background: var(--ortho-tint); }
.svc--row .svc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc--row > div { min-width: 0; }
.svc--row p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc--row .disc { margin: 0; }

/* 16.17 The centred hero must beat the desktop two-column template, which is
   declared later in 16.1 at 64rem with the same specificity. */
.ihero__in.ihero__in--solo { grid-template-columns: minmax(0, 46rem); justify-content: center; }

/* --- 16.18 the facts strip with an odd number of cells ---------------------
   Below the desktop row the strip is two across. An odd count left the last
   fact in the left cell with the right half of the white card empty, its
   bottom rule stopping halfway across and no divider beside it: it read as a
   broken card rather than as white space. The odd one out now takes the full
   width. Scoped to max-width on purpose, so the 64rem row above still wins. */
@media (max-width: 63.9375rem) {
  .facts:not(:has(.fact--cta)) > .fact:last-child:nth-child(odd),
  .facts:has(.fact--cta) > .fact:nth-child(odd):nth-last-child(2) { grid-column: 1 / -1; }
  /* the card draws its own bottom edge, so the last row should not draw one */
  .facts:not(:has(.fact--cta)) > .fact:last-child,
  .facts:not(:has(.fact--cta)) > .fact:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ==========================================================================
   17. THE PREMIUM LAYER
   The approved design language, raised to the finish the client's references
   set: softer surfaces, deliberate depth, tinted icon tiles, photography that
   carries the page, and a set of components that turn long copy into
   something scannable instead of a document. Nothing here moves a section or
   changes an approved page's content; it changes how every component is made.

   Order matters. This file is appended after the approved 64rem block, so an
   unqualified rule here beats the base at every width. That is intended for
   the refinements below, and every phone-only override still lives inside a
   max-width query.
   ========================================================================== */

/* --- 17.0 tokens ---------------------------------------------------------- */
:root {
  /* radii: the base shipped 10px, which reads flat beside the references */
  --r-ctl: 10px;
  --r-card: 16px;
  --r-big: 24px;
  --r-media: 14px;
  --r-tile: 14px;

  /* depth, tinted with the ink hue rather than neutral black */
  --sh-xs: 0 1px 2px rgba(26, 18, 54, 0.05);
  --sh-sm: 0 1px 2px rgba(26, 18, 54, 0.04), 0 6px 16px -10px rgba(26, 18, 54, 0.22);
  --sh-md: 0 2px 6px -2px rgba(26, 18, 54, 0.08), 0 18px 40px -22px rgba(26, 18, 54, 0.3);
  --sh-lg: 0 6px 16px -6px rgba(26, 18, 54, 0.12), 0 40px 72px -34px rgba(26, 18, 54, 0.36);
  --lift: var(--sh-md);

  /* second tint steps, for fields that sit next to the first */
  --ortho-tint-2: #f6f3fc;
  --ped-tint-2: #f0f9fa;
  --sand: #faf7f2;
  --line-soft: #efedf5;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t-med: 0.28s var(--ease);

  /* one lane variable the components read, so a section can switch lanes */
  --lane: var(--ortho);
  --lane-dark: var(--ortho-dark);
  --lane-tint: var(--ortho-tint);
  --lane-tint-2: var(--ortho-tint-2);
}

/* a pediatric field, a pediatric card, or anything inside one, switches lane */
.section--ped, .ihero--ped, [data-lane="ped"], .svc--ped, .card--ped, .meet--ped, .band--ped {
  --lane: var(--ped);
  --lane-dark: var(--ped-dark);
  --lane-tint: var(--ped-tint);
  --lane-tint-2: var(--ped-tint-2);
}
.section--ink, .card--ink, .panel--dark, .site-footer, .band--ink {
  --lane: var(--cyan);
  --lane-dark: var(--cyan);
  --lane-tint: rgba(255, 255, 255, 0.1);
  --lane-tint-2: rgba(255, 255, 255, 0.06);
}

/* --- 17.1 type ------------------------------------------------------------ */
.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--body); }
.eyebrow { font-size: 0.76rem; letter-spacing: 0.14em; }
.sect-head { margin-bottom: 2.5rem; }
.sect-head h2 { text-wrap: balance; }
.sect-head__copy .lede { margin-top: 0.9rem; }
/* an orphan on a two or three word last line reads as a mistake */
h1, h2, h3, .rev__text { text-wrap: balance; }
.prose p { max-width: 68ch; }
.prose h2, .prose h3 { margin-top: 2.5rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* --- 17.2 controls -------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  box-shadow: var(--sh-xs);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.btn:active { transform: none; }
.btn--stacked { border-radius: var(--r-card); }
.btn--outline { box-shadow: none; }
.btn--outline:hover { box-shadow: var(--sh-sm); }
.pill {
  border-radius: 999px;
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.pill:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.tag, .chip { border-radius: 999px; }

/* --- 17.3 surfaces -------------------------------------------------------- */
.card { border-color: var(--line-soft); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med); }
.card--lift { box-shadow: var(--sh-sm); }
a.card:hover, .card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--lane) 26%, var(--line-soft)); }
.card--ortho, .card--ped { border-top-width: 3px; }
.card__body { padding: 1.6rem; gap: 0.85rem; }
.card__media { border-radius: 0; overflow: hidden; }
.panel { border-radius: var(--r-card); }

/* --- 17.4 icon tiles ------------------------------------------------------
   The references put every icon on a soft tinted tile. This replaces the flat
   disc, keeps the same markup, and works in either lane. */
.disc, .itile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; flex-shrink: 0;
  border-radius: var(--r-tile);
  background: var(--lane-tint);
  color: var(--lane);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lane) 12%, transparent);
  transition: background var(--t-med), color var(--t-med), transform var(--t-med);
}
.disc svg, .itile svg { color: currentColor; }
.itile--lg { width: 3.5rem; height: 3.5rem; border-radius: 18px; }
.itile--sm { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.itile--solid { background: var(--lane); color: #fff; box-shadow: var(--sh-sm); }
a:hover > .disc, a:hover .itile--hover { background: var(--lane); color: #fff; }

/* --- 17.5 feature strip ---------------------------------------------------
   Three or four proof points under a hero: tile, label, one line. */
.fstrip { display: grid; gap: 1rem; margin-top: 1.75rem; }
.fstrip__item { display: flex; align-items: flex-start; gap: 0.8rem; }
.fstrip__item .itile { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.fstrip__k { display: block; font-weight: 650; font-size: 0.97rem; color: var(--ink); line-height: 1.3; }
.fstrip__v { display: block; font-size: var(--fs-sm); color: var(--body); line-height: 1.45; margin-top: 0.15rem; }
@media (min-width: 30rem) { .fstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; } }
@media (min-width: 64rem) { .fstrip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 17.6 checklist ------------------------------------------------------- */
.checks { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.55; color: var(--body); }
.checks li strong { color: var(--ink); font-weight: 650; }
.checks li::before {
  content: "";
  width: 1.4rem; height: 1.4rem; margin-top: 0.12rem; flex-shrink: 0;
  border-radius: 999px;
  background: var(--lane-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23462d88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lane) 14%, transparent);
}
[data-lane="ped"] .checks li::before, .section--ped .checks li::before, .checks--ped li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6f7d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.checks--x li::before {
  background-color: rgba(154, 123, 51, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a7b33' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(154, 123, 51, 0.2);
}

/* --- 17.7 the numbered flow ----------------------------------------------
   Three or four steps with a connecting rule, horizontal from tablet up. */
.flow { display: grid; gap: 1.5rem; counter-reset: flow; }
.flow__step { position: relative; display: flex; gap: 1rem; counter-increment: flow; }
.flow__n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 999px;
  background: #fff; color: var(--lane);
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  box-shadow: inset 0 0 0 2px var(--lane), var(--sh-xs);
}
.flow__step h3 { font-family: var(--text); font-size: 1.06rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.flow__step p { margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--body); line-height: 1.55; }
@media (max-width: 47.9375rem) {
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute; left: 1.32rem; top: 3rem; bottom: -1.5rem;
    width: 2px; background: linear-gradient(var(--lane-tint), transparent);
  }
}
@media (min-width: 48rem) {
  .flow { grid-template-columns: repeat(var(--flow, 3), minmax(0, 1fr)); gap: 2rem; }
  .flow__step { flex-direction: column; gap: 1rem; }
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute; left: 3.25rem; top: 1.32rem; right: -2rem; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  }
}

/* --- 17.8 quotes ---------------------------------------------------------- */
.rev {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem 1.6rem 1.5rem;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.rev:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.rev__mark { position: absolute; top: 0.9rem; right: 1.2rem; font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--lane-tint); pointer-events: none; }
.rev__text { font-size: 1.02rem; line-height: 1.62; color: var(--ink); }
.rev__who { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: 0.25rem; }
.rev__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 999px;
  background: var(--lane-tint); color: var(--lane);
  font-family: var(--display); font-weight: 700; font-size: 0.95rem;
}
.rev__name { display: block; font-weight: 650; font-size: 0.97rem; color: var(--ink); }
.rev__meta { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* --- 17.9 stat and trust cards -------------------------------------------- */
.stats { display: grid; gap: 1rem; }
.stat {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.4rem 1.35rem;
  background: var(--lane-tint-2); border: 1px solid color-mix(in srgb, var(--lane) 10%, transparent);
  border-radius: var(--r-card);
}
.stat__n { font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; color: var(--lane); }
.stat__k { font-weight: 650; font-size: 0.99rem; color: var(--ink); }
.stat__v { font-size: var(--fs-sm); color: var(--body); line-height: 1.5; }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stats { grid-template-columns: repeat(var(--stats, 4), minmax(0, 1fr)); gap: 1.25rem; } }

/* --- 17.10 media split ----------------------------------------------------
   Photograph beside copy, the shape the references use for every "why us". */
.duo { display: grid; gap: 2rem; align-items: center; }
.duo__media { position: relative; border-radius: var(--r-big); overflow: hidden; box-shadow: var(--sh-md); background: var(--lane-tint); }
.duo__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.duo__media--tall img { aspect-ratio: 4 / 5; }
.duo__copy > * + * { margin-top: 1.1rem; }
.duo__badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: var(--sh-sm);
}
.duo__badge .itile { width: 2.1rem; height: 2.1rem; border-radius: 999px; }
.duo__badge span { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); line-height: 1.25; }
@media (min-width: 64rem) {
  .duo { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .duo--wide-copy { grid-template-columns: 1.15fr 1fr; }
  .duo--flip .duo__media { order: 2; }
}

/* --- 17.11 the conversion band -------------------------------------------- */
.band {
  position: relative; overflow: hidden;
  border-radius: var(--r-big);
  background: linear-gradient(135deg, var(--lane-dark), var(--lane));
  color: #fff;
  display: grid; gap: 0;
}
.band--ink { background: linear-gradient(135deg, var(--ink-deep), #2a1d54); }
.band__copy { padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.band__copy h2 { color: #fff; }
.band__copy p { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-lede); line-height: 1.55; max-width: 34rem; }
.band__media { position: relative; min-height: 14rem; }
.band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; }
.band__note { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.7); }
.band__note a { color: #fff; font-weight: 600; }
@media (min-width: 64rem) {
  .band { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
  .band--media-left { grid-template-columns: 1fr 1.25fr; }
  .band--media-left .band__media { order: -1; }
}

/* --- 17.12 the callout ----------------------------------------------------
   The one paragraph a page exists to answer, lifted out of the prose. */
.callout {
  display: flex; gap: 1.1rem;
  padding: 1.5rem 1.5rem 1.5rem 1.35rem;
  background: var(--lane-tint-2);
  border: 1px solid color-mix(in srgb, var(--lane) 14%, transparent);
  border-radius: var(--r-card);
}
.callout__k { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lane); margin-bottom: 0.4rem; }
.callout p { font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.callout--plain { background: #fff; box-shadow: var(--sh-sm); }

/* --- 17.13 the two panels ------------------------------------------------- */
.vs { display: grid; gap: 1.25rem; }
.vs__panel { padding: 1.5rem; border-radius: var(--r-card); border: 1px solid var(--line-soft); background: #fff; box-shadow: var(--sh-xs); }
.vs__panel h3 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--text); font-size: 1.04rem; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 1rem; }
.vs__panel--yes { background: var(--lane-tint-2); border-color: color-mix(in srgb, var(--lane) 14%, transparent); }
.vs__panel--no { background: var(--sand); border-color: rgba(154, 123, 51, 0.16); }
@media (min-width: 48rem) { .vs { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* --- 17.14 article cards --------------------------------------------------- */
.post { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-xs); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med); }
.post:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--lane) 24%, var(--line-soft)); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--lane-tint); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.3rem 1.4rem; flex-grow: 1; }
.post__k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lane); }
.post h3 { font-family: var(--text); font-size: 1.05rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.35; color: var(--ink); }
.post p { font-size: var(--fs-sm); color: var(--body); line-height: 1.55; }
.post__foot { margin-top: auto; padding-top: 0.6rem; font-size: var(--fs-sm); font-weight: 650; color: var(--lane); }

/* --- 17.15 people --------------------------------------------------------- */
.profile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-xs); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med); }
a.profile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--lane) 24%, var(--line-soft)); }
.profile__photo { aspect-ratio: 1 / 1.1; overflow: hidden; background: var(--lane-tint); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform 0.5s var(--ease); }
a.profile:hover .profile__photo img { transform: scale(1.035); }
.profile__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.profile__name { font-family: var(--text); font-size: 1.04rem; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); }
.profile__role { font-size: var(--fs-sm); color: var(--body); }
.profile__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.profile__tags .tag { font-size: 0.72rem; padding: 0.2rem 0.6rem; }

/* --- 17.16 tables ---------------------------------------------------------
   The comparison table is the one place a page is genuinely tabular. It gets
   a tinted header, generous cells and a rounded frame instead of ruled rows. */
.table-scroll { border: 1px solid var(--line-soft); border-radius: var(--r-card); box-shadow: var(--sh-xs); background: #fff; }
.table { font-size: var(--fs-body); }
.table th { background: var(--lane-tint-2); color: var(--ink); font-size: 0.72rem; border-bottom-color: var(--line-soft); padding: 0.95rem 1.15rem; }
.table th.is-ortho { background: var(--ortho-tint); color: var(--ortho); }
.table th.is-ped { background: var(--ped-tint); color: var(--ped); }
.table td { padding: 1.05rem 1.15rem; border-bottom-color: var(--line-soft); font-size: var(--fs-sm); }
.table tbody tr:nth-child(odd) td { background: transparent; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--lane-tint-2); }

/* --- 17.17 accordion ------------------------------------------------------
   Separated cards rather than one ruled block: each question reads as its own
   thing to open, and the open one is clearly the open one. */
.faq { border: 0; border-radius: 0; background: transparent; overflow: visible; display: flex; flex-direction: column; gap: 0.75rem; }
.faq details {
  border: 1px solid var(--line-soft); border-radius: var(--r-card); background: #fff;
  box-shadow: var(--sh-xs); overflow: hidden;
  transition: box-shadow var(--t-med), border-color var(--t-med);
}
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary { padding: 1.15rem 3.25rem 1.15rem 1.35rem; font-weight: 650; color: var(--ink); }
.faq summary:hover { color: var(--lane); }
.faq summary::after { right: 1.25rem; }
.faq details[open] { box-shadow: var(--sh-sm); border-color: color-mix(in srgb, var(--lane) 22%, var(--line-soft)); }
.faq details[open] summary { color: var(--lane); }
.faq__a { padding: 0 1.35rem 1.35rem; font-size: var(--fs-body); }

/* --- 17.18 service cards --------------------------------------------------
   The interior card the references made: photograph, a tile that overlaps it,
   title, one line, and a quiet affordance that it is a link. */
.svc { border-color: var(--line-soft); border-radius: var(--r-card); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med); }
.svc:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--lane) 28%, var(--line-soft)); }
.svc--img .svc__media { border-radius: 0; }
/* the tile sits on the photograph, as the references place their badges */
.svc--img .disc { top: 0.85rem; left: 0.85rem; bottom: auto; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); box-shadow: var(--sh-sm); }
.svc--img .svc__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 18, 54, 0.22), rgba(26, 18, 54, 0) 42%);
}
.svc--img .svc__media { position: relative; }
.svc__more { margin-top: auto; padding-top: 0.9rem; font-size: var(--fs-sm); font-weight: 650; color: var(--lane); }
.svc:hover .svc__more { text-decoration: underline; text-underline-offset: 3px; }
.svc--cta { background: linear-gradient(140deg, var(--ortho-dark), var(--ortho)); border-color: transparent; justify-content: center; }
.svc--cta:hover { background: linear-gradient(140deg, var(--ortho-dark), #291852); }
.svc--cta > div { display: flex; flex-direction: column; gap: 0.5rem; }

/* --- 17.19 section rhythm -------------------------------------------------- */
.section--mist { background: var(--mist); border-block-color: var(--line-soft); }
.section--sand { background: var(--sand); }
.section--tintortho { background: var(--ortho-tint-2); }
.section--tintped { background: var(--ped-tint-2); }
/* a band that sits on the seam between two sections */
.section--flush-bottom { padding-bottom: 0; }
.bleed-band { margin-bottom: calc(var(--sect) * -0.5); position: relative; z-index: 2; }

/* --- 17.20 heroes --------------------------------------------------------- */
.ihero__art { border-radius: 9999px 9999px var(--r-big) var(--r-big); box-shadow: var(--sh-lg); }
.ihero__art--wide { border-radius: var(--r-big); }
.ihero__pair .arch, .ihero__trio .arch, .arch { border-radius: 9999px 9999px var(--r-media) var(--r-media); }
.ihero__figure { border-radius: var(--r-big); }
.ihero__visual { position: relative; }
/* a small floating proof chip on the hero picture, as the references do */
.ihero__chip {
  position: absolute; z-index: 2; left: 50%; bottom: -1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
  padding: 0.6rem 1rem 0.6rem 0.65rem;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: var(--sh-md);
}
.ihero__chip .itile { width: 2rem; height: 2rem; border-radius: 999px; }
.ihero__chip b { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.ihero__chip span { font-size: var(--fs-xs); color: var(--body); }
@media (min-width: 64rem) { .ihero__chip { left: auto; right: 1.5rem; transform: none; } }

/* --- 17.21 the facts strip ------------------------------------------------- */
.facts { border-radius: var(--r-card); border-color: var(--line-soft); box-shadow: var(--sh-md); }
.fact__k { color: var(--muted); letter-spacing: 0.1em; }
.fact--cta { background: var(--lane-tint-2); }

/* --- 17.22 the timeline --------------------------------------------------- */
.timeline__n { box-shadow: inset 0 0 0 2px var(--lane), var(--sh-xs); background: #fff; color: var(--lane); }

/* --- 17.23 the sub navigation --------------------------------------------- */
.subnav { background: rgba(255, 255, 255, 0.86); border-bottom-color: var(--line-soft); }
.subnav a { border-radius: 999px 999px 0 0; }

/* --- 17.24 phone ----------------------------------------------------------- */
@media (max-width: 39.9375rem) {
  .card__body { padding: 1.25rem; }
  .quote { padding: 1.4rem 1.25rem 1.25rem; }
  .callout { padding: 1.25rem; gap: 0.9rem; }
  .band__copy { gap: 0.85rem; }
  .band__media { min-height: 11rem; }
  .duo { gap: 1.5rem; }
  .flow { gap: 1.25rem; }
  .stat { padding: 1.15rem 1.15rem; }
  .stat__n { font-size: 1.6rem; }
}

/* --- 17.25 a person with no portrait --------------------------------------
   The practice lists two people whose photographs are not ours to publish.
   Their initials hold the frame rather than a stranger's face. */
.person__photo--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--lane-tint);
  color: var(--lane);
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.02em;
}
.rail--staff .person__photo--initials { font-size: 1.25rem; }

/* --- 17.26 the wide provider card ------------------------------------------
   In a two column grid a 4:5 portrait rendered 600px tall, which is the
   giant-portrait fault in a different place. The portrait is now a fixed
   column beside the text. The approved homepage keeps its own three-across
   card, which is why this is a modifier. */
@media (min-width: 40rem) {
  .person--wide { display: grid; grid-template-columns: 11rem 1fr; gap: 1.75rem; align-items: start; }
  .person--wide > a { display: block; }
  .person--wide > div { margin-top: 0 !important; }
}
@media (min-width: 64rem) {
  .person--wide { grid-template-columns: 13rem 1fr; gap: 2rem; }
}

/* --- 17.27 the patient care team -------------------------------------------
   Nine people with nine different jobs. Compact rows, three across, so the
   roles are readable and no portrait is blown up to fill a column. */
.crew { gap: 0.85rem; }
.crew__card {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 999px;
  box-shadow: var(--sh-xs);
}
.crew__photo {
  width: 3.1rem; height: 3.1rem; flex-shrink: 0; border-radius: 999px; overflow: hidden;
  background: var(--lane-tint);
  display: flex; align-items: center; justify-content: center;
}
.crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.crew__photo--initials { color: var(--lane); font-family: var(--display); font-weight: 700; font-size: 0.95rem; }
.crew__body { display: flex; flex-direction: column; min-width: 0; }
.crew__name { font-weight: 650; font-size: 0.97rem; color: var(--ink); line-height: 1.25; }
.crew__role { font-size: var(--fs-sm); color: var(--body); line-height: 1.3; }
@media (max-width: 39.9375rem) { .crew { grid-template-columns: 1fr; } }

/* 17.28 A check item is exactly two flex children: the mark, and everything
   else. Without the span a bold lead-in became its own flex column. */
.checks li > span { min-width: 0; }

/* 17.29 The tile that closes an article row when the count is odd. */
.post--more { background: linear-gradient(140deg, var(--ortho-dark), var(--ortho)); border-color: transparent; justify-content: center; }
.post--more:hover { background: linear-gradient(140deg, var(--ortho-dark), #291852); }
.post--more .post__k { color: var(--cyan); }
.post--more h3, .post--more .post__foot { color: #fff; }
.post--more p { color: rgba(255, 255, 255, 0.76); }

/* 17.30 The pediatric lane on a homepage service card. */
.itile--ped { --lane: var(--ped); --lane-tint: var(--ped-tint); }
.svc--ped .itile svg { margin-top: 0; }