/* 12D Spa demo — self-contained stylesheet, deliberately independent of
   /assets/site.css, /demo/yoga/style.css and /demo/wellness/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, only the weights used) ---------- */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/demo/spa/fonts/cormorant-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/demo/spa/fonts/cormorant-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/demo/spa/fonts/jost-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/demo/spa/fonts/jost-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* ---------- fallback metric overrides, so Cormorant/Jost 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.
   Cormorant vs Georgia:    size-adjust 77.03%, ascent-override 119.95%, descent-override 37.26%
   Cormorant vs Noto Serif: size-adjust 79.55%, ascent-override 116.16%, descent-override 36.08%
   Jost vs Arial:           size-adjust 96.43%, ascent-override 110.96%, descent-override 38.89%
   Jost vs Roboto:          size-adjust 97.41%, ascent-override 109.84%, descent-override 38.50% */
@font-face {
  font-family: 'Cormorant Fallback Georgia';
  font-weight: 600;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 77.03%;
  ascent-override: 119.95%;
  descent-override: 37.26%;
}
@font-face {
  font-family: 'Cormorant Fallback NotoSerif';
  font-weight: 600;
  src: local('Noto Serif SemiBold'), local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 79.55%;
  ascent-override: 116.16%;
  descent-override: 36.08%;
}
/* Cormorant 500 (the h1 weight) measured separately from the 600 pair above —
   same reasoning as Jost 500 below: reusing the 600-calibrated faces left the
   fallback's box mismatched relative to Georgia/Noto Serif's own metrics at
   500. Georgia doesn't auto-upgrade to Bold at weight 500 (confirmed: measured
   identical to Georgia@400, i.e. still Regular), so a single local('Georgia')
   source is correct here, unlike the 600+ weight fallback above.
   Cormorant 500 vs Georgia:    size-adjust 89.98%, ascent-override 102.69%, descent-override 31.90%
   Cormorant 500 vs Noto Serif: size-adjust 83.67%, ascent-override 110.44%, descent-override 34.30% */
@font-face {
  font-family: 'Cormorant Fallback Georgia';
  font-weight: 500;
  src: local('Georgia');
  size-adjust: 89.98%;
  ascent-override: 102.69%;
  descent-override: 31.90%;
}
@font-face {
  font-family: 'Cormorant Fallback NotoSerif';
  font-weight: 500;
  src: local('Noto Serif');
  size-adjust: 83.67%;
  ascent-override: 110.44%;
  descent-override: 34.30%;
}
@font-face {
  font-family: 'Jost Fallback Arial';
  src: local('Arial');
  size-adjust: 96.43%;
  ascent-override: 110.96%;
  descent-override: 38.89%;
}
@font-face {
  font-family: 'Jost Fallback Roboto';
  src: local('Roboto');
  size-adjust: 97.41%;
  ascent-override: 109.84%;
  descent-override: 38.50%;
}
/* Jost 500 (the .eyebrow weight) measured separately from the 400 pair
   above — reusing the unweighted 400-calibrated faces for 500-weight text
   left the fallback's box slightly too wide/narrow relative to Arial/
   Roboto's own metrics at 500, the same class of bug fixed for wellness's
   Work Sans 600 eyebrow. Arial doesn't auto-upgrade to Bold at weight 500
   (confirmed: Arial@500 measures identical to Arial@400, i.e. still
   Regular, not a faux-bold risk), so a single local('Arial') source is
   correct here, unlike the 600+ weight fallbacks elsewhere in this file. */
@font-face {
  font-family: 'Jost Fallback Arial';
  font-weight: 500;
  src: local('Arial');
  size-adjust: 98.39%;
  ascent-override: 108.75%;
  descent-override: 38.11%;
}
@font-face {
  font-family: 'Jost Fallback Roboto';
  font-weight: 500;
  src: local('Roboto');
  size-adjust: 102.17%;
  ascent-override: 104.73%;
  descent-override: 36.70%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #2A2E2D;
  --ink-soft: #566160;
  --ivory: #F7F4EE;
  --stone: #DCD3C3;
  --stone-soft: #EAE3D4;
  --teal: #3E5C59;
  --teal-dark: #2C4341;
  --gold: #B08D57;
  --gold-dark: #8E6F43;
  --gold-text: #705431;
  --line: #D9D0BE;
  --font-display: 'Cormorant', 'Cormorant Fallback Georgia', 'Cormorant Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Jost', 'Jost Fallback Arial', 'Jost 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(--ivory);
  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.1; margin: 0 0 0.45em; color: var(--ink); letter-spacing: 0.01em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 3.8rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 500; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(56px, 8vw, 112px) 0; }
.eyebrow { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.74rem; color: var(--gold-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.12rem; color: var(--ink-soft); }

/* ---------- focus & skip link ---------- */
:focus-visible { outline: 3px solid var(--gold-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-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(--ivory)}.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(--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; }
}/* ---------- header / nav ---------- */
.spa-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 238, 0.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
  padding: 22px 0;
}
.spa-header.is-scrolled { padding: 11px 0; box-shadow: 0 8px 24px rgba(42, 46, 45, 0.08); }
.spa-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.spa-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--ink);
  margin-right: auto; white-space: nowrap; letter-spacing: 0.02em;
}
.spa-brand span { color: var(--teal); }
.spa-nav__links {
  list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; align-items: center;
}
.spa-nav__links a { color: var(--ink); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.03em; white-space: nowrap; }
.spa-nav__links a:hover { color: var(--teal); text-decoration: none; }
.spa-header__actions { display: flex; align-items: center; gap: 14px; }
.spa-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) {
  .spa-nav__toggle { display: flex; }
  .spa-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--ivory); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
  }
  .spa-nav__links.is-open { display: flex; }
  .spa-nav__links li { width: 100%; }
  .spa-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .spa-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: 500; font-size: 0.92rem; letter-spacing: 0.03em;
  line-height: inherit; padding: 14px 28px; border-radius: 3px; 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); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-dark); }
.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; 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.25fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__media { border-radius: 2px; 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. */
.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: 28px; }
.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(42, 46, 45, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-soft); }
.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.22rem; font-weight: 600; margin: 0 0 0.3em; }
.card__price { font-weight: 500; color: var(--teal); margin: 0.4em 0; font-family: var(--font-body); }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 0.6em; }

.section--stone { background: var(--stone-soft); }
.section--teal { background: var(--teal); color: #fff; }
.section--teal h2, .section--teal .eyebrow { color: #fff; }

/* ---------- testimonial ---------- */
.review-card {
  border: 1px solid var(--line); padding: 32px 34px;
  background: #fff; max-width: 680px;
}
.review-card__label {
  display: inline-block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-text); background: var(--stone-soft);
  padding: 4px 12px; margin-bottom: 14px;
}
.review-card blockquote { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 0.6em; font-weight: 500; }
.review-card cite { font-size: 0.86rem; color: var(--ink-soft); }

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

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

/* ---------- gift voucher preview ---------- */
.voucher-picker { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0; }
.voucher-amount {
  padding: 12px 22px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
}
.voucher-amount:hover { border-color: var(--gold); }
.voucher-amount[aria-pressed="true"] { border-color: var(--gold); background: var(--stone-soft); font-weight: 500; }
.voucher-card {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: #fff; padding: clamp(28px, 5vw, 44px); max-width: 480px;
  border: 1px solid var(--gold); position: relative;
}
.voucher-card__brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.03em; }
.voucher-card__amount { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0.3em 0; color: var(--gold); font-weight: 600; }
.voucher-card__note { font-size: 0.82rem; opacity: 0.85; }
.voucher-preview-note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 1.2em; }

/* ---------- footer ---------- */
.spa-footer { background: var(--ink); color: var(--stone); padding: 60px 0 30px; }
.spa-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.spa-footer a { color: var(--stone); }
.spa-footer__brand { font-family: var(--font-display); font-size: 1.3rem; color: #fff; margin-bottom: 0.4em; }
.spa-footer__heading { color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9em; }
.spa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.spa-footer__legal { max-width: var(--max); margin: 40px auto 0; padding: 22px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.76rem; color: #A69F8E; }
@media (max-width: 760px) { .spa-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(42, 46, 45, 0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--ivory); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px clamp(20px, 4vw, 38px); position: relative;
  border-top: 3px solid var(--gold);
}
.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: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-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);
  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(--stone-soft); 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(--stone-soft); 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; }