/* ============================================================
   Beyonderup Falls — LIGHT THEME (site-wide)
   Loaded AFTER main.css. Everything is scoped to `body.theme-light`.

   Design intent:
   - Heroes stay exactly as the original: the dusk photo, the dark
     overlay, full-bleed behind a transparent header (not cut).
   - The header bar is transparent over the hero, then turns light
     once the visitor scrolls into the content.
   - Everything BELOW the hero is remapped to a warm, bright palette
     with element colours re-tuned for contrast against their new
     backgrounds.
   ============================================================ */

/* ---- Base surface ---- */
.theme-light {
  --field: var(--bone-warm);
  color: var(--ink);
  background: var(--bone-warm);
}

/* Section rhythm: plain sections sit on the warm body tone, while
   `--light` sections drop to the slightly deeper bone for contrast.
   The hero and the dark "facts" (.spec) strip directly beneath it
   are deliberately LEFT DARK — exactly like the dark theme, so the
   hero bleeds seamlessly into the facts strip. The page turns light
   from the next section down. */
.theme-light .section--light { background: var(--bone); color: var(--ink); }
/* A subtly deeper band so "mid" sections (e.g. the newsletter) read as
   their own block instead of merging into the bone sections around them. */
.theme-light .section--mid { background: var(--bone-deep); }

/* Tighten the vertical rhythm. The dark theme's generous 8rem section
   padding (256px between sections) reads as big empty gaps once every
   section shares a light background, so trim it to a calmer rhythm.
   Mobile keeps the original compact spacing. */
.theme-light .section { padding-block: var(--sp-24); }
.theme-light .section--intro { padding-block: var(--sp-24); }
.theme-light .section--tight { padding-block: var(--sp-16); }
@media (max-width: 640px) {
  .theme-light .section,
  .theme-light .section--intro { padding-block: var(--sp-16); }
  .theme-light .section--tight { padding-block: var(--sp-12); }
}

/* ============================================================
   Generic light-surface mappings (mirror the design's own
   .section--light rules, applied everywhere in the light theme)
   ============================================================ */
.theme-light .meta { color: var(--ink-mute); }
.theme-light .sec-head { border-block-start-color: rgb(26 21 18 / 0.16); }
.theme-light .sec-head p { color: var(--ink-mute); }
.theme-light .title-rule { background: rgb(26 21 18 / 0.16); }

.theme-light .chalet__intro { color: var(--ink-mute); }
.theme-light .chalet__specs li { border-block-end-color: rgb(26 21 18 / 0.1); color: var(--ink-mute); }
.theme-light .chalet-card {
  color: var(--ink);
  border-color: rgb(26 21 18 / 0.12);
  background: rgb(255 255 255 / 0.55);
}
.theme-light .chalet-card:hover {
  border-color: rgb(26 21 18 / 0.28);
  box-shadow: 0 16px 34px rgb(26 21 18 / 0.12);
}
.theme-light .chalet-card__what { color: var(--ink-mute); }

.theme-light .chalet__body--wide .which { background: rgb(26 21 18 / 0.02); border-color: rgb(26 21 18 / 0.12); }
.theme-light .chalet__body--wide .which__title { border-block-end-color: rgb(26 21 18 / 0.12); }
.theme-light .which__title { color: var(--ink); }
.theme-light .which__row { border-block-start-color: rgb(26 21 18 / 0.12); }
.theme-light .which__row:last-child { border-block-end-color: rgb(26 21 18 / 0.12); }
.theme-light .which__what { color: var(--ink-mute); }

.theme-light .feature-grid li { border-block-start-color: rgb(26 21 18 / 0.12); color: var(--ink-mute); }

.theme-light .quote { background: rgb(255 255 255 / 0.5); border-color: rgb(26 21 18 / 0.1); }
.theme-light .quote:hover { background: rgb(255 255 255 / 0.78); border-color: rgb(26 21 18 / 0.22); }
.theme-light .quote--hero, .theme-light .quote--hero:hover { background: none; }

.theme-light .falls__layout { border-block-start-color: rgb(26 21 18 / 0.14); }
.theme-light .season-switch { border-color: rgb(26 21 18 / 0.25); }
.theme-light .season-switch__btn { color: rgb(26 21 18 / 0.55); }
.theme-light .season-switch__btn[aria-selected="true"] { background: var(--ink); color: var(--bone); }
.theme-light .season-panel p { color: var(--ink-mute); }
.theme-light .season-note { color: rgb(26 21 18 / 0.7); }

.theme-light .nearby-item { border-color: rgb(26 21 18 / 0.14); }
.theme-light .nearby-item:hover { border-color: rgb(26 21 18 / 0.3); }
.theme-light .nearby-item p { color: var(--ink-mute); }

.theme-light .guide-card { background: rgb(255 255 255 / 0.55); border-color: rgb(26 21 18 / 0.12); }
.theme-light .guide-card:hover { border-color: rgb(26 21 18 / 0.28); }
.theme-light .guide-card p { color: var(--ink-mute); }
.theme-light .guide-app p { color: var(--ink-mute); }

.theme-light .slide { border-color: rgb(26 21 18 / 0.14); background: rgb(255 255 255 / 0.5); }
.theme-light .slide p { color: var(--ink-mute); }
.theme-light .slider__nav { border-color: rgb(26 21 18 / 0.3); }
.theme-light .slider__nav:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.theme-light .split--top { border-block-start-color: rgb(26 21 18 / 0.14); }
.theme-light .detail-list > div { border-block-start-color: rgb(26 21 18 / 0.14); }
.theme-light .detail-list dt { color: var(--ink-mute); }

.theme-light .final p { color: var(--ink-mute); }

.theme-light .availability__legend { color: rgb(26 21 18 / 0.6); }
.theme-light .field__help { color: var(--ink-mute); }

/* Forms default to dark on non-light sections in the original;
   keep them light everywhere here. */
.theme-light .form,
.theme-light .section .form,
.theme-light .section--mid .form {
  border-color: rgb(26 21 18 / 0.18);
  background: rgb(255 255 255 / 0.5);
}
.theme-light .field input,
.theme-light .field textarea,
.theme-light .field select { border-color: rgb(26 21 18 / 0.28); }

/* ---- Buttons ---- */
.theme-light .btn--line { color: var(--ink); border-color: rgb(26 21 18 / 0.35); }
.theme-light .btn--line:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.theme-light .btn--inkLine { color: var(--ink); border-color: rgb(26 21 18 / 0.35); }
.theme-light .btn--inkLine:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.theme-light .btn--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.theme-light .btn--solid:hover { background: var(--ochre); border-color: var(--ochre); color: var(--bone); }

/* ============================================================
   Header — transparent & dark-over-hero at the top (original),
   light once scrolled into content.
   ============================================================ */
/* Availability CTA — transparent with a subtle dark overlay + ochre border, in both states. */
.theme-light .header__cta,
.theme-light .header:not(.is-scrolled) .header__cta {
  background: rgb(0 0 0 / 0.28); color: #fff; border-color: rgb(255 255 255 / 0.75); font-weight: 600;
}
.theme-light .header__cta:hover,
.theme-light .header:not(.is-scrolled) .header__cta:hover {
  background: var(--ochre-lift); border-color: var(--ochre-lift); color: #fff;
}

/* Scrolled state → light bar. */
.theme-light .header.is-scrolled { background: var(--bone-warm); box-shadow: 0 1px 0 rgb(26 21 18 / 0.1); }
.theme-light .header.is-scrolled::before { opacity: 0; }
.theme-light .header.is-scrolled .header__link { color: var(--ink); text-shadow: none; }
.theme-light .header.is-scrolled .header__link:hover { color: var(--ochre); }
.theme-light .header.is-scrolled .header__link[aria-current="page"] { border-block-end-color: transparent; color: var(--ochre); }
.theme-light .header.is-scrolled .has-menu__toggle,
.theme-light .header.is-scrolled .nav-toggle { color: var(--ink); }
.theme-light .header.is-scrolled .header__cta { background: var(--ochre-lift); color: #fff; border-color: var(--ochre-lift); }
.theme-light .header.is-scrolled .header__cta:hover { background: var(--ochre); color: #fff; border-color: var(--ochre); }
.theme-light .header.is-scrolled .header__brand img { filter: brightness(0); }

/* Accommodation dropdown — light card to match the theme. */
.theme-light .submenu {
  background: var(--bone-warm); border-color: rgb(26 21 18 / 0.14);
  box-shadow: 0 12px 30px rgb(26 21 18 / 0.12);
}
.theme-light .submenu a { color: var(--ink); }
.theme-light .submenu a:hover { background: rgb(26 21 18 / 0.05); }
.theme-light .submenu__note { color: var(--ink-mute); border-block-end-color: rgb(26 21 18 / 0.12); }

/* Mobile nav overlay — light. */
.theme-light .mobile-nav { background: var(--bone-warm); }
.theme-light .mobile-nav__link { color: var(--ink); border-bottom-color: rgb(26 21 18 / 0.12); }
.theme-light .mobile-nav__sub a { color: var(--ink); border-bottom-color: rgb(26 21 18 / 0.08); }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"]) { background: var(--bone-warm); }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"])::before { opacity: 0; }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"]) .header__brand img { filter: brightness(0); }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"]) .nav-toggle { color: var(--ink); }

/* ============================================================
   Hero — kept EXACTLY as the dark theme: full-bleed photo under
   the original dusk overlay, and the original DARK bottom bleed
   (no .hero__scrim or .hero::after overrides here, so both the
   dusk scrim and the dark bottom fade into `--hero-next` from
   main.css apply identically — the hero bleeds into the dark
   .spec strip below it just like the dark theme). Only the
   headline text tone is set for the light theme.
   ============================================================ */
.theme-light .hero__title { color: #f5f1e8; }
.theme-light .hero .meta { color: rgb(251 248 242 / 0.9); }

/* ============================================================
   Footer — warm light
   ============================================================ */
.theme-light .footer { background: var(--ink-2); color: rgb(240 236 227 / 0.66); }
.theme-light .footer__brand img { filter: none; opacity: 0.95; }
.theme-light .footer h4 { color: rgb(240 236 227 / 0.92); }
.theme-light .footer a:hover { color: #fff; }
.theme-light .footer .social a { border-color: rgb(240 236 227 / 0.22); color: rgb(240 236 227 / 0.7); }
.theme-light .footer .social a:hover { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.theme-light .footer-news__row input { color: #fff; border-color: rgb(240 236 227 / 0.28); background: rgb(240 236 227 / 0.06); }
.theme-light .footer-news__row input::placeholder { color: rgb(240 236 227 / 0.45); }
.theme-light .footer-news__row button { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.theme-light .footer-news__row button:hover { background: var(--ochre-lift); border-color: var(--ochre-lift); color: var(--ink); }
.theme-light .footer__bottom { border-block-start-color: rgb(240 236 227 / 0.14); color: rgb(240 236 227 / 0.5); }
.theme-light .footer__bottom a { color: rgb(240 236 227 / 0.66); }
.theme-light .footer__bottom a:hover { color: #fff; }

/* ============================================================
   Floating controls
   ============================================================ */
.theme-light .to-top {
  background: var(--bone);
  color: var(--ink);
  border-color: rgb(26 21 18 / 0.18);
  box-shadow: 0 8px 24px rgb(26 21 18 / 0.16);
}
.theme-light .to-top:hover { background: var(--ochre-lift); color: var(--ink); border-color: var(--ochre-lift); }

.theme-light .sticky-cta { background: var(--bone-warm); border-block-start-color: rgb(26 21 18 / 0.14); }
.theme-light .sticky-cta__price span { color: var(--ink-mute); }

/* ============================================================
   Booking widget — crop the Little Hotelier iframe to the
   4-chalet calendar (~210px); the widget's own layout leaves a
   large white void below it, so trim the fixed height.
   ============================================================ */
.theme-light .availability iframe[src*="littlehotelier"] { height: 380px; }
@media (max-width: 900px) { .theme-light .availability iframe[src*="littlehotelier"] { height: 400px; } }

/* ============================================================
   Hero overlay — lighten the dusk scrim a little (was reading a
   bit dark), while keeping the bottom dark enough for the white
   headline to stay legible. Applies to every hero.
   ============================================================ */
.theme-light .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.66) 0%,
    rgb(0 0 0 / 0.42) 26%,
    rgb(0 0 0 / 0.15) 50%,
    rgb(0 0 0 / 0) 74%,
    rgb(0 0 0 / 0.08) 100%);
}
.theme-light .hero--dusk .hero__scrim::after {
  background: radial-gradient(140% 100% at 50% 45%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / 0.16) 100%);
}

/* Homepage hero: align the photo to the top edge (start at y=0). */
.theme-light .hero:not(.hero--short) .hero__media img { object-position: 50% 0; }

/* --- Hero text: pure white for visibility (legibility comes from the dusk
   scrim; no extra overlay so nothing sits over the content). --- */
.theme-light .hero__title,
.theme-light .hero__chips li,
.theme-light .hero__truth,
.theme-light .hero__foot .meta { color: #fff; }

/* Body copy sized consistently across the whole light site */
.theme-light p { font-size: 17px; }

/* ---- Topbar live-status stays small (the global p size must not enlarge it) ---- */
.theme-light .topbar p,
.theme-light .topbar .conditions { font-size: 0.7rem; }

/* ============================================================
   Spa CTA band — reusable site-wide (taller, image + buttons)
   ============================================================ */
.theme-light .spa-cta__inner {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 520px;
  display: flex; align-items: center; justify-content: center;
}
.theme-light .spa-cta__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theme-light .spa-cta__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgb(0 0 0 / 0.30) 0%, rgb(0 0 0 / 0.55) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.58) 100%);
}
.theme-light .spa-cta__body { position: relative; z-index: 2; padding: var(--sp-12); max-width: 660px; }
.theme-light .spa-cta__body h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.12; margin: 0 0 var(--sp-4); }
/* Comfortable vertical rhythm between the CTA's eyebrow, title, copy and
   buttons (sp-5 was undefined and silently collapsed). Applies site-wide. */
.theme-light .spa-cta__body .meta { display: block; margin-block-end: var(--sp-3); }
.theme-light .spa-cta__body p { margin-block-end: var(--sp-6); }
.theme-light .spa-cta__body .spa-cta__actions { margin-block-start: var(--sp-2); }
.theme-light .spa-cta__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* centered variant */
.theme-light .spa-cta__body--center { text-align: center; margin-inline: auto; max-width: 720px; }
.theme-light .spa-cta__body--center .meta { color: rgb(255 255 255 / 0.82); }
.theme-light .spa-cta__body--center h2 { margin-inline: auto; max-width: 20ch; }
.theme-light .spa-cta__body--center p { color: rgb(255 255 255 / 0.92); font-size: 1.02rem; line-height: 1.6; margin: 0 auto var(--sp-6); max-width: 56ch; }
.theme-light .spa-cta__body--center .spa-cta__actions { justify-content: center; }
.theme-light .spa-cta__actions .btn { border-radius: 999px; }
.theme-light .spa-cta__actions .btn--solid { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.theme-light .spa-cta__actions .btn--solid:hover { background: var(--ochre-lift); color: var(--ink); border-color: var(--ochre-lift); }
.theme-light .spa-cta__actions .btn--line { color: #fff; border-color: rgb(255 255 255 / 0.6); }
.theme-light .spa-cta__actions .btn--line:hover { background: rgb(255 255 255 / 0.12); color: #fff; border-color: #fff; }
@media (max-width: 620px) {
  .theme-light .spa-cta__body { padding: var(--sp-8); }
  .theme-light .spa-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   SITE-WIDE DESIGN LAYER (Sep-19) — brings the homepage look to
   every inner page: rounded corners, pill buttons, the dual
   circle-border logo, tighter nav, and a book-direct pill.
   Home overrides these via home.css (loaded after) where needed.
   ============================================================ */
.theme-light {
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px;
}

/* pill buttons + rounded controls everywhere */
.theme-light .btn { border-radius: var(--r-pill); letter-spacing: 0.06em; }
.theme-light .header__cta { border-radius: var(--r-pill); }

/* nav + CTA label sizing to match the homepage */
.theme-light .header__link {
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px; font-weight: 500;
}
/* No underline — active/current state uses colour only (like hover). */
.theme-light .header__link[aria-current="page"] { border-block-end-color: transparent; color: var(--ochre-lift); }

/* dual circle-border logo: white knockout over the hero, colour on the
   scrolled bone bar (mirrors the homepage). Overrides the old bone-svg filter. */
.theme-light .header__brand img { filter: none !important; width: 200px; height: auto; }
.theme-light .header__brand .brand-colour { display: none; }
.theme-light .header.is-scrolled .header__brand img { filter: none !important; width: 168px; }
.theme-light .header.is-scrolled .header__brand .brand-white { display: none; }
.theme-light .header.is-scrolled .header__brand .brand-colour { display: block; }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"]) .header__brand img { filter: none !important; }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"]) .header__brand .brand-white { display: none; }
.theme-light .header:has([data-nav-toggle][aria-expanded="true"]) .header__brand .brand-colour { display: block; }
@media (max-width: 719px) { .theme-light .header__brand img { width: 158px; } }

/* book-direct pill: ochre in both states (matches home) */
.theme-light .header__cta,
.theme-light .header:not(.is-scrolled) .header__cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ochre); color: #fff; border-color: var(--ochre);
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.theme-light .header:not(.is-scrolled) .header__cta:hover,
.theme-light .header.is-scrolled .header__cta:hover {
  background: var(--ochre-lift); border-color: var(--ochre-lift); color: #fff;
}
.theme-light .header__cta-ext { opacity: 0.8; flex-shrink: 0; }

/* footer keeps the colour logo (no knockout) */
.theme-light .footer__brand img { filter: none !important; }

/* rounded media across content sections for the modern feel */
.theme-light .chalet__media,
.theme-light .which__media,
.theme-light .hosts__media,
.theme-light .falls__media img,
.theme-light .slide,
.theme-light .gallery figure,
.theme-light .gallery figure img,
.theme-light .card,
.theme-light .guide-card { border-radius: var(--r-md); overflow: hidden; }
.theme-light .media--wide, .theme-light .media--wide img { border-radius: var(--r-lg); }

/* header book-direct pill: desktop only (was forced visible on mobile) */
@media (max-width: 959px) { .header__cta { display: none !important; } }
/* Chalets dropdown: links a hair bigger for readability; the intro note
   a touch smaller so it reads as a caption. */
.theme-light .submenu a { font-size: 13px; padding-block: 9px; }
.theme-light .submenu__note { font-size: 0.79rem; letter-spacing: 0.01em; }
.theme-light .submenu { min-width: 244px; }

/* rounded form fields + review/testimonial cards */
.theme-light .field input,
.theme-light .field textarea,
.theme-light .field select { border-radius: var(--r-sm); }
.theme-light .form { border-radius: var(--r-md); }
.theme-light .quote,
.theme-light .review-card { border-radius: var(--r-md); }

/* ============================================================
   Promote homepage refinements site-wide (inner pages)
   ============================================================ */
/* right-aligned primary nav (brand left, nav+CTA right) */
@media (min-width: 960px) { .theme-light .header__nav { margin-inline-start: auto; gap: 14px; } }
@media (min-width: 1200px) { .theme-light .header__nav { gap: 18px; } }

/* section eyebrows match the homepage */
.theme-light .meta {
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* accreditation badge band — transparent, greyscale→colour on hover (as home) */
.theme-light .badge-band { background: transparent; border: 0; }
.theme-light .badge-band__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2.5rem, 8vw, 5rem); padding-block: var(--sp-6) var(--sp-16);
}
.theme-light .badge-band img {
  height: 58px; width: auto; filter: grayscale(1); opacity: 0.55;
  transition: filter 220ms var(--ease), opacity 220ms var(--ease);
}
.theme-light .badge-band img:hover { filter: grayscale(0); opacity: 1; }
.theme-light .badge-band__softub { height: 40px; }
.theme-light .footer { border-block-start: none; }

/* footer typography normalised to one size/colour (as home) */
.theme-light .footer h4 {
  font-family: var(--font-text); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgb(240 236 227 / 0.9);
  margin-block-end: var(--sp-3);
}
.theme-light .footer p,
.theme-light .footer li,
.theme-light .footer a,
.theme-light .footer__col--links a { font-size: 0.82rem; color: rgb(240 236 227 / 0.66); }
.theme-light .footer a:hover { color: #fff; }
.theme-light .social a { border-radius: 50%; }

/* gallery page: pull each category grid up close under its title */
.gallery-page .sec-head { margin-block-end: var(--sp-3); }
.gallery-page .sec-head--solo { padding-block-end: 0; }

/* tighter gaps between gallery photos (desktop + mobile) */
.theme-light .gallery--mosaic { gap: 10px; }
@media (min-width: 900px) { .theme-light .gallery--mosaic { gap: 14px; } }

/* ============================================================
   MATCH HOMEPAGE EXACTLY (override earlier inner-page versions)
   frosted-glass header CTA + rounded newsletter
   ============================================================ */
.theme-light .header__cta,
.theme-light .header:not(.is-scrolled) .header__cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgb(255 255 255 / 0.10); color: #fff; border: 1px solid rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; border-radius: var(--r-pill);
}
.theme-light .header:not(.is-scrolled) .header__cta:hover {
  background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.7); color: #fff;
}
.theme-light .header.is-scrolled .header__cta {
  background: rgb(26 21 18 / 0.04); color: var(--ink); border-color: rgb(26 21 18 / 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.theme-light .header.is-scrolled .header__cta:hover {
  background: var(--ochre); border-color: var(--ochre); color: #fff;
}
.theme-light .header__cta-ext { opacity: 0.75; flex-shrink: 0; }

/* footer newsletter: rounded pill input + button (as home) */
.theme-light .footer-news__row { gap: 8px; }
.theme-light .footer-news__row input,
.theme-light .footer-news__row button { border-radius: var(--r-pill); }

/* ============================================================
   SEP-19 BATCH 13 — header raised on inner pages (match home),
   location-page fixes, rounded guide-app.
   ============================================================ */

/* Header sits higher on every light page, like the homepage. */
.theme-light .header__main { padding-block: var(--sp-1); }

/* Location hero: darker bottom scrim so the headline + intro stay
   legible over the brighter river/valley photo. */
.location-page .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.74) 0%,
    rgb(0 0 0 / 0.55) 30%,
    rgb(0 0 0 / 0.28) 55%,
    rgb(0 0 0 / 0.06) 80%,
    rgb(0 0 0 / 0.10) 100%);
}

/* Tighten the gap after every section heading on the location page. */
.location-page .sec-head { margin-block-end: var(--sp-4); }

/* Merged "Where are we / About the Location": detail list beside the
   street-view embed. */
.location-detail { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .location-detail { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-12); align-items: start; }
}
.location-streetview { margin: 0; }
.location-streetview iframe {
  width: 100%; height: 340px; border: 0; display: block;
  border-radius: var(--r-md);
}
.theme-light .location-streetview { background: transparent; padding: 0; border-radius: var(--r-md); overflow: hidden; }
.location-streetview figcaption { margin-block-start: var(--sp-2); }
@media (min-width: 900px) { .location-streetview iframe { height: 380px; } }

/* "Before you come" app strip: rounded corners like the other cards. */
.theme-light .guide-app { border-radius: var(--r-md); overflow: hidden; }

/* ============================================================
   SEP-19 BATCH 14 — location page: hero, where-grid, map,
   guide icons, CTA, badges, Experience Nannup app promo.
   ============================================================ */

/* (2) Hero: all text white, sitting in front of a clearly BLACK scrim
   (an even black wash + a darker foot where the headline sits). */
.location-page .hero__body { position: relative; z-index: 3; }
.location-page .hero__body .meta,
.location-page .hero__title,
.location-page .hero__truth { color: #fff; }
/* No full-frame scrim — just a short, subtle black fade at the very
   bottom (black → transparent, bottom-up) behind the copy. */
.location-page .hero__scrim { background: none; }
.location-page .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.52) 0%,
    rgb(0 0 0 / 0.26) 16%,
    rgb(0 0 0 / 0) 38%);
}
.location-page .hero--dusk .hero__scrim::after { background: none; }

/* (3) Where are we: all copy in the left column, street view right. */
.where-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .where-grid { grid-template-columns: 1fr 1.02fr; gap: var(--sp-12); align-items: stretch; }
}
.where-copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.where-copy .meta { display: block; }
.where-copy h2 { font-size: var(--t-h2); margin: 0 0 var(--sp-2); max-width: 14ch; }
.where-copy .detail-list { margin-block-start: var(--sp-4); }
.where-grid .location-streetview { height: 100%; }
@media (min-width: 900px) { .where-grid .location-streetview iframe { height: 100%; min-height: 420px; } }

/* (4) Google Maps embed: rounded corners, standard place label top-left. */
.theme-light .location-map { background: transparent; padding: 0; border-radius: var(--r-md); overflow: hidden; }
.location-map iframe { width: 100%; height: 520px; border: 0; display: block; border-radius: var(--r-md); }
@media (max-width: 900px) { .location-map iframe { height: 400px; } }

/* (5) Town-guide cards: icon above each heading. */
.guide-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; margin-block-end: var(--sp-3);
  border-radius: var(--r-pill); color: var(--ochre);
  background: rgb(198 138 66 / 0.12);
}
.guide-card__icon svg { width: 27px; height: 27px; }

/* (6) Spa CTA: content LEFT-aligned.
   THE REAL BUG: .spa-cta__inner is `display:flex; justify-content:center`,
   which centres the whole body block in the container no matter what
   text-align says. Pin the body to the left here. Also the base
   .spa-cta__body--center h2/p carry margin-inline:auto (reset to 0). */
.location-page .spa-cta__inner,
.gallery-page .spa-cta__inner { justify-content: flex-start; }
.location-page .spa-cta__body--center,
.gallery-page .spa-cta__body--center {
  text-align: left; align-items: flex-start; margin-inline: 0; max-width: 60ch;
}
.location-page .spa-cta__body--center h2,
.gallery-page .spa-cta__body--center h2 { margin-inline: 0; max-width: none; }
.location-page .spa-cta__body--center p,
.gallery-page .spa-cta__body--center p { margin-inline: 0; max-width: 58ch; }
.location-page .spa-cta__body--center .spa-cta__actions,
.gallery-page .spa-cta__body--center .spa-cta__actions { justify-content: flex-start; }
.location-page .spa-cta__scrim,
.gallery-page .spa-cta__scrim {
  background: linear-gradient(to right,
    rgb(0 0 0 / 0.56) 0%, rgb(0 0 0 / 0.42) 32%,
    rgb(0 0 0 / 0.18) 60%, rgb(0 0 0 / 0) 85%);
}

/* (7) Accreditation band: replicate the HOMEPAGE spacing exactly —
   home.css uses `.page-home .badge-band__row { padding-block: sp-16 }`
   (symmetric 64/64) plus `.page-home .spa-cta { padding-block: 0 }`. */
.location-page .badge-band__row,
.gallery-page .badge-band__row { padding-block: var(--sp-16); }

/* (8) Experience Nannup app promo: shorter card, phone image cropped to
   its top half, bottom hugging the card and its TOP overlapping the card's
   top border a little (overflow visible + negative margin-top). */
/* overflow:visible must beat the batch-13 `.theme-light .guide-app{overflow:hidden}` */
.location-page .guide-app--promo { overflow: visible; }
.guide-app--promo { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: end; padding: var(--sp-6) var(--sp-8) 0; }
@media (min-width: 800px) {
  .guide-app--promo { grid-template-columns: 1.3fr 0.7fr; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12) 0; }
}
.guide-app--promo .guide-app__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-2) var(--sp-8); max-width: 44ch; }
.guide-app--promo .guide-app__text p { max-width: 44ch; }
.guide-app--promo .guide-app__text .btn { margin-block-start: var(--sp-2); }
/* phone is absolutely placed so it does NOT set the card height; bottom
   hugs the card, and being taller than the card its TOP bleeds above the
   card's top border. */
.guide-app__media { position: relative; align-self: stretch; min-height: 190px; }
.guide-app__media img {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  height: 300px; width: auto; max-width: none; display: block;
  filter: drop-shadow(0 -6px 30px rgb(26 21 18 / 0.28));
}
@media (max-width: 799px) {
  .guide-app__media { align-self: end; min-height: 0; }
  .guide-app__media a { display: block; }
  /* Item 7: fix horizontal overflow — the phone image is landscape, so a
     fixed height blew past the viewport. Let it scale to the column. */
  .guide-app__media img {
    position: static; height: auto; width: 100%; max-width: 340px;
    margin-inline: auto;
  }
}

/* ============================================================
   SEP-20 BATCH 18 — location page: street-view click-to-activate,
   CTA padding + mobile centering, app-promo link.
   ============================================================ */

/* (1) Street View: overlay a "click to look around" lock so the pano no
   longer swings whenever the cursor merely crosses it. The iframe ignores
   the pointer until the user clicks; it re-locks when they leave. */
.location-streetview__frame { position: relative; width: 100%; }
.location-streetview__frame iframe { display: block; width: 100%; }
.location-streetview__frame:not(.is-active) iframe { pointer-events: none; }
/* On mobile the frame wraps the iframe exactly (no min-height gap — a taller
   frame left the lock's gradient + pill floating below the map as a "shadow").
   Only stretch to full column height on desktop. */
@media (min-width: 900px) {
  .where-grid .location-streetview__frame { height: 100%; min-height: 420px; }
  .where-grid .location-streetview__frame iframe { height: 100%; }
}
.location-streetview__lock {
  position: absolute; inset: 0; border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-block-end: var(--sp-4);
  /* Slim shadow just behind the pill — a taller gradient read as a "weird
     shadow" under the map, especially on mobile. */
  background: linear-gradient(to top, rgb(26 21 18 / 0.22) 0%, rgb(26 21 18 / 0) 16%);
  transition: opacity 0.2s ease;
}
.location-streetview__frame.is-active .location-streetview__lock { display: none; }
.location-streetview__lock span {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgb(255 255 255 / 0.92); color: var(--ink);
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--r-pill);
  box-shadow: 0 4px 16px rgb(26 21 18 / 0.22);
}
.location-streetview__lock:hover span { background: #fff; }

/* (6) CTA: give the band real padding above it (it sat flush under the app
   promo before) while staying flush with the accreditation band below. */
.location-page .spa-cta,
.gallery-page .spa-cta { padding-block: var(--sp-16) 0; }

/* (8) Mobile: centre the whole CTA (title, copy and buttons). */
@media (max-width: 700px) {
  .location-page .spa-cta__inner,
  .gallery-page .spa-cta__inner { justify-content: center; }
  .location-page .spa-cta__body--center,
  .gallery-page .spa-cta__body--center { text-align: center; align-items: center; max-width: 100%; }
  .location-page .spa-cta__body--center h2,
  .gallery-page .spa-cta__body--center h2 { margin-inline: auto; }
  .location-page .spa-cta__body--center p,
  .gallery-page .spa-cta__body--center p { margin-inline: auto; }
  .location-page .spa-cta__body--center .spa-cta__actions,
  .gallery-page .spa-cta__body--center .spa-cta__actions { justify-content: center; }
}

/* ============================================================
   SEP-20 BATCH 19 — location: map button above map, wider guide
   paragraph, bigger icons, redesigned app promo; gallery hero scrim.
   ============================================================ */

/* (Location 1) "Get Directions" sits beside the intro copy, above the map. */
.map-intro-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.map-intro-row p { margin: 0; max-width: 62ch; }
.map-intro-row .location-map__cta { flex-shrink: 0; }
@media (max-width: 640px) {
  .map-intro-row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* (Location 2) Around-Nannup intro paragraph widened to roughly the width
   of three guide cards (4-col grid, sp-4 gaps). */
@media (min-width: 900px) {
  .sec-head--wide p {
    max-width: calc((100% - 3 * var(--sp-4)) / 4 * 3 + 2 * var(--sp-4));
  }
}

/* (Location 3) Experience Nannup — a proper promotion block: warm gradient
   panel, ochre frame, badge eyebrow, larger headline, floating phone. */
.location-page .guide-app--promo {
  background: linear-gradient(150deg, var(--bone-warm) 0%, var(--bone-deep) 100%);
  border: 1px solid rgb(26 21 18 / 0.12);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.guide-app--promo .guide-app__text .meta {
  display: inline-flex; align-items: center;
  background: rgb(198 138 66 / 0.16); color: var(--ochre);
  padding: 6px 12px; border-radius: var(--r-pill);
  letter-spacing: 0.14em;
}
.guide-app--promo .guide-app__text h3 {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); line-height: 1.1;
  margin-block: var(--sp-1) 0;
}
.guide-app--promo .guide-app__text p { color: var(--ink-mute); font-size: 1rem; }
.guide-app--promo .guide-app__text .btn { margin-block-start: var(--sp-3); }
/* desktop: phone a touch larger, softer, lifted off the panel */
@media (min-width: 800px) {
  .location-page .guide-app__media img {
    height: 330px;
    filter: drop-shadow(-8px 18px 34px rgb(26 21 18 / 0.30));
  }
}
/* mobile: clean stacked card — real bottom padding, phone centred, no bleed */
@media (max-width: 799px) {
  .location-page .guide-app--promo {
    grid-template-columns: 1fr; text-align: center;
    padding: var(--sp-8) var(--sp-6) 0;
    overflow: hidden;
  }
  .guide-app--promo .guide-app__text {
    align-items: center; max-width: none; padding-block: 0 var(--sp-6);
  }
  .guide-app--promo .guide-app__text p { max-width: 42ch; margin-inline: auto; }
  /* Phone spans the full card width (breaks out past the side padding) and
     its bottom sits flush on the card's bottom border. */
  .location-page .guide-app__media {
    align-self: end; margin-inline: calc(-1 * var(--sp-6));
  }
  .location-page .guide-app__media a { display: block; }
  .location-page .guide-app__media img {
    position: static; height: auto; width: 100%; max-width: none;
    margin-block-end: 0; display: block;
    filter: drop-shadow(0 14px 28px rgb(26 21 18 / 0.22));
  }
}

/* (Gallery 1) Hero: drop the full-frame grey wash and lay a dark scrim only
   at the foot, behind the (white) headline + copy. */
.gallery-page .hero__scrim { background: none; }
.gallery-page .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.38) 24%,
    rgb(0 0 0 / 0.14) 50%, rgb(0 0 0 / 0) 72%);
}
.gallery-page .hero--dusk .hero__scrim::after { background: none; }
.gallery-page .hero__body { position: relative; z-index: 3; }
.gallery-page .hero__title,
.gallery-page .hero__truth,
.gallery-page .hero .meta { color: #fff; }

/* ============================================================
   SEP-20 BATCH 20 — accommodation (chalets) page: hero scrim,
   homepage-style headings, Location-style CTA + accreditation.
   ============================================================ */

/* (1) Hero: remove the grey wash, dark scrim only at the foot, white text. */
.chalets-page .hero__scrim { background: none; }
.chalets-page .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.38) 24%,
    rgb(0 0 0 / 0.14) 50%, rgb(0 0 0 / 0) 72%);
}
.chalets-page .hero--dusk .hero__scrim::after { background: none; }
.chalets-page .hero__body { position: relative; z-index: 3; }
.chalets-page .hero__title,
.chalets-page .hero__truth,
.chalets-page .hero .meta { color: #fff; }

/* (5) Headings use the homepage type treatment (Fraunces 300, tight) —
   including the exact homepage h2 SIZE (--t-h2). */
.chalets-page .sec-head h2,
.chalets-page .about__copy h2,
.chalets-page .chalet__title,
.chalets-page .price-card h2 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-h2);
  line-height: 1.04; letter-spacing: -0.03em;
}
.chalets-page .about__copy h2 { margin-block-end: var(--sp-6); }

/* (2/8) CTA replicates the Location page: left-aligned, horizontal scrim,
   padding above. */
.chalets-page .spa-cta__inner { justify-content: flex-start; }
.chalets-page .spa-cta__body--center {
  text-align: left; align-items: flex-start; margin-inline: 0; max-width: 60ch;
}
.chalets-page .spa-cta__body--center h2 { margin-inline: 0; max-width: none; }
.chalets-page .spa-cta__body--center p { margin-inline: 0; max-width: 58ch; }
.chalets-page .spa-cta__body--center .spa-cta__actions { justify-content: flex-start; }
.chalets-page .spa-cta__scrim {
  background: linear-gradient(to right,
    rgb(0 0 0 / 0.56) 0%, rgb(0 0 0 / 0.42) 32%,
    rgb(0 0 0 / 0.18) 60%, rgb(0 0 0 / 0) 85%);
}
.chalets-page .spa-cta { padding-block: var(--sp-8) 0; }

/* inkLine buttons on light (non section--light) sections were inheriting the
   dark-theme cream colour → invisible on the bone background. */
.theme-light .section:not(.section--light) .btn--inkLine {
  color: var(--ink); border-color: rgb(26 21 18 / 0.35);
}
.theme-light .section:not(.section--light) .btn--inkLine:hover {
  background: var(--ink); color: var(--bone); border-color: var(--ink);
}

/* (3/9) Accreditation logos vertically centred, close under the CTA. */
.chalets-page .badge-band__row { padding-block: var(--sp-16); }

/* Mobile: centre the CTA like the other pages. */
@media (max-width: 700px) {
  .chalets-page .spa-cta__inner { justify-content: center; }
  .chalets-page .spa-cta__body--center { text-align: center; align-items: center; max-width: 100%; }
  .chalets-page .spa-cta__body--center h2 { margin-inline: auto; }
  .chalets-page .spa-cta__body--center p { margin-inline: auto; }
  .chalets-page .spa-cta__body--center .spa-cta__actions { justify-content: center; }
}

/* ============================================================
   SEP-20 BATCH 22 — accommodation page: homepage-style About,
   2×2 horizontal chalet cards, amenity icon grid, booking extras.
   ============================================================ */

/* (A1) About section — same treatment as the homepage. */
.chalets-page .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.chalets-page .about__copy .meta { display: block; margin-block-end: var(--sp-3); }
.chalets-page .about__copy h2 { margin-block-end: var(--sp-6); }
.chalets-page .about__copy p { color: var(--ink-mute); margin-block-end: var(--sp-4); }
.chalets-page .about__copy p:last-child { margin-block-end: 0; }
.chalets-page .about__copy strong { color: var(--ink); font-weight: 500; }
/* Rounded-rectangle photo with an offset outline frame (aesthetic outline). */
.chalets-page .about__media { position: relative; }
.chalets-page .about__media img {
  display: block; width: 100%; aspect-ratio: 1.36; /* ~40px taller than 3/2 at this width */
  object-fit: cover; object-position: 50% 50%;
  border-radius: var(--r-lg);
  box-shadow: 0 22px 50px rgb(26 21 18 / 0.14);
}
.chalets-page .about__media::before {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  border: 1px solid rgb(26 21 18 / 0.30);
  border-radius: calc(var(--r-lg) + 8px);
}
/* landscape photo → centre the grid so the shorter media aligns with copy */
.chalets-page .about__grid { align-items: center; }
/* mobile: portrait so the caption card doesn't cover the photo */
@media (max-width: 860px) {
  .chalets-page .about__media img { height: auto; aspect-ratio: 3 / 4; }
}
.chalets-page .about__card {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: #fbf9f4; border-radius: var(--r-md); padding: 16px 18px;
  box-shadow: 0 22px 50px rgb(26 21 18 / 0.14);
}
.chalets-page .about__card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-mute); }
.chalets-page .about__card strong { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) {
  .chalets-page .about__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .chalets-page .about__media { max-width: 460px; margin-inline: auto; }
}

/* (A2) Chalets: 50:50 header columns so the h2 wraps to two lines. */
@media (min-width: 900px) {
  .chalets-page #chalets .sec-head { grid-template-columns: 1fr 1fr; align-items: end; }
}
.chalets-page #chalets .sec-head h2 { max-width: none; }

/* Chalets as a 2×2 grid of horizontal cards (image left, copy right). */
.chalet-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-block-start: var(--sp-8); }
.chalet-h {
  display: grid; grid-template-columns: 42% 1fr;
  background: #fbf9f4; border: 1px solid rgb(26 21 18 / 0.18);
  border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.chalet-h:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgb(26 21 18 / 0.12); border-color: rgb(26 21 18 / 0.18); }
.chalet-h__media { position: relative; min-height: 190px; background: var(--bone-deep); }
.chalet-h__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chalet-h__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.chalet-h__body .meta { display: block; color: var(--ochre); }
.chalet-h__body h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.04; margin: 0; }
.chalet-h__body p { color: var(--ink-mute); font-size: 0.92rem; line-height: 1.5; margin: 0; flex: 1; }
.chalet-h__link {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: var(--sp-2);
  color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
}
.chalet-h:hover .chalet-h__link { color: var(--ochre); }
@media (max-width: 960px) { .chalet-duo { grid-template-columns: 1fr; } }
@media (max-width: 540px) {
  .chalet-h { grid-template-columns: 1fr; }
  .chalet-h__media { min-height: 200px; }
}

/* (A3) Amenities — the six real features as icon tiles with gridlines,
   larger icons, no circular chip behind them. */
.chalets-page .sec-head--solo { margin-block-end: var(--sp-4); }
.amenity-grid {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-block-start: 1px solid rgb(26 21 18 / 0.12);
  border-inline-start: 1px solid rgb(26 21 18 / 0.12);
}
/* every amenity as an icon tile, six across (6 x 3) */
.amenity-grid--all { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .amenity-grid--all { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .amenity-grid--all { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); } }
.amenity {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  border-inline-end: 1px solid rgb(26 21 18 / 0.12);
  border-block-end: 1px solid rgb(26 21 18 / 0.12);
  transition: background 300ms var(--ease);
}
.amenity__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--ochre); transition: color 300ms var(--ease), transform 300ms var(--ease); }
.amenity__icon svg { width: 38px; height: 38px; }
.amenity__label { font-size: 0.92rem; color: var(--ink); line-height: 1.35; max-width: 20ch; transition: color 300ms var(--ease); }
/* colour-changing hover */
.amenity:hover { background: rgb(160 106 44 / 0.07); }
.amenity:hover .amenity__icon { color: var(--ink); transform: translateY(-2px) scale(1.06); }
.amenity:hover .amenity__label { color: var(--ochre); }

/* (A4/8) Direct booking — all pricing in the LEFT column (main price + the
   two add-ons), a clean wide photo on the right. */
/* both columns stretch so the portrait photo matches the left column height */
.chalets-page .price-layout--top { align-items: stretch; }
@media (min-width: 768px) {
  .chalets-page .price-layout--top { grid-template-columns: 1fr 1fr; }
}
.price-extras { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; align-self: stretch; }
.price-extras > img { display: block; width: 100%; height: 100%; min-height: 420px; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 767px) { .price-extras > img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } }
/* evocative caption over the platter photo */
.price-extras__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  padding: var(--sp-12) var(--sp-8) var(--sp-6);
  background: linear-gradient(to top, rgb(20 15 12 / 0.86) 0%, rgb(20 15 12 / 0.6) 42%, rgb(20 15 12 / 0) 100%);
  color: #fff;
}
.price-extras__cap p {
  margin: 0; max-width: 46ch;
  font-family: var(--font-display); font-weight: 300; font-size: 1.12rem; line-height: 1.45; color: #fff;
}
@media (max-width: 767px) { .price-extras__cap { padding: var(--sp-8) var(--sp-6) var(--sp-4); } .price-extras__cap p { font-size: 1rem; } }

/* promotional treatment for the platter photo */
.price-extras__eyebrow {
  display: block; margin-block-end: var(--sp-3);
  font-family: var(--font-text); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.85);
}
.price-extras__badge {
  position: absolute; z-index: 3; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--ochre); color: #fff;
  font-family: var(--font-text); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgb(20 15 12 / 0.35);
}
.price-extras__cue {
  display: inline-flex; align-items: center; gap: 8px; margin-block-start: var(--sp-4);
  font-family: var(--font-text); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
}
.price-extras__cue strong {
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; line-height: 1;
  color: #fff;
}
.price-extras__cue svg { transition: transform 260ms var(--ease); }
.price-extras--promo:hover .price-extras__cue svg { transform: translateX(4px); }
.price-extras--promo:hover img { transform: scale(1.03); }
.price-extras--promo img { transition: transform 700ms var(--ease); }

/* "per night / per couple" aligned to the BOTTOM of the big amount */
.chalets-page .price { align-items: baseline; }

/* add-on prices, stacked under the main price in the left column */
.price-addons { margin: 0 0 var(--sp-6); display: grid; gap: 0; border-block-start: 1px solid rgb(26 21 18 / 0.12); }
.price-addons__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4); border-block-end: 1px solid rgb(26 21 18 / 0.12);
}
.price-addons__row > div { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.price-addons dt { font-family: var(--font-text); font-size: 0.95rem; font-weight: 500; color: var(--ink); letter-spacing: 0; text-transform: none; margin: 0; }
.price-addons .field__help { margin: 0; font-size: 0.75rem; color: var(--ink-mute); }
.price-addons dd { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--ink); margin: 0; }

/* ============================================================
   SEP-20 BATCH 27 — individual chalet pages: "All chalets"
   grid uses the homepage card design (3 up, rounded).
   ============================================================ */
.chalets-page .chalet-grid.others-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
  margin-block-start: 0;
}
.chalets-page .chalet-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid rgb(26 21 18 / 0.10); border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 12px 30px rgb(26 21 18 / 0.08);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.chalets-page .chalet-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgb(26 21 18 / 0.14); }
.chalets-page .chalet-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.chalets-page .chalet-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.chalets-page .chalet-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.2) 26%, rgb(0 0 0 / 0) 52%);
}
.chalets-page .chalet-card:hover .chalet-card__media img { transform: scale(1.04); }
.chalets-page .chalet-card__sub {
  position: absolute; left: 13px; bottom: 11px; z-index: 2; margin: 0;
  font-family: var(--font-text); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.chalets-page .chalet-card__body { display: flex; flex-direction: column; padding: 13px 15px 16px; }
.chalets-page .chalet-card__no { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 400; color: var(--ink); margin-block-end: 3px; }
.chalets-page .chalet-card__what { font-size: 0.82rem; color: var(--ink-mute); line-height: 1.45; min-height: 3.6em; }
.chalets-page .chalet-card__link {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3); border-block-start: 1px solid rgb(26 21 18 / 0.14);
  font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); align-self: stretch;
}
.chalets-page .chalet-card__link svg { transition: transform 240ms var(--ease); }
.chalets-page .chalet-card:hover .chalet-card__link { color: var(--ochre); }
.chalets-page .chalet-card:hover .chalet-card__link svg { transform: translateX(3px); }
.chalets-page .others-grid + .section-cta { margin-block-start: var(--sp-8); }
@media (max-width: 760px) { .chalets-page .chalet-grid.others-grid { grid-template-columns: 1fr; } }

/* ===== SEP-20 BATCH 29 — Wine & Cheese Platter flyer (prices add-on) ===== */
.price-extras--flyer { align-self: center; height: auto; box-shadow: 0 12px 30px rgba(20,15,10,.09); border-radius: var(--r-lg); background: #f0ece3; }
.price-extras--flyer > img { height: auto; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 700ms var(--ease); }
.price-extras--flyer:hover > img { transform: scale(1.02); }
@media (max-width: 767px) { .price-extras--flyer > img { aspect-ratio: 1 / 1; } }

/* ============================================================
   SEP-20 BATCH 30 — CONTACT PAGE (hero, enquire, reviews, CTA, badges)
   ============================================================ */
/* (1) Hero: remove green scrim, black fade behind the text, white text */
.contact-page .hero__scrim { background: none; }
.contact-page .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.38) 24%,
    rgb(0 0 0 / 0.14) 50%, rgb(0 0 0 / 0) 72%);
}
.contact-page .hero--dusk .hero__scrim::after { background: none; }
.contact-page .hero__body { position: relative; z-index: 3; }
.contact-page .hero__title,
.contact-page .hero__truth,
.contact-page .hero .meta { color: #fff; }

/* (2) Enquire — scannable contact panel with icon rows */
.contact-panel { display: grid; gap: 0; background: rgb(255 255 255 / 0.55);
  border: 1px solid rgb(26 21 18 / 0.12); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-8); }
.contact-row { display: block;
  padding-block: var(--sp-4); border-block-end: 1px solid rgb(26 21 18 / 0.10); }
.contact-row:last-child { border-block-end: 0; }
.contact-row__label { font-size: 0.70rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); display: block; margin-block-end: 4px; }
.contact-row__value { font-size: 1.04rem; color: var(--ink); line-height: 1.4; }
.contact-row__value a { color: var(--ochre-lift); }
.contact-row__note { font-size: 0.84rem; color: var(--ink-mute); margin-block-start: 5px; line-height: 1.5; }
@media (max-width: 520px) { .contact-panel { padding-inline: var(--sp-6); } }

/* (3) Reviews — homepage-style auto-scroll marquee + the two review buttons */
.contact-page .reviews-carousel { overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.contact-page .reviews-track { display: flex; gap: var(--sp-6); width: max-content;
  animation: reviews-marquee 60s linear infinite; }
.contact-page .reviews-carousel:hover .reviews-track { animation-play-state: paused; }
.contact-page .review-card { flex: 0 0 clamp(280px, 32vw, 380px); margin: 0;
  background: rgb(255 255 255 / 0.6); border: 1px solid rgb(26 21 18 / 0.12);
  border-radius: var(--r-md); padding: 28px 30px; }
.contact-page .review-card blockquote { margin: 0; font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem; line-height: 1.55; color: var(--ink); font-weight: 300; }
.contact-page .review-card figcaption { margin-block-start: 18px; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.contact-page .reviews-cta { display: flex; gap: var(--sp-4); flex-wrap: wrap;
  justify-content: center; margin-block-start: var(--sp-8); }
@keyframes reviews-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .contact-page .reviews-track { animation: none; overflow-x: auto; } }

/* (5) CTA — left-aligned, matching the other inner pages */
.contact-page .spa-cta__inner { justify-content: flex-start; }
.contact-page .spa-cta__body--center { text-align: left; align-items: flex-start; margin-inline: 0; max-width: 60ch; }
.contact-page .spa-cta__body--center h2 { margin-inline: 0; max-width: none; }
.contact-page .spa-cta__body--center p { margin-inline: 0; max-width: 58ch; }
.contact-page .spa-cta__body--center .spa-cta__actions { justify-content: flex-start; }
.contact-page .spa-cta__scrim {
  background: linear-gradient(to right,
    rgb(0 0 0 / 0.56) 0%, rgb(0 0 0 / 0.42) 32%,
    rgb(0 0 0 / 0.18) 60%, rgb(0 0 0 / 0) 85%);
}
.contact-page .spa-cta { padding-block: var(--sp-16) 0; }

/* (6) Accreditation — balanced symmetric spacing (64 / 64) */
.contact-page .badge-band__row { padding-block: var(--sp-16); }

@media (max-width: 700px) {
  .contact-page .spa-cta__inner { justify-content: center; }
  .contact-page .spa-cta__body--center { text-align: center; align-items: center; max-width: 100%; }
  .contact-page .spa-cta__body--center h2 { margin-inline: auto; }
  .contact-page .spa-cta__body--center p { margin-inline: auto; }
  .contact-page .spa-cta__body--center .spa-cta__actions { justify-content: center; }
}

/* ============================================================
   SEP-20 BATCH 31 — EXPLORE (local-attractions) PAGE
   ============================================================ */
/* (1) Hero: black bottom scrim, white text (matches gallery/location/contact) */
.explore-page .hero__scrim { background: none; }
.explore-page .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.58) 0%, rgb(0 0 0 / 0.38) 24%,
    rgb(0 0 0 / 0.14) 50%, rgb(0 0 0 / 0) 72%);
}
.explore-page .hero--dusk .hero__scrim::after { background: none; }
.explore-page .hero__body { position: relative; z-index: 3; }
.explore-page .hero__title,
.explore-page .hero__truth,
.explore-page .hero .meta { color: #fff; }

/* (2) intro under the H2 — trim the space beneath the sec-head */
.explore-page .sec-head--solo { margin-block-end: var(--sp-6); }

/* (3) Cards: real rounded cards — white, soft shadow, hover lift */
.explore-page .nearby-item {
  background: #fff; border: 1px solid rgb(26 21 18 / 0.12);
  border-radius: var(--r-md); overflow: hidden; box-shadow: 0 10px 26px rgb(26 21 18 / 0.07);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
  padding-block-end: var(--sp-2);
}
.explore-page .nearby-item:hover {
  transform: translateY(-4px); box-shadow: 0 18px 40px rgb(26 21 18 / 0.14);
  border-color: rgb(26 21 18 / 0.16);
}
.explore-page .nearby-item > .media--wide { border-radius: 0; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.explore-page .nearby-item > .media--wide img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.explore-page .nearby-item:hover > .media--wide img { transform: scale(1.04); }
.explore-page .nearby-item h3 { font-size: 1.14rem; margin: var(--sp-4) var(--sp-6) var(--sp-2); }
.explore-page .nearby-item .media--wide + h3 { margin-block-start: var(--sp-4); }
.explore-page .nearby-item p { margin: 0 var(--sp-6) var(--sp-4); }

/* (5) CTA — left-aligned like the other inner pages */
.explore-page .spa-cta__inner { justify-content: flex-start; }
.explore-page .spa-cta__body--center { text-align: left; align-items: flex-start; margin-inline: 0; max-width: 60ch; }
.explore-page .spa-cta__body--center h2 { margin-inline: 0; max-width: none; }
.explore-page .spa-cta__body--center p { margin-inline: 0; max-width: 58ch; }
.explore-page .spa-cta__body--center .spa-cta__actions { justify-content: flex-start; }
.explore-page .spa-cta__scrim {
  background: linear-gradient(to right,
    rgb(0 0 0 / 0.56) 0%, rgb(0 0 0 / 0.42) 32%,
    rgb(0 0 0 / 0.18) 60%, rgb(0 0 0 / 0) 85%);
}
.explore-page .spa-cta { padding-block: var(--sp-12) 0; }

/* (6) Accreditation — balanced symmetric spacing */
.explore-page .badge-band__row { padding-block: var(--sp-16); }

@media (max-width: 700px) {
  .explore-page .spa-cta__inner { justify-content: center; }
  .explore-page .spa-cta__body--center { text-align: center; align-items: center; max-width: 100%; }
  .explore-page .spa-cta__body--center h2 { margin-inline: auto; }
  .explore-page .spa-cta__body--center p { margin-inline: auto; }
  .explore-page .spa-cta__body--center .spa-cta__actions { justify-content: center; }
}

/* ============================================================
   SEP-20 BATCH 32 — CONTACT enquire tweaks
   ============================================================ */
/* (1) remove the big gap under the enquire H2/sec-head */
.contact-page #enquire .sec-head { margin-block-end: var(--sp-4); }
/* (2) tighten the gap between the two enquire columns */
@media (min-width: 900px) { .contact-page #enquire .split { gap: var(--sp-8); } }