/* ============================================================
   HERONWATER PHYSIOTHERAPY (demo site by Arkline Design)
   Cool paper, heron blue bands, one warm plan card.
   Bricolage Grotesque 600 over Figtree. Bands and ruled rows, no cards.

   Order of this file:
     0  fonts and tokens
     1  base type, bands and the section head (eyebrow, question, answer, detail)
     2  buttons and links
     3  header (sticky under the Arkline bar) and the mobile menu
     4  shared pieces: rows, plan card, ruled list, stills, split, forms
     5  one block per section kind (hero ... contact_block)
     6  footer
     7  reveals and reduced motion

   Bands: .band-paper (default ground), .band-blue, .band-ink. A blue or ink
   band remaps --line, --hairline and --muted, so every component below reads
   correctly on any band without its own override. The plan card resets them,
   because it is always warm paper. The booking widget has its own booking.css;
   only its shell is here.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../_shared/fonts/bricolage-600.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../_shared/fonts/figtree.woff2") format("woff2");
}

/* ---------- 0. tokens (booking.css reads these names) ---------- */
:root {
  --bg: #F1F2EE;
  --surface: #FFFFFF;
  --ink: #1B2430;
  --muted: #4F5B67;
  --accent: #24536B;
  --accent-dark: #173A4D;
  --accent-soft: #DCE7EC;
  --warm: #F3DCC4;
  --line: #D5D8D2;
  --field-line: #7A8590;     /* 3.8:1 on the surface: a field edge stands on its own */
  --error: #9E2B1B;          /* 6.6:1 on paper */
  --radius: 3px;             /* the only rounding on the site: buttons, fields, chips */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.25, 0.6, 0.2, 1);
  --header-h: 68px;
  /* derived, used only in this file */
  --hairline: 1px solid var(--line);
  --paper-line: rgba(241, 242, 238, 0.28);   /* hairline on blue and on ink */
  --paper-muted: #D2DDE3;                    /* second-rank type on blue, 6:1 */
  --ink-muted: #B9C2CB;                      /* second-rank type on ink, 8.7:1 */
  --warm-line: #D9BFA3;                      /* the rules on the plan card */
  --pad-band: clamp(56px, 9vh, 112px);
}

/* ---------- 1. base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ark-bar-h, 36px) + var(--header-h) + 16px); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* figures: tabular, so 8:30 am, 45 min and $115 line up in a column */
.tnum, .num, .row-fig, .plan-rows dd, .plan-stub dd, .hours dd, .timetable td:last-child, .price-table td, .footer-hours dd, .contact-list dd { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 4.375rem); max-width: 14ch; }
h2 { font-size: clamp(1.875rem, 4vw, 3rem); max-width: 18ch; }
h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
p { max-width: 62ch; }
strong { font-weight: 600; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); position: relative; }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); position: relative; }
.band { padding-block: var(--pad-band); position: relative; }
.band-paper + .band-paper { border-top: var(--hairline); }
.band-blue { --line: var(--paper-line); --hairline: 1px solid var(--paper-line); --muted: var(--paper-muted); background: var(--accent); color: var(--bg); overflow: hidden; }
.band-ink { --line: var(--paper-line); --hairline: 1px solid var(--paper-line); --muted: var(--ink-muted); background: var(--ink); color: var(--bg); overflow: hidden; }
/* the heron, large and faint, standing on every blue band */
.band-blue::before, .band-ink::before {
  content: ""; position: absolute; top: 50%; right: -4%;
  width: min(58vw, 640px); aspect-ratio: 1; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 22v-7c0-4.4 2.6-7.5 7-7.5h1V3.5l3.5-1' fill='none' stroke='%23F1F2EE' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.07; pointer-events: none;
}
.band-ink::before { opacity: 0.045; }

/* the pattern every section opens with: eyebrow, the question, the one-line answer, the detail */
.sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.eyebrow { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.answer { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.4; max-width: 44ch; margin-top: 18px; }
.detail { color: var(--muted); margin-top: 14px; }
.detail + .detail { margin-top: 10px; }
.h-small { font-size: clamp(1.25rem, 2.2vw, 1.5rem); max-width: none; letter-spacing: -0.01em; }
.note { color: var(--muted); font-size: 0.9375rem; margin-top: 22px; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }
/* a number sits small beside its label, never before its meaning */
.num { font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
.band-blue :focus-visible, .band-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--bg); }
.skip {
  position: fixed; top: calc(var(--ark-bar-h, 36px) + 8px); left: 8px; z-index: 950;
  background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600;
  padding: 12px 16px; border-radius: var(--radius); transform: translateY(-300%);
}
.skip:focus-visible { transform: none; outline-color: var(--ink); }

/* ---------- 2. buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  border: 1.5px solid var(--accent); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-solid { background: var(--accent); color: var(--bg); }
.btn-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--accent-dark); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.btn-block { width: 100%; }
/* on a blue or ink band the solid button is paper and the ghost is drawn in paper */
.band-blue .btn-solid, .band-ink .btn-solid { background: var(--bg); color: var(--accent-dark); border-color: var(--bg); }
.band-blue .btn-solid:hover, .band-ink .btn-solid:hover { background: var(--surface); border-color: var(--surface); }
.band-blue .btn-ghost, .band-ink .btn-ghost { color: var(--bg); border-color: var(--paper-line); }
.band-blue .btn-ghost:hover, .band-ink .btn-ghost:hover { border-color: var(--bg); background: rgba(241, 242, 238, 0.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 599px) { .btn-row .btn-lg { width: 100%; } }
.text-link { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }
.tel { color: var(--accent-dark); font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tel:hover { text-decoration: underline; }
.band-blue .text-link, .band-ink .text-link, .band-blue .tel, .band-ink .tel, .band-blue .row-link h3, .band-ink .row-link h3 { color: var(--bg); }

/* ---------- 3. header ---------- */
.site-header {
  position: sticky; top: var(--ark-bar-h, 36px); z-index: 100;
  background: var(--bg); border-bottom: var(--hairline);
  transition: box-shadow 0.25s, background-color 0.25s;
}
.site-header.is-scrolled { background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(27, 36, 48, 0.06); }
html.ark-notes-on .site-header[data-note] { position: sticky; }
.site-header .ark-pin { left: 50%; top: calc(100% - 15px); margin-left: -15px; }
@media (min-width: 1200px) {
  .site-header .ark-pin { left: 224px; top: 50%; margin: -15px 0 0 0; }
  /* the docked notes rail shifts the page, not the header */
  html.ark-notes-on .site-header { margin-left: -360px; }
}
.header-inner {
  max-width: 1160px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px);
  min-height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; min-width: 0; }
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.brand-name small { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-call .num-long { display: none; }
.btn-call .num-short { display: inline; }
.nav-toggle {
  display: none; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  background: transparent; border: 1.5px solid transparent; border-radius: var(--radius);
  font-weight: 600; font-size: 0.9375rem; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--line); }
.nav-toggle .bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; flex: none; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }
.site-nav a { text-decoration: none; font-weight: 600; color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
/* wide: five links in the middle */
@media (min-width: 900px) {
  .header-inner { grid-template-columns: auto 1fr auto; gap: 24px; }
  .site-nav { display: flex; justify-content: center; gap: clamp(14px, 2vw, 28px); }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 0.9375rem; }
  .site-nav a:hover { color: var(--accent-dark); }
  .btn-call .num-long { display: inline; }
  .btn-call .num-short { display: none; }
}
/* narrow: the five links live behind a Menu button (JS), or as a plain row under the header (no JS) */
@media (max-width: 899px) {
  html.js .nav-toggle { display: inline-flex; }
  .brand { grid-area: 1 / 1; }
  .header-actions { grid-area: 1 / 2; }
  .site-nav { grid-area: 2 / 1 / 3 / -1; display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 4px 0 12px; border-top: var(--hairline); }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; }
  html.js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px clamp(16px, 4vw, 40px) 16px; background: var(--surface); border-top: 0; border-bottom: var(--hairline); box-shadow: 0 16px 32px rgba(27, 36, 48, 0.08); }
  html.js .site-nav.is-open { display: flex; }
  html.js .site-nav a { min-height: 52px; border-bottom: var(--hairline); font-size: 1.0625rem; }
  html.js .site-nav a:last-child { border-bottom: 0; }
  html.js .site-nav a[aria-current="page"] { text-decoration: none; }
  html.js .site-nav a[aria-current="page"]::after { content: "Now" / ""; margin-left: auto; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 599px) {
  :root { --header-h: 60px; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 6px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 1.0625rem; }
  .brand-name small { display: none; }
  .btn-call { padding: 0 12px; }
  .btn-call svg { display: none; }
  .btn-book { padding: 0 14px; }
  .nav-toggle { padding: 0; }
  .nav-toggle .label { display: none; }
}
@media (max-width: 379px) { .brand-name { display: none; } }

/* ---------- 4. shared pieces ---------- */

/* 4a. ruled rows: the name on the left, the figures on the right. Used by services,
   conditions, the practitioner list and anything else that is a list of named things. */
.rows { border-top: var(--hairline); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: start; padding: 18px 0; border-bottom: var(--hairline); }
.row-main { min-width: 0; }
.row-main h3 { margin-bottom: 4px; }
.row-main p { color: var(--muted); font-size: 1rem; }
.row-meta { display: block; color: var(--muted); font-size: 0.9375rem; margin-top: 4px; }
.row-fig { text-align: right; white-space: nowrap; font-weight: 600; line-height: 1.3; }
.row-fig small { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.rows-group { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 28px 0 8px; }
.rows-group:first-child { padding-top: 0; }
/* a row that is one link (conditions): the whole row is the target, 56px and up */
.row-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: start; padding: 16px 0; border-bottom: var(--hairline); text-decoration: none; min-height: 56px; }
.row-link h3 { color: var(--accent-dark); }
.row-link:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
/* a service row: main, the plan stub, then figures and the button */
.row.has-stub { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .row.has-stub { grid-template-columns: minmax(0, 1fr) 128px; } .row.has-stub .plan-stub { grid-column: 1 / -1; } }
/* 720 to 999px: the minutes, dollars and Book button stay beside the name (column 2, row 1) so the stub
   spans the row beneath; without this, auto-placement drops .row-side under the full-width stub */
@media (min-width: 720px) and (max-width: 999px) { .row.has-stub .row-side { grid-column: 2; grid-row: 1; } }
@media (min-width: 1000px) { .row.has-stub { grid-template-columns: minmax(0, 1fr) 236px 140px; gap: 12px 32px; } .row.has-stub .plan-stub { grid-column: auto; } }
@media (max-width: 599px) {
  .row, .row-link { grid-template-columns: 1fr; gap: 4px; }
  .row-fig { text-align: left; }
  .row-fig small { display: inline; margin-left: 6px; }
  .row-side { align-items: flex-start; }
}

/* 4b. the plan card: the one object. A ruled sheet on the warm tint, always ink on warm. */
.plan, .plan-stub { --muted: #4F5B67; --line: var(--warm-line); background: var(--warm); color: var(--ink); position: relative; }
.plan { padding: 26px 28px 22px 40px; box-shadow: 0 1px 0 var(--warm-line), 0 18px 40px -24px rgba(27, 36, 48, 0.35); }
.plan::before, .plan-stub::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 1px; background: var(--accent); opacity: 0.28; }
.plan-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.plan-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.1; margin: 4px 0 14px; }
.plan-rows > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.plan-rows > div:last-child { border-bottom: 1px solid var(--line); }
.plan-rows dt, .plan-stub dt { color: var(--muted); }
.plan-rows dd, .plan-stub dd { font-weight: 600; }
.plan-rows dd small { display: block; font-weight: 400; color: var(--muted); }
.plan-note { font-size: 0.8125rem; color: var(--muted); margin-top: 12px; max-width: none; }
@media (max-width: 419px) { .plan { padding: 22px 20px 18px 30px; } .plan::before { left: 18px; } .plan-rows > div { grid-template-columns: 1fr; gap: 0; } }
/* the stub that closes a service row: typical visits, labelled typical, and the review */
.plan-stub { padding: 12px 14px 12px 20px; font-size: 0.875rem; align-self: start; }
.plan-stub::before { left: 11px; }
.plan-stub > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.plan-stub > div:first-child { border-top: 0; padding-top: 0; }

/* 4c. the ruled definition list: label left, text right (insurance, checklist, steps, text_block items) */
.ruled { border-top: var(--hairline); }
.ruled > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; padding: 16px 0; border-bottom: var(--hairline); }
.ruled dt { font-weight: 600; }
.ruled dd { color: var(--muted); }
@media (min-width: 720px) { .ruled > div { grid-template-columns: minmax(200px, 0.6fr) minmax(0, 1fr); } }
/* a small numeral, an empty box, or a tag ahead of or after the label */
.ruled .k { display: inline-block; min-width: 1.6em; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.band-blue .ruled .k, .band-ink .ruled .k { color: var(--bg); }
.ruled .box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--accent); border-radius: 2px; margin-right: 12px; vertical-align: -1px; flex: none; }
.ruled .tag { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: 10px; vertical-align: 1px; }

/* 4d. stills: plain, unframed, no rounding; the caption is a line under the image */
.still-frame { margin: 0; }
.still-frame img { width: 100%; height: auto; background: var(--accent-soft); object-fit: cover; }
.still-frame figcaption { font-size: 0.9375rem; color: var(--muted); padding-top: 12px; }
.still-frame.ratio-3-2 img { aspect-ratio: 3 / 2; }
.still-frame.ratio-1-1 img { aspect-ratio: 1 / 1; }
.still-frame.ratio-3-4 img { aspect-ratio: 3 / 4; }

/* 4e. two columns: text left, an aside (plan card, still, hours) right */
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .split-even { grid-template-columns: 1fr 1fr; }
  .split-narrow-aside { grid-template-columns: minmax(0, 1fr) 380px; }
  .split-media-first { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* 4f. a plain form (the no-JavaScript booking fallback, or any form a page needs) */
.form { max-width: 560px; }
.field { display: grid; gap: 6px; margin-bottom: 20px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 600; font-size: 0.9375rem; padding: 0; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--field-line); border-radius: var(--radius); background: var(--surface);
  font-size: 1.0625rem; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field .choices { display: flex; flex-wrap: wrap; gap: 8px; }
.field .choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--field-line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.field .choice input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.error { color: var(--error); font-size: 0.875rem; }
.error[hidden] { display: none; }
.form-foot { font-size: 0.9375rem; color: var(--muted); margin-top: 14px; }

/* ---------- 5. section kinds ---------- */

/* hero: the question or the promise, the answer, two buttons; the plan card or a still beside */
.hero { padding-block: clamp(40px, 7vh, 88px) var(--pad-band); }
.hero .answer { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); max-width: 40ch; margin-top: 22px; }
.hero .detail { max-width: 52ch; }
.hero .note { margin-top: 20px; }
/* the plain variant (Services, Team): a statement with no aside beside it takes a wider measure than the 14ch Home line */
.hero-plain h1 { max-width: 20ch; font-size: clamp(2.25rem, 5.4vw, 3.875rem); }
.hero-plain .answer { max-width: 50ch; }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.hero-aside { max-width: 480px; width: 100%; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); }
  .hero-grid.has-still { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); align-items: end; }
  .hero-aside { justify-self: end; }
}
@media (max-width: 899px) { .hero-grid.has-still .hero-aside { display: none; } }

/* trust_strip: one hairline row of four checkable facts, on the blue band */
.trust-strip { padding-block: clamp(40px, 6vh, 72px); }
.trust-strip .h-small { margin-bottom: 20px; }
.facts { display: grid; border-top: var(--hairline); }
.fact { padding: 18px 0; border-bottom: var(--hairline); }
.fact h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.fact p { font-size: 0.9375rem; color: var(--muted); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); gap: 0 32px; } }
@media (min-width: 1000px) {
  .facts { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .fact { padding: 22px 24px 24px 0; }
  .fact + .fact { padding-left: 24px; border-left: var(--hairline); }
}

/* conditions_list: ruled rows that are links, the visit small on the right */
.conditions .row-fig { font-weight: 400; font-size: 0.9375rem; color: var(--muted); white-space: normal; max-width: 22ch; }
@media (min-width: 900px) {
  .conditions .rows.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 0; }
  .conditions .rows.two-col > li:nth-child(-n+2) .row-link { border-top: var(--hairline); }
}

/* first_visit: the only large numerals on the site */
.parts { display: grid; border-top: var(--hairline); }
.part { padding: 22px 0; border-bottom: var(--hairline); }
.part .part-min { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.25rem, 7vw, 5.5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.part .part-min small { font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.part h3 { margin: 14px 0 6px; }
.part h3 + p { color: var(--muted); font-size: 1rem; }
@media (min-width: 600px) { .parts { grid-template-columns: repeat(2, 1fr); gap: 0 32px; } }
@media (min-width: 1000px) {
  .parts { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .part { padding: 24px 24px 28px 0; }
  .part + .part { padding-left: 24px; border-left: var(--hairline); }
}
.first-visit .split { margin-top: clamp(32px, 5vw, 56px); }
.first-visit .split .detail:first-child { margin-top: 0; }

/* how_it_works: three numbered statements in ruled columns */
.how-steps { display: grid; border-top: var(--hairline); counter-reset: how; }
.how-step { padding: 22px 0; border-bottom: var(--hairline); counter-increment: how; }
.how-step h3 { font-size: 1.125rem; margin-bottom: 6px; }
.how-step h3::before { content: counter(how) ". "; font-variant-numeric: tabular-nums; }
.how-step p { color: var(--muted); font-size: 1rem; }
@media (min-width: 900px) {
  .how-steps { grid-template-columns: repeat(3, 1fr); }
  .how-step { padding: 26px 28px 30px 0; }
  .how-step + .how-step { padding-left: 28px; border-left: var(--hairline); }
}

/* practitioners: ruled entries with a monogram chip, no portraits */
.people { display: grid; border-top: var(--hairline); }
.person { padding: 24px 0; border-bottom: var(--hairline); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 18px; align-items: start; align-content: start; }
.mono { width: 56px; height: 56px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.02em; border-radius: var(--radius); }
.person-body { min-width: 0; }
.person h3 { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.01em; margin-bottom: 2px; }
.person .person-role { margin-top: 0; color: var(--muted); font-size: 0.9375rem; }
.person-days { display: block; margin-top: 8px; font-weight: 600; font-size: 0.9375rem; color: inherit; }
.person p { margin-top: 10px; font-size: 1rem; }
.person .quote { color: var(--muted); }
.person .btn { margin-top: 16px; }
@media (min-width: 900px) {
  .people { grid-template-columns: repeat(3, 1fr); }
  .person { grid-template-columns: 1fr; padding: 26px 28px 30px 0; }
  .person + .person { padding-left: 28px; border-left: var(--hairline); }
}

/* reviews: written examples in ruled columns, labelled on each and once above, no stars */
.quotes { display: grid; border-top: var(--hairline); }
.quote-item { padding: 24px 0; border-bottom: var(--hairline); display: flex; flex-direction: column; }
.review-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.quote-item blockquote { flex: 1; font-size: 1.0625rem; line-height: 1.55; }
.quote-item blockquote p { max-width: none; }
.quote-item footer { margin-top: 16px; font-weight: 600; font-size: 0.9375rem; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .quote-item { padding: 26px 28px 30px 0; }
  .quote-item + .quote-item { padding-left: 28px; border-left: var(--hairline); }
}

/* hours_location: hours as ruled rows, the address and access lines, buttons, a still;
   the Team page uses .timetable instead (day, who is in, hours) */
.hours { border-top: var(--hairline); }
.hours > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: var(--hairline); }
.hours dt { font-weight: 600; }
.hours dd { white-space: nowrap; text-align: right; }
.hours dd.closed { color: var(--muted); }
.hours-location .detail { margin-top: 20px; }
.timetable { width: 100%; border-collapse: collapse; margin-top: 24px; }
.timetable th, .timetable td { text-align: left; padding: 12px 0; border-bottom: var(--hairline); vertical-align: top; }
.timetable thead th { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-top: var(--hairline); }
.timetable th[scope="row"] { font-weight: 600; width: 9em; }
.timetable td:last-child { text-align: right; white-space: nowrap; }
.timetable tfoot th, .timetable tfoot td { color: var(--muted); font-weight: 400; }
@media (max-width: 479px) { .timetable th[scope="row"] { width: 6.5em; } .timetable td:last-child { white-space: normal; } }

/* prices_table: a ruled table, the length beside every price */
.price-table { width: 100%; border-collapse: collapse; border-top: var(--hairline); }
.price-table caption { text-align: left; font-size: 0.9375rem; color: var(--muted); padding-bottom: 12px; caption-side: top; }
.price-table th, .price-table td { padding: 16px 0; border-bottom: var(--hairline); text-align: left; vertical-align: top; }
.price-table thead th { padding: 8px 0 10px; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.price-table thead th.price { text-align: right; }
.price-table th[scope="row"] { font-weight: 600; padding-right: 24px; }
.price-table th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.9375rem; margin-top: 2px; max-width: 48ch; }
.price-table td { white-space: nowrap; }
.price-table td.dur { color: var(--muted); padding-right: 24px; }
.price-table td.price { text-align: right; font-weight: 600; }
.price-table td.action { text-align: right; padding-left: 24px; }
.price-table td.action .btn { min-height: 44px; }
.price-table td.action .text-link { display: inline-block; padding-block: 10px; margin-block: -10px; }   /* a 44px tap area without moving the text */
@media (max-width: 719px) {
  .price-table thead { display: none; }
  .price-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; border-bottom: var(--hairline); }
  .price-table th, .price-table td { display: block; padding: 0; border: 0; }
  .price-table th[scope="row"] { grid-column: 1; grid-row: 1; }
  .price-table td.price { grid-column: 2; grid-row: 1; }
  .price-table td.dur { grid-column: 1; grid-row: 2; }
  .price-table td.action { grid-column: 1 / -1; grid-row: 3; text-align: left; padding: 10px 0 0; }   /* the link sits flush left */
  .price-table td:empty { display: none; }   /* a row with no length or no link leaves no empty line */
}

/* insurance: the answer, two short paragraphs, then the ruled lines */
.insurance .ruled { margin-top: 28px; }

/* steps: small numerals beside the labels, in the ruled list */
.steps .ruled { margin-top: 8px; }
.steps .ruled dt { display: flex; gap: 10px; }
.steps .step-when { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; margin-top: 2px; }

/* checklist: the same list with a small empty box, the written list a patient could tick */
.checklist .ruled dt { display: flex; align-items: baseline; flex-wrap: wrap; }

/* faq: questions as h3, answers under or beside them, ruled */
.faq-list { border-top: var(--hairline); }
.faq-item { padding: 20px 0; border-bottom: var(--hairline); display: grid; gap: 6px 32px; }
.faq-item h3 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.01em; }
.faq-item p { color: var(--muted); }
@media (min-width: 900px) { .faq-item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* cta_band: the blue band with the two buttons and the line for the unsure */
.cta-band { padding-block: clamp(56px, 9vh, 104px); }
.cta-band h2 { max-width: 20ch; }
.cta-band .btn-row { margin-top: 30px; }
.cta-band .note { margin-top: 24px; }

/* text_block: the answer and a few paragraphs at a narrow measure; .band-ink for book-urgent */
.text-block .body { margin-top: 20px; }
.text-block .body p { margin-top: 14px; }
.text-block .body p:first-child { margin-top: 0; }
.text-block .ruled { margin: 28px 0; }
.band-ink.text-block .ruled dt { font-size: 1.125rem; }

/* gallery_still: the still beside a short heading and a paragraph */
.still .split { align-items: center; }
.still .body p { margin-top: 14px; color: var(--muted); }
.still .body p:first-of-type { margin-top: 18px; }

/* booking_widget: only the shell around #booking; the widget brings booking.css */
.booking-shell .sec-head { margin-bottom: 28px; }
/* the widget wears the site's shapes. booking.css is generic (pill buttons, 12px cards, a two-column grid of visits);
   these rules sit under .booking-shell, so they win over booking.css whatever the load order, and touch only the widget. */
.booking-shell .bk-choice, .booking-shell .bk-choice.is-pill, .booking-shell .bk-btn, .booking-shell .bk-field input, .booking-shell .bk-field textarea, .booking-shell .bk-demo, .booking-shell .bk-tag, .booking-shell .bk-step-n, .booking-shell .bk-tick { border-radius: var(--radius); }
.booking-shell .bk-next { color: var(--bg); }
.booking-shell .bk-step.is-current .bk-step-n { color: var(--bg); }
.booking-shell .bk-back { border-color: var(--accent); }
.booking-shell .bk-back:hover { background: var(--accent-soft); border-color: var(--accent); }
/* step 1: the visits as ruled rows, the name on the left and the minutes and dollars on the right, like every other list on the site */
.booking-shell .bk-services { grid-template-columns: 1fr; gap: 0; border-top: var(--hairline); }
.booking-shell .bk-services .bk-group { margin: 0; padding: 22px 0 8px; }
.booking-shell .bk-services .bk-group:first-child { padding-top: 0; }
.booking-shell .bk-services .bk-choice { border: 0; border-bottom: var(--hairline); border-radius: 0; background: transparent; box-shadow: none; padding: 14px 14px 14px 16px; min-height: 56px; }
.booking-shell .bk-services .bk-choice:hover { background: var(--bg); }
.booking-shell .bk-services .bk-choice:has(.bk-radio:checked) { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.booking-shell .bk-services .bk-choice-body { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; align-items: start; }
.booking-shell .bk-services .bk-choice-title { grid-column: 1; grid-row: 1; }
.booking-shell .bk-services .bk-choice-meta { grid-column: 2; grid-row: 1 / span 2; text-align: right; color: var(--ink); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.booking-shell .bk-services .bk-choice-sub { grid-column: 1; grid-row: 2; }
.booking-shell .bk-phone-only { border-top: 0; padding-top: 0; }
.booking-shell .bk-phone-only .bk-group { margin: 0; padding: 22px 0 8px; }
.booking-shell .bk-phone-row { margin: 0; padding: 12px 16px; border-bottom: var(--hairline); }
.booking-shell .bk-phone-row .bk-choice-meta { color: var(--ink); font-size: 1rem; font-weight: 600; white-space: nowrap; }
.booking-shell .bk-tel { margin-top: 16px; }
/* step 2: a day tile grows to fit its label (Tomorrow is wider than the fixed 74px booking.css gives it) */
.booking-shell .bk-choice.is-day { width: auto; min-width: 74px; padding: 10px 8px; }
@media (max-width: 599px) {
  .booking-shell .bk-services .bk-choice-body { grid-template-columns: 1fr; }
  .booking-shell .bk-services .bk-choice-meta { grid-column: 1; grid-row: 2; text-align: left; }
  .booking-shell .bk-services .bk-choice-sub { grid-row: 3; }
}
/* the live summary is the plan card, its third appearance on the site: warm paper, the accent rule down the left, no border, no rounding */
.booking-shell .bk-summary { --muted: #4F5B67; --line: var(--warm-line); border: 0; border-radius: 0; padding: 26px 28px 22px 40px; box-shadow: 0 1px 0 var(--warm-line), 0 18px 40px -24px rgba(27, 36, 48, 0.35); }
.booking-shell .bk-summary::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 1px; background: var(--accent); opacity: 0.28; }
.booking-shell .bk-summary .bk-sum div { border-top-color: var(--warm-line); }
.booking-shell .bk-summary .bk-sum div:last-child { border-bottom: 1px solid var(--warm-line); }
.booking-shell .bk-sum-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 14px; }
@media (max-width: 899px) { .booking-shell .bk-summary { position: relative; } }
#booking { margin-top: 8px; }
.booking-nojs { margin-top: 8px; }
html.js .booking-nojs { display: none; }
.booking-nojs h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; }
.booking-nojs .form { margin-top: 24px; }
#nojs-sent { display: none; margin-top: 20px; padding: 16px 20px; background: var(--warm); font-weight: 600; }
#nojs-sent:target { display: block; }

/* contact_block: ruled contact lines, the phone and text as buttons, the small still */
.contact-list { border-top: var(--hairline); }
.contact-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 28px; padding: 14px 0; border-bottom: var(--hairline); }
.contact-list dt { font-weight: 600; }
.contact-list dd small { display: block; color: var(--muted); font-size: 0.875rem; }
.contact-list dd a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (min-width: 600px) { .contact-list > div { grid-template-columns: 11em minmax(0, 1fr); } }
.contact-block .btn-row { margin-top: 24px; }
.contact-block .still-frame { max-width: 420px; }
.contact-block .note { margin-top: 28px; }

/* ---------- 6. footer: the deep blue band with hours, address, phone, email, the disclaimer ---------- */
.site-footer { --line: var(--paper-line); --hairline: 1px solid var(--paper-line); --muted: var(--paper-muted); background: var(--accent-dark); color: var(--bg); padding: clamp(48px, 7vh, 80px) 0 32px; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 40px; } }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand svg { width: 26px; height: 26px; color: var(--bg); flex: none; }
.footer-brand span { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1; letter-spacing: -0.01em; }
.footer-brand small { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.footer-line { color: var(--muted); margin-top: 14px; font-size: 0.9375rem; }
.footer-h { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.footer-phone { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--bg); text-decoration: none; font-variant-numeric: tabular-nums; }
.footer-phone:hover { text-decoration: underline; }
.footer-list li { color: var(--muted); line-height: 1.5; font-size: 0.9375rem; }
.footer-list li:not(:has(a)) { padding: 6px 0; }
.footer-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bg); text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-hours { border-top: var(--hairline); }
.footer-hours > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: var(--hairline); font-size: 0.9375rem; }
.footer-hours dd { white-space: nowrap; }
.footer-bottom { border-top: var(--hairline); margin-top: 40px; padding-top: 20px; font-size: 0.8125rem; color: var(--muted); }
.footer-bottom p { max-width: none; margin-bottom: 6px; }
.footer-bottom a { color: var(--bg); }

/* ---------- 7. reveals and reduced motion ---------- */
/* html.js gates the reveal, so a page without script shows everything at once */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .site-header { transition: none; }
}