/*
    WILLOW OSTEOPATHY SKIN. Soft slate blue on warm linen with a muted clay accent, AA-checked
    against its text pairings. Sets every token base.css expects; the shared system provides the
    spacing, type scale and components. This keeps the osteo look and character bespoke while the
    structure is shared.
  */
  :root{
    --brand:#4a5e7e;        /* soft slate blue */
    --brand-deep:#2e3f58;   /* deep slate for headings, final band and footer */
    --brand-soft:#e9edf3;   /* light slate tint for the honest-note callout */
    --accent:#a05a3f;       /* muted clay, ~5.2:1 with white */
    --accent-deep:#834a34;  /* deeper clay for button hover */
    --accent-soft:#f0e4db;  /* tinted clay background for the answer bands */
    --paper:#fbf9f5;        /* warm linen white */
    --paper-2:#f3eee6;      /* warm linen, one shade deeper */
    --ink:#26303e;
    --muted:#5c6676;
    --line:#e4ddd1;
    --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
    --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --wt-head:600; --wt-h1:600;   /* Source Serif 4 tops out at 600 in this font request */
    --radius:16px; --radius-sm:10px;
  }

  /* --- Bespoke osteo components not in the shared system (kept minimal) --- */

  /* Editorial serif pull-quote that opens the "What is osteopathy?" section. */
  .quotable{font-family:var(--font-display);font-size:var(--step-2);line-height:1.45;letter-spacing:-.01em;color:var(--brand-deep);max-width:34ch;margin:var(--space-4) 0 var(--space-5)}

  /* Transparent price row: big serif figures, hairline-divided, no cards. */
  .prices{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--space-6);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .price{padding:var(--space-5)}
  .price + .price{border-left:1px solid var(--line)}
  .price h3{font-family:var(--font-text);font-size:var(--step--1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-3)}
  .price .fig{font-family:var(--font-display);font-size:var(--step-3);color:var(--brand);letter-spacing:-.02em;line-height:1.1}
  .price p{color:var(--muted);font-size:var(--step--1);margin-top:var(--space-2)}
  .pricing-note{margin-top:var(--space-5);font-size:var(--step--1);color:var(--muted)}

  /* The practitioner figure keeps portrait proportions; base's .mount is 5/4 for landscape photos. */
  .team .portrait img{aspect-ratio:4/5}

  @media(max-width:960px){
    .prices{grid-template-columns:1fr}
    .price + .price{border-left:0;border-top:1px solid var(--line)}
  }

  /* ============================================================
     SUBPAGE HELPERS. Added during the subpage conversion (not present in the
     homepage's inline skin). base.css owns the subpage components; these only
     fill gaps base.css scopes to other contexts.
     ============================================================ */

  /* Compact hero (.page-hero): base.css styles the h1 only, so the intro CTA row,
     the plain phone link and the seasonal note (styled by base.css only inside
     .hero / .final) need scoping here. */
  .page-hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-5)}
  .page-hero .tel-link{font-weight:600;color:var(--brand);text-decoration:none}
  .page-hero .tel-link:hover{color:var(--accent)}
  .page-hero .seasonal-line{margin-top:var(--space-4);font-size:var(--step--1);color:var(--muted)}

  /* Subpage content sections lead with a bare section h2; base.css resets its
     margins, so restore the gap the homepage gets from its eyebrow/lede. Scoped to
     a section's direct h2 only, so .article-body/.prose headings are unaffected. */
  section:not(.final) > .wrap > h2{margin-bottom:var(--space-3)}