/* =============================================================================
   Beyond the Vet Clinic — styles.css
   Single hand-authored stylesheet. No framework, no build step.
   Palette + fonts matched to the 2026 brand flyer. @layer keeps the cascade
   predictable regardless of source order.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities, motion;

/* =============================================================================
   @font-face  — self-hosted (assets/fonts), font-display:swap.
   Metric-override fallbacks ('… Fallback') set Georgia/Arial to near-identical
   metrics so the swap to the real font is (near) zero layout shift.
   NOTE: the flyer's Canva fonts could not be read from the PDF (subset names);
   Cormorant + Inter match its serif-display + sans-body structure. Swap if the
   exact Canva fonts are confirmed.
   ========================================================================== */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/cormorant-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/cormorant-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-style:italic; font-weight:500; font-display:swap;
  src:url("../assets/fonts/cormorant-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-style:italic; font-weight:600; font-display:swap;
  src:url("../assets/fonts/cormorant-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family:"Inter Fallback"; src:local("Arial");
  ascent-override:90.20%; descent-override:22.48%; line-gap-override:0%; size-adjust:107.40%; }
@font-face { font-family:"Cormorant Fallback"; src:local("Georgia");
  ascent-override:110%; descent-override:32%; line-gap-override:0%; size-adjust:92%; }
@font-face { font-family:"Cormorant Fallback"; font-style:italic; src:local("Georgia");
  ascent-override:110%; descent-override:32%; line-gap-override:0%; size-adjust:92%; }

/* =============================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* ---- Brand palette — EXACT hex sampled from BEYONDTHEVETCLINICFLYER2026.pdf */
    --navy:#363F83;       --navy-rgb:54 63 131;     /* header, dark bands, headings */
    --sage:#A2BB9E;       --sage-rgb:162 187 158;   /* accent / fill-behind-dark / band */
    --plum:#442451;       --plum-rgb:68 36 81;      /* eyebrows, subheads, CTA fill */
    --paper:#FFFFFF;      --paper-rgb:255 255 255;  /* page background (flyer is white) */
    --charcoal:#343739;   --charcoal-rgb:52 55 57;  /* body text */

    /* ---- Verified contrast ratios (computed from the exact hex) ----
       TEXT:  charcoal/white 11.99 · navy/white 9.56 · plum/white 12.99 (all AAA)
              white/navy 9.56 · white/plum 12.99 · navy/sage 4.62 · plum/sage 6.27 · charcoal/sage 5.79 (AA+)
       NON-TEXT (>=3 SC 1.4.11):  navy@65% on white 3.71  (rules, dividers, connectors, edges)
       BANNED for text (decoration / fill-behind-dark only):
              sage/white 2.07 · white/sage 2.07
       Rule: SAGE NEVER CARRIES MEANING — only a fill behind navy/plum text, or a
       non-load-bearing ornament. Boundaries/states use navy@65% or solid navy.
       Primary CTA = plum fill + white label (12.99 on white, 6.27 on the sage band). */

    /* ---- Semantic roles ---- */
    --ink:var(--charcoal);                          /* default body text on white */
    --ink-on-dark:var(--paper);                     /* text on navy bands         */
    --accent:var(--plum);                           /* eyebrows / subheads        */
    --rule:rgb(var(--navy-rgb) / .65);              /* perceptible boundary 3.71  */
    --rule-soft:rgb(var(--navy-rgb) / .14);         /* decorative card edge only  */
    --ornament:var(--sage);                         /* non-meaning flourish       */
    --watermark-on-navy:rgb(var(--paper-rgb) / .10);
    --watermark-on-sage:rgb(var(--navy-rgb) / .12);

    /* ---- Type ---- */
    --font-display:"Cormorant","Cormorant Fallback",Georgia,"Times New Roman",serif;
    --font-body:"Inter","Inter Fallback",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    --h1:clamp(2.2rem, 1.45rem + 3.3vw, 4rem);
    --h2:clamp(1.75rem, 1.35rem + 1.75vw, 2.6rem);
    --h3:clamp(1.25rem, 1.08rem + 0.75vw, 1.5rem);
    --numeral:clamp(2.5rem, 1.85rem + 2.85vw, 3.5rem);
    --body:clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
    --eyebrow:0.95rem;
    --caption:0.85rem;

    /* ---- Spacing ---- */
    --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
    --sp-6:2rem;  --sp-7:3rem;  --sp-8:4rem;  --sp-9:6rem;
    --section-y:clamp(3.25rem, 1.5rem + 6vw, 6rem);

    /* ---- Layout ---- */
    --container:72rem;
    --container-narrow:48rem;
    --gutter:clamp(1.25rem, 5vw, 3rem);
    --measure:62ch;
    --header-h:4.5rem;

    /* ---- Shape & depth ---- */
    --radius:10px;
    --radius-lg:18px;
    --shadow-lift:0 1px 0 rgb(var(--navy-rgb) / .06), 0 12px 30px -16px rgb(var(--navy-rgb) / .40);
    --shadow-photo:0 18px 50px -24px rgb(var(--navy-rgb) / .45);

    /* ---- Focus ring (one ring, every surface) ---- */
    --focus-outline:3px solid var(--navy);
    --focus-halo:0 0 0 5px var(--paper);
  }
}

/* =============================================================================
   RESET
   ========================================================================== */
@layer reset {
  *,*::before,*::after { box-sizing:border-box; }
  * { margin:0; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { min-height:100svh; line-height:1.6; -webkit-font-smoothing:antialiased; }
  img,svg,video { display:block; max-width:100%; }
  img { height:auto; }
  button,input,select,textarea { font:inherit; color:inherit; }
  a { color:inherit; }
  ul[role="list"] { list-style:none; padding:0; }
  :where(h1,h2,h3) { text-wrap:balance; }
  p { text-wrap:pretty; }
}

/* =============================================================================
   BASE
   ========================================================================== */
@layer base {
  body {
    font-family:var(--font-body);
    font-size:var(--body);
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
  }
  h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.08; color:var(--navy); }
  h1 { font-size:var(--h1); }
  h2 { font-size:var(--h2); line-height:1.12; }
  h3 { font-size:var(--h3); font-weight:600; }
  em,i,.italic { font-style:italic; }
  a { text-decoration-thickness:1px; text-underline-offset:.18em; }

  :target,[id] { scroll-margin-top:calc(var(--header-h) + 1.25rem); }

  :where(a,button,summary,input,[tabindex]):focus-visible {
    outline:var(--focus-outline); outline-offset:2px; box-shadow:var(--focus-halo);
    border-radius:4px;
  }
  :where(a,button,summary):focus:not(:focus-visible){ outline:none; }
}

/* =============================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
  .container--narrow { max-width:var(--container-narrow); }

  .section { padding-block:var(--section-y); position:relative; }
  .section--dark { background:var(--navy); color:var(--ink-on-dark); }
  .section--sage { background:var(--sage); color:var(--navy); }
  .section--dark h1,.section--dark h2,.section--dark h3 { color:var(--ink-on-dark); }

  .stack > * + * { margin-block-start:var(--flow,1rem); }
  .measure { max-width:var(--measure); }

  .skip-link {
    position:absolute; left:var(--sp-4); top:.5rem; transform:translateY(-160%);
    background:var(--navy); color:var(--paper); padding:.6rem 1rem; border-radius:8px;
    z-index:100; transition:transform .15s ease;
  }
  .skip-link:focus { transform:translateY(0); }
}

/* =============================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---- Eyebrow ---- */
  .eyebrow {
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:var(--eyebrow); letter-spacing:.04em; color:var(--accent);
    margin-bottom:var(--sp-3);
  }
  .section--dark .eyebrow,.section--sage .eyebrow { color:inherit; }
  /* laurel ornament inherits the kicker's colour (plum / paper / navy) so it
     always reads with the text instead of sitting at a faint sage */
  .eyebrow__glyph { flex:0 0 auto; width:1.35rem; height:1.35rem; color:inherit; }

  /* ---- Brand lockup (logo mark + wordmark) ---- */
  .brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; line-height:1; }
  .brand__logo { width:2.5rem; height:auto; flex:0 0 auto; }
  .wordmark { font-family:var(--font-display); font-weight:600; font-size:1.4rem;
    color:var(--navy); line-height:1; letter-spacing:.01em; white-space:nowrap; }
  .wordmark em { font-style:italic; font-weight:500; }

  /* ---- Buttons (primary = plum fill + white label, like the flyer's CTA box) ---- */
  .btn {
    --btn-bg:var(--plum); --btn-fg:var(--paper); --btn-bd:var(--plum);
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    min-height:48px; padding:.7rem 1.5rem;
    font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1;
    text-decoration:none; cursor:pointer; white-space:nowrap;
    background:var(--btn-bg); color:var(--btn-fg);
    border:1.5px solid var(--btn-bd); border-radius:var(--radius);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .btn--on-band { --btn-bg:var(--navy); --btn-fg:var(--paper); --btn-bd:var(--navy); }
  .btn--ghost   { --btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:var(--rule); }
  @media (hover:hover) { .btn:hover { filter:brightness(1.08); } }
  @media (hover:hover) and (prefers-reduced-motion:no-preference) {
    .btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-lift); }
  }
  .btn:active { transform:none; }
  .btn-help { display:block; margin-top:.55rem; font-size:var(--caption); color:rgb(var(--charcoal-rgb) / .85); }
  .section--sage .btn-help { color:rgb(var(--navy-rgb) / .9); }

  /* ---- Sticky header / nav ---- */
  .site-header {
    position:sticky; top:0; z-index:50;
    background:rgb(var(--paper-rgb) / .9);
    backdrop-filter:saturate(120%) blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color .16s ease, background-color .16s ease;
  }
  @supports not (backdrop-filter:blur(1px)) { .site-header { background:var(--paper); } }
  .site-header.is-scrolled { border-bottom-color:var(--rule); }

  .nav { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
    min-height:var(--header-h); }
  .nav__links { display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.75rem); }
  .nav__list { display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.75rem);
    list-style:none; margin:0; padding:0; }
  .nav__link {
    font-weight:500; font-size:.975rem; text-decoration:none; color:var(--navy);
    padding:.4rem 0; position:relative; white-space:nowrap;
  }
  .nav__link::after {
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:var(--navy); transition:right .18s ease;
  }
  @media (hover:hover){ .nav__link:hover::after { right:0; } }
  .nav__link[aria-current="page"]::after { right:0; }
  .nav__toggle { display:none; }

  /* ---- Card (condition) ---- */
  .card {
    background:var(--paper); border:1px solid var(--rule-soft);
    border-radius:var(--radius-lg); padding:var(--sp-5);
    display:flex; flex-direction:column; gap:.5rem;
  }
  .card__mark { width:2.75rem; height:2.75rem; color:var(--navy); margin-bottom:.35rem; }
  .card__title { font-family:var(--font-display); font-weight:600; color:var(--accent);
    font-size:1.4rem; line-height:1.1; }
  .card__body { color:var(--ink); font-size:.975rem; }
  @media (hover:hover) and (prefers-reduced-motion:no-preference) {
    .card { transition:border-color .18s ease, transform .18s ease; }
    .card:hover { border-color:rgb(var(--navy-rgb) / .3); transform:translateY(-2px); }
  }

  /* ---- Circular photo framed by an open laurel ring (echoes the wreath logo) ---- */
  .media-ring { position:relative; width:min(100%, 30rem); margin-inline:auto; aspect-ratio:1; }
  .media-ring__img { position:absolute; inset:6%; width:88%; height:88%; object-fit:cover;
    border-radius:50%; box-shadow:var(--shadow-photo); }
  .media-ring__halo { position:absolute; inset:0; width:100%; height:100%;
    color:var(--sage); pointer-events:none; }   /* ring sits just outside the photo, within the box */
  .media-cap { margin-top:.75rem; text-align:center; font-size:var(--caption); color:rgb(var(--charcoal-rgb) / .7); }

  /* ---- FAQ accordion ---- */
  .faq-item { border-bottom:1px solid var(--rule); }
  .faq-item summary {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    list-style:none; cursor:pointer; padding:1.05rem 0; min-height:44px;
    font-weight:500; color:var(--navy); font-size:1.0625rem;
  }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item .faq-icon { flex:0 0 auto; width:1.4rem; height:1.4rem; color:var(--accent);
    transition:transform .2s ease; }
  .faq-item[open] .faq-icon { transform:rotate(45deg); }
  .faq-item__answer { padding:0 0 1.15rem; color:var(--ink); max-width:var(--measure); }
  .faq-item__answer > * + * { margin-top:1.05rem; }

  /* ---- Footer ---- */
  .site-footer { background:var(--navy); color:var(--paper); padding-block:var(--sp-8) var(--sp-6); }
  .site-footer a { color:rgb(var(--paper-rgb) / .92); text-decoration:none; }
  .site-footer a:hover { text-decoration:underline; }
  .site-footer .wordmark { color:var(--paper); }
  .site-footer .wordmark em { color:var(--sage); }   /* sage 'the Vet' on navy = 4.6:1 */
  .footer-grid { display:grid; gap:var(--sp-6);
    grid-template-columns:repeat(auto-fit, minmax(12rem,1fr)); }
  .footer-col h2 { font-family:var(--font-body); font-size:.8rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--paper-rgb) / .72);
    margin-bottom:var(--sp-3); }
  .footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
  .footer-brand .brand { margin-bottom:var(--sp-3); }
  .footer-meta { margin-top:var(--sp-7); padding-top:var(--sp-5);
    border-top:1px solid rgb(var(--paper-rgb) / .18);
    display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center;
    justify-content:space-between; font-size:var(--caption); color:rgb(var(--paper-rgb) / .72); }
  .footer-disclaimer { color:rgb(var(--paper-rgb) / .78); font-size:var(--caption);
    max-width:var(--measure); margin-top:var(--sp-3); }
  .footer-social { display:flex; gap:1.1rem; margin-top:.65rem; }

  .glyph,.svg-art { color:currentColor; }
  [aria-hidden="true"] { pointer-events:none; }
}

/* =============================================================================
   SECTIONS
   ========================================================================== */
@layer sections {

  /* ---- HERO ---- */
  .hero { padding-block:clamp(2.5rem,7vh,5rem) var(--section-y); }
  .hero__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,3.5rem); align-items:center; }
  .hero__title { margin-block:.4rem .9rem; max-width:15ch; }
  .hero__title em { font-style:italic; white-space:nowrap; }
  .hero__voice { font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:clamp(1.2rem,1rem + 1vw,1.6rem); color:var(--navy); line-height:1.3; max-width:34ch; }
  .hero__sub { color:var(--ink); max-width:54ch; margin-top:.6rem; }
  .hero__cta { margin-top:var(--sp-5); }
  @media (min-width:48em) { .hero__grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); } }

  /* ---- Trust strip ---- */
  .trust { padding-block:var(--sp-6); text-align:center; }
  .trust__line { display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap;
    justify-content:center; max-width:62ch; margin-inline:auto; color:var(--ink); }
  .trust__pn { color:rgb(var(--charcoal-rgb) / .85); font-size:.95em; }

  .section-head { max-width:54ch; margin-bottom:var(--sp-6); }
  .section-head .lead { margin-top:.75rem; color:var(--ink); }
  .section--dark .lead { color:rgb(var(--paper-rgb) / .92); }

  /* ---- Conditions grid ---- */
  .conditions__grid { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
  @media (min-width:34em){ .conditions__grid { grid-template-columns:1fr 1fr; } }
  @media (min-width:60em){ .conditions__grid { gap:var(--sp-5); } }

  /* ---- Philosophy (dark, asymmetric, bled ring) ---- */
  .philosophy { overflow:clip; }
  .philosophy__inner { max-width:46ch; }
  .philosophy__ring { position:absolute; right:-14%; top:50%; translate:0 -50%;
    width:min(46vw,30rem); height:auto; color:var(--watermark-on-navy); pointer-events:none; }
  .philosophy .referral { font-weight:500; }

  /* ---- How it works ---- */
  /* list-style/margin/padding reset: harmless no-op where this is a <div> (index.html),
     essential where it's a native <ol> (contact.html) — without it the browser's own
     list numbering doubles up with the hand-typed "1. Get in touch" heading text. */
  .how__steps { display:grid; gap:var(--sp-6); grid-template-columns:1fr; position:relative;
    list-style:none; margin:0; padding:0; }
  @media (min-width:48em){ .how__steps { grid-template-columns:repeat(3,1fr); gap:var(--sp-5); } }
  .step__num { font-family:var(--font-display); font-weight:600; font-size:var(--numeral);
    color:var(--sage); line-height:1; }
  .step__title { font-family:var(--font-display); font-weight:600; color:var(--accent);
    font-size:1.35rem; margin:.35rem 0 .3rem; }
  .step__body { color:var(--ink); max-width:34ch; }
  .how__connector { display:none; }
  @media (min-width:48em){
    .how__connector { display:block; position:absolute; inset-inline:8%; top:1.4rem;
      height:3.5rem; width:84%; color:var(--rule); pointer-events:none; }
  }

  /* ---- Treatments diptych (white ground, plum subheads — matches flyer) ---- */
  .diptych { display:grid; gap:var(--sp-6); grid-template-columns:1fr; }
  @media (min-width:48em){
    .diptych { grid-template-columns:1fr 1fr; gap:var(--sp-7); }
    .diptych__half + .diptych__half { border-left:1px solid var(--rule-soft); padding-left:var(--sp-7); }
  }
  .diptych__photo { width:100%; aspect-ratio:16/10; object-fit:cover;
    border-radius:var(--radius-lg); margin-bottom:var(--sp-4); box-shadow:var(--shadow-photo); }
  .diptych__glyph { width:2.5rem; height:2.5rem; color:var(--plum); margin-bottom:var(--sp-3); }
  .diptych__title { font-family:var(--font-display); font-weight:600; color:var(--plum);
    font-size:1.6rem; margin-bottom:.5rem; }
  .diptych__body { color:var(--ink); max-width:46ch; }
  .diptych__body + .diptych__body { margin-top:.85rem; }

  /* ---- About ---- */
  .about__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2rem,5vw,3.5rem); align-items:center; }
  @media (min-width:48em){ .about__grid { grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); } }
  .about__pn { color:rgb(var(--charcoal-rgb) / .85); font-size:.95rem; margin-top:.6rem; }

  /* ---- Closing CTA band (sage) ---- */
  .cta-band { text-align:center; position:relative; overflow:clip; }
  .cta-band__inner { max-width:46ch; margin-inline:auto; position:relative; z-index:1; }
  .cta-band h2 { color:var(--navy); }
  .cta-band p { color:var(--navy); margin:.75rem auto var(--sp-5); max-width:42ch; }
  .cta-band__ring { position:absolute; left:50%; top:50%; translate:-50% -50%;
    width:min(70vw,40rem); color:var(--watermark-on-sage); pointer-events:none; }
  .cta-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; justify-content:center; }
  @media (max-width:34em){
    .cta-actions { flex-direction:column; align-items:stretch; }
    .cta-actions .btn { width:100%; white-space:normal; }
  }

  /* ---- TODO ribbon (build-time only; remove before launch) ---- */
  .todo { display:inline-block; font-family:var(--font-body); font-size:.7rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color:#7a3b00; background:#ffe9c7;
    border:1px solid #e9b261; border-radius:5px; padding:.12rem .45rem; vertical-align:middle; }
}

/* =============================================================================
   UTILITIES
   ========================================================================== */
@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;
  }
  .flow-lg { --flow:1.4rem; }
  .text-center { text-align:center; }
  [hidden] { display:none !important; }
}

/* =============================================================================
   MOTION
   ========================================================================== */
@layer motion {
  html.js .reveal { opacity:0; transform:translateY(10px); }
  html.js .reveal.is-in { opacity:1; transform:none;
    transition:opacity .45s ease, transform .45s ease; }
  @media (prefers-reduced-motion:reduce) {
    html.js .reveal { opacity:1 !important; transform:none !important; }
    .btn,.nav__link::after,.faq-icon,.card { transition:none !important; }
    * { scroll-behavior:auto !important; }
  }
  @media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
}

/* =============================================================================
   MOBILE NAV  (outside @layer so it reliably wins)
   ========================================================================== */
@media (max-width:47.99em) {
  html.js .nav__list,
  html.js .nav__links > .btn { display:none; }
  html.js .nav__toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; background:transparent; border:1.5px solid var(--rule);
    border-radius:10px; color:var(--navy); cursor:pointer;
  }
  .nav__links { flex-wrap:wrap; gap:.4rem 1rem; justify-content:flex-end; }
  .nav__toggle svg { width:22px; height:22px; }

  .mobile-menu {
    position:fixed; top:var(--header-h); right:0; bottom:0; left:0; z-index:45;
    background:var(--paper); padding:var(--sp-5) var(--gutter) var(--sp-7);
    display:flex; flex-direction:column; gap:.25rem;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s; overflow-y:auto;
  }
  .mobile-menu.is-open { transform:none; opacity:1; visibility:visible; }
  .mobile-menu a:not(.btn) {
    display:flex; align-items:center; min-height:48px; padding:.5rem 0;
    font-size:1.15rem; font-weight:500; color:var(--navy); text-decoration:none;
    border-bottom:1px solid var(--rule-soft);
  }
  .mobile-menu .btn { width:100%; margin-top:var(--sp-5); }
  @media (prefers-reduced-motion:reduce){ .mobile-menu { transition:none; } }
}
/* Keep the header lockup from overflowing on the smallest phones */
@media (max-width:30em){
  .site-header .brand__logo { width:2rem; }
  .site-header .wordmark { font-size:1.15rem; }
  .nav { gap:var(--sp-3); }
  /* let long-label buttons (e.g. the email address) wrap instead of clipping:
     full-width block so the fixed width forces the long token to break */
  .btn { display:block; width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; line-height:1.3; }
  .btn + .btn { margin-top:.5rem; }
}
@media (min-width:48em){ .mobile-menu { display:none; } }

/* =============================================================================
   SUB-PAGE PATTERNS (page hero, long-form prose, fees, feature rows, callouts)
   ========================================================================== */
@layer sections {
  /* Compact header for interior pages */
  .page-hero { padding-block: clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,3vw,2rem); }
  .page-hero h1 { font-size: clamp(2rem,1.4rem + 2.6vw,3.2rem); max-width: 20ch; }
  .lede { margin-top: var(--sp-4); max-width: 60ch; color: var(--ink); font-size: 1.0625rem; }

  /* thank-you.html: success vs error states, keyed by a class set on <html>
     BEFORE this content paints (inline script in <head>) so there is no flash
     of the wrong state. Defaults below are the success path.
     !important is deliberate here: .ty-try-again also carries the .btn class,
     and an UNLAYERED mobile rule (".btn { display:block }" in the ≤30em media
     query below) would otherwise always beat this LAYERED rule at narrow
     widths regardless of specificity — layers always lose to unlayered CSS. */
  .ty-error, .ty-error-1-text, .ty-error-2-text, .ty-try-again { display: none !important; }
  .ty-reassure { margin-top: var(--sp-4); font-size: .95rem; color: rgb(var(--charcoal-rgb)/.85); }
  html.ty-has-error .ty-success { display: none !important; }
  html.ty-has-error .ty-error { display: block !important; }
  html.ty-has-error .ty-try-again { display: inline-flex !important; }
  html.ty-error-1 .ty-error-1-text { display: block !important; }
  html.ty-error-2 .ty-error-2-text { display: block !important; }

  /* Long-form prose (evidence, for-vets, privacy, terms) */
  .prose { max-width: 72ch; }
  .prose > * + * { margin-top: 1.05rem; }
  .prose h2 { font-size: clamp(1.4rem,1.1rem + 1.2vw,1.95rem); margin-top: 2.4rem; color: var(--navy); }
  .prose h3 { font-size: 1.2rem; margin-top: 1.7rem; color: var(--plum); font-family: var(--font-display); font-weight: 600; }
  /* prose headings must stay legible on dark/sage bands (override the plum/navy) */
  .section--dark .prose h2, .section--dark .prose h3 { color: var(--ink-on-dark); }
  .section--sage .prose h2 { color: var(--navy); }
  .prose ul { padding-left: 1.3rem; display: grid; gap: .4rem; }
  .prose li { padding-left: .15rem; }
  .prose li::marker { color: var(--plum); }
  .prose a { color: var(--navy); text-decoration: underline; text-decoration-color: rgb(var(--navy-rgb)/.4); }
  .prose strong { color: var(--navy); }
  .prose .ref { font-size: .95rem; color: rgb(var(--charcoal-rgb)/.92); }
  .prose .ref + .ref { margin-top: 1rem; }

  /* Fees */
  .price-list { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
  @media (min-width:40em){ .price-list { grid-template-columns: 1fr 1fr; } }
  .price-item { border: 1px solid var(--rule-soft); border-radius: var(--radius-lg);
    padding: var(--sp-5); display: flex; flex-direction: column; gap: .45rem; background: var(--paper); }
  .price-item__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .price-item__name { font-family: var(--font-display); font-weight: 600; color: var(--plum); font-size: 1.3rem; }
  .price-item__cost { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 1.55rem; white-space: nowrap; }
  .price-item__body { color: var(--ink); font-size: .97rem; }
  .price-item--feature { border-color: rgb(var(--navy-rgb)/.4); box-shadow: var(--shadow-lift); }
  .price-note { font-size: .9rem; color: var(--charcoal); }

  /* Feature rows (treatments) */
  .feature-row { display: grid; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
  @media (min-width:48em){
    .feature-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .feature-row--rev .feature-row__media { order: 2; }
  }
  .feature-row + .feature-row { margin-top: var(--sp-8); }
  .feature-row__media .media-ring { width: min(100%,26rem); }

  /* Two smaller circular photos paired within a feature-row media slot (About: Zuni young/senior) */
  .media-duo { display: flex; gap: clamp(1rem,3vw,1.75rem); justify-content: center; }
  .media-duo .media-ring { width: min(44%,13rem); }

  /* Small circular photo strip with a shared caption (About: career journey aside) */
  .mini-gallery { display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(1rem,3vw,1.5rem); margin-top: var(--sp-6); }
  .mini-gallery .media-ring { width: 7rem; }
  .mini-gallery__caption { margin-top: var(--sp-4); text-align: center; max-width: 46ch;
    margin-inline: auto; font-size: var(--caption); color: rgb(var(--charcoal-rgb)/.75); }

  /* Callout / note */
  .callout { border-left: 3px solid var(--sage); background: rgb(var(--sage-rgb)/.16);
    padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0; }
  .callout--warn { border-left-color: var(--plum); background: rgb(var(--plum-rgb)/.06); }
  .callout strong { color: var(--navy); }

  /* Tile grid — a scannable alternative to a long bulleted list. Sage-tinted
     chips (decoration only, navy text stays fully opaque so contrast holds);
     responsive grid gives a horizontal AND vertical rhythm instead of one
     long vertical list. */
  .tile-heading { font-family: var(--font-display); font-weight: 600; color: var(--plum);
    font-size: 1.2rem; margin-bottom: var(--sp-3); }
  .tile-heading:not(:first-child) { margin-top: var(--sp-7); }
  .tile-grid { display: grid; gap: .65rem; grid-template-columns: 1fr; list-style: none;
    padding: 0; margin: 0; }
  @media (min-width: 30em){ .tile-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 60em){ .tile-grid { grid-template-columns: repeat(3, 1fr); } }
  .tile { display: flex; align-items: flex-start; gap: .55rem;
    background: rgb(var(--sage-rgb)/.14); border: 1px solid rgb(var(--sage-rgb)/.4);
    border-radius: 10px; padding: .7rem .85rem; font-size: .92rem; line-height: 1.35;
    color: var(--ink); }
  .tile svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--plum);
    margin-top: .12rem; }

  /* ---- Forms (contact + referral) ---- */
  .form { max-width: 48rem; }
  .form fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
  .form legend { font-family: var(--font-display); font-weight: 600; color: var(--plum);
    font-size: 1.35rem; padding: 0; margin-bottom: var(--sp-3); width: 100%;
    border-bottom: 1px solid var(--rule-soft); padding-bottom: .4rem; }
  .form__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
  @media (min-width: 34em){ .form__grid { grid-template-columns: 1fr 1fr; } }
  .field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
  .field--full { grid-column: 1 / -1; }
  .field > label { font-weight: 500; font-size: .95rem; color: var(--navy); }
  .field .req { color: var(--plum); }
  .field input, .field select, .field textarea {
    font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
    border: 1.5px solid var(--rule); border-radius: 8px; padding: .6rem .7rem; width: 100%; }
  .field textarea { min-height: 7rem; resize: vertical; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline: var(--focus-outline); outline-offset: 2px; box-shadow: var(--focus-halo); border-color: var(--navy); }
  .check { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--ink); margin-bottom: .75rem; }
  .check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--plum); }
  .form__actions { margin-top: var(--sp-4); }
  .form__note { font-size: .9rem; color: rgb(var(--charcoal-rgb)/.85); margin-top: .6rem; }
  .form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-callout { margin-bottom: var(--sp-6); }
  .print-btn { background: none; border: 1.5px solid var(--rule); color: var(--navy);
    border-radius: var(--radius); padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; }
  @media (hover: hover){ .print-btn:hover { background: rgb(var(--navy-rgb)/.06); } }
}

/* =============================================================================
   PRINT / PDF EXPORT
   Renders the site faithfully to PDF: keep brand background colours, reveal any
   scroll-animated sections, drop sticky/overlay chrome, size pages to the site
   width so nothing is clipped, and avoid breaking cards across pages.
   ========================================================================== */
@media print {
  @page { size: 1180px 1670px; margin: 0; }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body { width: 1180px; background: #fff; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  .site-header { position: static !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .skip-link, .nav__toggle, .mobile-menu { display: none !important; }
  a { text-decoration: none; }
  .card, .step, .diptych__half, .faq-item, .media-ring,
  .hero__grid, .about__grid, .footer-grid { break-inside: avoid; }
  .section { padding-block: clamp(2rem, 4vw, 3.5rem); }
}