/* 12D Dental demo — self-contained stylesheet, deliberately independent of
   /assets/site.css and every other /demo/*/style.css. Loaded via the
   preload+swap pattern (see each page's <head>) — critical.css (inlined per
   page) covers the above-the-fold banner/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: 'Petrona';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/demo/dentist/fonts/petrona-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/demo/dentist/fonts/jakarta-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 Petrona/Plus Jakarta Sans 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.
   Petrona vs Georgia:     size-adjust 86.25%,  ascent-override 99.48%, descent-override 31.30%
   Petrona vs Noto Serif:  size-adjust 89.77%,  ascent-override 95.57%, descent-override 30.08%
   Jakarta vs Arial:       size-adjust 104.98%, ascent-override 98.88%, descent-override 21.15%
   Jakarta vs Roboto:      size-adjust 103.99%, ascent-override 99.82%, descent-override 21.35%
   The two blocks above are for h1 at 600 and body text at 400 — h1 actually
   renders at weight 500 and .eyebrow at 600, neither of which had its own
   calibration until now (same class of bug fixed for wellness's eyebrow):
   Petrona@500 vs Georgia:    size-adjust 98.54%,  ascent-override 87.07%, descent-override 27.40%
   Petrona@500 vs Noto Serif: size-adjust 88.69%,  ascent-override 96.74%, descent-override 30.45%
   Jakarta@600 vs Arial:      size-adjust 101.83%, ascent-override 101.94%, descent-override 21.80%
   Jakarta@600 vs Roboto:     size-adjust 108.76%, ascent-override 95.44%, descent-override 20.41%
   (re-measured 2026-10-14 against the header CTA's own text, "Book an appointment",
   rather than a generic sample — the header button's own critical.css rule
   (.btn--small) was the actual 9px shift's cause, not this calibration, but the
   button's text is the more representative sample for this weight regardless.) */
@font-face {
  font-family: 'Petrona Fallback Georgia';
  font-weight: 600;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 86.25%;
  ascent-override: 99.48%;
  descent-override: 31.30%;
}
@font-face {
  font-family: 'Petrona Fallback NotoSerif';
  font-weight: 600;
  src: local('Noto Serif SemiBold'), local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 89.77%;
  ascent-override: 95.57%;
  descent-override: 30.08%;
}
@font-face {
  font-family: 'Petrona Fallback Georgia';
  font-weight: 500;
  src: local('Georgia');
  size-adjust: 98.54%;
  ascent-override: 87.07%;
  descent-override: 27.40%;
}
@font-face {
  font-family: 'Petrona Fallback NotoSerif';
  font-weight: 500;
  src: local('Noto Serif Medium'), local('Noto Serif'), local('Noto Serif Bold');
  size-adjust: 88.69%;
  ascent-override: 96.74%;
  descent-override: 30.45%;
}
@font-face {
  font-family: 'Jakarta Fallback Arial';
  src: local('Arial');
  size-adjust: 104.98%;
  ascent-override: 98.88%;
  descent-override: 21.15%;
}
@font-face {
  font-family: 'Jakarta Fallback Roboto';
  src: local('Roboto');
  size-adjust: 103.99%;
  ascent-override: 99.82%;
  descent-override: 21.35%;
}
@font-face {
  font-family: 'Jakarta Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 101.83%;
  ascent-override: 101.94%;
  descent-override: 21.80%;
}
@font-face {
  font-family: 'Jakarta Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 108.76%;
  ascent-override: 95.44%;
  descent-override: 20.41%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #203B3A;
  --ink-soft: #4A605F;
  --porcelain: #FAFAF8;
  --mist: #EAF3F1;
  --teal: #1D9A95;
  --teal-dark: #146863;
  --teal-darker: #0C4A47;
  --coral: #F2704A;
  --coral-dark: #D9572F;
  --coral-text: #B8341F;
  --on-dark-soft: #E8F5F3;
  --line: #D7E6E3;
  --font-display: 'Petrona', 'Petrona Fallback Georgia', 'Petrona Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Plus Jakarta Sans', 'Jakarta Fallback Arial', 'Jakarta 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(--porcelain);
  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-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; margin: 0 0 0.45em; color: var(--ink); }
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(--coral-text); 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(--teal-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(--teal-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(--coral-text); 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: #952A17; }


.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; }
}/* ---------- header / nav ---------- */
.dentist-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 248, 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;
}
.dentist-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(32, 59, 58, 0.1); }
.dentist-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.dentist-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.42rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.dentist-brand span { color: var(--teal-dark); }
.dentist-nav__links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
.dentist-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.dentist-nav__links a:hover { color: var(--teal-dark); text-decoration: none; }
.dentist-header__actions { display: flex; align-items: center; gap: 14px; }
.dentist-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) {
  .dentist-nav__toggle { display: flex; }
  .dentist-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--porcelain); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
  }
  .dentist-nav__links.is-open { display: flex; }
  .dentist-nav__links li { width: 100%; }
  .dentist-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .dentist-nav__links { display: flex !important; position: static; }
}
@media (max-width: 479px) {
  /* "Book an appointment" shortens to "Book" below ~480px — lesson from
     the hospital build, where the full label overflowed the header row
     next to a longer brand name and the ☰ toggle at 360/390px. */
  .dentist-cta-full { display: none; }
}

/* ---------- 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: 8px; 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(--teal-dark); color: #fff; }
.btn--primary:hover { background: var(--teal-darker); }
.btn--coral { background: var(--coral-text); color: #fff; }
.btn--coral:hover { background: #952A17; }
.btn--ghost { background: transparent; color: var(--ink); 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; height: 38px; line-height: 1.2; }
.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: 10px; 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 from spa/hospital, 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); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 16px 36px rgba(32, 59, 58, 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--teal { background: var(--teal-dark); color: #fff; }
.section--teal h2, .section--teal .eyebrow { color: #fff; }
.section--teal .lede { color: var(--on-dark-soft); }

/* ---------- dentist profile (About page) ---------- */
.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.04em; color: var(--teal-dark); background: var(--mist); padding: 4px 12px; border-radius: 20px; }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
@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(--ink); }
.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); border-radius: 0 8px 8px 0; 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: 8px;
  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 ---------- */
.dentist-footer { background: var(--teal-dark); color: #CFE9E6; padding: 56px 0 30px; }
.dentist-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.dentist-footer a { color: #CFE9E6; }
.dentist-footer__brand { font-family: var(--font-display); font-size: 1.25rem; color: #fff; margin-bottom: 0.4em; }
.dentist-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; }
.dentist-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dentist-footer__legal { max-width: var(--max); margin: 38px auto 0; padding: 20px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.76rem; color: var(--on-dark-soft); }
@media (max-width: 760px) { .dentist-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(32, 59, 58, 0.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--porcelain); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px clamp(20px, 4vw, 38px); position: relative;
  border-radius: 12px; border-top: 3px solid var(--coral);
}
.booking-modal__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: 1px solid var(--line); background: #fff; border-radius: 8px; 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(--coral-text); 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); border-radius: 8px;
  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); border-radius: 8px; 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; }