/* ==========================================================================
   HEALTH CHIROPRACTIC — healthchiropractic.co.uk
   Design system: ivory, stone and espresso. Clinical calm, editorial layout.

   A warm neutral scale with no hue in it at all — porcelain and ivory do the
   heavy lifting, stone carries the structure, espresso anchors it. Hierarchy
   comes from tone, weight and letterspacing rather than colour.

   Two notes on how the scale is used, because they are easy to undo by
   accident:

   · Taupe (#A69D91) is DECORATIVE ONLY. At 2.5:1 on ivory it is not legible
     as text at any size — it is for hairline marks, rules and the small
     superscripts beside display figures. Never set body or label text in it.
   · Soft Grey is set at #696560 rather than the #8D8983 of the source scale.
     The lighter value measured 3.2:1 on ivory, well under the 4.5:1 minimum
     for body text; this is the lightest it can be and stay readable.

   Every text/ground pairing below has been checked against WCAG AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Grounds ------------------------------------------------------------- */
  --porcelain:  #FCFBF8;   /* Porcelain  — cards, tiles, form fields      */
  --paper:      #F8F5EF;   /* Soft Ivory — the default page ground        */
  --cream:      #F1ECE3;   /* Warm Cream — alternating sections           */
  --mist:       #EAE5DC;   /* the third, quieter ground                   */

  /* Lines --------------------------------------------------------------- */
  --line:       #DED8CE;   /* Pale Stone  — hairline on light grounds     */
  --line-2:     #C8C0B5;   /* Warm Greige — stronger border               */
  --line-mist:  #DBD4C8;   /* hairline on the stone ground                */
  --line-deep:  #34322E;   /* hairline on the deep ground                 */

  /* Deep grounds -------------------------------------------------------- */
  --espresso:   #1C1B19;   /* Espresso Black — deep sections, footer, nav */
  --black:      #0D0D0C;   /* True Black — primary buttons only           */

  /* Text ---------------------------------------------------------------- */
  --ink:         #302F2D;  /* Charcoal — body text, 12.3:1 on ivory       */
  --muted:       #696560;  /* Soft Grey, darkened — 4.61:1 worst case     */
  --muted-deep:  #A69D91;  /* Taupe, on the deep ground — 6.4:1           */

  /* Accent -------------------------------------------------------------- */
  --accent:      #1C1B19;  /* Espresso — eyebrows, numerals, icons        */
  --accent-deep: #C8C0B5;  /* Warm Greige, on deep — 9.6:1                */
  --taupe:       #A69D91;  /* DECORATIVE ONLY — rules and marks, no text  */
  --mist-soft:   #E4DED3;  /* soft fill inside the anatomical plates      */

  /* Semantic (re-pointed by ground classes) ----------------------------- */
  --bg:     var(--paper);
  --fg:     var(--ink);
  --dim:    var(--muted);
  --rule:   var(--line);
  --brand:  var(--accent);

  /* Type ---------------------------------------------------------------- */
  --display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:    "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale. Raised twice for readability — body is now 19px (from an
     original 16.2px), small 16px, micro 14px. --fs-micro drives the nav,
     eyebrows, buttons and every small-caps label, so it is the one that
     decides whether the interface reads as legible or as fine print. */
  --fs-hero:  clamp(3rem, 9.5vw, 8.75rem);
  --fs-h1:    clamp(2.5rem, 6.4vw, 5.25rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.75rem);
  --fs-h3:    clamp(1.6rem, 2.8vw, 2.3rem);
  --fs-lead:  clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-body:  1.1875rem;
  --fs-small: 1rem;
  --fs-micro: 0.875rem;

  /* Space --------------------------------------------------------------- */
  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(5rem, 12vw, 11rem);
  --maxw:    1440px;

  /* Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The header is fixed, so jump targets must clear it rather than sliding
   underneath it. Keep this comfortably above the stuck header's height — the
   logo is a tall lockup, so that is around 100px on a desktop screen. */
[id] { scroll-margin-top: clamp(6rem, 10vw, 8.5rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--espresso); color: var(--paper);
  padding: 0.9rem 1.4rem; font-size: var(--fs-small);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES & GROUNDS
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* Cream ---------------------------------------------------------------- */
.ground-cream { background: var(--cream); }

/* Warm stone — the third, quieter ground ------------------------------- */
.ground-mist {
  background: var(--mist);
  --rule: var(--line-mist);
  position: relative;
}

/* Deep charcoal — used sparingly, one moment per page ------------------- */
.ground-deep {
  background: var(--espresso);
  color: var(--paper);
  --fg:    var(--paper);
  --dim:   var(--muted-deep);
  --rule:  var(--line-deep);
  --brand: var(--accent-deep);
  position: relative;
}
.ground-deep ::selection { background: var(--accent-deep); color: var(--espresso); }

/* Very fine grain. Kept almost invisible on light grounds — enough to stop
   the large flat areas looking like plastic, not enough to read as texture. */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.ground-deep.grain::after { opacity: 0.14; mix-blend-mode: overlay; }

/* --------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  line-height: 1;
}
/* The leading rule is one of the few places Taupe is safe: it carries no
   information, so its low contrast is a feature rather than a failure. */
.eyebrow::before {
  content: "";
  width: 1.9rem; height: 1px;
  background: var(--taupe);
  flex: none;
}
.ground-deep .eyebrow::before { background: var(--muted-deep); }
.eyebrow--plain::before { display: none; }
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--dim);
  font-weight: 300;
  max-width: 46ch;
}

.body-muted { color: var(--dim); }

.measure   { max-width: 62ch; }
.measure-s { max-width: 44ch; }

.italic { font-style: italic; font-family: var(--display); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.1rem 2.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--btn-fg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.btn:hover, .btn:focus-visible { color: var(--btn-bg); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost::before { background: var(--espresso); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); border-color: var(--espresso); }

/* Deep grounds share one set of button colours. Keep these lists in sync —
   .footer is deep but is not .ground-deep. */
.ground-deep .btn,
.footer .btn,
.plan--feature .btn { --btn-bg: var(--paper); --btn-fg: var(--espresso); }

.ground-deep .btn--ghost,
.footer .btn--ghost,
.plan--feature .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: rgba(248, 245, 239, 0.35);
}
.ground-deep .btn--ghost::before,
.footer .btn--ghost::before,
.plan--feature .btn--ghost::before { background: var(--paper); }

.ground-deep .btn--ghost:hover, .ground-deep .btn--ghost:focus-visible,
.footer .btn--ghost:hover, .footer .btn--ghost:focus-visible,
.plan--feature .btn--ghost:hover, .plan--feature .btn--ghost:focus-visible {
  color: var(--espresso);
  border-color: var(--paper);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.6rem; }
.btn-row--center { justify-content: center; }

/* Understated text link ---------------------------------------------------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 0.55rem;
  position: relative;
  color: var(--brand);
}
.link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.4s var(--ease);
}
.link:hover::after, .link:focus-visible::after { opacity: 1; }
.link .arw { transition: transform 0.45s var(--ease); display: inline-block; }
.link:hover .arw { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. ICONS
   Thin-stroke line icons. Stroke width stays visually constant because the
   icons are drawn on a 24-unit grid and scaled with the font size.
   -------------------------------------------------------------------------- */
.icon {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon--lg { width: 2rem; height: 2rem; }

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 0.9rem;
  color: var(--ink);
  transition: padding 0.5s var(--ease), color 0.5s var(--ease);
}
.header::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(248, 245, 239, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.header.is-stuck { padding-block: 0.95rem; }
.header.is-stuck::after { transform: translateY(0); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}

/* The logo is a three-line lockup (script "Health", "CHIROPRACTIC", then a
   rule-flanked "CLINIC"), so it needs more height than a single-line wordmark
   would — below about 40px the bottom line stops being readable. Height is the
   only dimension set; the width follows from the file's own aspect ratio. */
.brand__logo {
  height: clamp(4.2rem, 6.6vw, 5.6rem);
  width: auto;
  display: block;
}
.header.is-stuck .brand__logo { height: clamp(3.6rem, 5.4vw, 4.6rem); }
.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }

.nav__link {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  padding-block: 0.3rem;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta {
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--line-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.header__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--espresso);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.header__cta:hover::before, .header__cta:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.header__cta:hover, .header__cta:focus-visible { color: var(--paper); border-color: var(--espresso); }

/* Burger ------------------------------------------------------------------- */
.burger {
  display: none;
  width: 2.6rem; height: 2.6rem;
  background: none; border: 0; padding: 0;
  cursor: pointer; color: inherit;
  position: relative; z-index: 120;
}
.burger span {
  position: absolute; left: 50%; width: 1.45rem; height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 1.05rem; }
.burger span:nth-child(2) { top: 1.5rem; }
.burger[aria-expanded="true"] { color: var(--paper); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(0.225rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateX(-50%) translateY(-0.225rem) rotate(-45deg); }

/* Mobile drawer ------------------------------------------------------------ */
.drawer {
  position: fixed; inset: 0;
  background: var(--espresso);
  color: var(--paper);
  z-index: 110;
  padding: 7rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease), visibility 0s linear 0.7s;
  visibility: hidden;
  overflow-y: auto;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease), visibility 0s; }

.drawer__nav { display: flex; flex-direction: column; gap: 0.1rem; }
.drawer__link {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3.1rem);
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link i {
  font-style: normal;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--accent-deep);
}
.drawer__foot {
  border-top: 1px solid var(--line-deep);
  padding-top: 1.6rem;
  font-size: var(--fs-small);
  color: var(--muted-deep);
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 9rem 3.2rem;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* A light scrim so the headline always has a clean field to sit on. */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(241, 236, 227, 0.97) 0%, rgba(241, 236, 227, 0.88) 38%, rgba(241, 236, 227, 0.72) 62%, rgba(241, 236, 227, 0.58) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.028em;
  margin-bottom: 0.3em;
}
.hero__title i { font-style: italic; color: var(--accent); }

.hero__aside {
  border-left: 1px solid var(--line-2);
  padding-left: clamp(1.2rem, 2.4vw, 2.2rem);
  padding-bottom: 0.6rem;
}

.hero__scroll {
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
  padding-top: 1.7rem;
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll a { display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__scroll a:hover { color: var(--ink); }
.hero__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--taupe);
  animation: pulse 2.8s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.65); }
}

/* Page hero (interior pages) ---------------------------------------------- */
.page-hero { padding-block: clamp(8.5rem, 15vw, 12.5rem) clamp(3rem, 6vw, 5rem); position: relative; }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.page-hero__title { font-size: var(--fs-h1); letter-spacing: -0.025em; }
.page-hero__title i { font-style: italic; color: var(--accent); }

.crumb {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.2rem;
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
}
.crumb i { font-style: normal; opacity: 0.5; }
.crumb a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. CREDENTIALS STRIP
   The fastest "this is a regulated clinic" signal on the page.
   -------------------------------------------------------------------------- */
/* Dividers are borders on the cells, NOT a 1px grid gap with the container's
   background showing through. The gap approach looked equivalent but was
   unreliable: at fractional column widths Chrome pixel-snaps each cell's edges,
   and depending on where the boundary fell it would sometimes close the sliver
   entirely, so an individual divider would silently disappear. A border belongs
   to the cell's own box and is snapped with it, so it always paints. */
.creds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line-2);
}
.cred {
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 1px solid var(--line-2);
}
.cred:first-child { border-left: 0; }
.cred__icon { color: var(--accent); flex: none; }
.cred__text { min-width: 0; display: flex; flex-direction: column; }
.cred__title {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
}
.cred__sub { display: block; font-size: var(--fs-small); color: var(--dim); line-height: 1.45; margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   10. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--rule);
  padding-block: 1.5rem;
  overflow: hidden;
  position: relative;
  background: var(--paper);
}
.marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
  flex: none;
}
.marquee__item {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-style: italic;
  white-space: nowrap;
  color: var(--muted);
}
.marquee__sep { color: var(--taupe); font-size: 0.55rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   11. SPLIT / EDITORIAL BLOCKS
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 6vw, 6.5rem);
  align-items: center;
}
.split--wide-left  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split--wide-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--top { align-items: start; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.8rem, 6vw, 5rem);
}
.section-head__title { font-size: var(--fs-h2); }
.section-head__title i { font-style: italic; color: var(--brand); }

/* Figure / image frame ----------------------------------------------------- */
.figure { position: relative; }
.figure__frame {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--rule);
}
.figure__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
/* An embedded Google map fills the same framed box as a photo. It does not
   get the hover zoom (it is interactive) and keeps a neutral fill while it loads. */
.map__frame { width: 100%; height: 100%; border: 0; display: block; }
.figure.map:hover .figure__frame { }
.figure:hover .figure__frame img { transform: scale(1.03); }
.figure--portrait .figure__frame { aspect-ratio: 3 / 4; }
.figure--square   .figure__frame { aspect-ratio: 1 / 1; }
.figure--wide     .figure__frame { aspect-ratio: 4 / 3; }
.figure--tall     .figure__frame { aspect-ratio: 2 / 3; }

.figure__cap {
  margin-top: 1.05rem;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.figure__cap b { color: var(--brand); font-weight: 500; }

/* Offset stacked pair ------------------------------------------------------ */
.figure-stack { position: relative; }
.figure-stack .figure--b {
  position: absolute;
  right: -7%;
  bottom: -12%;
  width: 45%;
  border: 7px solid var(--bg);
}
.ground-cream .figure-stack .figure--b { border-color: var(--cream); }
.ground-mist  .figure-stack .figure--b { border-color: var(--mist); }
/* The inset sits over the bottom-right corner, so the main caption has to
   stop short of it rather than running underneath. */
.figure-stack .figure--a .figure__cap { max-width: 50%; }

/* --------------------------------------------------------------------------
   12. NUMBERED STEPS
   -------------------------------------------------------------------------- */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.9rem, 3.6vw, 3rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  position: relative;
  transition: padding-left 0.6s var(--ease);
}
.step::before {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--brand);
  transition: width 0.9s var(--ease);
}
.step:hover::before { width: 100%; }
.step:hover { padding-left: 0.8rem; }
.step__icon { color: var(--brand); padding-top: 0.15rem; }
.step__title { font-size: var(--fs-h3); }
.step__title small {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.6rem;
}
.step__body { color: var(--dim); max-width: 56ch; }

/* --------------------------------------------------------------------------
   13. CARDS & TILES
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card { position: relative; display: flex; flex-direction: column; }
.card__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream);
  border: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.card:hover .card__frame img { transform: scale(1.04); }
.card__index {
  position: absolute; top: 0.9rem; left: 1rem; z-index: 2;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: rgba(248, 245, 239, 0.85);
  padding: 0.35rem 0.6rem;
}
.card__title { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.card__body { color: var(--dim); font-size: 1.02rem; margin-bottom: 1.3rem; }
.card__link { margin-top: auto; }

/* Bordered tile (no image) ------------------------------------------------ */
.tile {
  border: 1px solid var(--rule);
  background: var(--porcelain);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.55s var(--ease), transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px -22px rgba(48, 47, 45, 0.5);
}
.ground-deep .tile { background: rgba(248, 245, 239, 0.04); }
.tile__icon { color: var(--brand); margin-bottom: 0.3rem; }
.tile__num {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--brand);
}
.tile__title { font-size: 1.32rem; font-family: var(--display); letter-spacing: -0.01em; line-height: 1.2; }
.tile__body { color: var(--dim); font-size: 1.02rem; line-height: 1.62; }

/* --------------------------------------------------------------------------
   14. BODY MAP
   An anatomical region selector. Hovering or focusing a condition highlights
   the matching marker on the figure, and vice versa.
   -------------------------------------------------------------------------- */
.bodymap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.bodymap__figure {
  position: relative;
  max-width: 320px;
  margin-inline: auto;
  width: 100%;
}
.bodymap__figure svg { width: 100%; height: auto; overflow: visible; }

.bm-body { fill: none; stroke: var(--line-2); stroke-width: 1.1; stroke-linejoin: round; }
.ground-mist .bm-body { stroke: #C2BBAC; }
.bm-spine { fill: none; stroke: var(--accent); stroke-width: 1.1; opacity: 0.55; }

.bm-dot {
  fill: var(--mist-soft);
  stroke: var(--accent);
  stroke-width: 1.2;
  transition: fill 0.35s var(--ease), r 0.35s var(--ease);
  cursor: pointer;
}
.bm-halo {
  fill: var(--taupe);
  opacity: 0;
  transition: opacity 0.4s var(--ease), r 0.4s var(--ease);
}
.bm-region.is-active .bm-dot { fill: var(--accent); }
.bm-region.is-active .bm-halo { opacity: 0.16; }

.bodymap__list { border-top: 1px solid var(--rule); }
.bm-item {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.4s var(--ease), color 0.4s var(--ease);
}
.bm-item i {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--brand);
  flex: none;
  min-width: 1.6rem;
}
.bm-item small {
  display: block;
  color: var(--dim);
  font-size: var(--fs-small);
  margin-top: 0.15rem;
}
.bm-item:hover, .bm-item:focus-visible, .bm-item.is-active { padding-left: 0.6rem; color: var(--accent); }
.bm-item.is-active { border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   15. LISTS
   -------------------------------------------------------------------------- */
.col-list { column-count: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.col-list li {
  break-inside: avoid;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 1.08rem;
}
.col-list li i {
  font-style: normal; font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.16em; color: var(--brand); flex: none;
}

/* --------------------------------------------------------------------------
   16. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.testimonial {
  padding: clamp(1.8rem, 3.4vw, 2.8rem);
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 1.3rem;
}
.testimonial:last-child { border-right: 1px solid var(--rule); }
.testimonial__stars { color: var(--accent); font-size: 0.7rem; letter-spacing: 0.35em; }
.testimonial__text { font-family: var(--display); font-size: 1.28rem; line-height: 1.42; font-style: italic; }
.testimonial__by {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dim); margin-top: auto;
}

/* --------------------------------------------------------------------------
   17. STATS
   Four practice facts in display serif. The figures count up once on scroll.
   -------------------------------------------------------------------------- */
/* Cell borders rather than grid gaps — see the note on .creds above. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 2rem);
  border-left: 1px solid var(--line-2);
}
.stat:first-child { border-left: 0; }
.stat__fig {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.stat__fig sup {
  font-size: 0.34em;
  font-style: italic;
  vertical-align: super;
  color: var(--dim);
  margin-left: 0.18em;
}
.stat__label {
  margin-top: 0.9rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   18. PRICING
   -------------------------------------------------------------------------- */
.price-list { border-top: 1px solid var(--rule); }
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.55s var(--ease);
}
.price-row:hover { padding-left: 0.7rem; }
.price-row__name { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: -0.01em; line-height: 1.15; }
.price-row__meta {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brand); margin-top: 0.6rem;
}
.price-row__desc { color: var(--dim); font-size: 1.04rem; }
.price-row__fig { font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); white-space: nowrap; line-height: 1.25; text-align: right; }
/* For a row that carries two durations at two prices in one line item. */
.price-row__unit {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.plan {
  border: 1px solid var(--rule);
  background: var(--porcelain);
  padding: clamp(1.8rem, 3.2vw, 2.8rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.plan--feature {
  background: var(--espresso); color: var(--paper); border-color: var(--espresso);
  --fg: var(--paper); --dim: var(--muted-deep); --brand: var(--accent-deep); --rule: var(--line-deep);
}
.plan__name { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.plan__price { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.plan__price span {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
.plan__list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.4rem; }
.plan__list li {
  display: flex; gap: 0.85rem; align-items: baseline;
  font-size: 1.02rem; color: var(--dim);
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule);
}
.plan__list li::before { content: "—"; color: var(--brand); flex: none; }
.plan__note { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--dim); }
.plan--feature .plan__note { color: var(--muted-deep); }

/* --------------------------------------------------------------------------
   LEGAL / LONG-FORM PROSE (privacy, terms, complaints)
   A single readable text column. Reuses the site's type and rule tokens.
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose__updated {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 2.4rem;
}
.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 2.8rem; margin-bottom: 0.9rem; letter-spacing: -0.01em;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin-top: 1.8rem; margin-bottom: 0.6rem;
}
.prose p, .prose li { color: var(--ink); }
.prose p { margin-bottom: 1.1rem; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose ul { margin: 0 0 1.2rem; padding: 0; }
.prose ul li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem;
}
.prose ul li::before {
  content: "—"; position: absolute; left: 0; color: var(--brand);
}
.prose dl { margin: 0 0 1.2rem; }
.prose dt { font-weight: 500; margin-top: 0.9rem; }
.prose dd { margin: 0 0 0.2rem; color: var(--dim); }
.prose__callout {
  border-left: 2px solid var(--accent);
  background: var(--mist);
  padding: 1rem 1.2rem; margin: 1.6rem 0;
  font-size: var(--fs-small); color: var(--dim);
}

/* --------------------------------------------------------------------------
   19. ACCORDION
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%;
  background: none; border: 0; padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  cursor: pointer; color: inherit; text-align: left;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 0.4s var(--ease);
}
.acc__btn:hover { color: var(--accent); }
.acc__sign { position: relative; width: 0.9rem; height: 0.9rem; flex: none; color: var(--brand); }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: currentColor;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { color: var(--dim); max-width: 68ch; padding-bottom: 1.7rem; }

/* --------------------------------------------------------------------------
   20. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.7rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dim);
}
.field input, .field select, .field textarea {
  background: var(--porcelain);
  border: 1px solid var(--line);
  padding: 0.85rem 0.95rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--fg);
  border-radius: 0;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  width: 100%;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28, 27, 25, 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.6; }

.consent { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.95rem; color: var(--dim); line-height: 1.6; cursor: pointer; }
.consent input {
  appearance: none; width: 1.05rem; height: 1.05rem;
  border: 1px solid var(--line-2); background: var(--porcelain);
  flex: none; margin-top: 0.25rem;
  cursor: pointer; position: relative;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.consent input:checked { background: var(--accent); border-color: var(--accent); }
.consent input:checked::after { content: ""; position: absolute; inset: 3px; background: var(--porcelain); }

.form__note {
  font-size: var(--fs-small);
  color: var(--dim);
  padding: 0.95rem 1.2rem;
  border-left: 2px solid var(--accent);
  background: var(--mist);
  line-height: 1.6;
}
.form__status { font-size: var(--fs-small); color: var(--accent); min-height: 1.4em; }

/* --------------------------------------------------------------------------
   21. CONTACT DETAILS
   -------------------------------------------------------------------------- */
.detail-list { display: grid; border-top: 1px solid var(--rule); }
.detail {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
}
.detail dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); }
.detail dd { margin: 0; font-size: 1.08rem; }
.detail dd a:hover { color: var(--accent); }
.detail dd small { display: block; color: var(--dim); font-size: var(--fs-small); margin-top: 0.3rem; }

/* --------------------------------------------------------------------------
   22. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band__title { font-size: var(--fs-h2); max-width: 19ch; margin-inline: auto; }
.cta-band__title i { font-style: italic; color: var(--brand); }

/* --------------------------------------------------------------------------
   23. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--espresso); color: var(--paper);
  --fg: var(--paper); --dim: var(--muted-deep); --rule: var(--line-deep); --brand: var(--accent-deep);
  position: relative;
}
.footer__top {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__brand { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1.3rem; }
.footer__col h4 {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand); margin-bottom: 1.4rem;
}
.footer__col li { margin-bottom: 0.75rem; font-size: 1.02rem; color: var(--dim); }
.footer__col a { transition: color 0.35s var(--ease); }
.footer__col a:hover { color: var(--paper); }
.footer__bottom {
  border-top: 1px solid var(--rule);
  padding-block: 1.8rem 2.4rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer__bottom a:hover { color: var(--paper); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }

/* --------------------------------------------------------------------------
   24. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

/* Line-by-line headline lift.
   The display serif overshoots its line box at these sizes, so the mask is
   padded out and the padding is cancelled with a matching negative margin —
   ascenders and descenders stay intact, the layout does not move. */
.lift {
  display: block;
  overflow: hidden;
  padding-block: 0.14em 0.2em;
  margin-block: -0.14em -0.2em;
}
.lift > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.lift.is-in > span, .is-in .lift > span { transform: none; }

/* No-JS fallback: never hide content */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-js .lift > span { transform: none !important; }

/* --------------------------------------------------------------------------
   25. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n+1), .cred:nth-child(2n+1) { border-left: 0; }
  .stat:nth-child(n+3),  .cred:nth-child(n+3)  { border-top: 1px solid var(--line-2); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonials { grid-template-columns: 1fr; }
  .testimonial { border-left: 0; border-top: 1px solid var(--rule); }
  .testimonial:last-child { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* The header has its own breakpoint. At the current type size the brand, the
   five nav links and the button need about 1080px between them; below that they
   start wrapping, so the burger takes over well before the 900px used for the
   rest of the layout. */
@media (max-width: 1100px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
}

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__aside { border-left: 0; border-top: 1px solid var(--line-2); padding-left: 0; padding-top: 1.4rem; }

  /* A tall viewport crops the wide hero art to its centre, which loses the
     spine entirely. Pull the crop over to it, and swap the left-to-right
     scrim for a flatter one so the copy stays legible on top. */
  .hero__bg img { object-position: 86% center; }
  .hero__bg::after {
    background: linear-gradient(to bottom, rgba(241, 236, 227, 0.9) 0%, rgba(241, 236, 227, 0.82) 55%, rgba(241, 236, 227, 0.92) 100%);
  }
  .page-hero__grid { grid-template-columns: 1fr; }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .split .figure, .split .figure-stack { order: -1; }
  .split--media-last .figure, .split--media-last .figure-stack { order: 0; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .step { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .step__body { grid-column: 2; }
  .price-row { grid-template-columns: minmax(0, 1fr) auto; }
  .price-row__desc { grid-column: 1 / -1; }
  .figure-stack .figure--b { position: static; width: 100%; border: 0; margin-top: 1.2rem; }
  .bodymap { grid-template-columns: 1fr; }
  .bodymap__figure { max-width: 240px; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .col-list { column-count: 1; }
  .form__row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .stat, .cred { border-left: 0; border-top: 0; }
  .stat + .stat, .cred + .cred { border-top: 1px solid var(--line-2); }
  .footer__top { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; gap: 0.4rem; }
  .hero { min-height: 94svh; }
  .quote__text { max-width: none; }
}

@media (max-width: 420px) {
  /* Trim the logo slightly on the narrowest phones — but not below ~45px, or
     the "CLINIC" line at the bottom of the lockup stops being readable. There
     is plenty of clear space before the burger at this size. */
  .brand__logo { height: 3.5rem; }
  .header.is-stuck .brand__logo { height: 3.1rem; }
}

/* --------------------------------------------------------------------------
   26. MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .lift > span { transform: none !important; }
  .marquee__track { animation: none; }
}

@media print {
  .header, .drawer, .burger, .hero__scroll, .marquee, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .ground-deep, .hero, .footer { background: #fff !important; color: #000 !important; }
}