/* =====================================================================
   The Rock & Sea design system
   Editorial luxury eco-lodge.
   Palette: deep-sea blue, cream + pale sage (from the reference site), black.
   Type: Zodiak (display serif) + Satoshi (sans).
   ===================================================================== */

/* ---- fonts (self-hosted, Fontshare) --------------------------------- */
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-700-italic.woff2') format('woff2');font-weight: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-sea blue, cream, sage, black.
     The --green* names are historic: .section--green etc. are markup classes,
     so the names stayed while the values moved to the blue #012C44. */
  --green:      #012C44;   /* brand blue (1/44/68) */
  --green-700:  #013C5C;   /* hover / raised surfaces */
  --green-500:  #024A74;   /* 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(1,44,68,.14);
  --line-soft:  rgba(1,44,68,.08);

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

  /* type */
  --serif: "Zodiak", 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;
  /* For the few surfaces that are meant to read as a soft panel rather than a
     hairline-square one — the stay-search bar over the hero, so far. */
  --radius-lg: 16px;
  --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 --------------------------------------------------------- */
/* A deep-green bar with cream type and the white logo. That is the resting
   state; over a full-bleed hero it starts transparent and the green fades in
   on scroll — see the .is-solid rules further down. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--green);
  color: var(--cream);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
/* Once it has a background of its own it needs an edge, or it sits on the
   content with nothing between them. */
.site-header.is-solid { box-shadow: 0 6px 24px -16px rgba(1,44,68,.5); }
.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 .nav-list > li > a {
  font-weight: 400; font-size: .8rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cream); padding-block: .4rem;
  position: relative;
}
.main-nav .nav-list > li > a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--cream); transition: width .3s var(--ease);
}
.main-nav .nav-list > li > a:hover::after,
.main-nav .nav-list > li > a[aria-current="page"]::after { width: 100%; }

/* mobile nav */
.nav-toggle { display: none; width: 46px; height: 46px; background: none; border: 0; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background: var(--cream); margin: 5px 0; transition: .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  background: var(--green); color: var(--cream); padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid rgba(246,249,240,.12);
  /* The header is position:fixed and opening the menu locks body scroll, so a
     menu taller than the screen had no way to reach its own bottom — the panel
     has to do its own scrolling. svh, not vh: vh is the LARGE viewport on
     mobile, which hides the last item behind the browser's own chrome. */
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* The label stays a link; the button beside it opens the sub-list. The rule
   below moves the underline onto the row so the two read as one item. */
.mnav-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid rgba(246,249,240,.12); }
.mnav-row > a { flex: 1; border-bottom: 0; }
.mnav-more {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.mnav-more .nav-caret { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.mnav-more[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mobile-nav ul { display: grid; gap: .35rem; margin-bottom: 1.25rem; }
/* .mobile-nav ul sets display, which outranks the browser's own
   [hidden]{display:none} — without this the collapsed list stays on
   screen with its hidden attribute set, which is worse than no
   disclosure at all. */
.mobile-nav ul[hidden] { display: none; }
.mobile-nav a { display: block; padding: .8rem .25rem; font-size: 1.35rem; font-family: var(--serif); border-bottom: 1px solid rgba(246,249,240,.12); }
.mobile-nav__call { display:block; text-align:center; margin-top:1rem; letter-spacing:.1em; color: rgba(246,249,240,.8); }

/* ---- header over a hero ----------------------------------------------
   A page that opens on a full-bleed photograph gets a transparent bar, so the
   picture runs all the way to the top of the screen. assets/js/main.js adds
   .is-solid past 40px of scroll and the green fades back in under the nav.

   :has() keys off the hero itself rather than a per-page class, so the pages
   with no hero — thank-you, 404 — keep the solid bar and never put cream
   links over cream content. A browser without :has() gets the solid bar
   everywhere, which is a complete look rather than a broken one. */
body:has(.hero, .rhero) .site-header:not(.is-solid) {
  background: transparent;
  box-shadow: none;
}
/* Cream type needs a shadow over a photograph that it never needed over the
   green bar — the hero scrim carries most of it, this covers the brightest
   frames (midday water, pale sand). */
body:has(.hero, .rhero) .site-header:not(.is-solid) .main-nav a,
body:has(.hero, .rhero) .site-header:not(.is-solid) .header-cta {
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
body:has(.hero, .rhero) .site-header:not(.is-solid) .brand-logo {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.45));
}

/* A veil fading out under the bar. The hero scrims were built to carry a
   headline in the middle of the screen, not six small cream nav labels along
   the very top, and over the brightest of them — the room pages' sunlit
   canopy — the shadow alone left the nav washed out. This holds the marks on
   every hero without putting a visible bar back: the photograph still runs to
   the top edge, it is simply darker for the first 76px.

   A pseudo-element rather than the header's own background-image, because
   background-image does not interpolate: the veil has to fade out in step
   with the green fading in, or it snaps off mid-transition. z-index works
   because .site-header is a stacking context of its own (fixed + z-index),
   so -1 puts the veil above its background and below the nav, not behind
   the page. */
body:has(.hero, .rhero) .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,0));
  transition: opacity .5s var(--ease);
}
/* Gone once the bar has a colour of its own — scrolled, or holding the open
   drawer — where a second dark layer would only muddy it. */
body:has(.hero, .rhero) .site-header.is-solid::before,
body:has(.hero, .rhero) .site-header:has([data-nav-toggle][aria-expanded="true"])::before {
  opacity: 0;
}

/* The mobile drawer opens BELOW the bar, so on a hero page the transparent
   strip would still be showing the photograph above a solid green panel: two
   surfaces stacked, which reads as a bug. Painting the bar the drawer's own
   colour while it is open makes the overlay one sheet.

   Two selectors on purpose. The long one has to out-specify the transparent
   rule above to win on hero pages; the short one carries every other page. */
.site-header:has([data-nav-toggle][aria-expanded="true"]),
body:has(.hero, .rhero) .site-header:has([data-nav-toggle][aria-expanded="true"]) {
  background: var(--green);
  box-shadow: 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;
  /* 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) without flattening the photograph. */
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.74) 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(0,0,0,.35);
}
.hero__title .italic,
.hero__title .bold { display: block; }

/* 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(0,0,0,.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.
   Only the type is smaller: the frame is the full screen every other page
   opens on, so the restaurant does not read as a lesser page. */
.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); }
.hero--home::after { z-index: 1; }
.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; }
@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, so the bar does not sit on the hero photograph as a hard
     rectangle. overflow:hidden is what clips the sage submit button into the
     same curve; the calendar and guests popovers are position:fixed and
     portalled to <body>, so they escape the clip rather than being cut off. */
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* 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(1,44,68,.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);
  box-shadow: 0 26px 60px -22px rgba(1,44,68,.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; }
.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 */
.booking--inline .booking__form { border: 1px solid rgba(246,249,240,.12); }

/* ---- 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);
  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); }
/* Headings carry no margin globally, so a heading and the paragraph under it
   were separated by nothing but line-height and read as one block. */
.split__body h2, .split__body h3 { margin-bottom: .85rem; }
.split__body p + p { margin-top: 1rem; }
.split__body .btn, .split__body .textlink { margin-top: 1.6rem; }

/* framed image */
.framed { position: relative; }
.framed::before { content:""; position:absolute; inset: 14px -14px -14px 14px; border:1px solid var(--green); border-radius: var(--radius); z-index:-1; }

/* section heading block */
.head-block { max-width: 640px; margin-bottom: clamp(2rem,4vw,3.2rem); }
/* Same reason as .split__body above: the lede sat flush under the heading. */
.head-block h2 { margin-bottom: .85rem; }
.head-block.center { margin-inline: auto; }

/* ---- 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: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; display:flex; flex-direction:column; }
.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; }
.card__body h3 { margin-bottom: .5rem; }
.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;
  /* One scrolling axis, stated. Setting only overflow-x leaves overflow-y
     computing to `auto`, so the track scrolls both ways and iOS has to guess
     from the first few pixels of a swipe which axis you meant — a slightly
     diagonal flick then pans vertically inside the box instead of turning the
     page. Naming `hidden` here makes a horizontal swipe unambiguous. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  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; }
/* Every slide is the same fixed box, and it exists before its photograph does.
   This is what makes the slider work on a phone. Sized from its own image, an
   unloaded lazy <img> is 0x0, so the slide is 0px tall, so it never intersects
   the viewport, so the browser never loads it — a deadlock that leaves every
   frame after the first permanently blank and nothing to swipe to. */
.roomgal__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; aspect-ratio: 3 / 2; }
.roomgal__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Placeholder frame: matches the photo box so the carousel never jumps.
   Kept in step with the 3:2 on .roomgal__slide above — that is what "matches"
   means here, and it stopped being true when the photo box changed. */
.roomgal__slide--placeholder {
  aspect-ratio: 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(1,44,68,.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(1,44,68,.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 cards — photograph above, words below.
   They used to be full-bleed images with the copy laid over a dark gradient,
   which cost the bottom third of every photograph. Built on the same shape as
   .card instead: media block, then body, so nothing sits on the picture. */
.amenity { display:flex; flex-direction:column; overflow:hidden; border-radius: var(--radius);
           background: var(--white); border: 1px solid var(--line-soft); color: var(--ink); }
.amenity__media { overflow:hidden; }
.amenity__media img { width:100%; aspect-ratio: 4/3; object-fit:cover; transition: transform .7s var(--ease); }
/* Only the ones that go somewhere react to a cursor. */
a.amenity:hover .amenity__media img { transform: scale(1.06); }
.amenity__body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.amenity__body h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.amenity__body p { color: var(--ink-soft); font-size:.94rem; margin: 0; }
/* Pushed to the bottom edge so the links line up across a row whatever the
   copy above them does. */
.amenity__body .textlink { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }

/* ---- 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; }
/* A picture, when the package has one. Pulled out to the card's edges — the
   card carries its own padding, and a photograph inset from a border reads as
   an afterthought rather than the top of the card. */
.pkg__media {
  margin: -2rem -1.8rem 1.3rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; background: var(--paper);
}
.pkg__media img { display:block; width:100%; height:auto; aspect-ratio: 3 / 2; object-fit: cover; }

.pkg h3 { margin-bottom:.2rem; }
/* The condition the price depends on — "From 3 nights", "Per couple". Sits
   between the name and the figure because it qualifies the figure. */
.pkg__tag { margin:0 0 .5rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.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(0,0,0,.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(1,44,68,.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(1,44,68,.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 ----------------------------------------------------- */
/* Only the experience page uses these, and they sit inside .exp-wrap's own
   padding — the 6.5rem that used to be here put a screenful of white above the
   first photograph. */
.crumbs { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom: .9rem; }
.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 { background: var(--green); color: rgba(246,249,240,.8); padding-top: clamp(3rem,6vw,5rem); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand img { height:64px; width:auto; margin-bottom:1rem; }
.footer-tag { font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--sage); max-width:36ch; }
.footer-social { display:flex; gap:1.2rem; margin-top:1.2rem; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; }
.footer-social a:hover { color: var(--cream); }
.footer-h { font-family:var(--sans); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage); margin-bottom:1.1rem; font-weight:600; }
.footer-col ul { display:grid; gap:.6rem; }
.footer-col a:hover { color:var(--cream); }
.footer-contact { font-style: normal; }   /* <address> italicises by default */
.footer-contact p { margin-bottom:.5rem; }
.footer-contact .btn { margin-top:.6rem; }
.footer-bottom { border-top:1px solid rgba(246,249,240,.12); padding-block:1.4rem; font-size:.82rem; }
.footer-bottom-inner { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-legal a:hover { color:var(--cream); }

/* ---- 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; }
}
/* 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; }
  .footer-grid { grid-template-columns: 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__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; }
/* 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; }
.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,.45) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.88) 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(0,0,0,.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 li > 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) {
  /* height: 100svh above is a definite size, so it beat this min-height and the
     hero stayed a full screen tall on phones — the shorter mobile hero this
     rule was written for never actually happened. height: auto hands control
     back to min-height, and the hero grows past it when the title wraps.

     position: relative drops the desktop pin. Sticky over a full-height photo
     is a reveal on a large screen; on a phone it reads as a stuck page — the
     trust strip slides up over a hero that will not move, then the white
     section follows it, which is exactly as odd as it sounds.

     relative, NOT static: footer.php appends .hero-scroll-cue inside the hero
     and that cue is position:absolute. Take away the hero's positioning and the
     cue anchors to the page instead, landing a 44px transparent button in the
     middle of the gallery where it silently eats the first swipe. */
  .rhero { min-height: min(74vh, 560px); height: auto; position: relative; }
  .rhero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.3) 34%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.96) 100%); }
  .rhero__inner { padding-bottom: 1.6rem; text-shadow: 0 1px 20px rgba(0,0,0,.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 li > 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; }
.avail__cell.is-past { color: var(--line); }
.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: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.4rem; box-shadow: 0 24px 50px -30px rgba(1,44,68,.4); }
.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(1,44,68,.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(1,44,68,.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) ---- */
.specs-card { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.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 li > 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(1,44,68,.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: var(--line-soft); 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(1,44,68,.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(1,44,68,.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; }
/* --- collapsible sections (+## in the body markdown) ----------------------- */
/* The summary is a heading first and a control second. It takes the face, size,
   colour and vertical rhythm of an h2 in this body, so a page of them reads as
   the same run of headings it was before — the only visible addition is the
   chevron beside the words. No box, no rule, no smaller type: opening something
   should not cost it its typography.
   Named .fold rather than .pkg because .pkg is the wedding-package card. */
.fold__head {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 2.2rem 0 .8rem;                 /* matches .post-body h2 */
  cursor: pointer;
  list-style: none;                       /* Firefox's default triangle */
}
.fold__head::-webkit-details-marker { display: none; }   /* Safari's */
.fold__head:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.fold__name {
  font-family: var(--serif); font-weight: 400; line-height: 1.08;
  letter-spacing: -.005em; color: var(--green);
  font-size: clamp(1.5rem, 3vw, 2rem);    /* matches .post-body h2 */
}
.fold__head:hover .fold__name { color: var(--green-700); }
.fold__ic {
  flex: 0 0 auto; align-self: center; width: 21px; height: 21px;
  fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.fold[open] .fold__ic { transform: rotate(180deg); }
.fold__body > :last-child { margin-bottom: 0; }

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

/* ==========================================================================
   Experience pages (experience.php)
   Two columns on desktop, sticky booking card. The facts and price rows are
   deliberately NOT the room page's .specs-card grid: experience values are
   free text ("4h 30m half day · 9h 30m full day") and a narrow fixed column
   breaks them one word per line.
   ========================================================================== */

/* Tight against the trust bar. The photographs are the first thing worth
   seeing, so nothing above them earns a screenful of white. */
.exp-wrap { padding-top: clamp(1.1rem, 2.2vw, 1.8rem); }

.exp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.exp-main  { grid-column: 1; min-width: 0; }
.exp-aside { grid-column: 2; align-self: stretch; }

/* --- at-a-glance facts ----------------------------------------------------- */
/* The strip that used to sit under the gallery is gone; the same facts live in
   the booking card (.exp-book__facts). These shared bits still dress them. */
.fact__ic { width: 20px; height: 20px; grid-row: 1 / span 2; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- experience photo grid ------------------------------------------------- */
/* Two per row, four tiles, so a 2x2 block. At half the width a square tile
   would be nearly 400px tall and the pair of rows would cost as much height as
   the slider this replaced, so the tiles are 3:2 — the ratio the photographs
   were actually shot in, and the same one the room galleries use. */
.expgal__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
}
/* The fifth frame onwards is in the markup for the lightbox, not for the grid. */
.expgal__cell:nth-child(n+5) { display: none; }
.expgal__link {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; border-radius: 10px; background: var(--paper);
}
.expgal__link img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.expgal__link:hover img,
.expgal__link:focus-visible img { transform: scale(1.06); }
.expgal__link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Says how many more there are; it is a label, not a control — the tile under
   it is the link, and covering it with a second one would only compete. */
.expgal__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(1,44,68,.55); color: var(--cream);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
/* Already two per row; on a phone they just need less gutter between them. */
@media (max-width: 720px) {
  .expgal__grid { gap: .4rem; }
}

/* --- the lightbox --------------------------------------------------------- */
/* Built by main.js on first open, so a page nobody clicks never pays for it. */
.lb {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--cream);
  overflow: hidden;
}
.lb::backdrop { background: rgba(6,20,19,.94); }
.lb__fig {
  margin: 0; height: 100%;
  display: grid; grid-template-rows: 1fr auto; align-items: center;
  padding: clamp(3rem, 7vh, 4.5rem) clamp(1rem, 5vw, 4.5rem) clamp(1.2rem, 4vh, 2rem);
}
.lb__img {
  display: block; justify-self: center; align-self: center;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; border-radius: 6px;
}
.lb__cap {
  margin-top: 1rem; text-align: center;
  font-size: .86rem; line-height: 1.5; color: rgba(246,249,240,.78);
  max-width: 70ch; justify-self: center;
}
.lb__count {
  display: block; margin-top: .5rem;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246,249,240,.5);
}
.lb__btn {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(246,249,240,.28); border-radius: 50%;
  background: rgba(6,20,19,.5); color: var(--cream); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lb__btn:hover { background: rgba(246,249,240,.16); border-color: rgba(246,249,240,.55); }
.lb__btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.lb__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb__btn[disabled] { opacity: .25; cursor: default; }
.lb__prev  { left: clamp(.5rem, 2vw, 1.5rem);  top: 50%; transform: translateY(-50%); }
.lb__next  { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb__close { right: clamp(.5rem, 2vw, 1.5rem); top: clamp(.6rem, 2vw, 1.2rem); }

@media (max-width: 640px) {
  .lb__btn { width: 40px; height: 40px; }
  .lb__prev { left: .4rem; }
  .lb__next { right: .4rem; }
}

.exp-body { margin-top: 2rem; }

/* --- jump to the price table ---------------------------------------------- */
/* Shown only on the long pages — see $skipToPrices in experience.php. */
.exp-skip { margin-top: 1.6rem; }
.exp-skip__ic {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.exp-skip:hover .exp-skip__ic { transform: translateY(2px); }

/* --- price table ---------------------------------------------------------- */
/* scroll-margin so the sticky header does not sit on top of the heading the
   skip link just jumped to. Matches .post-body h2. */
.exp-options { margin-top: 2.6rem; scroll-margin-top: 100px; }
.ptable { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, rgba(1,44,68,.14)); }
.ptable__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .5rem 1.2rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line, rgba(1,44,68,.14));
}
.ptable__label { min-width: 0; }
.ptable__dur   { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.ptable__price { font-weight: 600; white-space: nowrap; text-align: right; }
/* The second price on the same line — "Couples KES 18,000". Under the first,
   not beside it: side by side the two figures read as one long number. */
.ptable__note  { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-soft); }

/* --- a category of the price list ----------------------------------------
   Its own card, so "Signature rituals" and the paragraph under it are plainly
   the label on a box of treatments rather than one more line in the list. The
   name and intro sit on a tinted header; the rows are enclosed below it, which
   is what makes six categories read as six lists instead of twenty-one rows
   with headings scattered through them.
------------------------------------------------------------------------- */
.pgroup {
  border: 1px solid var(--line, rgba(1,44,68,.14));
  border-radius: 14px; background: #fff; overflow: hidden;
}
.pgroup + .pgroup { margin-top: 1.1rem; }
.exp-options .pgroup:first-of-type { margin-top: 1.2rem; }

.pgroup__head {
  padding: 1rem 1.25rem;
  background: var(--paper, #F4F6F4);
  border-bottom: 1px solid var(--line, rgba(1,44,68,.14));
}
.pgroup__title {
  margin: 0; font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green);
}
.pgroup__lead {
  margin: .45rem 0 0; max-width: 62ch;
  font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}

/* Inside a card the header already draws the line above the first row, and the
   card's own edge closes the last one. */
.pgroup .ptable { border-top: 0; padding: 0 1.25rem; }
.pgroup .ptable__row:last-child { border-bottom: 0; }

@media (max-width: 520px) {
  .pgroup__head { padding: .85rem 1rem; }
  .pgroup .ptable { padding: 0 1rem; }
}

/* A row that carries its package description opens in place. The row itself is
   the summary, so the three columns line up with the plain rows above and
   below it and the list still reads as one table. */
.ptable__row--open { display: block; padding: 0; }
.ptable__sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 16px;
  gap: .5rem 1.2rem;
  align-items: baseline;
  padding: .85rem 0;
  cursor: pointer;
  list-style: none;
}
.ptable__sum::-webkit-details-marker { display: none; }
.ptable__sum:hover .ptable__label { color: var(--green); }
.ptable__sum:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.ptable__chev {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-soft); align-self: center;
  transition: transform .25s var(--ease);
}
.ptable__d[open] .ptable__chev { transform: rotate(180deg); }
.ptable__body { padding: 0 2.4rem .95rem 0; max-width: 62ch; }
.ptable__body p { margin: 0 0 .7rem; font-size: .93rem; line-height: 1.65; color: var(--ink-soft); }
.ptable__body p:last-child { margin-bottom: 0; }
.ptable__more { font-weight: 500; color: var(--green); }

/* --- included / bring ----------------------------------------------------- */
.exp-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem 2.4rem; margin-top: 2.6rem; }
.amenity-grid--single { grid-template-columns: 1fr; }

/* --- good to know --------------------------------------------------------- */
.goodtoknow {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  margin-top: 2.4rem; padding: 1.1rem 1.3rem;
  background: var(--sand, #f4f1e9); border-radius: 12px;
}
.goodtoknow__ic { width: 22px; height: 22px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; }
.goodtoknow h3 { margin: 0 0 .2rem; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--green); }
.goodtoknow p  { margin: 0; font-size: .93rem; }

/* --- the booking card ----------------------------------------------------- */
.exp-book {
  position: sticky; top: 92px;
  border: 1px solid var(--line, rgba(1,44,68,.14));
  border-radius: 14px; padding: 1.4rem;
  background: #fff;
  box-shadow: 0 12px 40px -28px rgba(1,44,68,.55);
}
.exp-book__price { padding-bottom: 1rem; border-bottom: 1px solid var(--line, rgba(1,44,68,.14)); }
.exp-book__amount { display: block; font-size: 1.55rem; line-height: 1.2; font-weight: 600; color: var(--green); }
.exp-book__note   { display: block; margin-top: .25rem; font-size: .84rem; color: var(--ink-soft); }

.exp-book__facts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.exp-book__facts li { display: grid; grid-template-columns: 20px 1fr; gap: .1rem .6rem; align-items: start; }
.exp-book__facts li .fact__ic { grid-row: 1 / span 2; }
.exp-book__facts li span   { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.exp-book__facts li strong { font-size: .93rem; font-weight: 500; line-height: 1.35; }

/* --- the two steps -------------------------------------------------------
   The card swaps one step for the other rather than growing: the choice, then
   who is making it. Both are children of .exp-book, so the card's own padding
   and sticky position are shared and nothing shifts when the step changes.
------------------------------------------------------------------------- */
.exp-book__step[hidden] { display: none; }
.exp-book__next { margin-top: 1.1rem; }

/* Reuses .book-step__summary from the room card — same component, same look —
   with one line more, because an experience has an option and a room does not. */
.exp-book__summary {
  margin: .8rem 0 .2rem; padding: .8rem .9rem;
  background: #eef2ec; border-radius: 10px;
  display: flex; flex-direction: column; gap: .15rem;
}
.exp-book__summary strong { font-size: .98rem; }
.exp-book__summary em     { font-style: normal; font-size: .88rem; color: var(--green-500); }
.exp-book__summary span   { font-size: .85rem; color: var(--ink-soft); }

.exp-form { margin-top: 1.2rem; gap: .85rem; }
/* As step two the form IS the card's contents, so it starts at the top. */
.exp-book__step.exp-form { margin-top: 0; }
/* Opens the part of the card you fill in, so it needs air above it — without
   the gap it reads as a third line of the facts list it sits under. */
.exp-form__head { margin: 1.8rem 0 0; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--green); font-weight: 500; }
/* Whichever comes first — the option list, or the date and guests on a tour
   that has no options. */
.exp-form__head + .field, .exp-form__head + .form-row { margin-top: .7rem; }
.exp-form .form-row { gap: .85rem; }
.exp-form__msg { margin: .5rem 0 0; font-size: .85rem; min-height: 1.1em; color: var(--ink-soft); }
.exp-form__msg.is-error { color: #b3392f; }
.exp-form__msg:empty { min-height: 0; margin: 0; }
.exp-form__done { margin: 0; font-size: .95rem; line-height: 1.55; }

.exp-book__reassure { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.exp-book__reassure li { display: grid; grid-template-columns: 16px 1fr; gap: .5rem; align-items: start; font-size: .82rem; color: var(--ink-soft); }
.exp-book__reassure .amenity__ck { width: 16px; height: 16px; margin-top: .2rem; }

.exp-book__direct { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line, rgba(1,44,68,.14)); text-align: center; }
.exp-book__direct > span { display: block; margin-bottom: .5rem; font-size: .82rem; color: var(--ink-soft); }
.exp-book__direct .ti { width: 16px; height: 16px; vertical-align: -3px; margin-right: .35rem; }

/* --- mobile --------------------------------------------------------------- */
.exp-mobilebar { display: none; }

@media (max-width: 900px) {
  .exp-layout { grid-template-columns: 1fr; }
  .exp-main, .exp-aside { grid-column: 1; }
  .exp-book { position: static; }

  /* Sticky price + jump-to-form, mirroring the room page's mobile bar. */
  .exp-mobilebar {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line, rgba(1,44,68,.14));
    box-shadow: 0 -8px 30px -20px rgba(1,44,68,.6);
  }
  .exp-mobilebar__price strong { display: block; font-size: 1rem; line-height: 1.2; color: var(--green); }
  .exp-mobilebar__price span   { display: block; font-size: .74rem; color: var(--ink-soft); }
  .exp-mobilebar .btn { flex: 0 0 auto; }
  body.has-expbar { padding-bottom: 4.5rem; }
}

@media (max-width: 520px) {
  .ptable__row { grid-template-columns: 1fr auto; }
  .ptable__dur { grid-column: 1; }
  /* Explicit placement, because the duration wrapping onto its own row leaves
     auto-placement free to put the chevron somewhere surprising. */
  .ptable__sum { grid-template-columns: 1fr auto 16px; }
  .ptable__sum .ptable__label { grid-area: 1 / 1; }
  .ptable__sum .ptable__price { grid-area: 1 / 2; }
  .ptable__sum .ptable__chev  { grid-area: 1 / 3; }
  .ptable__sum .ptable__dur   { grid-area: 2 / 1; }
  .ptable__body { padding-right: 0; }
}

/* Experience listing, grouped by category. */
.exp-group + .exp-group { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.exp-group__head { margin-bottom: 1.4rem; }
.exp-group__head h3 { margin: 0 0 .25rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.exp-group__head p  { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Home "Wellness, flavour & adventure" cards. Four of them, so a 2x2 rather
   than a 3-up with an orphan on the second row. */
/* Six cards, three to a row — two tidy rows rather than three wide ones. */
.amenity-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (max-width: 1000px) { .amenity-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .amenity-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   Experiences listing: filter chips + Guest favourite badge
   ========================================================================== */

.exp-filter { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.exp-filter__chips {
  display: flex; flex-wrap: wrap; gap: .55rem;
  justify-content: center;
}
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  border: 1px solid var(--line, rgba(1,44,68,.16));
  border-radius: 999px;
  font-size: .84rem; line-height: 1;
  color: var(--ink, #10221f); text-decoration: none;
  background: #fff;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--green); }
.chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.chip__n {
  font-size: .72rem; opacity: .6;
  font-variant-numeric: tabular-nums;
}
.chip.is-active .chip__n { opacity: .75; }

.exp-filter__count { margin: .9rem 0 0; text-align: center; font-size: .82rem; color: var(--ink-soft); }
.exp-filter__count:empty { margin: 0; }

.exp-empty { text-align: center; color: var(--ink-soft); margin-top: 1.6rem; }

/* A hidden card must not keep its grid cell. `hidden` alone loses to the
   grid item's display, so restate it. */
.exp-card[hidden] { display: none !important; }

/* --- Guest favourite badge ------------------------------------------------ */
.card__media { position: relative; }
.fav-badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .6rem .34rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--green);
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 2px 10px -4px rgba(1,44,68,.5);
  backdrop-filter: saturate(1.4) blur(2px);
}
.fav-badge svg { width: 13px; height: 13px; fill: currentColor; }

/* Favourites rail. auto-fit rather than a fixed 3-up, so 2, 3 or 4 picks all
   stay balanced instead of leaving an orphan on a second row. */
.fav-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
@media (max-width: 620px) { .fav-rail { grid-template-columns: 1fr; } }

/* ==========================================================================
   Header nav: never wrap, and the Rooms megamenu
   ========================================================================== */

/* A label must never break mid-phrase. The gap tightens with the viewport so
   the bar compresses gracefully instead of wrapping to a second line. */
.main-nav .nav-list { gap: clamp(1rem, 2.4vw, 2rem); align-items: center; }
/* Static, so the megamenu anchors to the fixed .site-header rather than to the
   Rooms item — centring on the item alone pushed the panel off the left edge. */
.main-nav .nav-list > li { position: static; }
/* Scoped to the top-level items only — an unscoped `.main-nav a` outranks
   `.mega__card` and turned the megamenu cards into inline rows. */
.main-nav .nav-list > li > a { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }

.nav-caret {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease); opacity: .75;
}
.has-mega[data-open] .nav-caret { transform: rotate(180deg); }

/* The underline sweep would otherwise run under the caret too. */
.has-mega > a::after { width: 0 !important; }
.has-mega[data-open] > a, .has-mega > a[aria-current="page"] { opacity: 1; }

/* --- the panel ------------------------------------------------------------ */
.mega {
  position: absolute; top: calc(100% - .35rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 120;
  min-width: min(940px, 92vw);
  background: var(--green);
  border: 1px solid rgba(217,225,204,.16);
  border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.65);
  padding: 1.3rem;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.mega[hidden] { display: block; }          /* animate rather than snap */
.has-mega[data-open] .mega {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega__inner { padding: 0; max-width: none; }

.mega__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.mega__card {
  display: grid; gap: .45rem; text-decoration: none; color: var(--cream);
  padding: .5rem; border-radius: 10px;
  transition: background .2s var(--ease);
}
.mega__card:hover, .mega__card:focus-visible { background: rgba(217,225,204,.10); }
.mega__media { display: block; aspect-ratio: 3/2; border-radius: 7px; overflow: hidden; background: rgba(217,225,204,.08); }
.mega__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega__name { font-size: .88rem; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.mega__kind { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }

.mega__foot {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(217,225,204,.16);
}
.mega__all {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage); text-decoration: none; white-space: nowrap;
}
.mega__all:hover { color: var(--cream); }

@media (max-width: 1180px) {
  .mega { min-width: min(720px, 94vw); }
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mega, .nav-caret { transition: none; }
}

/* --- mobile drawer sublist ------------------------------------------------ */
.mobile-nav__sub { list-style: none; margin: .35rem 0 .2rem; padding: 0 0 0 .9rem; border-left: 1px solid rgba(217,225,204,.22); }
.mobile-nav__sub a { font-size: .82rem; letter-spacing: .06em; text-transform: none; opacity: .82; }
.mobile-nav__sub a:hover { opacity: 1; }

/* Mobile drawer room list: circular thumbnail beside each room. */
.mobile-nav__sub a {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: .75rem;
  padding-block: .5rem;
}
.mnav-thumb {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: rgba(217,225,204,.12);
  border: 1px solid rgba(217,225,204,.22);
  flex: 0 0 auto;
}
.mnav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnav-sub__text { display: grid; gap: .1rem; min-width: 0; }
.mnav-sub__name { font-size: .9rem; line-height: 1.25; }
.mnav-sub__kind {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage); opacity: .8;
}

/* ==========================================================================
   Awards & press (about.php)
   ========================================================================== */
/* Award badges under the home hero. The logos are three different shapes, so
   each sits in a box of one fixed height and is contained inside it — that
   keeps the row optically level and holds the layout still while they load,
   which is why none of them carries width/height attributes. */
/* A hairline under the hero and nothing else: no heading, no rule beneath, and
   its own padding rather than .section's, which was built for a block of copy.
   The gap BELOW the badges is not this element's to set — the next section's
   padding-top makes it, and .section's is sized for a full block of copy, which
   is why equal padding here still read as tight above and adrift below. So the
   bottom is zero and the neighbour is told to match the top instead. Both gaps
   are the one value; change it once and the strip stays centred. */
.badges { border-top: 1px solid var(--line, rgba(1,44,68,.1)); padding-top: clamp(2.2rem, 4.5vw, 3.4rem); padding-bottom: 0; }
.badges + .section { padding-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.badges__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.8rem, 6vw, 4.5rem);
}
/* min-height, so the row holds its shape before the logos arrive. The cap
   itself is on the image as a LENGTH: a percentage height or max-height here
   resolves against a grid area the browser treats as indefinite and is quietly
   dropped, which let all three render at full size straight through the row. */
.badges__item { min-height: clamp(58px, 9vw, 88px); display: grid; place-items: center; }
.badges__item a { display: grid; place-items: center; }
.badges__item img {
  max-height: clamp(58px, 9vw, 88px); max-width: min(200px, 42vw);
  width: auto; height: auto; object-fit: contain;
  /* Full strength: the badges are supplied as flat black marks and are meant to
     read as black. The fade is the hover affordance on the two that link out. */
  transition: opacity .3s var(--ease, ease);
}
.badges__item a:hover img, .badges__item a:focus-visible img { opacity: .6; }

.awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 820px; margin-inline: auto; }
.award {
  display: grid; grid-template-columns: 140px 1fr; gap: 1.6rem; align-items: center;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line, rgba(1,44,68,.14));
  border-radius: 12px; background: #fff;
}
/* A supplied press badge is a whole lockup, not an icon: the National
   Geographic Traveller style guide sets a floor of 100px on screen and asks for
   clear space around it. 140px of column renders it ~108px high, and the card's
   own padding plus the column gap keep the required air on every side — so this
   box carries no tile, no rounding and no crop. */
.award__logo { width: 140px; min-height: 100px; display: grid; place-items: center; }
.award__logo img { width: 100%; height: auto; object-fit: contain; }
/* The fallback star, for an entry with no logo, stays a small mark. */
.award__logo--mark { width: 56px; height: 56px; min-height: 0; border-radius: 10px; background: var(--sand, #f4f1e9); }
.award__logo--mark svg { width: 26px; height: 26px; fill: var(--green); }
.award__issuer { display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
.award__title { margin: .18rem 0 .3rem; font-size: 1.12rem; line-height: 1.3; }
.award__title a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(1,44,68,.28); }
.award__title a:hover { border-color: var(--green); }
.award__note { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
/* Stacked on a phone. The decorative star goes — it said nothing — but a real
   badge stays at full size, because the text on it has to stay readable. */
@media (max-width: 520px) { .award { grid-template-columns: 1fr; gap: 1.1rem; } .award__logo--mark { display: none; } }

/* ==========================================================================
   Gallery page
   ========================================================================== */
.gal-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem;
}
.gal-item[hidden] { display: none !important; }
.gal-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  position: relative; overflow: hidden; border-radius: 10px; line-height: 0;
}
.gal-btn img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gal-btn:hover img, .gal-btn:focus-visible img { transform: scale(1.04); }
.gal-cap {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .8rem .6rem;
  font-size: .8rem; line-height: 1.35; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(1,44,68,.75), transparent);
}

/* --- lightbox --- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6,20,18,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; display: grid; gap: .7rem; justify-items: center; min-width: 0; }
.lightbox__fig img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; }
.lightbox__fig figcaption { color: var(--sage); font-size: .88rem; text-align: center; }
.lightbox__fig figcaption[hidden] { display: none; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1;
  padding: .4rem .7rem; cursor: pointer; opacity: .75;
}
.lightbox__nav:hover { opacity: 1; }
@media (max-width: 620px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .lightbox__nav--prev { left: .2rem; }
  .lightbox__nav--next { right: .2rem; }
}

/* ==========================================================================
   Travel agents page
   ========================================================================== */
.measure-wide { max-width: 780px; margin-inline: auto; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.trade-card { padding: 1.25rem 1.35rem; border: 1px solid var(--line, rgba(1,44,68,.14)); border-radius: 12px; background: #fff; }
.trade-card h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.trade-card p { margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.6; }
.trade-note { margin-top: 1.6rem; font-size: .86rem; color: var(--ink-soft); }
.trade-rooms__kind { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.trade-contact { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; justify-content: center; }
.trade-contact a { color: var(--sage); }
.trade-contact a:hover { color: var(--cream); }

/* About submenu: a narrow dropdown, same open/close machinery as the Rooms
   megamenu but sized for a short list of links rather than a photo grid. */
.mega--sub { min-width: 320px; padding: .7rem; }
@media (max-width: 1180px) { .mega--sub { min-width: 300px; } }
.subnav { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.subnav a {
  display: grid; gap: .12rem; padding: .6rem .7rem; border-radius: 9px;
  color: var(--cream); text-decoration: none;
  transition: background .18s var(--ease);
}
.subnav a:hover, .subnav a:focus-visible { background: rgba(217,225,204,.10); }
.subnav__label { font-size: .92rem; letter-spacing: 0; text-transform: none; }
.subnav__note  { font-size: .74rem; line-height: 1.35; color: var(--sage); opacity: .85; }

/* The About panel is short, so centring it on the header pushes it far from its
   trigger. Pin it under the item instead. */
/* Right-aligned rather than centred: a short list centred on its trigger sits
   oddly far from it. The panel anchors to the fixed .site-header (list items are
   position:static), so inset it by the container gutter — right:0 alone puts it
   flush against the viewport edge, past where the Contact button ends. */
.mega--sub {
  left: auto;
  right: max(1.25rem, calc((100vw - var(--container)) / 2));
  transform: translateX(0) translateY(-6px);
}
.has-mega[data-open] .mega--sub { transform: translateX(0) translateY(0); }

/* Mobile: the About sublist has no thumbnails, so it does not need the grid. */
.mobile-nav__sub--plain a { display: block; grid-template-columns: none; }

/* Partner attributions: quiet, not shouted. */
.footer-by { white-space: nowrap; }
.listed-on { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.listed-on a { color: var(--green); border-bottom: 1px solid rgba(1,44,68,.28); text-decoration: none; }
.listed-on a:hover { border-color: var(--green); }

/* Guest reviews block */
.section--reviews-block { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.rv-card {
  margin: 0; padding: 1.5rem 1.6rem;
  border: 1px solid var(--line, rgba(1,44,68,.14)); border-radius: 14px; background: #fff;
  display: grid; gap: .8rem; align-content: start;
}
.rv-stars { display: flex; gap: 2px; }
.rv-star { width: 15px; height: 15px; fill: #d9ddd3; }
.rv-star.is-on { fill: #c9a227; }
.rv-body { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }
.rv-body::before { content: '\201C'; }
.rv-body::after  { content: '\201D'; }
.rv-by { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; font-size: .82rem; }
.rv-name  { font-weight: 600; }
.rv-place { color: var(--ink-soft); }
.rv-src   { color: var(--ink-soft); margin-left: auto; font-size: .76rem; }
.rv-src a { color: var(--ink-soft); }
.rv-src a:hover { color: var(--green); }
/* On a dark band the card needs to invert. */
.section--green .rv-card { background: rgba(255,255,255,.06); border-color: rgba(217,225,204,.2); }
.section--green .rv-body, .section--green .rv-name { color: var(--cream); }
.section--green .rv-place, .section--green .rv-src, .section--green .rv-src a { color: var(--sage); }
/* source attribution inside the home page's existing review card */
.review__src { display:block; margin-top:.25rem; font-size:.76rem; color:var(--ink-soft); }
.review__src a { color: inherit; }

/* ==========================================================================
   Experience form: single-date picker + styled selects
   The calendar reuses the room page's .dr-* grid so the two read as one
   product; only the trigger and popover width differ.
   ========================================================================== */

/* The native input keeps submitting, but is visually replaced once enhanced. */
.field input[type="date"].is-enhanced {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.xd { position: relative; }
.xd-field {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; padding: .72rem .85rem;
  border: 1px solid var(--line, rgba(1,44,68,.2)); border-radius: 8px;
  background: #fff; color: var(--ink-soft); font: inherit; font-size: .95rem;
  text-align: left; cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.xd-field:hover { border-color: var(--green); }
.xd-field:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(1,44,68,.12); }
.xd.has-value .xd-field { color: var(--ink); font-weight: 500; }
.xd-ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; opacity: .65; }

/* One month, so narrower than the room page's two-month range popover. */
.xd-pop { width: min(340px, 88vw); left: 0; right: auto; padding: 1rem 1rem .8rem; }
.xd-pop .dr-cal { display: block; }
.xd-pop .dr-m { flex: none; }
.xd-pop .dr-pop__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; }
@media (max-width: 420px) { .xd-pop { left: 50%; transform: translateX(-50%); } }

/* The room picker styles .dr-cell for a range; a single date needs only these. */
.dr-cell.is-today:not(.is-sel) { box-shadow: inset 0 0 0 1px var(--green); }
.dr-cell.is-disabled { opacity: .32; pointer-events: none; }

/* --- native selects, dressed --------------------------------------------- */
.sel { position: relative; display: block; }
.sel::after {
  content: ""; position: absolute; right: .85rem; top: 50%;
  width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.6px solid var(--ink-soft); border-bottom: 1.6px solid var(--ink-soft);
  transform: rotate(45deg); transition: border-color .18s var(--ease);
}
.sel:hover::after { border-color: var(--green); }
.sel select {
  width: 100%;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.2rem;                      /* room for the chevron */
  background-image: none;                     /* kill any UA arrow */
  cursor: pointer;
}

/* ==========================================================================
   Floating action button — WhatsApp / book a room / book a table
   ========================================================================== */
.fab {
  position: fixed; z-index: 55;
  right: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: calc(clamp(.9rem, 2.5vw, 1.6rem) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}

/* room.php and experience.php pin a bar across the bottom on mobile; lift the
   FAB clear of it rather than letting the two overlap. */
@media (max-width: 900px) {
  body.has-bottombar .fab { bottom: calc(4.9rem + env(safe-area-inset-bottom)); }
}

.fab__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fab__menu[hidden] { display: none; }

.fab__item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .55rem .5rem .95rem;
  border-radius: 999px; text-decoration: none;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line, rgba(1,44,68,.14));
  box-shadow: 0 10px 28px -14px rgba(1,44,68,.55);
  /* Each item slides in just after the one above it. */
  animation: fab-in .22s var(--ease) backwards;
}
.fab__menu li:nth-child(1) .fab__item { animation-delay: .04s; }
.fab__menu li:nth-child(2) .fab__item { animation-delay: .09s; }
.fab__menu li:nth-child(3) .fab__item { animation-delay: .14s; }
@keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

.fab__item:hover, .fab__item:focus-visible { border-color: var(--green); }
.fab__label { font-size: .86rem; font-weight: 500; white-space: nowrap; }
.fab__ic {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--green);
}
.fab__ic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fab__item--wa .fab__ic { background: #25d366; }

.fab__toggle {
  /* The white ring is structural, not decoration: the button is --green and so
     is the footer, so over the footer an unbordered circle simply vanishes.
     box-sizing is border-box here, so the 56px is unchanged and the disc inside
     the ring is 52px. */
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff;
  background: var(--green); color: #fff;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 12px 30px -10px rgba(1,44,68,.6);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.fab__toggle:hover { transform: scale(1.05); }
.fab__toggle:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
.fab__toggle-ic { position: absolute; width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.fab__toggle-ic--close { opacity: 0; transform: rotate(-90deg); }
.fab[data-open] .fab__toggle-ic--open  { opacity: 0; transform: rotate(90deg); }
.fab[data-open] .fab__toggle-ic--close { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fab__item { animation: none; }
  .fab__toggle, .fab__toggle-ic { transition: none; }
}

/* Printing a page should not print a floating button. */
@media print { .fab { display: none; } }

/* --------------------------------------------------------------------------
   Gallery

   Slides used to size themselves to their own photograph, with main.js
   animating the track's height to whichever one was in view, so each picture
   kept its own shape. It read well on a desktop and it is why the slider did
   not work on a phone: the height of a scroll-snap container changed under the
   finger mid-swipe, so iOS re-ran the snap and put you back on the photo you
   started from — and the frames it should have been moving to had collapsed to
   0px and never loaded anyway.

   One fixed 3:2 box for every slide, filled with object-fit, replaces all of
   it. The height never moves, so nothing fights the swipe, and the box exists
   before the image arrives, so lazy loading has something to intersect.
   Swap `cover` for `contain` below if you would rather letterbox a photograph
   than crop it.
   -------------------------------------------------------------------------- */
.roomgal__track { background: var(--paper); }
/* The track scrolls horizontally, but arrows and dots are the affordance here —
   a visible scrollbar just reserves a few pixels under every photograph. */
.roomgal__track { scrollbar-width: none; -ms-overflow-style: none; }
.roomgal__track::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   Currency switcher
   -------------------------------------------------------------------------- */
.curswitch { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; }
.curswitch__label { color: var(--ink-soft); margin-right: .15rem; }
.curswitch__opt {
  padding: .16rem .5rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--line-soft); line-height: 1.4;
}
.curswitch__opt:hover { border-color: var(--line); color: var(--ink); }
.curswitch__opt.is-active { background: var(--green); border-color: var(--green); color: var(--cream); }
.curnote { font-size: .78rem; color: var(--ink-soft); margin-top: .6rem; }
.site-footer .curswitch__label { color: rgba(246,249,240,.66); }
.site-footer .curswitch__opt { color: rgba(246,249,240,.8); border-color: rgba(246,249,240,.24); }
.site-footer .curswitch__opt.is-active { background: var(--sage); border-color: var(--sage); color: var(--green); }
/* The switcher over a hero photograph: light text, glass rather than paper. */
.curswitch--hero { margin-top: 1.1rem; }
.curswitch--hero .curswitch__label { color: rgba(255,255,255,.72); }
.curswitch--hero .curswitch__opt {
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.34);
  background: rgba(1,44,68,.22);
  backdrop-filter: blur(3px);
}
.curswitch--hero .curswitch__opt:hover { border-color: rgba(255,255,255,.66); color: #fff; }
.curswitch--hero .curswitch__opt.is-active {
  background: var(--cream); border-color: var(--cream); color: var(--green);
}
.curswitch--hero + .curnote { color: rgba(255,255,255,.66); max-width: 46ch; }
.site-footer .curnote { color: rgba(246,249,240,.55); max-width: 52ch; }

/* --------------------------------------------------------------------------
   Availability filter
   -------------------------------------------------------------------------- */
.avail-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem;
  margin-top: .8rem; width: 100%;
}
.avail-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-soft); text-decoration: none;
  font-size: .82rem; line-height: 1.5; white-space: nowrap;
}
.avail-chip:hover { border-color: var(--green-500); color: var(--ink); }
.avail-chip.is-active { background: var(--green); border-color: var(--green); color: var(--cream); }
.avail-chip__n { font-size: .72rem; opacity: .62; font-variant-numeric: tabular-nums; }
.avail-chip.is-active .avail-chip__n { opacity: .8; }
.avail-filter__sort { display: inline-flex; align-items: center; gap: .4rem; margin-left: .2rem; }
.avail-filter__label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.avail-filter__showing { font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 620px) {
  .avail-filter__sort { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Availability toolbar
   Chips left, choices right. Its own band under the count, rather than a third
   item competing inside the count/review row.
   -------------------------------------------------------------------------- */
.avail-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1.4rem;
  margin-top: clamp(.9rem, 2vw, 1.2rem);
  padding: .6rem .85rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) * .6);
}
.avail-toolbar__chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.avail-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

.avail-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-soft); text-decoration: none;
  font-size: .84rem; line-height: 1.5; white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.avail-chip:hover { border-color: var(--green-500); color: var(--ink); }
.avail-chip:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.avail-chip.is-active { background: var(--green); border-color: var(--green); color: var(--cream); }
.avail-chip__n { font-size: .74rem; opacity: .55; font-variant-numeric: tabular-nums; }
.avail-chip.is-active .avail-chip__n { opacity: .75; }

/* --- the two dropdowns ---------------------------------------------------- */
.cursel { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.cursel__label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; white-space: nowrap;
}
.cursel__field { position: relative; display: inline-flex; align-items: center; }
.cursel__field::after {
  content: ""; position: absolute; right: .6rem; pointer-events: none;
  width: 7px; height: 7px; border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft); transform: translateY(-2px) rotate(45deg);
}
.cursel select {
  appearance: none; -webkit-appearance: none;
  padding: .3rem 1.75rem .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: .84rem; line-height: 1.5; cursor: pointer;
}
.cursel select:hover { border-color: var(--green-500); }
.cursel select:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
/* Hidden once JS can submit the form on change; visible and working without it. */
.js .cursel__go { display: none; }

.avail-showing { margin: .7rem 0 0; font-size: .84rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .avail-toolbar { flex-direction: column; align-items: stretch; gap: .7rem; }
  .avail-toolbar__controls { justify-content: space-between; }
  .cursel { flex: 1; justify-content: space-between; }
  .cursel select { width: 100%; }
}
.avail-curnote { margin: .55rem 0 0; font-size: .78rem; color: var(--ink-soft); max-width: 62ch; }

/* --- currency dropdown in the header -------------------------------------- */
.site-header .cursel { margin-left: auto; margin-right: .1rem; gap: 0; }
/* Compact: the three codes and nothing else. A guest scanning a header does
   not need "Kenyan shilling" spelled out — the code is the thing they look
   for, and the full name still appears in the footer and on availability. */
.cursel--compact select {
  min-height: 30px; padding: .18rem 1.35rem .18rem .5rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
}
.cursel--compact .cursel__field::after { right: .45rem; width: 6px; height: 6px; }
/* Light marks in both header states, and for the same reason each time: the
   control sits either on a hero photograph or on the deep-green bar the
   header fades in on scroll. Neither one takes the default dark ink. */
.site-header .cursel__label { color: rgba(255,255,255,.72); }
.site-header .cursel select {
  color: #fff; border-color: rgba(255,255,255,.34); background: rgba(1,44,68,.22);
}
.site-header .cursel__field::after { border-color: rgba(255,255,255,.8); }
.site-header .cursel select option { color: var(--ink); background: #fff; }
@media (max-width: 1080px) { .site-header .cursel { display: none; } }

.mobile-nav .cursel { margin: 0 0 1rem; justify-content: space-between; width: 100%; }
.mobile-nav .cursel select { flex: 1; }

/* --------------------------------------------------------------------------
   The floating button breathes, so it is noticed without shouting.
   A ring expanding out of the button reads as "live" far better than moving
   the button itself, which drags the eye off whatever the guest is reading.
   It stops once the menu is open — at that point it has your attention, and
   continuing to pulse under an open menu is just noise.
   -------------------------------------------------------------------------- */
.fab__toggle::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--green);
  z-index: -1;
  animation: fab-pulse 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes fab-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.fab[data-open] .fab__toggle::before,
.fab__toggle:hover::before { animation: none; opacity: 0; }

/* Motion is an accent here, never the way the button is found: it is already
   a large, high-contrast, fixed control. */
@media (prefers-reduced-motion: reduce) {
  .fab__toggle::before { animation: none; opacity: 0; }
}
/* The header dropdown and the hero pills never appear together. Above 1080px
   the header carries it, so the hero pills would be a second control in the
   same view. Below that the header control is folded inside the burger menu,
   and the hero pills become the only one a guest can see without opening it. */
@media (min-width: 1081px) { .curswitch--hero { display: none; } }

/* ---- Special packages: the enquiry dialog ---------------------------------
   Opened by the Enquire button on a package card. The button is a real link to
   the contact page underneath, so this is an upgrade rather than the only way
   through. */
.pkgdlg {
  width: min(520px, calc(100vw - 2rem));
  max-height: min(86dvh, 900px);
  margin: auto; padding: 0; border: 0;
  border-radius: 16px; background: var(--white, #fff); color: var(--ink);
  overflow: auto; overscroll-behavior: contain;
}
.pkgdlg::backdrop { background: rgba(6,20,19,.62); backdrop-filter: blur(3px); }
.pkgdlg__form { padding: 1.9rem 1.7rem 1.6rem; }
.pkgdlg__title { margin: .15rem 0 .1rem; font-size: clamp(1.35rem, 3.4vw, 1.7rem); line-height: 1.15; }
.pkgdlg__price { margin: 0 0 1.2rem; font-weight: 600; color: var(--green); }
.pkgdlg__close {
  position: sticky; float: right; top: .6rem; right: .6rem; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  margin: .6rem .6rem -34px 0;
  border: 1px solid var(--line, rgba(1,44,68,.14)); border-radius: 50%;
  background: #fff; color: var(--green); cursor: pointer;
}
.pkgdlg__close:hover { background: var(--paper); }
.pkgdlg__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pkgdlg__msg { margin: .7rem 0 0; font-size: .88rem; color: var(--ink-soft); text-align: center; }
.pkgdlg__msg.is-error { color: #a3271f; }
.pkgdlg__note { margin: .9rem 0 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.pkgdlg__done { margin: 1.6rem 0; text-align: center; line-height: 1.6; }