/* =====================================================================
   TAWI design system
   Elegant rooms in Watamu: warm, light, editorial.
   Palette: espresso, TAWI gold (from the palm crest), sand and cream.
   Type: Noto Serif (display, light and regular) + Poppins (text). No italics.
   Layout: editorial — framed hero, hairlines, sharp edges, outline buttons.
   ===================================================================== */

/* ---- fonts ----------------------------------------------------------
   TAWI's own pair from the original site, loaded from Google Fonts in
   includes/header.php: Noto Serif (display) and
   Poppins (text). */

:root {
  /* colour tokens. Contrast-checked pairs:
       --brand-500 on white      4.9:1  (eyebrows, links)
       --accent on --brand       6.0:1  (gold CTA on dark bands)
       --brand on --accent       6.0:1  (text on gold buttons)
     .section--green and .btn--sage are historic markup class names kept from
     the template; they now mean "dark band" and "gold button". */
  --brand:       #2B2118;   /* espresso: headings, dark bands */
  --brand-700:   #3A2D21;   /* hover / raised surfaces on dark */
  --brand-500:   #8A6402;   /* deep gold: secondary text & links on light */
  --ink:         #1C1915;   /* near-black body text */
  --ink-soft:    #5A5249;   /* muted body text */
  --white:       #FFFFFF;
  --cream:       #FBF7EF;   /* warm off-white, type on dark */
  --accent:      #C8981C;   /* TAWI gold, primary CTA fill */
  --accent-dark: #B88603;   /* gold hover, the logo's own gold */
  --paper:       #F5EFE4;   /* sand: alternating band */
  --sand:        #EADFC8;   /* soft text on dark (12.4:1 on --brand) */
  --line:       rgba(43,33,24,.14);
  --line-soft:  rgba(43,33,24,.08);

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

  /* type */
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", 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(--brand-500); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); 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(--brand); 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; }

/* Emphasis classes kept for old markup; TAWI uses no italics. */
.italic { font-style: normal; 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(--brand-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(--brand); color: rgba(251,247,239,.82); }
.section--green h2, .section--green h3 { color: var(--cream); }
.section--green .eyebrow { color: var(--accent); }
.section--sand { background: var(--paper); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure.center { margin-inline: auto; }

/* ---- buttons -------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --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(--brand); --btn-fg: var(--cream); }
.btn--primary:hover { --btn-bg: var(--brand-700); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--brand); border-color: var(--brand); }
.btn--outline:hover { --btn-bg: var(--brand); --btn-fg:var(--cream); }
.btn--light { --btn-bg: transparent; --btn-fg:var(--cream); border-color: rgba(251,247,239,.6); }
.btn--light:hover { --btn-bg:var(--cream); --btn-fg: var(--brand); border-color:var(--cream); }
.btn--sage { --btn-bg: var(--accent); --btn-fg: var(--brand); border-color: var(--accent); }
.btn--sage:hover { --btn-bg: var(--accent-dark); border-color: var(--accent-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(--accent); --btn-fg: var(--brand); border-color: var(--accent); }
.header-cta:hover { --btn-bg: var(--accent-dark); border-color: var(--accent-dark); }

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

/* ---- 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(--brand);
  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(43,33,24,.5); }
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .8rem; min-height: var(--header-h);
}

.mobile-nav {
  background: var(--brand); color: var(--cream); padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid rgba(251,247,239,.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(251,247,239,.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(251,247,239,.12); }
.mobile-nav__call { display:block; text-align:center; margin-top:1rem; letter-spacing:.1em; color: rgba(251,247,239,.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-mark {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.45));
}
body:has(.hero, .rhero) .site-header:not(.is-solid) .brand-word {
  text-shadow: 0 1px 8px 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(--brand);
  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(--accent); }
.hero__lede { font-size: 1.2rem; color: rgba(251,247,239,.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(--sand);
  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(--brand); }
.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(--brand);
  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(--accent);
}
.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(251,247,239,.5); }
.booking__field input:focus { outline: none; box-shadow: 0 2px 0 var(--cream); }
.booking__rule { width: 1px; align-self: stretch; background: rgba(251,247,239,.3); }
.booking__submit {
  border: 0; border-radius: 0;
  background: var(--accent); color: var(--brand);
  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(--accent-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(251,247,239,.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(--accent); }
.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(--brand-700);
  border: 1px solid rgba(251,247,239,.28);
  padding: .5rem .9rem;
  box-shadow: 0 24px 48px -20px rgba(43,33,24,.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(251,247,239,.18); }
.booking__guestname { display: block; font-size: .9rem; color: var(--cream); line-height: 1.3; }
.booking__guestsub  { display: block; font-size: .68rem; color: var(--sand); 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(251,247,239,.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(--accent); color: var(--brand); border-color: var(--accent); }
.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(--brand);
  border: 1px solid rgba(251,247,239,.28);
  box-shadow: 0 26px 60px -22px rgba(43,33,24,.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(251,247,239,.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(--accent); color: var(--brand); border-color: var(--accent); }
.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(--accent); 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(200,152,28,.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(251,247,239,.3); cursor: not-allowed; }
.booking__cell--full { text-decoration: line-through; }
.booking__cell--start,
.booking__cell--end { background: var(--accent); color: var(--brand); font-weight: 700; }
.booking__cell--in-range { background: rgba(200,152,28,.26); border-radius: 0; }
.booking__cell--hover { background: rgba(200,152,28,.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(251,247,239,.24);
}
.booking__hint { font-size: .72rem; line-height: 1.35; color: var(--sand); }
.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(--accent); color: var(--brand);
  font-family: var(--serif); font-weight: 700; font-size: .8rem;
  padding: .45rem 1.1rem;
  transition: background .25s var(--ease);
}
.booking__done:hover { background: var(--accent-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(251,247,239,.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(251,247,239,.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(--sand); }
.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(--accent); 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(251,247,239,.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(--brand); 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(--brand); 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(--brand); 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(43,33,24,.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(--brand-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(--brand-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(--brand-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: 0;
  background: rgba(255,255,255,.9);
  color: var(--brand);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(43,33,24,.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(--brand-500); border-radius: 0;
  background: transparent; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.roomgal__dot.is-active { background: var(--brand); 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(--brand-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(--brand-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(--brand); font-weight: 500; }

/* room 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(--brand); background:var(--paper); border:1px solid var(--line-soft); padding:.3rem .6rem; border-radius: 0; }

/* 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(--brand); }
.menu-row__tag { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--brand-500); margin-left:.6rem; }
.menu-row__price { font-weight:500; color: var(--ink-soft); white-space:nowrap; }

/* ---- pricing (services / packages) --------------------------------- */
.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(--brand); }
.price-row__meta { font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.price-row__amt { font-weight:500; color:var(--brand); 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(--brand); position:relative; }
.pkg--featured::before { content:"Most loved"; position:absolute; top:-.8rem; left:1.8rem; background:var(--brand); color:var(--cream); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; padding:.3rem .7rem; border-radius: 0; }
/* 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(--brand); 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(--brand-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(--brand-700) 0%, var(--brand) 62%);
}

/* stat bar */
.statbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(200,152,28,.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(200,152,28,.18); }
.statbar__n {
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--accent);
}
.statbar__l {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(200,152,28,.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(--brand-700);
  border: 1px solid rgba(200,152,28,.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(200,152,28,.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(--accent); opacity: .2; pointer-events: none;
}
.review__body p {
  position: relative;
  font-family: var(--serif); font-style: normal;
  font-size: 1.18rem; line-height: 1.45; color: var(--sand);
}
.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(200,152,28,.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(200,152,28,.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(--accent); }
.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(43,33,24,.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(--brand-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(--brand-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(--brand-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(--accent); }
.form--onDark .field .req { color: var(--accent); }
.form--onDark .field .hint,
.form--onDark .hint { color: rgba(200,152,28,.72); }
.form--onDark .field input,
.form--onDark .field select,
.form--onDark .field textarea {
  background: rgba(251,247,239,.06);
  border-color: rgba(200,152,28,.28);
  color: var(--cream);
  color-scheme: dark;
}
.form--onDark .field input::placeholder,
.form--onDark .field textarea::placeholder { color: rgba(200,152,28,.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(--accent); box-shadow: 0 0 0 3px rgba(200,152,28,.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(--brand); }
.field .req { color: var(--brand-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(--brand); box-shadow:0 0 0 3px rgba(43,33,24,.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(--brand); 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:not(.btn) { 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(--brand); }

/* ---- 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(--brand); color: rgba(251,247,239,.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:132px; width:auto; margin-bottom:1.25rem; }
.footer-cta { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.footer-tag { font-family:var(--serif); font-style: normal; font-size:1.25rem; color:var(--sand); 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(--accent); 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(251,247,239,.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) {
  .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(200,152,28,.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; }
  .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(--brand); }
.room-card__cta { font-size: .9rem; color: var(--ink-soft); transition: color .3s var(--ease); }
.room-card:hover .room-card__cta { color: var(--brand); }
.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(--brand); 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(251,247,239,.92); font-size: 1.05rem; margin-top: 1rem;
}
.avail-note {
  font-family: var(--sans); font-size: .95rem; line-height: 1.55;
  color: rgba(251,247,239,.78); max-width: 54ch; margin-top: .7rem;
}
.hero--avail .avail-change { margin-top: 1.5rem; }
.hero--avail .avail-change a { color: var(--accent); }
.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 rooms — 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(--brand); 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: normal; color: var(--ink);
}
.avail-review figcaption { font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); }
.avail-review figcaption a { color: var(--brand); 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(251,247,239,.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(251,247,239,.45); }
.avail-upsell__more .btn--outline:hover { background: var(--cream); color: var(--brand); 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(251,247,239,.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(251,247,239,.18);
}
.avail-svc__list .avail-svc__item:last-child { border-bottom: 1px solid rgba(251,247,239,.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(--sand); }
.avail-svc__desc  { font-size: .9rem;  color: rgba(251,247,239,.76); max-width: 60ch; }
.avail-svc__cap   { font-size: .78rem; color: rgba(251,247,239,.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(--accent);
  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(251,247,239,.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(251,247,239,.06);
  border: 1px solid rgba(251,247,239,.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); }
/* --accent is tuned for dark ground; on white it needs the deeper gold. */
.avail-svc--light .avail-svc__route { color: var(--brand-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(--brand-500); }
.avail-svc--light .avail-svc__cta:hover { color: var(--brand); }
.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 room 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(--brand); 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(--brand-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: 0; 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(--brand); 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(--brand); }

/* ---- 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(43,33,24,.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(--brand); }
.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(--brand); }
.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: 0; 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(--brand-500); box-shadow: 0 0 0 3px rgba(43,33,24,.14); }
.book-card__status { margin: .9rem 0 0; padding: .6rem .7rem; border-radius: 0; font-size: .86rem; line-height: 1.4; }
.book-card__status.is-ok { background: #e6efe7; color: #1c5b32; border: 1px solid #bcd8bf; }
.book-card__quote { margin: .75rem 0 0; font-size: .86rem; }
.book-card__lines { list-style: none; margin: 0; padding: 0; }
.book-card__lines li { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; color: var(--ink-soft); }
.book-card__total { display: flex; justify-content: space-between; margin: .4rem 0 0; padding-top: .5rem; border-top: 1px solid var(--line-soft); font-weight: 600; }
.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(--brand-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(--brand); 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(--brand-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(43,33,24,.4); }
.room-mobilebar__price strong { color: var(--brand); 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(43,33,24,.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(--brand-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: 0; overflow: hidden; transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.dr.is-open .dr__fields { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(43,33,24,.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: 0; box-shadow: 0 34px 66px -26px rgba(43,33,24,.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(--brand-500); color: var(--brand); }
.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(--brand-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(--brand); 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: #F3EDE2; color: var(--brand-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: 0; background: var(--white); color: var(--ink); width: 100%; resize: vertical; }
.book-card textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(43,33,24,.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(--brand); }
.book-step__summary { margin: .8rem 0 .4rem; padding: .8rem .9rem; background: #F3EDE2; border-radius: 0; 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(--brand-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(--brand-500); }
.book-extra:has(.book-extra__ck:checked) { border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(43,33,24,.12); background: #f5f9f4; }
.book-extra__ck { flex: 0 0 auto; margin-top: .18rem; width: 17px; height: 17px; accent-color: var(--brand); 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(--brand-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: 0; 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(--brand-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(43,33,24,.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(--brand); 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                                                                  */
/* ===================================================================== */
/* 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(--brand); font-weight: 600; }
.blog-card .card__body h3 { margin: .4rem 0 .5rem; }
.blog-card__more { margin-top: auto; padding-top: .8rem; color: var(--brand); font-weight: 600; font-size: .9rem; }
/* Klickenya guides: same card, a small "Klickenya ↗" badge top right; they open on klickenya.com */
.blog-card .card__media { position: relative; }
.blog-card__src {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; background: rgba(43,33,24,.86); color: var(--cream);
  font: 600 .7rem/1 var(--sans); letter-spacing: .04em;
}
.blog-card__src svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 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(--brand); border-left-color: var(--brand); font-weight: 600; }

/* Sidebar useful blocks */
.aside-card--cta { background: var(--brand); 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; }
/* The box is espresso, like a primary button: make its button gold so it shows */
.aside-card--cta .btn { --btn-bg: var(--accent); --btn-fg: var(--brand); border-color: var(--accent); }
.aside-card--cta .btn:hover { --btn-bg: var(--accent-dark); border-color: var(--accent-dark); }
.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(--brand); }
.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(43,33,24,.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(--brand); padding: .15rem .5rem; border-radius: 0; }
.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(--brand); }
.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:not(.btn) { color: var(--brand); text-underline-offset: 3px; }   /* not .btn: it would turn a button's text the colour of its own fill */
/* --- 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 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(--brand); outline-offset: 4px; }
.fold__name {
  font-family: var(--serif); font-weight: 400; line-height: 1.08;
  letter-spacing: -.005em; color: var(--brand);
  font-size: clamp(1.5rem, 3vw, 2rem);    /* matches .post-body h2 */
}
.fold__head:hover .fold__name { color: var(--brand-700); }
.fold__ic {
  flex: 0 0 auto; align-self: center; width: 21px; height: 21px;
  fill: none; stroke: var(--brand); 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(--brand-500); font-size: 1.15rem; font-style: normal; color: var(--brand-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(--brand); 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(--brand); 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: 0; 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(--brand); 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(43,33,24,.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: 0;
}
.lb__cap {
  margin-top: 1rem; text-align: center;
  font-size: .86rem; line-height: 1.5; color: rgba(251,247,239,.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(251,247,239,.5);
}
.lb__btn {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(251,247,239,.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(251,247,239,.16); border-color: rgba(251,247,239,.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(43,33,24,.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(43,33,24,.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(43,33,24,.14));
  border-radius: 0; 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, #F5EFE4);
  border-bottom: 1px solid var(--line, rgba(43,33,24,.14));
}
.pgroup__title {
  margin: 0; font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brand);
}
.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(--brand); }
.ptable__sum:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 0; }
.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(--brand); }

/* --- 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: 0;
}
.goodtoknow__ic { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; }
.goodtoknow h3 { margin: 0 0 .2rem; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brand); }
.goodtoknow p  { margin: 0; font-size: .93rem; }

/* --- the booking card ----------------------------------------------------- */
.exp-book {
  position: sticky; top: 92px;
  border: 1px solid var(--line, rgba(43,33,24,.14));
  border-radius: 0; padding: 1.4rem;
  background: #fff;
  box-shadow: 0 12px 40px -28px rgba(43,33,24,.55);
}
.exp-book__price { padding-bottom: 1rem; border-bottom: 1px solid var(--line, rgba(43,33,24,.14)); }
.exp-book__amount { display: block; font-size: 1.55rem; line-height: 1.2; font-weight: 600; color: var(--brand); }
.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: #F3EDE2; border-radius: 0;
  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(--brand-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(--brand); 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(43,33,24,.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(43,33,24,.14));
    box-shadow: 0 -8px 30px -20px rgba(43,33,24,.6);
  }
  .exp-mobilebar__price strong { display: block; font-size: 1rem; line-height: 1.2; color: var(--brand); }
  .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(43,33,24,.16));
  border-radius: 0;
  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(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); 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: 0;
  background: rgba(255,255,255,.94);
  color: var(--brand);
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 2px 10px -4px rgba(43,33,24,.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. */

.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(--brand);
  border: 1px solid rgba(200,152,28,.16);
  border-radius: 0;
  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: 0;
  transition: background .2s var(--ease);
}
.mega__card:hover, .mega__card:focus-visible { background: rgba(200,152,28,.10); }
.mega__media { display: block; aspect-ratio: 3/2; border-radius: 7px; overflow: hidden; background: rgba(200,152,28,.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(--sand); }

.mega__foot {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(200,152,28,.16);
}
.mega__all {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); 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(200,152,28,.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(200,152,28,.12);
  border: 1px solid rgba(200,152,28,.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(--sand); 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(43,33,24,.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(43,33,24,.14));
  border-radius: 0; 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: 0; background: var(--sand, #f4f1e9); }
.award__logo--mark svg { width: 26px; height: 26px; fill: var(--brand); }
.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(43,33,24,.28); }
.award__title a:hover { border-color: var(--brand); }
.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: 0; 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(43,33,24,.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: 0; }
.lightbox__fig figcaption { color: var(--sand); 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(43,33,24,.14)); border-radius: 0; 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); }
/* The bottom margin is for the trade form that now follows it: the list used
   to be the last thing in its band and sat against the first field row. */
.trade-contact { list-style: none; margin: 1.2rem 0 2.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; justify-content: center; }
.trade-contact a { color: var(--accent); }
.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(200,152,28,.10); }
.subnav__label { font-size: .92rem; letter-spacing: 0; text-transform: none; }
.subnav__note  { font-size: .74rem; line-height: 1.35; color: var(--sand); 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. */
/* Powered by KlicKenya: the small-caps lead, then the logo (an inline SVG
   traced from the official one-line logo, filled with currentColor so it
   follows the text colour). The SVG's box runs from the top of the capitals
   to their baseline; the hand rises above and dips just below it as it does
   in the logo, and the y's tail hangs down. So:
   - height .7em makes "KlicKenya" exactly as tall as the capitals of the text
     it sits in, at whatever size that text is (set font-size per place);
   - baseline alignment puts it on the same line as "Powered by";
   - the padding leaves room for the hand above and the tail below. */
.klick-by { margin-block: 0; }
.klick-by a { display: inline-flex; align-items: baseline; gap: .55em; padding-block: .35em .3em; color: inherit; text-decoration: none; transition: color .2s var(--ease); }
.klick-by__lead { font-size: .72em; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.klick-by__mark { display: block; flex: none; height: .7em; width: auto; aspect-ratio: 2242 / 260; overflow: visible; }
/* footer: centred under the small print, at its size */
.footer-by { margin-top: .3rem; font-size: .82rem; text-align: center; }
.footer-by a { color: rgba(251,247,239,.6); }
.footer-by a:hover { color: var(--cream); }
/* after a sent enquiry: under the thank-you, at the size of its text */
.klick-by--done { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid var(--line, rgba(43,33,24,.14)); font-size: .78rem; text-align: center; }
.klick-by--done a { color: var(--ink); }
.klick-by--done a:hover { color: var(--brand); }
.book-done .klick-by--done { margin-bottom: 0; color: var(--ink); font-size: .75rem; }
.tsearch__done .klick-by--done { text-align: left; margin-top: 1rem; font-size: .75rem; }
.pkgdlg__form .klick-by--done { margin-top: 1.2rem; }

/* A quiet link to the Klickenya guides: after an enquiry is sent, and under the Blog */
.klick-note { margin-top: 1.4rem; font-size: .85rem; color: var(--ink-soft); }
.klick-note a { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand-500); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.klick-note a:hover { color: var(--brand); }
.klick-note svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.blog-grid + .klick-note { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.book-done .klick-note { margin: 1rem 0 0; font-size: .8rem; }
.tsearch__done .klick-note { margin-top: .8rem; font-size: .8rem; }
.listed-on { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.listed-on a { color: var(--brand); border-bottom: 1px solid rgba(43,33,24,.28); text-decoration: none; }
.listed-on a:hover { border-color: var(--brand); }

/* 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(43,33,24,.14)); border-radius: 0; 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(--brand); }
/* On a dark band the card needs to invert. */
.section--green .rv-card { background: rgba(255,255,255,.06); border-color: rgba(200,152,28,.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(--sand); }
/* 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(43,33,24,.2)); border-radius: 0;
  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(--brand); }
.xd-field:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43,33,24,.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(--brand); }
.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(--brand); }
.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: 0; text-decoration: none;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line, rgba(43,33,24,.14));
  box-shadow: 0 10px 28px -14px rgba(43,33,24,.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(--brand); }
.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(--brand);
}
.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 --brand 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(--brand); color: #fff;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 12px 30px -10px rgba(43,33,24,.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(--accent); 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: 0; 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(--brand); border-color: var(--brand); color: var(--cream); }
.curnote { font-size: .78rem; color: var(--ink-soft); margin-top: .6rem; }
.site-footer .curswitch__label { color: rgba(251,247,239,.66); }
.site-footer .curswitch__opt { color: rgba(251,247,239,.8); border-color: rgba(251,247,239,.24); }
.site-footer .curswitch__opt.is-active { background: var(--accent); border-color: var(--accent); color: var(--brand); }
/* 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(43,33,24,.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(--brand);
}
.curswitch--hero + .curnote { color: rgba(255,255,255,.66); max-width: 46ch; }
.site-footer .curnote { color: rgba(251,247,239,.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: 0;
  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(--brand-500); color: var(--ink); }
.avail-chip.is-active { background: var(--brand); border-color: var(--brand); 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: 0;
  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(--brand-500); color: var(--ink); }
.avail-chip:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.avail-chip.is-active { background: var(--brand); border-color: var(--brand); 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: 0;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: .84rem; line-height: 1.5; cursor: pointer;
}
.cursel select:hover { border-color: var(--brand-500); }
.cursel select:focus-visible { outline: 2px solid var(--brand-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(43,33,24,.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(--brand);
  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: 0; 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(--brand); }
.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(43,33,24,.14)); border-radius: 50%;
  background: #fff; color: var(--brand); 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; }

/* ---- Home: offers & packages slider -----------------------------------
   A native scroll-snap track, so swipe and trackpads need no script. The
   track bleeds to the right edge of the screen but starts in line with the
   container, so the first card sits where the heading does and the next one
   peeks in to say "there is more". */
.offers { --offers-gutter: max(1.25rem, calc((100vw - var(--container)) / 2)); overflow: hidden; }
.offers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.offers__head h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: .35rem 0 .6rem; }
.offers__lede { max-width: 46ch; color: rgba(251,247,239,.78); }
.offers__nav { display: flex; gap: .6rem; flex-shrink: 0; }
.offers__arrow {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(251,247,239,.35); background: transparent; color: var(--cream);
  cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.offers__arrow svg { width: 20px; height: 20px; }
.offers__arrow:hover:not(:disabled) { background: var(--cream); color: var(--brand); }
.offers__arrow:disabled { opacity: .3; cursor: default; }

.offers__track {
  display: flex; gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: .25rem var(--offers-gutter) 1rem; scroll-padding-inline: var(--offers-gutter);
  scrollbar-width: none;
}
.offers__track::-webkit-scrollbar { display: none; }
.offers__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.offer {
  position: relative; flex: 0 0 clamp(270px, 29vw, 380px); aspect-ratio: 4 / 5;
  scroll-snap-align: start; border-radius: var(--radius-lg); overflow: hidden;
  color: var(--cream); text-decoration: none; isolation: isolate; background: var(--brand-700);
}
.offer__media, .offer__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.offer__media img { object-fit: cover; transition: transform .9s var(--ease); }
.offer::after {           /* legibility: dark from the bottom, clear at the top */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(1,28,43,.92) 0%, rgba(1,28,43,.55) 38%, rgba(1,28,43,0) 68%);
}
.offer__body { position: absolute; inset: auto 0 0; z-index: 2; padding: 1.5rem 1.5rem 1.4rem; }
.offer__kind {
  display: inline-block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand); background: var(--accent); padding: .3rem .6rem; border-radius: 0; margin-bottom: .8rem;
}
.offer--featured .offer__kind { background: var(--cream); }
.offer__name { color: var(--cream); font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.1; }
.offer__tag { font-size: .88rem; color: rgba(251,247,239,.75); margin-top: .35rem; }
.offer__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(251,247,239,.22);
}
/* The amount on its own line, its wording ("per person") small beneath it. */
.offer__price { font-size: .78rem; line-height: 1.3; color: rgba(251,247,239,.72); }
.offer__price .pr { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--cream); }
.offer__cta { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.offer__cta span { display: inline-block; transition: transform .3s var(--ease); }
.offer:hover .offer__media img, .offer:focus-visible .offer__media img { transform: scale(1.06); }
.offer:hover .offer__cta span { transform: translateX(4px); }
.offer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.offers__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.offers__dots { display: flex; gap: .5rem; flex-wrap: wrap; }
.offers__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: rgba(251,247,239,.3); transition: width .3s var(--ease), background .3s;
}
.offers__dot.is-active { width: 28px; background: var(--accent); }

/* The packages page: land a card below the sticky header. */
.pkg { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.pkg:target { box-shadow: 0 0 0 2px var(--brand); }

@media (max-width: 700px) {
  .offers__nav { display: none; }            /* swipe is the control on a phone */
  .offer { flex-basis: 82vw; }
  .offers__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .offer__media img, .offer__cta span { transition: none; }
}

/* =====================================================================
   TAWI additions
   Components the TAWI pages use that the template did not have, plus the
   few global refinements that give the site its own, softer feel: rounded
   surfaces and pill buttons instead of the template's hairline squares.
   ===================================================================== */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.btn-row .btn { margin: 0; }

.owner-quote { margin: 1.6rem 0 1.4rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--accent-dark); background: var(--paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.owner-quote p { font-family: var(--serif); font-style: normal; font-size: 1.12rem; line-height: 1.5; color: var(--brand); margin: 0; }
.owner-quote cite { display: block; margin-top: .5rem; font-style: normal; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-500); }

.comforts { max-width: 920px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.review__stars { display: block; color: var(--accent); letter-spacing: .2em; font-size: .9rem; margin-bottom: .8rem; }
.cta-band__lede { color: rgba(255,255,255,.9); max-width: 52ch; margin-inline: auto; }

/* A tour with no photograph yet: a branded panel, never a broken image or a
   stock shot of something the trip does not include. */
.media-placeholder {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 220px;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 0%, var(--brand-700), var(--brand));
}
.media-placeholder img { width: 64px !important; height: auto !important; aspect-ratio: auto !important; opacity: .9; transform: none !important; }
.room-block p + p { margin-top: 1rem; }
.room-block .lede + p { margin-top: 1.1rem; }
/* Fewer packages than columns: centre the row instead of leaving a gap. */
.grid-3:has(> .pkg:only-child),
.grid-3:has(> .pkg:nth-child(2):last-child) { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px)); }

/* =====================================================================
   TAWI editorial theme
   ---------------------------------------------------------------------
   The look that sets TAWI apart from the template it was built on:
   a framed hero on an espresso ground with a rail of type down the side,
   a centred logo, Noto Serif set light and upright, hairline
   rules, sharp edges and small outline buttons with a long arrow.
   Everything below overrides earlier rules on purpose and is grouped by
   component; the tokens at the top of the file still drive the colours.
   ===================================================================== */
:root {
  --header-h: 84px;
  --frame: clamp(10px, 2vw, 26px);           /* espresso margin round the hero photo */
  --rail:  clamp(10px, 3.6vw, 52px);         /* wider right edge that carries the rail */
  --bg: #FBF8F2;                             /* warm ivory page */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
}
body { font-weight: 300; font-size: .97rem; line-height: 1.75; background: var(--bg); }
strong, b { font-weight: 500; }

/* ---- type ----------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 300; letter-spacing: -.012em; line-height: 1.12; }
h1 em, h2 em, h3 em, .statement em { font-style: normal; font-weight: 300; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.eyebrow { font-size: .62rem; letter-spacing: .3em; font-weight: 500; margin-bottom: .9rem; }
.lede { font-size: 1.05rem; line-height: 1.75; }
.section { background: var(--bg); }
.section--sand { background: var(--paper); }
.section--green { background: var(--brand); }

/* ---- buttons: small, square, hairline ------------------------------- */
.btn {
  border-radius: 0; min-height: 46px; padding: .75rem 1.5rem;
  font-size: .64rem; font-weight: 500; letter-spacing: .24em;
}
.btn:hover { transform: none; }
.btn--sm { min-height: 40px; padding: .6rem 1.15rem; font-size: .6rem; }
.btn--primary:hover { --btn-bg: var(--accent-dark); --btn-fg: var(--brand); border-color: var(--accent-dark); }
.btn--outline { border-color: rgba(43,33,24,.45); }
.btn--light { border-color: rgba(251,247,239,.55); }
.btn--sage { --btn-fg: var(--brand); }
/* The long arrow. A mask, so it takes the button's own text colour. */
.btn--arrow::after, .textlink::after {
  content: ""; display: inline-block; width: 26px; height: 10px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 6h30M25 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M0 6h30M25 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .3s var(--ease);
}
.btn--arrow:hover::after, .textlink:hover::after { transform: translateX(4px); }
.textlink { display: inline-flex; align-items: center; gap: .7rem; border-bottom: 0; font-size: .64rem; letter-spacing: .24em; }
.btn-row { gap: .6rem; }

/* ---- header: icons │ centred wordmark │ book + menu ------------------ */
.site-header,
body:has(.hero, .rhero) .site-header:not(.is-solid) { background: var(--brand); box-shadow: none; }
body:has(.hero, .rhero) .site-header::before { display: none; }
body:has(.hero, .rhero) .site-header:not(.is-solid) .brand-word,
body:has(.hero, .rhero) .site-header:not(.is-solid) .header-cta { text-shadow: none; }
.site-header.is-solid { box-shadow: 0 1px 0 rgba(251,247,239,.08); }
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  min-height: var(--header-h); padding: .6rem var(--rail) .6rem var(--frame);
}
.header-side { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.header-side--right { justify-content: flex-end; gap: 1.6rem; }
.header-icon { display: grid; place-items: center; width: 30px; height: 30px; color: rgba(251,247,239,.82); transition: color .2s var(--ease); }
.header-icon:hover { color: var(--accent); }
.header-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.brand { margin: 0; display: grid; justify-items: center; gap: .35rem; text-align: center; color: var(--cream); line-height: 1; }
.brand-name { font-family: var(--serif); font-weight: 300; font-size: 1.85rem; letter-spacing: .34em; margin-right: -.34em; }
.brand-sub { font-family: var(--sans); font-size: .5rem; font-weight: 500; letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--accent); }
.header-book {
  font-size: .6rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cream);
  padding: .55rem 1rem; border: 1px solid rgba(251,247,239,.45); transition: background .25s var(--ease), color .25s var(--ease);
}
.header-book:hover { background: var(--accent); border-color: var(--accent); color: var(--brand); }
.nav-toggle {
  display: flex; align-items: center; gap: .7rem; width: auto; height: 40px; padding: 0;
  background: none; border: 0; color: var(--cream);
}
.nav-toggle__label { font-size: .6rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.nav-toggle__bars { display: grid; gap: 7px; width: 30px; }
.nav-toggle .nav-toggle__bars span { display: block; height: 1px; margin: 0; background: var(--cream); transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(4px) rotate(30deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { transform: translateY(-4px) rotate(-30deg); opacity: 1; }
.cursel--compact select { border-radius: 0; }

/* The menu: a full-screen espresso overlay below the bar. */
.site-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain;
  background: var(--brand); color: var(--cream); border-top: 1px solid rgba(251,247,239,.1);
}
.site-menu[hidden] { display: none; }
.site-menu__inner {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem);
  width: min(100% - 2.5rem, var(--container)); margin-inline: auto; padding-block: clamp(2rem, 6vh, 4.5rem);
}
.site-menu__nav ul { display: grid; }
.site-menu__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid rgba(251,247,239,.12);
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.1;
  transition: color .25s var(--ease), padding .3s var(--ease);
}
.site-menu__nav a:hover, .site-menu__nav a[aria-current="page"] { color: var(--accent); font-style: normal; padding-left: .4rem; }
.site-menu__arrow { font-family: var(--sans); font-size: 1.2rem; opacity: .5; }
.site-menu__h { font-size: .6rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; }
.site-menu__rooms { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.2rem; margin-bottom: 2.2rem; }
.site-menu__rooms a { font-family: var(--serif); font-size: 1.05rem; color: rgba(251,247,239,.85); }
.site-menu__rooms a:hover { color: var(--accent); }
.site-menu__contact { font-size: .9rem; line-height: 1.9; color: rgba(251,247,239,.75); margin-bottom: 1.6rem; }
.site-menu__aside .cursel { margin-bottom: 1.4rem; }

/* ---- hero: the photograph inside an espresso frame ------------------- */
.hero, .rhero { background: var(--brand); }
.hero::after { inset: var(--header-h) var(--rail) var(--frame) var(--frame); }
.hero__media { inset: var(--header-h) var(--rail) var(--frame) var(--frame); }
.rhero__media { top: var(--header-h); right: var(--rail); bottom: var(--frame); left: var(--frame); width: auto; height: auto; }
.rhero__media img { inset: 0; }
.hero h1, .rhero h1 { font-weight: 300; }
.hero-scroll-cue { bottom: calc(var(--frame) + 1rem); border-radius: 0; background: none; border: 1px solid rgba(255,255,255,.4); width: 38px; height: 38px; }

/* Home: a framed slideshow with centred type, then the rail. */
.hero--framed { min-height: min(100svh, 980px); display: block; padding: 0; }
.hero--framed::after { display: none; }
.hero-frame {
  position: absolute; inset: var(--header-h) var(--rail) var(--frame) var(--frame);
  overflow: hidden; display: grid; place-items: center; isolation: isolate;
}
.hero--framed .hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,14,9,.42), rgba(20,14,9,.5) 55%, rgba(20,14,9,.62));
}
.hero--framed .hero__inner {
  position: relative; z-index: 2; max-width: none; padding: 2rem 1.25rem 4.5rem;
  display: grid; justify-items: center; gap: 2rem; text-align: center;
}
.hero--framed .hero__title {
  font-size: clamp(2.3rem, 5.6vw, 4.8rem); font-weight: 300; line-height: 1.05;
  letter-spacing: -.02em; text-shadow: 0 2px 40px rgba(0,0,0,.25);
}
.hero--framed .hero__title em { display: block; font-style: normal; }
.hero-rail {
  position: absolute; z-index: 3; top: calc(var(--header-h) + 1rem); bottom: calc(var(--frame) + 1rem);
  right: 0; width: var(--rail);
  /* In vertical writing the inline axis runs down the page, so a flex ROW
     is what stacks the two phrases top and bottom. */
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;
  writing-mode: vertical-rl; margin: 0;
  font-size: .56rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: rgba(251,247,239,.7);
}
.hero-rail__line { flex: 1; inline-size: auto; block-size: 1px; width: 1px; min-height: 2rem; background: rgba(251,247,239,.35); }
@media (max-width: 700px) { .hero-rail { display: none; } :root { --rail: var(--frame); } }

/* Inner page heroes keep their full-screen pin, now framed the same way. */
.hero--page .hero__inner { padding-bottom: clamp(4rem, 9vh, 6rem); }
.hero--page h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }

/* ---- the stay search: "Plan your stay" ------------------------------ */
.home-search { position: relative; z-index: 3; background: linear-gradient(var(--brand) 50%, var(--bg) 50%); padding: 0 0 1rem; }
.home-search .container { width: min(100% - 2 * var(--frame), 1180px); }
.home-search .curswitch { justify-content: center; margin-top: 1rem; }
.tsearch { width: 100%; max-width: 1180px; margin: 0 auto; position: relative; }
.booking--inline.tsearch { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.tsearch__form {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  background: var(--white); color: var(--ink); text-align: left;
  border: 1px solid rgba(43,33,24,.12);
  box-shadow: 0 30px 70px -45px rgba(20,14,9,.65);
}
.tsearch__title {
  display: grid; align-content: center; gap: .3rem; padding: 1.1rem 1.7rem;
  background: var(--paper); border-right: 1px solid var(--line);
}
.tsearch__kicker { font-family: var(--serif); font-style: normal; font-weight: 300; font-size: 1.45rem; line-height: 1.1; color: var(--brand); white-space: nowrap; }
.tsearch__note { font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brand-500); }
.tsearch__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tsearch__fields[hidden], .tsearch__details[hidden], .tsearch__submit[hidden] { display: none; }
.tsearch__field { display: grid; align-content: center; gap: .35rem; padding: 1.05rem 1.4rem; min-width: 0; position: relative; }
.tsearch__field + .tsearch__field { border-left: 1px solid var(--line-soft); }
.tsearch__label, .tsearch label.tsearch__label {
  font-family: var(--sans); font-size: .56rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--brand-500);
}
.tsearch__value {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 0; padding: .1rem 0 .25rem;
  background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 300; line-height: 1.35; color: var(--ink-soft);
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tsearch__value.is-set, .tsearch__select, .tsearch__value--menu { color: var(--brand); }
.tsearch__value:hover, .tsearch__value:focus-visible, .tsearch__value[aria-expanded="true"] { border-bottom-color: var(--accent-dark); outline: none; }
.tsearch__value--menu {
  padding-right: 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A6402' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / 10px 6px;
}
.tsearch__select option { font-family: var(--sans); color: var(--ink); }
.tsearch__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  min-width: 170px; padding: 0 1.9rem; border: 0; border-radius: 0;
  background: var(--brand); color: var(--cream); cursor: pointer;
  font-family: var(--sans); font-size: .64rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.tsearch__submit svg { width: 28px; height: 12px; transition: transform .3s var(--ease); }
.tsearch__submit:hover, .tsearch__submit:focus-visible { background: var(--accent); color: var(--brand); }
.tsearch__submit:hover svg { transform: translateX(4px); }
.tsearch .book-card__status { grid-column: 1 / -1; margin: 0; padding: .7rem 1.4rem; border-top: 1px solid var(--line-soft); font-size: .82rem; }

/* Step 2 takes the fields' place, next to the title. */
.tsearch__details { grid-column: 2 / -1; display: grid; }
.tsearch__recap { display: grid; align-content: center; gap: .35rem; margin: 0; padding: 1rem 1.4rem; font-size: .8rem; line-height: 1.45; color: var(--ink); }
.tsearch__change {
  justify-self: start; padding: 0; background: none; border: 0; cursor: pointer;
  font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brand-500);
  border-bottom: 1px solid currentColor;
}
.tsearch__input {
  width: 100%; padding: .15rem 0 .25rem; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-family: var(--serif); font-size: 1rem; font-weight: 300; color: var(--brand);
}
.tsearch__input:focus { outline: none; border-bottom-color: var(--accent-dark); }
.tsearch__input::placeholder { color: rgba(43,33,24,.38); }
.tsearch .book-step__err { grid-column: 1 / -1; margin: 0; border-radius: 0; }

@media (max-width: 1060px) {
  .tsearch__form { grid-template-columns: 1fr; }
  .tsearch__title { border-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; padding: .9rem 1.2rem; }
  .tsearch__fields { grid-template-columns: 1fr 1fr; }
  .tsearch__field { padding: .9rem 1.2rem; }
  .tsearch__fields .tsearch__field:nth-child(3) { border-left: 0; }
  .tsearch__fields .tsearch__field:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .tsearch__submit { min-height: 56px; }
  .tsearch__details { grid-column: 1; }
}
@media (max-width: 420px) {
  .tsearch__fields { grid-template-columns: 1fr; }
  .tsearch__fields .tsearch__field { border-left: 0; }
  .tsearch__fields .tsearch__field + .tsearch__field { border-top: 1px solid var(--line-soft); }
}

/* The calendar and guest popovers keep their dark theme, squared off. */
.booking__pop, .booking__guestspop, .booking__cell, .booking__cal-nav, .booking__step, .booking__done { border-radius: 0; }
.booking__cal-title { font-weight: 300; font-size: 1.05rem; }

/* ---- intro: a tall photograph, a small inset, a serif statement ------ */
.intro { padding-top: clamp(3rem, 7vw, 6rem); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.intro__main { margin: 0; }
.intro__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro__side { display: grid; gap: clamp(2rem, 5vw, 4rem); padding-top: clamp(0rem, 2vw, 1.5rem); }
.intro__inset { margin: 0 0 0 auto; width: min(58%, 300px); }
.intro__inset img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.22; color: var(--brand); letter-spacing: -.01em; margin-bottom: 1.4rem; }
.intro__body > p:not(.statement) { color: var(--ink-soft); max-width: 52ch; }
.intro__facts { display: flex; flex-wrap: wrap; gap: 0; margin: 1.8rem 0 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intro__facts li { flex: 1 1 0; display: grid; gap: .15rem; padding: 1rem 1rem 1rem 0; min-width: 110px; }
.intro__facts li + li { padding-left: 1rem; border-left: 1px solid var(--line); }
.intro__facts strong { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; color: var(--brand); line-height: 1.1; }
.intro__facts span { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 800px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__inset { display: none; }
}

/* ---- ways to stay: a ruled list and a three-column mosaic ------------ */
.ways { padding-block: 0; overflow: hidden; }
.ways__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ways__copy { padding-block: clamp(3.5rem, 8vw, 6rem); }
.ways__copy h2 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); margin-bottom: 2rem; color: var(--cream); }
.ways__copy h2 em { display: block; }
.ways__list { margin-bottom: 2.2rem; border-top: 1px solid rgba(251,247,239,.16); }
.ways__list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid rgba(251,247,239,.16); color: var(--cream);
  transition: padding .3s var(--ease), color .25s var(--ease);
}
.ways__label { font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.ways__note { grid-row: 2; font-size: .82rem; color: rgba(234,223,200,.65); }
.ways__list .arrow { grid-row: 1 / span 2; grid-column: 2; width: 28px; color: var(--accent); transition: transform .3s var(--ease); }
.ways__list .arrow svg { width: 28px; height: 12px; display: block; }
.ways__list a:hover { padding-left: .4rem; color: var(--accent); }
.ways__list a:hover .arrow { transform: translateX(4px); }
.ways__text { font-size: .9rem; color: rgba(234,223,200,.75); max-width: 46ch; margin-bottom: 1.8rem; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, .9rem); align-self: stretch; margin-block: -2rem; }
.mosaic__col { display: grid; gap: clamp(.5rem, 1vw, .9rem); align-content: start; }
.mosaic__col:nth-child(2) { margin-top: 4.5rem; }
.mosaic__col:nth-child(3) { margin-top: 1.6rem; }
.mosaic__item { margin: 0; overflow: hidden; }
.mosaic__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.mosaic__col:nth-child(2) .mosaic__item:nth-child(2) img { aspect-ratio: 3 / 4; }
.mosaic__item:hover img { transform: scale(1.05); }
@media (max-width: 900px) {
  .ways__grid { grid-template-columns: 1fr; }
  .ways__copy { padding-bottom: 0; }
  .mosaic { margin: 0 0 3rem; }
  .mosaic__col:nth-child(3) .mosaic__item:nth-child(n+3) { display: none; }
}

/* ---- section heads that put the action on the right ------------------ */
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.head-row h2 { max-width: 20ch; }
.head-row h2 em { display: block; }

/* ---- cards: square photographs, type on the page, no box ------------- */
.card { background: transparent; border: 0; border-radius: 0; }
.card__media img { aspect-ratio: 4 / 5; }
.card__body { padding: 1.2rem 0 0; }
.card__body h3 { font-size: 1.55rem; }
.card__body p { font-size: .9rem; }
.room-card__foot { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 1.1rem; }
.room-card__cta { font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); }
.split__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.split__media.framed::before, .split__media.framed::after { border-radius: 0; }
.amenity, .pkg, .offer, .incl__item, .voice, .review, .quote { border-radius: 0; }
.offer__kind { border-radius: 0; }
.media-placeholder { aspect-ratio: 4 / 5; }

/* ---- quotes: serif, ruled ------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.quote { margin: 0; padding-top: 1.6rem; border-top: 1px solid rgba(43,33,24,.25); display: flex; flex-direction: column; }
.quote blockquote p { font-family: var(--serif); font-style: normal; font-weight: 300; font-size: 1.22rem; line-height: 1.5; color: var(--brand); }
.quote figcaption { margin-top: auto; padding-top: 1.3rem; display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; }
.quote__name { font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); }
.quote__from, .quote__src { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-500); }
@media (max-width: 800px) { .quotes { grid-template-columns: 1fr; } }

/* ---- dark split band (tours) ----------------------------------------- */
.tours-band h2 { color: var(--cream); }
.tours-band .split__body p { color: rgba(234,223,200,.8); }
.tours-band .split__body strong { color: var(--cream); }

/* ---- offers slider: square frames, serif names ----------------------- */
.offers__arrow { border-radius: 0; }
.offer__name { font-weight: 300; }
.offers__dot { border-radius: 0; }

/* ---- footer ----------------------------------------------------------- */
.footer-tag { font-weight: 300; font-size: 1.15rem; }
.footer-h { letter-spacing: .3em; font-size: .62rem; }
.curswitch__opt { border-radius: 0; }

/* ---- header on small screens ----------------------------------------- */
@media (max-width: 720px) {
  :root { --header-h: 70px; }
  .header-book, .nav-toggle__label, .header-side--left .cursel { display: none; }
  .brand-name { font-size: 1.45rem; }
  .brand-sub { font-size: .44rem; }
  .header-side { gap: .5rem; }
  .site-menu__inner { grid-template-columns: 1fr; }
}
.home-search .container { text-align: center; }
.location .split__media img { aspect-ratio: auto; }
.footer-tag { color: rgba(251,247,239,.82); }
.footer-tag strong { color: var(--cream); }
/* No offset outline behind photographs: the frame is the hero's job. */
.framed::before { display: none; }

/* =====================================================================
   Revision: crest logo, no italics, bold hero, alternating home bands
   ===================================================================== */
:root { --header-h: 96px; }
em, i, cite, blockquote, address, dfn, var { font-style: normal; }

/* The crest in the bar. Tall, so the bar is a little taller to carry it. */
.brand-logo { display: block; height: 76px; width: auto; }
@media (max-width: 720px) {
  :root { --header-h: 78px; }
  .brand-logo { height: 60px; }
}

/* Home headline: Noto Serif, regular weight, a size down. */
.hero--framed .hero__title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.12;
  font-size: clamp(1.9rem, 4.1vw, 3.5rem);
}
.hero__title-line { display: block; }
.tsearch__kicker { font-weight: 400; }

/* White bands. */
.section--white { background: #FFFFFF; }
.home-search { background: linear-gradient(var(--brand) 50%, #FFFFFF 50%); }

/* Offers on white. */
.offers--light .offers__head h2 { color: var(--brand); }
.offers--light .offers__lede { color: var(--ink-soft); }
.offers--light .eyebrow { color: var(--brand-500); }
.offers--light .offers__arrow { border-color: var(--line); color: var(--brand); }
.offers--light .offers__arrow:hover:not(:disabled) { background: var(--brand); color: var(--cream); }
.offers--light .offers__dot { background: rgba(43,33,24,.18); }
.offers--light .offers__dot.is-active { background: var(--accent-dark); }

/* Rooms on brown. */
.rooms-band h2 { color: var(--cream); }
.rooms-band .eyebrow { color: var(--accent); }
.rooms-band .card__body h3 { color: var(--cream); }
.rooms-band .card__body p { color: rgba(234,223,200,.75); }
.rooms-band .card__body .eyebrow { color: var(--accent); }
.rooms-band .room-card__foot { border-top-color: rgba(251,247,239,.16); }
.rooms-band .room-card__cta, .rooms-band .room-card__price { color: var(--cream); }

/* Location on brown. */
.location h2 { color: var(--cream); }
.location .split__body p { color: rgba(234,223,200,.8); }
.location .split__body strong { color: var(--cream); }

/* Tours on white. */
.tours-band h2 { color: var(--brand); }
.tours-band .split__body p { color: var(--ink-soft); }
.tours-band .split__body strong { color: var(--brand); }

/* Photo strip on brown. */
.hstrip-section--dark { background: var(--brand); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hstrip-section--dark .eyebrow { color: var(--accent); }
.hstrip-section--dark .hstrip__hint { color: rgba(251,247,239,.75); }

/* Quotes on white keep their rules. */
.section--white .quote { border-top-color: rgba(43,33,24,.2); }
.header-side--left .cursel { margin-left: .4rem; margin-right: 0; }
@media (max-width: 480px) { .hero--framed .hero__title { font-size: 1.6rem; } }

/* ---- compact search, inside the home hero ----------------------------- */
.hero--framed .hero__inner { gap: 1.6rem; width: 100%; }
.tsearch--compact { max-width: 760px; margin: 0 auto; }
.tsearch--compact .tsearch__form {
  grid-template-columns: minmax(0, 1fr) auto;
  background: rgba(255,255,255,.96);
  border: 0; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6);
}
.tsearch--compact .tsearch__field { padding: .55rem .95rem; gap: .15rem; }
.tsearch--compact .tsearch__label, .tsearch--compact label.tsearch__label { font-size: .5rem; letter-spacing: .22em; }
.tsearch--compact .tsearch__value { font-size: .86rem; padding: 0 0 .1rem; }
.tsearch--compact .tsearch__value--menu { padding-right: 1rem; background-size: 9px 5px; }
.tsearch--compact .tsearch__submit { min-width: 0; padding: 0 1.25rem; font-size: .58rem; gap: .6rem; }
.tsearch--compact .tsearch__submit svg { width: 22px; height: 10px; }
.tsearch--compact .tsearch__details { grid-column: 1 / -1; }
.tsearch--compact .tsearch__recap { padding: .55rem .95rem; font-size: .72rem; }
.tsearch--compact .tsearch__input { font-size: .86rem; }
.tsearch--compact .book-card__status { padding: .5rem .95rem; font-size: .75rem; }
@media (max-width: 1060px) {
  .tsearch--compact .tsearch__form { grid-template-columns: 1fr; }
  .tsearch--compact .tsearch__submit { min-height: 44px; }
}
@media (max-width: 420px) {
  .tsearch--compact .tsearch__fields { grid-template-columns: 1fr 1fr; }
  .tsearch--compact .tsearch__fields .tsearch__field:nth-child(odd) { border-left: 0; }
  .tsearch--compact .tsearch__fields .tsearch__field:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .tsearch--compact .tsearch__fields .tsearch__field:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}


/* ---- stay enquiry, step 2: extras + details, and the thank-you -------- */
.tsearch__details[hidden], .tsearch__done[hidden] { display: none; }
.tsearch__step2head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.tsearch__recap { grid-auto-flow: column; align-items: baseline; gap: 1rem; }
.tsearch__extras { border: 0; margin: 0; padding: .9rem 1.4rem 1rem; display: grid; gap: .7rem; border-bottom: 1px solid var(--line-soft); }
.tsearch__extras legend { float: left; width: 100%; margin-bottom: .2rem; }
.tsearch__extras legend span { text-transform: none; letter-spacing: 0; font-weight: 300; color: var(--ink-soft); }
.tsearch__xgroup { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .4rem 1rem; align-items: start; }
.tsearch__xcat { font-family: var(--serif); font-size: .88rem; color: var(--brand); padding-top: .35rem; }
.tsearch__xlist { display: flex; flex-wrap: wrap; gap: .4rem; }
.tsearch__x {
  display: inline-flex; align-items: baseline; gap: .5rem; cursor: pointer;
  padding: .38rem .7rem; border: 1px solid var(--line); background: #fff;
  font-size: .78rem; color: var(--ink); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.tsearch__x input { position: absolute; opacity: 0; pointer-events: none; }
.tsearch__x:hover { border-color: var(--accent-dark); }
.tsearch__x:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--cream); }
.tsearch__x:has(input:focus-visible) { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.tsearch__x:has(input:checked) .tsearch__xprice { color: var(--accent); }
.tsearch__xprice { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); }
.tsearch__contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.tsearch__contact .tsearch__field + .tsearch__field { border-left: 1px solid var(--line-soft); }
.tsearch__done { grid-column: 1 / -1; padding: 1.3rem 1.6rem; text-align: left; color: var(--ink); }
.tsearch__donehead { font-family: var(--serif); font-size: 1.25rem; color: var(--brand); margin-bottom: .3rem; }
.tsearch__done p { font-size: .88rem; }
.tsearch__wa { display: inline-block; margin-top: .6rem; font-size: .62rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brand-500); border-bottom: 1px solid currentColor; }
.tsearch--compact .tsearch__extras { padding: .7rem .95rem .8rem; }
.tsearch--compact .tsearch__xgroup { grid-template-columns: 8rem minmax(0, 1fr); }
.tsearch--compact .tsearch__x { font-size: .72rem; padding: .3rem .6rem; }
@media (max-width: 760px) {
  .tsearch__xgroup { grid-template-columns: 1fr; }
  .tsearch__contact { grid-template-columns: 1fr; }
  .tsearch__contact .tsearch__field + .tsearch__field { border-left: 0; border-top: 1px solid var(--line-soft); }
  .tsearch__contact .tsearch__submit { min-height: 48px; }
}

/* ---- home "Our rooms": one section for all eight ---------------------- */
.rooms-pics { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(.5rem, 1vw, .9rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.rooms-pics__item { margin: 0; overflow: hidden; }
.rooms-pics__item img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rooms-pics__item:first-child img { aspect-ratio: auto; }
.rooms-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.rooms-copy__text p { color: rgba(234,223,200,.82); }
.rooms-copy__text p + p { margin-top: 1rem; }
.rooms-copy__times { font-size: .85rem; }
.rooms-copy__times strong { color: var(--cream); }
.rooms-band .rooms-copy__list li { color: var(--cream); }
.rooms-band .amenity__ck { stroke: var(--accent); }
.rooms-band .rooms-copy__list { grid-template-columns: 1fr 1fr; align-content: start; }
@media (max-width: 800px) {
  .rooms-pics { grid-template-columns: 1fr 1fr; }
  .rooms-pics__item:first-child { grid-column: 1 / -1; }
  .rooms-copy { grid-template-columns: 1fr; }
}
.site-menu__rooms li { font-family: var(--serif); font-size: 1.05rem; color: rgba(251,247,239,.85); }
html { scroll-padding-top: calc(var(--header-h) + 8px); }

/* =====================================================================
   Stay enquiry in three steps, and the hero that holds it
   ===================================================================== */

/* The hero grows with its content: steps 2 and 3 are taller than step 1,
   and on a phone taller than the screen. The frame is in normal flow now
   (padding on the hero makes the espresso margin), so nothing is clipped. */
.hero--framed {
  min-height: 0; padding: var(--header-h) var(--rail) var(--frame) var(--frame);
}
.hero-frame {
  position: relative; inset: auto;
  min-height: calc(min(100svh, 980px) - var(--header-h) - var(--frame));
}
.hero--framed .hero__inner { padding: 3rem 1.25rem 3.5rem; }

/* Step header: "Step 2 of 3 · Anything to add?" with the dates recap. */
.tsearch__stephead {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .85rem 1.2rem .75rem; border-bottom: 1px solid var(--line-soft); background: var(--paper);
}
.tsearch__stepno { font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brand-500); }
.tsearch__steptitle { font-family: var(--serif); font-size: 1.08rem; color: var(--brand); }
.tsearch__stephead .tsearch__recap { margin-left: auto; padding: 0; display: inline-flex; gap: .7rem; align-items: baseline; font-size: .76rem; color: var(--ink-soft); }
.tsearch__recap strong { color: var(--brand); font-weight: 500; }

/* Extras: a tick list, grouped, with the price on the right. */
.tsearch__extras { padding: .9rem 1.2rem; display: grid; gap: .9rem; border-bottom: 1px solid var(--line-soft); }
.tsearch__xgroup { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .4rem 1rem; align-items: start; }
.tsearch__xcat { font-family: var(--serif); font-size: .9rem; color: var(--brand); padding-top: .55rem; }
.tsearch__xlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.tsearch__x {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
  min-height: 46px; padding: .5rem .8rem; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: .84rem; line-height: 1.3;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.tsearch__x input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tsearch__xbox { width: 18px; height: 18px; border: 1.5px solid var(--brand-500); display: grid; place-items: center; background: #fff; }
.tsearch__x:has(input:checked) { background: var(--paper); border-color: var(--brand); color: var(--ink); }
.tsearch__x:has(input:checked) .tsearch__xbox { background: var(--brand); border-color: var(--brand); }
.tsearch__x:has(input:checked) .tsearch__xbox::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--cream); border-bottom: 2px solid var(--cream); transform: translateY(-1px) rotate(-45deg); }
.tsearch__x:has(input:checked) .tsearch__xprice { color: var(--brand-500); }
.tsearch__x:hover { border-color: var(--accent-dark); }
.tsearch__x:has(input:focus-visible) { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.tsearch__xprice { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-500); white-space: nowrap; }

/* Step 3 */
.tsearch__chosen { grid-column: 1 / -1; margin: 0; padding: .6rem 1.2rem; font-size: .78rem; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.tsearch__contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsearch__opt { text-transform: none; letter-spacing: 0; font-weight: 300; color: var(--ink-soft); }
.tsearch__fine { margin: 0; padding: 0 1.2rem .9rem; font-size: .72rem; color: var(--ink-soft); }

/* The action row: Back on the left, Skip and Next / Send on the right. */
.tsearch__actions { display: flex; align-items: stretch; gap: .5rem; padding: .8rem 1.2rem; }
.tsearch__back {
  margin-right: auto; padding: 0 .4rem; min-height: 44px; background: none; border: 0; cursor: pointer;
  font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.tsearch__back:hover { color: var(--brand); }
.tsearch__skip {
  min-height: 44px; padding: 0 1.2rem; background: #fff; border: 1px solid var(--line); cursor: pointer;
  font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brand);
}
.tsearch__skip:hover { border-color: var(--brand); }
.tsearch__actions .tsearch__submit { min-height: 44px; padding: 0 1.5rem; }
.tsearch--compact .tsearch__actions .tsearch__submit { font-size: .6rem; }

/* ---- phones ----------------------------------------------------------- */
@media (max-width: 760px) {
  .hero--framed .hero__inner { padding: 2rem .75rem 2.25rem; gap: 1.25rem; }
  .tsearch--compact { max-width: none; }

  /* 16px text in every field, or iOS zooms the page on focus. */
  .tsearch__input, .tsearch__select, .tsearch__value,
  .tsearch--compact .tsearch__input, .tsearch--compact .tsearch__value { font-size: 16px; }
  .tsearch__field, .tsearch--compact .tsearch__field { padding: .7rem .95rem; min-height: 60px; }
  .tsearch__label, .tsearch--compact .tsearch__label, .tsearch--compact label.tsearch__label { font-size: .58rem; }

  /* Step 1: dates side by side, guests full width, then a big Next. */
  .tsearch__fields, .tsearch--compact .tsearch__fields { grid-template-columns: 1fr 1fr; }
  .tsearch__fields .tsearch__field:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-soft); }
  .tsearch__fields .tsearch__field:nth-child(2) { border-left: 1px solid var(--line-soft); border-top: 0; }
  .tsearch__form > .tsearch__submit, .tsearch--compact .tsearch__form > .tsearch__submit { min-height: 54px; font-size: .66rem; }

  /* Step 2: one extra per row, a full-width tap target. */
  .tsearch__stephead { padding: .8rem .95rem .7rem; }
  .tsearch__stephead .tsearch__recap { margin-left: 0; width: 100%; }
  .tsearch__extras, .tsearch--compact .tsearch__extras { padding: .8rem .95rem; }
  .tsearch__xgroup, .tsearch--compact .tsearch__xgroup { grid-template-columns: 1fr; gap: .4rem; }
  .tsearch__xcat { padding-top: 0; }
  .tsearch__xlist { grid-template-columns: 1fr; }
  .tsearch__x, .tsearch--compact .tsearch__x { min-height: 52px; font-size: .95rem; padding: .6rem .85rem; }

  /* Step 3: stacked fields. */
  .tsearch__contact { grid-template-columns: 1fr; }
  .tsearch__contact .tsearch__field + .tsearch__field { border-left: 0; border-top: 1px solid var(--line-soft); }

  /* Actions: Next / Send full width on top, Back and Skip beneath. */
  .tsearch__actions { display: grid; grid-template-columns: 1fr 1fr; padding: .8rem .95rem; }
  .tsearch__actions .tsearch__submit { grid-column: 1 / -1; grid-row: 1; min-height: 54px; font-size: .66rem; }
  .tsearch__back { margin: 0; min-height: 48px; border: 1px solid var(--line); }
  .tsearch__skip { min-height: 48px; }
  .tsearch__actions:not(:has(.tsearch__skip)) .tsearch__back { grid-column: 1 / -1; }
  .tsearch__fine { padding: 0 .95rem .9rem; }
}
@media (max-width: 760px) {
  .booking__pop { width: calc(100vw - 1.5rem); padding: 1rem; }
  .booking__cell { min-height: 42px; font-size: .95rem; }
  .booking__done { min-height: 44px; padding-inline: 1.4rem; }
  .booking__step { width: 40px; height: 40px; }
}

/* ---- phones: headline in the middle of the photo, booking at its foot ---- */
@media (max-width: 760px) {
  .hero-frame { display: flex; flex-direction: column; }
  .hero--framed .hero__inner {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    gap: 1.5rem; padding: 2rem .75rem .75rem;
  }
  /* The headline sits low, just above the booking form, with the photo
     open above it (all the free space goes on top). */
  .hero--framed .hero__title { margin-top: auto; margin-bottom: clamp(.25rem, 2.5vh, 1.25rem); }
  .hero--framed .tsearch--compact { width: 100%; }
}
/* Clear the floating chat button, so it never sits on the Next button. */
@media (max-width: 760px) { .hero--framed .hero__inner { padding-bottom: 5rem; } }

/* =====================================================================
   The rooms page (/rooms): one room type, its gallery, calendar and booking
   ===================================================================== */
.room-facts { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1.6rem; }
.room-facts li { display: grid; gap: .15rem; }
.room-facts span { font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.room-facts strong { font-weight: 400; color: var(--cream); font-size: .95rem; }

.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.room-main > .room-block:first-child { margin-top: 0; }
.room-block h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.room-block p + p { margin-top: 1rem; }
.room-subhead { font-size: 1.25rem; margin-bottom: .9rem; }

.room-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); aspect-ratio: 16 / 9; }
.room-gal__item { margin: 0; overflow: hidden; }
.room-gal__item--lead { grid-row: 1 / span 2; }
.room-gal__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform .8s var(--ease); }
.room-gal__item:hover img { transform: scale(1.04); }

/* Availability: two months, nights crossed out when every unit is taken. */
.rcal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.rcal__name { font-family: var(--serif); color: var(--brand); margin-bottom: .5rem; }
.rcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rcal__dow { font-size: .56rem; font-weight: 500; letter-spacing: .14em; text-align: center; color: var(--brand-500); padding-bottom: .2rem; }
.rcal__cell { aspect-ratio: 1; display: grid; place-items: center; font-size: .78rem; color: var(--ink); background: var(--paper); }
.rcal__cell.is-blank { background: none; }
.rcal__cell.is-past { color: rgba(43,33,24,.28); background: none; }
.rcal__cell.is-free { background: #EEF3E6; color: var(--ink); }
.rcal__cell.is-full { background: var(--paper); color: rgba(43,33,24,.4); text-decoration: line-through; }
.rcal__legend { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .78rem; color: var(--ink-soft); }
.rcal__key { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: -.4rem; }
.rcal__key.is-free { background: #EEF3E6; }
.rcal__key.is-full { background: var(--paper); border: 1px solid var(--line); }
.muted-note { font-size: .85rem; color: var(--ink-soft); margin-top: .7rem; }

.unit-names { display: flex; flex-wrap: wrap; gap: .4rem; }
.unit-names li { padding: .35rem .8rem; border: 1px solid var(--line); font-family: var(--serif); font-size: .92rem; color: var(--brand); }

/* The booking box beside the content: sticks while the page scrolls. */
.room-aside { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
.room-book { border: 1px solid var(--line); background: var(--paper); padding: 1.3rem 1.2rem 1.1rem; box-shadow: 0 30px 60px -45px rgba(20,14,9,.5); }
.room-book__title { font-family: var(--serif); font-size: 1.35rem; color: var(--brand); }
.room-book__price { margin-top: .35rem; font-family: var(--serif); font-size: 1.15rem; color: var(--brand); }
.room-book__price span { font-family: var(--sans); font-size: .75rem; color: var(--ink-soft); }
.room-book__note { font-size: .8rem; color: var(--ink-soft); margin: .4rem 0 1rem; }
.room-book__wa { display: block; margin-top: .9rem; text-align: center; font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-500); }

/* The enquiry, stacked for a narrow column: one field per row. */
.tsearch--stack .tsearch__form { grid-template-columns: 1fr; box-shadow: none; }
.tsearch--stack .tsearch__fields { grid-template-columns: 1fr 1fr; }
.tsearch--stack .tsearch__fields .tsearch__field:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line-soft); }
.tsearch--stack .tsearch__fields .tsearch__field:nth-child(2) { border-left: 1px solid var(--line-soft); }
.tsearch--stack .tsearch__form > .tsearch__submit { min-height: 50px; }
.tsearch--stack .tsearch__xgroup { grid-template-columns: 1fr; }
.tsearch--stack .tsearch__xlist { grid-template-columns: 1fr; }
.tsearch--stack .tsearch__contact { grid-template-columns: 1fr; }
.tsearch--stack .tsearch__contact .tsearch__field + .tsearch__field { border-left: 0; border-top: 1px solid var(--line-soft); }
.tsearch--stack .tsearch__stephead .tsearch__recap { margin-left: 0; width: 100%; }
.tsearch--stack .tsearch__actions { flex-wrap: wrap; }

@media (max-width: 960px) {
  .room-layout { grid-template-columns: 1fr; }
  .room-aside { position: static; order: -1; }
}
@media (max-width: 640px) {
  .room-gal { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .room-gal__item--lead { grid-column: 1 / -1; grid-row: auto; }
  .room-gal__item img { aspect-ratio: 4 / 3; }
  .room-gal__item:nth-child(n+4) { display: none; }
  .rcal { grid-template-columns: 1fr; }
}

/* Step 1 has three fields (Arrive, Depart, Guests): no empty fourth column. */
.tsearch__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .tsearch__fields, .tsearch--compact .tsearch__fields { grid-template-columns: 1fr 1fr; }
}

/* The menu's currency chooser: label and box side by side, with room. */
.site-menu__aside .cursel { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; }
.site-menu__aside .cursel label, .site-menu__aside .cursel .cursel__label { margin: 0; white-space: nowrap; }
/* The header's own rules (gap: 0, hidden under 1080px) are for the compact
   chooser in the bar, not the one in the menu. */
.site-header .site-menu__aside .cursel { display: flex; gap: .9rem; margin: 0 0 1.4rem; }
.site-header .site-menu__aside .cursel__label { color: rgba(251,247,239,.75); }

/* ---- home reviews: a slider with stars ---------------------------------- */
.rslider { --offers-gutter: max(1.25rem, calc((100vw - var(--container)) / 2)); position: relative; }
.rslider__nav { display: flex; justify-content: flex-end; gap: .6rem; margin-bottom: 1.2rem; }
.rslider__track {
  display: flex; gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: .25rem var(--offers-gutter) 1rem; scroll-padding-inline: var(--offers-gutter);
  scrollbar-width: none;
}
.rslider__track::-webkit-scrollbar { display: none; }
.rslider__track:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: -2px; }
.rslide {
  flex: 0 0 min(86vw, 380px); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.6rem 1.5rem 1.4rem; background: var(--paper); border-top: 2px solid var(--accent-dark);
}
.rslide blockquote p { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; line-height: 1.55; color: var(--brand); }
.rslide figcaption { margin-top: auto; display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; }
.rslide__stars { display: inline-flex; gap: .2rem; }
.rslide__stars svg { width: 17px; height: 17px; fill: rgba(43,33,24,.15); }
.rslide__stars .is-on svg { fill: var(--accent); }
.rslider__dots { margin-top: 1.2rem; justify-content: center; }
.rslider .offers__arrow { border-color: var(--line); color: var(--brand); }
.rslider .offers__arrow:hover:not(:disabled) { background: var(--brand); color: var(--cream); }
.rslider .offers__dot { background: rgba(43,33,24,.18); }
.rslider .offers__dot.is-active { background: var(--accent-dark); }

/* A slider whose cards all fit on screen has nothing to move. */
[data-offers].is-static .rslider__nav,
[data-offers].is-static .offers__nav,
[data-offers].is-static [data-offers-dots] { visibility: hidden; }
[data-offers].is-static .rslider__nav { display: none; }

/* ---- Google reviews: rating badge and attribution ------------------------ */
.gbadge { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; padding: .55rem 1rem; border: 1px solid var(--line); background: #fff; color: var(--brand); text-decoration: none; transition: border-color .2s; }
.gbadge:hover { border-color: var(--accent-dark); }
.gbadge__n { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.gbadge__stars { display: inline-flex; gap: 2px; }
.gbadge__stars svg { width: 15px; height: 15px; fill: #fbbc04; }
.gbadge__t { font-size: .8rem; color: var(--ink-soft, #5a5249); }
/* "Google Maps" in Roboto, as Google's text-attribution guidelines describe. */
.gmaps { font-family: Roboto, Arial, sans-serif; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5e5e5e; }
.rslide__g { display: flex; align-items: center; gap: .7rem; }
.rslide__ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sand); }
.rslide__who { display: grid; gap: .15rem; }
.rslide__who a { text-decoration: none; }
.rslide__who a:hover { text-decoration: underline; }
.rslide .quote__src a { color: inherit; text-decoration: none; }
.rslide blockquote p { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.rv-by--g { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; }
.rv-by--g .rslide__ava { width: 32px; height: 32px; }
.rv-by--g a { color: inherit; }

/* "Yes, available — 2 rooms for 4 adults" under the booking fields, and the
   small "Available" mark on the recap of steps 2 and 3. */
.tsearch .book-card__status strong { font-weight: 600; }
.tsearch .book-card__status.is-ok { background: #edf5ee; color: #1c5b32; border: 0; border-top: 1px solid #cfe3d2; }
.tsearch .book-card__status.is-ok strong::before { content: ""; display: inline-block; width: .55rem; height: .3rem; margin: 0 .45rem .2rem .1rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.tsearch .book-card__status.is-bad { border: 0; border-top: 1px solid #e6cfa8; }
.tsearch .book-card__status.is-neutral { border: 0; border-top: 1px solid var(--line-soft); color: var(--ink-soft, #5a5249); background: #faf6ee; }
.tsearch__avail { display: inline-block; margin-right: .35rem; padding: .05rem .45rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; background: #edf5ee; color: #1c5b32; }

/* ---- Blog on phones: compact rows (photo left, words right), so three or
        four posts fit on one screen instead of one tall card each --------- */
@media (max-width: 640px) {
  .blog-grid { gap: 0; }
  .blog-grid .blog-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .95rem; align-items: start;
                          padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .blog-grid .blog-card:first-child { padding-top: 0; }
  .blog-grid .blog-card .card__media img { aspect-ratio: 1 / 1; }
  .blog-grid .blog-card .card__body { padding: 0; }
  .blog-grid .blog-card .card__body h3 { font-size: 1.05rem; line-height: 1.3; margin: .3rem 0 0;
                                         display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-grid .blog-card .card__body p,
  .blog-grid .blog-card .blog-card__more { display: none; }
  .blog-grid .blog-card__meta { font-size: .62rem; }
  .blog-grid .blog-card__src { top: .35rem; right: .35rem; padding: .22rem .4rem; font-size: .56rem; }
  .blog-grid .blog-card__src svg { width: 9px; height: 9px; }
}