/* ==========================================================================
   Aurelia Farmhouse — public website
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons, chips, forms
   6.  Motion primitives
   7.  Loader
   8.  Header & navigation
   9.  Hero
   10. Editorial sections
   11. Amenities rail
   12. Occasions
   13. Gallery & lightbox
   14. Video
   15. Pricing
   16. Booking engine
   17. Location, FAQ, contact
   18. Closing CTA & footer
   19. Floating actions & toasts
   20. Responsive
   21. Reduced motion & print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Colour — set from the CRM's branding group, these are the fallbacks */
  --ink:        #0d1310;
  --ink-soft:   #16211b;
  --forest:     #22362b;
  --moss:       #3f5d49;
  --canvas:     #f7f3ec;
  --canvas-2:   #f0eae0;
  --sand:       #e5dccd;
  --brass:      #b08d4f;
  --brass-lite: #cdae74;
  --brass-glow: rgba(176, 141, 79, .22);
  --white:      #ffffff;

  --text:        var(--ink);
  --text-muted:  #55635b;
  --text-invert: #f4f1ea;
  --text-invert-muted: rgba(244, 241, 234, .68);
  --line:        rgba(13, 19, 16, .14);
  --line-invert: rgba(244, 241, 234, .18);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --step--1: clamp(.8rem, .77rem + .14vw, .875rem);
  --step-0:  clamp(.95rem, .92rem + .16vw, 1.0625rem);
  --step-1:  clamp(1.08rem, 1.02rem + .3vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.25rem + .75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3rem, 1.7rem + 6vw, 7rem);

  /* Space */
  --gutter:  clamp(1.25rem, 4.4vw, 4.5rem);
  --section: clamp(5.5rem, 10vw, 11rem);
  --maxw:    82.5rem;   /* 1320px */
  --maxw-narrow: 46rem;

  /* Shape & depth */
  --radius-image: 6px;
  --radius-card:  16px;
  --radius-pill:  999px;
  --shadow-sm: 0 1px 2px rgba(13, 19, 16, .05), 0 4px 14px rgba(13, 19, 16, .05);
  --shadow-md: 0 4px 12px rgba(13, 19, 16, .06), 0 22px 44px -18px rgba(13, 19, 16, .22);
  --shadow-lg: 0 8px 24px rgba(13, 19, 16, .08), 0 44px 88px -32px rgba(13, 19, 16, .38);

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .28s;
  --dur:      .6s;
  --dur-slow: 1.1s;

  /* Tall enough for the complete logo — emblem and lettering together — to be
     legible without any part of it being cropped away. */
  --header-h: 124px;
  --logo-h: 100px;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .008em;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (not hidden) so position: sticky keeps working */
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

/* The same clip on the root element. Without it, an element still sitting in
   its pre-reveal position — the contact panel waits 54px to the right until it
   animates in — widens the page and lets a phone scroll sideways, because
   overflow on <body> alone escapes to <html>. `clip` rather than `hidden`:
   hidden would make <html> a scroll container and break position: sticky. */
html { overflow-x: hidden; overflow-x: clip; }

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--brass); color: #fff; }

.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;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 3000;
  transform: translateY(-160%);
  background: var(--ink); color: var(--text-invert);
  padding: .75rem 1.25rem; border-radius: var(--radius-pill);
  font-size: var(--step--1); letter-spacing: .06em;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* A whisper of grain keeps large flat areas from looking flat. */
.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* 3. Typography ------------------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.d-1 { font-size: var(--step-5); }
.d-2 { font-size: var(--step-4); }
.d-3 { font-size: var(--step-3); }
.d-4 { font-size: var(--step-2); }

.display em {
  font-style: italic;
  color: var(--brass);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .85rem;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass);
}
.eyebrow::before {
  content: ''; width: 2.25rem; height: 1px;
  background: currentColor; opacity: .55;
}
.eyebrow.is-centred { justify-content: center; }
.eyebrow.is-centred::after {
  content: ''; width: 2.25rem; height: 1px;
  background: currentColor; opacity: .55;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44ch;
  font-weight: 300;
}

.prose p + p { margin-top: 1.35em; }
.prose { color: var(--text-muted); max-width: 58ch; }

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.3;
  color: var(--brass);
  letter-spacing: -.01em;
}

.section-index {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .24em;
  color: var(--brass);
  opacity: .75;
}

/* 4. Layout primitives ----------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Above the line drawings, which are absolutely placed on the section. */
  position: relative;
  z-index: 1;
}
.shell--wide { max-width: 96rem; }
.shell--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--dark {
  background: var(--ink);
  color: var(--text-invert);
}
.section--dark .lede,
.section--dark .prose { color: var(--text-invert-muted); }
.section--dark .eyebrow { color: var(--brass-lite); }
.section--sand { background: var(--canvas-2); }

.section-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head--centred { justify-items: center; text-align: center; }
.section-head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.rule { height: 1px; background: var(--line); border: 0; }
.section--dark .rule { background: var(--line-invert); }

/* Media frames -------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: linear-gradient(135deg, var(--sand), var(--canvas-2));
}
.frame img, .frame video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.frame--tall  { aspect-ratio: 3 / 4; }
.frame--port  { aspect-ratio: 4 / 5; }
.frame--square{ aspect-ratio: 1 / 1; }
.frame--land  { aspect-ratio: 4 / 3; }
.frame--wide  { aspect-ratio: 16 / 10; }
.frame--cine  { aspect-ratio: 21 / 9; }

/* Placeholder state: elegant rather than broken. */
.frame--empty::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(13, 19, 16, .28);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, var(--sand), var(--canvas-2));
}

.caption {
  margin-top: .9rem;
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* 5. Buttons, chips, forms -------------------------------------------------- */
.btn {
  --btn-bg: var(--brass);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 2rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn > * { position: relative; z-index: 2; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: rgba(13, 19, 16, .28);
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--text-invert);
  --btn-bd: rgba(244, 241, 234, .38);
}
.btn--light::before { background: var(--canvas); }
.btn--light:hover, .btn--light:focus-visible { color: var(--ink); border-color: var(--canvas); }

.btn--solid-light { --btn-bg: var(--canvas); --btn-fg: var(--ink); }
.btn--solid-light::before { background: var(--brass); }

.btn--whatsapp { --btn-bg: #128c7e; --btn-fg: #fff; }
.btn--whatsapp::before { background: #0d6d62; }

.btn--sm { padding: .8rem 1.4rem; font-size: .6875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Text link with an animated underline */
.link-line {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .35rem;
  color: inherit;
}
.link-line::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.link-line:hover::after { transform: scaleX(0); }
.link-line .icon { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease); }
.link-line:hover .icon { transform: translateX(4px); }

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--brass); color: var(--brass); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--ink); border-color: var(--ink); color: var(--text-invert);
}

/* Forms --------------------------------------------------------------------- */
.field { display: grid; gap: .5rem; }
.field > label,
.field-label {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2355635b' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m5.5 9 6.5 6.5L18.5 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-glow);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b3452f; }
.field-error { font-size: var(--step--1); color: #b3452f; }
.field-hint  { font-size: var(--step--1); color: var(--text-muted); }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

/* Honeypot — visible to bots, never to people or screen readers. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.checkline {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: var(--step--1); color: var(--text-muted); cursor: pointer;
  padding: .5rem 0;
}
.checkline input { -webkit-appearance: none; appearance: none; margin: 0; flex: none;
  width: 1.15rem; height: 1.15rem; border: 1px solid var(--line); border-radius: 5px;
  background: var(--white); display: grid; place-content: center;
  transition: all var(--dur-fast) var(--ease); }
.checkline input::after {
  content: ''; width: .5rem; height: .28rem;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease);
  margin-top: -2px;
}
.checkline input:checked { background: var(--brass); border-color: var(--brass); }
.checkline input:checked::after { transform: rotate(-45deg) scale(1); }

/* 6. Motion primitives ------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translate3d(-34px, 0, 0); }
[data-reveal="right"] { transform: translate3d(34px, 0, 0); }
[data-reveal="scale"] { transform: scale(.965); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Word-by-word heading reveal */
.rw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.rw-i {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotate(2deg);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + var(--delay, 0ms));
}
.is-in .rw-i, .rw.is-in .rw-i { transform: none; }

/* Image clip reveal with a settling zoom.
   The clip-path sits on the MEDIA, never on the observed wrapper: a wrapper
   clipped to zero height has an empty intersection rect, so IntersectionObserver
   would never fire and the image would stay hidden for good. */
.clip { overflow: hidden; }
.clip > img,
.clip > video {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.16);
  transition: clip-path 1.25s var(--ease-out) var(--delay, 0ms),
              transform 1.8s var(--ease-out) var(--delay, 0ms);
}
.clip.is-in > img,
.clip.is-in > video { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Parallax layers — JS writes --shift. The wrapper always clips, because the
   inner media is scaled up to give the shift somewhere to travel. */
[data-parallax] { will-change: transform; overflow: hidden; }
[data-parallax] > img,
[data-parallax] > video { transform: translate3d(0, var(--shift, 0px), 0) scale(1.12); }
.clip[data-parallax] > img,
.clip[data-parallax] > video { transform: translate3d(0, var(--shift, 0px), 0) scale(1.2); }
.clip[data-parallax].is-in > img,
.clip[data-parallax].is-in > video { transform: translate3d(0, var(--shift, 0px), 0) scale(1.12); }

/* Hover zoom for media cards */
.zoom { overflow: hidden; }
.zoom img { transition: transform 1.1s var(--ease-out); }
.zoom:hover img, a:hover .zoom img { transform: scale(1.055); }

/* Subtle 3D tilt (desktop, pointer only) */
@media (hover: hover) and (pointer: fine) {
  .tilt { transform-style: preserve-3d; transition: transform .5s var(--ease-out); }
  .tilt-inner { transform: translateZ(28px); }
}

/* 7. Loader ----------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-content: center; gap: 1.4rem; justify-items: center;
  background: var(--ink);
  transition: opacity .7s var(--ease), visibility .7s;
}
.loader[hidden] { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: .22em;
  color: var(--text-invert);
  padding-left: .22em;
}
.loader__bar { width: min(220px, 44vw); height: 1px; background: rgba(244,241,234,.2); overflow: hidden; }
.loader__bar span {
  display: block; height: 100%; width: 100%;
  background: var(--brass);
  transform-origin: left;
  transform: scaleX(0);
  animation: loaderFill 1.15s var(--ease-out) forwards;
}
@keyframes loaderFill { to { transform: scaleX(1); } }

/* 8. Header & navigation ---------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: height var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--text-invert);
}
/* Over a bright frame of the hero film the transparent header's white text can
   wash out. A short scrim behind it guarantees contrast whatever the video is
   showing, and fades out once the header takes its solid background. */
.header::before {
  content: ''; position: absolute; inset: 0 0 -32px; z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 10, 8, .58), rgba(6, 10, 8, 0));
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.header.is-stuck::before { opacity: 0; }

.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1;
  margin-right: auto;
}
.brand small {
  font-family: var(--font-body);
  font-size: .5625rem; letter-spacing: .3em;
  opacity: .7; text-transform: uppercase;
}

/* The logo lockup: the round emblem beside the wordmark. Two copies of the
   wordmark are in the markup — cream and green — and only one is ever shown,
   so the mark stays legible whether the header is transparent over the film or
   solid over the page. Swapping opacity rather than the src means no flash
   while the second image loads. */
.brand__badge {
  height: 40px; width: 40px; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(6, 10, 8, .28);
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__badge { transform: rotate(-4deg) scale(1.05); }

/* Both copies of the lockup are stacked in the same box, so the header never
   reflows as they swap. The box gets its size from the artwork's own ratio
   rather than from whichever image happens to be in flow — an image still
   loading would otherwise leave the brand at zero width. */
.brand__marks {
  position: relative; display: block;
  height: var(--logo-h);
  aspect-ratio: 460 / 452;      /* the logo's own proportions — never cropped */
  flex: none;
  transition: height var(--dur) var(--ease);
}
.brand__mark {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* `contain`, so the whole mark is always inside the box. */
  object-fit: contain; object-position: left center;
  transition: opacity var(--dur) var(--ease);
}
.brand__marks .brand__mark--dark { opacity: 0; }
.header.is-stuck .brand__mark--light { opacity: 0; }
.header.is-stuck .brand__mark--dark  { opacity: 1; }

/* The footer shows the complete logo, large. */
.footer .brand { align-items: center; }
.footer .brand__mark--stacked {
  position: static;
  width: clamp(150px, 15vw, 210px); height: auto;
  object-fit: contain;
}

@media (max-width: 1100px) { :root { --logo-h: 84px; } .header { --header-h: 106px; } }
@media (max-width: 640px)  { :root { --logo-h: 66px; } .header { --header-h: 88px; } .header.is-stuck { --logo-h: 56px; height: 74px; } }
@media (max-width: 400px)  { :root { --logo-h: 58px; } .header { --header-h: 80px; } }

.brand > img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav a {
  position: relative;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400;
  padding-block: .4rem;
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav a:hover, .nav a[aria-current="true"] { opacity: 1; }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .75rem; }

.header.is-stuck {
  height: 90px;
  --logo-h: 70px;
  background: rgba(247, 243, 236, .88);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom-color: var(--line);
  color: var(--ink);
  box-shadow: 0 1px 30px rgba(13, 19, 16, .06);
}
.header.is-stuck .btn--light { --btn-fg: var(--ink); --btn-bd: rgba(13,19,16,.26); }
.header.is-stuck .btn--light::before { background: var(--ink); }
.header.is-stuck .btn--light:hover { color: #fff; border-color: var(--ink); }

/* Scroll progress hairline */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--brass);
  width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: left;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.header.is-stuck .progress { opacity: 1; }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  position: relative; flex: none;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .75;
  transition: opacity var(--dur-fast) var(--ease);
}
.burger:hover { opacity: 1; }
.burger span {
  position: absolute; left: 50%; width: 17px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .4s var(--ease-out), opacity .2s linear, top .4s var(--ease-out);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 999;
  background: var(--ink);
  color: var(--text-invert);
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .8s var(--ease-out);
  pointer-events: none;
  overflow-y: auto;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 46px) 42px); pointer-events: auto; }
.drawer__nav {
  display: grid; align-content: center; gap: .35rem;
  padding: 1rem var(--gutter);
}
.drawer__nav a {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.75rem);
  line-height: 1.28;
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), color .25s;
  transition-delay: calc(var(--i) * 45ms + 120ms);
  display: flex; align-items: baseline; gap: .9rem;
}
.drawer__nav a::before {
  content: attr(data-num);
  font-family: var(--font-body); font-size: .625rem;
  letter-spacing: .2em; color: var(--brass); opacity: .8;
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__nav a:hover { color: var(--brass-lite); }
.drawer__foot {
  padding: 1.75rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-invert);
  display: grid; gap: 1rem;
}
.drawer__contact { display: grid; gap: .5rem; font-size: var(--step--1); color: var(--text-invert-muted); }
.drawer__contact a { display: inline-flex; align-items: center; gap: .6rem; }
.drawer__contact .icon { width: 1rem; height: 1rem; color: var(--brass-lite); }

/* 9. Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
  color: var(--text-invert);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: heroDrift 22s ease-out forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(9,13,11,.94) 0%, rgba(9,13,11,.55) 34%, rgba(9,13,11,.18) 62%, rgba(9,13,11,.55) 100%),
    linear-gradient(to right, rgba(9,13,11,.62) 0%, rgba(9,13,11,.12) 58%, rgba(9,13,11,.3) 100%);
  opacity: calc(var(--overlay, 58) / 100 + .18);
}

.hero__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(5rem, 11vh, 8.5rem);
  display: grid; gap: clamp(1.25rem, 2.4vw, 2rem);
  max-width: min(var(--maxw), 100%);
}
/* The headline has to survive whatever frame of the film happens to be behind
   it — including the pale, near-white ones. The section's own overlay is a flat
   wash across the whole banner; this is a second, softer wash that sits only
   behind the words, strongest at the left where the text is and fading out to
   nothing on the right so the picture is never boxed in. Blur keeps the frame
   readable underneath rather than hiding it. */
.hero__content {
  position: relative;
  max-width: 46rem;
  display: grid; gap: 1.4rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem);
  margin-left: clamp(-1.4rem, -3vw, -2.6rem);
  border-radius: var(--radius-image, 18px);
  isolation: isolate;
}
.hero__content::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(8, 13, 10, .62) 0%,
    rgba(8, 13, 10, .5)  45%,
    rgba(8, 13, 10, .22) 78%,
    rgba(8, 13, 10, 0)   100%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  backdrop-filter: blur(3px) saturate(115%);
  /* Fade the panel's own edges so it reads as light, not as a box on the film. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 62%, transparent 100%);
}

.hero .eyebrow {
  color: var(--brass-lite);
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(6, 10, 8, .7);
}
.hero h1 {
  font-size: var(--step-5);
  /* A shadow as well as the panel: between them the headline holds up on a
     bright frame without the panel having to be heavy enough to dull the film. */
  text-shadow: 0 2px 24px rgba(6, 10, 8, .55), 0 1px 3px rgba(6, 10, 8, .4);
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  color: #E8CFA0;
  letter-spacing: -.005em;
  text-shadow: 0 2px 18px rgba(6, 10, 8, .66);
}
.hero__text {
  max-width: 40rem;
  color: rgba(247, 245, 240, .95);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 1px 14px rgba(6, 10, 8, .62);
}
.hero .btn-row { margin-top: .85rem; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .8rem;
  font-size: .625rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(244, 241, 234, .62);
  z-index: 2;
}
.hero__scroll-line {
  width: 1px; height: 54px; background: rgba(244, 241, 234, .24);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--brass-lite);
  animation: scrollDot 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.hero__mute {
  position: absolute; right: var(--gutter); bottom: 2rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center;
  border: 1px solid rgba(244,241,234,.3);
  color: rgba(244,241,234,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all var(--dur-fast) var(--ease);
}
.hero__mute:hover { border-color: var(--brass-lite); color: var(--brass-lite); }
.hero__mute .icon { width: 1.05rem; height: 1.05rem; }

/* 10. Editorial sections ----------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.editorial--reverse > :first-child { order: 2; }

.editorial__media { position: relative; }
.editorial__media--stacked { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; }
.editorial__media--stacked .frame:first-child { grid-column: 1 / 10; grid-row: 1; z-index: 1; }
.editorial__media--stacked .frame:last-child {
  grid-column: 7 / 13; grid-row: 1;
  align-self: end;
  margin-top: clamp(3rem, 12vw, 8rem);
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--canvas);
}
.section--dark .editorial__media--stacked .frame:last-child { border-color: var(--ink); }

.editorial__body { display: grid; gap: 1.6rem; align-content: start; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border-top: 1px solid var(--line);
}
.section--dark .stats { border-color: var(--line-invert); }
.stat {
  padding: 1.6rem 1.2rem 1.6rem 0;
  border-bottom: 1px solid var(--line);
  display: grid; gap: .3rem; align-content: start;
}
.section--dark .stat { border-color: var(--line-invert); }
.stat__icon { color: var(--brass); width: 1.35rem; height: 1.35rem; margin-bottom: .45rem; }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat__suffix { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.stat__label { font-size: var(--step--1); color: var(--text-muted); }
.section--dark .stat__label { color: var(--text-invert-muted); }

/* Full-bleed feature (pool, relax, evening) */
.feature { position: relative; overflow: hidden; }
.feature__bg { position: absolute; inset: 0; z-index: 0; }
.feature__bg img, .feature__bg video { width: 100%; height: 100%; object-fit: cover; }
.feature__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(9,13,11,.9) 0%, rgba(9,13,11,.62) 45%, rgba(9,13,11,.2) 100%);
}
.feature__inner { position: relative; z-index: 1; }
.feature__card {
  max-width: 34rem;
  display: grid; gap: 1.4rem;
}
.feature .display, .feature .prose { color: var(--text-invert); }
.feature .prose { color: var(--text-invert-muted); }

.badge-measure {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(244, 241, 234, .28);
  border-radius: var(--radius-pill);
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-lite);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  width: max-content;
}
.badge-measure .icon { width: 1rem; height: 1rem; }

/* The calm break */
.calm { text-align: center; display: grid; gap: 1.75rem; justify-items: center; }
.calm .display { max-width: 20ch; }
.calm .prose { max-width: 52ch; margin-inline: auto; }
.calm [data-reveal] { transition-duration: 1.9s; }

/* 11. Amenities rail ---------------------------------------------------------- */
/* No `overflow: hidden` here. It makes this section the scroll container for
   its own sticky child, and a container that never scrolls can never stick —
   so the pinned block scrolled away and left the whole reserved scroll length
   as an empty dark band. The horizontal travel is already clipped by
   .rail-viewport, which is where that clipping belongs. `clip` is safe: unlike
   `hidden` it does not create a scroll container. */
.rail-section {
  background: var(--ink); color: var(--text-invert);
  overflow-x: clip;
}
/* The pinned block must be exactly one screen tall. Taller, and its lower half
   can never come into view while it is stuck at the top — which is what left a
   long band of empty dark below the rail. Laying it out as a grid with the
   viewport as the flexible row keeps it to the screen at any height, and the
   cards size themselves to whatever is left over. */
.rail-sticky {
  position: relative;
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  gap: clamp(.7rem, 1.8vh, 1.5rem);
  /* Clear the fixed header: the block is pinned at the very top of the window,
     so without this the eyebrow slides under the navigation. */
  padding-top: calc(var(--header-h) + clamp(.5rem, 2vh, 1.75rem));
  padding-bottom: clamp(1rem, 3vh, 2.5rem);
}
.rail-viewport { overflow: hidden; min-height: 0; align-self: stretch; }

/* The heading block sits in the first grid row. Its own section padding would
   make that row taller than the screen, which is what pushed it down on top of
   the cards — the grid manages the spacing here instead. */
.rail-sticky > .section { padding-block: 0 !important; }
.rail-sticky .section-head { margin-bottom: 0; }
.rail-sticky .display { font-size: clamp(1.45rem, 2.7vw, 2.5rem); max-width: 14ch; }
.rail-sticky .lede { font-size: clamp(.9rem, 1.1vw, 1.05rem); }

/* Card text: a long write-up must not push the picture off the screen, so the
   description is capped at four lines and the rest is left to the CRM. */
.rail-sticky .amenity__body { min-height: 0; }
.rail-sticky .amenity__name { font-size: clamp(1.05rem, 1.5vw, 1.5rem); }
.rail-sticky .amenity__text {
  display: -webkit-box;
  -webkit-line-clamp: 4; line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-viewport .rail-track { height: 100%; }
.rail-sticky .amenity {
  /* Height comes from the row, so the picture shrinks on a short screen
     instead of pushing the block past the bottom of the window. */
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
}
.rail-sticky .amenity__frame { aspect-ratio: auto; height: 100%; min-height: 0; }

@media (max-width: 960px), (hover: none) {
  .rail-sticky {
    height: auto;
    display: block;
    padding-block: 0;
  }
  .rail-sticky .amenity { height: auto; grid-template-rows: none; }
  .rail-sticky .amenity__frame { aspect-ratio: 3 / 4; height: auto; }
}
.rail-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
.amenity {
  position: relative; flex: none;
  width: clamp(15rem, 25vw, 21rem);
  display: grid; gap: 1.1rem;
  align-content: start;
}
.amenity__frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-image);
  aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #223028, #16211b);
}
.amenity__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.amenity:hover .amenity__frame img { transform: scale(1.06); }
.amenity__frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,13,11,.72), transparent 52%);
  opacity: .9;
}
.amenity__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 1rem; justify-items: center;
  color: rgba(205, 174, 116, .55);
}
.amenity__placeholder .icon { width: 3rem; height: 3rem; }
.amenity__index {
  position: absolute; top: 1rem; left: 1.1rem; z-index: 2;
  font-family: var(--font-display); font-size: .875rem;
  letter-spacing: .18em; color: rgba(244, 241, 234, .7);
}
.amenity__badge {
  position: absolute; bottom: 1rem; left: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-lite);
}
.amenity__badge .icon { width: 1rem; height: 1rem; }
.amenity__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.amenity__meta { font-size: var(--step--1); color: var(--text-invert-muted); }
.amenity__detail { color: var(--brass-lite); letter-spacing: .08em; }

.rail-progress {
  margin: 2.5rem var(--gutter) 0;
  height: 1px; background: var(--line-invert); position: relative;
}
.rail-progress span {
  position: absolute; inset: 0; background: var(--brass);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .12s linear;
}
.rail-hint {
  margin-top: 1rem; padding-inline: var(--gutter);
  font-size: .625rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-invert-muted);
  display: flex; align-items: center; gap: .6rem;
}
.rail-hint .icon { width: 1rem; height: 1rem; color: var(--brass-lite); animation: nudge 2.4s var(--ease-in-out) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* 12. Occasions --------------------------------------------------------------- */
.occasions { display: grid; gap: 0; border-top: 1px solid var(--line); }
.occasion {
  position: relative;
  display: flex; align-items: center; gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease-out);
}
.occasion:hover { color: var(--brass); padding-left: 1.25rem; }
.occasion__icon { width: 1.5rem; height: 1.5rem; color: var(--brass); flex: none; }
.occasion__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; }
.occasion__desc { font-size: var(--step--1); color: var(--text-muted); margin-left: auto; max-width: 26ch; text-align: right; }
.occasion__arrow { width: 1.4rem; height: 1.4rem; flex: none; opacity: 0; transform: translateX(-8px);
  transition: all var(--dur) var(--ease-out); }
.occasion:hover .occasion__arrow { opacity: 1; transform: none; }

.cursor-preview {
  position: fixed; top: 0; left: 0; z-index: 950;
  width: 17rem; aspect-ratio: 4/5; border-radius: var(--radius-image);
  overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.cursor-preview.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(1); }
.cursor-preview img { width: 100%; height: 100%; object-fit: cover; }

/* 13. Gallery & lightbox ------------------------------------------------------ */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2.25rem; }

/* The gallery: two rows that scroll sideways together.
   Every tile is the same size, so the eye reads one steady band rather than a
   ragged mosaic, and the whole set stays on one screen instead of running the
   page on for another two thousand pixels. Vertical page scrolling is
   untouched — only this strip moves horizontally. */
.gallery-rail { position: relative; }
.gallery-rows {
  display: grid;
  grid-auto-flow: column;
  /* Fixed rows, not auto: with auto rows a portrait photograph stretches its
     row and the tiles stop matching. One height for both rows, one width for
     every tile, and the pictures crop to fit. */
  --tile-h: clamp(10.5rem, 19vw, 16.5rem);
  grid-template-rows: repeat(2, var(--tile-h));
  align-items: stretch;
  gap: clamp(.6rem, 1.2vw, 1.1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: .75rem;
  /* Bleed to the window edge so the strip reads as continuing off-screen. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 58, 46, .28) transparent;
  cursor: grab;
}
.gallery-rows.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery-rows.is-dragging .gallery-item { pointer-events: none; }
.gallery-rows::-webkit-scrollbar { height: 6px; }
.gallery-rows::-webkit-scrollbar-thumb { background: rgba(43, 58, 46, .28); border-radius: 99px; }
.gallery-rows::-webkit-scrollbar-track { background: transparent; }

.gallery-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-image);
  /* One size for every photograph, whatever shape the original is. */
  width: calc(var(--tile-h, 14rem) * 4 / 3);
  height: var(--tile-h, 14rem);
  scroll-snap-align: start;
  background: linear-gradient(140deg, var(--sand), var(--canvas-2));
  cursor: zoom-in;
  transition: opacity .45s var(--ease), transform .45s var(--ease-out);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,13,11,.55), transparent 55%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover::after { opacity: 1; }

.gallery-rail__hint {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.gallery-rail__hint .icon { width: 1rem; height: 1rem; animation: hint-nudge 2.4s var(--ease-in-out) infinite; }
@keyframes hint-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* One row on a narrow screen — two rows of small tiles is unreadable there. */
@media (max-width: 700px) {
  .gallery-rows { --tile-h: 13rem; grid-template-rows: var(--tile-h); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-rows { scroll-behavior: auto; }
  .gallery-rail__hint .icon { animation: none; }
}
.gallery-item__meta {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 2;
  color: var(--text-invert); font-size: var(--step--1);
  opacity: 0; transform: translateY(8px);
  transition: all var(--dur) var(--ease-out);
}
.gallery-item:hover .gallery-item__meta { opacity: 1; transform: none; }
.gallery-item__zoom {
  position: absolute; right: .9rem; top: .9rem; z-index: 2;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-content: center;
  background: rgba(247, 243, 236, .9); color: var(--ink);
  opacity: 0; transform: scale(.7);
  transition: all var(--dur) var(--ease-out);
}
.gallery-item:hover .gallery-item__zoom { opacity: 1; transform: none; }
.gallery-item__zoom .icon { width: .95rem; height: .95rem; }
.gallery-item.is-hidden { display: none; }

/* Editorial rhythm: first two images are hero-sized, then a varied grid. */
/* (The old mosaic spans lived here. The strip needs one cell per tile.) */
.gallery-rows { grid-auto-columns: max-content; }

.lightbox {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(7, 10, 9, .985);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  color: var(--text-invert-muted); font-size: var(--step--1);
  letter-spacing: .12em;
}
.lightbox__stage { display: grid; place-items: center; padding: 0 clamp(1rem, 6vw, 5rem); min-height: 0; }
.lightbox__stage img {
  max-width: 100%; max-height: 76vh; width: auto; object-fit: contain;
  border-radius: 4px;
  animation: lbIn .5s var(--ease-out);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } }
.lightbox__foot {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  padding: 1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  color: var(--text-invert);
}
.lightbox__caption { color: var(--text-invert-muted); font-size: var(--step--1); text-align: center; max-width: 46ch; }
.lb-btn {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .26);
  display: grid; place-content: center;
  color: var(--text-invert);
  transition: all var(--dur-fast) var(--ease);
}
.lb-btn:hover { border-color: var(--brass); color: var(--brass-lite); }
.lb-btn .icon { width: 1.1rem; height: 1.1rem; }

/* 14. Video ------------------------------------------------------------------- */
.video-block {
  position: relative; overflow: hidden;
  border-radius: var(--radius-image);
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.video-block video, .video-block img { width: 100%; height: 100%; object-fit: cover; }
.video-block__overlay {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 1.25rem; justify-items: center;
  background: linear-gradient(to top, rgba(9,13,11,.72), rgba(9,13,11,.24));
  color: var(--text-invert);
  transition: opacity var(--dur) var(--ease);
}
.video-block.is-playing .video-block__overlay { opacity: 0; pointer-events: none; }
.play-btn {
  width: clamp(4.5rem, 9vw, 6.5rem); height: clamp(4.5rem, 9vw, 6.5rem);
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .45);
  display: grid; place-content: center;
  color: var(--text-invert);
  position: relative;
  transition: all var(--dur) var(--ease);
}
.play-btn::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(205, 174, 116, .5);
  animation: pulseRing 2.8s var(--ease-out) infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.play-btn:hover { background: var(--brass); border-color: var(--brass); transform: scale(1.06); }
.play-btn .icon { width: 1.5rem; height: 1.5rem; margin-left: 3px; }
.video-controls {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  display: flex; gap: .5rem;
}
.video-controls button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .3); color: var(--text-invert);
  display: grid; place-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: all var(--dur-fast) var(--ease);
}
.video-controls button:hover { border-color: var(--brass-lite); color: var(--brass-lite); }
.video-controls .icon { width: 1rem; height: 1rem; }

/* 15. Pricing ----------------------------------------------------------------- */
.rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.rate-card {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  display: grid; gap: 1rem; align-content: start;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease);
  overflow: hidden;
}
.rate-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-lite));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.rate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.rate-card:hover::before { transform: scaleX(1); }
.rate-card__band {
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
}
.rate-card__price {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  line-height: 1; letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: .5rem;
}
.rate-card__unit { font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.rate-card__meta { font-size: var(--step--1); color: var(--text-muted); }
.rate-card--accent { background: var(--ink); color: var(--text-invert); border-color: transparent; }
.rate-card--accent .rate-card__meta,
.rate-card--accent .rate-card__unit { color: var(--text-invert-muted); }
.rate-card--accent .rate-card__band { color: var(--brass-lite); }

.rate-note {
  margin-top: 1.75rem;
  padding: 1.1rem 1.35rem;
  border-left: 2px solid var(--brass);
  background: rgba(176, 141, 79, .07);
  font-size: var(--step--1);
  color: var(--text-muted);
  border-radius: 0 8px 8px 0;
}
.section--dark .rate-note { background: rgba(205, 174, 116, .1); color: var(--text-invert-muted); }

/* 16. Booking engine ----------------------------------------------------------- */
.booking {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.booking-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.section--dark .booking-panel { background: var(--ink-soft); border-color: var(--line-invert); }

.steps { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.step-dot {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted);
}
.step-dot b {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-content: center;
  border: 1px solid var(--line); font-size: .6875rem; font-weight: 500;
  transition: all var(--dur-fast) var(--ease);
}
.step-dot.is-active { color: var(--brass); }
.step-dot.is-active b { background: var(--brass); border-color: var(--brass); color: #fff; }
.step-dot.is-done b { background: var(--ink); border-color: var(--ink); color: #fff; }
.step-line { flex: 1 1 1.5rem; height: 1px; background: var(--line); min-width: 1rem; }

.booking-step { display: none; }
.booking-step.is-active { display: grid; gap: 1.25rem; animation: stepIn .45s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }

/* Calendar */
.cal { display: grid; gap: 1rem; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cal__month { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.cal__nav { display: flex; gap: .4rem; }
.cal__nav button {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.cal__nav button:hover:not([disabled]) { border-color: var(--brass); color: var(--brass); }
.cal__nav button[disabled] { opacity: .3; cursor: not-allowed; }
.cal__nav .icon { width: 1rem; height: 1rem; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.cal__dow {
  text-align: center; font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); padding-bottom: .35rem;
}
.cal__day {
  position: relative;
  aspect-ratio: 1;
  min-height: 2.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  display: grid; place-content: center; gap: 1px;
  font-size: var(--step--1);
  transition: all var(--dur-fast) var(--ease);
  cursor: pointer;
}
.cal__day span { font-size: .5rem; letter-spacing: .04em; color: var(--text-muted); }
.cal__day--empty { visibility: hidden; }
.cal__day--available:hover { background: var(--canvas-2); border-color: var(--brass); }
.cal__day--booked,
.cal__day--held,
.cal__day--blocked,
.cal__day--closed {
  cursor: not-allowed; color: rgba(85, 99, 91, .45);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.cal__day--booked::after,
.cal__day--held::after,
.cal__day--blocked::after {
  content: ''; position: absolute; bottom: .3rem; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: #b3452f;
}
.cal__day--held::after { background: #c08a2e; }
.cal__day--blocked::after { background: #7a8a80; }
.cal__day.is-selected {
  background: var(--ink); border-color: var(--ink); color: var(--text-invert);
}
.cal__day.is-selected span { color: rgba(244,241,234,.7); }
.cal__day.is-in-range { background: var(--canvas-2); }
.cal__legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); }
.cal__legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; }

/* Guest stepper */
.stepper { display: flex; align-items: center; gap: .75rem; }
.stepper button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-content: center;
  font-size: 1.1rem; line-height: 1;
  transition: all var(--dur-fast) var(--ease);
}
.stepper button:hover:not([disabled]) { border-color: var(--brass); color: var(--brass); }
.stepper button[disabled] { opacity: .35; cursor: not-allowed; }
.stepper output {
  min-width: 3.5rem; text-align: center;
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1;
}

/* Quote summary */
.quote-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: var(--canvas-2);
  display: grid; gap: .9rem;
  position: sticky; top: calc(var(--header-h) + 1.5rem);
}
.section--dark .quote-box { background: var(--ink-soft); border-color: var(--line-invert); }
.quote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--step--1); }
.quote-row span:first-child { color: var(--text-muted); }
.section--dark .quote-row span:first-child { color: var(--text-invert-muted); }
.quote-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.section--dark .quote-total { border-color: var(--line-invert); }
.quote-total b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; line-height: 1; }
.quote-empty { color: var(--text-muted); font-size: var(--step--1); }

/* States */
.state {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.15rem; border-radius: 10px;
  font-size: var(--step--1); line-height: 1.6;
}
.state .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .18rem; }
.state--ok    { background: rgba(63, 93, 73, .1);  color: #2f4a3a; }
.state--warn  { background: rgba(192, 138, 46, .12); color: #8a6222; }
.state--error { background: rgba(179, 69, 47, .1);  color: #97341f; }
.state--info  { background: rgba(176, 141, 79, .1); color: #77602f; }
.section--dark .state--ok    { color: #a9c8b4; }
.section--dark .state--warn  { color: #e0bb72; }
.section--dark .state--error { color: #e8a08c; }
.section--dark .state--info  { color: var(--brass-lite); }

.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(247, 243, 236, .6);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.spinner {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  animation: spin .8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--canvas-2) 25%, var(--sand) 50%, var(--canvas-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.success-card {
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0;
}
.success-card__mark {
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--brass); color: #fff;
  animation: popIn .55s var(--ease-out);
}
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
.success-card__mark .icon { width: 1.4rem; height: 1.4rem; }
.success-ref {
  font-family: var(--font-display); font-size: var(--step-2);
  letter-spacing: .1em;
}

/* 17. Location, FAQ, contact ---------------------------------------------------- */
.map-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
  background: var(--canvas-2);
  border: 1px solid var(--line);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.02); }
.map-empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .75rem; justify-items: center;
  color: var(--text-muted); text-align: center; padding: 2rem;
  font-size: var(--step--1);
}
.map-empty .icon { width: 2rem; height: 2rem; color: var(--brass); }

.locality-list { display: grid; gap: 1.1rem; }
.locality-list li { display: flex; gap: .9rem; align-items: flex-start; }
.locality-list .icon { width: 1.2rem; height: 1.2rem; color: var(--brass); flex: none; margin-top: .3rem; }

.faq { display: grid; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.15rem, 2.4vw, 1.7rem) 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.28;
  transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--brass); }
.faq__q .icon {
  width: 1.3rem; height: 1.3rem; flex: none; margin-top: .3rem; color: var(--brass);
  transition: transform var(--dur) var(--ease-out);
}
.faq__item.is-open .faq__q .icon { transform: rotate(180deg); }
.faq__a {
  overflow: hidden; height: 0;
  transition: height .5s var(--ease-out);
}
.faq__a-inner { padding-bottom: 1.6rem; color: var(--text-muted); max-width: 62ch; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-list { display: grid; gap: 1.5rem; }
.contact-list__item { display: grid; gap: .3rem; }
.contact-list__label { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
/* Two phone numbers side by side are wider than a narrow phone screen, so the
   pair wraps while each number stays whole. */
.contact-list__value {
  font-size: var(--step-1);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 0.5ch;
}
.contact-list__value > a { white-space: nowrap; }
.contact-list a:hover { color: var(--brass); }

/* 18. Closing CTA & footer ------------------------------------------------------ */
.closing {
  position: relative; overflow: hidden;
  min-height: 78svh;
  display: grid; place-items: center;
  text-align: center;
  color: var(--text-invert);
  background: var(--ink);
}
.closing__bg { position: absolute; inset: 0; z-index: 0; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; }
.closing__bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 55%, rgba(9,13,11,.6) 0%, rgba(9,13,11,.9) 70%);
}
.closing__inner { position: relative; z-index: 1; display: grid; gap: 1.6rem; justify-items: center;
  padding: var(--section) var(--gutter); max-width: 54rem; }
.closing .display { max-width: 16ch; }

.footer { background: var(--ink); color: var(--text-invert); padding-top: clamp(3.5rem, 7vw, 6rem); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__brand { display: grid; gap: 1.1rem; align-content: start; }
.footer__brand .brand { font-size: 1.75rem; margin: 0; }
.footer__about { color: var(--text-invert-muted); font-size: var(--step--1); max-width: 34ch; line-height: 1.75; }
.footer__col-title {
  font-size: .625rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-lite); margin-bottom: 1.1rem;
}
.footer__links { display: grid; gap: .65rem; font-size: var(--step--1); }
.footer__links a { color: var(--text-invert-muted); transition: color var(--dur-fast) var(--ease); }
.footer__links a:hover { color: var(--text-invert); }
.footer__contact { display: grid; gap: .8rem; font-size: var(--step--1); color: var(--text-invert-muted); }
.footer__contact a { display: inline-flex; align-items: flex-start; gap: .6rem; }
.footer__contact .icon { width: 1rem; height: 1rem; color: var(--brass-lite); flex: none; margin-top: .22rem; }

.socials { display: flex; gap: .6rem; }
.socials a {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--line-invert);
  display: grid; place-content: center;
  color: var(--text-invert-muted);
  transition: all var(--dur-fast) var(--ease);
}
.socials a:hover { border-color: var(--brass); color: var(--brass-lite); transform: translateY(-2px); }
.socials .icon { width: 1.05rem; height: 1.05rem; }

.footer__bottom {
  border-top: 1px solid var(--line-invert);
  padding-block: 1.6rem calc(1.75rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-size: var(--step--1); color: var(--text-invert-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a:hover { color: var(--text-invert); }

/* 19. Floating actions & toasts --------------------------------------------------- */
.floating {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 800;
  display: grid; gap: .7rem; justify-items: end;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.floating.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-content: center;
  background: #128c7e; color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-lg); }
.fab .icon { width: 1.5rem; height: 1.5rem; }
.fab--ink { background: var(--ink); }

.mobile-bar {
  position: fixed; inset: auto 0 0; z-index: 850;
  display: none;
  gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(247, 243, 236, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.mobile-bar.is-on { transform: none; }
.mobile-bar .btn { flex: 1; padding-inline: 1rem; }

.toast-stack {
  position: fixed; left: 50%; bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  z-index: 1600; display: grid; gap: .6rem; width: min(28rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .95rem 1.15rem;
  border-radius: 12px;
  background: var(--ink); color: var(--text-invert);
  font-size: var(--step--1); line-height: 1.55;
  box-shadow: var(--shadow-lg);
  animation: toastIn .45s var(--ease-out);
}
.toast .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15rem; color: var(--brass-lite); }
.toast--error .icon { color: #e8a08c; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } }

/* 20. Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .booking { grid-template-columns: 1fr; }
  .quote-box { position: static; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .nav { display: none; }
  .burger { display: block; }
  .header__actions .btn { display: none; }
  .editorial { grid-template-columns: 1fr; gap: 2.5rem; }
  .editorial--reverse > :first-child { order: 0; }
  .editorial__media--stacked .frame:first-child { grid-column: 1 / 11; }
  .editorial__media--stacked .frame:last-child { grid-column: 6 / 13; margin-top: 4rem; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .contact-grid { grid-template-columns: 1fr; }
  .occasion__desc { display: none; }
  /* (Mosaic spans removed — the gallery is a two-row strip at every width.) */
  .mobile-bar { display: flex; }
  /* The bar already carries Book Now and WhatsApp, so the floating pair would
     only cover content. */
  .floating { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero { min-height: 92svh; }
  .hero__inner { padding-bottom: 6.5rem; }
  .hero__mute { bottom: 6.5rem; }
  .hero__scroll { bottom: 3.4rem; }
  .btn { padding: .95rem 1.5rem; font-size: .6875rem; }
  .btn-row .btn { flex: 1 1 100%; }
  .gallery-item,
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(6n+6),
  .gallery-item:nth-child(6n+7) { grid-column: span 12; aspect-ratio: 3 / 2; }
  .footer__top { grid-template-columns: 1fr; }
  .stat { padding-right: 0; }
  .occasion__title { font-size: var(--step-2); }
  .lightbox__stage { padding-inline: .75rem; }
  .rail-track { gap: .85rem; }
  .amenity { width: 74vw; }
}

/* Touch devices scroll the amenity rail natively. */
@media (max-width: 960px), (hover: none) {
  .rail-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rail-viewport::-webkit-scrollbar { display: none; }
  .rail-track { transform: none !important; padding-right: var(--gutter); }
  .amenity { scroll-snap-align: start; }
}

/* 21. Reduced motion & print --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rw-i { transform: none !important; }
  .clip > img, .clip > video { clip-path: none !important; transform: none !important; }
  [data-parallax] > img, [data-parallax] > video { transform: none !important; }
  .hero__media img, .hero__media video { animation: none; transform: none; }
  .loader { display: none !important; }
  .rail-track { transform: none !important; }
  .rail-viewport { overflow-x: auto; }
}

@media print {
  .header, .drawer, .floating, .mobile-bar, .loader, .grain, .hero__scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  .section--dark, .feature, .closing, .footer { background: #fff !important; color: #000 !important; }
}

/* Small corrections layered after the main sheet ------------------------------ */
.fab--ink .icon { transform: rotate(180deg); }
.footer__contact p { margin: 0; }
.rate-card .rule { width: 100%; }
.caption .icon { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .35rem; color: var(--brass); }
.badge-measure.is-tight { padding: .45rem .9rem; }
.editorial__media--stacked .frame:last-child img { border-radius: 0; }


/* ---------------------------------------------------------------------------
   19. Line drawings
   Faint continuous-line figures that fill the flat half of a section — the
   side with no photograph. They are decoration, so they are hidden from
   assistive technology and never take a click. Kept to two or three per
   section: any more and they stop being texture and start being clutter.
--------------------------------------------------------------------------- */
.lineart {
  position: absolute;
  width: clamp(104px, 13vw, 196px);
  aspect-ratio: 1;
  color: var(--ink);
  opacity: .11;
  pointer-events: none;
  z-index: 0;
  animation: la-drift 14s var(--ease-in-out) infinite alternate;
}
.section--dark .lineart,
.closing .lineart,
.feature .lineart { color: var(--brass); opacity: .16; }

/* Each drawing gets its own drift so they never move in lockstep. */
.lineart:nth-of-type(2) { animation-duration: 18s; animation-delay: -4s; }
.lineart:nth-of-type(3) { animation-duration: 22s; animation-delay: -9s; }

@keyframes la-drift {
  from { transform: translate3d(0, 0, 0) rotate(-1deg); }
  to   { transform: translate3d(0, -14px, 0) rotate(1.5deg); }
}

/* Placements. Percentages rather than pixels so a drawing keeps its relation
   to the block of empty space as the section reflows. */
.lineart--bl { left: 2%;  bottom: 6%; }
.lineart--br { right: 3%; bottom: 8%; }
.lineart--tr { right: 5%; top: 10%; }
.lineart--tl { left: 4%;  top: 12%; }
.lineart--mid-l { left: 6%; top: 46%; }

/* Below the tablet breakpoint the sections stack and the empty space closes
   up, so all but the largest drawing come out. */
@media (max-width: 900px) {
  .lineart { width: clamp(88px, 22vw, 130px); opacity: .085; }
  .lineart--tl, .lineart--mid-l { display: none; }
}
@media (max-width: 560px) {
  .lineart--tr { display: none; }
  .lineart--bl, .lineart--br { bottom: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .lineart { animation: none; }
}


/* The YouTube tour ---------------------------------------------------------
   The poster and the play button sit in the block until the visitor presses
   play; the iframe is then appended over the top of them. */
.video-block { position: relative; }
.video-block > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-block__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; z-index: 3;
  animation: vb-in .5s var(--ease-out) both;
}
@keyframes vb-in { from { opacity: 0; } to { opacity: 1; } }
.video-block.is-playing .video-block__overlay { opacity: 0; pointer-events: none; }
.video-block__hint {
  font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(244, 241, 234, .78);
}


/* The pool strip -----------------------------------------------------------
   A short row of pool photographs beside the copy, scrolled sideways. It sits
   on the dark feature background, so each frame gets a light edge to lift it
   away from the image behind. */
.pool-strip { position: relative; min-width: 0; }
.pool-strip__track {
  display: flex;
  gap: clamp(.6rem, 1.2vw, 1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: .6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 241, 234, .35) transparent;
}
.pool-strip__track::-webkit-scrollbar { height: 5px; }
.pool-strip__track::-webkit-scrollbar-thumb { background: rgba(244, 241, 234, .35); border-radius: 99px; }
.pool-strip__track::-webkit-scrollbar-track { background: transparent; }
.pool-strip__item {
  flex: none; margin: 0;
  width: clamp(12rem, 20vw, 17rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-image);
  scroll-snap-align: start;
  box-shadow: var(--shadow-lg);
  outline: 1px solid rgba(244, 241, 234, .16);
  outline-offset: -1px;
}
.pool-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.pool-strip__item:hover img { transform: scale(1.05); }
.pool-strip__hint {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .85rem;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244, 241, 234, .6);
}
.pool-strip__hint .icon { width: 1rem; height: 1rem; }

@media (max-width: 900px) {
  .pool-strip__item { width: min(62vw, 15rem); }
}


/* ---------------------------------------------------------------------------
   20. Depth and motion polish
--------------------------------------------------------------------------- */

/* The loader picks up the emblem and the locality, so the first thing a
   visitor sees is the property's own mark rather than a bare word. */
.loader__logo {
  width: clamp(150px, 26vw, 250px); height: auto;
  animation: loader-badge 1.8s var(--ease-out) infinite alternate;
}
@keyframes loader-badge {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-8px) scale(1.02); }
}

/* Cards lift towards the cursor. The rotation is small on purpose — a couple
   of degrees reads as depth, more reads as a gimmick — and the whole effect is
   driven by two custom properties the pointer handler writes, so the browser
   only ever composites a transform. */
.tilt {
  transform: perspective(1100px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             translate3d(0, var(--tilt-lift, 0px), 0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.tilt:hover { transition-duration: .18s; }
.tilt > * { transform: translateZ(0); }

/* A soft highlight that follows the pointer across the card face. */
.tilt::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    36rem circle at var(--tilt-mx, 50%) var(--tilt-my, 50%),
    rgba(255, 255, 255, .13), transparent 42%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.tilt:hover::before { opacity: 1; }

/* Buttons and chips get the same small lift, without the rotation. */
.btn, .chip { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease); }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }

/* Section headings settle in with a touch of depth rather than a flat fade. */
[data-reveal="rise3d"] {
  opacity: 0;
  transform: perspective(900px) rotateX(7deg) translate3d(0, 26px, 0);
  transition: opacity 1s var(--ease-out) var(--delay, 0ms),
              transform 1.15s var(--ease-out) var(--delay, 0ms);
}
[data-reveal="rise3d"].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; transition: none; }
  .tilt::before { display: none; }
  .btn:hover { transform: none; }
  .loader__badge { animation: none; }
  [data-reveal="rise3d"] { opacity: 1; transform: none; transition: none; }
}

/* The tilt highlight must not sit over a photograph's own gradient scrim, so
   on picture cards it is dialled right down. */
.gallery-item.tilt::before,
.amenity.tilt::before { background: radial-gradient(30rem circle at var(--tilt-mx,50%) var(--tilt-my,50%), rgba(255,255,255,.10), transparent 45%); }
.amenity.tilt { transform-origin: 50% 60%; }


/* The hero's YouTube layer -------------------------------------------------
   Sized well beyond the viewport so a 16:9 player still covers a tall or very
   wide window with no letterboxing, and pinned behind the overlay so the
   headline keeps its contrast. It is invisible until the player reports that
   it has started, which is what stops a black flash over the banner. */
.hero__yt {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;            /* 16:9 by width  */
  min-width: 177.78vh; min-height: 100vh;   /* 16:9 by height */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
  z-index: 1;
}
.hero__media.has-yt .hero__yt { opacity: 1; }
/* The uploaded file underneath is never hidden — the YouTube layer simply
   covers it once it is genuinely playing. If YouTube never arrives, the banner
   carries on with the file and the visitor sees no difference. */


/* ---------------------------------------------------------------------------
   21. Call now — the number in the header
--------------------------------------------------------------------------- */
.call-now {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .8rem .38rem .42rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 178, 138, .5);
  background: rgba(200, 178, 138, .1);
  font-weight: 600;
  font-size: .8125rem; letter-spacing: .04em;
  white-space: nowrap;
  color: inherit;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease-out);
}
.call-now:hover { background: rgba(200, 178, 138, .22); border-color: var(--brass); transform: translateY(-2px); }
.call-now__ring {
  display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--brass); color: #14201a;
  flex: none;
  /* The ring, not the number, carries the animation — a blinking phone number
     is hard to read, while a pulsing icon beside a steady number is not. */
  animation: call-ring 1.8s var(--ease-in-out) infinite;
}
.call-now__ring .icon { width: .9rem; height: .9rem; }
.call-now__num { animation: call-glow 1.8s var(--ease-in-out) infinite; }

@keyframes call-ring {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(200, 178, 138, .55); }
  45%      { transform: scale(1.12); box-shadow: 0 0 0 .55rem rgba(200, 178, 138, 0); }
  60%      { transform: scale(1); }
}
@keyframes call-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}
.header.is-stuck .call-now { border-color: rgba(43, 58, 46, .22); background: rgba(43, 58, 46, .05); }
.header.is-stuck .call-now:hover { background: rgba(43, 58, 46, .1); }

/* The header runs out of room before the navigation collapses, so the pieces
   drop away in order of how much they cost the visitor: first the WhatsApp
   button (the floating dock still offers it), then the number beside the call
   icon, then the icon itself once the burger menu takes over. */
@media (max-width: 1240px) {
  .header__actions { gap: .5rem; }
  .call-now__num { display: none; }
  .call-now { padding: .3rem; border: 0; background: transparent; }
  .nav { gap: clamp(.65rem, 1.3vw, 1.1rem); }
  .nav a { font-size: .6875rem; }
}
@media (max-width: 960px) { .call-now { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .call-now__ring, .call-now__num { animation: none; }
}


/* ---------------------------------------------------------------------------
   22. The contact dock — call and WhatsApp, bottom corner
--------------------------------------------------------------------------- */
.dock { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }

.dock__toggle {
  position: relative;
  width: 3.5rem; height: 3.5rem;
  border: 0; border-radius: 50%;
  background: var(--whatsapp, #128C7E);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(6, 10, 8, .34);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease);
}
.dock__toggle:hover { transform: scale(1.06); }
.dock__toggle .icon { width: 1.45rem; height: 1.45rem; transition: opacity .2s var(--ease), transform .3s var(--ease-out); }
.dock__toggle .dock__x { position: absolute; opacity: 0; transform: rotate(-45deg); }
.dock[data-open] .dock__toggle { background: var(--ink); }
.dock[data-open] .dock__toggle > .icon:first-of-type { opacity: 0; transform: rotate(45deg); }
.dock[data-open] .dock__x { opacity: 1; transform: rotate(0); }

/* A ring that breathes outwards, so the launcher reads as "talk to someone"
   without adding another moving element to the page. */
.dock__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(18, 140, 126, .5);
  animation: dock-pulse 2.4s var(--ease-out) infinite;
}
.dock[data-open] .dock__pulse { animation: none; }
@keyframes dock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(18, 140, 126, .5); }
  70%  { box-shadow: 0 0 0 1.1rem rgba(18, 140, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 140, 126, 0); }
}

.dock__menu {
  display: grid; gap: .5rem;
  justify-items: end;
}
.dock__item {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .62rem 1rem;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  font-size: .8125rem; font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(6, 10, 8, .22);
  transform: translateY(8px) scale(.96);
  opacity: 0;
  transition: transform .32s var(--ease-out), opacity .32s var(--ease), background .2s var(--ease);
}
.dock[data-open] .dock__item { transform: none; opacity: 1; }
.dock[data-open] .dock__item:nth-child(2) { transition-delay: .05s; }
.dock[data-open] .dock__item:nth-child(3) { transition-delay: .1s; }
.dock__item .icon { width: 1.05rem; height: 1.05rem; flex: none; }
.dock__item--wa   { background: var(--whatsapp, #128C7E); color: #fff; }
.dock__item--call { background: var(--brass); color: #14201a; }
.dock__item:hover { filter: brightness(1.06); }

@media (max-width: 640px) {
  .dock__toggle { width: 3.1rem; height: 3.1rem; }
  .dock__item { font-size: .75rem; padding: .55rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dock__pulse { animation: none; }
  .dock__item { transition: opacity .01s; transform: none; }
}


/* ---------------------------------------------------------------------------
   23. Booking — date range, free guest entry, no prices
--------------------------------------------------------------------------- */

/* The chosen stay, written out above the fields. */
.stay-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: 1.1rem 0 .35rem;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm, 12px);
  background: rgba(43, 58, 46, .05);
  font-size: .8125rem;
}
.stay-summary__hint { color: var(--muted); }
.stay-summary__leg { display: inline-flex; flex-direction: column; line-height: 1.35; }
.stay-summary__leg b {
  font-family: var(--font-body); font-weight: 500;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.stay-summary__sep { color: var(--brass); font-size: 1.1rem; }
.stay-summary__clear {
  margin-left: auto;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.stay-summary__clear:hover { color: var(--ink); }

.stay-nights {
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1.2;
  padding-block: .35rem;
}

/* The guest field takes a typed number as readily as a tap on the steppers. */
.stepper__input {
  width: 4.5rem; min-width: 0;
  border: 0; background: none;
  font: inherit; font-size: 1.05rem; font-weight: 500;
  text-align: center; color: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input:focus { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }

/* Calendar range: the two ends are solid, the nights between them tinted. */
.cal__day.is-between {
  background: rgba(200, 178, 138, .22);
  border-radius: 0;
}
.cal__day.is-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal__day.is-end   { border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.cal__day.is-start.is-end { border-radius: var(--radius-sm, 10px); }

@media (max-width: 560px) {
  .stay-summary { font-size: .75rem; }
  .stay-summary__clear { margin-left: 0; }
}


/* On a narrow screen the panel spans the column, so it squares off rather than
   fading — a diagonal fade across 340px just looks like a smudge. */
@media (max-width: 780px) {
  .hero__content {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-radius: 0;
  }
  .hero__content::before {
    background: linear-gradient(180deg, rgba(8, 13, 10, .3) 0%, rgba(8, 13, 10, .62) 30%, rgba(8, 13, 10, .62) 100%);
    -webkit-mask-image: none; mask-image: none;
  }
}

/* Where backdrop-filter is unsupported the wash alone must carry it, so it is
   a little stronger. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__content::before {
    background: linear-gradient(
      100deg,
      rgba(8, 13, 10, .74) 0%,
      rgba(8, 13, 10, .62) 45%,
      rgba(8, 13, 10, .3)  78%,
      rgba(8, 13, 10, 0)   100%);
  }
}