/* 12D Clinic 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/physio, all three of which hit accessibility 100 on their
   first Lighthouse measurement this way. */

/* ---------- self-hosted fonts (Latin subset) ---------- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/demo/doctor/fonts/sourceserif4-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: 'Figtree';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/demo/doctor/fonts/figtree-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 Source Serif 4/Figtree don't
   visibly reflow the page when they finish loading on an uncached visit.
   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 (600 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.
   Georgia/Arial are the Windows/Mac fallbacks; Noto Serif/Roboto (not
   installed on this dev machine, measured via their own TTFs loaded as
   temporary web fonts) back them up on Android — the shipped CSS below still
   uses local() for all four, since on the right OS those names resolve to
   its own installed copy.
   Source Serif 4 vs Georgia:    size-adjust 93.83%,  ascent-override 110.41%, descent-override 35.70%
   Source Serif 4 vs Noto Serif: size-adjust 97.33%,  ascent-override 106.45%, descent-override 34.42%
   Figtree vs Arial:             size-adjust 100.48%, ascent-override 94.55%,  descent-override 24.88%
   Figtree vs Roboto:            size-adjust 100.89%, ascent-override 94.16%,  descent-override 24.78% */
@font-face {
  font-family: 'SourceSerif4 Fallback Georgia';
  font-weight: 600;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 93.83%;
  ascent-override: 110.41%;
  descent-override: 35.70%;
}
@font-face {
  font-family: 'SourceSerif4 Fallback NotoSerif';
  font-weight: 600;
  src: local('Noto Serif SemiBold'), local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 97.33%;
  ascent-override: 106.45%;
  descent-override: 34.42%;
}
@font-face {
  font-family: 'Figtree Fallback Arial';
  src: local('Arial');
  size-adjust: 100.48%;
  ascent-override: 94.55%;
  descent-override: 24.88%;
}
@font-face {
  font-family: 'Figtree Fallback Roboto';
  src: local('Roboto');
  size-adjust: 100.89%;
  ascent-override: 94.16%;
  descent-override: 24.78%;
}
/* The two blocks above cover body text at 400 — .eyebrow and .btn actually
   render Figtree at 600 and had no calibration of their own until now
   (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.
   Figtree@600 vs Arial:  size-adjust 94.50%,  ascent-override 100.53%, descent-override 26.46%
   Figtree@600 vs Roboto: size-adjust 101.14%, ascent-override 93.93%,  descent-override 24.71% */
@font-face {
  font-family: 'Figtree Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 94.50%;
  ascent-override: 100.53%;
  descent-override: 26.46%;
}
@font-face {
  font-family: 'Figtree Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 101.14%;
  ascent-override: 93.93%;
  descent-override: 24.71%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #231B36;
  --ink-soft: #4A4066;
  --paper: #FBFAF7;
  --sage-bg: #EDEFE7;
  --indigo: #5B4E9C;
  --indigo-dark: #4A3F80;
  --sage: #4F6B4F;
  --sage-dark: #44594A;
  --coral: #B03E2F;
  --line: #E2DFD6;
  --font-display: 'Source Serif 4', 'SourceSerif4 Fallback Georgia', 'SourceSerif4 Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Figtree', 'Figtree Fallback Arial', 'Figtree 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(--indigo-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 0.45em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 600; }
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-body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: var(--indigo-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(--indigo-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-banner__cta {
  background: var(--indigo-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: #3A3168; }


.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; }
}/* ---------- footer strip: health disclaimer + emergency line, every page ---------- */
.footer-notices {
  background: var(--sage-bg); color: var(--ink-soft);
  font-size: 0.82rem; text-align: center; padding: 16px var(--gutter);
  border-top: 1px solid var(--line);
}
.footer-notices p { margin: 0 auto 0.4em; max-width: 760px; }
.footer-notices p:last-child { margin-bottom: 0; }
.footer-notices__emergency { color: var(--coral); font-weight: 600; }
.footer-notices__emergency a { color: var(--coral); }

/* ---------- header / nav ---------- */
.doctor-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, 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;
}
.doctor-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(35, 27, 54, 0.1); }
.doctor-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.doctor-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.38rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.doctor-brand span { color: var(--indigo-dark); }
.doctor-nav__links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
.doctor-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.doctor-nav__links a:hover { color: var(--indigo-dark); text-decoration: none; }
.doctor-header__actions { display: flex; align-items: center; gap: 14px; }
.doctor-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) {
  .doctor-nav__toggle { display: flex; }
  .doctor-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;
  }
  .doctor-nav__links.is-open { display: flex; }
  .doctor-nav__links li { width: 100%; }
  .doctor-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .doctor-nav__links { display: flex !important; position: static; }
}
@media (max-width: 479px) {
  .doctor-cta-full { display: none; }
  .doctor-brand { font-size: 1.1rem; }
  .doctor-header__wrap { gap: 10px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); 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: #140F20; }
.btn--indigo { background: var(--indigo-dark); color: #fff; }
.btn--indigo:hover { background: #3A3168; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--indigo-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; }
.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/clinic-timings 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(--sage-bg); }
.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(35, 27, 54, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sage-bg); }
.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: 600; margin: 0 0 0.3em; }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 0.6em; }

.section--sage { background: var(--sage-bg); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink .eyebrow { color: #fff; }
.section--ink .lede { color: #CBC5DB; }

/* ---------- doctor 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(--indigo-dark); background: var(--sage-bg); 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(--sage-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); } }

/* ---------- emergency note (inline, e.g. teleconsultation page body) ---------- */
.emergency-note {
  background: #FBF1EE; border: 1px solid var(--coral); border-radius: 6px;
  padding: 14px 18px; color: var(--coral); font-weight: 600; font-size: 0.92rem;
}
.emergency-note a { color: var(--coral); text-decoration: underline; }

/* ---------- 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 ---------- */
.doctor-footer { background: var(--ink); color: #CBC5DB; padding: 56px 0 30px; }
.doctor-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; }
.doctor-footer a { color: #CBC5DB; }
.doctor-footer__brand { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: #fff; margin-bottom: 0.4em; }
.doctor-footer__heading { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9em; }
.doctor-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.doctor-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: #9B93AF; }
@media (max-width: 760px) { .doctor-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(35, 27, 54, 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(--indigo);
}
.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(--indigo-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(--indigo-dark); }
.booking-option[aria-pressed="true"] { border-color: var(--indigo-dark); background: var(--sage-bg); 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(--indigo-dark); }
.booking-date[aria-pressed="true"] { border-color: var(--indigo-dark); background: var(--sage-bg); 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; }