/* 12D Wellness demo — self-contained stylesheet, deliberately independent of
   /assets/site.css and of /demo/yoga/style.css (own palette, own fonts). */

/* ---------- self-hosted fonts (Latin subset, only the weights used) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/demo/wellness/fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/demo/wellness/fonts/fraunces-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: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/demo/wellness/fonts/work-sans-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: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/demo/wellness/fonts/work-sans-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: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/demo/wellness/fonts/work-sans-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;
}

/* ---------- fallback metric overrides, so Fraunces/Work 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.
   Fraunces vs Georgia:    size-adjust 93.60%,  ascent-override 104.49%, descent-override 27.24%
   Fraunces vs Noto Serif: size-adjust 96.49%,  ascent-override 101.35%, descent-override 26.43%
   Work Sans vs Arial:     size-adjust 110.99%, ascent-override 83.79%,  descent-override 21.89%
   Work Sans vs Roboto:    size-adjust 112.46%, ascent-override 82.70%,  descent-override 21.61% */
@font-face {
  font-family: 'Fraunces Fallback Georgia';
  font-weight: 600;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 93.60%;
  ascent-override: 104.49%;
  descent-override: 27.24%;
}
@font-face {
  font-family: 'Fraunces Fallback NotoSerif';
  font-weight: 600;
  src: local('Noto Serif SemiBold'), local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 96.49%;
  ascent-override: 101.35%;
  descent-override: 26.43%;
}
@font-face {
  font-family: 'WorkSans Fallback Arial';
  src: local('Arial');
  size-adjust: 110.99%;
  ascent-override: 83.79%;
  descent-override: 21.89%;
}
@font-face {
  font-family: 'WorkSans Fallback Roboto';
  src: local('Roboto');
  size-adjust: 112.46%;
  ascent-override: 82.70%;
  descent-override: 21.61%;
}
/* Work Sans 600 (the .eyebrow weight) measured separately from the 400
   pair above — reusing the unweighted 400-calibrated faces for 600-weight
   text left the fallback ~8-9% too wide relative to Arial/Roboto's own
   real Bold/SemiBold cut, which showed up as PageSpeed-flagged CLS on the
   hero eyebrow once the real Work Sans 600 file finished loading (it isn't
   preloaded, so it arrives later than the 400 weight). Named Android
   instances listed nearest-first, same reasoning as the Noto Serif/Roboto
   heading fallbacks elsewhere in this file. */
@font-face {
  font-family: 'WorkSans Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 102.25%;
  ascent-override: 90.96%;
  descent-override: 23.77%;
}
@font-face {
  font-family: 'WorkSans Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 109.43%;
  ascent-override: 84.98%;
  descent-override: 22.21%;
}
/* Work Sans 500 (the demo-banner's own sentence, ".demo-banner p") —
   same bug as the eyebrow's 600 weight above: a real "Work Sans" face at
   exactly weight 500 is already registered (it's what the nav links ask
   for, see .wellness-nav__links), so once it loads the banner text snaps
   from the 400-calibrated fallback to its own true width. The banner is
   the very first thing painted on every page (not hidden on mobile, unlike
   the nav links it shares this weight with), which is what PageSpeed's
   critical request chain was flagging as "work-sans-500 loading late".
   Arial doesn't auto-bold at weight 500 (confirmed: Arial@500 measures
   identical to Arial@400), so a single local() source is correct. */
@font-face {
  font-family: 'WorkSans Fallback Arial';
  font-weight: 500;
  src: local('Arial');
  size-adjust: 109.76%;
  ascent-override: 84.73%;
  descent-override: 22.14%;
}
@font-face {
  font-family: 'WorkSans Fallback Roboto';
  font-weight: 500;
  src: local('Roboto');
  size-adjust: 109.75%;
  ascent-override: 84.74%;
  descent-override: 22.14%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #2B2A26;
  --ink-soft: #55534C;
  --cream: #FAF6EF;
  --sand: #E4D7BE;
  --sand-soft: #EFE6D3;
  --sage: #8FA083;
  --wood: #6B4A36;
  --accent: #4B5A3C;
  --accent-dark: #38442C;
  --accent-contrast: #FAF6EF;
  --line: #DCD2BC;
  --font-display: 'Fraunces', 'Fraunces Fallback Georgia', 'Fraunces Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Work Sans', 'WorkSans Fallback Arial', 'WorkSans Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1180px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 14px;
  --nav-breakpoint: 860px;
}

* { 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(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); 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.5em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(48px, 7vw, 96px) 0; }
.eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; color: var(--accent); margin: 0 0 0.75em; }
.section-head { max-width: 680px; margin: 0 0 2.5em; }
.lede { font-size: 1.1rem; color: var(--ink-soft); }

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

/* ---------- demo banner ---------- */
.demo-banner {
  background: var(--accent-dark); color: var(--accent-contrast);
  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: 500; }
.demo-banner a { color: var(--accent-contrast); 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(--cream)}.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(--accent); color: #fff;
  text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 999px;
  font-weight: 600; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
.demo-banner__cta:hover { background: var(--accent-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 ---------- */
.wellness-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 239, 0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
  padding: 18px 0;
}
.wellness-header.is-scrolled { padding: 9px 0; box-shadow: 0 6px 20px rgba(43, 42, 38, 0.08); }
.wellness-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 20px;
}
.wellness-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.wellness-brand span { color: var(--accent); }
.wellness-nav__links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
.wellness-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.96rem; white-space: nowrap; }
.wellness-nav__links a:hover { color: var(--accent); text-decoration: none; }
.wellness-header__actions { display: flex; align-items: center; gap: 12px; }
.wellness-nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 1.3rem; line-height: 1;
  background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink);
}
@media (max-width: 859px) {
  .wellness-nav__toggle { display: flex; }
  .wellness-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 18px;
  }
  .wellness-nav__links.is-open { display: flex; }
  .wellness-nav__links li { width: 100%; }
  .wellness-nav__links a { display: block; padding: 10px 4px; width: 100%; }
}
@media (min-width: 860px) {
  .wellness-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.96rem;
  line-height: inherit; padding: 13px 24px; border-radius: 999px; 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(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--small { padding: 9px 18px; font-size: 0.88rem; line-height: normal; }
.btn--whatsapp { background: #2E7D4F; color: #fff; }
.btn--whatsapp:hover { background: #255F3D; }

/* ---------- hero ---------- */
.hero { padding: 0; position: relative; }
.hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: var(--gutter);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero__media { border-radius: var(--radius); overflow: hidden; }
.hero__media img { width: 100%; height: auto; }
/* The <img> tag's own width/height attributes describe the DESKTOP source
   (2400x1344, landscape) since that's the element's default/fallback src —
   but the <picture>'s mobile <source> swaps in a differently-cropped,
   portrait image (1088x1360) below 641px. Browsers use the HTML attributes
   to reserve space before the chosen source decodes, so without this
   override the reserved box is landscape-shaped on mobile, and the whole
   hero text column snaps down once the real portrait image decodes — this
   was the dominant cause of PageSpeed's mobile CLS on this page (~0.13 of
   it), not the hero text at all. */
.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: 12px; margin-top: 1.6em; }
.hero__meta { margin-top: 1.4em; display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 860px) {
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
}

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.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: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: 0 14px 32px rgba(43, 42, 38, 0.1); transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
/* Card titles use the semantically-correct heading level for their place
   in each page's own outline (h2 or h3, varies by page) — this keeps
   their SIZE consistent as a card title regardless of which level that
   turns out to be, rather than inheriting the generic h2/h3 page styles. */
.card__body h2, .card__body h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 0.3em; }
/* Journal article sub-headings are h2 for a correct, sequential document
   outline (no h1 -> h3 skip), but should read as in-article section
   breaks, not full page headings. */
article h2 { font-size: 1.3rem; font-weight: 600; margin-top: 1.3em; }
.card__price { font-weight: 600; color: var(--accent); margin: 0.4em 0; }
.card__meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.6em; }

.section--sand { background: var(--sand-soft); }
.section--accent { background: var(--accent); color: var(--accent-contrast); }
.section--accent h2, .section--accent .eyebrow { color: var(--accent-contrast); }

/* ---------- testimonial ---------- */
.review-card {
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px 30px;
  background: #fff; max-width: 680px;
}
.review-card__label {
  display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wood); background: var(--sand-soft);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.review-card blockquote { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 0.6em; }
.review-card cite { font-size: 0.88rem; color: var(--ink-soft); }

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

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

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

/* ---------- footer ---------- */
.wellness-footer { background: var(--ink); color: var(--sand-soft); padding: 56px 0 28px; }
.wellness-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.wellness-footer a { color: var(--sand-soft); }
.wellness-footer__brand { font-family: var(--font-display); font-size: 1.2rem; color: #fff; margin-bottom: 0.4em; }
.wellness-footer__heading { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.8em; }
.wellness-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wellness-footer__legal { max-width: var(--max); margin: 36px auto 0; padding: 20px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; color: #B9B3A4; }
@media (max-width: 760px) { .wellness-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(43, 42, 38, 0.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--cream); border-radius: 18px; max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 30px clamp(20px, 4vw, 36px); position: relative;
}
.booking-modal__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.booking-step__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6em; }
.booking-options { display: grid; gap: 10px; margin-top: 16px; }
.booking-option {
  text-align: left; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
}
.booking-option:hover { border-color: var(--accent); }
.booking-option[aria-pressed="true"] { border-color: var(--accent); background: var(--sand-soft); font-weight: 600; }
.booking-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 16px; }
.booking-date {
  padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 0.82rem; text-align: center; line-height: 1.3;
}
.booking-date:hover { border-color: var(--accent); }
.booking-date[aria-pressed="true"] { border-color: var(--accent); background: var(--sand-soft); font-weight: 600; }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 16px; }
.booking-nav { display: flex; justify-content: space-between; margin-top: 24px; 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: 20px; }
.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; }