/* 12D Hospital demo — self-contained stylesheet, deliberately independent of
   /assets/site.css, /demo/yoga/style.css, /demo/wellness/style.css and
   /demo/spa/style.css. Loaded via the preload+swap pattern (see each page's
   <head>) — critical.css (inlined per page) covers the above-the-fold
   banner/emergency-strip/header/hero shape so first paint never waits on
   this file. */

/* ---------- self-hosted fonts (Latin subset, variable-font files — one
   download per family covers both weights used, via a font-weight range) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/demo/hospital/fonts/inter-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: 'Newsreader';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/demo/hospital/fonts/newsreader-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 Newsreader/Inter 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.
   Newsreader vs Georgia:    size-adjust 87.04%,  ascent-override 84.44%, descent-override 30.44%
   Newsreader vs Noto Serif: size-adjust 89.81%,  ascent-override 81.84%, descent-override 29.51%
   Inter vs Arial:           size-adjust 107.09%, ascent-override 90.46%, descent-override 22.52%
   Inter vs Roboto:          size-adjust 107.33%, ascent-override 90.27%, descent-override 22.47%
   The two blocks above are for h1 at 600 and body text at 400 — h1 actually
   renders at weight 500 (see the h1 rule below) and .eyebrow at 600, neither
   of which had its own calibration until now, so both reused these mismatched
   values and fell out of sync once the real webfont finished loading (the
   bug fixed here, same class as wellness's Work Sans eyebrow):
   Newsreader@500 vs Georgia:    size-adjust 96.85%, ascent-override 75.89%, descent-override 27.36%
   Newsreader@500 vs Noto Serif: size-adjust 88.39%, ascent-override 83.15%, descent-override 29.98%
   Inter@600 vs Arial:           size-adjust 100.92%, ascent-override 95.99%, descent-override 23.90%
   Inter@600 vs Roboto:          size-adjust 107.34%, ascent-override 90.26%, descent-override 22.47% */
@font-face {
  font-family: 'Newsreader Fallback Georgia';
  font-weight: 600;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 87.04%;
  ascent-override: 84.44%;
  descent-override: 30.44%;
}
@font-face {
  font-family: 'Newsreader Fallback NotoSerif';
  font-weight: 600;
  src: local('Noto Serif SemiBold'), local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 89.81%;
  ascent-override: 81.84%;
  descent-override: 29.51%;
}
@font-face {
  font-family: 'Newsreader Fallback Georgia';
  font-weight: 500;
  src: local('Georgia');
  size-adjust: 96.85%;
  ascent-override: 75.89%;
  descent-override: 27.36%;
}
@font-face {
  font-family: 'Newsreader Fallback NotoSerif';
  font-weight: 500;
  src: local('Noto Serif Medium'), local('Noto Serif'), local('Noto Serif Bold');
  size-adjust: 88.39%;
  ascent-override: 83.15%;
  descent-override: 29.98%;
}
@font-face {
  font-family: 'Inter Fallback Arial';
  src: local('Arial');
  size-adjust: 107.09%;
  ascent-override: 90.46%;
  descent-override: 22.52%;
}
@font-face {
  font-family: 'Inter Fallback Roboto';
  src: local('Roboto');
  size-adjust: 107.33%;
  ascent-override: 90.27%;
  descent-override: 22.47%;
}
@font-face {
  font-family: 'Inter Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 100.92%;
  ascent-override: 95.99%;
  descent-override: 23.90%;
}
@font-face {
  font-family: 'Inter Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 107.34%;
  ascent-override: 90.26%;
  descent-override: 22.47%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #1C2B36;
  --ink-soft: #55697A;
  --ice: #F6F9FB;
  --mist: #E8EEF2;
  --navy: #13304E;
  --navy-dark: #0C2238;
  --teal: #0E7C86;
  --teal-dark: #0A5E66;
  --line: #D7E1E6;
  --alert-red: #B3261E;
  --font-display: 'Newsreader', 'Newsreader Fallback Georgia', 'Newsreader Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Inter', 'Inter Fallback Arial', 'Inter 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(--ice);
  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(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.45em; color: var(--navy); }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 500; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.35rem); 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.12em; text-transform: uppercase; font-size: 0.74rem; color: var(--teal-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(--teal-dark); outline-offset: 2px; border-radius: 2px; }
.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--navy-dark); color: #fff;
  padding: 10px 18px; z-index: 200; font-weight: 500;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- demo banner ---------- */
.demo-banner {
  background: var(--navy-dark); 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; }
.demo-banner__cta {
  background: var(--teal); 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: var(--teal-dark); }


.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; }
}/* ---------- emergency strip (every page, deliberately separate from the
   demo banner above it and from every booking/WhatsApp control — never
   wired to data-book-now or a wa.me link) ---------- */
.emergency-strip {
  background: var(--alert-red); color: #fff;
  font-size: 0.86rem; padding: 9px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; justify-content: center;
  text-align: center; position: relative; z-index: 59;
}
.emergency-strip strong { font-weight: 600; }
.emergency-strip__call { color: #fff; font-weight: 700; text-decoration: underline; }
.emergency-strip__line { color: #fff; opacity: 0.92; }

/* ---------- header / nav ---------- */
.hospital-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 249, 251, 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;
}
.hospital-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(19, 48, 78, 0.1); }
.hospital-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.hospital-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.42rem; color: var(--navy);
  margin-right: auto; white-space: nowrap;
}
.hospital-brand span { color: var(--teal); }
.hospital-nav__links {
  list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; align-items: center;
}
.hospital-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.hospital-nav__links a:hover { color: var(--teal); text-decoration: none; }
.hospital-header__actions { display: flex; align-items: center; gap: 14px; }
.hospital-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(--navy);
}
@media (max-width: 899px) {
  .hospital-nav__toggle { display: flex; }
  .hospital-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--ice); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
  }
  .hospital-nav__links.is-open { display: flex; }
  .hospital-nav__links li { width: 100%; }
  .hospital-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (max-width: 479px) {
  /* "Book an appointment" shortens to "Book" below ~480px — at 360/390px
     the full text next to "12D Hospital" and the ☰ toggle overflows the
     header row; the shorter label still reaches the same action. */
  .hospital-cta-full { display: none; }
}
@media (min-width: 900px) {
  .hospital-nav__links { display: flex !important; position: static; }
}

/* ---------- 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(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dark); }
.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { background: var(--teal-dark); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal); }
.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: 4px; overflow: hidden; }
.hero__media img { width: 100%; height: auto; }
/* .hero__media is reused on other pages (e.g. the About story image) for a
   plain, differently-shaped <img> — this aspect-ratio is specific to the
   home hero's own art-directed <picture> variants, so it's scoped to only
   match an <img> inside a <picture>, never the bare-<img> reuse elsewhere
   (lesson carried over from the spa demo, applied from the start here). */
.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; }
}

/* ---------- 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(19, 48, 78, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.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--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy .eyebrow { color: #fff; }
.section--navy .lede { color: #C3D0D9; }

/* ---------- doctor directory ---------- */
.doctor-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 2em; }
.doctor-filter__btn {
  padding: 10px 18px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; color: var(--ink); border-radius: 20px;
}
.doctor-filter__btn:hover { border-color: var(--teal); }
.doctor-filter__btn[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: #fff; }
.doctor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 639px) { .doctor-grid { grid-template-columns: 1fr; } }
.doctor-card { background: #fff; border: 1px solid var(--line); padding: 20px 22px; }
.doctor-card__dept { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.5em; }
.doctor-card__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--navy); margin-bottom: 0.3em; }
.doctor-card__meta { font-size: 0.88rem; color: var(--ink-soft); margin: 0.2em 0; }
.doctor-card__reg { font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 0.8em; padding-top: 0.7em; }
.doctor-card[hidden] { display: none; }

/* ---------- 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); } }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { font-weight: 500; cursor: pointer; font-size: 1.02rem; color: var(--navy); }
.faq-item p { margin: 0.8em 0 0; color: var(--ink-soft); }
.disclaimer { font-size: 0.84rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 20px; margin-top: 12px; }
.health-note { font-size: 0.86rem; color: var(--ink-soft); background: var(--mist); border-left: 3px solid var(--teal); padding: 14px 18px; margin: 1.6em 0; }

/* ---------- contact form ---------- */
.contact-form { display: grid; gap: 16px; max-width: 520px; }
.contact-form label { display: block; font-weight: 500; 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: 4px;
  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 ---------- */
.hospital-footer { background: var(--navy-dark); color: #C3D0D9; padding: 56px 0 30px; }
.hospital-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.hospital-footer a { color: #C3D0D9; }
.hospital-footer__brand { font-family: var(--font-display); font-size: 1.25rem; color: #fff; margin-bottom: 0.4em; }
.hospital-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; }
.hospital-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hospital-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: #8DA0AD; }
@media (max-width: 760px) { .hospital-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(12, 34, 56, 0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--ice); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px clamp(20px, 4vw, 38px); position: relative;
  border-top: 3px solid var(--teal);
}
.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(--teal-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(--teal); }
.booking-option[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); font-weight: 500; }
.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(--teal); }
.booking-date[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); font-weight: 500; }
.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; }