/* =====================================================================
   Sunstone Beach design system
   Editorial lakeside retreat.
   Palette: deep green, cream + pale sage (from the reference site), black.
   Type: Playfair Display (display serif) + Satoshi (sans).
   ===================================================================== */

/* ---- fonts (self-hosted) ---------------------------------------------
   Display face: Playfair Display (SIL Open Font Licence — free to use and
   self-host commercially). Shipped as its variable files, so one download
   covers 400-700 instead of a file per weight.
   Body face: Satoshi (Fontshare). */
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-italic-variable.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root {
  /* colour tokens: deep green, cream, sage, black */
  --green:      #082220;   /* brand deep green */
  --green-700:  #0D322E;   /* hover / raised surfaces */
  --green-500:  #1B4B44;   /* secondary text & links on light */
  --ink:        #0E1412;   /* near-black body text */
  --ink-soft:   #4A5654;   /* muted body text */
  --white:      #FFFFFF;
  --cream:      #F6F9F0;   /* softened off-white, type on green */
  --sage:       #D9E1CC;   /* pale sage, primary CTA fill on green */
  --sage-dark:  #C7D2B6;   /* sage hover */
  --paper:      #F4F6F4;   /* off-white alternating band */
  --line:       rgba(8,34,32,.14);
  --line-soft:  rgba(8,34,32,.08);

  --bg:         var(--white);
  --text:       var(--ink);

  /* type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* spacing scale */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 8rem;

  --container: 1200px;
  --header-h: 76px;
  --radius: 2px;
  /* Softer geometry for image surfaces: rounded corners and a light shadow
     instead of a hairline border. */
  --radius-lg: 16px;
  --shadow-soft: 0 2px 6px rgba(8,34,32,.05), 0 14px 34px -18px rgba(8,34,32,.28);
  --shadow-lift: 0 4px 10px rgba(8,34,32,.06), 0 26px 52px -22px rgba(8,34,32,.34);
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---- reset ---------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip (not hidden) so position:sticky keeps working */
}
img,picture,svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: var(--cream); padding: .8rem 1.2rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- typography ----------------------------------------------------- */
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; color: var(--green); letter-spacing: -.005em; }
h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.95rem); }
p { text-wrap: pretty; }

/* Gregori-style editorial emphasis: italic phrase, roman/bold statement */
.italic { font-style: italic; font-weight: 400; }
.bold   { font-weight: 700; font-style: normal; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--green-500);
  display: inline-block;
  margin-bottom: 1rem;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; z-index: 1; background: var(--bg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--green { background: var(--green); color: rgba(246,249,240,.82); }
.section--green h2, .section--green h3 { color: var(--cream); }
.section--green .eyebrow { color: var(--sage); }
.section--sand { background: var(--paper); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure.center { margin-inline: auto; }

/* ---- buttons -------------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .85rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--sans); font-weight: 500; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary  { --btn-bg: var(--green); --btn-fg: var(--cream); }
.btn--primary:hover { --btn-bg: var(--green-700); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--green); border-color: var(--green); }
.btn--outline:hover { --btn-bg: var(--green); --btn-fg:var(--cream); }
.btn--light { --btn-bg: transparent; --btn-fg:var(--cream); border-color: rgba(246,249,240,.6); }
.btn--light:hover { --btn-bg:var(--cream); --btn-fg: var(--green); border-color:var(--cream); }
.btn--sage { --btn-bg: var(--sage); --btn-fg: var(--green); border-color: var(--sage); }
.btn--sage:hover { --btn-bg: var(--sage-dark); border-color: var(--sage-dark); }
.btn--sm { min-height: 42px; padding: .6rem 1.3rem; font-size: .72rem; }
.btn--block { display:flex; width: 100%; }

/* Header CTA: solid sage with deep-green type */
.header-cta { --btn-bg: var(--sage); --btn-fg: var(--green); border-color: var(--sage); }
.header-cta:hover { --btn-bg: var(--sage-dark); border-color: var(--sage-dark); }

.textlink {
  font-family: var(--sans); font-weight: 500; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green-500);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color .2s var(--ease);
}
.textlink:hover { color: var(--green); }

/* ---- header --------------------------------------------------------- */
/* Always a solid deep-green bar with cream type and the white logo. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* Default is the solid white bar. Pages that open on a full-bleed hero
     switch it to transparent below, until the visitor scrolls. */
  background: var(--white);
  color: var(--green);
  box-shadow: 0 6px 24px -16px rgba(8,34,32,.5);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .8rem; min-height: var(--header-h);
}
.brand { margin-right: auto; display: block; }
.brand-logo { height: 54px; width: auto; }
.main-nav .nav-list { display: flex; gap: 2rem; }
.main-nav a {
  font-weight: 400; font-size: .8rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--green); padding-block: .4rem;
  position: relative;
  /* multi-word labels ("Restaurant & Bar") must not break across two lines */
  white-space: nowrap;
}
.main-nav a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--green); transition: width .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { width: 100%; }

/* ---- accommodation dropdown ------------------------------------------
   A quiet cream panel that drops from the Accommodation item, listing the
   three tiers with their unit count and entry rate. Hover + focus-within so
   it is reachable by keyboard. */
.nav-has-sub { position: relative; }
.nav-caret {
  display: inline-block; width: 5px; height: 5px; margin-left: .5em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.nav-has-sub:hover .nav-caret,
.nav-has-sub:focus-within .nav-caret { transform: translateY(0) rotate(225deg); }
/* A full-width panel pinned under the header, listing every unit by tier.
   Fixed rather than absolute so the .nav-has-sub positioning context (used by
   the hover bridge below) cannot trap it inside the nav item. */
.megamenu {
  /* --header-h-real is measured and published by main.js; the token is the
     fallback for the first paint and for JS-off. */
  position: fixed; top: var(--header-h-real, var(--header-h)); left: 0; right: 0;
  z-index: 120;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity .34s var(--ease),
    transform .42s var(--ease),
    visibility 0s linear .34s;
}
.nav-has-sub:hover > .megamenu,
.nav-has-sub:focus-within > .megamenu,
.megamenu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .34s var(--ease),
    transform .42s var(--ease),
    visibility 0s;
}
/* keeps :hover alive while the pointer crosses the header padding */
.nav-has-sub::after {
  content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%;
  height: 2rem; display: none;
}
.nav-has-sub:hover::after { display: block; }

.megamenu__inner {
  background: var(--cream);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 34px 70px -24px rgba(8,34,32,.42);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem) 1.4rem;
}
.megamenu__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
}
.megamenu .mm-col__head {
  display: block; padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
  text-transform: none; letter-spacing: 0;
  color: var(--green);
}
.megamenu .mm-col__head::after { content: none; }
.mm-col__title {
  display: block; font-family: var(--serif); font-size: 1.32rem;
  line-height: 1.15; color: var(--green);
}
.mm-col__meta {
  display: block; margin-top: .2rem;
  font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-500);
}
.megamenu .mm-col__head:hover .mm-col__title { color: var(--green-500); }

.mm-list { display: grid; gap: .05rem; }
.mm-list a {
  display: flex; align-items: center; gap: .65rem;
  padding: .3rem .45rem; border-radius: 9px;
  color: var(--green); text-transform: none; letter-spacing: 0;
  transition: background .22s var(--ease);
}
.mm-list a::after { content: none; }
.mm-list a:hover, .mm-list a:focus-visible { background: var(--paper); }
.mm-item__img {
  width: 40px; height: 30px; flex: 0 0 40px;
  object-fit: cover; border-radius: 6px; display: block;
}
.mm-item__text { display: grid; gap: .1rem; min-width: 0; }
.mm-item__name { font-size: .9rem; line-height: 1.2; color: var(--ink); }
.mm-item__meta {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-500); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.megamenu__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.megamenu__hint {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-500);
}
.megamenu .megamenu__all {
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--green); border-bottom: 1px solid var(--line);
  padding-bottom: .25rem;
}
.megamenu .megamenu__all::after { content: none; }
.megamenu .megamenu__all:hover { border-bottom-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .megamenu { transition: opacity .01s, visibility 0s; transform: none; }
  .nav-has-sub:hover > .megamenu,
  .nav-has-sub:focus-within > .megamenu,
  .megamenu.is-open { transform: none; }
}

/* ---- header over a hero -----------------------------------------------
   Any page that opens on a full-bleed hero gets a transparent bar with the
   white logo, until it is scrolled past 40px. :has() keys off the hero
   itself rather than a per-page class, so thank-you.php and 404.php — which
   have no hero — simply keep the solid white bar and never flash white
   links on white content. Browsers without :has() get the solid bar too,
   which is a complete look rather than a broken one. */
body:has(.hero, .rhero) .site-header:not(.site-header--solid) {
  background: transparent;
  box-shadow: none;
}
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .main-nav a,
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .header-cta {
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .main-nav a { color: var(--cream); }
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .main-nav a::after { background: var(--cream); }
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .nav-toggle span { background: var(--cream); }

/* Two logos in one slot; only one is ever displayed. Black is the default so
   the fallback (and every heroless page) is correct without JS. */
.brand__on-dark { display: none; }
.brand__on-light { display: block; }
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .brand__on-dark { display: block; }
body:has(.hero, .rhero) .site-header:not(.site-header--solid) .brand__on-light { display: none; }

/* ---- preloader -------------------------------------------------------
   Hidden is the resting state, so the veil only exists while <html> carries
   .is-preloading — dropping that class is what plays the fade out. Nothing
   here runs unless the inline script in header.php adds it. */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--green-700);
  opacity: 0; visibility: hidden;
  transition: opacity .65s var(--ease), visibility 0s linear .65s;
}
html.is-preloading .preloader {
  opacity: 1; visibility: visible;
  transition: none;   /* it must be there on the first frame, not fade in */
}
/* The page behind must not scroll under the veil. */
html.is-preloading, html.is-preloading body { overflow: hidden; }

.preloader__bg { position: absolute; inset: 0; overflow: hidden; }
.preloader__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .22;
  /* Very slow drift, so the veil is alive rather than a frozen panel. The
     green underneath is painted by CSS, so a slow-arriving photo costs
     nothing — it simply fades up whenever it lands. */
  animation: sb-veil-drift 9s var(--ease) both;
}
.preloader__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%,
              rgba(8,34,32,.25) 0%, rgba(8,34,32,.85) 100%);
}

.preloader__mark { position: relative; display: grid; justify-items: center; gap: 1.6rem; }
/* Near-square lockup (440x410), so it is sized far narrower than the
   horizontal one would be or it dominates the screen. */
.preloader__mark img {
  width: clamp(116px, 30vw, 158px); height: auto; display: block;
}
html.is-preloading .preloader__mark img { animation: sb-veil-rise .95s var(--ease) both; }

/* Indeterminate sweep. A percentage bar here would be inventing a number —
   nothing on the page reports real load progress. */
.preloader__bar {
  display: block; width: clamp(96px, 26vw, 132px); height: 1.5px;
  background: rgba(246,249,240,.16); border-radius: 2px; overflow: hidden;
}
.preloader__bar span {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: var(--sage);
}
html.is-preloading .preloader__bar span { animation: sb-veil-sweep 1.25s var(--ease) infinite; }

@keyframes sb-veil-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sb-veil-drift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes sb-veil-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { transition-duration: .01ms; }
  .preloader__bg img,
  html.is-preloading .preloader__mark img,
  html.is-preloading .preloader__bar span { animation: none; }
  .preloader__mark img { opacity: 1; }
}

/* ---- mobile nav ------------------------------------------------------
   A full-height panel below the header. The header itself stays put and on
   top, so the wordmark never disappears and the toggle stays where the
   thumb left it — the button morphs into the close control rather than a
   second X appearing somewhere else. */
.nav-toggle {
  display: none; width: 46px; height: 46px; padding: 13px 9px;
  background: none; border: 0; cursor: pointer;
  position: relative; z-index: 2;
}
.nav-toggle span {
  display: block; height: 1.5px; border-radius: 2px; background: var(--green);
  margin-left: auto;
  transition: transform .45s var(--ease), opacity .2s var(--ease),
              width .45s var(--ease), background-color .3s var(--ease);
}
/* Ragged right edge when closed reads as a considered mark rather than a
   generic three-bar icon; the widths even out as it becomes the X. */
.nav-toggle span:nth-child(1) { width: 100%; }
.nav-toggle span:nth-child(2) { width: 70%; margin-top: 6px; }
.nav-toggle span:nth-child(3) { width: 85%; margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span { width: 100%; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* No colour override while the panel is open: the bar sits on the header, not
   on the panel, so the existing transparent-over-hero / solid-white rules are
   already correct. Forcing cream here made the X vanish on a scrolled page. */

.mobile-nav {
  position: fixed; left: 0; right: 0;
  top: var(--header-h-real, var(--header-h));
  height: calc(100dvh - var(--header-h-real, var(--header-h)));
  z-index: 60;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 100%);
  color: var(--cream);
  overflow-y: auto; overscroll-behavior: contain;
  /* Closed state. visibility (not display) so the panel can be transitioned;
     JS drops the `hidden` attribute on init and drives .is-open instead. */
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .34s var(--ease), transform .34s var(--ease),
              visibility 0s linear .34s;
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease),
              visibility 0s;
}
.mobile-nav__inner {
  min-height: 100%; display: flex; flex-direction: column;
  padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.25rem, 5vw, 2rem) 2rem;
}
.mobile-nav ul { display: block; margin: 0 0 auto; padding: 0; list-style: none; }
.mobile-nav li { list-style: none; }
.mobile-nav li::before { content: none; }

/* Each row rises into place on a stagger. --i comes from the markup; the
   delay only applies while opening, so closing is a single quick fade
   rather than a reversed cascade the user has to sit through. */
.mobile-nav li, .mobile-nav__foot {
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-nav.is-open li, .mobile-nav.is-open .mobile-nav__foot {
  opacity: 1; transform: none;
  transition-delay: calc(90ms + var(--i, 0) * 42ms);
}

/* Scoped to the list, not to every link in the panel. As `.mobile-nav a` this
   outranked both `.btn` and `.mobile-nav__call` — it painted the Contact
   button's label cream on cream and turned the phone number into a 1.6rem
   serif row with a divider under it. */
.mobile-nav ul a {
  display: block; padding: .72rem .1rem;
  font-family: var(--serif); font-weight: 400; font-size: 1.6rem;
  line-height: 1.2; color: var(--cream);
  border-bottom: 1px solid rgba(246,249,240,.10);
  transition: color .25s var(--ease);
}
.mobile-nav ul li:last-child a { border-bottom: 0; }

/* Tier links sit indented under Accommodation, quieter than the top level.
   Qualified with `ul` so it outranks `.mobile-nav ul a` above — as a bare
   `.mobile-nav__sub a` it lost, and the tiers rendered at full serif size. */
.mobile-nav ul .mobile-nav__sub a {
  padding: .5rem 0 .5rem 1.1rem; font-family: var(--sans); font-size: .94rem;
  color: rgba(246,249,240,.66);
  display: flex; align-items: center; gap: .8rem;
}
/* Same round thumbnail as the tier chips on the accommodation page, so the
   three tiers read as the same object in both places. */
.mobile-nav__thumb {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 999px; overflow: hidden;
  background: rgba(246,249,240,.08);
}
.mobile-nav__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Takes the slack so the unit count stays pinned to the right edge. */
.mobile-nav__label { flex: 1 1 auto; min-width: 0; }
.mobile-nav__meta {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sage); white-space: nowrap;
}
/* The page you are on, marked with a rule rather than a colour swap so it
   still reads for anyone who cannot separate cream from sage. */
.mobile-nav ul a[aria-current="page"] {
  color: var(--sage); padding-left: .75rem;
  box-shadow: inset 2px 0 0 var(--sage);
}
.mobile-nav ul .mobile-nav__sub a[aria-current="page"] { padding-left: 1.1rem; }

.mobile-nav__foot {
  margin-top: clamp(1.8rem, 6vw, 2.6rem);
  padding-top: clamp(1.2rem, 4vw, 1.6rem);
  border-top: 1px solid rgba(246,249,240,.12);
}
.mobile-nav__call {
  display: block; text-align: center; margin-top: 1rem;
  font-size: .8rem; letter-spacing: .12em;
  color: rgba(246,249,240,.7);
}
.mobile-nav__call:hover { color: var(--cream); }

/* Motion is decoration here — the panel must still arrive and leave. */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav li, .mobile-nav__foot, .nav-toggle span {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .mobile-nav li, .mobile-nav__foot { transform: none; }
}

/* ---- hero ----------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  color: var(--cream); isolation: isolate;
}
/* Full-screen page heroes: pinned, with the next section revealing over them */
.hero--page { min-height: 100svh; height: 100svh; align-items: end; position: sticky; top: 0; z-index: 0; }
.hero--page .hero__inner { padding-bottom: clamp(4.5rem, 10vh, 7rem); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  /* Neutral black, not the brand green: the hero carries video and photography
     whose own colour should read true. The mid stop carries the headline and
     sub-line, kept heavy enough that type stays legible over the brightest
     frames (pale gravel, white cushions, midday water). */
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.56) 100%);
}
.hero__inner { padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 8rem; max-width: 760px; }
.hero h1 { color:var(--cream); }
.hero .eyebrow { color: var(--sage); }
.hero__lede { font-size: 1.2rem; color: rgba(246,249,240,.9); margin-top: 1.2rem; max-width: 52ch; }
.hero__cta { display:flex; flex-wrap:wrap; gap: 1rem; margin-top: 2rem; }

/* Full-screen hero scroll cue (injected by main-scroll JS) */
html { scroll-behavior: smooth; }
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: clamp(1.1rem, 3.5vh, 2.2rem); transform: translateX(-50%);
  z-index: 4; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(2px);
  color: #fff; cursor: pointer; display: grid; place-items: center; opacity: .9; transition: background .25s var(--ease), opacity .25s var(--ease);
}
.hero-scroll-cue:hover { background: rgba(255,255,255,.22); opacity: 1; }
.hero-scroll-cue span { display: block; width: 11px; height: 11px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: cue-bounce 1.8s ease-in-out infinite; }
@keyframes cue-bounce { 0%, 100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(3px,3px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-scroll-cue span { animation: none; } }

/* --- home hero: full-bleed slideshow + centred display type ---------- */
.hero--home { align-items: center; }
.hero--home .hero__inner {
  max-width: none; text-align: center;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.hero__title {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 2px 40px rgba(8,34,32,.35);
}
.hero__title .italic,
.hero__title .bold { display: block; }
/* The home hero is a single line now, so it can sit smaller than the stacked
   two-line version the clamp above was sized for. */
.hero--home .hero__title { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }

/* Supporting line under the display title */
.hero__sub {
  margin: clamp(1.2rem, 2.5vw, 1.8rem) auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  color: var(--sage);
  text-shadow: 0 1px 24px rgba(8,34,32,.5);
}
.hero__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* Inner pages reuse the home hero treatment at a slightly smaller scale,
   since their headlines run longer and there is no booking bar to clear. */
.hero--restaurant { min-height: 86svh; }
.hero--restaurant .hero__title { font-size: clamp(2.1rem, 5.4vw, 4.6rem); }

/* Slideshow: stacked images that crossfade.
   Layered with positive z-indexes (media 0 / scrim 1 / content 2) rather than
   the negative-z trick used by the single-image heroes; nesting a negative
   z-index inside .hero's isolated stacking context stops the slides painting. */
.hero--home .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--green); }
/* The home hero runs the background video, which is dark enough on its own to
   need far less scrim than the still page heroes. Overridden here rather than
   on .hero::after so About / Accommodation / Restaurant keep theirs. */
.hero--home::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.20) 100%);
}
.hero--home .hero__inner { position: relative; z-index: 2; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* ---- home hero: shrinks into a frame on scroll ------------------------
   JS drives transform / border-radius / opacity from scroll progress. The
   page background becomes the "mat" revealed around the shrinking image —
   plain white, so the frame reads as paper rather than a green tint. */
.page-home { background: var(--white); }
.hero-zoom {
  transform-origin: center;
  overflow: hidden;                 /* so the growing radius actually clips */
  will-change: transform, border-radius, opacity;
  backface-visibility: hidden;
}

/* Background video: same layer as the slideshow, painted over it once it can
   play. It stays transparent until then so the slideshow shows through rather
   than flashing a black box. */
.hero--home .hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease);
  pointer-events: none;
}
.hero--home .hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero--home .hero-video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* --- booking widget -------------------------------------------------- */
/* Sits directly under the hero headline as a compact centred bar, sized to
   its content rather than the full container width. */
.booking {
  width: fit-content;
  max-width: 100%;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  position: relative; /* anchors the date picker's popover (see .booking .dr-pop) */
}
.booking__form {
  display: grid;
  grid-template-columns: auto auto;
  background: var(--green);
  color: var(--cream);
  text-align: left;
  /* Soft edges to match the cards. overflow:hidden clips the sage submit
     button into the same radius; the calendar/guests popovers are
     position:fixed so they escape the clip rather than being cut off. */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(8,34,32,.55);
}

/* ---- frosted glass search bar ---------------------------------------
   Properly see-through smoked glass. The trick is that legibility comes from
   `brightness()` in the backdrop-filter, not from the panel's own alpha: the
   filter darkens whatever the bar is sitting on, so the tint can drop to ~.3
   and the photo reads clearly through it while the .66rem uppercase sage
   labels still hold ~5.3:1 contrast over the palest hero slide. Raising the
   alpha instead would be more opaque for the same readability. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .booking__form {
    background: linear-gradient(180deg, rgba(8,34,32,.22), rgba(8,34,32,.30));
    /* 14px, not 26: a large-radius blur over a full-bleed hero is expensive
       enough to stall compositing on weaker GPUs. brightness() carries the
       legibility, so the radius can stay cheap. */
    -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(.5);
    backdrop-filter: blur(14px) saturate(150%) brightness(.5);
    box-shadow:
      0 18px 44px -20px rgba(8,34,32,.5),
      inset 0 1px 0 rgba(246,249,240,.18);
  }
  /* a hairline of light along the edge is what sells the glass */
  .booking__form { position: relative; }
  .booking__form::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit; z-index: 2;
    border: 1px solid rgba(246,249,240,.20);
  }

  /* the sage CTA stays opaque — it is the one element that must not recede */
  .booking__submit { position: relative; z-index: 1; }
}
/* three fields only — check in │ check out │ guests — the structure ported
   from 7island's search bar. Children live inside the guests popover, not in
   the bar. */
.booking__fields {
  display: grid;
  grid-template-columns: auto auto auto auto auto; /* in, rule, out, rule, guests */
  align-items: center;
  gap: 0 1.5rem;
  padding: 1rem 1.75rem;
}
.booking__field { display: grid; gap: .2rem; min-width: 0; position: relative; }
.booking__field label,
.booking__label {
  font-family: var(--sans); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sage);
}
.booking__field input {
  font: inherit; font-family: var(--sans); font-size: .95rem;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  color: var(--cream); width: 100%;
  color-scheme: dark;
}
.booking__field input::placeholder { color: rgba(246,249,240,.5); }
.booking__field input:focus { outline: none; box-shadow: 0 2px 0 var(--cream); }
.booking__rule { width: 1px; align-self: stretch; background: rgba(246,249,240,.3); }
.booking__submit {
  border: 0; border-radius: 0;
  background: var(--sage); color: var(--green);
  font-family: var(--serif); font-weight: 700; font-size: .95rem;
  letter-spacing: .01em; text-transform: none; white-space: nowrap;
  padding: 1rem 2rem;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.booking__submit:hover { background: var(--sage-dark); }

/* the three bar controls are all buttons, but must read as plain
   `.booking__field` values: transparent, cream, no border, no radius. */
.booking__dateval,
.booking__guestsval {
  font: inherit; font-family: var(--sans); font-size: .95rem;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  color: rgba(246,249,240,.62); text-align: left; cursor: pointer; width: 100%;
}
.booking__dateval.is-set { color: var(--cream); }
.booking__guestsval {
  color: var(--cream);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.booking__caret { flex: 0 0 auto; color: var(--sage); }
.booking__guestsval[aria-expanded="true"] .booking__caret { transform: rotate(180deg); }
.booking__dateval:focus-visible,
.booking__guestsval:focus-visible { outline: none; box-shadow: 0 2px 0 var(--cream); }

/* ---- guests popover (ported structure, our palette) ------------------ */
.booking__guestspop {
  /* Fixed + JS-positioned, because the panel is portalled to <body> to escape
     .hero__inner's stacking context (see stay-search.js). */
  position: fixed;
  top: 0;
  left: 0;
  /* Above .site-header (z-index 100), below .skip-link (200) so the keyboard
     skip target still wins. */
  z-index: 150;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  background: var(--green-700);
  border: 1px solid rgba(246,249,240,.28);
  padding: .5rem .9rem;
  box-shadow: 0 24px 48px -20px rgba(8,34,32,.75);
}
.booking__guestspop[hidden] { display: none; }
.booking__guestrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .55rem 0;
}
.booking__guestrow + .booking__guestrow { border-top: 1px solid rgba(246,249,240,.18); }
.booking__guestname { display: block; font-size: .9rem; color: var(--cream); line-height: 1.3; }
.booking__guestsub  { display: block; font-size: .68rem; color: var(--sage); line-height: 1.3; }
.booking__stepper { display: flex; align-items: center; gap: .6rem; }
.booking__step {
  width: 1.85rem; height: 1.85rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(246,249,240,.42); background: transparent;
  color: var(--cream); font: inherit; font-size: .95rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.booking__step:hover { background: var(--sage); color: var(--green); border-color: var(--sage); }
.booking__stepcount { min-width: 1.1rem; text-align: center; font-size: .95rem; color: var(--cream); }

/* ---- dates popover: 7island's bk-cal, dressed as the green bar -------- */
/* position: fixed (not absolute) plus positionPop()'s clamping in
   assets/js/stay-search.js is what keeps this inside the viewport whatever
   the bar is nested in — the previous two-month .dr-pop was 711px tall and
   ran off the bottom of a phone. */
.booking__pop {
  position: fixed;
  top: 0; left: 0;
  /* Above .site-header (z-index 100), below .skip-link (200). At 60 the fixed
     header painted straight over the calendar whenever it flipped upward. */
  z-index: 150;
  width: min(20rem, calc(100vw - 2rem));
  background: var(--green);
  border: 1px solid rgba(246,249,240,.28);
  border-radius: 14px;
  box-shadow: 0 26px 60px -22px rgba(8,34,32,.8);
  padding: .9rem 1rem 1rem;
  color: var(--cream);
}
/* positionPop() sets max-height only when neither side of the trigger has room;
   the panel then scrolls internally instead of being clipped by the fold. */
.booking__pop { overflow-y: auto; overscroll-behavior: contain; }
.booking__pop[hidden] { display: none; }
.booking__cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.booking__cal-title { font-family: var(--serif); font-size: .95rem; color: var(--cream); }
.booking__cal-nav {
  width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(246,249,240,.42); background: transparent;
  color: var(--cream); font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.booking__cal-nav:hover:not(:disabled) { background: var(--sage); color: var(--green); border-color: var(--sage); }
.booking__cal-nav:disabled { opacity: 0; pointer-events: none; }
.booking__cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  text-align: center; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sage); margin-bottom: .3rem;
}
.booking__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* day cells are real <button>s so they can be tabbed to and activated — hence
   the UA button reset (font, border, padding, background) before the layout,
   or the month grid picks up default chrome and breaks. */
.booking__cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-family: var(--sans); font-size: .8rem;
  border: 0; padding: 0; background: none; appearance: none; -webkit-appearance: none;
  border-radius: var(--radius); cursor: pointer; color: var(--cream);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.booking__cell:hover:not(:disabled):not(.booking__cell--blank) { background: rgba(217,225,204,.22); }
/* the bar suppresses outlines elsewhere, so cells need an explicit one or
   keyboard focus would be invisible against the green panel. */
.booking__cell:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: -2px;
}
.booking__cell--blank { cursor: default; }
.booking__cell--blocked,
.booking__cell:disabled { color: rgba(246,249,240,.3); cursor: not-allowed; }
.booking__cell--full { text-decoration: line-through; }
.booking__cell--start,
.booking__cell--end { background: var(--sage); color: var(--green); font-weight: 700; }
/* Picking a check-in disables every date up to and including it, so the chosen
   cell is itself :disabled — and `.booking__cell:disabled` (0,2,0) outranked
   the rule above (0,1,0), painting the date cream-at-30% on the sage fill at
   1.08:1. It is selected, not unavailable, so it keeps the dark green. */
.booking__cell--start:disabled,
.booking__cell--end:disabled { color: var(--green); }
.booking__cell--in-range { background: rgba(217,225,204,.26); border-radius: 0; }
.booking__cell--hover { background: rgba(217,225,204,.14); border-radius: 0; }
.booking__pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: .75rem; padding-top: .7rem; border-top: 1px solid rgba(246,249,240,.24);
}
.booking__hint { font-size: .72rem; line-height: 1.35; color: var(--sage); }
.booking__hint[data-tone="ok"]  { color: #BFE0BE; }
.booking__hint[data-tone="bad"] { color: #F0BCA9; }
.booking__done {
  flex: 0 0 auto;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--sage); color: var(--green);
  font-family: var(--serif); font-weight: 700; font-size: .8rem;
  padding: .45rem 1.1rem;
  transition: background .25s var(--ease);
}
.booking__done:hover { background: var(--sage-dark); }

/* an inline validation message ("choose your dates"); occupies no space
   while [hidden], and spans the full row when shown so it doesn't get
   squeezed into a single grid column. */
.booking__fields [data-status] { grid-column: 1 / -1; margin-top: .4rem; }

/* step 2 (contact details) is a grid child of .booking__form spanning both
   columns, so it reads as the bar expanding downward rather than a separate
   card — same background/text colour as the bar (inherited). Laid out as a
   compact 2-column grid (name | email, then phone | submit) rather than a
   tall single-column stack; collapses to one column below ~560px. Source
   order matters for the auto-placement below: back link and summary are
   forced full-width, then name/email/phone/submit fall into the 2-column
   flow, then the error message is forced full-width again — which is why
   it's the *last* child in the markup (after the submit button), not
   before it as in room.php's stacked card. */
.booking__details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem 1.25rem;
  padding: .6rem 1.75rem .75rem;
  border-top: 1px solid rgba(246,249,240,.3);
}
/* the class's own `display: grid` above has equal specificity to (and beats)
   the UA stylesheet's `[hidden] { display: none }`, so it must be restored
   explicitly or the `hidden` attribute is silently ignored. */
.booking__details[hidden] { display: none; }
/* `display: grid` on .booking__fields outranks the UA [hidden] rule, so step 1
   would stay on screen behind step 2 without this. */
.booking__fields[hidden] { display: none; }
/* Layout, row by row:
     1  recap        full width — the stay you chose, plus Change
     2  Name  Email
     3  Phone Submit  (submit bottom-aligned so it sits on the field baseline)
     4  error        full width
   Anything that must span both columns says so; nothing is left to fall into
   whatever cell source order happens to give it. */
.booking__recap,
.booking__details .book-step__err { grid-column: 1 / -1; }

.booking__recap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 .15rem; padding: .4rem .7rem;
  background: rgba(246,249,240,.1); border-radius: 2px;
  color: var(--cream); line-height: 1.35;
}
/* [data-summary] is itself a <span> wrapping <strong> + <span>, so target the
   inner one explicitly rather than every span in the recap. */
.booking__recap [data-summary] { display: inline; }
.booking__recap strong           { font-size: .85rem; font-weight: 600; }
.booking__recap [data-summary] > span { font-size: .78rem; color: var(--sage); }
.booking__change {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sage); text-decoration: underline;
  text-underline-offset: 3px;
}
.booking__change:hover { color: var(--cream); }
.booking__change:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* Comfortable targets: the inputs were 25px tall, which is both mean-looking
   and below a usable touch target. */
.booking__details input:not([type="hidden"]) {
  min-height: 2.5rem;
  padding: .1rem 0;
  font-size: .95rem;
}
.booking__details .booking__field { align-content: start; }
/* The bar's submit is sized for a lone wide field (1rem 2rem); here it shares a
   row with Phone, so match that row's height and sit on its baseline. */
.booking__details .booking__submit {
  align-self: end; justify-self: stretch;
  min-height: 2.75rem; padding: .5rem 1.25rem; font-size: .85rem;
}
.booking__details .book-step__err { margin: .2rem 0 0; }
/* one column on a phone — and tightened, because five stacked rows plus the
   summary would otherwise push step 2 past ~300px on a 390px screen. */
@media (max-width: 560px) {
  .booking__details {
    grid-template-columns: 1fr;
    gap: .3rem 1.25rem;
    padding: .5rem 1.1rem .65rem;
  }
  .booking__details .book-step__summary { padding: .3rem .6rem; }
}

/* The booking bar also works as a standalone strip on inner pages. There it
   sits on a flat section rather than photography, so frosting it would blur
   nothing and only wash the green out — keep that variant solid. */
.booking--inline .booking__form {
  background: var(--green);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(246,249,240,.12);
  box-shadow: none;
}
.booking--inline .booking__form::after { content: none; }

/* ---- horizontal photo strip ----------------------------------------- */
/* Native horizontal scroll: the track is width:max-content so the images
   simply run off the edge and the section scrolls. Images are encoded at a
   fixed height with free width, so portrait and landscape crops mix without
   distortion. */
.hstrip-section { background: var(--paper); }
/* a strip that carries its own heading needs room above the track */
.hstrip-section--titled { padding-top: clamp(3.5rem, 8vw, 7rem); }
.hstrip-section--titled .hstrip__track { padding-top: clamp(2rem, 4vw, 3rem); }
.hstrip__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.hstrip__head .eyebrow { margin: 0; }
.hstrip__hint {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .8; white-space: nowrap;
}
.hstrip__hint span { display: inline-block; animation: hstripNudge 1.6s ease-in-out infinite; }
@keyframes hstripNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .hstrip__hint span { animation: none; } }
.hstrip {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;                 /* the strip is its own affordance */
  cursor: grab;
}
.hstrip::-webkit-scrollbar { display: none; }
.hstrip.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.hstrip.is-dragging img { pointer-events: none; }
.hstrip:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.hstrip__track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  padding: clamp(3rem, 6vw, 5rem) max(1.25rem, calc((100% - var(--container)) / 2));
}
.hstrip__track img {
  height: clamp(260px, 52vh, 480px);
  width: auto;
  /* Cap the very wide crops so a couple of panoramas can't fill the whole
     strip; object-fit trims them instead of shrinking the row. */
  max-width: min(46vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- generic split / feature --------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr 1fr; }
.split > * { min-width: 0; }
.split--reverse .split__media { order: 2; }
.split__media img { width:100%; aspect-ratio: 4/3.2; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.split__body p + p { margin-top: 1rem; }
.split__body .btn, .split__body .textlink { margin-top: 1.6rem; }

/* framed image — the offset hairline outline was replaced by the soft
   shadow on .split__media img, so this is now just a positioning context. */
.framed { position: relative; }

/* section heading block */
.head-block { max-width: 640px; margin-bottom: clamp(2rem,4vw,3.2rem); }
.head-block.center { margin-inline: auto; }

/* ---- accommodation tiers ---------------------------------------------
   Villas / Bungalows / Luxury Tents, each introduced by a hairline rule,
   a serif title and the tier's unit count and entry rate. */
/* Tier filter: three small feature tiles under the section heading. */
.tier-filter {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: .9rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
.tier-chip {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem 1.3rem .55rem .55rem;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: 999px; color: var(--green);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.tier-chip:hover, .tier-chip:focus-visible {
  border-color: var(--green-500); box-shadow: 0 10px 30px rgba(8,34,32,.10);
  transform: translateY(-2px);
}
.tier-chip.is-active {
  border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green);
}
.tier-chip__media {
  width: 48px; height: 48px; border-radius: 999px; overflow: hidden;
  flex: 0 0 48px; background: var(--paper);
}
.tier-chip__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tier-chip__text { display: grid; gap: .12rem; text-align: left; }
.tier-chip__label { font-family: var(--serif); font-size: 1.12rem; line-height: 1.15; }
.tier-chip__meta {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-500); white-space: nowrap;
}
.tier-filter__reset {
  align-self: center; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-500);
  padding: .6rem .4rem; border-bottom: 1px solid var(--line);
}
.tier-filter__reset:hover { color: var(--green); border-bottom-color: var(--green); }
.tier[hidden] { display: none; }
@media (max-width: 560px) {
  .tier-filter { gap: .6rem; }
  .tier-chip { padding: .45rem 1rem .45rem .45rem; gap: .7rem; }
  .tier-chip__media { width: 40px; height: 40px; flex-basis: 40px; }
  .tier-chip__label { font-size: 1rem; }
}

/* Quick specs on a room card: guests, bedrooms, beds. */
.spec-row {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin: .1rem 0 .9rem; padding: 0; list-style: none;
}
.spec-row li {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--ink-soft); white-space: nowrap;
}
.spec-row li::before { content: none; }
.spec-row svg {
  width: 16px; height: 16px; flex: 0 0 16px;
  stroke: var(--green-500); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.tier { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.tier + .tier { margin-top: clamp(3.5rem, 7vw, 6rem); }
.tier__head {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 2rem; row-gap: .6rem;
}
.tier__title {
  font-family: var(--serif); font-weight: 400; line-height: 1.05;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--green);
  margin: 0;
}
.tier__meta {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-500); white-space: nowrap; text-align: right;
}
.tier__lede {
  grid-column: 1 / -1; max-width: 60ch; margin: 0;
  color: var(--ink-soft); font-size: 1.02rem;
}
@media (max-width: 640px) {
  .tier__head { grid-template-columns: 1fr; }
  .tier__meta { text-align: left; }
}

/* ---- cards / grids -------------------------------------------------- */
.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 0; border-radius: var(--radius-lg);
  overflow: hidden; display:flex; flex-direction:column;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.card__media { overflow:hidden; }
.card__media img { width:100%; aspect-ratio: 3/2.3; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; }
/* h4 appears where cards sit under a tier heading, so the level drops a step. */
.card__body h3, .card__body h4 { margin-bottom: .5rem; }
.card__body h4 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.card__body p { color: var(--ink-soft); font-size: .96rem; }
.card__foot { margin-top: auto; padding-top: 1.2rem; }

/* ---- room gallery (swipeable, 5 frames) ----------------------------- */
.roomgal { position: relative; }
.roomgal__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius);
  background: var(--paper);
  /* let the track shrink to its grid/flex cell instead of forcing its own
     min-content width onto the parent — it scrolls horizontally anyway */
  min-width: 0;
}
.roomgal__track::-webkit-scrollbar { display: none; }
.roomgal__track:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.roomgal__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.roomgal__slide img { display: block; max-width: 100%; }

/* Placeholder frame: matches the photo box so the carousel never jumps. */
.roomgal__slide--placeholder {
  aspect-ratio: 4/3.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(8,34,32,.035) 14px 28px),
    var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.roomgal__ph-mark {
  width: 34px; height: 26px;
  border: 1.5px solid var(--green-500);
  border-radius: 3px;
  opacity: .5;
  position: relative;
}
.roomgal__ph-mark::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 9px;
  border-radius: 2px;
  background: var(--green-500);
  clip-path: polygon(0 100%, 34% 22%, 55% 100%, 70% 55%, 100% 100%);
}
.roomgal__ph-label { font-size: .95rem; color: var(--ink-soft); max-width: 24ch; line-height: 1.4; }
.roomgal__ph-note { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); opacity: .7; }

.roomgal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: var(--green);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(8,34,32,.16);
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.roomgal__nav svg { width: 20px; height: 20px; }
.roomgal__nav:hover { background: var(--white); }
.roomgal__nav:disabled { opacity: .3; cursor: default; }
.roomgal__nav--prev { left: .7rem; }
.roomgal__nav--next { right: .7rem; }

.roomgal__dots { display: flex; justify-content: center; gap: .45rem; margin-top: .8rem; }
.roomgal__dot {
  width: 7px; height: 7px; padding: 0;
  border: 1px solid var(--green-500); border-radius: 999px;
  background: transparent; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.roomgal__dot.is-active { background: var(--green); transform: scale(1.25); }

/* ---- room detail: specs & rates ------------------------------------- */
.room-specs {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  list-style: none; padding: 0;
  margin: 1.2rem 0;
  border-block: 1px solid var(--line-soft);
  padding-block: .9rem;
}
.room-specs li { display: flex; flex-direction: column; }
.room-specs span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-500); }
.room-specs strong { font-weight: 500; font-size: .95rem; }

.room-rates { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; }
.room-rates em { font-style: normal; color: var(--green-500); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }

.check-times { margin-top: 1rem; font-size: .9rem; color: var(--ink-soft); }
.check-times strong { color: var(--green); font-weight: 500; }

/* lodge card feature list */
.feature-list { display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin: .9rem 0 0; }
.feature-list li { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:var(--paper); border:1px solid var(--line-soft); padding:.3rem .6rem; border-radius: 999px; }

/* amenity trio (image-led) */
.amenity { position:relative; overflow:hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); min-height: 420px; display:flex; align-items:flex-end; color:var(--cream); }
.amenity img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform .8s var(--ease); }
.amenity::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, transparent 30%, rgba(8,34,32,.88)); }
.amenity:hover img { transform: scale(1.05); }
.amenity__body { padding: 1.8rem; }
.amenity__body h3 { color:var(--cream); }
.amenity__body p { color: rgba(246,249,240,.85); font-size:.95rem; margin:.5rem 0 1rem; }
.amenity__body .textlink { color:var(--cream); }

/* ---- menu list ------------------------------------------------------ */
.menu-list { display:grid; gap: .2rem; }
.menu-row { display:grid; grid-template-columns: 1fr auto; gap: 1rem; align-items:baseline; padding: .9rem 0; border-bottom:1px dashed var(--line); }
.menu-row__name { font-family: var(--serif); font-size: 1.25rem; color: var(--green); }
.menu-row__tag { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--green-500); margin-left:.6rem; }
.menu-row__price { font-weight:500; color: var(--ink-soft); white-space:nowrap; }

/* ---- pricing (services / weddings) --------------------------------- */
.price-table { display:grid; gap:.1rem; }
.price-row { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.price-row__name { font-family:var(--serif); font-size:1.2rem; color:var(--green); }
.price-row__meta { font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.price-row__amt { font-weight:500; color:var(--green); white-space:nowrap; align-self:center; }

.pkg { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.8rem; display:flex; flex-direction:column; }
.pkg--featured { border-color: var(--green); position:relative; }
.pkg--featured::before { content:"Most loved"; position:absolute; top:-.8rem; left:1.8rem; background:var(--green); color:var(--cream); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; }
.pkg h3 { margin-bottom:.2rem; }
.pkg__price { font-family:var(--sans); font-weight:500; letter-spacing:.04em; color:var(--green); margin-bottom:1.2rem; }
.pkg ul { display:grid; gap:.6rem; margin-bottom:1.6rem; }
.pkg li { position:relative; padding-left:1.4rem; font-size:.95rem; color:var(--ink-soft); }
.pkg li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--green-500); }
.pkg .btn { margin-top:auto; }

/* ---- testimonials --------------------------------------------------- */
/* ---- reviews section ------------------------------------------------ */
/* The flat version read as one green slab: stats and quotes carried equal
   weight on a single dead-flat field with nothing containing them. Three
   fixes here — a tonal gradient so the green has depth, a ruled stat bar that
   is clearly its own band, and quote cards on a raised surface so they read
   as three discrete objects. */
.section--reviews {
  background:
    radial-gradient(115% 75% at 50% 0%, var(--green-700) 0%, var(--green) 62%);
}

/* stat bar */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(217,225,204,.18);
}
.statbar__item {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: clamp(1.5rem, 3vw, 2.2rem) 1rem;
  text-align: center;
}
.statbar__item + .statbar__item { border-inline-start: 1px solid rgba(217,225,204,.18); }
.statbar__n {
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--sage);
}
.statbar__l {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(217,225,204,.72);
}

/* heading */
.reviews__head {
  text-align: center;
  margin: clamp(3.5rem, 7vw, 5.5rem) auto clamp(2.5rem, 4vw, 3.5rem);
  max-width: min(100%, 34rem);
}
.reviews__head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }

/* quote cards */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.review {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--green-700);
  border: 1px solid rgba(217,225,204,.14);
  border-radius: 3px;
  padding: 2.6rem 1.9rem 1.9rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.review:hover { transform: translateY(-4px); border-color: rgba(217,225,204,.34); }
/* oversized opening quote as the visual anchor */
.review::before {
  content: "\201C";
  position: absolute; top: .4rem; left: 1.5rem;
  font-family: var(--serif); font-size: 5.5rem; line-height: 1;
  color: var(--sage); opacity: .2; pointer-events: none;
}
.review__body p {
  position: relative;
  font-family: var(--serif); font-style: italic;
  font-size: 1.18rem; line-height: 1.45; color: var(--sage);
}
.review__by {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem;
}
.review__by::before {
  content: ""; display: block; flex: 0 0 100%;
  height: 1px; background: rgba(217,225,204,.16); margin-bottom: 1.1rem;
}
.review__name {
  font-size: .78rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream);
}
.review__from {
  font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(217,225,204,.72);
}
/* stagger the middle card so the row isn't a solid rectangle */
@media (min-width: 900px) {
  .review-grid > :nth-child(2) { margin-top: 2.2rem; }
}

/* ---- CTA band ------------------------------------------------------- */
.cta-band { position:relative; color:var(--cream); text-align:center; isolation:isolate; }
.cta-band img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.cta-band::after { content:""; position:absolute; inset:0; z-index:-1; background: rgba(8,34,32,.68); }
.cta-band h2 { color:var(--cream); }
.cta-band .eyebrow { color: var(--sage); }
.cta-band .btn { margin-top: 1.8rem; }

/* ---- gallery -------------------------------------------------------- */
.gallery { display:grid; grid-template-columns: repeat(4,1fr); gap: .6rem; }
.gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius: 2px; }
.gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.gallery a:first-child img { aspect-ratio: 1; height:100%; }

/* ---- location placeholder gallery ----------------------------------- */
.loc-gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: .9rem; }
.loc-gallery--4 { grid-template-columns: repeat(4,1fr); }
.loc-gallery--2 { grid-template-columns: repeat(2,1fr); max-width: 760px; margin-inline: auto; }
.loc-tile.loc-tile--filled { padding:0; border:0; background:none; overflow:hidden; display:block; }
.loc-tile.loc-tile--filled img { width:100%; height:100%; object-fit:cover; display:block; }
.loc-tile {
  aspect-ratio: 4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.25rem; text-align:center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(8,34,32,.035) 14px 28px),
    var(--paper);
  border:1px dashed var(--line); border-radius: var(--radius);
}
.loc-tile--wide { grid-column: span 2; aspect-ratio: 8/3; }
.loc-tile__mark {
  width:34px; height:26px;
  border:1.5px solid var(--green-500); border-radius:3px; opacity:.5; position:relative;
}
.loc-tile__mark::after {
  content:""; position:absolute; left:4px; right:4px; bottom:4px; height:9px; border-radius:2px;
  background:var(--green-500);
  clip-path: polygon(0 100%, 34% 22%, 55% 100%, 70% 55%, 100% 100%);
}
.loc-tile__label { font-size:.95rem; color:var(--ink-soft); max-width:26ch; line-height:1.4; }
.loc-tile__note { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-500); opacity:.7; }
@media (max-width: 720px) {
  .loc-gallery { grid-template-columns: 1fr 1fr; }
  .loc-tile--wide { grid-column: span 2; aspect-ratio: 16/7; }
}

/* ---- forms ---------------------------------------------------------- */
.form { display:grid; gap:1.1rem; }
.form-row { display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Reservation form sitting on the deep-green band */
.form--onDark { max-width: 760px; margin-inline: auto; }
.form--onDark .field label { color: var(--sage); }
.form--onDark .field .req { color: var(--sage); }
.form--onDark .field .hint,
.form--onDark .hint { color: rgba(217,225,204,.72); }
.form--onDark .field input,
.form--onDark .field select,
.form--onDark .field textarea {
  background: rgba(246,249,240,.06);
  border-color: rgba(217,225,204,.28);
  color: var(--cream);
  color-scheme: dark;
}
.form--onDark .field input::placeholder,
.form--onDark .field textarea::placeholder { color: rgba(217,225,204,.5); }
.form--onDark .field select option { color: var(--ink); background: var(--white); }
.form--onDark .field input:focus,
.form--onDark .field select:focus,
.form--onDark .field textarea:focus {
  border-color: var(--sage); box-shadow: 0 0 0 3px rgba(217,225,204,.18);
}
.form--onDark .field.has-error input,
.form--onDark .field.has-error select,
.form--onDark .field.has-error textarea { border-color: #E8A79F; }
.form--onDark .field .err { color: #F0BDB6; }
/* the CTA doesn't need the full grid width on desktop */
.form--onDark button[type="submit"] { justify-self: start; padding-inline: 2.6rem; }
@media (max-width: 640px) {
  .form--onDark button[type="submit"] { justify-self: stretch; }
}
.field { display:grid; gap:.4rem; }
.field label { font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:var(--green); }
.field .req { color: var(--green-500); }
.field input, .field select, .field textarea {
  font: inherit; font-size:1rem; padding:.85rem .9rem; border:1px solid var(--line);
  background:var(--white); border-radius: var(--radius); color:var(--ink); width:100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--green); box-shadow:0 0 0 3px rgba(8,34,32,.12); }
.field .hint { font-size:.8rem; color:var(--ink-soft); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:#b3392f; }
.field .err { color:#b3392f; font-size:.8rem; }

.alert { padding:1rem 1.2rem; border-radius:var(--radius); font-size:.95rem; }
.alert--ok { background:var(--paper); color:var(--green); border:1px solid var(--line); }
.alert--err { background:#f7e6e4; color:#8f2a22; border:1px solid #e5bdb8; }

.contact-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.info-list { display:grid; gap:1.3rem; }
.info-list h3 { font-size:1.1rem; margin-bottom:.2rem; }
.info-list p, .info-list a { color:var(--ink-soft); }

/* ---- breadcrumb ----------------------------------------------------- */
.crumbs { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding-top: 6.5rem; }
.crumbs a:hover { color: var(--green); }

/* ---- reveal animation ---------------------------------------------- */
[data-reveal] { opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1; transform:none; }
}

/* ---- footer --------------------------------------------------------- */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--green);
  color: rgba(246,249,240,.72);
  overflow: hidden;
  padding-top: clamp(4rem, 8vw, 6.5rem);
}

/* Landscape bleeding up from the base. The wash keeps the top near-white so
   the copy never sits on busy pixels — the photo only reads lower down. */
.footer-bg { position: absolute; inset: 0; z-index: -2; }
.footer-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; display: block; }
.footer-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Holds solid green well past halfway: the copy runs further down this
     footer than the reference, and the small print must not land on busy
     pixels. The canopy only opens up below it. */
  background: linear-gradient(180deg,
    var(--green) 0%, rgba(8,34,32,.99) 42%, rgba(8,34,32,.96) 58%,
    rgba(8,34,32,.88) 70%, rgba(8,34,32,.6) 82%,
    rgba(8,34,32,.3) 93%, rgba(8,34,32,.16) 100%);
}
.footer-inner { position: relative; z-index: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.9fr .85fr .85fr 1.15fr;
  gap: clamp(1.75rem, 3.2vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-brand img { height: 52px; width: auto; margin-bottom: 1.6rem; }
.footer-brand__lead {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.2; color: var(--cream); margin: 0 0 .9rem; max-width: 20ch;
}
.footer-brand__text {
  font-size: .93rem; line-height: 1.6; color: rgba(246,249,240,.72);
  max-width: 46ch; margin: 0 0 1.6rem;
}
.footer-brand__cta { margin-bottom: 1.8rem; }
.footer-social {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sage);
}
.footer-social a, .footer-legal a { position: relative; padding-bottom: .25rem; }
.footer-social a::after, .footer-legal a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--cream); transition: width .3s var(--ease);
}
.footer-social a:hover, .footer-legal a:hover { color: var(--cream); }
.footer-social a:hover::after, .footer-legal a:hover::after { width: 100%; }

.footer-h {
  font-family: var(--sans); font-size: .95rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--cream); margin-bottom: 1.2rem;
}
.footer-col ul { display: grid; gap: .85rem; }
.footer-col a:not(.btn) { color: rgba(246,249,240,.75); transition: color .25s var(--ease); }
.footer-col a:not(.btn):hover { color: var(--cream); }

.footer-contact { font-style: normal; }   /* <address> italicises by default */
.footer-contact__row { margin: 0 0 1rem; line-height: 1.55; text-wrap: pretty; }
.footer-contact__label {
  display: block; font-size: .6rem; letter-spacing: .16em;
  /* .45 alpha read as 4.18:1 on the dark-green footer — under the 4.5 floor at
     this size. .62 lifts it to 6.1:1 and still reads as a quiet label. */
  text-transform: uppercase; color: rgba(246,249,240,.62); margin-bottom: .25rem;
}
.footer-contact a:not(.btn) { color: rgba(246,249,240,.75); }
.footer-contact a:not(.btn):hover { color: var(--cream); }

.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 2rem; flex-wrap: wrap;
  padding-bottom: clamp(5rem, 10.5vw, 9.5rem);   /* room for the wordmark below */
  font-size: .74rem; color: rgba(246,249,240,.6);
  border-top: 1px solid rgba(246,249,240,.14); padding-top: 1.4rem;
}
.footer-bottom-inner p { margin: 0; }
.footer-langs { letter-spacing: .1em; text-transform: uppercase; font-size: .64rem; }
.footer-legal { display: flex; gap: 1.4rem; }

/* Oversized wordmark across the base, bleeding off both edges. */
.footer-wordmark {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  display: flex; justify-content: center;
  pointer-events: none; user-select: none;
  line-height: .78; overflow: hidden;
}
.footer-wordmark span {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 10.5vw, 11rem);
  letter-spacing: -.01em; white-space: nowrap;
  color: rgba(246,249,240,.58);
  transform: translateY(9%);   /* only the descender line is cropped */
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-contact { grid-column: 2 / -1; }
}
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  /* Stays two-up on phones. Stay and Explore are short link lists — stacked
     they ran the footer to nearly a full screen of scrolling on its own.
     Brand and Find Us keep the `grid-column: 1 / -1` set at 780px: the
     paragraph and the address are both too long for a half-width column. */
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .footer-bottom-inner { justify-content: flex-start; }

  /* The brand block spans both columns, so centring it reads as the footer's
     header rather than a stray third column. The two max-widths on the lead
     and the paragraph need auto side margins as well — text-align only moves
     the text inside the box, not the box itself. */
  .footer-brand { text-align: center; }
  /* The logo is a block-level img (site-wide reset), so text-align cannot move
     it — it needs the auto margins the same way the two capped-width
     paragraphs do. */
  .footer-brand img,
  .footer-brand__lead, .footer-brand__text { margin-inline: auto; }
  .footer-social { justify-content: center; }
}
}

/* ---- utilities ------------------------------------------------------ */
.mt-0{margin-top:0}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.stack > * + * { margin-top: 1rem; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .booking__fields { padding: 1rem 1.25rem; gap: 0 1rem; }
  .booking__submit { padding: 1rem 1.5rem; }
  /* tighten the nav before the mobile breakpoint so the now-unwrappable
     labels still fit on one row */
  .main-nav .nav-list { gap: 1.15rem; }
  .main-nav a { font-size: .74rem; letter-spacing: .1em; }
}
/* tablet: still one row, but the bar spans its container instead of sitting
   as a ~65%-wide island with dead space either side. The fields take the
   slack (1fr tracks); the submit stays content-sized. */
@media (min-width: 721px) and (max-width: 900px) {
  .booking { width: 100%; }
  .booking__form { grid-template-columns: 1fr auto; }
  .booking__fields { grid-template-columns: 1fr auto 1fr auto 1fr; }
}
@media (max-width: 900px) {
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: block; }
  .grid-3, .amenity-grid { grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  /* 2x2 stat grid needs an interior horizontal rule too */
  .statbar { grid-template-columns: repeat(2,1fr); }
  .statbar__item:nth-child(odd) { border-inline-start: 0; }
  .statbar__item:nth-child(n+3) { border-top: 1px solid rgba(217,225,204,.18); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .hero--home { min-height: 88svh; }
}
/* below this the bar switches from a fluid single row to a full-width,
   fields-above-button layout (see the max-width: 720px block below) */
@media (max-width: 640px) {
  /* a touch more breathing room at the screen edges on phones */
  .container { width: min(100% - 3rem, var(--container)); }
  .split, .grid-3, .grid-2, .amenity-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .form-row, .form-row--3 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery a:first-child { grid-column: span 2; grid-row: auto; }
  /* Matches the two-up rule nested under .site-footer above. That one wins on
     specificity either way, but leaving a `1fr` here would read as the phone
     layout to anyone scanning this block. */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom-inner { flex-direction: column; }
  .hero { min-height: 92svh; }
  .brand-logo { height: 44px; }
  .framed::before { inset: 8px -8px -8px 8px; }

  /* on a phone the swipe carries the gallery, so the arrows shrink back */
  .roomgal__nav { width: 34px; height: 34px; }
  .roomgal__nav--prev { left: .4rem; }
  .roomgal__nav--next { right: .4rem; }
  .room-specs { gap: 1.1rem; }

  /* a 46vw cap would crop the panoramas to slivers on a phone */
  .hstrip__track { gap: .8rem; }
  .hstrip__track img { height: clamp(240px, 42vh, 360px); max-width: 78vw; }

  .booking__field { gap: .1rem; }
  .booking__submit { padding: .85rem 1.5rem; }
}
/* the bar goes fluid and its single row becomes check in / check out side by
   side with guests spanning beneath — a one-column stack of five items
   (three fields plus two now-hidden rule dividers) was both too tall and,
   via the old `.booking { width: fit-content }`, stuck in a ~280px column
   with dead space on either side regardless of the viewport. */
@media (max-width: 720px) {
  .booking { width: 100%; margin-top: clamp(1.25rem, 4vw, 1.75rem); }
  .booking__form { grid-template-columns: 1fr; }
  .booking__submit { width: 100%; }
  .booking__fields {
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.25rem;
    padding: .85rem 1.1rem 1rem;
  }
  .booking__rule { display: none; }
  .booking__field--guests { grid-column: 1 / -1; }
}

/* ---- room cards (rooms grid) + room detail subheads ------------------- */
.room-card { text-decoration: none; color: inherit; }
.room-card .card__body .eyebrow { margin-bottom: .35rem; }
.room-card__foot { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.room-card__price { font-weight: 600; color: var(--green); }
.room-card__per { font-weight: 400; font-size: .82em; color: var(--ink-soft); }
.room-card__cta { font-size: .9rem; color: var(--ink-soft); transition: color .3s var(--ease); }
.room-card:hover .room-card__cta { color: var(--green); }
.room-subhead { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 1.4rem 0 .5rem; }

/* ---- availability results page ----------------------------------------- */
.avail-summary { font-family: var(--sans); font-size: 1rem; color: var(--ink-soft); margin-top: .5rem; }
.avail-change { margin-top: 1rem; }
.avail-change a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }

/* Results-page hero. .hero--page is a full 100svh screen, which is wrong here —
   the visitor asked to see rooms and shouldn't have to scroll a whole viewport
   to reach them. This variant is a banner: enough image to give the page a
   sense of place, then straight into the results. */
.hero--avail { min-height: 0; height: auto; position: relative; }
/* This headline carries a name and a sentence, not a two-word page title, so
   the global h1 clamp (up to 5.2rem) makes it wrap to three lines and swallow
   the screen. Smaller here, and the line-height opens up slightly to suit it. */
.hero--avail h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.12; max-width: 18ch; }
.hero--avail .hero__inner {
  padding-top: clamp(7.5rem, 14vh, 10rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 820px;
}
/* The base .avail-* colours are for a light page; over the hero photograph they
   would be close to invisible. */
.hero--avail .avail-summary {
  color: rgba(246,249,240,.92); font-size: 1.05rem; margin-top: 1rem;
}
.avail-note {
  font-family: var(--sans); font-size: .95rem; line-height: 1.55;
  color: rgba(246,249,240,.78); max-width: 54ch; margin-top: .7rem;
}
.hero--avail .avail-change { margin-top: 1.5rem; }
.hero--avail .avail-change a { color: var(--sage); }
.hero--avail .avail-change a:hover { color: var(--cream); }

/* Reassurance row between the trust strip and the results. Kept to a single
   line so it never pushes the lodges — the thing actually asked for — below
   the fold. */
.avail-reassure { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.avail-reassure__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--line);
}
.avail-reassure__count { margin: 0; font-family: var(--sans); font-size: 1rem; color: var(--ink-soft); }
.avail-reassure__count strong { color: var(--green); font-size: 1.15rem; }
.avail-review { margin: 0; max-width: 46ch; text-align: right; }
.avail-review__stars { color: #d9a441; font-size: .82rem; letter-spacing: .1em; }
.avail-review blockquote {
  margin: .15rem 0 .1rem; padding: 0; border: 0;
  font-family: var(--serif); font-size: .95rem; font-style: italic; color: var(--ink);
}
.avail-review figcaption { font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); }
.avail-review figcaption a { color: var(--green); text-decoration: underline; text-underline-offset: .2em; }

/* Trust row shown in place of a guest quote while testimonials() is empty.
   Facts and a link out to the property's own listing — nothing self-awarded. */
.avail-trust {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .5rem 1.6rem; margin: 0; padding: 0; list-style: none;
}
.avail-trust__item {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .82rem; color: var(--ink-soft);
}
.avail-trust__item svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  fill: none; stroke: var(--green-500); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.avail-trust__item a {
  color: var(--green); text-decoration: underline; text-underline-offset: .2em;
}
.avail-trust__item a:hover { color: var(--green-700); }

/* Results filter: type and nightly price, combined with AND. */
.avail-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.6rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.avail-filter__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.avail-filter__label {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-500); margin-right: .2rem;
}
.avail-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem 1rem; border: 1px solid var(--line);
  background: var(--white); border-radius: 999px;
  font-family: var(--sans); font-size: .82rem; color: var(--ink);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease);
}
.avail-chip:hover, .avail-chip:focus-visible {
  border-color: var(--green-500); box-shadow: 0 6px 18px rgba(8,34,32,.08);
}
.avail-chip.is-active {
  background: var(--green); border-color: var(--green); color: var(--cream);
}
.avail-chip__n {
  font-size: .68rem; letter-spacing: .04em; color: var(--green-500);
  padding-left: .1rem;
}
.avail-chip.is-active .avail-chip__n { color: rgba(246,249,240,.7); }

/* Price sits opposite the type chips, hard right on the same line. */
.avail-filter__price { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.avail-select { position: relative; display: inline-flex; }
.avail-select select {
  appearance: none; -webkit-appearance: none;
  padding: .42rem 2.3rem .42rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: .82rem; line-height: 1.4;
  cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.avail-select select:hover, .avail-select select:focus-visible {
  border-color: var(--green-500); box-shadow: 0 6px 18px rgba(8,34,32,.08);
}
/* Caret drawn on the wrapper: a background-image on the <select> would sit
   under the OS picker on some platforms. pointer-events off so the whole
   control stays clickable. */
.avail-select::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border-right: 1.5px solid var(--green-500);
  border-bottom: 1.5px solid var(--green-500);
  transform: rotate(45deg);
}
/* A chosen band is a live filter, so the control reads as "on" the way an
   active chip does. */
.avail-select.is-set select {
  background: var(--green); border-color: var(--green); color: var(--cream);
}
.avail-select.is-set::after { border-color: rgba(246,249,240,.85); }

.avail-filter__status {
  margin: 0; font-family: var(--sans); font-size: .8rem; color: var(--ink-soft);
}
.avail-filter__reset, .linklike {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: .8rem; color: var(--green);
  text-decoration: underline; text-underline-offset: .2em;
}
.avail-filter__reset:hover, .linklike:hover { color: var(--green-700); }
.avail-filter__empty {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  font-family: var(--sans); color: var(--ink-soft);
}

/* .card sets `display: flex`, which outranks the UA stylesheet's
   `[hidden] { display: none }` — without this a filtered-out card stays put. */
.room-card[hidden] { display: none; }

@media (max-width: 720px) {
  .avail-filter { gap: .8rem; }
  .avail-filter__group { width: 100%; }
  .avail-trust { justify-content: flex-start; }
}

/* Phone: every property card goes horizontal — thumbnail left, detail right.
   A full-width vertical card is roughly a whole screen each, so any list of
   fourteen becomes a very long scroll with one unit visible at a time. This
   is deliberately global: the home page tiers, the accommodation page and the
   availability results all render the same .room-card markup and should read
   the same on a phone. Anchored on .room-card so the tour, amenity and
   journal cards, which share .card but not this shape, are untouched. */
@media (max-width: 640px) {
  .grid:has(> .room-card) { gap: .9rem; }
  .room-card {
    display: grid; grid-template-columns: 148px 1fr; align-items: stretch;
    /* Keeps a card with no price from shrinking to its text — the home page
       and accommodation cards have a shorter foot than the results do. */
    min-height: 148px;
  }
  /* The thumbnail is taken out of flow so only the body decides the row
     height. Left in flow it contributes its own intrinsic ratio, and the
     portrait shots (Citrine is 374x562) stretched their card while the
     landscape ones let it collapse — same content, heights 51px apart. */
  .room-card .card__media { position: relative; height: 100%; }
  .room-card .card__media img {
    position: absolute; inset: 0;
    height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover;
  }
  .room-card .card__body { padding: .8rem .95rem .85rem; }
  .room-card .card__body .eyebrow { font-size: .58rem; margin-bottom: .2rem; }
  .room-card .card__body h4 { font-size: 1.16rem; margin-bottom: .15rem; }
  /* The tagline is a full sentence; in a column this narrow it costs three
     lines and pushes the price out of sight. The room page carries it. */
  .room-card .card__body > p { display: none; }
  .room-card .spec-row { gap: .1rem .7rem; margin: .2rem 0 .45rem; }
  .room-card .spec-row li { font-size: .74rem; gap: .3rem; }
  .room-card .spec-row svg { width: 13px; height: 13px; flex: 0 0 13px; }
  /* A wider thumbnail leaves the body too narrow for two specs — they wrap to
     a second line and give the height straight back. Guests is the one that
     decides whether a unit is worth tapping; the rest are on the room page. */
  .room-card .spec-row li:nth-child(n+2) { display: none; }
  .room-card__foot {
    padding-top: .25rem; flex-direction: column;
    align-items: flex-start; gap: .1rem;
  }
  .room-card__price { font-size: .95rem; }
  /* nowrap is dropped here on purpose. The total is the widest thing in the
     body — at 320px an 18-night stay already fills the column exactly, and
     quotes run to MAX_QUOTE_NIGHTS, so nowrap would clip the figure rather
     than show it. Every realistic stay still sits on one line at this size;
     an absurd one makes that single card taller instead of lying about the
     price. */
  .avail-price__meta { font-size: .7rem; white-space: normal; }
  /* The whole card is the link, so a "Book this stay" / "View room" line only
     repeats what tapping already does — and it costs 21px, which is most of
     the difference between a portrait thumbnail and a square one. The
     unavailable label stays: it carries information nothing else does. */
  .room-card__cta { display: none; }
  .room-card__unavailable { font-size: .78rem; }
}
/* Upsell strip below the results.
   .section--green sets `h3 { color: var(--cream) }` for headings sitting
   directly on the dark background — but .card is white, so without this the
   tour titles would be cream on white and effectively invisible. No other page
   pairs .section--green with .card, so the clash is new here. */
.avail-upsell .card__body h3 { color: var(--ink); }
.avail-upsell .head-block { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.avail-upsell .lede { color: rgba(246,249,240,.82); }
.avail-upsell__more {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.avail-upsell__more .btn--outline { color: var(--cream); border-color: rgba(246,249,240,.45); }
.avail-upsell__more .btn--outline:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }

/* Priced add-on services, enquire-only. A list rather than a card grid: the
   information that matters is a name and a price, and rows let the eye compare
   prices down a column the way a menu does. */
.avail-svc { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.avail-svc__head { margin-bottom: 1.1rem; }
.avail-svc__head h3 { margin: .2rem 0 .4rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.avail-svc__head p {
  font-family: var(--sans); font-size: .95rem; line-height: 1.6;
  color: rgba(246,249,240,.78); max-width: 62ch; margin: 0;
}
.avail-svc__list { list-style: none; margin: 0; padding: 0; }
.avail-svc__item {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: flex-start; justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid rgba(246,249,240,.18);
}
.avail-svc__list .avail-svc__item:last-child { border-bottom: 1px solid rgba(246,249,240,.18); }
.avail-svc__main { flex: 1 1 22rem; min-width: 0; }
.avail-svc__item h4 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 1.08rem; line-height: 1.3; color: var(--cream);
}
.avail-svc__route, .avail-svc__desc, .avail-svc__cap {
  font-family: var(--sans); line-height: 1.55; margin: .3rem 0 0;
  overflow-wrap: anywhere;
}
.avail-svc__route { font-size: .86rem; color: var(--sage); }
.avail-svc__desc  { font-size: .9rem;  color: rgba(246,249,240,.76); max-width: 60ch; }
.avail-svc__cap   { font-size: .78rem; color: rgba(246,249,240,.6); letter-spacing: .04em; }
.avail-svc__side {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: .25rem; text-align: right;
}
.avail-svc__price {
  font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--cream);
  white-space: nowrap;
}
.avail-svc__cta {
  font-family: var(--sans); font-size: .82rem; color: var(--sage);
  text-decoration: underline; text-underline-offset: .25em; white-space: nowrap;
}
.avail-svc__cta:hover { color: var(--cream); }
.avail-svc__note {
  font-family: var(--sans); font-size: .8rem; line-height: 1.55;
  color: rgba(246,249,240,.6); margin: .8rem 0 0; max-width: 62ch;
}
/* Transfers are the block guests actually need, so they get a panel of their
   own rather than sitting flush against the green like the rest. */
.avail-svc--transfer {
  background: rgba(246,249,240,.06);
  border: 1px solid rgba(246,249,240,.16);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.9rem);
}

/* Light variant — the same block on a white page (room.php, contact.php).
   Every rule above assumes cream type on deep green, so each colour has to be
   flipped explicitly: inherited alone, the names and prices would come through
   as near-white on white and the hairlines would vanish entirely. */
.avail-svc--light .avail-svc__head p { color: var(--ink-soft); }
.avail-svc--light .avail-svc__item { border-top-color: var(--line); }
.avail-svc--light .avail-svc__list .avail-svc__item:last-child { border-bottom-color: var(--line); }
.avail-svc--light .avail-svc__item h4 { color: var(--ink); }
/* --sage is a pale tint meant for dark ground; on white it is barely there. */
.avail-svc--light .avail-svc__route { color: var(--green-500); }
.avail-svc--light .avail-svc__desc  { color: var(--ink-soft); }
.avail-svc--light .avail-svc__cap   { color: var(--ink-soft); }
.avail-svc--light .avail-svc__price { color: var(--ink); }
.avail-svc--light .avail-svc__cta   { color: var(--green-500); }
.avail-svc--light .avail-svc__cta:hover { color: var(--green); }
.avail-svc--light .avail-svc__note  { color: var(--ink-soft); }
.avail-svc--light.avail-svc--transfer {
  background: var(--paper);
  border-color: var(--line);
}
/* Inside a room page's narrower main column the panel head can shrink a step;
   it is a supporting block there, not the headline it is on availability.php. */
.room-main .avail-svc__head h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.room-main .avail-svc { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.room-main .avail-svc:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  /* Stacked, the right-aligned price loses its column and reads as a stray. */
  .avail-svc__side { align-items: flex-start; text-align: left; flex-direction: row; gap: 1rem; }
  .avail-svc__item { gap: .5rem; }
}

@media (max-width: 720px) {
  .avail-reassure__row { flex-direction: column; align-items: flex-start; }
  .avail-review { text-align: left; }
  /* Claw back vertical space so the first bookable lodge lands at or above the
     fold — the whole point of the page is the rooms, not the preamble. */
  .hero--avail .hero__inner { padding-top: 6rem; padding-bottom: 1.75rem; }
  .avail-reassure { padding-block: 1.1rem; }
  .avail-reassure__row { gap: .75rem; padding-bottom: 1.1rem; }
  .avail-note { margin-top: .5rem; }
}
.avail-price { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.avail-price__meta { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
/* This page's foot carries a second line (the stay total) that the home page
   cards do not, so the CTA runs out of room and wraps away from its arrow.
   Keeping it whole lets the row wrap as a unit instead. */
.avail-price + .room-card__cta { white-space: nowrap; }
.room-card--unavailable { opacity: .55; }
.room-card--unavailable .card__media img { filter: grayscale(1); }
.room-card--unavailable:hover .card__media img { transform: none; }
.room-card__unavailable { font-size: .9rem; font-weight: 600; color: var(--ink-soft); }

/* ===================================================================== */
/* Room detail page — premium layout + sticky booking                    */
/* ===================================================================== */
.eyebrow--light { color: rgba(255,255,255,.82); }
.muted-note { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1rem; }

/* ---- Hero ---- */
.rhero { position: sticky; top: 0; min-height: 100svh; height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; z-index: 0; }
.rhero__media, .rhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rhero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.06) 32%, rgba(0,0,0,.40) 68%, rgba(0,0,0,.80) 100%); }
.rhero__inner { position: relative; padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: clamp(3.8rem, 9vh, 5.5rem); text-shadow: 0 1px 24px rgba(8,34,32,.45); }
.rhero__back { display: inline-block; color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; margin-bottom: 1rem; transition: color .3s var(--ease); }
.rhero__back:hover { color: #fff; }
.rhero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin: .3rem 0 .6rem; }
.rhero__lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 40ch; }
.rhero__facts { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 2.2rem; }
.rhero__facts li { display: flex; flex-direction: column; gap: .1rem; }
.rhero__facts span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.rhero__facts strong { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 640px) {
  .rhero { min-height: min(74vh, 560px); }
  .rhero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.58) 70%, rgba(0,0,0,.90) 100%); }
  .rhero__inner { padding-bottom: 1.6rem; text-shadow: 0 1px 20px rgba(8,34,32,.6); }
  .rhero h1 { font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.06; }
  .rhero__lede { font-size: 1rem; }
  .rhero__facts { margin-top: 1.1rem; gap: 1rem 1.7rem; }
  .rhero__facts span { color: rgba(255,255,255,.78); }
  .rhero__back { margin-bottom: .6rem; }
}

/* ---- Trust bar ---- */
.trust-bar { background: var(--green); color: rgba(255,255,255,.92); overflow: hidden; position: relative; z-index: 1; }
.trust-track { display: flex; width: max-content; padding-block: .8rem; animation: trust-scroll 34s linear infinite; }
.trust-bar:hover .trust-track { animation-play-state: paused; }
.trust-bar__item { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; white-space: nowrap; margin-right: 3rem; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding-inline: 1rem; gap: .4rem 0; }
  .trust-bar__item { margin-right: 1.6rem; }
}
.ti { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Two-column layout ---- */
.room-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.room-main { min-width: 0; }
.room-block { margin-top: clamp(2rem, 4vw, 3rem); }
.room-block:first-child { margin-top: 0; }
.room-main .roomgal { border-radius: var(--radius); overflow: hidden; }

/* amenities / features as checklist */
.amenity-grid { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; }
.amenity-grid--tight { grid-template-columns: repeat(3, 1fr); }
.amenity-grid li { display: flex; align-items: flex-start; gap: .55rem; font-size: .96rem; color: var(--ink); }
.amenity__ck { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .15rem; fill: none; stroke: var(--green-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* availability calendar */
.avail { display: flex; gap: 2rem; flex-wrap: wrap; }
.avail__month { flex: 1 1 240px; }
.avail__mname { font-weight: 600; margin-bottom: .6rem; }
.avail__dow, .avail__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.avail__dow { margin-bottom: .3rem; }
.avail__dow span { text-align: center; font-size: .64rem; letter-spacing: .08em; color: var(--ink-soft); text-transform: uppercase; }
.avail__grid { gap: 3px; }
.avail__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .78rem; border-radius: 6px; color: var(--ink); }
.avail__cell.is-empty { visibility: hidden; }
.avail__cell.is-free { background: #eef4ee; }
.avail__cell.is-booked { background: #e7dccb; color: #9a7b4f; text-decoration: line-through; }
/* --line is a hairline-border token (.14 alpha); as a text colour it rendered
   past dates at 1.33:1, effectively blank cells. Past nights are inert so they
   stay clearly de-emphasised, but the number has to be readable. */
.avail__cell.is-past { color: rgba(8,34,32,.38); }
.avail__legend { display: flex; gap: 1.4rem; margin-top: 1rem; font-size: .82rem; color: var(--ink-soft); }
.avail__legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
.dot--free { background: #eef4ee; border: 1px solid #cddccd; }
.dot--booked { background: #e7dccb; }

/* testimonials */
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: .8rem; }
.voice { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.4rem; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.voice__stars { color: #d8a13a; letter-spacing: .1em; font-size: .95rem; }
.voice blockquote { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ink); }
.voice figcaption { font-size: .85rem; font-weight: 600; margin-top: auto; }
.voices__more { display: inline-block; margin-top: 1.1rem; color: var(--green); font-weight: 600; text-decoration: none; }
.voices__more:hover { text-decoration: underline; }

/* every-stay-includes strip */
.incl__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: .8rem; }
.incl__item { text-decoration: none; color: inherit; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); display: flex; flex-direction: column; background: var(--white); }
.incl__item img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .7s var(--ease); }
.incl__item:hover img { transform: scale(1.06); }
.incl__body { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.incl__body span { font-size: .82rem; color: var(--green); }

/* ---- Sticky booking card ---- */
.room-aside { position: relative; align-self: stretch; } /* stretch so the sticky card has travel room */
.book-card { position: sticky; top: 92px; background: var(--white); border: 0; border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: var(--shadow-lift); }
.book-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.book-card__price span { font-size: 1.5rem; font-weight: 600; color: var(--green); }
.book-card__price em { display: block; font-style: normal; font-size: .78rem; color: var(--ink-soft); margin-top: .1rem; }
.book-card__rating { text-align: right; font-size: .8rem; }
.book-card__rating span { color: #d8a13a; letter-spacing: .05em; }
.book-card__rating a { display: block; color: var(--ink-soft); text-decoration: none; font-size: .74rem; }
.book-card__rating a:hover { color: var(--green); }
.book-card__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.book-card__dates label, .book-card__guests { display: flex; flex-direction: column; gap: .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.book-card__guests { margin-top: .6rem; }
.book-card input, .book-card select { font: inherit; font-size: .95rem; padding: .6rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); text-transform: none; letter-spacing: 0; }
.book-card input:focus, .book-card select:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(27,75,68,.14); }
.book-card__status { margin: .9rem 0 0; padding: .6rem .7rem; border-radius: 8px; font-size: .86rem; line-height: 1.4; }
.book-card__status.is-ok { background: #e6efe7; color: #1c5b32; border: 1px solid #bcd8bf; }
.book-card__status.is-bad { background: #f7ecdf; color: #8a5a1f; border: 1px solid #e6cfa8; }
.book-card__cta { margin-top: 1rem; }
.book-card__trust { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.book-card__trust li { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--ink-soft); }
.book-card__trust .ti { stroke: var(--green-500); }
.book-card__contact { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.book-card__wa { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--green); text-decoration: none; }
.book-card__tel { font-size: .85rem; color: var(--ink-soft); text-decoration: none; }
.book-card__tel:hover, .book-card__wa:hover { color: var(--green-700); }

/* ---- Mobile sticky bar ---- */
.room-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(8,34,32,.4); }
.room-mobilebar__price strong { color: var(--green); font-size: 1.05rem; }
.room-mobilebar__price span { display: block; font-size: .72rem; color: var(--ink-soft); }
.room-mobilebar .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .room-layout { grid-template-columns: 1fr; }
  .book-card { position: static; box-shadow: 0 18px 40px -28px rgba(8,34,32,.4); }
  .voices__grid, .incl__grid { grid-template-columns: 1fr; }
  .amenity-grid, .amenity-grid--tight { grid-template-columns: 1fr 1fr; }
  .room-layout-wrap { padding-bottom: 5rem; }
}
@media (max-width: 560px) {
  .amenity-grid, .amenity-grid--tight { grid-template-columns: 1fr; }
  .rhero__facts { gap: 1.2rem 1.8rem; }
}
@media (min-width: 901px) { .room-mobilebar { display: none !important; } }

/* ---- Specs card (in room body) ---- */
/* auto-fit rather than a fixed 4 columns: the Size cell is omitted when a unit
   has no recorded floor area, and a fixed grid would leave a stretched gap. */
.specs-card { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-soft); }
.specs-card li { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.1rem 1.2rem; }
.specs-card li + li { border-left: 1px solid var(--line-soft); }
.specs-card__ic { width: 20px; height: 20px; stroke: var(--green-500); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.specs-card span { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.specs-card strong { font-size: 1.02rem; }
@media (max-width: 640px) {
  .specs-card { grid-template-columns: 1fr 1fr; }
  .specs-card li + li { border-left: 0; }
  .specs-card li:nth-child(n+2) { border-top: 1px solid var(--line-soft); }
  .specs-card li:nth-child(2) { border-top: 0; }
  .specs-card li:nth-child(odd) { border-right: 1px solid var(--line-soft); }
}

/* ---- Airbnb-style date range picker ---- */
.dr { position: relative; }
.dr__fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.dr.is-open .dr__fields { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(27,75,68,.14); }
.dr-field { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; text-align: left; padding: .55rem .75rem; background: var(--white); border: 0; border-right: 1px solid var(--line); cursor: pointer; font: inherit; }
.dr-field:last-child { border-right: 0; }
.dr-field:hover { background: #f7f9f6; }
.dr-field__label { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.dr-field__val { font-size: .92rem; color: var(--ink-soft); }
.dr-field__val.is-set { color: var(--ink); font-weight: 600; }

.dr-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: min(600px, 84vw); background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 34px 66px -26px rgba(8,34,32,.5); padding: 1.2rem 1.2rem 1rem; }
.dr-cal { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.dr-m { flex: 1 1 230px; min-width: 0; }
.dr-m__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.dr-m__name { font-weight: 600; font-size: .95rem; }
.dr-nav { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--white); border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.dr-nav:hover { border-color: var(--green-500); color: var(--green); }
.dr-nav:disabled { opacity: 0; pointer-events: none; }
.dr-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .35rem; }
.dr-dow span { text-align: center; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.dr-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: .82rem; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 9px; }
.dr-cell.is-empty { visibility: hidden; }
.dr-cell.is-free:hover { box-shadow: inset 0 0 0 1.6px var(--green-500); }
.dr-cell.is-inrange, .dr-cell.is-preview { background: #e9f1e9; border-radius: 0; }
.dr-cell.is-preview-end { background: #d4e5d4; border-radius: 0 9px 9px 0; font-weight: 600; }
.dr-cell.is-start, .dr-cell.is-end { background: var(--green); color: #fff; font-weight: 600; }
.dr-cell.is-start { border-radius: 9px 0 0 9px; }
.dr-cell.is-end { border-radius: 0 9px 9px 0; }
.dr-cell.is-booked { color: var(--line); text-decoration: line-through; cursor: default; }
.dr-cell.is-past { color: rgba(8,34,32,.34); cursor: default; }
.dr-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.dr-clear { background: none; border: 0; text-decoration: underline; cursor: pointer; font: inherit; font-size: .86rem; color: var(--ink); }

.book-card__status.is-neutral { background: #eef2ec; color: var(--green-700); border: 1px solid var(--line-soft); }

@media (max-width: 900px) { .dr-pop { left: 0; right: auto; } }

/* ---- Two-step booking (in-page) ---- */
.book-card textarea { font: inherit; font-size: .95rem; padding: .6rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); width: 100%; resize: vertical; }
.book-card textarea:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(27,75,68,.14); }
.book-step__back { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .86rem; color: var(--ink-soft); }
.book-step__back:hover { color: var(--green); }
.book-step__summary { margin: .8rem 0 .4rem; padding: .8rem .9rem; background: #eef2ec; border-radius: 10px; display: flex; flex-direction: column; gap: .15rem; }
.book-step__summary strong { font-size: .98rem; }
.book-step__summary span { font-size: .85rem; color: var(--ink-soft); }
.book-step2 label { display: flex; flex-direction: column; gap: .3rem; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-top: .8rem; }
.book-step2 .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--line); }
.book-step__err { margin: .9rem 0 0; font-size: .86rem; }
.book-step__fine { margin-top: .8rem; font-size: .76rem; color: var(--ink-soft); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Step 2 · "Add to your stay" — optional, and absent when nothing is published */
.book-extras__title { margin: .9rem 0 .3rem; font-size: 1.12rem; }
.book-extras__intro { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; }
.book-extras__group + .book-extras__group { margin-top: 1.1rem; }
.book-extras__eyebrow { display: block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--green-700); margin-bottom: .5rem; }
.book-extras__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.book-extra { display: flex; align-items: flex-start; gap: .65rem; padding: .65rem .7rem; border: 1px solid #e5ede3; border-radius: 11px; background: var(--white); cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.book-extra:hover { border-color: var(--green-500); }
.book-extra:has(.book-extra__ck:checked) { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(27,75,68,.12); background: #f5f9f4; }
.book-extra__ck { flex: 0 0 auto; margin-top: .18rem; width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; }
.book-extra__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.book-extra__name { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.book-extra__route,
.book-extra__cap { font-size: .76rem; color: var(--ink-soft); }
.book-extra__price { flex: 0 0 auto; font-size: .8rem; font-weight: 600; color: var(--green-700); text-align: right; padding-top: .08rem; }
.book-extras__actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.book-extras__actions .btn { flex: 1 1 auto; }

.book-done { text-align: center; padding: 1rem .5rem; }
.book-done__mark { width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 50%; background: #e6efe7; color: #1c5b32; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; }
.book-done h3 { margin-bottom: .4rem; }
.book-done p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.1rem; }
.book-done__wa-note { font-size: .82rem; margin-bottom: .5rem !important; }
.book-done .btn + .btn { margin-top: .6rem; }

/* Confirmation upsell — tours & experiences */
.book-upsell { margin-top: 1.4rem; padding: 1.1rem 1rem 1rem; border-radius: 16px; background: linear-gradient(180deg, #f3f8f2, #eef4ed); border: 1px solid #dde8db; text-align: left; }
.book-upsell__eyebrow { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--green-700); margin-bottom: .85rem; }
.book-upsell__spark { width: 17px; height: 17px; fill: #cf9f4a; flex: 0 0 auto; }
.book-upsell__list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .95rem; }
.book-upsell__item { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; padding: .45rem; border-radius: 11px; background: var(--white); border: 1px solid #e5ede3; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.book-upsell__item:hover { border-color: #c6dcc3; box-shadow: 0 8px 18px -12px rgba(8,34,32,.35); transform: translateY(-1px); }
.book-upsell__item img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.book-upsell__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.book-upsell__txt strong { font-size: .9rem; line-height: 1.2; }
.book-upsell__txt em { font-style: normal; font-size: .76rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-upsell__arrow { color: var(--green); font-size: 1.05rem; flex: 0 0 auto; transition: transform .2s var(--ease); }
.book-upsell__item:hover .book-upsell__arrow { transform: translateX(3px); }
.book-upsell__cta { margin-top: .2rem; background: var(--white); }
.book-done .book-upsell .btn { margin-top: .2rem; }

/* ===================================================================== */
/* Blog / Journal                                                        */
/* ===================================================================== */
/* Post hero: shorter + not pinned, so readers reach the article quickly */
.hero--post { min-height: 62svh; height: auto; align-items: end; position: relative; }

.blog-card { text-decoration: none; color: inherit; }
.blog-card .card__media img { aspect-ratio: 3 / 2; }
.blog-card__meta { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.blog-card__cat { color: var(--green); font-weight: 600; }
.blog-card .card__body h3 { margin: .4rem 0 .5rem; }
.blog-card__more { margin-top: auto; padding-top: .8rem; color: var(--green); font-weight: 600; font-size: .9rem; }

/* Article + sticky "In this article" table of contents */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.post-body { grid-column: 1; grid-row: 1; }                   /* article on the LEFT */
.post-aside { grid-column: 2; grid-row: 1; align-self: stretch; }  /* TOC + Explore sidebar on the RIGHT */
.post-aside__inner { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.6rem; }
.post-toc__title { display: block; margin-bottom: .5rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.post-toc nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.post-toc nav a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; font-size: .9rem; line-height: 1.35; transition: color .2s var(--ease), border-color .2s var(--ease); }
.post-toc nav a:hover { color: var(--ink); }
.post-toc nav a.is-active { color: var(--green); border-left-color: var(--green); font-weight: 600; }

/* Sidebar useful blocks */
.aside-card--cta { background: var(--green); color: rgba(255,255,255,.9); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.aside-card--cta strong { display: block; color: #fff; font-size: 1.02rem; margin-bottom: .3rem; }
.aside-card--cta p { margin: 0 0 .85rem; font-size: .86rem; }
.aside-card__tel { display: block; text-align: center; margin-top: .6rem; color: rgba(255,255,255,.85); text-decoration: none; font-size: .85rem; }
.aside-card__tel:hover { color: #fff; }
.aside-links ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.aside-links a { display: block; padding: .45rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; transition: color .2s var(--ease); }
.aside-links a:hover { color: var(--green); }
.aside-feature { display: block; position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: #fff; }
.aside-feature img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.aside-feature:hover img { transform: scale(1.05); }
.aside-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,34,32,.82)); }
.aside-feature__tag { position: absolute; top: .7rem; left: .8rem; z-index: 1; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.92); color: var(--green); padding: .15rem .5rem; border-radius: 999px; }
.aside-feature__name { position: absolute; left: .9rem; right: .9rem; bottom: .7rem; z-index: 1; font-weight: 600; font-size: 1.02rem; }

/* Breadcrumb, article figure, FAQ, author */
.post-crumbs { font-size: .82rem; margin-bottom: 1rem; color: rgba(255,255,255,.72); }
.post-crumbs a { color: rgba(255,255,255,.88); text-decoration: none; }
.post-crumbs a:hover { color: #fff; }
.post-crumbs span { margin: 0 .3rem; opacity: .6; }
.post-fig { margin: 1.9rem 0; }
.post-fig img { width: 100%; height: auto; border-radius: var(--radius); }
.post-fig figcaption { margin-top: .5rem; font-size: .82rem; color: var(--ink-soft); text-align: center; }
.post-faq { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.post-faq h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1rem; scroll-margin-top: 100px; }
.post-faq__item { border-bottom: 1px solid var(--line); }
.post-faq__item summary { cursor: pointer; font-weight: 600; padding: .85rem 1.6rem .85rem 0; list-style: none; position: relative; }
.post-faq__item summary::-webkit-details-marker { display: none; }
.post-faq__item summary::after { content: "+"; position: absolute; right: .1rem; top: .7rem; font-size: 1.3rem; color: var(--green); }
.post-faq__item[open] summary::after { content: "\2212"; }
.post-faq__item p { margin: 0 0 1rem; color: #3a453f; line-height: 1.7; }
.post-author { display: flex; align-items: center; gap: .9rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.post-author img { width: 48px; height: 48px; border-radius: 50%; }
.post-author strong { display: block; }
.post-author span { font-size: .85rem; color: var(--ink-soft); }

.post-body { max-width: 72ch; }
.post-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.2rem 0 .8rem; scroll-margin-top: 100px; }
.post-body h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.post-body p { margin: 0 0 1.1rem; line-height: 1.75; font-size: 1.05rem; color: #2c342f; }
.post-body ul { margin: 0 0 1.2rem 1.2rem; line-height: 1.7; }
.post-body li { margin-bottom: .4rem; }
.post-body a { color: var(--green); text-underline-offset: 3px; }
.post-body blockquote { margin: 1.7rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 3px solid var(--green-500); font-size: 1.15rem; font-style: italic; color: var(--green-700); }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.4rem 0; }

.post-share { display: flex; align-items: center; gap: 1.1rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .92rem; }
.post-share a { color: var(--green); text-decoration: none; font-weight: 600; }
.post-share a:hover { text-decoration: underline; }
.post-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.4rem; padding: 1.6rem 1.8rem; background: var(--paper); border-radius: var(--radius); }
.post-cta-band h3 { margin: 0 0 .2rem; }
.post-cta-band p { margin: 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-body, .post-aside { grid-column: auto; grid-row: auto; }
  .post-aside { align-self: auto; order: 2; }     /* sidebar drops below the article */
  .post-aside__inner { position: relative; top: 0; gap: 1.3rem; }
  .post-aside .post-toc { display: none; }         /* TOC is a desktop reading aid */
}

/* =====================================================================
   Scroll-driven text reveal
   Blocks marked [data-gradient-scroll] start faint and fill top-to-bottom
   as they scroll into view. Uses background-clip:text with a --r variable
   rather than per-letter spans, so the text stays selectable, translatable
   and readable by screen readers.
   ===================================================================== */
.tgs-on {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg,
    var(--tgs-ink) 0%,
    var(--tgs-ink) calc(var(--r, 0) * 100%),
    var(--tgs-faint) calc(var(--r, 0) * 100% + 12%),
    var(--tgs-faint) 100%);
}
/* Nested inline elements must inherit the clip, or <strong> paints solid. */
.tgs-on strong, .tgs-on em, .tgs-on a, .tgs-on span {
  color: inherit;
  -webkit-text-fill-color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .tgs-on {
    color: var(--tgs-ink);
    -webkit-text-fill-color: var(--tgs-ink);
    background-image: none;
  }
}

/* =====================================================================
   Pinned story section (home)
   The outer section is deliberately taller than the viewport; the inner
   panel sticks, so the reader stays on the copy while the scroll drives
   the reveal. Once progress completes, the panel releases normally.
   ===================================================================== */
.story {
  position: relative;
  height: 300svh;                 /* ~200svh of travel for four lines */
  background: var(--white);
  z-index: 1;
}
.story__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  /* clear the fixed header, and never let the panel overflow a short screen */
  padding: calc(var(--header-h) + 1rem) clamp(1.25rem, 5vw, 4rem) 2rem;
  overflow: hidden;
}
.story__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.2rem);
  max-width: 46rem;
}
.story__eyebrow { margin-bottom: clamp(.5rem, 2vw, 1.2rem); }
.story__line {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.9vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.story__line--last { font-style: italic; }
.story__link { margin-top: clamp(.8rem, 2vw, 1.4rem); }

/* Without JS (or with reduced motion) the section must not eat 300svh of
   empty scroll, so it collapses back to a normal block. */
.story:not(.story--pinned) { height: auto; }
.story:not(.story--pinned) .story__sticky {
  position: static;
  height: auto;
  padding-block: clamp(4rem, 10vw, 8rem);
}
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .story .story__sticky { position: static; height: auto; padding-block: clamp(4rem, 10vw, 8rem); }
}

/* ---- story collage ---------------------------------------------------
   Scatter of shots in the gutters either side of the pinned copy. Each is
   absolutely placed from inline styles (position, width, tilt) and revealed
   by --a, which main.js drives from the section's scroll progress.
   Only shown where there is genuine room beside the 46rem text column. */
.story__shot {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.story__shot img { width: 100%; height: auto; display: block; }

/* Desktop: absolute scatter in the gutters, each shot fading up on scroll.
   Position comes from the per-shot custom properties set in the markup. */
@media (min-width: 1200px) {
  .story__collage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .story__shot {
    position: absolute;
    top: var(--top);
    width: var(--w);
    opacity: var(--a, 0);
    transform: translateY(calc((1 - var(--a, 0)) * 34px)) rotate(var(--rot, 0deg));
    will-change: opacity, transform;
  }
  .story__shot--left  { left: var(--edge); }
  .story__shot--right { right: var(--edge); }
}

/* Mobile / tablet: the copy pins to the top of the panel and the shots become
   a full-bleed strip underneath that scrolls sideways as the page scrolls. */
@media (max-width: 1199px) {
  .story__sticky {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: clamp(1rem, 3vw, 2rem);
    padding-inline: 0;
  }
  /* copy sits above the strip regardless of DOM order (the collage is first
     in the markup so it can be the absolute scatter on desktop) */
  .story__inner { order: 0; flex: 0 0 auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
  .story__line { font-size: clamp(1.15rem, 4.6vw, 1.7rem); max-width: 22ch; }
  .story__collage {
    order: 1;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .story__track {
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 2.5vw, 1rem);
    height: 100%;
    padding-inline: clamp(1.25rem, 5vw, 4rem);
    will-change: transform;
  }
  .story__shot {
    flex: 0 0 auto;
    width: min(62vw, 300px);
    height: 100%;
    transform: rotate(var(--rot, 0deg));
  }
  .story__shot img { height: 100%; object-fit: cover; }
}
/* The copy must always sit above the scatter. */
.story__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .story__shot { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .story__track { transform: none !important; }
}