/* ==========================================================================
   Edmonton Metro Osteopathic Clinic. One file, ordered by cascade layers
   (lowest priority first). Raw values live in the tokens layer and come from
   DIRECTION.md; everything else uses the semantic names.
   ========================================================================== */
@layer reset, tokens, base, layout, components, sections, motion, utilities;

/* -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :target { scroll-margin-block: 5ex; }
}

/* -------------------------------------------------------------------------- */
@layer tokens {
  /* Self-hosted fonts (docs/site-guide/build.md §5). Livvic and Open Sans are
     the client's current faces. Fallbacks are metric-adjusted so lines wrap
     the same before the web fonts arrive. */
  @font-face { font-family: "Livvic"; font-weight: 500; font-display: swap; src: url("/assets/fonts/livvic-latin-500-normal.woff2") format("woff2"); }
  @font-face { font-family: "Livvic"; font-weight: 600; font-display: swap; src: url("/assets/fonts/livvic-latin-600-normal.woff2") format("woff2"); }
  @font-face { font-family: "Livvic"; font-weight: 700; font-display: swap; src: url("/assets/fonts/livvic-latin-700-normal.woff2") format("woff2"); }
  @font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
  @font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("/assets/fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
  @font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url("/assets/fonts/caveat-latin-600-normal.woff2") format("woff2"); }
  @font-face { font-family: "Livvic Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }
  @font-face { font-family: "Open Sans Fallback"; src: local("Arial"); size-adjust: 105%; ascent-override: 102%; descent-override: 28%; line-gap-override: 0%; }

  :root {
    /* Brand colours (her Webflow tokens, as in DIRECTION.md). */
    --sage: #8C9D93;
    --sage-2: #7F908A;
    --slate: #425365;
    --slate-2: #2F3D4B;
    --gold: #EBBF80;
    --gold-2: #E4B06A;
    --taupe: #A39076;
    --taupe-text: #8F7D64; /* taupe darkened just enough for 3:1 headings on bone */
    --sand: #D1CCC0;
    --mist: #E6ECE8; /* bone tinted toward sage, for quiet bands (Rob: the sand read as beige) */
    --bone: #F9F9F9;
    --grey: #73726D;
    --ink: #192024;

    /* Semantic colours: the "paper" theme. Sections re-map them with a theme class. */
    --c-bg: var(--bone);
    --c-fg: var(--ink);
    --c-heading: var(--taupe-text);
    --c-muted: var(--grey);
    --c-line: var(--sand);
    --c-link: var(--slate);
    --c-accent: var(--gold);
    --c-accent-hover: var(--gold-2);
    --c-on-accent: var(--slate-2);
    --c-error: #b3261e;
    --c-field-bg: #ffffff;

    --font-display: "Livvic", "Livvic Fallback", Arial, sans-serif;
    --font-body: "Open Sans", "Open Sans Fallback", Arial, sans-serif;
    --font-hand: "Caveat", "Segoe Script", cursive;

    /* Fluid type scale: 16 → 18 px base, ratio 1.2 → 1.333, 360 → 1440 px. */
    --step--1: clamp(0.88rem, 0.86rem + 0.08vw, 0.94rem);
    --step-0: clamp(1.00rem, 0.96rem + 0.19vw, 1.13rem);
    --step-1: clamp(1.20rem, 1.10rem + 0.44vw, 1.50rem);
    --step-2: clamp(1.44rem, 1.25rem + 0.83vw, 2.00rem);
    --step-3: clamp(1.73rem, 1.42rem + 1.39vw, 2.66rem);
    --step-4: clamp(2.07rem, 1.58rem + 2.19vw, 3.55rem);
    --step-5: clamp(2.49rem, 1.74rem + 3.33vw, 4.73rem);
    --step-6: clamp(2.99rem, 1.88rem + 4.93vw, 6.31rem);

    --space-2xs: clamp(0.5rem, 0.48rem + 0.1vw, 0.56rem);
    --space-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.84rem);
    --space-s: clamp(1rem, 0.96rem + 0.19vw, 1.13rem);
    --space-m: clamp(1.5rem, 1.44rem + 0.28vw, 1.69rem);
    --space-l: clamp(2rem, 1.85rem + 0.65vw, 2.44rem);
    --space-xl: clamp(3rem, 2.7rem + 1.3vw, 3.88rem);
    --space-2xl: clamp(4rem, 3.4rem + 2.6vw, 5.75rem);
    --space-3xl: clamp(6rem, 4.9rem + 4.9vw, 9.3rem);

    --gutter: clamp(1.25rem, 4vw, 4rem);
    --container: 1360px;
    --header-h: 5.25rem;
    --radius: 8px;
    --radius-pill: 999px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out */
    --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);  /* expo.inOut */
    --ease-ui: cubic-bezier(0.33, 1, 0.68, 1);      /* power2.out */
    --dur-micro: 180ms;
    --dur-ui: 400ms;
    --dur-reveal: 1100ms;
    --dur-line: 1200ms; /* LINE_MS in core/reveals.js */
  }

  /* Section themes: children only ever use the semantic tokens. */
  .theme-sage {
    /* Small text on sage must be ink (bone is 2.9:1). Large bone headlines sit on the darker band (--sage-2, 3.2:1). */
    --c-bg: var(--sage); --c-fg: var(--ink); --c-heading: var(--ink); --c-muted: var(--slate-2);
    --c-line: rgba(25, 32, 36, 0.25); --c-link: var(--ink); --c-field-bg: rgba(249, 249, 249, 0.35);
    background: var(--c-bg); color: var(--c-fg);
  }
  .theme-slate {
    --c-bg: var(--slate); --c-fg: var(--bone); --c-heading: var(--bone); --c-muted: #C9D1D9;
    --c-line: rgba(249, 249, 249, 0.25); --c-link: var(--gold); --c-field-bg: rgba(249, 249, 249, 0.08);
    background: var(--c-bg); color: var(--c-fg);
  }
  .theme-slate-2 {
    --c-bg: var(--slate-2); --c-fg: var(--bone); --c-heading: var(--bone); --c-muted: #C9D1D9;
    --c-line: rgba(249, 249, 249, 0.18); --c-link: var(--gold); --c-field-bg: rgba(249, 249, 249, 0.08);
    background: var(--c-bg); color: var(--c-fg);
  }
  .theme-sand {
    --c-bg: var(--mist); --c-fg: var(--ink); --c-heading: var(--slate); --c-muted: var(--slate-2);
    --c-line: rgba(25, 32, 36, 0.14); --c-link: var(--slate);
    background: var(--c-bg); color: var(--c-fg);
  }
}

/* -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-padding-top: var(--header-h);
    scrollbar-gutter: stable;
    background: var(--c-bg);
  }
  body {
    min-height: 100svh;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--c-fg);
    background: var(--c-bg);
    overflow-x: clip; /* clip, not hidden: hidden breaks position: sticky */
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; color: var(--c-heading); }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); line-height: 1.2; color: inherit; }
  h4 { font-size: var(--step-1); line-height: 1.25; color: inherit; }
  p, li { text-wrap: pretty; }
  p { max-width: 58ch; }
  a { color: inherit; }
  strong, b { font-weight: 600; }
  :focus-visible { outline: 2px solid var(--c-link); outline-offset: 3px; }
  ::selection { background: var(--slate); color: var(--bone); }
  .skip-link {
    position: absolute; left: var(--gutter); top: -100%; z-index: 1000;
    padding: 0.6rem 1rem; background: var(--slate); color: var(--bone);
  }
  .skip-link:focus { top: 0.5rem; }
}

/* -------------------------------------------------------------------------- */
@layer layout {
  .container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .section { padding-block: var(--space-2xl); }
  .section--loose { padding-block: var(--space-3xl); }
  .section__title { margin-block-end: var(--space-l); max-width: 18ch; }
  .lead { font-size: var(--step-1); max-width: 52ch; }
  .prose > * + * { margin-block-start: var(--space-s); }
  .prose h2 { margin-block-start: var(--space-xl); }
  .prose h3 { margin-block-start: var(--space-l); }
  .prose ul, .prose ol { padding-inline-start: 1.25em; max-width: 58ch; }
  .prose li + li { margin-block-start: var(--space-2xs); }
  .two-col { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 900px) { .two-col { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 7rem); } .two-col--even { grid-template-columns: 1fr 1fr; } .two-col--rev { grid-template-columns: 7fr 5fr; } }

  /* Header: transparent over the home cover (bone text), slate text on paper pages.
     Hides on scroll down and returns on scroll up (site/header.js adds the classes). */
  .site-header {
    position: absolute; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
    color: var(--bone);
    transition: transform var(--dur-ui) var(--ease-ui), background-color var(--dur-ui), color var(--dur-ui);
  }
  .site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
  body:has(.reach) .site-header:not(.is-fixed) { color: var(--slate); } /* Contact opens on paper */
  .site-header.is-fixed { position: fixed; background: var(--bone); color: var(--slate); box-shadow: 0 1px 0 var(--sand); }
  .site-header.is-fixed.is-entering { animation: header-in var(--dur-ui) var(--ease-ui); }
  @keyframes header-in { from { transform: translateY(-100%); } }
  .site-header.is-hidden, html.is-pinning .site-header { transform: translateY(-100%); } /* hidden while the tenets are pinned */
  .brand { display: inline-flex; align-items: center; gap: 0.875rem; text-decoration: none; color: inherit; width: max-content; }
  .brand__mark { width: 4.25rem; height: 4.25rem; flex: none; background: currentColor; -webkit-mask: url("/assets/img/monogram-240.webp") center / contain no-repeat; mask: url("/assets/img/monogram-240.webp") center / contain no-repeat; }
  .brand__text { display: grid; gap: 5px; }
  .brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1; }
  .brand__rule { height: 2px; background: currentColor; }
  .brand__sub { font-family: var(--font-body); font-weight: 600; font-size: 0.625rem; line-height: 1; letter-spacing: 0.22em; }
  .site-nav ul { display: flex; gap: var(--space-m); font-weight: 600; font-size: 0.9375rem; }
  .site-nav a { text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; transition: border-color var(--dur-micro); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-color: currentColor; }
  .btn--small { min-height: 40px; padding: 0 1.1rem; font-size: 0.875rem; }
  .site-header__book { white-space: nowrap; }
  .site-header__menu-button {
    white-space: nowrap; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.25rem;
    background: none; border: 0; font: 600 0.9375rem/1 var(--font-body); color: inherit;
  }
  .site-header__menu-button::before { content: ""; width: 22px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .site-header__menu-button[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
  @media (max-width: 479px) { .site-header__book { display: none; } .brand__mark { width: 3.25rem; height: 3.25rem; } }
  @media (max-width: 899px) {
    .brand__name { font-size: 1.125rem; }
    .site-header__inner { gap: var(--space-s); }
    .site-nav {
      position: fixed; inset: 0; z-index: 40; width: 100%; max-width: 100%; padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-xl);
      background: var(--slate); color: var(--bone);
      transition: opacity var(--dur-ui) var(--ease-ui), visibility var(--dur-ui);
    }
    .site-nav ul { flex-direction: column; gap: var(--space-s); font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; }
    .site-nav a { border: 0; }
    .site-nav a[aria-current="page"] { color: var(--gold); }
    .js [data-menu]:not([data-open]) { visibility: hidden; opacity: 0; pointer-events: none; }
    html.menu-open .site-header { color: var(--bone); background: transparent; }
    html.menu-open .site-header__book { color: var(--gold); }
    html.menu-open .site-header.is-fixed { background: transparent; }
  }
  @media (min-width: 900px) { [data-menu-button] { display: none; } }
  html.menu-open { overflow: hidden; }

  /* Footer */
  .site-footer { padding-block: var(--space-2xl) var(--space-l); }
  .site-footer__grid { display: grid; gap: var(--space-l); font-size: 0.9375rem; }
  @media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
  .site-footer .brand { margin-block-end: var(--space-s); }
  .site-footer p { margin-block-end: 0.375rem; color: var(--c-muted); max-width: none; }
  .site-footer a { color: var(--c-fg); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .site-footer__cta { margin-block-start: var(--space-xs); }
  .site-footer__legal { margin-block-start: var(--space-xl); padding-block-start: var(--space-s); border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--step--1); color: var(--c-muted); }
}

/* -------------------------------------------------------------------------- */
@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.75rem;
    background: var(--c-accent); color: var(--c-on-accent); font: 600 0.9375rem/1 var(--font-body);
    text-decoration: none; border: 0; border-radius: var(--radius-pill); cursor: pointer;
    transition: background-color 0.25s var(--ease-ui), color 0.25s var(--ease-ui), transform 0.25s var(--ease-ui);
  }
  /* Hover: the pill turns slate with bone text and lifts 2px. */
  .btn:hover, .btn:focus-visible { background: var(--slate); color: var(--bone); transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn:focus-visible { outline-color: var(--c-link); }
  .btn--ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--bone); }
  .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--bone); color: var(--slate); }
  .link { color: var(--c-link); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
  .link:hover { text-decoration-thickness: 2.5px; }
  .after-cta { display: block; margin-block-start: var(--space-xs); font-size: 0.9375rem; }

  /* Colour panels (Why choose) */
  .panel { padding: var(--space-l) var(--space-m) var(--space-l); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); }
  .panel h3 { font-size: var(--step-2); }
  .panel p { font-size: 0.9375rem; }
  .panel--slate { background: var(--slate); color: var(--bone); }
  .panel--taupe { background: var(--taupe); color: var(--ink); }
  .panel--sand { background: var(--sand); color: var(--ink); }
  .panel--gold { background: var(--gold); color: var(--slate-2); }

  /* Offset photo: image over a sage rectangle set down and left */
  /* Photos in the page get a slight radius; full-bleed heroes and cut-outs stay square. */
  :is(.welcome__photo, .why__photo, .bio__photo, .page-hero__photo, .offset-photo) img, .offset-photo::before, .pcard__photo, .people__stage { border-radius: var(--radius); }
  .offset-photo { position: relative; padding: 0 0 1.75rem 1.75rem; }
  .offset-photo::before { content: ""; position: absolute; left: 0; bottom: 0; width: 78%; height: 78%; background: var(--sage); }
  .offset-photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

  /* Numbered list on slate (tenets, stages) */
  .numbered { counter-reset: n; }
  .numbered > li { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-s); padding-block: var(--space-m); border-top: 1px solid var(--c-line); }
  .numbered > li::before { counter-increment: n; content: counter(n); font: 700 var(--step-4)/1 var(--font-display); color: var(--gold); }
  .numbered h3 { margin-block-end: 0.375rem; }
  .numbered p { font-size: 0.9375rem; color: var(--c-muted); }

  /* Quotes (reviews) */
  .quote { padding-inline-start: 1.375rem; border-left: 3px solid var(--gold); }
  .quote p { font: 500 var(--step-1)/1.5 var(--font-display); color: var(--c-fg); margin-block-end: 0.5rem; }
  .quote cite { font-style: normal; font-size: var(--step--1); color: var(--c-muted); }

  /* Accordion (FAQ) */
  .faq details { border-top: 1px solid var(--c-line); }
  .faq details:last-child { border-bottom: 1px solid var(--c-line); }
  .faq summary { list-style: none; cursor: pointer; padding-block: var(--space-s); font: 600 var(--step-1)/1.3 var(--font-display); color: var(--slate); display: flex; justify-content: space-between; gap: var(--space-s); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-weight: 400; color: var(--taupe); flex: none; }
  .faq details[open] summary::after { content: "\2013"; }
  .faq details > div { padding-block: 0 var(--space-m); }
  .faq details > div > * + * { margin-block-start: var(--space-xs); }

  /* Forms */
  .field { display: grid; gap: 0.375rem; margin-block-end: var(--space-s); }
  .field label { font-size: 0.9375rem; font-weight: 600; color: var(--c-fg); }
  .field .optional { font-weight: 400; color: var(--c-muted); }
  .field :is(input, textarea, select) { width: 100%; padding: 0.8rem 0.9rem; background: var(--c-field-bg); color: var(--c-fg); border: 1px solid var(--c-line); border-radius: var(--radius); }
  .field :is(input, textarea, select):focus { outline: 2px solid var(--slate); outline-offset: 2px; border-color: var(--slate); }
  .field :is(input, textarea, select):user-invalid { border-color: var(--c-error); }
  .form-status { min-height: 1.5em; margin-block-start: var(--space-xs); font-size: 0.9375rem; }
  form.is-sent .form-status { color: var(--slate); font-weight: 600; }
  form.is-error .form-status { color: var(--c-error); }
  form[aria-busy="true"] [type="submit"] { opacity: 0.6; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Credential logos */
  .logos { display: grid; gap: var(--space-l); }
  @media (min-width: 700px) { .logos { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .logos { grid-template-columns: repeat(4, 1fr); } }
  .logos img { height: 3.5rem; width: auto; object-fit: contain; margin-block-end: var(--space-s); }
  .logos p { font-size: 0.9375rem; color: var(--c-muted); }
}

/* -------------------------------------------------------------------------- */
/* Blog templates (kept for the dashboard; restyled to the tokens). */
@layer components {
  .blog-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); font-size: var(--step--1); color: var(--c-muted); }
  .blog-crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: var(--space-2xs); }
  .blog-crumbs [aria-current] { color: var(--c-fg); }
  .blog-index { padding-block: var(--space-2xl) var(--space-3xl); }
  .blog-index__title { font-size: var(--step-5); margin-block: var(--space-m) var(--space-s); }
  .blog-index__intro { max-width: 65ch; font-size: var(--step-1); color: var(--c-muted); }
  .post-list { display: grid; gap: var(--space-xl) var(--space-l); margin-block-start: var(--space-xl); }
  @media (min-width: 768px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .post-list__empty { grid-column: 1 / -1; color: var(--c-muted); }
  .post-card__link { display: grid; align-content: start; gap: var(--space-2xs); height: 100%; text-decoration: none; }
  .post-card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-block-end: var(--space-2xs); }
  .post-card__meta { font-size: var(--step--1); color: var(--c-muted); }
  .post-card__title { font-size: var(--step-2); line-height: 1.15; }
  .post-card__link:is(:hover, :focus-visible) .post-card__title { text-decoration: underline; text-underline-offset: 0.15em; }
  .post-card__excerpt { color: var(--c-muted); }
  .post { width: min(65ch, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--space-2xl) var(--space-3xl); }
  .post__header { display: grid; gap: var(--space-xs); margin-block: var(--space-m) var(--space-l); }
  .post__category { font-size: var(--step--1); color: var(--c-muted); }
  .post__title { font-size: var(--step-4); }
  .post__meta { font-size: var(--step--1); color: var(--c-muted); }
  .post__author { display: flex; align-items: center; gap: var(--space-xs); }
  .post__author-photo { width: var(--space-xl); height: var(--space-xl); border-radius: 50%; object-fit: cover; }
  .post__author-name { display: block; font-weight: 600; }
  .post__author-title { display: block; font-size: var(--step--1); color: var(--c-muted); }
  .post__hero { margin-block-end: var(--space-l); }
  .post__hero img { width: 100%; border-radius: var(--radius); }
  .post__body { overflow-wrap: break-word; }
  .post__body :is(p, ul, ol, table, figure, blockquote) + :is(p, ul, ol, table, figure, blockquote) { margin-block-start: var(--space-s); }
  .post__body :is(ul, ol) { padding-inline-start: 1.25em; }
  .post__body li + li { margin-block-start: var(--space-2xs); }
  .post__body h2 { font-size: var(--step-3); margin-block: var(--space-xl) var(--space-s); }
  .post__body h3 { font-size: var(--step-1); line-height: 1.25; margin-block: var(--space-l) var(--space-2xs); }
  .post__body a { text-underline-offset: 0.15em; }
  .post__body table { display: block; overflow-x: auto; border-collapse: collapse; }
  .post__body :is(th, td) { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--c-line); text-align: start; }
  .post__panel { padding: var(--space-m); border: 1px solid var(--c-line); border-radius: var(--radius); margin-block-end: var(--space-l); }
  .post__body .post__label { font-size: var(--step-1); margin-block: 0 var(--space-2xs); }
  .post__conclusion { margin-block-start: var(--space-l); }
  .post-faq details { border-block-end: 1px solid var(--c-line); }
  .post-faq summary { padding-block: var(--space-s); font-weight: 600; cursor: pointer; }
  .post-faq details > div { padding-block-end: var(--space-s); }
  .post__cta { margin-block-start: var(--space-xl); padding: var(--space-l); background: var(--slate); color: var(--bone); border-radius: var(--radius); }
  .post__cta h2 { font-size: var(--step-2); color: var(--bone); }
  .post__cta p { margin-block: var(--space-xs) var(--space-m); }
  .post__cta-button { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-m); background: var(--gold); color: var(--slate-2); font-weight: 600; text-decoration: none; border-radius: var(--radius); }
  .post__back { margin-block-start: var(--space-l); }
}

/* -------------------------------------------------------------------------- */
@layer sections {
  /* 01 Home hero, "the cover". A grid: the headline spans the field at the
     top; the paragraph and buttons stack at the lower left; the four stand at
     the bottom right in front of the blurred clinic room, with name labels on
     their own layer in front. Figures are sized in container height (cqh) so
     the labels can be placed from the same numbers. */
  .cover::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 11rem; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(47, 61, 75, 0.5), rgba(47, 61, 75, 0)); }
  .cover {
    position: relative; min-height: max(100svh, 780px); overflow: clip;
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) [c-start] minmax(0, var(--container)) [c-end] minmax(var(--gutter), 1fr);
    grid-template-rows: calc(var(--header-h) + clamp(1rem, 5vh, 3rem)) auto 1fr auto auto clamp(5rem, 16vh, 9rem);
    --cover-field: #7F908A; /* her sage one step deeper */
    background: var(--cover-field);
  }
  .cover__title { grid-column: c-start / c-end; grid-row: 2; position: relative; z-index: 1; font-size: clamp(3rem, 7.4vw, 7.5rem); line-height: 0.98; letter-spacing: -0.025em; color: var(--bone); max-width: 22ch; }
  .cover__copy { grid-column: c-start / c-end; grid-row: 4; position: relative; z-index: 6; max-width: min(38%, 470px); font-size: var(--step-0); line-height: 1.55; color: var(--bone); margin-block-end: var(--space-m); }
  .cover__actions { grid-column: c-start / c-end; grid-row: 5; position: relative; z-index: 6; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  /* The clinic room (pre-blurred, part-desaturated) under a sage tint, so posters, lamp, curtain, window and table read as a room; the left and floor darken for the text. */
  .cover__room { position: absolute; inset: 0; z-index: 0; overflow: clip; }
  .cover__room img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .cover__band {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(47, 61, 75, 0.5) 0%, rgba(47, 61, 75, 0.22) 40%, rgba(47, 61, 75, 0.06) 60%),
      linear-gradient(180deg, rgba(47, 61, 75, 0) 50%, rgba(47, 61, 75, 0.45) 100%),
      rgba(140, 157, 147, 0.68);
  }
  .cover__figs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .cover__fig { position: absolute; bottom: -2%; margin: 0; }
  .cover__fig picture, .cover__fig img { height: 100%; width: auto; }
  .cover__fig { will-change: transform; }
  .cover__fig img { filter: none; }
  .cover__fig--kyle { left: 39%; height: 58%; }
  .cover__fig--brennan { left: 48%; height: 62%; }
  .cover__fig--paige { left: 63%; height: 78%; z-index: 2; }
  .cover__fig--jenny { left: 80%; height: 54%; }
  .cover__grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  /* Name labels: one layer above the figures. Each li mirrors its figure's box
     (same left, height and image ratio), so the label centres under the person. */
  .cover__labels { position: absolute; inset: 0; z-index: 6; pointer-events: none; margin: 0; }
  .cover__label { will-change: transform; }
  .cover__label { position: absolute; bottom: -2%; }
  .cover__label--kyle { left: 39%; height: 58%; aspect-ratio: 1517 / 2048; }
  .cover__label--brennan { left: 48%; height: 62%; aspect-ratio: 1544 / 1552; }
  .cover__label--paige { left: 63%; height: 78%; aspect-ratio: 2048 / 2732; }
  .cover__label--jenny { left: 80%; height: 54%; aspect-ratio: 1085 / 1449; }
  .cover__label > div {
    position: absolute; left: 50%; bottom: 6rem;
    display: grid; gap: 0; text-align: center; color: var(--bone); white-space: nowrap; font-size: 0.8rem; line-height: 1.2;
    text-shadow: 0 1px 2px rgba(25, 32, 36, 0.45), 0 0 18px rgba(25, 32, 36, 0.35);
    transform: translate(-50%, 0); opacity: 1;
  }
  .cover__label b { font-family: var(--font-hand); font-weight: 600; font-size: 1.9rem; line-height: 1; letter-spacing: 0.01em; }
  .cover__label span { color: rgba(249, 249, 249, 0.72); font-size: 0.8rem; }
  .cover__label--brennan > div, .cover__label--jenny > div { bottom: 9rem; }
  /* Phones: the cover is exactly one screen (svh: the height left under the browser bars). Headline, copy
     and buttons at the top; the group fills the rest, standing on the bottom edge, names on them.
     The group is one box of fixed proportions (the desktop composition: Kyle, Brennan, Paige, Jenny),
     as tall as the space allows, so the arrangement never changes; at most its outer shoulders crop. */
  @media (max-width: 899px) {
    .cover { min-height: 0; height: 100svh; grid-template-rows: calc(var(--header-h) + 0.25rem) auto auto auto minmax(0, 1fr); }
    .cover__title { grid-row: 2; font-size: clamp(2.3rem, min(12.5vw, 6.4svh), 3.4rem); max-width: none; margin-block-end: var(--space-xs); }
    .cover__copy { grid-row: 3; max-width: none; margin-block: 0 var(--space-s); font-size: var(--step--1); }
    .cover__actions { grid-row: 4; flex-wrap: nowrap; gap: 0.5rem; }
    .cover__actions .btn { min-height: 42px; padding: 0 0.95rem; font-size: 0.84rem; white-space: nowrap; }
    .cover__room img { object-position: 40% 30%; }
    .cover__figs, .cover__labels {
      position: relative; inset: auto; grid-column: 1 / -1; grid-row: 5; align-self: end; justify-self: start;
      height: min(100%, 96vw); aspect-ratio: 1.46; margin-inline-start: 50%; translate: -50% 0;
      margin-block-start: var(--space-s); border: 0; padding: 0;
    }
    .cover__fig { bottom: 0; }
    .cover__fig picture, .cover__fig img { height: 100%; width: auto; }
    .cover__fig--kyle, .cover__label--kyle { left: 0; height: 74.4%; }
    .cover__fig--brennan, .cover__label--brennan { left: 14%; height: 79.5%; }
    .cover__fig--paige, .cover__label--paige { left: 37.5%; height: 100%; }
    .cover__fig--jenny, .cover__label--jenny { left: 64%; height: 69.2%; }
    .cover__label { position: absolute; bottom: 0; }
    .cover__label > div { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; transform: none; white-space: nowrap; font-size: 0.6rem; line-height: 1.15; }
    .cover__label--brennan > div, .cover__label--jenny > div { bottom: 24%; }
    .cover__label b { font-size: clamp(1rem, 4.6vw, 1.25rem); line-height: 1.05; }
    .cover__label span { font-size: 0.58rem; }
  }

  /* Phones: the home Why section drops its photo, so two photos don't stack back to back after Welcome */
  @media (max-width: 899px) { #why .why__photo { display: none; } }

  /* 02 Welcome */
  .welcome__names { margin-block: var(--space-s); padding-inline-start: 1rem; border-inline-start: 3px solid var(--gold); font-family: var(--font-display); font-weight: 600; color: var(--slate); line-height: 1.6; }
  .welcome__photo img { width: 100%; height: auto; }
  @media (min-width: 900px) { .welcome .two-col { align-items: stretch; } .welcome__photo { position: relative; } .welcome__photo picture, .welcome__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } }
  .credentials .logos img { height: 4.25rem; }

  /* 04 What is Osteopathy */
  .what__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); max-width: none; }

  /* 06 Reviews */
  .reviews__widget:empty { display: none; }
  .reviews.has-widget .reviews__todo { display: none; }
  .reviews__todo { display: grid; place-items: center; max-width: none; min-height: 16rem; margin-block-start: var(--space-l); padding: var(--space-l); border: 2px dashed var(--c-line); border-radius: var(--radius); text-align: center; color: var(--slate); font-weight: 600; }
  .reviews__grid { display: grid; gap: var(--space-l) clamp(2rem, 5vw, 5.5rem); }
  @media (min-width: 900px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
  .reviews__all { margin-block-start: var(--space-l); }

  /* 07 Practitioners */
  .people__names { border-block-start: 1px solid var(--c-line); }
  .people__names li { border-block-end: 1px solid var(--c-line); }
  .people__names a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); padding-block: var(--space-s); text-decoration: none; color: var(--slate); }
  .people__names b { font: 600 var(--step-3)/1.1 var(--font-display); transition: color var(--dur-micro); }
  .people__names small { font-size: var(--step--1); color: var(--c-muted); text-align: end; }
  .people__names li.is-on b, .people__names a:hover b { color: var(--sage-2); }
  .people__more { margin-block-start: var(--space-l); }
  .people__stage { position: relative; aspect-ratio: 4 / 5; overflow: clip; background: linear-gradient(180deg, rgba(47, 61, 75, 0) 55%, rgba(47, 61, 75, 0.45) 100%), linear-gradient(rgba(140, 157, 147, 0.62), rgba(140, 157, 147, 0.62)), url("/assets/img/clinic-room-16-1200.webp") 50% 35% / cover no-repeat, var(--sage); }
  .people__stage-inner { position: absolute; inset: 0; }
  /* Each cut-out is placed by hand (--h: its height, --t: its top, both as % of the stage) so the four heads
     read the same size with the eyes on one line. The bottom fades into the floor shadow so a cut-out's lower
     edge never shows. Absolute positioning, not grid, so every browser resolves the percentages the same way. */
  /* Each stage cut-out is cropped 3.5 eye-to-chin lengths below the eyes and sits on the stage's bottom
     edge; --h makes the eye-to-chin length equal for all four, so heads match and the eyes share a line. */
  .people__stage picture { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-ui) var(--ease-ui); }
  .people__stage picture.is-on { opacity: 1; }
  .people__stage img { position: absolute; bottom: 0; left: 50%; height: var(--h, 90%); width: auto; max-width: none; translate: -50% 0; }
  .people__stage [data-who="paige"] { --h: 89.8%; }
  .people__stage [data-who="brennan"] { --h: 85.7%; }
  .people__stage [data-who="jenny"] { --h: 89.8%; }
  .people__stage [data-who="kyle"] { --h: 98.6%; }
  @media (min-width: 900px) { .people__grid { align-items: end; } }
  /* Phones: the name list becomes a row of swipeable cards (scroll-snap), each the person standing in the
     clinic room with their name on them; each card is the link to their page. The hover stage is desktop only. */
  @media (max-width: 899px) {
    .people { padding-block: var(--space-xl); }
    .people__stage { display: none; }
    .people__grid > div { min-width: 0; } /* or the column grows to fit every card */
    .people__names {
      display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 0.75rem; border: 0;
      overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
      margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    }
    .people__names::-webkit-scrollbar { display: none; }
    .people__names li { border: 0; scroll-snap-align: start; }
    .people__names a {
      display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.2rem;
      height: min(60svh, 32rem); padding: var(--space-s); border-radius: var(--radius); color: var(--bone);
      background: linear-gradient(180deg, rgba(47, 61, 75, 0) 55%, rgba(47, 61, 75, 0.8) 100%), var(--cut) 50% 100% / auto var(--h) no-repeat, linear-gradient(rgba(140, 157, 147, 0.62), rgba(140, 157, 147, 0.62)), url("/assets/img/clinic-room-16-800.webp") 50% 35% / cover no-repeat, var(--sage);
    }
    .people__names b, .people__names li.is-on b, .people__names a:hover b { color: var(--bone); font-size: var(--step-2); }
    .people__names small { color: var(--mist); text-align: start; }
    .people__names [data-who="paige"] { --cut: url("/assets/img/paige-stage-800.webp"); --h: 89.8%; }
    .people__names [data-who="brennan"] { --cut: url("/assets/img/brennan-stage-800.webp"); --h: 85.7%; }
    .people__names [data-who="jenny"] { --cut: url("/assets/img/jenny-stage-800.webp"); --h: 89.8%; }
    .people__names [data-who="kyle"] { --cut: url("/assets/img/kyle-stage-800.webp"); --h: 98.6%; }
    .people__more { margin-block-start: var(--space-m); }
  }

  /* 08 Credentials */
  .credentials .logos h3 { font-size: var(--step-1); margin-block-end: var(--space-2xs); }
  .credentials .logos a { display: inline-block; }

  /* Inner page heroes */
  /* Inner heroes carry the same room as the home cover, under a heavier sage tint so the text leads. */
  .page-hero {
    padding-block: calc(var(--header-h) + var(--space-l)) var(--space-2xl);
    background:
      linear-gradient(90deg, rgba(47, 61, 75, 0.5) 0%, rgba(47, 61, 75, 0.22) 40%, rgba(47, 61, 75, 0.1) 70%),
      linear-gradient(180deg, rgba(47, 61, 75, 0) 60%, rgba(47, 61, 75, 0.3) 100%),
      linear-gradient(rgba(140, 157, 147, 0.78), rgba(140, 157, 147, 0.78)),
      url("/assets/img/clinic-room-16-1600.webp") center 40% / cover no-repeat,
      #7F908A;
  }
  .page-hero--short { padding-block-end: var(--space-xl); }
  .page-hero h1 { color: var(--bone); max-width: 18ch; }
  .page-hero .lead { margin-block-start: var(--space-s); max-width: 46ch; color: var(--bone); font-size: var(--step-0); line-height: 1.55; }
  .page-hero .lead + p { margin-block-start: var(--space-m); }
  .page-hero__grid { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 900px) { .page-hero__grid { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); } }
  .page-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .page-hero--person { padding-block-end: 0; overflow: clip; }
  .page-hero--person .page-hero__grid { align-items: end; }
  .page-hero--person .page-hero__grid > div:first-child { padding-block-end: var(--space-2xl); }
  .page-hero__cutout { justify-self: center; width: min(100%, 26rem); }
  .page-hero__cutout img { width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(25, 32, 36, 0.28)); }
  @media (max-width: 899px) {
    .page-hero--person { height: 100svh; padding-block-start: calc(var(--header-h) + var(--space-s)); }
    .page-hero--person .page-hero__grid { height: 100%; gap: var(--space-s); grid-template-rows: auto minmax(0, 1fr); }
    .page-hero--person .page-hero__grid > div:first-child { padding-block-end: 0; }
    .page-hero--person .person__cred { margin-block: 0.25rem var(--space-s); }
    .page-hero--person .page-hero__cutout { width: auto; height: 100%; min-height: 0; align-self: end; }
    .page-hero--person .page-hero__cutout picture { display: block; height: 100%; }
    .page-hero--person .page-hero__cutout img { height: 100%; width: auto; max-width: none; margin-inline: auto; }
  }
  .person__more svg { width: 1em; height: 1em; margin-inline-start: 0.4rem; }
  .page-hero--person .what__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  @media (min-width: 900px) { .person__more { display: none; } } /* on desktop the bio is already in view below */
  @media (max-width: 899px) { .page-hero--person .what__actions { flex-wrap: nowrap; gap: 0.5rem; } .page-hero--person .what__actions .btn { min-height: 44px; padding: 0 1.05rem; font-size: 0.875rem; white-space: nowrap; } }
  .person__cred { font: 600 var(--step-1)/1.3 var(--font-display); color: var(--mist); margin-block: var(--space-xs) var(--space-m); }
  .note { font-size: var(--step--1); color: var(--c-muted); max-width: 70ch; margin-block-start: var(--space-l); }

  /* About */
  .conditions { display: grid; gap: var(--space-m); }
  @media (min-width: 700px) { .conditions { grid-template-columns: 1fr 1fr; } }
  .conditions > div { padding-inline-start: 1rem; border-inline-start: 3px solid var(--gold); }
  .conditions h3 { font-size: var(--step-1); margin-block-end: 0.375rem; }
  .conditions p { font-size: 0.9375rem; color: var(--c-muted); }
  .prices { width: 100%; max-width: 32rem; border-collapse: collapse; font-size: var(--step-0); }
  .prices th, .prices td { padding: 0.75rem 0; border-block-end: 1px solid var(--c-line); text-align: start; font-weight: 400; }
  .prices td { text-align: end; font: 600 var(--step-1)/1 var(--font-display); color: var(--slate); white-space: nowrap; }
  .prices__gst { margin-block-start: var(--space-xs); font-size: var(--step--1); color: var(--c-muted); }
  @media (min-width: 900px) { .pricing__copy { padding-block-start: calc(var(--step-4) * 1.08 + var(--space-l)); } }

  /* Practitioners index */
  .person-card { display: grid; gap: var(--space-l); align-items: center; padding-block: var(--space-xl); border-block-start: 1px solid var(--c-line); }
  .person-card:first-of-type { border-block-start: 0; padding-block-start: 0; }
  @media (min-width: 900px) { .person-card { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 6rem); } .person-card--rev .person-card__photo { order: 2; } }
  .person-card__photo { aspect-ratio: 4 / 5; display: grid; align-items: end; justify-items: center; overflow: clip; }
  .person-card__photo img { max-height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 18px 22px rgba(25, 32, 36, 0.28)); }
  .person-card__cred { font: 600 var(--step-0)/1.4 var(--font-display); color: var(--slate); margin-block: var(--space-2xs) var(--space-s); }
  .person-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-block-start: var(--space-m); max-width: none; }

  /* Practitioner page */
  .bio__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  @media (min-width: 900px) { .bio .two-col { align-items: start; } .bio__photo { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
  .logos--three { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .faq--narrow { max-width: 60rem; }

  /* FAQ page */
  .faq-page__sub { color: var(--c-muted); }
  .faq details > div ul { padding-inline-start: 1.25em; }

  /* Contact */
  .contact__address { font-style: normal; margin-block: var(--space-s) 0; }
  .contact__address p + p { margin-block-start: var(--space-s); }
  .privacy h2 { font-size: var(--step-2); color: var(--slate); }

  /* Audit fixes (2026-10-29): varied heroes, compact touch line, photo-led "why", portrait grid, signatures, contact picker */
  .touch--line { padding-block: var(--space-l); }
  .touch__line { display: grid; gap: var(--space-s); align-items: center; }
  @media (min-width: 900px) { .touch__line { grid-template-columns: 1fr auto; } }
  .touch__line p { max-width: 60ch; font-size: var(--step-0); margin: 0; }

  .why__grid { display: grid; gap: var(--space-xl); align-items: start; }
  @media (min-width: 900px) { .why__grid { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 7rem); } .why__photo { position: sticky; top: calc(var(--header-h) + var(--space-m)); } }
  .why__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
  .reasons { margin: 0; }
  .reasons > div { padding-block: var(--space-m); border-block-start: 1px solid var(--c-line); display: grid; gap: var(--space-2xs); }
  @media (min-width: 700px) { .reasons > div { grid-template-columns: 14rem 1fr; gap: var(--space-m); } }
  .reasons dt { font: 600 var(--step-2)/1.15 var(--font-display); color: var(--slate); }
  .reasons dd { margin: 0; }
  .reasons dd p + p { margin-block-start: var(--space-xs); }

  .pcards { display: grid; gap: var(--space-xl) var(--space-l); }
  @media (min-width: 900px) { .pcards { grid-template-columns: 1fr 1fr; } .pcard:nth-child(even) { transform: translateY(var(--space-2xl)); } .people-grid { padding-block-end: calc(var(--space-2xl) + var(--space-2xl)); } }
  .pcard__photo { display: block; overflow: clip; background: var(--sage); }
  .pcard__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.8s var(--ease-out); }
  .pcard__photo:hover img { transform: scale(1.03); }
  .pcard__body { padding-block-start: var(--space-s); }
  .pcard h2 { font-size: var(--step-3); }
  .pcard h2 a { text-decoration: none; color: inherit; }
  .pcard h2 a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .pcard__cred { font: 600 var(--step-0)/1.4 var(--font-display); color: var(--slate); margin-block: var(--space-2xs) var(--space-s); }
  .pcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-block-start: var(--space-m); max-width: none; }
  .pcard__actions .btn { white-space: nowrap; }
  .btn--line { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--slate); }
  .btn--line:hover, .btn--line:focus-visible { background: var(--slate); color: var(--bone); }
  @media (max-width: 899px) {
    .pcards { gap: var(--space-xl); }
    .pcard__photo img { aspect-ratio: 4 / 3; object-position: 50% 25%; }
    .pcard h2 { font-size: var(--step-2); color: var(--slate); } /* taupe passes only at large sizes */
    .pcard__cred { margin-block: 0.15rem var(--space-xs); }
    .pcard__bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* the full bio is one tap away */
    .pcard__actions { margin-block-start: var(--space-s); }
    .pcard__actions { gap: 0.5rem; }
    .pcard__actions .btn { min-height: 44px; padding: 0 0.8rem; font-size: 0.84rem; flex: 1 1 0; }
  }

  .person__sig, .picker__sig { font: 600 clamp(2rem, 4vw, 3rem)/1 var(--font-hand); color: var(--gold); margin-block: -0.25rem 0.5rem; }
  .picker__sig { color: var(--slate); font-size: clamp(2.4rem, 4.5vw, 3.4rem); margin-block: 0 0.25rem; }
  .picker__panel h2.picker__sig { font-family: var(--font-hand); }

  .page-hero--sand { background: var(--sand); }
  .page-hero--sand h1 { color: var(--slate); }
  .page-hero--sand .lead { color: var(--ink); }


  /* 05 Tenets: text left, the drawn spine right. The module pins the section and
     draws the spine as each tenet becomes current; without it the spine is simply
     drawn and all four tenets are shown. */
  .tenets__grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 900px) { .tenets { padding-block: var(--space-l); } .tenets__grid { grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 6rem); height: calc(100svh - 2 * var(--space-l)); } .tenets .section__title { font-size: var(--step-3); margin-block-end: var(--space-m); } .tenets__list { gap: 0; } .tenet { padding-block: 0.8rem; grid-template-columns: 2rem 1fr; } .tenet h3 { font-size: var(--step-1); } .tenet p { font-size: 0.875rem; line-height: 1.5; } .tenets__model { width: min(100%, 19rem); max-height: calc(100svh - 2 * var(--space-l)); } .tenets__spine { max-height: calc(100svh - 2 * var(--space-l)); width: auto; margin-inline: auto; } }
  .tenets__lead { margin-block-end: var(--space-l); color: var(--c-muted); }
  .tenets__list { display: grid; gap: var(--space-s); }
  .tenet { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-s); padding-block: var(--space-s); border-block-start: 1px solid var(--c-line); transition: opacity var(--dur-ui) var(--ease-ui); }
  .tenet__n { font: 700 var(--step-3)/1 var(--font-display); color: var(--gold); }
  .tenet h3 { margin-block-end: 0.375rem; }
  .tenet p { font-size: 0.9375rem; color: var(--c-muted); }
  .tenets__model { margin: 0; position: relative; justify-self: center; width: min(100%, 22rem); }
  .tenets__spine { width: 100%; height: auto; display: block; overflow: visible; }
  .tenets__spine .v { stroke: var(--bone); stroke-width: 2.2; fill: rgba(249, 249, 249, 0.1); }
  .tenets__spine .p { stroke: var(--bone); stroke-width: 1.8; }
  .tenets__spine .r { stroke: var(--bone); stroke-width: 2.4; stroke-linecap: round; }
  .tenets__spine .h { stroke: var(--bone); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
  .tenets__spine .s { fill: var(--bone); opacity: 0.9; }
  .tenets__spine .f { stroke: var(--bone); stroke-width: 1.4; }
  .tenets__pulse { position: absolute; left: 50%; top: 5%; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(235, 191, 128, 0.25), 0 0 28px 6px rgba(235, 191, 128, 0.45); transform: translate(-50%, -50%); opacity: 0; }
  /* While the module runs: the inactive tenets dim; the current one is full. */
  .motion .tenets:not(.motion-off) .tenet :is(h3, .tenet__n) { opacity: 0.72; transition: opacity var(--dur-ui) var(--ease-ui); }
  .motion .tenets:not(.motion-off) .tenet.is-current :is(h3, .tenet__n) { opacity: 1; }
  .motion .tenets:not(.motion-off) .tenet.is-current .tenet__n { color: var(--gold); }
  @media (max-width: 899px) { .tenets__model { width: min(60%, 14rem); order: -1; } }
  /* Phones with motion: tenets.js pins the section and adds .is-pinned. One screen: the title, the spine
     filling the middle, and the current tenet below it (the four share one cell, so nothing jumps). */
  @media (max-width: 899px) {
    .tenets.is-pinned { height: 100vh; height: 100lvh; padding-block: var(--space-l) 0; }
    /* the grid is the container; it ends short of the bottom, leaving room for Safari's toolbar and home bar, so the last line is never covered */
    .tenets.is-pinned .tenets__grid { height: calc(100svh - 2 * var(--space-l) - 1rem - env(safe-area-inset-bottom, 0px)); gap: var(--space-s); grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; }
    .tenets.is-pinned .tenets__text { display: contents; }
    .tenets.is-pinned .section__title { order: 1; font-size: var(--step-3); margin: 0; }
    .tenets.is-pinned .tenets__model { order: 2; width: auto; height: 100%; min-height: 0; justify-self: center; }
    .tenets.is-pinned .tenets__spine { height: 100%; width: auto; }
    .tenets.is-pinned .tenets__list { order: 3; display: grid; }
    .tenets.is-pinned .tenet h3 { font-size: var(--step-1); }
    .tenets.is-pinned .tenet p { font-size: 0.875rem; line-height: 1.5; }
    .tenets.is-pinned .tenet { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-ui), visibility 0.35s; border-block-start: 1px solid var(--c-line); }
    .tenets.is-pinned .tenet.is-current { opacity: 1; visibility: visible; }
    .tenets.is-pinned .tenet :is(h3, .tenet__n) { opacity: 1; }
  }

  /* Inner heroes (About, Practitioners, FAQ): copy on the deep sage field, a photo whole on the
     right that blends in at the seam. #647670 so bone body text passes 4.5:1. */
  .page-hero--split { position: relative; overflow: clip; display: grid; align-items: center; background: #647670; min-height: 72svh; }
  .page-hero--split .page-hero__text { position: relative; z-index: 1; }
  .page-hero--split .lead { max-width: 46ch; }
  .page-hero__pic { display: block; margin: 0; }
  .page-hero__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) {
    .page-hero--split .page-hero__pic { position: absolute; inset: 0 0 0 46%; }
    .page-hero--split .page-hero__pic img { object-position: var(--pos, 50% 30%); }
    .page-hero--split .page-hero__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #647670 0%, rgba(100, 118, 112, 0.6) 16%, rgba(100, 118, 112, 0.16) 42%, rgba(100, 118, 112, 0.16) 100%); }
  }
  @media (max-width: 899px) {
    .page-hero--split { min-height: 0; padding-block-end: 0; }
    .page-hero--split .page-hero__pic { margin-block-start: var(--space-l); aspect-ratio: 4 / 3; }
    .page-hero--split .page-hero__pic img { object-position: var(--pos-m, 50% 30%); }
  }
  .page-hero--about { --pos: 40% 20%; --pos-m: 45% 20%; }
  .page-hero--team { --pos: 45% 50%; --pos-m: 45% 50%; }
  .page-hero--faq { --pos: 40% 30%; --pos-m: 40% 20%; min-height: 60svh; }
  .page-hero .lead a { color: var(--bone); }
  .faq-page--second { padding-block-start: 0; }
  .why__photo--right img { object-position: 50% 20%; }
  @media (min-width: 900px) { .when .why__grid { grid-template-columns: 7fr 5fr; } }
  .when .lead { margin-block-end: var(--space-s); }
  .when .lead + p { margin-block-end: var(--space-m); }
  .reasons--tight dt { font-size: var(--step-1); }
  .reasons--tight dd p { font-size: 0.9375rem; color: var(--c-muted); }

  .pricing .prices td { color: var(--slate); }


  /* Why: the titles settle into place with a small wobble as they arrive */


  /* Credentials: logo tabs */
  .ctabs__row { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); } /* anchors the hidden radios, or tapping a tab scrolls to the top */
  @media (min-width: 700px) { .ctabs__row { grid-template-columns: repeat(4, 1fr); } }
  .ctab__radio { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .ctab { display: grid; gap: 0.6rem; justify-items: center; align-content: start; padding: var(--space-m) var(--space-s); border-radius: var(--radius); border: 1px solid var(--c-line); background: #fff; cursor: pointer; text-align: center; font: 600 0.9rem/1.25 var(--font-body); color: var(--slate); transition: border-color var(--dur-micro), transform var(--dur-ui) var(--ease-ui); }
  .ctab img { height: 3rem; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.6); transition: filter var(--dur-ui); }
  .ctab:hover { transform: translateY(-2px); }
  .ctab:hover img, .ctab__radio:checked + .ctab img { filter: none; }
  .ctab__radio:checked + .ctab { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .ctab__radio:focus-visible + .ctab { outline: 2px solid var(--slate); outline-offset: 3px; }
  @media (max-width: 699px) {
    .credentials { padding-block: var(--space-xl); }
    .ctabs__row { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .ctab { padding: 0.5rem; height: 4.5rem; align-content: center; }
    .ctab img { height: 2.6rem; max-width: 100%; filter: none; }
    .ctab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the panel heading names it; the label stays the accessible name */
    .ctabs__panels { padding: var(--space-m); margin-block-start: var(--space-s); }
  }
  .ctabs__panels { display: grid; margin-block-start: var(--space-m); padding: var(--space-l); background: var(--mist); border-radius: var(--radius); }
  .ctab__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; } /* stacked: the box is as tall as the longest panel and nothing below it moves */
  .ctab__panel h3 { margin-block-end: var(--space-xs); color: var(--slate); }
  .ctab__panel p { max-width: 70ch; }
  .ctab__panel p + p { margin-block-start: var(--space-s); }
  .ctabs:has(#cred-ostcan:checked) [data-cred="ostcan"], .ctabs:has(#cred-cao:checked) [data-cred="cao"], .ctabs:has(#cred-uofa:checked) [data-cred="uofa"], .ctabs:has(#cred-upledger:checked) [data-cred="upledger"] { visibility: visible; opacity: 1; animation: picker-in 0.4s var(--ease-out); }
  @keyframes picker-in { from { transform: translateY(8px); } to { transform: none; } }
  @supports not selector(:has(a)) { .ctab__panel { grid-area: auto; visibility: visible; opacity: 1; } .ctab__panel + .ctab__panel { margin-block-start: var(--space-m); } }

  /* About: the three stages as a reading list. Stage and name on the left with a handwritten note of the
     usual number of treatments; the paragraph on the right at a comfortable measure. */
  .expect__intro { max-width: 60rem; }
  .expect__sub { margin-block: var(--space-xl) var(--space-s); }
  .stages { border-block-start: 1px solid var(--c-line); }
  .stage { display: grid; gap: var(--space-xs) var(--space-l); padding-block: var(--space-m); border-block-end: 1px solid var(--c-line); }
  @media (min-width: 900px) { .stage { grid-template-columns: minmax(14rem, 4fr) 8fr; padding-block: var(--space-l); } }
  .stage__k { display: block; font: 600 var(--step--1)/1 var(--font-body); color: var(--slate); margin-block-end: var(--space-2xs); }
  .stage h3 { color: var(--slate); font-size: var(--step-2); }
  .stage__note { display: inline-block; margin-block-start: var(--space-2xs); font: 600 clamp(1.5rem, 1.9vw, 1.75rem)/1.1 var(--font-hand); color: var(--taupe-text); rotate: -2deg; transform-origin: left center; }
  .stage p { max-width: 62ch; }

  /* Contact: one screen on desktop. Heading, then the who-card beside the form. */
  .reach { padding-block: calc(var(--header-h) + var(--space-m)) var(--space-xl); }
  .reach__head { margin-block-end: var(--space-m); }
  .reach__head h1 { font-size: var(--step-4); color: var(--slate); }
  .reach__head .lead { max-width: none; font-size: var(--step-0); color: var(--c-muted); margin-block-start: var(--space-xs); }
  .reach__grid { display: grid; gap: var(--space-l); align-items: start; }
  @media (min-width: 900px) { .reach__grid { grid-template-columns: 4fr 8fr; gap: clamp(1.5rem, 4vw, 4rem); } }
  .to__card { display: none; }
  .to__photo { overflow: clip; border-radius: var(--radius); background: var(--sage); }
  .to__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
  .to__photo--general { aspect-ratio: 1; }
  .to__photo--general { display: grid; place-items: center; background: linear-gradient(180deg, rgba(47, 61, 75, 0) 60%, rgba(47, 61, 75, 0.35) 100%), linear-gradient(rgba(140, 157, 147, 0.7), rgba(140, 157, 147, 0.7)), url("/assets/img/clinic-room-16-1200.webp") 50% 40% / cover no-repeat; }
  .to__mark { width: 42%; aspect-ratio: 1; background: var(--bone); -webkit-mask: url("/assets/img/monogram-240.webp") center / contain no-repeat; mask: url("/assets/img/monogram-240.webp") center / contain no-repeat; }
  .to__sig { font: 600 clamp(1.8rem, 2.6vw, 2.3rem)/1.05 var(--font-hand); color: var(--slate); margin-block: var(--space-s) 0.15rem; }
  .to__card--general .to__sig { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
  .to__cred { font: 600 var(--step--1)/1.4 var(--font-display); color: var(--slate); }
  .to__email { margin-block-start: var(--space-xs); font-size: var(--step--1); }
  .to__email a { color: var(--slate); font-weight: 600; }
  .to__more { margin-block-start: var(--space-2xs); font-size: var(--step--1); }
  .to { border: 0; padding: 0; margin: 0 0 var(--space-m); }
  .to__legend { font: 600 var(--step-1)/1.15 var(--font-display); color: var(--slate); margin-block-end: var(--space-xs); }
  .to__tiles { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; max-width: 36rem; }
  .to__radio { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .to__tile { display: grid; grid-template-rows: auto auto; align-content: start; gap: 0.3rem; cursor: pointer; text-align: center; font: 600 0.75rem/1.2 var(--font-body); color: var(--ink); }
  .to__tile picture, .to__tilemark { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: clip; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color var(--dur-micro), transform var(--dur-ui) var(--ease-ui), filter var(--dur-ui); filter: saturate(0.7) brightness(0.94); }
  .to__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .to__tilemark { background: var(--sage); display: grid; place-items: center; height: auto; }
  .to__tilemark::after { content: ""; width: 56%; aspect-ratio: 1; background: var(--bone); -webkit-mask: url("/assets/img/monogram-240.webp") center / contain no-repeat; mask: url("/assets/img/monogram-240.webp") center / contain no-repeat; }
  .to__tile:hover :is(picture, .to__tilemark) { transform: translateY(-3px); filter: none; }
  .to__radio:checked + .to__tile :is(picture, .to__tilemark) { outline-color: var(--gold); filter: none; transform: translateY(-3px); }
  .to__radio:focus-visible + .to__tile :is(picture, .to__tilemark) { outline-color: var(--slate); }
  .reach:has(#to-general:checked) [data-to="general"], .reach:has(#to-paige:checked) [data-to="paige"], .reach:has(#to-brennan:checked) [data-to="brennan"], .reach:has(#to-jenny:checked) [data-to="jenny"], .reach:has(#to-kyle:checked) [data-to="kyle"] { display: block; animation: picker-in 0.45s var(--ease-out); }
  @supports not selector(:has(a)) { .to__card.is-default { display: block; } }
  .reach__fields { display: grid; gap: 0 var(--space-m); }
  @media (min-width: 700px) { .reach__fields { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
  .reach__fields .field { margin-block-end: var(--space-xs); }
  .reach__fields .field :is(input, textarea) { padding: 0.65rem 0.8rem; }
  .reach .form-status { margin-block-start: var(--space-2xs); }
  .visit__cta { margin-block-start: var(--space-l); }
  @media (max-width: 899px) { .to__tiles { gap: 0.4rem; max-width: none; } .to__tile { font-size: 0.68rem; } }
  /* Phones: no card; the line under the tiles names the recipient and links to them. */
  .to__note { display: none; }
  @media (max-width: 899px) {
    .reach__who { display: none; }
    .to__note { display: block; margin-block-start: var(--space-xs); font-size: var(--step--1); line-height: 1.5; color: var(--c-muted); }
    .to__note span { display: none; }
    .to__note a { color: var(--slate); font-weight: 600; }
    .reach:has(#to-general:checked) [data-note="general"], .reach:has(#to-paige:checked) [data-note="paige"], .reach:has(#to-brennan:checked) [data-note="brennan"], .reach:has(#to-jenny:checked) [data-note="jenny"], .reach:has(#to-kyle:checked) [data-note="kyle"] { display: inline; }
    @supports not selector(:has(a)) { .to__note [data-note="general"] { display: inline; } }
  }
}

@layer motion {
  /* Hidden start states exist ONLY under .motion, which the head script adds
     (and removes again if motion never finishes starting). Never hide content
     anywhere else. Module start states are set in JS, not here. */
  .motion [data-reveal] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition:
      opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
  }
  .motion [data-reveal].is-revealed { opacity: 1; transform: none; }

  /* Media settles into focus: a soft blur and a slight zoom resolve to the photo. No wipes. */
  .motion [data-reveal="media"] { opacity: 1; transform: none; overflow: clip; }
  .motion [data-reveal="media"] :is(img, video) {
    opacity: 0; transform: scale(1.06); filter: blur(10px);
    transition:
      opacity 900ms var(--ease-ui) var(--reveal-delay, 0ms),
      transform 1600ms var(--ease-out) var(--reveal-delay, 0ms),
      filter 1200ms var(--ease-out) var(--reveal-delay, 0ms);
  }
  .motion [data-reveal="media"].is-revealed :is(img, video) { opacity: 1; transform: none; filter: none; }

  .motion [data-split]:not(.is-split) { visibility: hidden; }
  .motion [data-split] .split-line {
    transform: translateY(110%);
    transition: transform var(--dur-line) var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * 80ms);
  }
  .motion [data-split].is-revealed .split-line { transform: none; }

  /* Load-time intro of the home cover: only the decorative parts start hidden,
     and only until the module takes over (motion.md §1). The headline and copy
     always paint with the page. */
  .motion:not(.is-ready) [data-module="cover"] .cover__fig { opacity: 0; transform: translateY(55%); }
  .motion:not(.is-ready) [data-module="cover"] .cover__label > div { opacity: 0; }
}

/* Page-to-page transitions (browsers without support just navigate). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}