/* Ivory Corbett Resort — site.css (one stylesheet for the whole site)
   Section order follows the Nazzara reference; layouts, colours, type and facts are Ivory's own.
   Luxury rhythm (user, 2026-10-20): 160px between sections on desktop, 96px on phones; one line of copy per section.
   Every value comes from the tokens below (DESIGN-SYSTEM.md). */

:root{
  /* colour */
  --forest:#15260F; --forest-deep:#0D1909;
  --gold:#B08420; --gold-deep:#8C6914; --gold-ink:#7E5E12; --gold-light:#D8B866;   /* --gold-deep: the darker variant CTAs move to on hover (round 9) */
  --ivory:#F6F1E7; --sand:#EDE4D3; --surface:#FFFDF8; --sage-tint:#E7EBDF;
  --ink:#22301C; --ink-soft:#4E5A47;
  --on-dark:#F6F1E7; --on-dark-soft:#C9CFBF;
  --line:rgba(21,38,15,.14); --line-dark:rgba(246,241,231,.2);

  /* type */
  /* round 4: one serif for all text (fact sheet r76). The accents are the serif's own italic, as before:
     the user turned down a separate script face (round 4c). */
  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:var(--font-display);
  --w-regular:500; --w-medium:600; --w-bold:700;          /* the serif runs light; one step up keeps it legible */
  --text-label:.8125rem;                                 /* 13px (serif caps read smaller than a sans) */
  --text-small:.9375rem;                                 /* 15px */
  --text-body:clamp(1.125rem, 1.08rem + .2vw, 1.1875rem); /* 18 → 19 */
  --text-lead:clamp(1.25rem, 1.17rem + .35vw, 1.375rem); /* 20 → 22 */
  --text-h3:clamp(1.375rem, 1.2rem + .8vw, 1.875rem);    /* 22 → 30 */
  --text-h2:clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);      /* 36 → 56 */
  --text-h1:clamp(2.75rem, 1.9rem + 3.8vw, 5rem);        /* 44 → 80 */
  --lh-display:1.05; --lh-heading:1.12; --lh-body:1.7; --lh-small:1.5;

  /* tracking — fix #4: ONE closed scale, hero to footer */
  --track-display:0;      /* every serif heading */
  --track-body:0;         /* all running text */
  --track-label:.16em;    /* every uppercase label */

  /* space — the only values in the project */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px; --space-40:160px;
  --gap-widget:96px; --gap-inner:80px;    /* round 6: every visible gap between sections is 96 (user: 60-100px) */
  --gutter:64px;
  --max:1280px; --measure:46ch;

  /* shape, depth, motion */
  --radius-1:2px; --radius-round:999px;
  --shadow-sm:0 2px 10px rgba(13,25,9,.06); --shadow-md:0 18px 48px rgba(13,25,9,.14);
  --ease:cubic-bezier(0.16, 1, 0.3, 1); --dur:320ms; --dur-slow:700ms;   /* weighted ease for every hover (round 3) */
  --card-w:clamp(260px, 26vw, 360px);       /* room card width; arrows centre on its 3:4 photo */
  --card-hover-line:rgba(21,38,15,.2);      /* non-CTA card highlight on light grounds */

  /* layers — one z-index scale */
  --z-header:100; --z-fab:200; --z-popover:210; --z-cookie:220; --z-drawer:300; --z-lightbox:400;

  /* fixed-action dock (fix #2) */
  --tap:48px; --dock-gap:16px; --dock-edge:24px;
  --cookie-h:0px;          /* OUTPUT: measured cookie height, read only by the dock */
  --header-min:88px;       /* INPUT: designed header height */
  --hero-overlap:48px;     /* booking bar rises this far into the hero image */

  --align-x:flex-start;
  --focus:var(--forest); --focus-halo:var(--ivory);
}
@media (max-width:991px){ :root{ --gutter:40px; } }
@media (max-width:767px){ :root{ --gap-widget:64px; --gap-inner:48px; --gutter:24px; --header-min:64px; --dock-edge:16px; --hero-overlap:32px; --card-w:72vw; } }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--ivory); color:var(--ink); font-family:var(--font-body); font-size:var(--text-body);
  font-weight:var(--w-regular); line-height:var(--lh-body); letter-spacing:var(--track-body); }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,p,ul,ol,dl,dd,figure,address{ margin:0; }
ul,ol{ padding:0; list-style:none; }
address{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; letter-spacing:inherit; }
input,select{ font:inherit; letter-spacing:inherit; }
a{ color:inherit; }
table{ border-collapse:collapse; }
svg{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

h1,h2,h3{ font-family:var(--font-display); color:var(--forest); letter-spacing:var(--track-display); text-wrap:balance; }
h1{ font-size:var(--text-h1); line-height:var(--lh-display); font-weight:400; }
h2{ font-size:var(--text-h2); line-height:var(--lh-heading); font-weight:400; }
h3{ font-size:var(--text-h3); line-height:var(--lh-heading); font-weight:var(--w-medium); }
em{ font-style:italic; font-weight:400; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nowrap{ white-space:nowrap; }
.skip-link{ position:absolute; left:var(--space-4); top:calc(-1 * var(--space-24)); z-index:calc(var(--z-lightbox) + 1);
  background:var(--forest); color:var(--on-dark); padding:var(--space-3) var(--space-4); }
.skip-link:focus{ top:var(--space-4); }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 6px var(--focus-halo); }
.on-dark,.cookie,.footer-legal{ --focus:var(--gold-light); --focus-halo:var(--forest); }
@media (forced-colors:active){ :focus-visible{ outline:3px solid Highlight; box-shadow:none; } }

/* ---------- layout & rhythm ---------- */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.center{ text-align:center; --align-x:center; }
.widget + .widget{ margin-block-start:var(--gap-widget); }
/* a coloured band reads as its own space: content to band edge = band edge to content = the same gap */
.widget + .widget--fill{ margin-block-start:var(--gap-widget); }
.widget--fill + .widget{ margin-block-start:var(--gap-widget); }
.widget--fill + .widget--fill{ margin-block-start:0; }
.widget--fill{ padding-block:var(--gap-widget); }
.hero + .widget{ margin-block-start:var(--gap-widget); }

/* every heading block: eyebrow → 8 → heading → 16 (20 on phones) → line → 24 → actions */
.eyebrow{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); line-height:var(--lh-small); }
.eyebrow + h1,.eyebrow + h2{ margin-block-start:var(--space-2); }
h1 + .line,h2 + .line{ margin-block-start:var(--space-4); }
.line{ max-width:var(--measure); font-size:var(--text-lead); line-height:var(--lh-small); color:var(--ink-soft); }
.center .line{ margin-inline:auto; }
.section-head + *{ margin-block-start:var(--gap-inner); }
.actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:var(--align-x); align-items:center; }
* + .actions{ margin-block-start:var(--space-6); }
@media (max-width:767px){ h1 + .line,h2 + .line{ margin-block-start:var(--space-5); } }

/* ---------- buttons & links ---------- */
/* round 9: ONE CTA height site-wide -- the navbar Book Now (44px); hover always moves to a darker variant */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:var(--space-2) var(--space-8);
  font-family:var(--font-body); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label);
  text-decoration:none; border:1px solid transparent; border-radius:var(--radius-1); line-height:1.2; text-align:center;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn--sm{ padding-inline:var(--space-6); }
.btn--block{ width:100%; }
.btn--primary{ background:var(--gold); color:#FFFFFF; border-color:var(--gold); }
.btn--primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#FFFFFF; }
.btn--outline{ color:var(--forest); border-color:var(--forest); }
.btn--outline:hover{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
.btn--on-dark{ color:var(--on-dark); border-color:var(--on-dark); }
.btn--on-dark:hover{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
/* round 8: the former text links, as roomy outlined boxes (user's reference: EXPLORE ALL STORIES) */
.btn--cta{ min-width:min(300px, 100%); padding-inline:var(--space-12); border-radius:0; }
@media (max-width:767px){ .btn--cta{ padding-inline:var(--space-8); } }

/* ---------- placeholder frame (CDN logo) ---------- */
.ph{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; overflow:hidden; background:var(--surface); }
.ph--ivory{ background:var(--surface); }
.ph--sand{ background:var(--sand); }
.ph--sage{ background:var(--sage-tint); }
.ph--fill{ height:100%; }
.ph img{ width:100%; height:100%; object-fit:contain; padding:16% 20%; }
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-4x3{ aspect-ratio:4/3; }
.ratio-3x4{ aspect-ratio:3/4; }
.ph__tag{ position:absolute; left:var(--space-4); bottom:var(--space-4); padding:var(--space-1) var(--space-3); background:var(--surface);
  font-size:var(--text-label); font-weight:var(--w-medium); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-soft); line-height:var(--lh-small); }
.venues .ph--sand{ background:var(--surface); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:var(--z-header); background:var(--ivory); border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.site-header__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-4); min-height:var(--header-min); }
.menu-btn{ display:inline-flex; align-items:center; gap:var(--space-3); min-height:44px; min-width:44px; justify-self:start;
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--forest); }
.menu-btn svg{ width:24px; height:24px; }
.menu-btn:hover{ color:var(--gold-ink); }
.brand{ display:block; justify-self:center; }
.brand img{ width:clamp(120px, 10vw, 156px); height:auto; }
.header-actions{ justify-self:end; display:flex; gap:var(--space-3); }
.header-actions .btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:767px){
  .site-header__in{ grid-template-columns:44px 1fr 44px; }
  .menu-btn__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .header-actions{ display:none; }
  .brand img{ width:112px; }
}

/* ---------- drawer ---------- */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); }
.drawer__scrim{ position:absolute; inset:0; background:rgba(13,25,9,.48); }
.drawer__panel{ position:absolute; inset-block:0; left:0; width:min(86%, 380px); background:var(--ivory); display:flex; flex-direction:column;
  padding:var(--space-8); overflow-y:auto; transform:translateX(-100%); transition:transform var(--dur) var(--ease); }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; }
.drawer__title{ font-size:var(--text-h3);   /* round 18: as large as the menu options */
  font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.drawer__list{ margin-block-start:var(--space-8); }
.drawer__list a{ display:flex; align-items:center; min-height:var(--tap); text-decoration:none;
  font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--w-regular); color:var(--forest); }
.drawer__list a:hover{ color:var(--gold-ink); }
.drawer__foot{ margin-block-start:auto; padding-block-start:var(--space-8); }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); color:var(--forest); border-radius:var(--radius-round); }
.icon-btn svg{ width:24px; height:24px; }
.icon-btn:hover{ background:var(--sand); }

/* ---------- hero + booking ---------- */
.hero{ position:relative; }
.hero__media{ position:relative; height:calc(100svh - var(--header-min) - var(--space-12)); min-height:520px; max-height:860px; }
.hero-swiper,.hero-swiper .swiper-slide{ height:100%; }
.hero .ph img{ padding:12% 30% 18%; }
.hero .ph__tag{ left:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); bottom:calc(var(--hero-overlap) + var(--space-6)); }
.slider-ctrl{ display:flex; align-items:center; gap:var(--space-3); }
.slider-ctrl--hero{ position:absolute; z-index:2; left:50%; bottom:calc(var(--hero-overlap) + var(--space-6)); transform:translateX(-50%);
  gap:var(--space-1); padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius:var(--radius-round); background:rgba(13,25,9,.38); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero-dots{ display:flex; }
.hero-dots button{ position:relative; width:28px; height:40px; }
.hero-dots button::before{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); background:transparent; border:1.5px solid rgba(255,253,248,.85);
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero-dots button[aria-current="true"]::before{ background:var(--surface); border-color:var(--surface); transform:translate(-50%,-50%) scale(1.15); }
.hero-dots button:hover::before{ background:var(--gold-light); border-color:var(--gold-light); }
.slider-ctrl--hero .ctrl-btn{ width:40px; height:40px; background:transparent; border-color:transparent; color:var(--surface); }
.slider-ctrl--hero .ctrl-btn:hover{ background:rgba(255,253,248,.16); color:var(--surface); border-color:transparent; }
.slider-ctrl--hero{ --focus:var(--gold-light); --focus-halo:var(--forest); }
.ctrl-btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border:1px solid var(--line); color:var(--forest); border-radius:var(--radius-round); background:var(--surface);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ctrl-btn:hover{ background:var(--gold); color:#FFFFFF; border-color:var(--gold); }
.ctrl-btn:disabled,.ctrl-btn.swiper-button-disabled{ opacity:.35; cursor:default; }
.ctrl-btn svg{ width:20px; height:20px; }
.ctrl-btn--toggle .i-play{ display:none; }
.ctrl-btn--toggle[aria-pressed="true"] .i-pause{ display:none; }
.ctrl-btn--toggle[aria-pressed="true"] .i-play{ display:block; }

.hero__booking{ position:relative; z-index:3; margin-block-start:calc(-1 * var(--hero-overlap)); }
.booking-bar{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) auto; align-items:end; gap:var(--space-6);
  background:var(--surface); padding:var(--space-6) var(--space-8); box-shadow:var(--shadow-md); text-align:left; --align-x:flex-start; }
.booking-field{ position:relative; display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.booking-field label,.booking-label{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.booking-field input,.guest-trigger{ width:100%; min-height:var(--tap); padding:var(--space-2) 0; border:0; border-bottom:1px solid rgba(21,38,15,.32); border-radius:0;
  background:transparent; color:var(--forest); font-size:var(--text-body); cursor:pointer; }
.booking-field input[type="text"]{ cursor:text; }
.booking-field input:hover,.guest-trigger:hover{ border-bottom-color:var(--forest); }
.guest-trigger{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); text-align:left; }
.guest-trigger span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guest-trigger svg{ width:18px; height:18px; flex:0 0 auto; }
.guest-pop{ position:absolute; z-index:var(--z-popover); left:0; top:calc(100% + var(--space-2)); width:min(320px, calc(100vw - 2 * var(--gutter)));
  background:var(--surface); box-shadow:var(--shadow-md); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.stepper{ display:grid; grid-template-columns:1fr 44px 32px 44px; align-items:center; gap:var(--space-2); }
.stepper__label{ display:flex; flex-direction:column; font-weight:var(--w-medium); color:var(--forest); }
.stepper__label small{ font-size:var(--text-label); color:var(--ink-soft); font-weight:var(--w-regular); }
.stepper__btn{ width:44px; height:44px; border:1px solid var(--forest); border-radius:var(--radius-round); color:var(--forest); font-size:var(--text-lead); line-height:1; }
.stepper__btn:hover{ background:var(--forest); color:var(--on-dark); }
.stepper__btn:disabled{ opacity:.35; cursor:default; background:none; color:var(--forest); }
.stepper__val{ text-align:center; font-weight:var(--w-bold); color:var(--forest); }
.booking-submit{ min-width:168px; }
.booking-status{ grid-column:1 / -1; font-size:var(--text-small); color:var(--ink-soft); }
@media (max-width:1023px){
  .booking-bar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .booking-submit{ grid-column:1 / -1; }
  .hero__media{ height:62svh; min-height:420px; }
}
@media (max-width:767px){
  .hero .ph img{ padding:16% 16% 24%; }
  .booking-bar{ padding:var(--space-5); gap:var(--space-5); }
}
@media (max-width:599px){ .booking-field--guests,.booking-field--promo{ grid-column:1 / -1; } }

/* ---------- about: copy beside three instant-camera prints, pinned at slight angles (Nazaara reference) ---------- */
.about__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--space-32); align-items:center; }
.about__media{ position:relative; }
.about__frames{ position:relative; aspect-ratio:1 / 1.04; }
.about__frame{ position:absolute; margin:0; padding:var(--space-2) var(--space-2) var(--space-3); background:var(--surface); box-shadow:var(--shadow-md);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change:transform; backface-visibility:hidden; }   /* permanent layer: the rotated print would blur, then re-sharpen, on hover */
.about__frame figcaption{ padding-block-start:var(--space-2); }
.about__frame figcaption b{ display:block; font-size:var(--text-label); font-weight:var(--w-medium); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--forest); line-height:var(--lh-small); }
.about__frame figcaption span{ display:block; font-style:italic; font-size:var(--text-small); color:var(--ink-soft); line-height:var(--lh-small); }
/* one tall portrait print at the back, two smaller landscape prints pinned over its corners */
.about__frame--back{ top:2%; left:26%; width:60%; transform:rotate(1.5deg); z-index:1; }
.about__frame--front-a{ top:8%; left:0; width:38%; transform:rotate(-3deg); z-index:3; }
.about__frame--front-b{ bottom:0; right:0; width:42%; transform:rotate(2deg); z-index:2; }
@media (hover:hover){
  .about__frame--back:hover{ transform:rotate(1.5deg) translateY(-4px); }
  .about__frame--front-a:hover{ transform:rotate(-3deg) translateY(-4px); }
  .about__frame--front-b:hover{ transform:rotate(2deg) translateY(-4px); }
}
@media (prefers-reduced-motion:reduce){ .about__frame{ transition:none; } }
@media (max-width:991px){
  .about__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-16); }
  .about__media{ max-width:560px; }
}

/* ---------- rooms: image-led portrait slides that bleed to the right edge ---------- */
.rooms__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-6); }
.rooms__track{ position:relative; margin-block-start:var(--gap-inner); }
.rooms-swiper{ padding-inline:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.rooms-swiper .swiper-slide{ width:var(--card-w); }
.room__media{ display:block; overflow:hidden; }
.room__name{ margin-block-start:var(--space-5); font-size:var(--text-h3); }
.room__name a{ text-decoration:none; }
.room__name a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:1px; text-underline-offset:6px; }
.room__meta{ margin-block-start:var(--space-2); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); line-height:var(--lh-small); }
.slider-count{ min-width:var(--space-16); text-align:center; font-size:var(--text-small); font-weight:var(--w-medium); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
/* round 11: a per-room text link; its gold underline draws in while the cursor is on the card (always shown on touch) */
.room__link{ display:inline-flex; align-items:center; min-height:32px; margin-block-start:var(--space-3); padding-block-end:2px;
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--forest); text-decoration:none;
  background:linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition:background-size 450ms var(--ease), color var(--dur) var(--ease); }
.room:hover .room__link,.room__link:hover,.room__link:focus-visible{ background-size:100% 1px; }
.room__link:hover{ color:var(--gold-ink); }
@media (hover:none){ .room__link{ background-size:100% 1px; } }
@media (prefers-reduced-motion:reduce){ .room__link{ transition:none; } }
.rooms .container .actions{ margin-block-start:var(--space-12); justify-content:center; }   /* round 15b: View All Rooms centred under the cards */

/* ---------- dining: the one quiet dark band; editorial tabs (fix #5) ---------- */
.on-dark{ background:var(--forest); color:var(--on-dark); --card-hover-line:rgba(255,255,255,.2); }
.on-dark h2,.on-dark h3{ color:var(--on-dark); }
.on-dark .eyebrow{ color:var(--gold-light); }
.on-dark .line{ color:var(--on-dark-soft); }
.dining__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-20); align-items:center; }
.dining h2 em{ color:var(--gold-light); }
.dining .actions{ margin-block-start:var(--space-8); }
@media (max-width:991px){ .dining__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-12); } }

/* ---------- spa ---------- */
.spa__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-20); align-items:center; }
@media (max-width:767px){ .spa__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-10); } .spa__media{ order:-1; } }

/* ---------- facilities: eight quiet icons, no boxes ---------- */
/* round 10: one row of facilities in a rectangular box -- an auto-advancing carousel that stops while the
   cursor (or keyboard focus) is on it; on hover the icon draws itself in gold and the hours rise */
.fac-box{ border:1px solid var(--line); background:rgba(255,253,248,.35); overflow:hidden; }
.fac-swiper{ overflow:hidden; }
.fac-row{ list-style:none; margin:0; padding:0; }
.fac{ position:relative; box-sizing:border-box; display:flex; flex-direction:column; gap:var(--space-4); height:auto;
  padding:var(--space-10) var(--space-8) var(--space-8); border-right:1px solid var(--line); outline-offset:-4px; }
.fac svg{ width:36px; height:36px; color:var(--forest); transition:color var(--dur) var(--ease); }
.fac svg [pathLength]{ stroke-dasharray:1; stroke-dashoffset:0; }
.fac__name{ font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--w-regular); color:var(--forest); line-height:var(--lh-heading); }
.fac__hours{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); line-height:var(--lh-small); }
.fac::after{ content:""; position:absolute; left:var(--space-8); right:var(--space-8); bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 600ms var(--ease); }
@media (hover:hover){
  .fac__hours{ opacity:0; transform:translateY(8px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .fac:hover .fac__hours,.fac:focus-visible .fac__hours{ opacity:1; transform:none; }
  .fac:hover svg,.fac:focus-visible svg{ color:var(--gold); }
  .fac:hover svg [pathLength],.fac:focus-visible svg [pathLength]{ animation:fac-draw 900ms var(--ease) both; }
  .fac:hover::after,.fac:focus-visible::after{ transform:scaleX(1); }
}
@keyframes fac-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .fac svg [pathLength]{ animation:none !important; } .fac__hours,.fac::after{ transition:none; } }
.facilities .fac-box + .actions{ margin-block-start:var(--space-12); }
/* without the carousel script the cells still sit in one scroll-free row of four */
html:not(.js) .fac-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:767px){ .fac{ padding:var(--space-6) var(--space-5) var(--space-5); gap:var(--space-3); } .fac svg{ width:30px; height:30px; } .fac::after{ left:var(--space-5); right:var(--space-5); } }

/* ---------- venues: heading, names and buttons beside one frame; the whole band fits one screen (round 5) ---------- */
.venues{ background:var(--sand); }
.venue-wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-16); align-items:center; }
.venue-side .section-head + .venue-list{ margin-block-start:var(--space-8); }
.venue-list{ position:relative; display:flex; flex-direction:column; }
/* round 13: a gold marker slides up and down the name list to the chosen venue (tap, hover, keys or swipe) */
.venue-marker{ position:absolute; left:0; top:0; width:2px; height:0; background:var(--gold); pointer-events:none;
  transition:transform 420ms var(--ease), height 420ms var(--ease); }
@media (prefers-reduced-motion:reduce){ .venue-marker{ transition:none; } }
.venue-list [role="tab"]{ position:relative; display:flex; align-items:center; min-height:64px; padding-inline-start:var(--space-6); text-align:left;
  font-family:var(--font-display); font-size:var(--text-h3); color:var(--ink-soft); border-left:1px solid var(--line); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.venue-list [role="tab"]:hover{ color:var(--forest); }
.venue-panel:not([hidden]){ animation:venue-in var(--dur) var(--ease); }
@keyframes venue-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .venue-panel:not([hidden]){ animation:none; } }
.venue-list [aria-selected="true"]{ color:var(--forest); }
.venue-facts{ display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-12); margin-block-start:var(--space-6); }
.venue-facts dt{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.venue-facts dd{ margin-block-start:var(--space-1); font-family:var(--font-display); font-size:var(--text-h3); color:var(--forest); line-height:var(--lh-heading); }
.venue-list [role="tab"]{ min-height:clamp(44px, 6.2vh, 56px); }
.venue-main .actions{ margin-block-start:var(--space-8); }
@media (max-height:760px) and (min-width:992px){ .venue-list [role="tab"]{ min-height:44px; } .venue-facts{ margin-block-start:var(--space-4); } .venue-main .actions{ margin-block-start:var(--space-6); } }
@media (max-width:991px){
  .venue-wrap{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .venue-side,.venue-main{ display:contents; }
  .venue-side .section-head{ order:1; } .venue-list{ order:2; } .venue-panels{ order:3; } .venue-main .actions{ order:4; margin-block-start:var(--space-6); }
  .venue-side .section-head + .venue-list{ margin-block-start:var(--space-6); }
}
@media (max-width:767px){
  .venue-list [role="tab"]{ min-height:var(--tap); padding-inline-start:var(--space-4); font-size:var(--text-lead); }
}

/* ---------- gallery: bento of six -- one large photo, a small + wide row over three smalls; the name shows on hover (round 5) ---------- */
.bento{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--space-4); }
.bento__item{ position:relative; display:block; overflow:hidden; aspect-ratio:1 / 1; }   /* 23 Oct: square tiles (was 282/198, then 5/4), the hero grows with its two rows */
.bento__item--hero{ grid-column:1 / span 2; grid-row:1 / span 2; aspect-ratio:auto; }
.bento__item--wide{ grid-column:span 2; aspect-ratio:auto; }
.bento__item .ph{ position:absolute; inset:0; height:auto; }
.bento__item .ph img{ width:auto; height:auto; max-width:56%; max-height:50%; padding:0; }   /* the logo placeholder sized by the tile, not its width */
.bento__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:var(--space-16) var(--space-6) var(--space-5); text-align:left;
  background:linear-gradient(to top, rgba(13,25,9,.74), rgba(13,25,9,0)); color:var(--on-dark);
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); line-height:var(--lh-small);
  opacity:0; transform:translateY(8px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events:none; }
.bento__item:hover .bento__cap,.bento__item:focus-visible .bento__cap{ opacity:1; transform:none; }
@media (hover:none){ .bento__cap{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .bento__cap{ transition:none; transform:none; } }
.gallery .bento-wrap + .actions{ margin-block-start:var(--space-12); }
@media (max-width:767px){
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:dense; gap:var(--space-3); }
  .bento__item--hero{ grid-column:1 / -1; grid-row:auto; aspect-ratio:4 / 3; }
  .bento__item--wide{ grid-column:1 / -1; aspect-ratio:2 / 1; }
  .bento__item:not(.bento__item--hero):not(.bento__item--wide){ aspect-ratio:1 / 1; }
  .bento__cap{ padding:var(--space-8) var(--space-3) var(--space-3); }
}

/* ---------- location: contained (fix #3) ---------- */
.location__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-20); align-items:start; }
.location__copy,.location__dist{ min-width:0; }
.location__address{ margin-block-start:var(--space-6); max-width:var(--measure); color:var(--forest); font-weight:var(--w-medium); line-height:var(--lh-small); }
.dist{ width:100%; }
.dist__cap{ caption-side:top; text-align:left; padding-block-end:var(--space-4); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.dist th,.dist td{ padding:var(--space-4) 0; text-align:left; border-bottom:1px solid var(--line); vertical-align:baseline; }
.dist thead th{ padding-block-start:0; font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-soft); }
.dist tbody th{ font-family:var(--font-display); font-size:var(--text-lead); font-weight:var(--w-medium); color:var(--forest); padding-inline-end:var(--space-4); }
.dist td{ color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; padding-inline-end:var(--space-4); }
.dist td:last-child,.dist thead th:last-child{ text-align:right; padding-inline-end:0; }
@media (max-width:899px){ .location__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-12); } }
@media (max-width:599px){ .dist th,.dist td{ padding-block:var(--space-3); } .dist td{ font-size:var(--text-small); } .dist td:last-child{ white-space:normal; } }

/* ---------- final CTA ---------- */
.final-cta{ background:var(--forest); }
.final-cta h2{ max-width:22ch; margin-inline:auto; }
.final-cta h2 em{ color:var(--gold-light); }
.final-cta .motif--cta + h2{ margin-block-start:var(--space-8); }
.final-cta h2 + .actions{ margin-block-start:var(--space-10); }

/* ---------- footer ---------- */
.site-footer{ background:var(--sand); margin-block-start:var(--gap-widget); }
.site-footer--flush{ margin-block-start:0; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap:var(--space-8); padding-block:var(--space-20); }
.footer-col > * + *{ margin-block-start:var(--space-4); }
.footer-logo{ width:168px; height:auto; }
.footer-address{ max-width:30ch; color:var(--ink-soft); font-size:var(--text-small); line-height:var(--lh-small); }
.footer-h{ font-family:var(--font-body); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); line-height:var(--lh-small); }
.footer-list{ display:flex; flex-direction:column; gap:var(--space-1); }
.footer-list a{ display:inline-flex; align-items:center; min-height:32px; font-size:var(--text-small); color:var(--forest); text-decoration:none; overflow-wrap:anywhere; }
.footer-list a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
.footer-social{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--forest); border-radius:var(--radius-round); color:var(--forest);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.footer-social a:hover{ background:var(--forest); color:var(--on-dark); }
.footer-social svg{ width:20px; height:20px; }
.footer-legal{ background:var(--forest-deep); color:#FFFFFF; font-size:var(--text-small); }
.footer-legal *{ color:#FFFFFF; }   /* round 7: user asked for pure white on the bottom bar */
.footer-legal__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-6); padding-block:var(--space-5); }
.footer-legal__links{ display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-5); }
.footer-legal a{ display:inline-flex; align-items:center; min-height:32px; color:#FFFFFF; text-decoration:none; }
.footer-legal a:hover{ text-decoration:underline; text-decoration-color:var(--gold-light); }
@media (max-width:991px){ .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .footer-col--brand{ grid-column:1 / -1; } }
@media (max-width:767px){ .footer-grid{ padding-block:var(--space-16); } .footer-legal__in{ flex-direction:column; align-items:flex-start; } .footer-legal{ padding-block-end:calc(var(--tap) + var(--space-8)); } }
@media (max-width:599px){ .footer-col--contact{ grid-column:1 / -1; } }

/* ---------- action dock (fix #2): one stack, one z-index, no collisions ---------- */
.actions-dock{ position:fixed; z-index:var(--z-fab); right:var(--dock-edge); bottom:calc(var(--dock-edge) + var(--cookie-h));
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:var(--dock-gap); pointer-events:none;
  transition:bottom var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), transform var(--dur) var(--ease); }
.actions-dock > *{ pointer-events:auto; }
.actions-dock.is-tucked{ opacity:0; visibility:hidden; transform:translateY(var(--space-4)); }
.dock-book{ display:none; }
.contact{ position:relative; }
.contact__btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-width:var(--tap); height:var(--tap); padding-inline:var(--space-5);
  background:var(--forest); color:var(--on-dark); border-radius:var(--radius-round); box-shadow:var(--shadow-md);
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label);
  transition:background-color var(--dur) var(--ease); }
.contact__btn:hover{ background:var(--gold); color:#FFFFFF; }   /* round 15b: the sticky Contact hovers to brand gold too */
.contact__btn svg{ width:20px; height:20px; }
.contact__pop{ position:absolute; z-index:var(--z-popover); right:0; bottom:calc(100% + var(--space-3)); width:min(300px, calc(100vw - 2 * var(--dock-edge)));
  background:var(--surface); box-shadow:var(--shadow-md); padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.contact__title{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.contact__item{ display:flex; align-items:center; gap:var(--space-3); min-height:56px; padding:var(--space-2) var(--space-3); text-decoration:none; color:var(--forest); border:1px solid var(--line);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.contact__item:hover{ background:var(--ivory); border-color:var(--forest); }
.contact__item svg{ width:22px; height:22px; color:var(--gold-ink); flex:0 0 auto; }
.contact__item span{ display:flex; flex-direction:column; font-weight:var(--w-medium); line-height:var(--lh-small); min-width:0; }
.contact__item small{ font-size:var(--text-small); font-weight:var(--w-regular); color:var(--ink-soft); overflow-wrap:anywhere; }
.to-top{ display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border-radius:var(--radius-round); background:var(--surface);
  color:var(--forest); border:1px solid var(--forest); box-shadow:var(--shadow-sm); transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.to-top:hover{ background:var(--gold); color:#FFFFFF; border-color:var(--gold); }
.to-top svg{ width:20px; height:20px; }
@media (max-width:767px){
  .actions-dock{ left:0; right:0; bottom:var(--cookie-h); flex-direction:row; align-items:center; gap:var(--space-3);
    padding:var(--space-2) var(--dock-edge) calc(var(--space-2) + env(safe-area-inset-bottom)); background:var(--ivory); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(13,25,9,.08); }
  .dock-book{ display:inline-flex; flex:1 1 0; min-width:0; padding-inline:var(--space-4); }
  .contact__btn{ box-shadow:none; padding-inline:var(--space-4); }
  .to-top{ position:absolute; right:var(--dock-edge); bottom:calc(100% + var(--dock-gap)); }
  .contact__pop{ bottom:calc(100% + var(--space-4)); }
}

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:var(--z-lightbox); background:rgba(13,25,9,.92); display:flex; align-items:center; justify-content:center; padding:var(--space-16); --focus:var(--gold-light); --focus-halo:var(--forest); }
.lightbox__stage{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); max-width:min(1100px, 100%); }
.lightbox__img{ max-height:76vh; width:auto; background:var(--ivory); padding:var(--space-10); }
.lightbox__count{ color:var(--on-dark); font-size:var(--text-small); }
.lightbox .icon-btn{ position:absolute; color:var(--on-dark); border:1px solid var(--line-dark); }
.lightbox .icon-btn:hover{ background:rgba(246,241,231,.12); }
.lightbox__close{ top:var(--space-4); right:var(--space-4); }
.lightbox__prev{ left:var(--space-4); top:50%; transform:translateY(-50%); }
.lightbox__next{ right:var(--space-4); top:50%; transform:translateY(-50%); }
@media (max-width:767px){ .lightbox{ padding:var(--space-16) var(--space-4); } .lightbox__prev,.lightbox__next{ top:auto; bottom:var(--space-4); transform:none; } }

/* ---------- cookie ---------- */
.cookie{ position:fixed; z-index:var(--z-cookie); left:0; right:0; bottom:0; background:var(--forest-deep); color:var(--on-dark); font-size:var(--text-small); }
.cookie__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-6); padding-block:var(--space-4); }
.cookie__in a{ color:var(--gold-light); }
.cookie__actions{ display:flex; gap:var(--space-3); }

/* ---------- Swiper (CDN) ---------- */
.swiper-slide{ height:auto; }

/* ---------- round 3: flank arrows (#4) ---------- */
.flank{ position:absolute; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); margin-top:calc(var(--tap) / -2);
  border-radius:var(--radius-round); background:var(--surface); color:var(--forest); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.flank svg{ width:20px; height:20px; }
.flank:hover{ background:var(--gold); color:#FFFFFF; border-color:var(--gold); }   /* round 15: icon buttons hover to brand gold */
.flank.swiper-button-disabled{ opacity:.35; cursor:default; }
.flank.swiper-button-disabled:hover{ background:var(--surface); color:var(--forest); border-color:var(--line); }
/* rooms: centred on the 3:4 photo (height = card width × 4/3, so half = × 2/3) */
.rooms__track .flank{ top:calc(var(--card-w) * 2 / 3); }
.rooms__track .flank--prev{ left:var(--space-4); }
.rooms__track .flank--next{ right:var(--space-4); }

/* ---------- round 3: CTA hover scale (#5) — transform only, never reflows ---------- */
.btn,.ctrl-btn,.flank,.contact__btn,.to-top,.stepper__btn,.footer-social a{
  transition-property:background-color, color, border-color, box-shadow, transform, opacity;
  transition-duration:var(--dur); transition-timing-function:var(--ease); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover,.ctrl-btn:hover,.flank:not(.swiper-button-disabled):hover,.contact__btn:hover,.to-top:hover,.stepper__btn:not(:disabled):hover,.footer-social a:hover{ transform:scale(1.03); }
}

/* ---------- round 3: non-CTA card highlight (#5) — border + faint light, no zoom ---------- */
.ph::after{ content:""; position:absolute; inset:0; border:1px solid transparent; background-color:transparent; pointer-events:none;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
@media (hover:hover){
  .room:hover .ph::after,.bento__item:hover .ph::after,.venue-panel:hover .ph::after,
  .dining__media:hover .ph::after,.about__frame:hover .ph::after,.spa__media:hover .ph::after{ border-color:var(--card-hover-line); background-color:rgba(255,253,248,.06); }
}
.room:focus-within .ph::after,.bento__item:focus-visible .ph::after{ border-color:var(--card-hover-line); }

/* ---------- round 9: the first gold tiger (round 4 art) -- peeks over the room cards, holds its head up, sinks back. No walking or leaping. ---------- */
.rooms-swiper{ position:relative; z-index:1; }
.tiger-stage{ position:absolute; z-index:0; left:0; right:0; bottom:100%; height:var(--space-40); pointer-events:none;
  clip-path:inset(-200px -200px 0 -200px); }   /* only the bottom is clipped: the card edge hides the tiger */
.tiger-stage{ --tiger-w:clamp(46px, 3.4vw, 68px); }
.tiger{ position:absolute; width:var(--tiger-w);
  left:calc(max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) + var(--card-w) * .08);
  bottom:calc(var(--tiger-w) * -70 / 120);      /* viewBox y=100 (paws) sits on the card edge */
  transform:translateY(110%); will-change:transform; }
.tiger svg{ width:100%; height:auto; overflow:visible; stroke:none; }
.tiger-stage .t-gold{ fill:var(--gold); }
.tiger-stage .t-cream{ fill:var(--ivory); }
.tiger-stage .t-ink{ fill:var(--forest); }
.tiger-stage path.t-ink[stroke-width]{ fill:none; stroke:var(--forest); }
.tiger-stage .t-ink-line{ fill:none; stroke:var(--forest); }
.tiger-stage .t-gold-line{ fill:none; stroke:var(--gold); }
.tiger .t-eyes{ transform-box:fill-box; transform-origin:center; }
.tiger .t-pupils{ transition:transform 240ms var(--ease); }
@media (prefers-reduced-motion:reduce){ .tiger-stage{ display:none; } }

/* ---------- round 12: phones swipe every multi-photo section (About, Rooms, Weddings & Events, Gallery, Facilities, Hero).
   site.js turns the About pair, the venue panels and the gallery bento into Swiper tracks below 768px only. ---------- */
.swipe-dots{ display:none; }
.venue-panel__name{ display:none; }
@media (max-width:767px){
  /* a Swiper inside a grid item would otherwise grow without limit */
  .is-swipe{ min-width:0; width:100%; max-width:100%; }
  .about__grid > *,.venue-wrap > *{ min-width:0; }
  .is-swipe .swipe-dots{ display:flex; justify-content:center; position:static; margin-block-start:var(--space-3); }
  .swipe-dots .swiper-pagination-bullet{ position:relative; width:28px; height:28px; margin:0 !important; background:transparent; opacity:1; border-radius:0; }
  .swipe-dots .swiper-pagination-bullet::before{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%);
    border:1.5px solid var(--forest); transition:background-color var(--dur) var(--ease); }
  .swipe-dots .swiper-pagination-bullet-active::before{ background:var(--forest); }
  .on-dark .swipe-dots .swiper-pagination-bullet::before{ border-color:var(--on-dark); }

  /* about: the three prints side by side, swiped (one per slide, no tilt in the track) */
  .about__media.is-swipe{ max-width:none; }
  .about__media.is-swipe .about__frames{ aspect-ratio:auto; }
  .about__media.is-swipe .about__frame{ position:relative; inset:auto; width:auto; transform:none; }
  .about__media.is-swipe .about__frame--back .ph{ aspect-ratio:4 / 3; }   /* same height as the other two slides */

  /* rooms: swipe only -- the peeking next card is the cue, no arrows over the photos */
  .rooms__track .flank{ display:none !important; }

  /* weddings & events: one venue per slide (photo, facts); the name list above stays, its marker follows the swipe */
  .venues .venue-side .section-head + .venue-list{ margin-block-start:var(--space-6); }
  .venue-panels.is-swipe .venue-panel{ animation:none; }
  .venue-panels.is-swipe .venue-facts{ margin-block-start:var(--space-3); gap:var(--space-3) var(--space-8); }

  /* gallery: one photo per slide, names always on */
  .bento-wrap.is-swipe .bento{ display:flex; gap:0; grid-template-columns:none; }   /* the swipe track, not the grid */
  .bento-wrap.is-swipe .bento__item{ aspect-ratio:4 / 3; grid-column:auto; grid-row:auto; flex-shrink:0; }
}

/* ---------- round 13: Getting Here on phones -- the four places as swipe cards (the table stays on wider screens) ---------- */
.dist-cards{ display:none; }
@media (max-width:767px){
  .location .dist{ display:none; }
  .dist-cards{ display:block; }
  .dist-cards .dist__cap{ margin:0 0 var(--space-4); }
  .dist-card{ box-sizing:border-box; height:auto; padding:var(--space-6) var(--space-5); border:1px solid var(--line); background:rgba(255,253,248,.55); }
  .dist-card__place{ font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--w-regular); color:var(--forest); line-height:var(--lh-heading); }
  .dist-card__facts{ display:flex; gap:var(--space-8); margin-block-start:var(--space-4); }
  .dist-card__facts dt{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
  .dist-card__facts dd{ margin:var(--space-1) 0 0; font-family:var(--font-display); font-size:var(--text-lead); color:var(--forest); font-variant-numeric:tabular-nums; }
}

/* ---------- round 14: phones -- no booking form on the page. Book Now sits in the sticky header (always in view);
   tapping it slides the booking form up as a sheet. The dock keeps only Contact (and back-to-top). ---------- */
.sheet-head,.sheet-backdrop{ display:none; }
@keyframes sheet-up{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes sheet-fade{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:767px){
  /* header: menu | logo | Book Now */
  .site-header__in{ grid-template-columns:1fr auto 1fr; }
  .menu-btn{ justify-self:start; }
  .header-actions{ display:flex; justify-self:end; }
  .header-actions .btn{ padding-inline:var(--space-4); }

  /* the booking form leaves the page and becomes a slide-up sheet */
  .hero__booking{ display:none; }
  .hero__booking.is-open{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-drawer) + 1); margin:0;
    max-height:92svh; overflow-y:auto; background:var(--surface); box-shadow:0 -12px 40px rgba(13,25,9,.22);
    padding-block-end:env(safe-area-inset-bottom); animation:sheet-up 380ms var(--ease); }
  .hero__booking.is-open .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-4) 0; }
  .sheet-title{ font-family:var(--font-display); font-size:var(--text-h3); color:var(--forest); }
  .sheet-close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--forest); }
  .sheet-close svg{ width:22px; height:22px; }
  .hero__booking.is-open .booking-bar{ box-shadow:none; padding-inline:0; }
  .sheet-backdrop.is-open{ display:block; position:fixed; inset:0; z-index:var(--z-drawer); background:rgba(13,25,9,.45); animation:sheet-fade 300ms var(--ease); }
  @media (prefers-reduced-motion:reduce){ .hero__booking.is-open,.sheet-backdrop.is-open{ animation:none; } }

  /* the dock: Contact floats bottom right (Book Now now lives in the header) */
  .dock-book{ display:none !important; }
  .actions-dock{ left:auto; right:var(--dock-edge); bottom:calc(var(--dock-edge) + var(--cookie-h)); flex-direction:column-reverse; align-items:flex-end;
    gap:var(--dock-gap); padding:0; background:none; border:0; box-shadow:none; }
  .contact__btn{ box-shadow:var(--shadow-md); }
  .to-top{ position:static; }
  .footer-legal{ padding-block-end:calc(var(--tap) + var(--space-10)); }
}

/* ---------- round 15: the rooms band fits one screen under the header (768px and up).
   "View All Rooms" stays BELOW the cards (user, round 15b). The room photo takes its HEIGHT from the screen:
   the space left after the heading row (90), the tiger's gap (80), the card text (~130) and the CTA (32 + 44),
   capped at the usual 3:4 portrait. Card widths stay as they were, so names keep to one line. ---------- */
@media (min-width:768px){
  .rooms .container .actions{ margin-block-start:var(--space-8); }
  .rooms{ --room-ph-h:clamp(180px, calc(100svh - var(--header-min) - 388px), calc(var(--card-w) * 4 / 3)); }
  .rooms .room .ph{ aspect-ratio:auto; height:var(--room-ph-h); }
  .rooms__track .flank{ top:calc(var(--room-ph-h) / 2); }
}
@media (min-width:768px) and (max-height:760px){
  .rooms__track{ margin-block-start:64px; }     /* short laptop screens: the tiger's head (about 57px) still clears the heading */
  .rooms{ --room-ph-h:clamp(180px, calc(100svh - var(--header-min) - 372px), calc(var(--card-w) * 4 / 3)); }
}

/* ---------- round 16 (phones only, <768px): no Contact button; every CTA takes the header Book Now's
   proportions -- the same 44px height and 16px side padding, as wide as its label (no 300px boxes) ---------- */
@media (max-width:767px){
  .actions-dock .contact{ display:none; }
  .btn{ padding-inline:var(--space-4); }
  .btn--cta{ min-width:0; padding-inline:var(--space-4); }
}

/* ---------- round 17 (phones only): the venue names become one row of tabs on a light track line, with a gold
   underline that slides to the chosen name (user's reference: ALL PHOTOS / FACILITIES / ROOMS tabs). Swipe the row
   or the photo left/right; the row shifts only as far as needed to keep the chosen name in view. ---------- */
.venue-tabs{ display:flex; flex-direction:column; }
.venue-marker{ transition:transform 420ms var(--ease), height 420ms var(--ease), width 420ms var(--ease); }
@media (max-width:767px){
  .venue-list{ overflow:hidden; overflow:clip; touch-action:pan-y; box-shadow:inset 0 -2px 0 var(--line); }
  .venue-tabs{ flex-direction:row; flex-wrap:nowrap; gap:var(--space-6); transition:transform 420ms var(--ease); will-change:transform; }
  .venue-list [role="tab"]{ flex:0 0 auto; white-space:nowrap; min-height:var(--tap); padding:0; border-left:0;
    font-family:var(--font-body); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-soft); }
  .venue-list [aria-selected="true"]{ color:var(--forest); }
  .venue-marker{ top:auto; bottom:0; height:2px; }
  @media (prefers-reduced-motion:reduce){ .venue-tabs{ transition:none; } }
}

/* ---------- round 18 (phones only, <768px) ---------- */
@media (max-width:767px){
  /* footer: no empty strip under the bottom bar (it was room for the old bottom button bar);
     a little room on the right so the back-to-top button never covers the footer text */
  .footer-legal{ padding-block-end:var(--space-5); }
  .footer-legal__in{ padding-inline-end:calc(var(--tap) + var(--space-4)); }
  /* every CTA left-aligned, except the dark closing band's, which stays centred */
  .actions,.rooms .container .actions{ justify-content:flex-start; }
  .final-cta .actions{ justify-content:center; }
  /* outlined CTAs are filled brand gold with white text; hover goes darker */
  .btn--outline,.btn--on-dark{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
  .btn--outline:hover,.btn--on-dark:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#FFFFFF; }
  /* round 18c: wherever two CTAs sit together, one is filled and one is not -- the second (outlined) CTA keeps its
     outline so the pair never reads as two equal choices (Weddings & Events, the dark closing band, any future pair) */
  .btn--primary ~ .btn--outline{ background:transparent; border-color:var(--forest); color:var(--forest); }
  .btn--primary ~ .btn--on-dark{ background:transparent; border-color:var(--on-dark); color:var(--on-dark); }
  .btn--primary ~ .btn--outline:hover,.btn--primary ~ .btn--on-dark:hover{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
}

/* ---------- round 19: the Contact pill and pop-up give way to one plain round call button (Reservations),
   matching back-to-top; hover goes to brand gold. Hidden on phones like Contact was (round 16). ---------- */
.call-btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border-radius:var(--radius-round);
  background:var(--forest); color:var(--on-dark); box-shadow:var(--shadow-md); transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.call-btn svg{ width:20px; height:20px; }
.call-btn:hover{ background:var(--gold); color:#FFFFFF; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .call-btn:hover{ transform:scale(1.03); } }
@media (max-width:767px){ .actions-dock .call-btn{ display:none; } }

/* ---------- round 20: the logo's gold leaf spray (six blades on the V, traced from the logo file) marks every
   section label; the dark closing band shows it larger, centred above its heading ---------- */
.eyebrow{ display:flex; align-items:center; gap:var(--space-3); }
.motif{ flex:0 0 auto; width:calc(1.9em * 284 / 460); height:1.9em; stroke:none; }
.section-head.center .eyebrow,.final-cta .eyebrow{ justify-content:center; }
.motif--cta{ display:block; width:calc(56px * 284 / 460); height:56px; margin-inline:auto; }

/* =====================================================================================================
   round 21: INNER PAGES -- one skeleton for every page: header, breadcrumb, label + H1 + one line,
   an optional wide photo, then the page's sections and the closing band. Same tokens, same CTA rules.
   ===================================================================================================== */
.ratio-21x9{ aspect-ratio:21/9; }
.ratio-1x1{ aspect-ratio:1/1; }
.page-banner .ph img{ padding:10% 34%; }
@media (max-width:767px){ .ratio-21x9{ aspect-ratio:4/3; } .page-banner .ph img{ padding:16% 22%; } }

/* page head: breadcrumb -> 32 -> label -> 8 -> H1 -> 16 -> line; the photo sits one inner gap below */
.page-head{ padding-block-start:var(--space-12); }
.page-head + .widget{ margin-block-start:var(--gap-widget); }
.page-head__copy{ margin-block-start:var(--space-8); max-width:56rem; }
.page-head h1{ font-size:clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem); }
.page-head .line{ max-width:52ch; }
.page-banner{ margin-block-start:var(--gap-inner); }
@media (max-width:767px){ .page-head{ padding-block-start:var(--space-6); } .page-head__copy{ margin-block-start:var(--space-6); } }

.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); }
.crumbs li{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-small); color:var(--ink-soft); line-height:var(--lh-small); }
.crumbs li + li::before{ content:"/"; color:var(--gold-ink); }
.crumbs a{ display:inline-flex; align-items:center; min-height:32px; color:var(--forest); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
.crumbs [aria-current="page"]{ color:var(--ink-soft); }

/* running copy and labelled facts */
.body-copy{ max-width:62ch; color:var(--ink); }
h2 + .body-copy,.body-copy + .body-copy{ margin-block-start:var(--space-4); }
.facts{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-10); margin-block-start:var(--space-8); }
.facts dt,.list-title,.note__k{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); line-height:var(--lh-small); }
.facts dd{ margin-block-start:var(--space-1); font-family:var(--font-display); font-size:var(--text-lead); font-weight:var(--w-medium); color:var(--forest); line-height:var(--lh-small); }
.facts--row{ justify-content:center; margin-block-start:var(--space-12); }
.note{ margin-block-start:var(--space-4); max-width:62ch; color:var(--ink-soft); }
.note__k{ display:block; margin-block-end:var(--space-1); }
.facts + .note{ margin-block-start:var(--space-6); }
.list-title{ display:block; }

/* a quiet sand band behind a section */
.band-sand{ background:var(--sand); }
.band-sand .ph--sand{ background:var(--surface); }

/* copy beside one photo */
.split__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--space-20); align-items:center; }
.split__copy,.split__media{ min-width:0; }
@media (max-width:991px){ .split__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-10); } }

/* cards: rooms, attractions, offers */
.card-grid{ display:grid; gap:var(--space-12) var(--space-8); }
.card-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.card-grid .room__name{ font-size:var(--text-h3); font-weight:var(--w-medium); line-height:var(--lh-heading); }
@media (max-width:991px){ .card-grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599px){ .card-grid--3{ grid-template-columns:minmax(0,1fr); } }
.card-row.is-swipe .card-grid{ display:flex; gap:0; grid-template-columns:none; }
.card-row.is-swipe .swipe-item{ flex-shrink:0; }

/* amenity lists */
.amen-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3) var(--space-8); margin-block-start:var(--space-5); }
.amen-list li{ position:relative; padding-inline-start:var(--space-6); line-height:var(--lh-small); color:var(--ink); }
.amen-list li::before,.prose li::before{ content:""; position:absolute; left:2px; top:.6em; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }
@media (max-width:599px){ .amen-list{ grid-template-columns:minmax(0,1fr); } }
.every-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-20); align-items:start; }
.every-grid .section-head + *{ margin-block-start:0; }
.every-grid .amen-list{ margin-block-start:0; }
@media (max-width:991px){ .every-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-8); } }

/* room page: story + facts beside the amenity list */
.rd-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-20); align-items:start; }
.rd-amen{ padding:var(--space-8); border:1px solid var(--line); background:rgba(255,253,248,.55); }
.rd-amen .amen-list{ grid-template-columns:minmax(0,1fr); }
.rd-copy .actions{ margin-block-start:var(--space-10); }
@media (max-width:991px){ .rd-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-12); } .rd-amen .amen-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599px){ .rd-amen{ padding:var(--space-6) var(--space-5); } .rd-amen .amen-list{ grid-template-columns:minmax(0,1fr); } }

/* about: the resort in brief + the people */
.glance{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.glance li{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-8); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.glance__v{ font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--w-medium); color:var(--forest); line-height:var(--lh-heading); }
.glance__k{ font-size:var(--text-small); color:var(--ink-soft); }
@media (max-width:767px){ .glance{ grid-template-columns:repeat(2, minmax(0,1fr)); } .glance li{ padding:var(--space-5) var(--space-4); } }
.people{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-8); }
.person{ padding-block-start:var(--space-6); border-top:2px solid var(--gold); }
.person h3{ font-size:var(--text-h3); }
.person__role{ margin-block:var(--space-2) var(--space-4); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.person p:last-child{ color:var(--ink-soft); }
.people__gm{ margin-block-start:var(--space-12); color:var(--ink-soft); }
.people__gm span{ margin-inline-end:var(--space-3); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
@media (max-width:991px){ .people{ grid-template-columns:minmax(0,1fr); gap:var(--space-10); } }

/* facilities: hairline grid of eight, then a two-column service list */
.amen-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.amen-cell{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-8) var(--space-6); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color var(--dur) var(--ease); }
.amen-cell svg{ width:34px; height:34px; color:var(--gold-ink); }
.amen-cell__name{ font-family:var(--font-display); font-size:var(--text-lead); font-weight:var(--w-medium); color:var(--forest); line-height:var(--lh-heading); }
.amen-cell__hours{ font-size:var(--text-small); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
@media (hover:hover){ .amen-cell:hover{ background:rgba(255,253,248,.7); } }
@media (max-width:991px){ .amen-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599px){ .amen-cell{ padding:var(--space-6) var(--space-4); } .amen-cell svg{ width:28px; height:28px; } }
.svc-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--space-20); align-items:start; }
.svc-grid .section-head + *{ margin-block-start:0; }
.svc-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--space-10); }
.svc-list div{ padding-block:var(--space-4); border-bottom:1px solid var(--line); }
.svc-list dt{ font-family:var(--font-display); font-size:var(--text-lead); font-weight:var(--w-medium); color:var(--forest); line-height:var(--lh-heading); }
.svc-list dd{ margin-block-start:var(--space-1); font-size:var(--text-small); color:var(--ink-soft); }
@media (max-width:991px){ .svc-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-8); } }
@media (max-width:599px){ .svc-list{ grid-template-columns:minmax(0,1fr); } }

/* dining: the buffet day in four cells */
.meal-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.meal-row li{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-8) var(--space-4); text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.meal-row__k{ font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--w-medium); color:var(--forest); line-height:var(--lh-heading); }
.meal-row__v{ font-size:var(--text-small); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
@media (max-width:767px){ .meal-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } .meal-row li{ padding:var(--space-6) var(--space-3); } }

/* venues: photo beside facts, alternating sides */
.venue-rows{ display:flex; flex-direction:column; gap:var(--gap-inner); }
.venue-row{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-16); align-items:center; scroll-margin-top:calc(var(--header-min) + var(--space-6)); }
.venue-row--rev{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.venue-row--rev .venue-row__media{ order:2; }
.venue-row__copy,.venue-row__media{ min-width:0; }
.venue-row h3{ font-size:var(--text-h2); font-weight:400; }
.venue-row .facts{ margin-block-start:var(--space-6); }
.aside-link{ margin-block-start:var(--gap-inner); color:var(--ink-soft); }
.aside-link a{ color:var(--forest); text-decoration-color:var(--gold); text-underline-offset:4px; }
.aside-link a:hover{ color:var(--gold-ink); }
@media (max-width:991px){ .venue-row,.venue-row--rev{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .venue-row--rev .venue-row__media{ order:0; } }

/* experiences + attractions */
.x-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-10) var(--space-8); }
.x-card__name,.attr-card__name{ margin-block-start:var(--space-4); font-size:var(--text-h3); font-weight:var(--w-medium); line-height:var(--lh-heading); }
@media (max-width:991px){ .x-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599px){ .x-grid{ gap:var(--space-8) var(--space-3); } .x-card__name{ font-size:var(--text-lead); } }
.attr-card .facts{ margin-block-start:var(--space-4); gap:var(--space-3) var(--space-8); }
.attr-card .room__link{ margin-block-start:var(--space-4); }
.card-grid + .actions{ margin-block-start:var(--gap-inner); }
@media (hover:hover){ .attr-card:hover .ph::after,.x-card:hover .ph::after{ border-color:var(--card-hover-line); } .attr-card:hover .room__link{ background-size:100% 1px; } }

/* contact */
.c-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-8); }
.c-card{ display:flex; flex-direction:column; align-items:flex-start; padding:var(--space-8); border:1px solid var(--line); background:rgba(255,253,248,.55); }
.c-card__title{ font-size:var(--text-h3); font-weight:var(--w-medium); }
.c-card p{ margin-block:var(--space-2) var(--space-4); color:var(--ink-soft); }
.c-card__link{ display:inline-flex; align-items:center; min-height:40px; color:var(--forest); font-weight:var(--w-medium); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; overflow-wrap:anywhere; }
.c-card__link:hover{ color:var(--gold-ink); text-decoration-color:var(--gold); }
@media (max-width:991px){ .c-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-5); } .c-card{ padding:var(--space-6); } }

/* FAQs: native details/summary, grouped */
.faq-wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-inner); max-width:56rem; }
.faq__title{ font-size:var(--text-h3); font-weight:var(--w-medium); }
.faq{ margin-block-start:var(--space-5); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ position:relative; display:flex; align-items:center; min-height:var(--tap); padding:var(--space-4) var(--space-12) var(--space-4) 0; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:var(--text-lead); font-weight:var(--w-medium); color:var(--forest); line-height:var(--lh-small); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; position:absolute; right:var(--space-2); top:50%; width:10px; height:10px; margin-top:-7px; border-right:1.5px solid var(--gold-ink); border-bottom:1.5px solid var(--gold-ink);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease); }
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq__item summary:hover{ color:var(--gold-ink); }
.faq__a{ padding-block-end:var(--space-5); max-width:62ch; color:var(--ink-soft); }
.faq__a a,.prose a{ color:var(--forest); text-decoration-color:var(--gold); text-underline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .faq__item summary::after{ transition:none; } }

/* gallery page */
.gallery-page .container{ display:flex; flex-direction:column; gap:var(--gap-inner); }
.g-title{ font-size:var(--text-h3); font-weight:var(--w-medium); }
.photo-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-4); margin-block-start:var(--space-5); }
.photo{ position:relative; display:block; overflow:hidden; }
.photo .ph img{ width:auto; height:auto; max-width:56%; max-height:50%; padding:0; }
.photo:hover .bento__cap,.photo:focus-visible .bento__cap{ opacity:1; transform:none; }
@media (hover:hover){ .photo:hover .ph::after{ border-color:var(--card-hover-line); background-color:rgba(255,253,248,.06); } }
@media (max-width:767px){ .photo-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3); } .photo .bento__cap{ padding:var(--space-8) var(--space-3) var(--space-3); } }

/* shells (offers, blog): an empty grid waiting for cards, then one line and the next step */
.shell-grid:empty{ display:none; }
.shell{ display:flex; flex-direction:column; align-items:center; gap:var(--space-5); padding:var(--space-16) var(--space-6); border:1px solid var(--line); text-align:center; --align-x:center; }
.motif--shell{ width:calc(48px * 284 / 460); height:48px; }
.shell__line{ max-width:44ch; font-size:var(--text-lead); color:var(--ink-soft); line-height:var(--lh-small); }
.shell .actions{ margin:0; }
@media (max-width:767px){ .shell{ padding:var(--space-10) var(--space-5); } .shell .actions{ justify-content:center; } }

/* policies: the client's text, set for reading */
.policy__grid{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:var(--space-20); align-items:start; }
.prose{ max-width:70ch; }
.prose > * + *{ margin-block-start:var(--space-4); }
.prose h2{ margin-block-start:var(--space-12); font-size:var(--text-h3); font-weight:var(--w-medium); line-height:var(--lh-heading); }
.prose h3{ margin-block-start:var(--space-8); font-size:var(--text-lead); font-weight:var(--w-bold); color:var(--forest); line-height:var(--lh-heading); }
.prose > :first-child{ margin-block-start:0; }
.prose ul{ display:flex; flex-direction:column; gap:var(--space-3); }
.prose ul ul{ margin-block-start:var(--space-3); }
.prose li{ position:relative; padding-inline-start:var(--space-6); }
.prose ul ul li::before{ background:transparent; border:1px solid var(--gold); }
.prose strong{ font-weight:var(--w-bold); color:var(--forest); }
.policy__aside{ position:sticky; top:calc(var(--header-min) + var(--space-8)); display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); border:1px solid var(--line); }
.policy__links{ display:flex; flex-direction:column; margin-block-end:var(--space-4); }
.policy__links a{ display:inline-flex; align-items:center; min-height:40px; color:var(--forest); text-decoration:none; }
.policy__links a:hover{ color:var(--gold-ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
.policy__aside .actions{ margin:0; }
@media (max-width:991px){ .policy__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-12); } .policy__aside{ position:static; } }

/* HTML sitemap */
.sm-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-12) var(--space-8); }
.sm-col ul{ margin-block-start:var(--space-3); }
.sm-col a{ display:inline-flex; align-items:center; min-height:36px; color:var(--forest); text-decoration:none; }
.sm-col a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
@media (max-width:991px){ .sm-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* booking on inner pages: the homepage form, opened by every Book Now as a dialog under the header
   (phones keep the slide-up sheet from round 14) */
.book-dialog{ display:none; }
.sheet-title{ font-family:var(--font-display); font-size:var(--text-h3); color:var(--forest); }
.sheet-close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--forest); border-radius:var(--radius-round); }
.sheet-close:hover{ background:var(--sand); }
.sheet-close svg{ width:22px; height:22px; }
@keyframes dialog-in{ from{ opacity:0; transform:translate(-50%, -12px); } to{ opacity:1; transform:translate(-50%, 0); } }
@media (min-width:768px){
  .book-dialog.is-open{ display:block; position:fixed; z-index:calc(var(--z-drawer) + 1); top:calc(var(--header-min) + var(--space-6)); left:50%; transform:translateX(-50%);
    width:min(var(--max), calc(100% - 2 * var(--space-6))); margin:0; padding:var(--space-4) var(--space-8) var(--space-8); background:var(--surface); box-shadow:var(--shadow-md);
    animation:dialog-in 320ms var(--ease); }
  .book-dialog.is-open .sheet-head{ display:flex; align-items:center; justify-content:space-between; }
  .book-dialog.is-open .booking-bar{ padding:var(--space-4) 0 0; box-shadow:none; }
  .inner .sheet-backdrop.is-open{ display:block; position:fixed; inset:0; z-index:var(--z-drawer); background:rgba(13,25,9,.45); animation:sheet-fade 300ms var(--ease); }
  @media (prefers-reduced-motion:reduce){ .book-dialog.is-open,.inner .sheet-backdrop.is-open{ animation:none; } }
}

/* ---------- round 22c: the menu shows the page you are on with the logo's gold leaf spray AFTER its name (user).
   The link hugs its text and the leaf hangs just past it, so a long name ("Meetings & Celebrations") never wraps.
   aria-current is written by build.py: "page" on the page itself, "true" on Rooms from a room page. ---------- */
.drawer__list a[aria-current]{ position:relative; width:fit-content; }
.motif--menu{ position:absolute; left:calc(100% + var(--space-3)); top:50%; width:calc(28px * 284 / 460); height:28px; transform:translateY(-55%); }

/* =====================================================================================================
   round 23: INNER PAGES FOLLOW THE REFERENCE (nazaarahotel.com/luxe-manali inner pages), in this site's own
   type, colours, CTAs and motif. Every page opens on a full-width photo banner with the breadcrumb, the H1 and
   one line bottom-left in white; below it, the reference's section patterns.
   ===================================================================================================== */
:root{ --sand-soft:#F2EBDD; }   /* a band one step lighter than --sand, so white cards read on it (DESIGN-SYSTEM.md) */
.ratio-4x5{ aspect-ratio:4/5; }
.band-soft{ background:var(--sand-soft); }

/* ---------- the banner ---------- */
.page-hero{ position:relative; display:flex; align-items:flex-end; min-height:clamp(440px, calc(84svh - var(--header-min)), 700px);
  overflow:hidden; background:var(--forest); --focus:var(--gold-light); --focus-halo:var(--forest); }
.page-hero__media{ position:absolute; inset:0; }
.page-hero__media .ph{ height:100%; }
.page-hero__media .ph{ align-items:flex-start; padding-block-start:clamp(32px, 9svh, 96px); }
.page-hero__media .ph img{ width:min(34vw, 440px); height:auto; max-height:30svh; padding:0; }   /* the logo placeholder sits above the copy (sized by the screen, not by % padding) */
.page-hero__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(13,25,9,.88) 0%, rgba(13,25,9,.58) 34%, rgba(13,25,9,.12) 62%, rgba(13,25,9,0) 100%); }
.page-hero__copy{ position:relative; z-index:1; padding-block:var(--space-24) var(--space-16); }
.page-hero h1{ margin-block-start:var(--space-5); max-width:20ch; color:#FFFFFF; font-size:clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height:var(--lh-display); }
.page-hero__line{ margin-block-start:var(--space-5); max-width:54ch; color:rgba(255,255,255,.92); font-size:var(--text-lead); font-weight:var(--w-medium); line-height:var(--lh-small); }
.crumbs--light li,.crumbs--light [aria-current="page"]{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:rgba(255,255,255,.88); }
.crumbs--light li + li::before{ color:var(--gold-light); }
.crumbs--light a{ color:#FFFFFF; text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); text-underline-offset:4px; }
.crumbs--light a:hover{ text-decoration:underline; text-decoration-color:var(--gold-light); }
.page-hero + .widget,.chip-nav + .widget{ margin-block-start:var(--gap-widget); }
.page-hero + .widget--fill,.page-hero + .chip-nav,.chip-nav + .widget--fill{ margin-block-start:0; }
@media (max-width:767px){
  .page-hero{ min-height:clamp(420px, 74svh, 600px); }
  .page-hero__media .ph img{ width:min(62vw, 300px); }
  .page-hero__copy{ padding-block:var(--space-20) var(--space-10); }
  .page-hero h1{ font-size:clamp(2.375rem, 1.6rem + 4vw, 3rem); }
}

/* ---------- chip navigation under the banner (FAQs, gallery, venues) ---------- */
.chip-nav{ background:var(--sand); padding-block:var(--space-5); }
.chip-nav ul,.chips--nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }
.chip-nav a,.chips--nav a{ display:inline-flex; align-items:center; min-height:40px; padding-inline:var(--space-4); border:1px solid var(--line); background:var(--surface);
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--forest); text-decoration:none;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chip-nav a:hover,.chips--nav a:hover{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
.chips--nav{ margin-block-start:var(--space-8); }
.chips--nav + .x-grid{ margin-block-start:var(--gap-inner); }
@media (max-width:767px){ .chip-nav ul{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding-block-end:2px; } .chip-nav ul::-webkit-scrollbar{ display:none; } .chip-nav li{ flex:0 0 auto; } }
[id]{ scroll-margin-top:calc(var(--header-min) + var(--space-6)); }

/* ---------- text link (the reference's underlined "Explore Details") ---------- */
.text-link{ display:inline-flex; align-items:center; min-height:44px; padding-block-end:2px; font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase;
  letter-spacing:var(--track-label); color:var(--forest); text-decoration:none; background:linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition:color var(--dur) var(--ease); }
.text-link:hover{ color:var(--gold-ink); }
* + .text-link{ margin-block-start:var(--space-5); }

/* ---------- intro split: copy left, one tall photo (or the room slider) right ---------- */
.intro__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--space-20); align-items:center; }
.intro__grid--rev{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
.intro__copy,.intro__media{ min-width:0; }
.intro__copy h2{ margin-block-start:var(--space-2); }
.intro__copy .body-copy{ margin-block-start:var(--space-4); }
.intro__media--tall{ box-shadow:var(--shadow-md); }
.intro__copy .actions{ margin-block-start:var(--space-8); }
@media (max-width:991px){ .intro__grid,.intro__grid--rev{ grid-template-columns:minmax(0,1fr); gap:var(--space-10); } .intro__media--tall .ratio-4x5{ aspect-ratio:4/3; } }

/* icon + value + label strip (350 / sq. ft. · King / bed type · 4 / max guests) */
.icon-facts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-block-start:var(--space-8); padding-block-start:var(--space-6); border-top:1px solid var(--line); }
.icon-facts li{ display:flex; flex-direction:column; gap:var(--space-1); padding-inline:var(--space-5); border-left:1px solid var(--line); }
.icon-facts li:first-child{ padding-inline-start:0; border-left:0; }
.icon-facts .ic,.time-list .ic,.chips .ic,.tiles .ic,.i-card .ic,.c-group .ic,.a-card__top .ic,.x-card__name .ic{ flex:0 0 auto; width:22px; height:22px; color:var(--gold-ink); stroke-width:1.4; }
.icon-facts__v{ margin-block-start:var(--space-2); font-family:var(--font-display); font-size:var(--text-h3); font-weight:var(--w-medium); color:var(--forest); line-height:1.1; }
.icon-facts__k{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--ink-soft); }
@media (max-width:599px){ .icon-facts li{ padding-inline:var(--space-3); } .icon-facts__v{ font-size:var(--text-lead); } }

/* a list of times (dining, spa) */
.time-list{ display:flex; flex-direction:column; gap:var(--space-3); margin-block-start:var(--space-6); padding-block-start:var(--space-6); border-top:1px solid var(--line); }
.time-list li{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.time-list .ic{ align-self:center; width:20px; height:20px; }
.time-list__v{ font-weight:var(--w-bold); color:var(--forest); font-variant-numeric:tabular-nums; }
.time-list__k{ font-size:var(--text-small); color:var(--ink-soft); }

/* the room photo slider: arrows on the photo's edges */
.gal-slider{ position:relative; }
.gal-swiper{ overflow:hidden; }
.gal-slider .flank{ top:50%; }
.gal-slider .flank--prev{ left:var(--space-4); }
.gal-slider .flank--next{ right:var(--space-4); }

/* ---------- rooms list + venue rows: photo beside copy, alternating, hairlines between ---------- */
.row-card{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-16); align-items:center; }
.row-card--rev{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.row-card--rev .row-card__media{ order:2; }
.row-card__media,.row-card__copy{ min-width:0; }
.row-card__media{ display:block; }
.row-card + .row-card{ margin-block-start:var(--space-16); padding-block-start:var(--space-16); border-top:1px solid var(--line); }
.section-head + .row-card{ margin-block-start:var(--gap-inner); }
.row-card__k{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.row-card__name{ margin-block-start:var(--space-3); font-size:var(--text-h2); font-weight:400; line-height:var(--lh-heading); }
.row-card__name a{ text-decoration:none; }
.row-card__name a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:1px; text-underline-offset:8px; }
.row-card__text{ margin-block-start:var(--space-4); max-width:46ch; color:var(--ink-soft); }
.row-card__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-8); margin-block-start:var(--space-8); }
.row-card__cta .text-link{ margin:0; }
.row-card .note{ margin-block-start:var(--space-5); }
@media (hover:hover){ .row-card:hover .ph::after{ border-color:var(--card-hover-line); background-color:rgba(255,253,248,.06); } }
@media (max-width:991px){ .row-card,.row-card--rev{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .row-card--rev .row-card__media{ order:0; }
  .row-card + .row-card{ margin-block-start:var(--space-12); padding-block-start:var(--space-12); } }
@media (max-width:767px){ .row-card__cta{ gap:var(--space-3) var(--space-6); } }

/* feature chips (Lawn View, Balcony, Up to 4 Guests) */
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-block-start:var(--space-5); }
.chips:not(.chips--nav) li{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:36px; padding:var(--space-1) var(--space-3); border:1px solid var(--line); background:var(--sand-soft);
  font-size:var(--text-small); color:var(--forest); line-height:1.2; }
.chips .ic{ width:18px; height:18px; }

/* ---------- amenity tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--space-3); }
.section-head + .tiles{ margin-block-start:var(--gap-inner); }
.tiles li{ display:flex; flex-direction:column; gap:var(--space-3); min-height:120px; padding:var(--space-5) var(--space-4); background:var(--surface); border:1px solid var(--line);
  font-size:var(--text-small); color:var(--forest); line-height:var(--lh-small); }
.tiles .ic{ width:26px; height:26px; }
@media (max-width:1100px){ .tiles{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:767px){ .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } .tiles li{ min-height:104px; padding:var(--space-4) var(--space-3); } }

/* ---------- "a closer look": 2x2 photos ---------- */
.quad{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-4); }
.section-head + .quad{ margin-block-start:var(--gap-inner); }
.quad__item{ position:relative; display:block; overflow:hidden; }
@media (hover:hover){ .quad__item:hover .ph::after{ border-color:var(--card-hover-line); background-color:rgba(255,253,248,.06); } }
@media (max-width:599px){ .quad{ gap:var(--space-2); } }

/* ---------- icon cards (facilities, at a glance, menu, nearby, stay timings) ---------- */
.i-cards{ display:grid; gap:var(--space-4); }
.section-head + .i-cards{ margin-block-start:var(--gap-inner); }
.i-cards--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.i-cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.i-cards--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.i-card{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-8) var(--space-6); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.i-card .ic{ width:28px; height:28px; }
.i-card h2,.i-card h3{ font-size:var(--text-lead); font-weight:var(--w-medium); line-height:var(--lh-heading); }
.i-card p{ font-size:var(--text-small); color:var(--ink-soft); line-height:var(--lh-small); }
.i-card a{ color:var(--forest); text-decoration-color:var(--gold); text-underline-offset:3px; }
.i-card--row{ flex-direction:row; align-items:flex-start; gap:var(--space-4); }
.i-card--row > div{ display:flex; flex-direction:column; gap:var(--space-2); }
* + .actions.center-x{ justify-content:center; margin-block-start:var(--space-12); }
@media (max-width:1100px){ .i-cards--4{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:991px){ .i-cards--3,.i-cards--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599px){ .i-cards--2,.i-cards--3,.i-cards--4{ grid-template-columns:minmax(0,1fr); } .i-card{ padding:var(--space-6) var(--space-5); } }
@media (max-width:599px){ .i-cards--4{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3); } .i-cards--4 .i-card{ padding:var(--space-5) var(--space-4); }
  .i-cards--4 .i-card h2{ font-size:var(--text-body); } }   /* facilities: two across on phones, like the reference's card grids */

/* ---------- the other-rooms carousel ---------- */
.o-swiper{ overflow:hidden; }
.section-head + .card-carousel{ margin-block-start:var(--gap-inner); }
.o-card{ display:flex; flex-direction:column; height:auto; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.o-card__media{ position:relative; display:block; }
.o-card__badge{ position:absolute; left:var(--space-4); top:var(--space-4); padding:var(--space-1) var(--space-3); background:var(--surface);
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--forest); }
.o-card__body{ display:flex; flex-direction:column; flex:1; padding:var(--space-6); }
.o-card__name{ font-size:var(--text-h3); font-weight:var(--w-medium); }
.o-card__name a{ text-decoration:none; }
.o-card__text{ margin-block-start:var(--space-2); font-size:var(--text-small); color:var(--ink-soft); line-height:var(--lh-small); }
.o-card .row-card__cta{ margin-block-start:auto; padding-block-start:var(--space-6); gap:var(--space-3) var(--space-5); }
.carousel-dots{ display:flex; justify-content:center; margin-block-start:var(--space-6); }
.carousel-dots .swiper-pagination-bullet{ position:relative; width:28px; height:28px; margin:0 !important; background:transparent; opacity:1; border-radius:0; }
.carousel-dots .swiper-pagination-bullet::before{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%);
  border:1.5px solid var(--forest); transition:background-color var(--dur) var(--ease), width var(--dur) var(--ease); }
.carousel-dots .swiper-pagination-bullet-active::before{ width:22px; border-radius:4px; background:var(--gold); border-color:var(--gold); }
.carousel-dots .swiper-pagination-lock{ display:none; }

/* ---------- experiences ---------- */
.x-card__name{ display:flex; align-items:center; gap:var(--space-3); }

/* ---------- attractions ---------- */
.a-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--space-8); }
.section-head + .a-grid{ margin-block-start:var(--gap-inner); }
.a-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.a-card__body{ display:flex; flex-direction:column; flex:1; padding:var(--space-6); }
.a-card__top{ display:flex; align-items:center; gap:var(--space-3); }
.badge{ display:inline-flex; align-items:center; min-height:26px; padding:0 var(--space-2); background:var(--sand);
  font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--forest); }
.a-card__name{ margin-block-start:var(--space-4); font-size:var(--text-h3); font-weight:var(--w-medium); }
.a-card__text{ margin-block-start:var(--space-2); font-size:var(--text-small); color:var(--ink-soft); }
.a-card .text-link{ margin-block-start:auto; padding-block-start:var(--space-4); align-self:flex-start; }
.i-card .a-card__top + h3{ margin-block-start:var(--space-1); }
@media (max-width:991px){ .a-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:599px){ .a-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-5); } }

/* ---------- location: the getting-here timeline + the location card ---------- */
.tl{ position:relative; display:flex; flex-direction:column; gap:var(--space-8); margin:var(--space-8) 0 0; padding:0; list-style:none; }
.tl::before{ content:""; position:absolute; left:19px; top:var(--space-6); bottom:var(--space-6); width:1px; background:var(--line); }
.tl__item{ position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--space-4); }
.tl__icon{ width:40px; height:40px; padding:var(--space-2); border-radius:var(--radius-round); background:var(--forest); color:var(--on-dark); stroke-width:1.4; }
.tl__title{ font-size:var(--text-lead); font-weight:var(--w-bold); line-height:40px; }
.tl__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-1) var(--space-4); padding-block:var(--space-2); border-bottom:1px solid var(--line); color:var(--ink-soft); }
.tl__row span:first-child{ color:var(--forest); font-weight:var(--w-medium); }
.tl__row span:last-child{ font-variant-numeric:tabular-nums; }
.loc-card{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md); min-width:0; }
.loc-card__body{ padding:var(--space-8); }
.loc-card h3{ font-size:var(--text-h3); font-weight:var(--w-medium); }
.loc-card .location__address{ margin-block-start:var(--space-3); color:var(--ink-soft); font-weight:var(--w-regular); }
.loc-card .facts{ margin-block-start:var(--space-5); }
@media (max-width:599px){ .loc-card__body{ padding:var(--space-6) var(--space-5); } }

/* ---------- contact ---------- */
.c-visit{ min-width:0; }
.c-visit__title{ margin-block-start:var(--space-6); font-size:var(--text-h3); font-weight:var(--w-medium); }
.c-visit .location__address{ margin-block-start:var(--space-2); color:var(--ink-soft); font-weight:var(--w-regular); }
.c-panel{ min-width:0; padding:var(--space-10); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md); }
.c-panel h2{ font-size:var(--text-h3); font-weight:var(--w-medium); }
.c-group{ margin-block-start:var(--space-6); padding-block-start:var(--space-5); border-top:1px solid var(--line); }
.c-group__title{ font-family:var(--font-body); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
.c-group ul{ margin-block-start:var(--space-2); }
.c-group li{ display:flex; align-items:center; gap:var(--space-3); }
.c-group .ic{ width:18px; height:18px; }
.c-group a{ display:inline-flex; align-items:center; min-height:40px; color:var(--forest); font-weight:var(--w-medium); text-decoration:none; overflow-wrap:anywhere; }
.c-group a:hover{ color:var(--gold-ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
@media (max-width:599px){ .c-panel{ padding:var(--space-6) var(--space-5); } }

/* ---------- FAQs: white question cards with a plus box (the reference), grouped under labels ---------- */
.faq-wrap{ max-width:56rem; margin-inline:auto; }
.faq__title{ margin-block-start:var(--space-2); font-size:var(--text-h2); font-weight:400; }
.faq{ margin-block-start:var(--space-6); border-top:0; display:flex; flex-direction:column; gap:var(--space-3); }
.faq__item{ border:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); }
.faq__item summary{ padding:var(--space-4) var(--space-16) var(--space-4) var(--space-6); }
.faq__item summary::after{ content:none; }
.faq__pm{ position:absolute; right:var(--space-5); top:50%; width:28px; height:28px; margin-top:-14px; border:1px solid var(--line); }
.faq__pm::before,.faq__pm::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--gold-ink); transform:translate(-50%,-50%); transition:transform var(--dur) var(--ease); }
.faq__pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__pm::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq__a{ padding:0 var(--space-6) var(--space-5); }
@media (prefers-reduced-motion:reduce){ .faq__pm::before,.faq__pm::after{ transition:none; } }
@media (max-width:599px){ .faq__item summary{ padding:var(--space-4) var(--space-12) var(--space-4) var(--space-4); font-size:var(--text-body); } .faq__pm{ right:var(--space-3); } .faq__a{ padding:0 var(--space-4) var(--space-4); } }

/* ---------- gallery: per group, one lead photo over two rows, then a grid of three ---------- */
.g-group{ scroll-margin-top:calc(var(--header-min) + var(--space-6)); }
.g-title{ display:flex; align-items:center; gap:var(--space-4); font-size:var(--text-h3); }
.g-title::after{ content:""; flex:1; height:1px; background:var(--line); }
.photo-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.photo--lead{ grid-column:span 2; grid-row:span 2; }
.photo--lead .ph{ height:100%; aspect-ratio:auto; }
@media (max-width:767px){ .photo--lead{ grid-column:1 / -1; grid-row:auto; } .photo--lead .ph{ aspect-ratio:4/3; } }

/* the shells keep the page's rhythm */
.shell-grid:empty + .shell{ margin-block-start:0; }

/* ---------- round 24 (user): better icons -- Lucide's line set (src/icons.json) at one weight sitewide; the location page
   leads with a Google map of the resort's address instead of a photograph ---------- */
.ic,.fac svg{ stroke-width:1.5; }
.map-embed{ position:relative; aspect-ratio:4/3; background:var(--sand); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:599px){ .map-embed{ aspect-ratio:1/1; } }

/* =====================================================================================================
   round 25 (user): Weddings and Meetings & Celebrations each get their own content AND their own way of
   showing it; every section carries a CTA; a lead form closes Weddings, Meetings & Celebrations and Contact Us.
   ===================================================================================================== */
:root{ --error:#9B2C1F; }   /* form error text on white: 7.3:1 */

/* ---------- weddings: the celebrations carousel (portrait cards, the copy over the photo) ---------- */
.fn-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-6); }
.fn-nav{ display:flex; gap:var(--space-3); }
.fn-nav .flank{ position:static; margin:0; }
.fn-head + .card-carousel{ margin-block-start:var(--gap-inner); }
.fn-card{ position:relative; overflow:hidden; height:auto; }
.fn-card .ph img{ padding:12% 18% 56%; }
.fn-card__body{ position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-16) var(--space-6) var(--space-6);
  background:linear-gradient(to top, rgba(13,25,9,.92) 0%, rgba(13,25,9,.72) 55%, rgba(13,25,9,0) 100%); color:#FFFFFF; }
.fn-card__k{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-light); }
.fn-card__k .ic{ width:18px; height:18px; color:var(--gold-light); }
.fn-card__name{ color:#FFFFFF; font-size:var(--text-h3); }
.fn-card__text{ font-size:var(--text-small); line-height:var(--lh-small); color:rgba(255,255,255,.9); }
.fn-card .text-link{ margin-block-start:var(--space-2); align-self:flex-start; }
.text-link--light{ color:#FFFFFF; background-image:linear-gradient(var(--gold-light), var(--gold-light)); }
.text-link--light:hover{ color:var(--gold-light); }
.fn-card{ --focus:var(--gold-light); --focus-halo:var(--forest); }
@media (max-width:767px){ .fn-nav{ display:none; } }

/* ---------- weddings: venue cards -- one lead venue across the top, then two by two ---------- */
.wv-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-8); }
.section-head + .wv-grid{ margin-block-start:var(--gap-inner); }
.wv-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--header-min) + var(--space-6)); }
.wv-card__body{ display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:var(--space-8); }
.wv-card__name{ font-size:var(--text-h2); font-weight:400; }
.wv-card__best{ margin-block:var(--space-5) var(--space-6); color:var(--ink-soft); }
.wv-card__best .note__k{ display:block; margin-block-end:var(--space-1); }
.wv-card .btn{ margin-block-start:auto; }
.wv-card--lead{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.wv-card--lead .wv-card__body{ justify-content:center; padding:var(--space-12); }
.wv-card--lead .wv-card__media .ph{ height:100%; }
@media (max-width:991px){ .wv-grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .wv-card--lead{ grid-template-columns:minmax(0,1fr); } .wv-card--lead .wv-card__body{ padding:var(--space-8); } }
@media (max-width:599px){ .wv-card__body,.wv-card--lead .wv-card__body{ padding:var(--space-6) var(--space-5); } }

/* ---------- meetings: the comparison table (cards on phones) ---------- */
.cmp-wrap{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.section-head + .cmp-wrap{ margin-block-start:var(--gap-inner); }
.cmp{ width:100%; }
.cmp th,.cmp td{ padding:var(--space-4) var(--space-5); text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp thead th{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); background:var(--sand-soft); }
.cmp tbody th{ font-family:var(--font-display); font-size:var(--text-lead); font-weight:var(--w-medium); color:var(--forest); white-space:nowrap; }
.cmp td{ font-size:var(--text-small); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.cmp .cmp__cta{ text-align:right; }
.cmp .text-link{ margin:0; }
.cmp__note{ margin-block-start:var(--space-4); font-size:var(--text-small); color:var(--ink-soft); text-align:center; }
@media (max-width:899px){
  .cmp-wrap{ background:none; border:0; box-shadow:none; }
  .cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{ display:block; }
  .cmp tbody{ display:grid; gap:var(--space-4); }
  .cmp tr{ padding:var(--space-5); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .cmp th,.cmp td{ padding:var(--space-2) 0; border-bottom:1px solid var(--line); }
  .cmp tbody tr:last-child td{ border-bottom:1px solid var(--line); }
  .cmp td[data-label]{ display:flex; justify-content:space-between; gap:var(--space-4); }
  .cmp td[data-label]::before{ content:attr(data-label); flex:0 0 auto; font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); }
  .cmp td[data-label] { text-align:right; }
  .cmp .cmp__cta,.cmp tbody tr:last-child .cmp__cta{ border-bottom:0; text-align:left; padding-block-end:0; }
}

/* ---------- meetings: the venue explorer (names on the left, the chosen venue on the right) ---------- */
.mt{ display:grid; grid-template-columns:minmax(220px, 3fr) minmax(0,9fr); gap:var(--space-12); align-items:start; }
.section-head + .mt{ margin-block-start:var(--gap-inner); }
.mt-list{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
.mt-list [role="tab"]{ display:flex; align-items:center; min-height:56px; padding-inline:var(--space-5); margin-left:-1px; border-left:3px solid transparent; text-align:left;
  font-family:var(--font-display); font-size:var(--text-lead); color:var(--ink-soft); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mt-list [role="tab"]:hover{ color:var(--forest); }
.mt-list [aria-selected="true"]{ color:var(--forest); border-left-color:var(--gold); font-weight:var(--w-medium); }
.mt-panel{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--space-10); align-items:start; animation:venue-in var(--dur) var(--ease); }
.mt-panel__media,.mt-panel__copy{ min-width:0; }
.mt-panel__name{ font-size:var(--text-h2); font-weight:400; }
.mt-panel__name + .body-copy{ margin-block-start:var(--space-3); }
.mt-panel .facts{ margin-block-start:var(--space-5); }
.mt-panel__k{ margin-block-start:var(--space-5); }
.setups{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-block-start:var(--space-2); }
.setups li{ padding:var(--space-1) var(--space-3); border:1px solid var(--line); background:var(--sand-soft); font-size:var(--text-small); color:var(--forest); }
.mt-panel .actions{ margin-block-start:var(--space-8); }
@media (prefers-reduced-motion:reduce){ .mt-panel{ animation:none; } }
@media (max-width:1100px){ .mt-panel{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); } }
@media (max-width:767px){
  .mt{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .mt-list{ flex-direction:row; overflow-x:auto; border-left:0; border-bottom:1px solid var(--line); scrollbar-width:none; }
  .mt-list::-webkit-scrollbar{ display:none; }
  .mt-list [role="tab"]{ flex:0 0 auto; min-height:var(--tap); padding-inline:var(--space-3); margin:0 0 -1px; border-left:0; border-bottom:2px solid transparent;
    font-family:var(--font-body); font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); }
  .mt-list [aria-selected="true"]{ border-bottom-color:var(--gold); }
}

/* ---------- the lead form, on the forest band at the foot of the page ---------- */
.lead{ background:var(--forest); }
.lead__grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--space-16); align-items:start; }
.lead__copy h2 em{ color:var(--gold-light); }
.lead__copy .line{ margin-block-start:var(--space-4); }
.lead__direct{ display:flex; flex-direction:column; gap:var(--space-4); margin-block-start:var(--space-10); padding-block-start:var(--space-8); border-top:1px solid var(--line-dark); }
.lead__direct li{ display:flex; align-items:flex-start; gap:var(--space-3); }
.lead__direct .ic{ flex:0 0 auto; width:20px; height:20px; margin-block-start:var(--space-1); color:var(--gold-light); }
.lead__direct li > span{ display:flex; flex-direction:column; }
.lead__k{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--on-dark-soft); }
.lead__direct a{ display:inline-flex; align-items:center; min-height:32px; color:#FFFFFF; text-decoration:none; overflow-wrap:anywhere; }
.lead__direct a:hover{ color:var(--gold-light); text-decoration:underline; text-underline-offset:4px; }
.lf{ padding:var(--space-10); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-md); --focus:var(--forest); --focus-halo:var(--surface); }
.lf__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-5) var(--space-6); }
.lf__field{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; margin:0; padding:0; border:0; }
.lf__field--wide{ grid-column:1 / -1; }
.lf label,.lf legend{ font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); line-height:var(--lh-small); }
.lf legend{ padding:0; margin-block-end:var(--space-2); }
.lf__req{ color:var(--error); }
.lf input:not([type="checkbox"]),.lf select,.lf textarea{ width:100%; min-height:48px; padding:var(--space-2) var(--space-3); border:1px solid rgba(21,38,15,.3); border-radius:0; background:#FFFFFF;
  color:var(--forest); font-family:var(--font-body); font-size:var(--text-body); font-weight:var(--w-regular); transition:border-color var(--dur) var(--ease); }
.lf textarea{ min-height:120px; resize:vertical; line-height:var(--lh-small); }
.lf select{ appearance:none; padding-inline-end:var(--space-10); cursor:pointer;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315260F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.lf input:hover,.lf select:hover,.lf textarea:hover{ border-color:var(--forest); }
.lf input::placeholder,.lf textarea::placeholder{ color:#6B7465; }
.lf .is-invalid input,.lf .is-invalid select,.lf .is-invalid textarea,.lf [aria-invalid="true"]{ border-color:var(--error); }
.lf__err{ min-height:0; font-size:var(--text-small); color:var(--error); line-height:var(--lh-small); }
.lf__err:empty{ display:none; }
.lf__hint{ font-size:var(--text-small); color:var(--ink-soft); }
.lf__chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.lf__chip{ position:relative; display:inline-flex; cursor:pointer; text-transform:none !important; letter-spacing:0 !important; }
.lf__chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.lf__chip span{ display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--space-4); border:1px solid rgba(21,38,15,.3); background:#FFFFFF;
  font-family:var(--font-body); font-size:var(--text-small); font-weight:var(--w-medium); color:var(--forest); transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.lf__chip:hover span{ border-color:var(--forest); }
.lf__chip input:checked + span{ background:var(--forest); border-color:var(--forest); color:#FFFFFF; }
.lf__chip input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:2px; }
.lf__check{ display:flex; align-items:flex-start; gap:var(--space-3); cursor:pointer; text-transform:none !important; letter-spacing:0 !important;
  font-size:var(--text-small) !important; font-weight:var(--w-regular) !important; color:var(--ink) !important; }
.lf__check input{ flex:0 0 auto; width:20px; height:20px; margin:2px 0 0; accent-color:var(--forest); }
.lf__check a{ color:var(--forest); text-decoration-color:var(--gold); text-underline-offset:3px; }
.lf__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-block-start:var(--space-8); }
.lf__note{ font-size:var(--text-small); color:var(--ink-soft); }
.lf__status{ margin-block-start:var(--space-5); padding:var(--space-4) var(--space-5); font-size:var(--text-small); line-height:var(--lh-small); border-left:3px solid var(--gold); background:var(--sand-soft); color:var(--forest); }
.lf__status.is-error{ border-left-color:var(--error); color:var(--error); }
@media (max-width:991px){ .lead__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-10); } .lead__direct{ margin-block-start:var(--space-6); padding-block-start:var(--space-6); } }
@media (max-width:599px){ .lf{ padding:var(--space-6) var(--space-5); } .lf__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-4); } .lf__foot .btn{ width:100%; } }

/* ---------- round 26 (user): in the split intros the tall photo (or the room slider) is exactly as tall as the copy beside it,
   instead of a fixed 4:5 frame that ran past the screen. The frame takes the row's height and adds none of its own. ---------- */
@media (min-width:992px){
  .intro__grid:has(> .intro__media--tall){ align-items:stretch; }
  .intro__grid:has(> .intro__media--tall) > .intro__copy{ align-self:center; }
  .intro__media--tall{ position:relative; min-height:360px; }
  .intro__media--tall > .ph,.intro__media--tall > .gal-slider{ position:absolute; inset:0; height:100%; }
  .intro__media--tall > .ph,.intro__media--tall .ph{ aspect-ratio:auto; }
  .intro__media--tall .gal-swiper,.intro__media--tall .swiper-wrapper,.intro__media--tall .swiper-slide,.intro__media--tall .swiper-slide .ph{ height:100%; }
}

/* ---------- round 27 (user): the map card shows only the map; the address, stay times and directions sit under the
   getting-here timeline as its last stop. On desktop the map runs the full height of that column. ---------- */
.loc-addr{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--space-4); margin-block-start:var(--space-10); padding-block-start:var(--space-8); border-top:1px solid var(--line); }
.loc-addr__text{ margin-block-start:var(--space-2); color:var(--ink-soft); line-height:var(--lh-small); }
.loc-addr__times{ display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-6); margin-block-start:var(--space-3); font-size:var(--text-small); font-weight:var(--w-bold); color:var(--forest); }
.loc-addr .text-link{ margin-block-start:var(--space-3); }
.loc-map{ min-width:0; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md); }
@media (min-width:992px){
  /* round 30 (user): the map is one screen tall (the window under the header, less a small margin) and stays in view
     while the getting-here column beside it scrolls */
  .loc-grid{ align-items:start; }
  .loc-map{ position:sticky; top:calc(var(--header-min) + var(--space-6)); height:calc(100svh - var(--header-min) - var(--space-12)); min-height:420px; }
  .loc-map .map-embed{ position:absolute; inset:0; aspect-ratio:auto; }
}

/* ---------- round 28 (user): the General Manager has a card like the founders -- four across on wide screens,
   two by two on tablets, one column on phones ---------- */
.people:has(> .person:nth-child(4)){ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1199px){ .people:has(> .person:nth-child(4)){ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-10) var(--space-8); } }
@media (max-width:767px){ .people:has(> .person:nth-child(4)){ grid-template-columns:minmax(0,1fr); } }

/* ---------- round 29 (user, phones only): long stacks become swipe carousels with round dots, and their slides sit lower.
   Facilities: 4 cards (2x2) per slide. Meetings: one venue card per slide (the table stays on wider screens).
   Weddings venues and each Gallery group: one per slide, with a shorter photo. ---------- */
.fac-page{ display:contents; }
.cmp-cards{ display:none; }
@media (max-width:767px){
  .fac-swipe.is-swipe .fac-pages,.wv-swipe.is-swipe .wv-grid,.g-swipe.is-swipe .photo-grid,.cmp-cards.is-swipe .cmp-track{ display:flex; gap:0; grid-template-columns:none; }
  .fac-swipe.is-swipe .fac-page{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:1fr; gap:var(--space-3); align-content:start; margin:0; padding:0; list-style:none; flex-shrink:0; }
  .fac-swipe.is-swipe .i-card{ min-height:0; }
  .is-swipe > .swipe-track > .swipe-item{ flex-shrink:0; height:auto; }

  /* meetings: venue cards */
  .cmp-wrap{ display:none; }
  .cmp-cards{ display:block; }
  .section-head + .cmp-wrap + .cmp-cards{ margin-block-start:var(--space-12); }
  .cmp-card{ box-sizing:border-box; padding:var(--space-5); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .cmp-card__name{ font-size:var(--text-h3); font-weight:var(--w-medium); margin-block-end:var(--space-2); }
  .cmp-card__row{ display:flex; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-2); border-bottom:1px solid var(--line); font-size:var(--text-small); color:var(--ink-soft); text-align:right; }
  .cmp-card__row span:first-child{ flex:0 0 auto; font-size:var(--text-label); font-weight:var(--w-bold); text-transform:uppercase; letter-spacing:var(--track-label); color:var(--gold-ink); text-align:left; }
  .cmp-card .text-link{ margin-block-start:var(--space-2); }

  /* weddings: shorter venue slides */
  .wv-swipe.is-swipe .wv-card--lead{ display:flex; grid-column:auto; }
  .wv-swipe .wv-card__media .ph,.wv-swipe .wv-card--lead .wv-card__media .ph{ aspect-ratio:2 / 1; height:auto; }
  .wv-swipe .wv-card__media .ph img{ padding:8% 28%; }
  .wv-swipe .wv-card__body,.wv-swipe .wv-card--lead .wv-card__body{ padding:var(--space-5); }
  .wv-swipe .wv-card__name{ font-size:var(--text-h3); }
  .wv-swipe .chips{ margin-block-start:var(--space-3); }
  .wv-swipe .chips li{ min-height:30px; font-size:var(--text-label); }
  .wv-swipe .wv-card__best{ margin-block:var(--space-3) var(--space-4); font-size:var(--text-small); }

  /* gallery: shorter photos, one per slide */
  .g-swipe.is-swipe .photo,.g-swipe.is-swipe .photo--lead{ grid-column:auto; grid-row:auto; }
  .g-swipe .photo .ph,.g-swipe .photo--lead .ph{ aspect-ratio:3 / 2; height:auto; }
  .g-group .g-swipe{ margin-block-start:var(--space-4); }
  .g-swipe .photo-grid{ margin:0; }
}

/* =====================================================================================================
   round 31 (user)
   ===================================================================================================== */
/* 1. phones: the logo sits in the middle of the space between the menu icon and Book Now, so both gaps match
   (centred on the page it read as pushed right, because Book Now is far wider than the menu icon) */
@media (max-width:767px){
  .site-header__in{ grid-template-columns:auto minmax(0,1fr) auto; }
  .brand{ justify-self:center; }
}

/* 2. the chip bar under the banner (Gallery, FAQs) stays pinned under the header while the page scrolls; the chip for the
   group on screen is filled; jump links land below both bars */
:root{ --chipnav-h:80px; }
.chip-nav{ position:sticky; top:calc(var(--header-min) + 1px);   /* the header is its min height plus a 1px bottom border */ z-index:calc(var(--z-header) - 1); border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.chip-nav.is-stuck{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.chip-nav a[aria-current="true"]{ background:var(--forest); border-color:var(--forest); color:#FFFFFF; }
.g-group,.faq__group{ scroll-margin-top:calc(var(--header-min) + var(--chipnav-h) + var(--space-6)); }

/* 3. meetings: the venue names across the top as one tab bar; a large photo beside lighter copy */
.mt{ display:block; }
.mt-list{ flex-direction:row; justify-content:center; flex-wrap:wrap; gap:0 var(--space-8); border-left:0; border-bottom:1px solid var(--line); }
.mt-list [role="tab"]{ min-height:56px; padding-inline:0; margin:0 0 -1px; border-left:0; border-bottom:2px solid transparent; }
.mt-list [aria-selected="true"]{ border-bottom-color:var(--gold); }
.mt-panels{ margin-block-start:var(--space-12); }
.mt-panel{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-16); align-items:stretch; }
.mt-panel__copy{ align-self:center; }
.mt-panel__media{ position:relative; min-height:420px; box-shadow:var(--shadow-md); }
.mt-panel__media .ph{ position:absolute; inset:0; height:100%; aspect-ratio:auto; }
.mt-panel .icon-facts{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin-block-start:var(--space-6); }
.mt-panel .icon-facts__v{ font-size:var(--text-lead); }
.mt-panel .actions{ margin-block-start:var(--space-6); }
@media (max-width:1100px){ .mt-panel{ grid-template-columns:minmax(0,1fr); gap:var(--space-8); } .mt-panel__media{ min-height:0; } .mt-panel__media .ph{ position:static; aspect-ratio:16 / 9; } }
@media (max-width:767px){
  .mt-list{ flex-wrap:nowrap; justify-content:flex-start; gap:0 var(--space-5); }
  .mt-panels{ margin-block-start:var(--space-6); }
  .mt-panel__media .ph{ aspect-ratio:4 / 3; }
}

/* ---------- 29 Oct: real CDN photos. A .ph that carries ph--photo fills its frame edge to edge;
   the logo placeholders (no modifier) keep their contain + padding rules above. ---------- */
.ph--photo img,.hero .ph--photo img,.bento__item .ph--photo img,.photo .ph--photo img,.page-hero__media .ph--photo img,
.page-banner .ph--photo img,.fn-card .ph--photo img,.wv-swipe .wv-card__media .ph--photo img{
  width:100%; height:100%; max-width:none; max-height:none; padding:0; object-fit:cover; }
.page-hero__media .ph--photo{ align-items:stretch; padding-block-start:0; }

/* == remarketing-nudge == "Get these prices emailed to you!" (namespaced .pi-)
   THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value from the
   target site's own CSS (SKILL.md STEP 3); the structure below is proven on The Hans
   Hotels (Sep 2026) and stays as-is. Scoped to .pi-modal — no :root pollution.

   This is the only true modal on most sites: it takes the whole screen and locks body
   scroll, so nothing else may paint above it except a skip link. Set --rmn-z above the
   site's drawer/cookie notice and below its skip link. */
.pi-modal {
  /* ---- design tokens: fill from the target site ---- */
  --rmn-z: 390;                                   /* above drawer + cookie notice, below skip link */
  --rmn-backdrop: rgba(13, 25, 9, .62);           /* site's dark ink at ~.6 alpha */
  --rmn-surface: var(--forest, #15260F);                          /* panel: the site's dark band / footer colour */
  --rmn-shadow: var(--shadow-md, 0 18px 48px rgba(13, 25, 9, .14));
  --rmn-ink: var(--on-dark, #F6F1E7);                              /* title + success title on --rmn-surface (AA >= 4.5:1) */
  --rmn-muted: var(--on-dark-soft, #C9CFBF);                            /* note, success sub-line, error (AA >= 4.5:1 on surface) */
  --rmn-accent: var(--gold-light, #D8B866);                           /* property name on success, focus ring */
  --rmn-field-bg: var(--surface, #FFFDF8);
  --rmn-field-ink: var(--ink, #22301C);
  --rmn-field-placeholder: #6B7465;                /* AA >= 4.5:1 on --rmn-field-bg */
  --rmn-cta-bg: var(--gold, #B08420);                           /* site's primary booking CTA background */
  --rmn-cta-ink: var(--forest-deep, #0D1909);                          /* CTA label — AA >= 4.5:1 vs --rmn-cta-bg */
  --rmn-cta-hover: var(--gold-light, #D8B866);
  --rmn-close-bg: rgba(255, 255, 255, .10);
  --rmn-close-hover: rgba(255, 255, 255, .22);
  --rmn-font-display: var(--font-display, "Cormorant Garamond", Georgia, serif);          /* site heading font */
  --rmn-font-body: var(--font-body, "Cormorant Garamond", Georgia, serif); /* site body font */
  --rmn-font-cta: var(--rmn-font-body);                               /* site button font */
  --rmn-display-weight: 400;                       /* match the site's heading weight (serif display faces are often 400) */
  --rmn-cta-transform: uppercase;                       /* match the site's button typography */
  --rmn-cta-tracking: .16em;
  --rmn-radius: 0;                                 /* panel corners — match the site's cards */
  --rmn-field-radius: var(--radius-1, 2px);                           /* input + button corners — match the site's forms */
  --rmn-t: var(--dur, 320ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));         /* site's transition token */
  /* ---- end tokens ---- */

  position: fixed; inset: 0; z-index: var(--rmn-z); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.pi-modal.show { display: flex; }
.pi-backdrop { position: absolute; inset: 0; background: var(--rmn-backdrop);
  opacity: 0; transition: opacity var(--rmn-t); }
.pi-modal.in .pi-backdrop { opacity: 1; }

/* A dark card reads as an offer rather than an error, and the CTA carries all the
   contrast it needs against it. */
.pi-panel { position: relative; z-index: 1; width: min(460px, 100%);
  background: var(--rmn-surface); box-shadow: var(--rmn-shadow); border-radius: var(--rmn-radius);
  padding: 44px 44px 34px; text-align: center;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--rmn-t), transform var(--rmn-t); }
.pi-modal.in .pi-panel { opacity: 1; transform: none; }

.pi-view { display: flex; flex-direction: column; align-items: stretch; }

.pi-title { font-family: var(--rmn-font-display); font-size: 1.95rem; font-weight: var(--rmn-display-weight); line-height: 1.18;
  color: var(--rmn-ink); margin: 0 0 26px; }

.pi-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* 17px keeps iOS from zooming the viewport when the field takes focus. */
.pi-field { width: 100%; min-height: 52px; padding: 14px 18px; box-sizing: border-box;
  background: var(--rmn-field-bg); color: var(--rmn-field-ink); border: 1px solid transparent;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-body); font-size: 17px; line-height: 1.4; }
.pi-field::placeholder { color: var(--rmn-field-placeholder); }
.pi-field:focus-visible { outline: 2px solid var(--rmn-accent); outline-offset: 2px; }

.pi-error[hidden] { display: none; }
/* Muted accent, not red: it has to clear 4.5:1 on the dark surface, which a warning
   red does not. The role="alert" is what carries the urgency. */
.pi-error { font-family: var(--rmn-font-body); font-size: .78rem; line-height: 1.4;
  color: var(--rmn-muted); text-align: left; margin: -4px 0 0; }

.pi-submit { width: 100%; min-height: 52px; padding: 14px 22px;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); border: none; cursor: pointer;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .95rem;
  text-transform: var(--rmn-cta-transform); letter-spacing: var(--rmn-cta-tracking);
  transition: background var(--rmn-t); }
.pi-submit:hover, .pi-submit:focus-visible { background: var(--rmn-cta-hover); }

.pi-note { font-family: var(--rmn-font-body); font-size: .8rem; line-height: 1.4;
  color: var(--rmn-muted); margin: 16px 0 0; }

/* 44px hit area, small glyph. */
.pi-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--rmn-close-bg); border: none; border-radius: 50%;
  color: var(--rmn-ink); cursor: pointer; transition: background var(--rmn-t); }
.pi-close:hover, .pi-close:focus-visible { background: var(--rmn-close-hover); }
.pi-close svg { width: 14px; height: 14px; }

/* ---- success view ---- */
.pi-success { align-items: center; gap: 0; }
.pi-success-icon { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 0 18px; border-radius: 50%;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); }
.pi-success-icon svg { width: 22px; height: 22px; }
.pi-success-title { font-family: var(--rmn-font-display); font-size: 1.7rem; font-weight: var(--rmn-display-weight);
  line-height: 1.2; color: var(--rmn-ink); margin: 0 0 10px; }
.pi-success-sub { font-family: var(--rmn-font-body); font-size: .82rem; line-height: 1.5;
  color: var(--rmn-muted); margin: 0 0 6px; }
.pi-success-prop { font-family: var(--rmn-font-display); font-size: 1.22rem; font-weight: var(--rmn-display-weight);
  line-height: 1.25; color: var(--rmn-accent); margin: 0 0 24px; }
.pi-success-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 22px; box-sizing: border-box;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); text-decoration: none;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .72rem; letter-spacing: 1.6px;
  text-transform: uppercase; transition: background var(--rmn-t); }
.pi-success-cta:hover, .pi-success-cta:focus-visible { background: var(--rmn-cta-hover); color: var(--rmn-cta-ink); }
.pi-success-cta svg { width: 14px; height: 14px; transition: transform var(--rmn-t); }
.pi-success-cta:hover svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .pi-modal { padding: 16px; }
  .pi-panel { padding: 38px 24px 28px; }
  .pi-title { font-size: 1.6rem; }
  .pi-success-title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-panel { transform: none; transition: opacity .3s; }
  .pi-backdrop { transition: opacity .3s; }
  .pi-submit, .pi-close, .pi-success-cta, .pi-success-cta svg { transition: none; }
  .pi-success-cta:hover svg { transform: none; }
}
/* == /remarketing-nudge == */

/* == continue-booking-nudge == */
/* Continue-booking nudge — structural CSS with design tokens.
   THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value
   from the target site's own CSS (see SKILL.md STEP 2); the structure below
   is proven and stays as-is. Scoped to .booking-nudge — no :root pollution. */

.booking-nudge {
  /* ---- design tokens: fill from the target site ---- */
  --cbn-surface: var(--surface, #FFFDF8);            /* card/panel background */
  --cbn-border: rgba(21, 38, 15, .18);
  --cbn-ink: var(--ink, #22301C);                /* heading text */
  --cbn-muted: var(--ink-soft, #4E5A47);              /* secondary text */
  --cbn-accent: var(--gold-ink, #7E5E12);             /* brand accent: property name, price */
  --cbn-accent-2: var(--gold-light, #D8B866);           /* second accent for the top strip */
  --cbn-cta-bg: var(--gold, #B08420);             /* CTA button background */
  --cbn-cta-ink: var(--forest-deep, #0D1909);            /* CTA label — AA >= 4.5:1 vs --cbn-cta-bg */
  --cbn-cta-hover: var(--gold-light, #D8B866);
  --cbn-font-display: var(--font-display, "Cormorant Garamond", Georgia, serif);         /* site heading font stack */
  --cbn-font-body: var(--font-body, "Cormorant Garamond", Georgia, serif); /* site body font stack */
  --cbn-radius: 0;                /* match the site's card radius */
  --cbn-cta-radius: var(--radius-1, 2px);             /* match the site's button radius */
  --cbn-cta-transform: uppercase;    /* match the site's button typography */
  --cbn-cta-tracking: .16em;
  --cbn-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  /* ---- end tokens ---- */

  overflow: hidden;
  background: var(--cbn-surface);
  border: 1px solid var(--cbn-border);
  border-radius: var(--cbn-radius);
  box-shadow: 0 20px 60px -16px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .06);
  display: none;
  opacity: 0;
  position: fixed;
  right: 24px;
  top: 104px; /* just under the 88px header; the homepage hero is viewport-tall with the booking bar at its foot */ /* adjust so it never covers the site's booking bar / header CTAs */
  transform: translateY(-20px);
  transition: transform .45s var(--cbn-ease), opacity .45s var(--cbn-ease);
  width: min(380px, calc(100vw - 48px));
  z-index: 250; /* above page chrome, below any cookie-consent overlay */
}
.booking-nudge.show { display: block; }
.booking-nudge.in { opacity: 1; transform: translateY(0); }

.bn-accent { background: linear-gradient(90deg, var(--cbn-accent), var(--cbn-accent-2)); height: 3px; left: 0; position: absolute; right: 0; top: 0; }

.bn-header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; padding: 20px 24px 0; }
.bn-name { color: var(--cbn-ink); font-family: var(--cbn-font-display); font-size: 22px; font-weight: 400; letter-spacing: .01em; line-height: 1.25; }
.bn-close { align-items: center; background: transparent; border: 1px solid var(--cbn-border); border-radius: 50%; color: var(--cbn-muted); cursor: pointer; display: flex; flex-shrink: 0; height: 32px; justify-content: center; transition: all .3s var(--cbn-ease); width: 32px; }
.bn-close:hover { background: var(--cbn-ink); border-color: var(--cbn-ink); color: #fff; transform: rotate(90deg); }
.bn-close svg { height: 12px; width: 12px; }

.bn-body { padding: 12px 24px 20px; }
.bn-subtitle { color: var(--cbn-muted); font-family: var(--cbn-font-body); font-size: 14px; font-weight: 300; line-height: 1.6; margin-bottom: 4px; }
.bn-property { color: var(--cbn-accent); font-family: var(--cbn-font-display); font-size: 18px; font-weight: 400; letter-spacing: .01em; }
.bn-meta { color: var(--cbn-muted); font-family: var(--cbn-font-body); font-size: 13px; font-weight: 300; line-height: 1.5; margin-top: 8px; }
.bn-meta:empty { display: none; }
.bn-price { color: var(--cbn-muted); display: none; font-family: var(--cbn-font-body); font-size: 12px; font-weight: 300; line-height: 1.5; margin-top: 8px; }
.bn-price.loaded { display: block; }
.bn-price .price-msg { color: var(--cbn-accent); font-family: var(--cbn-font-display); font-size: 20px; font-weight: 500; }
.bn-price .general-msg { color: var(--cbn-muted); font-size: 12px; }

.bn-actions { align-items: center; display: flex; gap: 12px; padding: 0 24px 20px; }
.bn-cta { align-items: center; background: var(--cbn-cta-bg); border: 1px solid var(--cbn-cta-bg); border-radius: var(--cbn-cta-radius); color: var(--cbn-cta-ink); display: inline-flex; font-family: var(--cbn-font-body); font-size: 12px; font-weight: 400; gap: 8px; letter-spacing: var(--cbn-cta-tracking); padding: 12px 28px; text-decoration: none; text-transform: var(--cbn-cta-transform); transition: all .35s var(--cbn-ease); }
.bn-cta:hover { background: var(--cbn-cta-hover); border-color: var(--cbn-cta-hover); }
.bn-cta:after { background: currentColor; content: ""; height: 1px; transition: width .3s var(--cbn-ease); width: 14px; }
.bn-cta:hover:after { width: 20px; }

@media (max-width: 600px) {
  .booking-nudge { border-radius: 8px; left: auto; right: 12px; top: 320px; width: calc(100vw - 24px); }
  .bn-header { padding: 16px 18px 0; }
  .bn-body { padding: 10px 18px 16px; }
  .bn-actions { padding: 0 18px 16px; }
  .bn-name { font-size: 19px; }
  .bn-property { font-size: 16px; }
}
/* == end continue-booking-nudge == */