/* ============================================================
   Beyonderup Falls — HOMEPAGE PREMIUM LAYER (v3)
   Loaded AFTER main.css + light.css, scoped to `body.page-home`.
   ============================================================ */

.page-home {
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow-card: 0 22px 50px rgb(26 21 18 / 0.14);
  --shadow-soft: 0 12px 30px rgb(26 21 18 / 0.08);
}

/* ---------- Header: transparent over a full-bleed hero with a DARK scrim, solid on scroll ---------- */
.page-home .header { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-home .header::before {
  display: block; opacity: 1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 100%);
  height: 175px;
}
.page-home .header.is-scrolled { background: var(--bone-warm); box-shadow: 0 1px 0 rgb(26 21 18 / 0.08); }
.page-home .header.is-scrolled::before { opacity: 0; }
/* item 2 — sit the header a little higher (tighter main-bar padding) */
.page-home .header__main { padding-block: var(--sp-1); }

/* align the primary nav (and CTA) to the right, brand stays left */
@media (min-width: 960px) { .page-home .header__nav { margin-inline-start: auto; } }

/* logo: WHITE knockout over the dark hero, colour bordered logo once scrolled
   onto the bone bar. Only one is shown at a time. filter:none defeats
   light.css's brightness(0). */
.page-home .header__brand img { display: block; filter: none !important; width: 200px; }
.page-home .header__brand .brand-colour { display: none; }
.page-home .header.is-scrolled .header__brand .brand-white { display: none; }
.page-home .header.is-scrolled .header__brand .brand-colour { display: block; }
.page-home .header.is-scrolled .header__brand img { width: 168px; }
@media (max-width: 719px) { .page-home .header__brand img { width: 158px; } }

/* nav: WHITE over the hero, ink on scroll — the shared uppercase label style */
/* matched to the reference nav exactly (Inter 10px / 500 / 1.4px / uppercase /
   white-70%), sized 1px larger per request → 11px, letter-spacing scaled to keep
   the same visual tracking (0.14px per px). */
.page-home .header__link {
  font-family: var(--font-text); color: rgb(255 255 255 / 0.7); opacity: 1;
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 12px; font-weight: 500;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.35);
}
/* item 3 — tighten the gaps between nav items a touch */
@media (min-width: 960px) { .page-home .header__nav { gap: 14px; } }
@media (min-width: 1200px) { .page-home .header__nav { gap: 18px; } }
.page-home .header__link:hover { opacity: 1; color: #fff; }
.page-home .header__link[aria-current="page"] { opacity: 1; color: var(--ochre-lift); border-block-end-color: transparent; }
.page-home .has-menu__toggle,
.page-home .nav-toggle { color: #fff; }
.page-home .topbar a { color: rgb(255 255 255 / 0.85); }
.page-home .topbar a:hover { color: #fff; }
.page-home .header.is-scrolled .header__link { color: var(--ink); text-shadow: none; opacity: 0.82; }
.page-home .header.is-scrolled .header__link:hover,
.page-home .header.is-scrolled .header__link[aria-current="page"] { color: var(--ochre); opacity: 1; }
.page-home .header.is-scrolled .header__link[aria-current="page"] { border-block-end-color: transparent; }
.page-home .header.is-scrolled .has-menu__toggle,
.page-home .header.is-scrolled .nav-toggle { color: var(--ink); }
.page-home .header.is-scrolled .topbar a { color: var(--ink-mute); }

/* shared eyebrow label styling to match the nav (item 1) */
.page-home .sec-head .meta,
.page-home .info-strip__label,
.page-home .reviews__head .meta { letter-spacing: 0.14em; }

/* pill controls */
.page-home .btn { border-radius: var(--r-pill); letter-spacing: 0.06em; }
.page-home .header__cta { border-radius: var(--r-pill); }
.page-home .header:not(.is-scrolled) .header__cta,
.page-home .header.is-scrolled .header__cta {
  background: var(--ochre); color: #fff; border-color: var(--ochre); font-weight: 600;
}
.page-home .header:not(.is-scrolled) .header__cta:hover,
.page-home .header.is-scrolled .header__cta:hover {
  background: var(--ochre-lift); color: #fff; border-color: var(--ochre-lift);
}

/* ---------- Tighten spacing under every heading block (item 8) ---------- */
.page-home .sec-head { margin-block-end: var(--sp-8); }
.page-home .falls__layout .sec-head { margin-block-end: var(--sp-6); }
.page-home .sec-head .meta { letter-spacing: 0.16em; }

/* ============================================================
   HERO — full-bleed slider, dark bottom overlay, small promise card
   ============================================================ */
.page-home .hero { min-height: 100svh; }
.page-home .hero::after { display: none; }
.page-home .hero__media { overflow: hidden; }
.page-home .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms ease; will-change: opacity; }
.page-home .hero__slide.is-active { opacity: 1; }
.page-home .hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }

/* item 1a — stronger dark scrim from the very top down to under the nav so the
   white logo + nav links stay legible over any bright sky/foliage. */
.page-home .header::before {
  height: 260%;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0.82) 0%, rgb(0 0 0 / 0.62) 38%, rgb(0 0 0 / 0.28) 70%, rgb(0 0 0 / 0) 100%);
}

/* item 1b — dark overlay from the hero bottom rising to the h1 so the headline,
   chips and promise card read cleanly. Higher specificity than the light.css
   dusk scrim so this wins. */
.page-home .hero--dusk .hero__scrim::before {
  background: linear-gradient(to top,
    rgb(0 0 0 / 0.60) 0%, rgb(0 0 0 / 0.42) 26%, rgb(0 0 0 / 0.20) 48%, rgb(0 0 0 / 0.04) 68%, rgb(0 0 0 / 0) 84%);
}
.page-home .hero__scrim::after { background: radial-gradient(150% 100% at 50% 60%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.18) 100%); }

.page-home .hero__body { position: relative; z-index: 3; padding-block-end: var(--sp-8); }
.page-home .hero__title { max-width: 16ch; }

.page-home .hero__chips { gap: 8px; margin-block: var(--sp-6) 0; }
.page-home .hero__chips li {
  padding: 7px 15px; border: 1px solid rgb(255 255 255 / 0.28); border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.10); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  font-size: 0.76rem; color: #fff; letter-spacing: 0.02em;
}
.page-home .hero__chips li::after { display: none; }

/* promise card — small, matched to reference, inside the hero (no overflow) */
.page-home .hero__promise {
  position: absolute; z-index: 4; right: 0; bottom: var(--sp-8);
  width: min(264px, 26vw); background: #fbf9f4; color: var(--ink);
  border-radius: var(--r-md); padding: 15px 17px; box-shadow: var(--shadow-card);
}
.page-home .hero__promise .meta { color: var(--ink-mute); letter-spacing: 0.18em; font-size: 0.62rem; }
.page-home .hero__promise p { margin: 8px 0 0; color: var(--ink); font-size: 0.8rem; line-height: 1.45; }
.page-home .hero__promise .hero__proof {
  display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgb(26 21 18 / 0.14);
}
.page-home .hero__avatars { display: inline-flex; }
.page-home .hero__avatars i {
  width: 24px; height: 24px; border-radius: 50%; background: var(--av, var(--bone-deep));
  border: 2px solid #fbf9f4; margin-inline-start: -8px; display: inline-flex;
  align-items: center; justify-content: center; font-style: normal; color: #fff;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0; font-family: var(--font-text);
}
.page-home .hero__avatars i:first-child { margin-inline-start: 0; }
.page-home .hero__proof span { font-size: 0.74rem; color: var(--ink-mute); }

@media (max-width: 980px) {
  .page-home .hero__promise {
    position: static; width: auto; margin-top: var(--sp-6); padding: 22px 24px;
  }
}

/* ============================================================
   INFO STRIP
   ============================================================ */
.page-home .info-strip { background: var(--bone-warm); border-block: 1px solid rgb(26 21 18 / 0.10); padding-block: var(--sp-4); }
.page-home .info-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--sp-4) var(--sp-4); }
.page-home .info-strip__cell { padding: 6px 28px; border-inline-start: 1px solid rgb(26 21 18 / 0.12); }
.page-home .info-strip__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.page-home .info-strip__label { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-block-end: 10px; }
.page-home .info-strip__value { font-size: 1.08rem; color: var(--ink); line-height: 1.35; }
@media (max-width: 760px) {
  .page-home .info-strip__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) 0; }
  .page-home .info-strip__cell:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 440px) {
  .page-home .info-strip__grid { grid-template-columns: 1fr; }
  .page-home .info-strip__cell { border-inline-start: 0; padding-inline-start: 0; }
}

/* ============================================================
   CHALETS — lead+bullets in the sec-head, then a 4-up room listing
   ============================================================ */
/* two-column layout: all text on the left, 2x2 card grid on the right */
.page-home .chalets__layout {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-12); align-items: start;
}
.page-home .chalets__intro { position: sticky; top: var(--sp-12); }
.page-home .chalets__intro .meta { display: block; margin-block-end: var(--sp-3); }
.page-home .chalets__intro h2 { margin-block-end: var(--sp-4); }
.page-home .chalet-intro__lead { margin-block-end: var(--sp-4); color: var(--ink-mute); }
.page-home .chalet-bullets { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.page-home .chalet-bullets li { position: relative; padding-inline-start: 22px; padding-block: 7px 0; color: var(--ink-mute); font-size: 1rem; line-height: 1.5; }
.page-home .chalet-bullets li::before { content: "\2022"; position: absolute; left: 3px; top: 6px; color: var(--ochre); font-size: 1.05rem; line-height: 1.5; }
.page-home .section-cta--start { justify-content: flex-start; text-align: left; margin-block-start: 0; }

/* 2x2 card grid, roomier gap, shorter white caption */
.page-home .chalet-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.page-home .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: var(--shadow-soft); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.page-home .chalet-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.page-home .chalet-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.page-home .chalet-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.page-home .chalet-card:hover .chalet-card__media img { transform: scale(1.04); }
.page-home .chalet-card__body { display: block; padding: 13px 17px 15px; }
.page-home .chalet-card__no { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 400; color: var(--ink); margin-block-end: 4px; }
.page-home .chalet-card__what { display: block; font-size: 0.86rem; color: var(--ink-mute); line-height: 1.45; }
@media (max-width: 900px) {
  .page-home .chalets__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .page-home .chalets__intro { position: static; }
}
@media (max-width: 460px) { .page-home .chalet-cards { grid-template-columns: 1fr; } }

/* ============================================================
   FALLS — rounded, taller portrait image + white caption chip
   ============================================================ */
.page-home .falls__media { position: relative; background: transparent; }
.page-home .falls__media img { border-radius: var(--r-lg); aspect-ratio: 4 / 5; object-fit: cover; }
.page-home .falls__cap {
  position: absolute; z-index: 3; left: 18px; bottom: 18px; max-width: 70%;
  background: #fbf9f4; color: var(--ink); border-radius: 18px;
  padding: 11px 16px; font-size: 0.82rem; line-height: 1.35; box-shadow: var(--shadow-soft);
  display: none;
}
.page-home .falls__cap.is-active { display: block; }
@media (max-width: 1024px) { .page-home .falls__media img { aspect-ratio: 16 / 11; } }

/* segmented season control (reference) */
.page-home .season-switch {
  display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgb(26 21 18 / 0.16);
  border-radius: var(--r-pill); background: rgb(255 255 255 / 0.5);
}
.page-home .season-switch__btn {
  min-height: 42px; border: 0; border-radius: var(--r-pill); padding: 8px 22px; font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); background: transparent; cursor: pointer; transition: background-color 200ms, color 200ms;
}
.page-home .season-switch__btn[aria-selected="true"] { background: var(--ink); color: var(--bone); }
.page-home .season-note { color: var(--ink-mute); }

/* ============================================================
   GALLERY / HOST — rounded
   ============================================================ */
.page-home .gallery--mosaic img,
.page-home .gallery--mosaic figure { border-radius: var(--r-md); }
.page-home .gallery--mosaic figure { overflow: hidden; }

/* feature gallery: one large + two stacked (top), four across (bottom) */
.page-home .gallery--feature {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--sp-4);
}
.page-home .gallery--feature figure {
  position: relative; overflow: hidden; margin: 0; border-radius: var(--r-md);
}
.page-home .gallery--feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-home .gallery--feature .gallery__hero { grid-column: 1 / 4; grid-row: 1 / 3; }
.page-home .gallery--feature figure:nth-child(2) { grid-column: 4 / 5; grid-row: 1 / 2; }
.page-home .gallery--feature figure:nth-child(3) { grid-column: 4 / 5; grid-row: 2 / 3; }
.page-home .gallery--feature figure:nth-child(4) { grid-column: 1 / 2; grid-row: 3 / 4; }
.page-home .gallery--feature figure:nth-child(5) { grid-column: 2 / 3; grid-row: 3 / 4; }
.page-home .gallery--feature figure:nth-child(6) { grid-column: 3 / 4; grid-row: 3 / 4; }
.page-home .gallery--feature figure:nth-child(7) { grid-column: 4 / 5; grid-row: 3 / 4; }
@media (max-width: 760px) {
  .page-home .gallery--feature { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .page-home .gallery--feature figure:not(.gallery__hero) { grid-column: auto !important; grid-row: auto !important; }
  .page-home .gallery--feature .gallery__hero { grid-column: 1 / 3 !important; grid-row: span 2 !important; }
}
.page-home .hosts__media { background: transparent; }
.page-home .hosts__media img { border-radius: var(--r-lg); }

/* ============================================================
   REVIEWS — auto-scroll carousel, light (not bold) quote text
   ============================================================ */
.page-home .reviews__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  border-block-start: 1px solid rgb(26 21 18 / 0.16); padding-block-start: var(--sp-6); margin-block-end: var(--sp-8);
}
.page-home .reviews__head .meta { letter-spacing: 0.16em; }
.page-home .reviews__score { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.page-home .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); }
.page-home .reviews-track { display: flex; gap: var(--sp-6); width: max-content; animation: reviews-marquee 60s linear infinite; }
.page-home .reviews-carousel:hover .reviews-track { animation-play-state: paused; }
.page-home .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;
}
/* GLOBAL — every section heading shares one exact type treatment */
.page-home .sec-head h2,
.page-home .about__copy h2,
.page-home .reviews__title,
.page-home .spa-cta__body h2,
.page-home .falls__layout h2 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--t-h2);
  line-height: 1.04; letter-spacing: -0.03em; margin: 0;
}
.page-home .reviews__title { max-width: 20ch; margin-block-end: var(--sp-8); }
.page-home .review-card blockquote {
  margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; line-height: 1.55; color: var(--ink); font-weight: 300;
}
.page-home .review-card figcaption { margin-block-start: 18px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
@keyframes reviews-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .page-home .reviews-track { animation: none; overflow-x: auto; } }

/* ============================================================
   EXPLORE — slide cards fully rounded (top image + bottom text)
   ============================================================ */
.page-home .slide {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgb(26 21 18 / 0.12);
  background: rgb(255 255 255 / 0.5); padding-block-end: var(--sp-4);
}
.page-home .slide__media { border-radius: 0; overflow: hidden; margin-block-end: var(--sp-4); }
.page-home .slide h3 { padding-inline: var(--sp-4); }
.page-home .slide p { padding-inline: var(--sp-4); }

/* explore slider: dark-brown card titles, clamped copy for even cards
   (looping arrows + auto-advance handled in main.js via data-slider-loop) */
.page-home #attractions .slide h3 { color: #5a3d1c; }
.page-home #attractions .slide p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Dark footer uses the white logo asset (see light.css BATCH 21). */
.page-home .footer__brand img { filter: none !important; opacity: 0.95; }

/* ============================================================
   FOOTER — rounded social icons + newsletter (item 12)
   ============================================================ */
.page-home .social a { border-radius: 50%; }
.page-home .footer-news__row { gap: 8px; }
.page-home .footer-news__row input { border-radius: var(--r-pill); }
.page-home .footer-news__row button { border-radius: var(--r-pill); }

/* ============================================================
   BADGES — tidy, consistent accreditation row (item 13)
   ============================================================ */
.page-home .badges {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-8); padding-block: var(--sp-4);
}
.page-home .badges img {
  height: 68px; width: auto; opacity: 0.85; transition: opacity 200ms var(--ease);
}
.page-home .badges img:hover { opacity: 1; }
.page-home .badges .badges__softub { height: 46px; }

/* ============================================================
   SEP-17 BATCH — eyebrows/nav/buttons/availability/footer
   ============================================================ */

/* item 3 — every section eyebrow matches the nav exactly */
.page-home .meta {
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* keep the promise-card + hero eyebrows a touch smaller so they still fit */
.page-home .hero__promise .meta { font-size: 11px; }

/* item 2 — "Book direct": a frosted-glass pill, nav font style/size, external
   icon. Colour adapts on scroll: light glass over the hero, ink glass on the
   bone bar. */
.page-home .header__cta,
.page-home .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);
}
.page-home .header:not(.is-scrolled) .header__cta:hover {
  background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.7); color: #fff;
}
.page-home .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);
}
.page-home .header.is-scrolled .header__cta:hover {
  background: var(--ochre); border-color: var(--ochre); color: #fff;
}
.page-home .header__cta-ext { opacity: 0.75; flex-shrink: 0; }

/* item 8 — all buttons: the smaller nav-sized type, slightly softer label */
.page-home .btn {
  font-size: 12px; letter-spacing: 0.1em; font-weight: 500;
}
.page-home .btn--line,
.page-home .btn--inkLine { color: rgb(26 21 18 / 0.72); }
.page-home .btn--solid { color: rgb(255 255 255 / 0.88); }

/* item 7 — chalet bullet list on one consistent size */
.page-home .chalet-bullets li { font-size: 1rem; }

/* item 10 — availability: keep the boss's exact widget, add rounded corners */
.page-home .availability-test { border-radius: var(--r-lg, 18px); }
.page-home .availability-test__scroll { border-radius: 0; }
.page-home .booking-strip { border-radius: var(--r-lg, 18px); }
.page-home .booking-strip input,
.page-home .booking-strip select { border-radius: var(--r-md, 12px); }
.page-home .booking-strip__submit { border-radius: var(--r-pill); }
.page-home .availability-test__table .availability-test__room:first-child { border-top-left-radius: var(--r-lg, 18px); }

/* item 11 — local attractions: 1px-smaller type */
.page-home #attractions .slide h3 { font-size: 1.14rem; font-weight: 500; }
.page-home #attractions .slide p { font-size: 0.86rem; }
/* item 5/8 — explore left/right scroll buttons: rounded corners */
.page-home .slider__nav { border-radius: var(--r-md); }

/* item 13 — spa CTA: airier, two-line copy */
.page-home .spa-cta__body { display: flex; flex-direction: column; }
.page-home .spa-cta__body .meta { margin-block-end: var(--sp-3); }
.page-home .spa-cta__body h2 { margin-block-end: var(--sp-4); }
.page-home .spa-cta__actions { margin-block-start: var(--sp-6); }
/* Match the Location-page CTA: left-aligned block + horizontal scrim
   (the padding above the band is set with the other .spa-cta padding rules). */
.page-home .spa-cta__inner { justify-content: flex-start; }
.page-home .spa-cta__body--center {
  text-align: left; align-items: flex-start; margin-inline: 0; max-width: 60ch;
  padding-block: calc(var(--sp-12) - 10px);
}
.page-home .spa-cta__body--center h2 { margin-inline: 0; max-width: none; }
.page-home .spa-cta__body--center p { margin-inline: 0; max-width: 58ch; }
.page-home .spa-cta__body--center .spa-cta__actions { justify-content: flex-start; }
.page-home .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%);
}

/* item 8 — accreditation badges: no band of their own; the logos float on the
   page tone, centred in the breathing space between the CTA and the footer.
   Greyscale by default, full colour on hover. */
.page-home .badge-band { background: transparent; }
.page-home .badge-band__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2.5rem, 8vw, 5rem); padding-block: var(--sp-16);
}
/* CTA band: padding ABOVE (like the Location page), flush below so the
   accreditation logos still sit centred between the card and the footer. */
.page-home .spa-cta { padding-block: var(--sp-8) 0; }
.page-home .badge-band img {
  height: 58px; width: auto;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 220ms var(--ease), opacity 220ms var(--ease);
}
.page-home .badge-band img:hover { filter: grayscale(0); opacity: 1; }
.page-home .badge-band__softub { height: 40px; }
/* item 14 — footer: uniform size across headings, copy and links (dark footer
   colours come from light.css BATCH 21). */
.page-home .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);
}
.page-home .footer p,
.page-home .footer li,
.page-home .footer a,
.page-home .footer__col--links a,
.page-home .footer-news__form { font-size: 0.82rem; color: rgb(240 236 227 / 0.66); }
.page-home .footer a:hover { color: #fff; }

/* item 9 — Your hosts: tighter column gap, consistent with the rest */
@media (min-width: 900px) {
  .page-home .hosts__layout { gap: var(--sp-12); }
}


/* item 7 — availability "Book Direct" submit: rounded corners (pill) */
.page-home .booking-strip__submit,
.page-home .booking-strip .btn--solid { border-radius: var(--r-pill); }

/* ============================================================
   SEP-17 BATCH 4 — hero counter, smaller H1, chalet slider
   ============================================================ */

/* hero headline fixed at 70px (scales down on small screens) */
.page-home .hero__title { font-size: 70px; }
@media (max-width: 600px) { .page-home .hero__title { font-size: clamp(2.4rem, 10vw, 70px); } }

/* item 4 — hero slide indicator: a row of pill dots (JS-generated), bottom-right */
.page-home .hero__dots {
  position: absolute; z-index: 4; right: 0; bottom: var(--sp-8);
  display: flex; align-items: center; gap: 10px;
}
.page-home .hero__dot {
  width: 9px; height: 9px; padding: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgb(255 255 255 / 0.35); border: 0;
  transition: width 320ms var(--ease), background-color 320ms var(--ease);
}
.page-home .hero__dot:hover { background: rgb(255 255 255 / 0.6); }
.page-home .hero__dot.is-active { width: 30px; background: #fff; }
@media (max-width: 980px) {
  .page-home .hero__dots { position: static; margin-top: var(--sp-6); }
}

/* ============================================================
   SEP-19 BATCH — hero eyebrow/lead/buttons, 2-col About + arch
   ============================================================ */

/* hero: eyebrow, description and action buttons (chips removed) */
.page-home .hero__eyebrow { display: block; margin-block-end: var(--sp-3); }
.page-home .hero__title { margin-block-end: var(--sp-4); }
.page-home .hero__lead {
  max-width: 48ch; margin-block: 0 var(--sp-4); color: rgb(255 255 255 / 0.92);
  font-size: 1.05rem; line-height: 1.55; text-shadow: 0 1px 14px rgb(0 0 0 / 0.5);
}
.page-home .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* primary hero button: solid ochre — legible over every hero slide */
.page-home .hero__actions .btn--solid,
.theme-light .hero__actions .btn--solid {
  background: var(--ochre); border-color: var(--ochre); color: #fff;
}
.page-home .hero__actions .btn--solid:hover,
.theme-light .hero__actions .btn--solid:hover { background: var(--ochre-lift); border-color: var(--ochre-lift); color: #fff; }
.page-home .hero__actions .btn--line { color: #fff; border-color: rgb(255 255 255 / 0.6); }
.page-home .hero__actions .btn--line:hover { background: rgb(255 255 255 / 0.14); border-color: #fff; color: #fff; }
/* keep the dots clear of the in-flow buttons on desktop */
@media (min-width: 981px) { .page-home .hero__dots { bottom: var(--sp-12); } }

/* About: 50/50 copy + arched photo, facts strip beneath */
.page-home .about__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center;
}
.page-home .about__copy .meta { display: block; margin-block-end: var(--sp-3); }
.page-home .about__copy h2 { margin-block-end: var(--sp-6); }
.page-home .about__copy p { color: var(--ink-mute); margin-block-end: var(--sp-4); }
.page-home .about__copy p:last-child { margin-block-end: 0; }
.page-home .about__copy strong { color: var(--ink); font-weight: 500; }

/* fully-arched photo (semicircular top), with a half-drawn outline that traces
   the arch and fades away down the sides for an editorial feel */
.page-home .about__media { position: relative; }
.page-home .about__media img {
  display: block; width: 100%; aspect-ratio: 0.89; object-fit: cover; object-position: 50% 50%;
  border-radius: 50% 50% var(--r-sm) var(--r-sm) / 44.5% 44.5% 3% 3%;
  box-shadow: var(--shadow-card);
}
.page-home .about__media::before {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  border: 1px solid rgb(26 21 18 / 0.35);
  border-radius: 50% 50% var(--r-sm) var(--r-sm) / 44.5% 44.5% 3% 3%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 72%);
}
/* white card over the foot of the arched photo — carries the closing line so the
   copy column is shorter and the section reads less tall */
.page-home .about__card {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: #fbf9f4; border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-card);
}
.page-home .about__card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-mute); }
.page-home .about__card strong { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) {
  .page-home .about__grid { grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; }
  .page-home .about__media { max-width: 460px; margin-inline: auto; }
  .page-home .about__media img { height: auto; aspect-ratio: 0.89; }
}

/* chalets as a 4-column grid (slider removed) */
.page-home .chalet-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-block-start: var(--sp-8);
}
.page-home .chalet-grid .chalet-card { height: 100%; border-radius: var(--r-md); }
/* taller, square images */
.page-home .chalet-grid .chalet-card__media { position: relative; aspect-ratio: 1 / 1; }
.page-home .chalet-grid .chalet-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  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%);
}
.page-home .chalet-grid .chalet-card__body { display: flex; flex-direction: column; padding: 13px 15px 16px; }
/* subtitle sits inside the image over the scrim */
.page-home .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);
}
.page-home .chalet-grid .chalet-card__no { font-size: 1.05rem; margin-block-end: 3px; }
.page-home .chalet-grid .chalet-card__what { font-size: 0.82rem; line-height: 1.45; min-height: 3.6em; }
.page-home .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: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; align-self: stretch;
}
.page-home .chalet-card__link svg { transition: transform 240ms var(--ease); }
.page-home .chalet-card:hover .chalet-card__link { color: var(--ochre); }
.page-home .chalet-card:hover .chalet-card__link svg { transform: translateX(3px); }
@media (max-width: 900px) { .page-home .chalet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .page-home .chalet-grid { grid-template-columns: 1fr; } }

/* the falls: make the photo column wider than the text column */
@media (min-width: 1024px) { .page-home .falls__layout { grid-template-columns: 1.35fr 1fr; } }

/* item 4 — pull the card slider up close under the bullet list */
.page-home #chalets .sec-head { margin-block-end: var(--sp-4); }
.page-home .chalet-slider { margin-block-start: 0; }
/* room for the card shadow so it isn't clipped by the scroll container overflow */
.page-home .chalet-slider__track { grid-auto-columns: 80%; gap: var(--sp-6); padding: 6px 6px 34px; }
@media (min-width: 640px) { .page-home .chalet-slider__track { grid-auto-columns: 47%; } }
@media (min-width: 1024px) { .page-home .chalet-slider__track { grid-auto-columns: calc((100% - 2 * var(--sp-6)) / 3); } }
.page-home .chalet-slider .chalet-card { scroll-snap-align: start; height: 100%; }
/* item 5 — shorter image, taller description block */
.page-home .chalet-slider .chalet-card__media { aspect-ratio: 1 / 1; }
.page-home .chalet-slider .chalet-card__body { padding: 18px 18px 24px; min-height: 132px; }
.page-home .chalet-slider .chalet-card__no { font-size: 1.2rem; margin-block-end: 7px; }
.page-home .chalet-slider .chalet-card__what { font-size: 0.9rem; line-height: 1.5; }

/* ============================================================
   SEP-19 BATCH 7 — hero glass btn, explore 3.5 cards + visible
   button, mobile reviews/gallery fixes
   ============================================================ */
/* explore "Explore Nannup & Surrounds" button was rendering bone (invisible)
   on the light section — force ink, and reveal 3.5 cards on desktop */
.page-home #attractions .slider__controls .btn--inkLine {
  color: var(--ink); border-color: rgb(26 21 18 / 0.35);
}
.page-home #attractions .slider__controls .btn--inkLine:hover {
  background: var(--ink); color: var(--bone); border-color: var(--ink);
}
@media (min-width: 1024px) {
  .page-home #attractions .slider__track { grid-auto-columns: calc((100% - 3 * var(--sp-6)) / 3.5); }
}

/* mobile: stack the reviews header so the score sits under the eyebrow */
@media (max-width: 640px) {
  .page-home .reviews__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}