/* ==========================================================================
   style.css — base, layout primitives and component blocks
   Mobile-first: everything here is the small-screen state.
   Breakpoint overrides live in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip (not hidden) so position:sticky keeps working */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--f-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  color: var(--c-heading);
  letter-spacing: -.015em;   /* Didone sets tighter than the old Garamond */
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--e-soft); }
a:hover { color: var(--c-secondary); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }
address { font-style: normal; }

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--sp-6) 0;
}

/* Long unbroken tokens — email addresses and URLs — must wrap rather than
   push past their container. `anywhere` is scoped to those links so ordinary
   prose still breaks on word boundaries. */
body { overflow-wrap: break-word; }
a[href^="mailto:"], a[href^="http"], a[href^="tel:"] { overflow-wrap: anywhere; }

::selection { background: var(--c-secondary); color: var(--c-white); }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-primary);
  color: var(--c-white);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  transition: top var(--t-base) var(--e-out);
}
.skip-link:focus { top: var(--sp-4); color: var(--c-white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background: var(--c-bg-alt); }
.section--sand { background: var(--c-bg-sand); }
.section--dark { background: var(--c-primary); color: rgba(255, 255, 255, .78); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: var(--c-white); }

.grid { display: grid; gap: var(--grid-gap); }
.grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr; }

/* Phones, compact cards only. A nine- or twelve-item set is too long for a
   rail (too many swipes) and far too long stacked one-up, so pair them.
   The min-width rules in responsive.css load later and take this back over. */
.grid--pair-m {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
/* Half-width columns leave ~165px at 390px, so the roomy default card padding
   and 56px icon squeeze the copy into a ragged ribbon. Tighten both while
   paired; everything returns to normal at the first breakpoint. */
.grid--pair-m .feature {
  padding: var(--sp-5) var(--sp-3);
}
.grid--pair-m .feature__icon {
  width: 44px; height: 44px;
  margin-bottom: var(--sp-3);
}
.grid--pair-m .feature__icon svg { width: 20px; height: 20px; }
.grid--pair-m .feature h3 { font-size: var(--fs-base); }
.grid--pair-m .feature p  { font-size: var(--fs-sm); line-height: 1.65; }

/* Grid and flex children default to min-width:auto, which lets an item with an
   intrinsic size (iframe, table, long token) inflate its track past the
   viewport. Reset it so tracks can actually shrink. */
.grid > *, .split > * { min-width: 0; }

.stack > * + * { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. Section heading block
   -------------------------------------------------------------------------- */
.sec-head { margin-bottom: var(--sp-8); max-width: 46rem; }
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-secondary);
}
.section--dark .eyebrow { color: var(--c-secondary-300); }

.sec-head h2 { margin-bottom: var(--sp-4); }
.sec-head p { color: var(--c-text); font-size: var(--fs-lg); }
.section--dark .sec-head p { color: rgba(255, 255, 255, .74); }

/* Thin rule used under centred headings */
.rule {
  width: 64px; height: 1px;
  margin: var(--sp-5) 0 0;
  background: var(--c-secondary);
  border: 0;
}
.sec-head--center .rule { margin-inline: auto; }

/* ==========================================================================
   Section heading tiers

   Every heading on this site used to render at the same size and alignment,
   so a page read as a list of equals with no way in. These three tiers give
   a page a shape. Rule of thumb per page:
     --lead   once   — the anchor moment. Largest, left, no rule.
     (default) 1–2x  — chapter breaks. Centered, --fs-h2.
     --quiet  freely — supporting/utility blocks. Small, left, no rule.
   ========================================================================== */
.sec-head--lead {
  max-width: none;
  margin-bottom: var(--sp-9);
}
.sec-head--lead h2 {
  max-width: 16ch;
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}
.sec-head--lead .rule { display: none; }

.sec-head--quiet {
  max-width: 36rem;
  margin-bottom: var(--sp-6);
}
.sec-head--quiet h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
}
.sec-head--quiet .rule { display: none; }
.sec-head--quiet .eyebrow { color: var(--c-muted); }

/* A lead head can carry a short standfirst set apart from the body copy */
.sec-head--lead .sec-head__stand {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--c-text);
}

/* ==========================================================================
   Rail — horizontal snap row

   A four-card grid becomes four full screens once it collapses to one column
   on a phone. As a rail the same set is one screen and reads as a set you can
   compare, which is what a card group is for. Grid is restored from 768px up.
   ========================================================================== */
.rail {
  display: grid;
  grid-auto-flow: column;
  /* .grid--3/--4 also apply here and their explicit template would win,
     crushing every card into a fixed column. Clear it so auto-columns rule. */
  grid-template-columns: none;
  /* A minmax() with a 0 min lets grid shrink every track to fit the container,
     which silently defeats the overflow the rail depends on. Fixed track. */
  grid-auto-columns: 82%;
  gap: var(--grid-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  /* bleed to the screen edge so a peeking card signals "scrollable" */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* The reset above is defeated by .grid--2/--3/--4/--6, which set an explicit
   template inside responsive.css — a file that loads AFTER this one, so source
   order hands it the win. The tracks then collapse (min-width:0 lets them go
   to ~17px) and the cards become unreadable slivers. Compound selectors
   out-specify the utilities without needing !important. */
.rail.grid--2, .rail.grid--3, .rail.grid--4, .rail.grid--6 {
  grid-template-columns: none;
}

.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ==========================================================================
   Editorial blocks

   The About page had run to seventeen bordered white cards across four
   sections. The border-and-box treatment is right for a set you compare
   (rooms, offers) and wrong for prose you read once — it turns a statement
   of intent into a spreadsheet. These three blocks carry that kind of copy
   without a box around it.
   ========================================================================== */

/* --- Statement: a mission/vision pair, set as type rather than as cards --- */
.statement {
  padding-top: var(--sp-6);
  border-top: 2px solid var(--c-secondary);
}
.statement__label {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-secondary);
}
.statement p {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--c-heading);
}

/* --- Value row: label + hairline, no box ------------------------------- */
.values {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.values li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0;
  border-bottom: var(--border);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  color: var(--c-heading);
}
.values li:first-child { border-top: var(--border); }
.values__num {
  flex: 0 0 auto;
  min-width: 2.5ch;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-secondary);
}

/* --- Pull quote --------------------------------------------------------- */
.pullquote {
  /* No measure cap: at --fs-h3 a ch-based cap broke this to four words a line
     inside an already-narrow split column. The column is the measure. */
  margin: 0;
  padding-left: var(--sp-6);
  border-left: 2px solid var(--c-secondary);
}
.pullquote p {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: 1.35;
  color: var(--c-heading);
}

/* --- Full-bleed image band ---------------------------------------------
   Breaks a long run of white sections with one uninterrupted photograph.
   Placed as a direct child of <main>, which has no max-width, so it is
   already edge-to-edge — no 100vw/-50vw escape hatch needed, and none
   wanted: 100vw counts the scrollbar and would overflow by its width. */
.bleed {
  display: block;
  overflow: hidden;
}
.bleed img {
  width: 100%;
  height: clamp(240px, 38vw, 460px);
  object-fit: cover;
}

/* ==========================================================================
   Site map page
   ========================================================================== */
/* Multi-column rather than a grid: the groups differ a lot in length, and a
   3-col grid sizes every row to its tallest member — which left a dead band
   under the short groups. Columns let each one pack against the last. */
.sitemap {
  columns: 1;
  column-gap: var(--grid-gap);
}
/* Few, equal groups (404 page): a grid keeps them level where columns would stack them */
.sitemap.sitemap--even {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--grid-gap);
}
.sitemap__group {
  /* inline-block + width stops a group splitting across a column boundary
     in browsers that under-honour break-inside on block children */
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--sp-8);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.sitemap__title {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--border);
  font-size: var(--fs-h4);
}

.sitemap__list,
.sitemap__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitemap__list > li + li { margin-top: var(--sp-4); }
.sitemap__list li { margin-bottom: 0; }

.sitemap__link {
  display: inline-block;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  color: var(--c-heading);
}

/* Second level: indented behind a hairline so the hierarchy is visible
   without bullets, which would fight the rest of the page. */
.sitemap__sub {
  margin-top: var(--sp-2);
  padding-left: var(--sp-4);
  border-left: var(--border);
}
.sitemap__sub li + li { margin-top: var(--sp-1); }
.sitemap__sub a {
  display: inline-block;
  padding-block: var(--sp-1);   /* keeps these dense links a tappable height */
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.sitemap__sub a:hover,
.sitemap__link:hover { color: var(--c-secondary); }


/* ==========================================================================
   Marquee — continuous auto-scrolling row

   Used where a set is worth showing in full but not worth six screens of
   vertical scroll. The track holds the set twice and translates by exactly
   -50%, so the moment it wraps, the second copy is sitting where the first
   began and the loop is invisible.

   Spacing is margin-right on each item rather than `gap`. With `gap` the
   track measures 12 items + 11 gaps, so -50% lands half a gap short and the
   seam drifts on every cycle. A margin belongs to the item, so both halves
   measure identically.
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  /* cards dissolve at the edges instead of being cut by a hard boundary */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-dur, 52s) linear infinite;
}
.marquee__track > * {
  flex: 0 0 clamp(228px, 24vw, 296px);
  margin-right: var(--grid-gap);
}
/* Hovering to read a card should not mean chasing it across the screen.
   focus-within covers keyboard users landing on anything inside. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Coarse pointers cannot hover to pause, so let a finger drag it instead. */
@media (hover: none) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}

.rail__hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.rail__hint::after {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  animation: rail-nudge 1.8s var(--e-in-out) infinite;
}
@keyframes rail-nudge {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(6px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-7);
  /* a long label must wrap rather than push the page wider than the viewport */
  max-width: 100%;
  white-space: normal;
  /* wrap between words only — never split a label mid-word */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  border: 1px solid var(--c-primary);
  border-radius: var(--r-none);
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t-base) var(--e-soft),
              color var(--t-base) var(--e-soft),
              border-color var(--t-base) var(--e-soft);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--c-secondary); border-color: var(--c-secondary); color: var(--c-white); }

/* White on the brand taupe measures 2.75:1 and fails AA. Keeping the taupe
   and darkening the label instead gives 5.7:1 with no change to the palette. */
.btn--secondary {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--c-primary);
}
.btn--secondary:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.btn--outline { background: transparent; color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: var(--c-white); }

.btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: var(--c-white); }
.btn--ghost:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-primary); }

.btn--sm { min-height: 40px; padding-inline: var(--sp-5); font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   Contact links — hit area without layout change

   Phone and email links in the footer, drawer and contact blocks render at
   19-23px tall, well under the 24px minimum target size (WCAG 2.5.8). These
   are the links a guest on a phone actually reaches for, so the target is
   grown with an overlay rather than min-height: padding would push the text
   lines apart and mailto/tel links often sit inside running copy.
   ========================================================================== */
a[href^="tel:"]:not(.btn):not(.header__phone),
a[href^="mailto:"]:not(.btn) {
  position: relative;
}
/* In running copy the neighbouring line box is only ~7px away at our 1.8
   line-height, so the expansion stays small: 22px + 8px clears the 24px
   minimum without letting a tap on the line above land on the phone number. */
a[href^="tel:"]:not(.btn):not(.header__phone)::before,
a[href^="mailto:"]:not(.btn)::before {
  content: "";
  position: absolute;
  inset-block: -4px;
  inset-inline: 0;
}
/* Standalone contexts — the link owns its line, so it can take the full 44px */
.footer a[href^="tel:"],
.footer a[href^="mailto:"],
.drawer__meta a[href^="tel:"],
.drawer__meta a[href^="mailto:"],
.feature a[href^="tel:"],
.feature a[href^="mailto:"] {
  display: inline-block;
}
.footer a[href^="tel:"]::before,
.footer a[href^="mailto:"]::before,
.drawer__meta a[href^="tel:"]::before,
.drawer__meta a[href^="mailto:"]::before,
.feature a[href^="tel:"]::before,
.feature a[href^="mailto:"]::before {
  inset-block: -11px;
}

/* Room card spec line — size, bed and occupancy at a glance, set quieter than
   the description so the card reads title → spec → prose. */
.card__meta {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* Paired call to action — one button plus the phone number.
   Two side-by-side buttons read as competing choices and, at these label
   lengths, wrapped onto separate lines in a split column. Demoting the number
   to a text link keeps the pair on one line and leaves one unambiguous
   primary action. */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
}
.cta-pair--center { justify-content: center; }
/* A flex container ignores the inherited text-align that centres these blocks,
   so re-centre the pair wherever it sits inside a centred one. */
.sec-head--center .cta-pair,
.page-hero__inner .cta-pair { justify-content: center; }

.cta-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  /* 44px keeps it a comfortable tap target even though it reads as text */
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: .02em;
  color: var(--c-primary);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--e-soft), border-color var(--t-fast) var(--e-soft);
}
.cta-tel:hover { color: var(--c-secondary); border-bottom-color: currentColor; }
.cta-tel svg { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.section--dark .cta-tel { color: var(--c-white); }
.section--dark .cta-tel:hover { color: var(--c-secondary-300); }

/* Text link with animated underline.
   min-height meets the 24x24 minimum target size (WCAG 2.5.8) without
   changing how it reads inline. */
.link-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--c-primary);
}
.link-more::after {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  transition: width var(--t-base) var(--e-out);
}
.link-more:hover { color: var(--c-secondary); }
.link-more:hover::after { width: 42px; }

/* --------------------------------------------------------------------------
   5. Media wrapper — ratio box + zoom-on-hover + missing-image placeholder
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-bg-sand);
  aspect-ratio: var(--ar-card);
}
.media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition:
    transform var(--t-slow) var(--e-out),
    filter var(--t-slow) var(--e-out);
  /* the zoom is a transform on a child of an overflow:hidden box — promoting it
     keeps the scale off the main thread and stops edge shimmer mid-transition */
  will-change: transform;
}
.media--room { aspect-ratio: var(--ar-room); }
.media--square { aspect-ratio: var(--ar-square); }
.media--portrait { aspect-ratio: var(--ar-portrait); }
.media--wide { aspect-ratio: var(--ar-hero); }
.media--free { aspect-ratio: auto; }
.media--capped { max-height: var(--media-max-h); }

/* ==========================================================================
   Image hover

   The lift used to be opt-in via .media--zoom, which left roughly half the
   framed images on the site inert on hover. It is the default now: any image
   in a .media frame responds, whether the frame itself is the hover target or
   it sits inside a card, tile, gallery item or link.

   1.06 rather than a larger jump — the frame is overflow:hidden, so a bigger
   scale crops noticeably at the edges on wide, short images. The slight
   brightness lift does most of the perceived work.
   ========================================================================== */
.media:hover > img,
a:hover .media > img,
.card:hover .media > img,
.tile:hover .media > img,
.gal-item:hover .media > img,
.feature:hover .media > img,
.media--zoom:hover > img {
  transform: scale(1.06);
  filter: brightness(1.04);
}

/* Coarse pointers have no hover state; :hover there fires on tap and sticks
   until the next tap elsewhere, which reads as a stuck zoom. */
@media (hover: none) {
  .media:hover > img,
  a:hover .media > img,
  .card:hover .media > img,
  .tile:hover .media > img,
  .gal-item:hover .media > img,
  .feature:hover .media > img,
  .media--zoom:hover > img {
    transform: none;
    filter: none;
  }
}

/* Branded placeholder shown when a photo has not been supplied.
   Set by js/main.js when an <img> fails to load. */
.media.is-missing { background: linear-gradient(135deg, #f0eae1 0%, #e2d9cd 100%); }
.media.is-missing > img { opacity: 0; }
.media.is-missing::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-secondary-600);
}
.media.is-missing::before {
  content: "CC";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -180%);
  font-family: var(--f-display);
  font-size: 2rem;
  letter-spacing: .06em;
  color: rgba(150, 133, 111, .5);
  border: 1px solid rgba(150, 133, 111, .4);
  border-radius: var(--r-circle);
  width: 62px; height: 62px;
  display: grid; place-items: center;
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--t-base) var(--e-soft),
              height var(--t-base) var(--e-soft),
              box-shadow var(--t-base) var(--e-soft);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* taller and denser than the bar itself so nav text stays legible even
     when the hero frame behind it is a bright white facade */
  height: calc(var(--header-h) + 60px);
  background: linear-gradient(to bottom, rgba(19,31,38,.82) 0%, rgba(19,31,38,.55) 55%, rgba(19,31,38,0) 100%);
  opacity: 1;
  transition: opacity var(--t-base) var(--e-soft);
  pointer-events: none;
}
/* Solid state: after scroll, or on pages without a full-bleed hero */
.header.is-stuck,
.header.is-solid {
  height: var(--header-h-scrolled);
  background: var(--c-primary);
  box-shadow: var(--sh-header);
}
.header.is-stuck::before, .header.is-solid::before { opacity: 0; }

.header__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* the gold mark already carries the full wordmark, so it stands alone */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img {
  height: 74px; width: auto;
  transition: height var(--t-base) var(--e-soft);
  /* keeps the gold mark legible against a bright hero frame */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.header.is-stuck .brand img, .header.is-solid .brand img { height: 60px; }

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, .3rem + 1.1vw, 1.9rem);
  margin: 0; padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; }

.nav__link {
  position: relative;
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-secondary);
  transition: width var(--t-base) var(--e-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-white); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

.header__phone {
  display: none;
  align-items: center;
  min-height: 44px;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--c-white);
}
.header__phone svg { width: 15px; height: 15px; fill: var(--c-secondary); flex: 0 0 auto; }
.header__phone:hover { color: var(--c-secondary-300); }

.header .btn--book { display: none; }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 9px;
  border: 0; background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block;
  height: 1.5px; width: 100%;
  background: var(--c-white);
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) linear;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Off-canvas drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  width: min(88vw, 400px);
  padding: calc(var(--header-h) + var(--sp-6)) var(--sp-6) var(--sp-8);
  background: var(--c-primary);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform var(--t-base) var(--e-out), visibility 0s linear var(--t-base);
}
.drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

.drawer__list { list-style: none; margin: 0 0 var(--sp-7); padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.drawer__link {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  color: rgba(255, 255, 255, .9);
}
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--c-secondary-300); padding-left: var(--sp-2); }

.drawer__meta { display: grid; gap: var(--sp-3); color: rgba(255,255,255,.7); font-size: var(--fs-sm); }
.drawer__meta a:hover { color: var(--c-secondary-300); }

.scrim {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-overlay-strong);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--e-soft), visibility 0s linear var(--t-base);
}
.scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer { z-index: calc(var(--z-overlay) + 1); }

/* --------------------------------------------------------------------------
   7. Hero slider
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* reserve header height so the first CTA stays in the first screen */
  min-height: calc(100svh - var(--header-h));
  display: grid;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-primary);
}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1100ms var(--e-soft), visibility 0s linear 1100ms;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7000ms linear;
}
.hero__slide.is-active img { transform: scale(1); }

.hero__slide::after {
  content: "";
  position: absolute; inset: 0;
  /* The hero is intentionally text-free — the booking bar carries the fold.
     The only text over this image is the nav and logo, so a band under the
     header is enough; over the white facade that band composites to about
     5:1 for the nav, and the rest of the photograph stays open. */
  background: linear-gradient(to bottom,
              rgba(15,25,31,.62) 0%,
              rgba(15,25,31,.34) 20%,
              rgba(15,25,31,.10) 44%,
              rgba(15,25,31,.40) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-8)) var(--gutter) var(--sp-10);
  align-self: center;
  text-align: center;
}

.hero__content { display: none; }
.hero__content.is-active { display: block; }

.hero__eyebrow {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-secondary-300);
}
.hero__title {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  color: var(--c-white);
}
.hero__text {
  max-width: 40rem;
  margin: 0 auto var(--sp-7);
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-lg);
}

/* Slider controls — a thumbnail strip stands in for dots and arrows, so the
   control doubles as a preview of what each slide holds. */
.hero__thumbs {
  position: absolute;
  inset-inline: 0;
  /* Sits high enough to clear both the booking card that rides up over the
     foot of the hero and the fixed WhatsApp/call buttons in the corner. */
  bottom: calc(var(--sp-9) + var(--sp-5));
  z-index: 3;
  display: flex;
  justify-content: center;
  /* `safe` keeps the first thumb reachable when the strip overflows; centring
     alone would clip it past the scroll origin on narrow screens */
  justify-content: safe center;
  gap: clamp(.375rem, .8vw, .625rem);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.hero__thumbs::-webkit-scrollbar { display: none; }

/* Height leads so every thumb clears the 44px minimum target; the 3:2 ratio
   matches the source photographs, so the preview is the whole frame uncropped. */
.hero__thumb {
  position: relative;
  flex: none;
  height: clamp(2.75rem, 6vw, 4.25rem);
  aspect-ratio: var(--ar-room);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  scroll-snap-align: center;
  /* hairline keeps the thumb's edge readable over a pale slide, the drop
     shadow seats it above the photograph */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 2px 10px rgba(19, 31, 38, .4);
  transition: transform var(--t-base) var(--e-soft),
              outline-color var(--t-base) var(--e-soft);
  /* held transparent so the active ring fades in rather than snapping on */
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.hero__thumb img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* Inactive thumbs are veiled rather than faded — opacity would bleach them
   into a bright slide, where a dark wash keeps the picture legible. */
.hero__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19, 31, 38, .55);
  transition: background var(--t-base) var(--e-soft);
}
.hero__thumb:hover::after { background: rgba(19, 31, 38, .22); }
.hero__thumb.is-active::after { background: rgba(19, 31, 38, 0); }
.hero__thumb.is-active {
  transform: translateY(-2px);
  outline-color: var(--c-secondary);
}
.hero__thumb:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%; bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.75));
}

/* --------------------------------------------------------------------------
   8. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 44vw, 460px);
  padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8);
  background: var(--c-primary);
  text-align: center;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Focal points for banners whose subject sits high in the frame (rooflines, signage) */
.page-hero__bg img.focus-top { object-position: 50% 10%; }
.page-hero__bg img.focus-upper { object-position: 50% 20%; }
.page-hero__bg img.focus-mid { object-position: 50% 38%; }
.page-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  /* .60 over white composites to ~4.9:1 — passing but with no margin. .70
     gives ~6.6:1, which holds up on the brightest frames we ship. */
  background: linear-gradient(to bottom, rgba(15,25,31,.70), rgba(15,25,31,.80));
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { color: var(--c-white); margin-bottom: var(--sp-3); }
.page-hero p { color: rgba(255, 255, 255, .8); }

/* Breadcrumb */
.crumbs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 0; padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .62);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, .35); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
.crumbs a:hover { color: var(--c-secondary-300); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--border);
  overflow: hidden;
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card__body { padding: var(--sp-5); flex: 1 1 auto; display: flex; flex-direction: column; }
.card__title { margin-bottom: var(--sp-2); font-size: var(--fs-h4); }
.card__title a { display: inline-block; min-height: 24px; }
.card__text { margin-bottom: var(--sp-4); font-size: var(--fs-base); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* Room card */
.room-card .media { aspect-ratio: var(--ar-room); }
.room-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4); padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.room-meta li { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.room-meta svg { width: 15px; height: 15px; fill: var(--c-secondary); flex: 0 0 auto; }

.room-card__price {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  color: var(--c-primary);
}
.room-card__price small { display: block; font-family: var(--f-body); font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: .06em; }

/* Icon / feature card */
.feature {
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-white);
  border: var(--border);
  text-align: center;
  transition: transform var(--t-base) var(--e-out), border-color var(--t-base) var(--e-soft), box-shadow var(--t-base) var(--e-out);
}
.feature:hover { transform: translateY(-4px); border-color: var(--c-secondary); box-shadow: var(--sh-md); }
.feature__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-4);
  border: 1px solid var(--c-secondary);
  border-radius: var(--r-circle);
  color: var(--c-secondary);
  transition: background var(--t-base) var(--e-soft), color var(--t-base) var(--e-soft);
}
.feature:hover .feature__icon { background: var(--c-secondary); color: var(--c-white); }
.feature__icon svg { width: 24px; height: 24px; fill: currentColor; }
.feature h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.feature p { font-size: var(--fs-base); }

/* Overlay card — image with caption over it */
.tile { position: relative; display: block; overflow: hidden; }
.tile .media { aspect-ratio: var(--ar-card); }
.tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  /* Taller and denser than before: the caption has to stay readable over a
     brightly lit frame, not just a dark one. */
  background: linear-gradient(to top,
              rgba(15,25,31,.94) 0%,
              rgba(15,25,31,.82) 38%,
              rgba(15,25,31,.45) 72%,
              rgba(15,25,31,0) 100%);
  color: var(--c-white);
}
.tile__cap h3 { color: var(--c-white); margin-bottom: var(--sp-1); font-size: var(--fs-h4); }
.tile__cap p { font-size: var(--fs-sm); color: rgba(255,255,255,.8); }

/* Status pill (upcoming facilities etc.) */
.pill {
  display: inline-block;
  padding: 3px var(--sp-3);
  border: 1px solid var(--c-secondary);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);   /* 12px floor — never smaller */
  font-weight: var(--fw-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-secondary-600);
  background: var(--c-white);
}
.pill--solid { background: var(--c-secondary); border-color: var(--c-secondary); color: var(--c-white); }
.tile__cap .pill { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: var(--c-white); }

/* --------------------------------------------------------------------------
   10. Split / alternating image + text
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--grid-gap); align-items: center; }
.split__media .media { aspect-ratio: var(--ar-room); }
.split__body > .eyebrow { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   11. Booking bar
   -------------------------------------------------------------------------- */
.bookbar {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--sp-8) * -1);
  margin-bottom: var(--sp-4);
}
.bookbar__card {
  padding: var(--sp-5);
  background: var(--c-white);
  box-shadow: var(--sh-lg);
  border-top: 3px solid var(--c-secondary);
}
.bookbar__grid { display: grid; gap: var(--sp-4); }
.bookbar label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.bookbar input, .bookbar select {
  width: 100%;
  min-width: 0; /* keeps native date inputs from blowing out the card */
  min-height: 46px;
  padding: 0 var(--sp-3);
  border: var(--border);
  border-radius: var(--r-none);
  background: var(--c-white);
  color: var(--c-heading);
  font-family: var(--f-body);
  font-size: var(--fs-base);
}
/* Native date inputs ship a small grey glyph that reads as unstyled next to
   the rest of the bar. Hide it, draw our own, and make the field the target. */
.bookbar input[type="date"] {
  position: relative;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa998a' stroke-width='1.4'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 18px 18px;
  padding-right: calc(var(--sp-3) * 2 + 18px);
}
.bookbar input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.bookbar input:focus, .bookbar select:focus { border-color: var(--c-secondary); outline: none; }
/* A 1px border shift is not a focus indicator — restore a real ring for keyboard use */
.bookbar input:focus-visible, .bookbar select:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Gallery
   -------------------------------------------------------------------------- */
.gal-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.gal-filter {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft), border-color var(--t-fast) var(--e-soft);
}
.gal-filter:hover { border-color: var(--c-secondary); color: var(--c-secondary-600); }
.gal-filter[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.gal-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
.gal-item { position: relative; }
.gal-item[hidden] { display: none; }
.gal-item button {
  display: block; width: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in;
}
.gal-item .media { aspect-ratio: var(--ar-square); }
.gal-item .media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(19, 31, 38, 0);
  transition: background var(--t-base) var(--e-soft);
}
.gal-item button:hover .media::after { background: rgba(19, 31, 38, .28); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(12, 20, 25, .94);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--e-soft), visibility 0s linear var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__fig { margin: 0; max-width: min(1200px, 94vw); }
.lightbox__fig img {
  max-width: 100%;
  max-height: 78svh;
  width: auto; margin-inline: auto;
  object-fit: contain;
  transform: scale(.96);
  transition: transform var(--t-base) var(--e-out);
}
.lightbox.is-open .lightbox__fig img { transform: scale(1); }
.lightbox__cap {
  margin-top: var(--sp-4);
  text-align: center;
  color: rgba(255,255,255,.72);
  font-size: var(--fs-sm);
}
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-circle);
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-soft), border-color var(--t-fast) var(--e-soft);
}
.lightbox__btn:hover { background: var(--c-secondary); border-color: var(--c-secondary); }
.lightbox__btn svg { width: 16px; height: 16px; fill: currentColor; }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__prev { left: var(--sp-3); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--sp-3); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   13. Accordion (FAQs)
   -------------------------------------------------------------------------- */
.acc { border-top: var(--border); }
.acc__item { border-bottom: var(--border); }
.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  border: 0; background: none;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  text-align: left;
  color: var(--c-heading);
  cursor: pointer;
}
.acc__btn:hover { color: var(--c-secondary); }
.acc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: .35em;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) linear;
}
.acc__icon::before { width: 100%; height: 1.5px; }
.acc__icon::after  { width: 1.5px; height: 100%; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__panel { overflow: hidden; height: 0; transition: height var(--t-base) var(--e-out); }
.acc__panel > div { padding-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field .req { color: var(--c-secondary); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--sp-3);
  border: var(--border);
  border-radius: var(--r-none);
  background: var(--c-white);
  color: var(--c-heading);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--e-soft);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-secondary); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--c-error); }
.field__err { display: none; font-size: var(--fs-sm); color: var(--c-error); }
.field.has-error .field__err { display: block; }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); cursor: pointer; }
.check input {
  width: 24px; height: 24px;   /* minimum target size */
  min-height: 0;
  margin-top: .1em;
  flex: 0 0 auto;
  accent-color: var(--c-secondary);
  cursor: pointer;
}

.form__note {
  padding: var(--sp-4);
  border-left: 3px solid var(--c-success);
  background: var(--c-bg-alt);
  font-size: var(--fs-sm);
  /* the note is a light panel that also appears inside the dark footer, so it
     states its own text colour instead of inheriting one meant for dark
     ground — otherwise the footer's rgba(255,255,255,.68) lands on cream */
  color: var(--c-text);
}
.form__note[hidden] { display: none; }
.form__note--err { border-left-color: var(--c-error); }
/* .footer a is declared later in this file and would win on source order */
.footer .form__note a { color: var(--c-primary); text-decoration: underline; }
.footer .form__note a:hover { color: var(--c-secondary-600); }

/* Verification dialog. Opens on submit, holds the reCAPTCHA check, and closes
   itself the moment the box is ticked — so no widget sits in the page and
   google.com/recaptcha is never requested on page load.

   Google's own image-challenge overlay sits at z-index 2000000000, well above
   --z-modal, so a challenge always lands on top of this panel. */
.cap-modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(12, 20, 25, .82);
  opacity: 0;
  transition: opacity var(--t-base) var(--e-soft);
}
.cap-modal[hidden] { display: none; }
.cap-modal.is-open { opacity: 1; }

.cap-modal__backdrop { position: absolute; inset: 0; cursor: pointer; }

.cap-modal__panel {
  position: relative;
  width: min(392px, 100%);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--c-white);
  border-top: 3px solid var(--c-secondary);
  box-shadow: 0 24px 60px rgba(12, 20, 25, .35);
  text-align: left;
  transform: translateY(8px);
  transition: transform var(--t-base) var(--e-soft);
}
.cap-modal.is-open .cap-modal__panel { transform: none; }
.cap-modal.is-sending .cap-modal__panel { opacity: .72; pointer-events: none; }

.cap-modal__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.cap-modal__body {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.cap-modal__status {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs, var(--fs-sm));
  color: var(--c-text);
}
.cap-modal__status[hidden] { display: none; }

.cap-modal__close {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.cap-modal__close svg { width: 15px; height: 15px; fill: currentColor; }
.cap-modal__close:hover { color: var(--c-secondary); }

/* the widget is a fixed 304px iframe Google will not resize, so on a narrow
   phone the host is scaled rather than left to overflow the panel */
.cap-host { min-height: 78px; }
.cap-host[hidden] { display: none; }
.cap-host > div { max-width: 100%; }

body.cap-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cap-modal, .cap-modal__panel { transition: none; }
  .cap-modal__panel { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Info list / definition rows
   -------------------------------------------------------------------------- */
.info-list { margin: 0; padding: 0; list-style: none; }
.info-list li {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  padding: var(--sp-3) 0;
  margin: 0;
  border-bottom: var(--border);
  font-size: var(--fs-base);
}
/* Condensed variant for cards, where the list is a two-line summary rather
   than the full specification it carries on a detail page. */
.info-list--tight li {
  padding-block: var(--sp-1);
  border: 0;
}
.info-list--tight .k { font-size: var(--fs-xs); }
.info-list--tight .v { font-size: var(--fs-sm); }

.info-list dt, .info-list .k { color: var(--c-muted); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }
.info-list dd, .info-list .v { margin: 0; color: var(--c-heading); }

.tick-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.tick-list li { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; font-size: var(--fs-base); }
.tick-list svg { width: 16px; height: 16px; margin-top: .42em; fill: var(--c-secondary); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   16. Map
   -------------------------------------------------------------------------- */
/* No min-height here: combined with aspect-ratio it makes the browser derive
   the WIDTH from the height (300px x 16/9 = 533px) and blow out narrow layouts.
   Let width lead and give small screens a taller ratio instead. */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar-card);
  background: var(--c-bg-sand);
  border: var(--border);
}
@media (min-width: 600px) { .map { aspect-ratio: var(--ar-hero); } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--c-primary); color: rgba(255, 255, 255, .68); }
.footer a { color: rgba(255, 255, 255, .68); }
.footer a:hover { color: var(--c-secondary-300); }

.footer__top { padding-block: var(--section-y-sm); }
.footer__grid { display: grid; gap: var(--sp-8); }
.footer h3, .footer h4 {
  margin-bottom: var(--sp-4);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-white);
}
.footer__brand img { height: 76px; width: auto; margin-bottom: var(--sp-4); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--sp-3); }
/* Footer links are standalone navigation, not inline prose — give them a
   real target size. And never let <small> fall below the 12px floor. */
.footer__list a, .footer__bottom a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}
.footer small, .footer__list small { font-size: var(--fs-xs); }

/* Sitemap + Simplotel credit line, in place of the old copyright */
.footer__credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
}
.footer__credit a { color: rgba(255, 255, 255, .82); }
.footer__credit a:hover { color: var(--c-secondary-300); }
.footer__credit span { color: rgba(255, 255, 255, .58); }

.footer__bottom {
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-sm);
}
.footer__bottom-inner { display: grid; gap: var(--sp-3); text-align: center; }

.pay { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.pay span {
  padding: 5px var(--sp-3);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: rgba(255,255,255,.78);
}

.newsletter { display: grid; gap: var(--sp-3); }
.newsletter__row { display: grid; gap: var(--sp-3); }
/* .btn sets overflow:hidden for the ripple, which zeroes its automatic
   minimum size — so the grid's `auto` track could collapse to just the
   button's padding and clip the label. Pin a content-sized floor. */
.newsletter__row .btn { min-width: max-content; }

.newsletter input {
  min-height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-none);
  background: rgba(255, 255, 255, .06);
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: var(--fs-base);
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter input:focus { border-color: var(--c-secondary); outline: none; }
.newsletter input:focus-visible {
  outline: 2px solid var(--c-secondary-300);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   18. Floating actions (WhatsApp / call)
   -------------------------------------------------------------------------- */
.floatbar {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.fbtn {
  flex: 0 0 auto;              /* never let the rail squash these to ovals */
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;             /* stays a circle under any flex pressure */
  border-radius: var(--r-circle);
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--sh-md);
  transition: transform var(--t-base) var(--e-out), background var(--t-base) var(--e-soft);
}
.fbtn:hover { transform: translateY(-3px) scale(1.05); color: var(--c-white); }
.fbtn svg { width: 24px; height: 24px; fill: currentColor; }
.fbtn--wa { background: #25d366; }
.fbtn--wa:hover { background: #1fb757; }
.fbtn--call { background: var(--c-secondary); }
.fbtn--call:hover { background: var(--c-secondary-600); }

/* Back to top */
.totop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--e-soft), transform var(--t-base) var(--e-out), visibility 0s linear var(--t-base);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* --------------------------------------------------------------------------
   19. Offer popup
   -------------------------------------------------------------------------- */
.popup {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-modal);
  /* clears the floating WhatsApp rail on narrow screens */
  width: min(370px, calc(100vw - 6rem));
  background: var(--c-white);
  box-shadow: var(--sh-lg);
  border-top: 3px solid var(--c-secondary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity var(--t-base) var(--e-soft), transform var(--t-base) var(--e-out), visibility 0s linear var(--t-base);
}
.popup.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.popup__media .media { aspect-ratio: var(--ar-wide); }
.popup__body { padding: var(--sp-5); }
.popup__body h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.popup__body p { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.popup__close {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  /* .popup__media is positioned and comes later in the DOM, so without this the
     offer image paints over the button and swallows the click */
  z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: var(--r-circle);
  background: rgba(255, 255, 255, .92);
  /* the media behind it is an uncontrolled photo — keep the edge readable */
  box-shadow: 0 1px 6px rgba(19, 31, 38, .35);
  color: var(--c-primary);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-soft);
}
.popup__close:hover { background: var(--c-secondary); color: var(--c-white); }
.popup__close svg { width: 13px; height: 13px; fill: currentColor; }

/* --------------------------------------------------------------------------
   20. Stat counters
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--sp-6); text-align: center; }
.stat__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3.125rem);   /* 50px ceiling */
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--c-secondary);
}
.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* --------------------------------------------------------------------------
   21. Notices (pending / upcoming data)
   -------------------------------------------------------------------------- */
.notice {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-secondary);
  background: var(--c-bg-alt);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .drawer, .scrim, .floatbar, .popup, .hero__thumbs, .lightbox { display: none !important; }
  .hero { min-height: auto; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* --------------------------------------------------------------------------
   23. Form submit handoff
   forms.js has no endpoint, so on submit it renders a prefilled WhatsApp /
   email choice. These rules give that block a layout; without them the
   buttons sit inline mid-sentence and the ghost button is invisible on the
   light note background.
   -------------------------------------------------------------------------- */
.form__note-title {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-normal);
  color: var(--c-heading);
}
.form__note-body { display: block; margin-bottom: var(--sp-4); }

.form__handoff {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.form__handoff .btn { flex: 1 1 auto; min-width: min(100%, 15rem); }

/* forms.js emits .btn--primary; the base .btn already is the primary style. */
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.btn--primary:hover { background: var(--c-secondary); border-color: var(--c-secondary); color: var(--c-primary); }

/* .btn--ghost is built for dark backgrounds. Inside the light note panel it
   would be white-on-white, so restate it as an outline button there. */
.form__note .btn--ghost {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: transparent;
}
.form__note .btn--ghost:hover { background: var(--c-primary); color: var(--c-white); }


/* --------------------------------------------------------------------------
   24. Reveal-on-hover tiles (facilities)
   The heading carries the card at rest; the description expands on hover or
   keyboard focus. grid-template-rows 0fr -> 1fr animates to the content's
   real height without hard-coding one.
   -------------------------------------------------------------------------- */
.tile--reveal .tile__cap { transition: background var(--t-base) var(--e-soft); }

.tile--reveal .tile__cap p {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  opacity: 0;
  transition: grid-template-rows var(--t-base) var(--e-out),
              opacity var(--t-fast) var(--e-soft),
              margin-top var(--t-base) var(--e-out);
}
.tile--reveal .tile__cap p > span { overflow: hidden; }

.tile--reveal:hover .tile__cap p,
.tile--reveal:focus-within .tile__cap p,
.tile--reveal.is-open .tile__cap p {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--sp-2);
}

/* Hint that there is more behind the card */
.tile--reveal .tile__cap h3 { margin-bottom: 0; transition: transform var(--t-base) var(--e-out); }
.tile--reveal:hover .tile__cap h3 { transform: translateY(-2px); }

/* No hover on touch: show everything, since there is nothing to hover with. */
@media (hover: none) {
  .tile--reveal .tile__cap p {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: var(--sp-2);
  }
}


/* --------------------------------------------------------------------------
   25. Image-only triggers
   A link or button whose only child is a media figure stays inline by
   default, so its own box collapses to a few pixels even though the picture
   below it is full size — the tap target ends up ~17px. Force block level.
   -------------------------------------------------------------------------- */
.gal-item > button,
.card > a,
.tile > a,
.room-card > a,
.split__media > a,
a:has(> .media),
button:has(> .media) {
  display: block;
  width: 100%;
}
.gal-item > button > .media,
.card > a > .media { width: 100%; }