/* 12D Physio demo — self-contained stylesheet, independent of /assets/site.css
   and every other /demo/*/style.css. critical.css (inlined per page) covers the
   above-the-fold banner/header/hero shape so first paint never waits on this.

   Every color pairing below was computed and verified against WCAG AA (4.5:1
   for text) before this file was written — the discipline established on real
   estate/accounting, both of which hit accessibility 100 on their first
   Lighthouse measurement this way. */

/* ---------- self-hosted fonts (Latin subset) ---------- */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/demo/physio/fonts/librefranklin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/demo/physio/fonts/publicsans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- fallback metric overrides, so Libre Franklin/Public Sans don't
   visibly reflow the page when they finish loading on an uncached visit.
   Both of this demo's own fonts are sans-serif (Libre Franklin doubles as
   the display face, not a serif) — so unlike every other demo, BOTH
   fallback pairs use Arial/Roboto, not Georgia/Noto Serif. Measured the same
   way as every recent demo: a fixed sample rendered in the real web font at
   the weight it's actually used at (700 for headings, 400 for body), and in
   each fallback at the same weight with no overrides, so normal OS weight
   matching resolves a true Bold face where one exists. h1/h2 render at 700
   (the largest above-fold text, so that's the weight measured); h3 renders
   at 600 — cross-checked by applying the 700-measured size-adjust to a
   600-weight render: residual error -1.047% for both fallbacks, well under
   3%, so one fallback @font-face per family covers both weights. Roboto
   (not installed on this dev machine, measured via its own TTF loaded as a
   temporary web font) backs up Arial on Android — the shipped CSS below
   still uses local() for both, since on the right OS those names resolve to
   its own installed copy.
   Libre Franklin vs Arial:  size-adjust 100.33%, ascent-override 96.28%, descent-override 24.52%
   Libre Franklin vs Roboto: size-adjust 106.32%, ascent-override 90.86%, descent-override 23.14%
   Public Sans vs Arial:     size-adjust 104.33%, ascent-override 91.06%, descent-override 21.57%
   Public Sans vs Roboto:    size-adjust 104.27%, ascent-override 91.11%, descent-override 21.58% */
@font-face {
  font-family: 'LibreFranklin Fallback Arial';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 100.33%;
  ascent-override: 96.28%;
  descent-override: 24.52%;
}
@font-face {
  font-family: 'LibreFranklin Fallback Roboto';
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto');
  size-adjust: 106.32%;
  ascent-override: 90.86%;
  descent-override: 23.14%;
}
/* .eyebrow/.btn actually render Libre Franklin at 600, not 700 — the
   residual-error check above was for h3 (which also renders at 600, but
   reusing the 700 face there measured -1.047% residual, safely under 3%);
   repeating that same check for .eyebrow's own text gave a bigger ~4%
   residual, so this gets its own calibration rather than relying on that
   tolerance, the same class of bug fixed for wellness's Work Sans eyebrow.
   Also: critical.css's own .eyebrow/.btn rules were pointing straight at
   the generic family instead of these fallback names at all — fixed
   alongside this, not just the missing weight.
   Libre Franklin@600 vs Arial:  size-adjust 96.09%,  ascent-override 100.53%, descent-override 25.60%
   Libre Franklin@600 vs Roboto: size-adjust 102.81%, ascent-override 93.96%,  descent-override 23.93% */
@font-face {
  font-family: 'LibreFranklin Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 96.09%;
  ascent-override: 100.53%;
  descent-override: 25.60%;
}
@font-face {
  font-family: 'LibreFranklin Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 102.81%;
  ascent-override: 93.96%;
  descent-override: 23.93%;
}
@font-face {
  font-family: 'PublicSans Fallback Arial';
  src: local('Arial');
  size-adjust: 104.33%;
  ascent-override: 91.06%;
  descent-override: 21.57%;
}
@font-face {
  font-family: 'PublicSans Fallback Roboto';
  src: local('Roboto');
  size-adjust: 104.27%;
  ascent-override: 91.11%;
  descent-override: 21.58%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #17212B;
  --ink-soft: #3D566B;
  --paper: #FAFAFA;
  --sand: #F0EDE6;
  --blue: #2B6CA3;
  --blue-dark: #1F5A91;
  --amber: #C46A1D;
  --amber-dark: #8A4810;
  --line: #E0DED7;
  --font-display: 'Libre Franklin', 'LibreFranklin Fallback Arial', 'LibreFranklin Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Public Sans', 'PublicSans Fallback Arial', 'PublicSans Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-breakpoint: 900px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 0.45em; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(52px, 8vw, 104px) 0; }
.eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: var(--amber-dark); margin: 0 0 0.9em; }
.section-head { max-width: 640px; margin: 0 0 3em; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lede { font-size: 1.1rem; color: var(--ink-soft); }

/* ---------- focus & skip link ---------- */
:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; border-radius: 2px; }
.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--ink); color: #fff;
  padding: 10px 18px; z-index: 200; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- demo banner ---------- */
.demo-banner {
  background: var(--ink); color: #fff;
  font-size: 0.86rem; padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center;
  text-align: center; position: relative; z-index: 60;
}
.demo-banner p { margin: 0; font-weight: 400; }
.demo-banner a { color: #fff; text-decoration: underline; font-weight: 500; }.demo-region-select{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:4px 8px;font-size:.86rem;font-family:inherit;min-height:24px;cursor:pointer}.demo-region-select:focus-visible{outline:2px solid #fff;outline-offset:2px}.demo-region-select option{color:var(--ink);background:var(--paper)}.footer-region-note{margin:0 0 8px;font-size:.86rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demo-banner__cta {
  background: var(--amber-dark); color: #fff;
  text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 999px;
  font-weight: 500; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
.demo-banner__cta:hover { background: #6E3A0C; }


.demo-banner__book { display: inline-flex; align-items: center; min-height: 24px; }
.demo-banner__link-short { display: none; }
@media (max-width: 1023px) {
  .demo-banner__link-full { display: none; }
  .demo-banner__link-short { display: inline; }
}/* ---------- health disclaimer strip (footer area, every page) ---------- */
.health-disclaimer {
  background: var(--sand); color: var(--ink-soft);
  font-size: 0.82rem; text-align: center; padding: 16px var(--gutter);
  border-top: 1px solid var(--line);
}
.health-disclaimer p { margin: 0; max-width: 760px; margin: 0 auto; }

/* ---------- header / nav ---------- */
.physio-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 250, 0.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
  padding: 20px 0;
}
.physio-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(23, 33, 43, 0.1); }
.physio-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.physio-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.38rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.physio-brand span { color: var(--blue-dark); }
.physio-nav__links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
.physio-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.physio-nav__links a:hover { color: var(--blue-dark); text-decoration: none; }
.physio-header__actions { display: flex; align-items: center; gap: 14px; }
.physio-nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 1.25rem; line-height: 1;
  background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--ink);
}
@media (max-width: 899px) {
  .physio-nav__toggle { display: flex; }
  .physio-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
  }
  .physio-nav__links.is-open { display: flex; }
  .physio-nav__links li { width: 100%; }
  .physio-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .physio-nav__links { display: flex !important; position: static; }
}
@media (max-width: 479px) {
  .physio-cta-full { display: none; }
  .physio-brand { font-size: 1.14rem; }
  .physio-header__wrap { gap: 12px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  line-height: inherit; padding: 14px 28px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #0E161D; }
.btn--amber { background: var(--amber-dark); color: #fff; }
.btn--amber:hover { background: #6E3A0C; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--blue-dark); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--ghost-light:hover { border-color: #fff; }
.btn--small { padding: 10px 20px; font-size: 0.84rem; line-height: normal; }
.btn--whatsapp { background: #2E7D4F; color: #fff; }
.btn--whatsapp:hover { background: #255F3D; }

/* ---------- hero (asymmetric, full-bleed media) ---------- */
.hero { padding: 0; position: relative; }
.hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__media { border-radius: 8px; overflow: hidden; }
.hero__media img { width: 100%; height: auto; }
/* scoped to <picture> only (the home hero's art-directed variants) so this
   never clashes with .hero__media reused for a differently-shaped image
   elsewhere — the spa-era lesson, applied from the start on every demo since. */
.hero__media picture img { aspect-ratio: 1088 / 1360; }
@media (min-width: 641px) { .hero__media picture img { aspect-ratio: 2400 / 1344; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8em; }
.hero__meta { margin-top: 1.6em; display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 899px) {
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
}

/* ---------- service/about/your-first-session top image — hero-grade, not lazy ---------- */
.page-hero { padding: 0; }
.page-hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.page-hero__media { border-radius: 8px; overflow: hidden; background: var(--sand); }
.page-hero__media img { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .page-hero__wrap { grid-template-columns: 1fr; } .page-hero__media { order: -1; } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 16px 36px rgba(23, 33, 43, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card__body h2, .card__body h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.3em; }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 0.6em; }

.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink .eyebrow { color: #fff; }
.section--ink .lede { color: #C7D1DA; }

/* ---------- physiotherapist profile ---------- */
.profile-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0.6em 0; }
.profile-card__qual { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--blue-dark); background: var(--sand); padding: 4px 12px; border-radius: 20px; }

/* ---------- checklist / steps ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0.1em; color: var(--amber-dark); font-weight: 700; }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 639px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- reviews ---------- */
.review-card { background: #fff; border: 1px solid var(--line); padding: 22px 24px; }
.review-card__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-dark); margin: 0 0 0.6em; }
.review-card__stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 0.4em; }

/* ---------- price ---------- */
.price-tag { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { font-weight: 600; cursor: pointer; font-size: 1.02rem; color: var(--ink); }
.faq-item p { margin: 0.8em 0 0; color: var(--ink-soft); }

/* ---------- contact form ---------- */
.contact-form { display: grid; gap: 16px; max-width: 520px; }
.contact-form label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--ink);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form__note { font-size: 0.84rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.physio-footer { background: var(--ink); color: #C7D1DA; padding: 56px 0 30px; }
.physio-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; }
.physio-footer a { color: #C7D1DA; }
.physio-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 0.4em; }
.physio-footer__heading { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9em; }
.physio-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.physio-footer__legal { max-width: var(--max); margin: 38px auto 0; padding: 20px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.76rem; color: #93A0AC; }
@media (max-width: 760px) { .physio-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(23, 33, 43, 0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--paper); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px clamp(20px, 4vw, 38px); position: relative;
  border-top: 3px solid var(--blue);
}
.booking-modal__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: 1px solid var(--line); background: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.booking-step__title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: 0.7em; }
.booking-options { display: grid; gap: 10px; margin-top: 18px; }
.booking-option {
  text-align: left; padding: 13px 16px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-family: var(--font-body); font-size: 0.94rem; color: var(--ink);
}
.booking-option:hover { border-color: var(--blue-dark); }
.booking-option[aria-pressed="true"] { border-color: var(--blue-dark); background: var(--sand); font-weight: 600; }
.booking-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 18px; }
.booking-date {
  padding: 11px 6px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; text-align: center; line-height: 1.3;
}
.booking-date:hover { border-color: var(--blue-dark); }
.booking-date[aria-pressed="true"] { border-color: var(--blue-dark); background: var(--sand); font-weight: 600; }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 18px; }
.booking-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 10px; }
.booking-final { text-align: center; }
.booking-final p { font-size: 1rem; }
.booking-final__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.booking-final__cal { margin-top: 12px; font-size: 0.88rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }