/* ═══════════════════════════════════════════════════════════════════════════
   DUMA — Luxury Jungle Villas
   Cinematic sticky-stage scroll experience.

   01 · FONT + ROOT TOKENS
   02 · GLOBAL RESET
   03 · LOADER
   04 · SCROLL RIG (cinema-scroll / stage / world)
   05 · VIDEO LAYERS + OVERLAY + VEILS
   06 · HEADER
   07 · BUTTONS
   08 · HERO
   09 · OVERVIEW PANEL
   10 · GALLERY PANEL
   11 · PAPER STAGE (experience / amenities / booking)
   12 · TRANSITION PANEL
   13 · SECOND CHAPTER (story / strip / quote / numbers / discover)
   14 · FINAL BOOKING + FOOTER
   15 · MEDIA QUERIES
   16 · REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · FONT + ROOT TOKENS ─────────────────────────────────────────────── */
/* One typeface does the talking: Ogg sets display AND every small label
   (kickers, facts, captions, nav, buttons). Archivo is only for paragraphs. */

@font-face {
  font-family: "Ogg Medium";
  src: url("https://dcym8fthxf5uu.cloudfront.net/fonts/247a073c-29f5-4a89-aa3a-741020f346fc/OggText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* pointer parallax */
  --mx: 0; --my: 0;

  /* video layers */
  --video1-opacity: 1; --video2-opacity: 0;
  --overlay-top-alpha: 0.22; --overlay-bottom-alpha: 0.42;
  --overlay-left-alpha: 0; --overlay-dim: 0;

  /* hero */
  --title-y: 0px; --title-scale: 1; --title-opacity: 1;
  --intro-copy-y: 0px; --intro-copy-opacity: 1;

  /* overview panel */
  --overview-opacity: 0; --overview-x: -60px; --overview-y: 0px;

  /* spec line */
  --spec-opacity: 0; --spec-y: 24px;

  /* gallery panel */
  --gallery-opacity: 0; --gallery-y: 40px; --gallery-rail: 0;

  /* warm paper stage + its three panels */
  --paper-opacity: 0;
  --experience-opacity: 0; --experience-y: 40px;
  --amenities-opacity: 0; --amenities-y: 40px;

  /* transition panel */
  --transition-opacity: 0; --transition-y: 100vh;

  /* second chapter */
  --story2-opacity: 0; --story2-y: 32px; --story2-x: 0px;
  --strip-opacity: 0; --strip-x: 0px;
  --quote-opacity: 0; --quote-y: 32px;
  --discover-opacity: 0; --discover-y: 32px;
  --endveil-opacity: 0;
  --final-opacity: 0; --final-y: 40px;
  --footer-opacity: 0;

  /* generic reveal metrics */
  --reveal-y: 32px; --reveal-blur: 10px;

  /* palette */
  --ink:    #1F1D1A;
  --paper:  #EFE9DF;
  --accent: #B58B5A;
  --card:   #F7F3EC;
  --shadow: rgba(0, 0, 0, 0.14);

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);

  font-family: Archivo, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
}

/* ── 02 · GLOBAL RESET ───────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); -webkit-font-smoothing: antialiased; }
body { min-height: 100%; margin: 0; overflow-x: clip; background: var(--paper); }
button { border: 0; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, figure, dl { margin: 0; }
img { display: block; }
.site-shell { min-height: 100vh; }

/* ── 03 · LOADER ─────────────────────────────────────────────────────────── */

.loader {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  transition: opacity 1200ms var(--ease), visibility 0s linear 1200ms;
}
.loader span {
  font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: clamp(48px, 7vw, 96px); line-height: 1; color: var(--ink);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.loader.is-marked span { opacity: 1; transform: translateY(0); }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── 04 · SCROLL RIG ─────────────────────────────────────────────────────── */

/* Total scrub distance is mirrored by TOTAL_SCROLL in script.js. */
.cinema-scroll { position: relative; height: calc(100vh + 17650px); }

.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px;
  overflow: hidden; isolation: isolate; background: var(--paper);
}

.world { position: absolute; inset: 0; overflow: hidden; }

/* Chapters are stacked on top of each other, so an inactive panel must never
   intercept a click meant for the chapter actually on screen. JS marks the
   live chapter with .is-live. */
.hero-content, .overview-panel, .spec-line, .gallery-panel, .experience-panel,
.amenities-panel, .transition-panel, .second-story,
.strip-section, .quote-section, .discover-section,
.final-booking, .site-footer { pointer-events: none; }
.is-live { pointer-events: auto; }

/* Every cinematic layer is absolutely stacked inside .world. */
.hero-video, .video-overlay, .end-veil, .site-header, .hero-content,
.overview-panel, .spec-line, .gallery-panel, .paper-stage, .experience-panel,
.amenities-panel, .transition-panel, .second-story,
.strip-section, .quote-section, .discover-section,
.final-booking, .site-footer, .scroll-indicator { position: absolute; }

/* ── 05 · VIDEO LAYERS + OVERLAY + VEILS ─────────────────────────────────── */

.hero-video {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none; will-change: transform, opacity, filter;
  background: #14120F;
}
.video-one { z-index: 0; opacity: var(--video1-opacity); }
.video-two { z-index: 3; opacity: var(--video2-opacity); }

/* Readability only — never hides the footage.
   Sits above BOTH videos so chapter two gets the same treatment,
   and lifts away as the closing cream veil takes over. */
.video-overlay {
  inset: 0; z-index: 5; pointer-events: none; opacity: var(--overlay-master, 1);
  background:
    /* chapter dim — lets photography and editorial type sit on the footage */
    linear-gradient(rgba(0, 0, 0, var(--overlay-dim)), rgba(0, 0, 0, var(--overlay-dim))),
    /* side scrim — only while copy sits on the left of the frame */
    linear-gradient(90deg,
      rgba(0, 0, 0, var(--overlay-left-alpha)) 0%,
      rgba(0, 0, 0, calc(var(--overlay-left-alpha) * 0.5)) 38%,
      transparent 64%),
    linear-gradient(180deg,
      rgba(0, 0, 0, var(--overlay-top-alpha)) 0%,
      transparent 40%, transparent 60%,
      rgba(0, 0, 0, var(--overlay-bottom-alpha)) 100%);
}

/* Closing veil that swallows the end of video two. */
.end-veil {
  inset: 0; z-index: 4; pointer-events: none;
  background: var(--card); opacity: var(--endveil-opacity);
}

/* ── 06 · HEADER ─────────────────────────────────────────────────────────── */

.site-header {
  /* above every chapter layer — the navigation is never covered */
  top: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  align-items: center; gap: 32px;
  padding: var(--header-pad, 32px);
  color: rgba(239, 233, 223, 0.86);
  transition: padding 600ms var(--ease), color 900ms var(--ease);
}
.site-logo {
  justify-self: start; white-space: nowrap;
  font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 22px; line-height: 1; color: #EFE9DF;
  transform: scale(var(--logo-scale, 1)); transform-origin: 0 50%;
  transition: transform 600ms var(--ease), color 900ms var(--ease);
}
.site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 2.2vw, 44px); }
.site-nav a {
  position: relative; font-family: "Ogg Medium", Georgia, serif;
  font-size: 17px; font-weight: 500; letter-spacing: .06em; line-height: 1;
  color: rgba(239, 233, 223, 0.86); padding-bottom: 4px;
  transition: color 900ms var(--ease);
}
/* Underline grows from the centre — 350ms. */
.site-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: currentColor;
  transform: translateX(-50%); transition: width 350ms var(--ease);
}
.site-nav a:hover::after { width: 100%; }

.header-spacer { justify-self: end; }

/* Over cream chapters the navigation turns to ink — colour only, no jumps. */
.site-header.is-dark { color: rgba(31, 29, 26, 0.86); }
.site-header.is-dark .site-logo { color: var(--ink); }
.site-header.is-dark .site-nav a { color: rgba(31, 29, 26, 0.78); }

/* burger — desktop hides it, the mobile block below turns it on */
.menu-toggle {
  display: none; justify-self: end;
  width: 44px; height: 44px; padding: 0; gap: 6px;
  flex-direction: column; border-radius: 999px;
  background: rgba(20, 18, 15, .38); background-image: none;
  border: 1px solid rgba(239, 233, 223, .3); box-shadow: none;
}
.menu-toggle::before, .menu-toggle::after { content: none; }
.menu-toggle span {
  display: block; width: 18px; height: 1px; background: #EFE9DF;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.menu-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.site-header.is-dark .menu-toggle { background: rgba(31, 29, 26, .08); border-color: rgba(31, 29, 26, .28); }
.site-header.is-dark .menu-toggle span { background: var(--ink); }

.mobile-menu {
  position: absolute; top: 0; left: 0; right: 0; z-index: 59;
  display: flex; flex-direction: column; gap: 4px;
  padding: 92px 24px 28px;
  /* same glass as the panels, not a solid sheet */
  background: rgba(22, 19, 16, .34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(239, 233, 223, .16);
  border-radius: 0 0 24px 24px;
  transform: translateY(-102%); transition: transform 600ms var(--ease);
  pointer-events: none;
}
.mobile-menu.is-open { transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
  padding: 14px 0; border-bottom: 1px solid rgba(239, 233, 223, .18);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
  font-family: "Ogg Medium", Georgia, serif; font-size: 26px; color: #EFE9DF;
}

/* ── 07 · BUTTONS ────────────────────────────────────────────────────────── */

button {
  --ch-black: #141414;
  --eer-black: #1b1b1b;
  --night-rider: #2e2e2e;
  --ch-white: #e1e1e1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 220px;
  height: 39px;
  padding: 0 15px;
  border: none;
  border-radius: 20px;
  background-color: var(--ch-black);
  color: #fff;
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition-duration: 0.2s;
}

/* the running edge and its glow */
button::before,
button::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 22px;
  z-index: -1;
  background: linear-gradient(45deg,
    var(--ch-black), var(--eer-black), var(--night-rider), var(--ch-white),
    var(--night-rider), var(--eer-black), var(--ch-black), var(--ch-black));
  background-size: 400%;
  animation: steam 20s linear infinite;
}
button::after {
  /* tucked in and softened — at blur(50px) two neighbouring buttons bled
     into each other and left a silver patch in the gap */
  left: 6px; top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  filter: blur(16px);
  opacity: .55;
}

@keyframes steam {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.primary.wide { width: 100%; }

/* ── 08 · HERO ───────────────────────────────────────────────────────────── */

.hero-content {
  left: 50%; top: 50%; z-index: 20;
  transform: translate3d(-50%, calc(-50% + var(--intro-copy-y)), 0);
  width: min(94vw, 900px); text-align: center;
  opacity: var(--intro-copy-opacity); will-change: transform, opacity;
}
.hero-kicker {
  display: block; margin-bottom: 24px; font-family: "Ogg Medium", Georgia, serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(239, 233, 223, 0.78);
}
.hero-title {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 14rem; font-weight: 500; line-height: 0.78; color: #EFE9DF;
  text-shadow: none; opacity: var(--title-opacity);
  transform: translate3d(0, var(--title-y), 0) scale(var(--title-scale));
  will-change: transform, opacity;
}
.hero-subtitle {
  margin-top: 30px;
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(1.4rem, 2.1vw, 2.1rem); font-weight: 500; line-height: 1.22;
  color: rgba(239, 233, 223, 0.94);
}
.hero-description {
  margin: 30px auto 0; max-width: 540px; font-family: "Ogg Medium", Georgia, serif;
  font-size: 1.24rem; font-weight: 500; line-height: 1.55;
  color: rgba(239, 233, 223, 0.9);
}
.hero-buttons { display: flex; justify-content: center; gap: 28px; margin-top: 36px; }
/* Pinned to the bottom of the frame, not stacked under the buttons. */
.scroll-indicator {
  position: absolute; left: 50%; bottom: clamp(28px, 5vh, 56px); z-index: 20;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: var(--intro-copy-opacity);
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(239, 233, 223, 0.74);
}
.mouse {
  width: 20px; height: 32px; border: 1px solid rgba(239, 233, 223, 0.45); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 6px;
}
.mouse i { width: 2px; height: 6px; border-radius: 2px; background: rgba(239, 233, 223, .7); animation: mouseDrift 2600ms var(--ease) infinite; }
@keyframes mouseDrift { 0%, 100% { transform: translateY(0); opacity: .3 } 45% { transform: translateY(9px); opacity: 1 } }

/* ── 09 · OVERVIEW PANEL ─────────────────────────────────────────────────── */

.overview-panel {
  left: clamp(40px, 5vw, 100px); top: 50%; z-index: 25;
  /* wider than a column — the card reads as a long horizontal plate */
  width: min(760px, calc(100vw - 80px));
  transform: translate3d(var(--overview-x), calc(-50% + var(--overview-y)), 0);
  opacity: var(--overview-opacity); will-change: transform, opacity;
  padding: 44px 48px; border-radius: 24px;
  background: rgba(22, 19, 16, 0.34);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(239, 233, 223, 0.18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
  color: #EFE9DF;
}
.panel-kicker {
  display: block; margin-bottom: 26px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(239, 233, 223, .28);
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 15px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(239, 233, 223, .82);
}
.overview-panel h2 {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 2.8rem; font-weight: 500; line-height: 1; color: #EFE9DF;
}
.overview-panel > p { margin-top: 20px; max-width: 520px; font-size: 1.02rem; line-height: 1.65; color: rgba(239, 233, 223, .88); }

/* facts in three columns across the width of the plate */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; margin-top: 30px; }
.feature-grid div { padding-top: 13px; border-top: 1px solid rgba(239, 233, 223, .24); }
.feature-grid dt {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(239, 233, 223, .66);
}
.feature-grid dd {
  margin: 6px 0 0; font-family: "Ogg Medium", Georgia, serif; font-size: 1.15rem;
  color: rgba(239, 233, 223, .9);
}

.price-card { margin-top: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }

.price { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.price-figure { display: flex; align-items: baseline; gap: 8px; }
.overview-panel .tag {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(239, 233, 223, .34);
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(239, 233, 223, .82);
}
.overview-panel .rating { margin-top: 0; justify-content: flex-start; }
.overview-panel .rating b { color: #EFE9DF; }
.overview-panel .rating i { color: rgba(239, 233, 223, .6); }
.price em { font-style: normal; font-family: "Ogg Medium", Georgia, serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; opacity: .68; }
.price b { font-family: "Ogg Medium", Georgia, serif; font-size: 2.6rem; font-weight: 500; line-height: 1; }
.price i { font-style: normal; font-size: 13px; opacity: .7; }
.price-actions { display: flex; gap: 24px; }

/* ── 09b · SPEC LINE — the thin beat that follows the panel ──────────────── */

.spec-line {
  left: 50%; top: 50%; z-index: 26;
  transform: translate3d(-50%, calc(-50% + var(--spec-y, 0px)), 0);
  opacity: var(--spec-opacity, 0); will-change: transform, opacity;
  width: min(1080px, calc(100vw - 80px)); text-align: center; color: #EFE9DF;
}
.spec-lede {
  margin: 0 auto; max-width: 600px;
  font-family: "Ogg Medium", Georgia, serif; font-size: clamp(1.5rem, 2.3vw, 2.3rem);
  font-weight: 500; line-height: 1.28; text-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}
.spec-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 clamp(20px, 2.4vw, 38px); margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(239, 233, 223, .26);
}
.spec-row span {
  position: relative; padding: 6px 0; font-family: "Ogg Medium", Georgia, serif;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(239, 233, 223, .82); text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.spec-row span + span::before {
  content: ""; position: absolute; left: calc(clamp(20px, 2.4vw, 38px) / -2);
  top: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
}

/* ── 10 · GALLERY PANEL ──────────────────────────────────────────────────── */

.gallery-panel {
  inset: 0; z-index: 30; overflow: hidden; pointer-events: none;
  opacity: var(--gallery-opacity); will-change: opacity;
}
/* The rail is a tall editorial column scrubbed vertically through the frame.
   Every box is 16:9, so the photographs are never cropped. */
.gallery-rail {
  position: absolute; left: 50%; top: 0; width: min(1240px, 92vw);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 2.6vw, 44px); grid-auto-flow: dense;
  transform: translate3d(-50%, var(--gallery-shift, 70vh), 0);
  will-change: transform;
}
.gallery-rail article {
  position: relative; pointer-events: auto; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 16 / 9;
  border-radius: 28px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.gallery-rail img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.gallery-rail article:hover img { transform: scale(1.03); }



/* Pairs share a row and sit at different heights — a magazine spread, not a grid. */
.gallery-rail article:nth-child(1) { grid-column: 1 / 8; }
.gallery-rail article:nth-child(2) { grid-column: 8 / 13; margin-top: 26vh; }
.gallery-rail article:nth-child(3) { grid-column: 4 / 13; margin-top: 16vh; }
.gallery-rail article:nth-child(4) { grid-column: 1 / 4; margin-top: 34vh; }
.gallery-rail article:nth-child(5) { grid-column: 1 / 9; margin-top: 18vh; }
.gallery-rail article:nth-child(6) { grid-column: 9 / 13; margin-top: 40vh; }
.gallery-rail article:nth-child(7) { grid-column: 2 / 12; margin-top: 20vh; }

/* ── 11 · PAPER STAGE (experience / amenities / booking) ─────────────────── */

/* One warm sheet carries three chapters, so the video never flickers between them. */
.paper-stage {
  position: absolute; inset: 0; z-index: 34; background: var(--paper);
  opacity: var(--paper-opacity); pointer-events: none;
}
.paper-stage::after {
  /* very slow sunlight drift — almost invisible */
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(60% 50% at 30% 20%, rgba(181, 139, 90, .12), transparent 70%);
  animation: sunDrift 32s ease-in-out infinite alternate;
}
@keyframes sunDrift { from { transform: translate3d(-3%, -2%, 0) } to { transform: translate3d(4%, 3%, 0) } }

.experience-panel, .amenities-panel {
  inset: 0; z-index: 35;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px clamp(24px, 5vw, 100px); text-align: center;
}
.experience-panel {
  opacity: var(--experience-opacity);
  transform: translate3d(0, var(--experience-y), 0);
  will-change: transform, opacity;
}
.experience-panel h2, .amenities-panel h2 {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(3rem, 5.4vw, 5.4rem); font-weight: 500; line-height: .94; color: var(--ink);
}
.experience-panel > p {
  margin: 26px auto 0; max-width: 560px; font-family: "Ogg Medium", Georgia, serif;
  font-size: 1.2rem; font-weight: 500; line-height: 1.58;
  color: rgba(31, 29, 26, .72);
}
.experience-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  width: min(1240px, 100%); margin-top: 64px; text-align: left;
}
.card {
  background: var(--card); border-radius: 24px; padding: 40px;
  box-shadow: 0 12px 40px var(--shadow);
  transform: translate3d(0, 0, 0); transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.card:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 22px 56px rgba(0, 0, 0, .16); }
.card em { font-style: normal; font-family: "Ogg Medium", Georgia, serif; font-size: 15px; letter-spacing: .2em; color: var(--accent); }
.card h3 {
  margin-top: 26px; font-family: "Ogg Medium", Georgia, serif;
  font-size: 1.7rem; font-weight: 500; line-height: 1.06; color: var(--ink);
}
.card p {
  margin-top: 14px; font-family: "Ogg Medium", Georgia, serif; font-size: 1.04rem; font-weight: 500;
  line-height: 1.55; color: rgba(31, 29, 26, .74);
}

.amenities-panel {
  opacity: var(--amenities-opacity);
  transform: translate3d(0, var(--amenities-y), 0);
  will-change: transform, opacity;
}
.amenities-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 8vw, 140px); width: min(1000px, 100%); margin-top: 56px; text-align: left;
}
.amenities-grid span {
  display: flex; align-items: center; gap: 18px; padding: 22px 0;
  border-bottom: 1px solid rgba(31, 29, 26, .1);
  font-family: "Ogg Medium", Georgia, serif; font-size: 1.18rem; color: rgba(31, 29, 26, .78);
}
.amenities-grid svg {
  width: 22px; height: 22px; flex: 0 0 22px;
  fill: none; stroke: var(--accent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}

.booking-card {
  background: var(--card); border-radius: 32px; padding: 52px 60px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .12); text-align: center;
  width: min(480px, calc(100vw - 40px));
}
/* legacy */
.booking-card .tag {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(31, 29, 26, .16);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(31, 29, 26, .7);
}
.rating { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 26px; }
.rating .stars { color: var(--accent); font-size: 13px; letter-spacing: .14em; }
.rating b { font-size: 15px; font-weight: 500; }
.rating i { font-style: normal; font-size: 13px; color: rgba(31, 29, 26, .5); }
.booking-card .price { justify-content: center; margin-top: 30px; }
.booking-card .price b { font-size: 4.2rem; }
.booking-card .primary { margin-top: 34px; }
.booking-card small { display: block; margin-top: 18px; font-size: 12px; color: rgba(31, 29, 26, .45); }

/* ── 12 · TRANSITION PANEL ───────────────────────────────────────────────── */

/* Rises a full viewport to swallow the last seconds of video one. */
.transition-panel {
  inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  opacity: var(--transition-opacity);
  transform: translate3d(0, var(--transition-y), 0);
  will-change: transform, opacity;
}
.transition-panel h2 {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 6rem; font-weight: 500; line-height: 0.9; color: #EFE9DF;
  text-shadow: 0 18px 46px rgba(0, 0, 0, .42);
}
.transition-panel p {
  margin-top: 40px; max-width: 460px; font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 1.14rem; line-height: 1.6;
  color: rgba(239, 233, 223, .82); text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}

/* ── 13 · SECOND CHAPTER ─────────────────────────────────────────────────── */

.second-story {
  inset: 0; z-index: 25;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  opacity: var(--story2-opacity);
  transform: translate3d(var(--story2-x), var(--story2-y), 0);
  will-change: transform, opacity;
}
.second-story h2 {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 500; line-height: .92; color: #EFE9DF;
  text-shadow: 0 16px 38px rgba(0, 0, 0, .28);
}
.second-story p {
  margin-top: 34px; max-width: 520px; font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 1.18rem; line-height: 1.6;
  color: rgba(239, 233, 223, .82); text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}

.strip-section {
  inset: 0; z-index: 30; display: flex; align-items: center;
  opacity: var(--strip-opacity); will-change: opacity;
}
.image-strip {
  display: flex; gap: 40px; padding: 40px clamp(40px, 8vw, 140px);
  width: 100%; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; scroll-behavior: smooth;
}
.image-strip::-webkit-scrollbar { display: none; }
.image-strip.is-dragging { cursor: grabbing; scroll-behavior: auto; }






.image-strip figure { position: relative; flex: 0 0 auto; cursor: zoom-in; }
.image-strip img {
  height: 320px; width: auto; border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .1);
  transform: scale(1.02); transition: transform 700ms var(--ease);
}
.image-strip figure:hover img { transform: scale(1.05); }


.quote-section {
  inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 120px 40px;
  opacity: var(--quote-opacity); transform: translate3d(0, var(--quote-y), 0);
  will-change: transform, opacity;
}
.quote-section blockquote {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 4rem; font-weight: 500; line-height: 1; color: #EFE9DF;
  text-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}
.quote-section p {
  margin-top: 46px; max-width: 460px; font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 1.13rem; line-height: 1.6;
  color: rgba(239, 233, 223, .74);
}

/* the three figures live in the Discover column */
.numbers-row { display: flex; gap: clamp(28px, 4vw, 64px); }
.number b {
  display: block; font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-weight: 500; line-height: 1; color: var(--accent);
}
.number span {
  display: block; margin-top: 18px; font-family: "Ogg Medium", Georgia, serif;
  font-size: 14px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(239, 233, 223, .7);
}

.discover-section {
  inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 60px;
  padding: 80px clamp(40px, 8vw, 140px);
  opacity: var(--discover-opacity); transform: translate3d(0, var(--discover-y), 0);
  will-change: transform, opacity;
}
.discover-section h2 {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(3rem, 6vw, 6rem); font-weight: 500; line-height: .92; color: #EFE9DF;
  text-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}
.discover-section .discover-copy p {
  margin-top: 30px; max-width: 400px; font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 1.13rem; line-height: 1.6; color: rgba(239, 233, 223, .74);
}
.discover-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; text-align: right; }
.discover-cta nav { display: flex; gap: 28px; }
.discover-cta nav a {
  font-family: "Ogg Medium", Georgia, serif; font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239, 233, 223, .6); transition: color 350ms var(--ease);
}
.discover-cta nav a:hover { color: #EFE9DF; }

/* ── 14 · FINAL BOOKING + FOOTER ─────────────────────────────────────────── */

.final-booking {
  inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  opacity: var(--final-opacity); transform: translate3d(0, var(--final-y), 0);
  will-change: transform, opacity;
}
.final-booking h2 {
  font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(3.4rem, 7vw, 7rem); font-weight: 500; line-height: .92; color: var(--ink);
}
.final-booking > p {
  margin-top: 34px; font-family: "Ogg Medium", Georgia, serif; font-weight: 500;
  font-size: 1.18rem; line-height: 1.6; color: rgba(31, 29, 26, .78);
}
.final-booking > p b { font-weight: 500; color: var(--ink); }
.final-booking .rating { margin-top: 40px; }

.site-footer {
  left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  padding: 60px clamp(40px, 8vw, 140px);
  border-top: 1px solid rgba(31, 29, 26, .1);
  opacity: var(--footer-opacity); will-change: opacity;
}
.site-footer .site-logo { color: var(--ink); font-size: 26px; transform: none; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 26px; }
.site-footer nav a {
  font-family: "Ogg Medium", Georgia, serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(31, 29, 26, .55); transition: color 350ms var(--ease);
}
.site-footer nav a:hover { color: var(--ink); }
.site-footer small { font-size: 12px; color: rgba(31, 29, 26, .4); }

/* ── 15 · MEDIA QUERIES ──────────────────────────────────────────────────── */

@media (max-width: 1500px) {
  .hero-title { font-size: 11rem; }
  .transition-panel h2 { font-size: 5rem; }
  .quote-section blockquote { font-size: 3.2rem; }
  .experience-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .hero-title { font-size: 7.5rem; }
  .overview-panel { left: 24px; width: calc(100vw - 48px); padding: 32px; }
  .overview-panel h2 { font-size: 2.3rem; }
  .discover-section { flex-direction: column; align-items: flex-start; justify-content: center; }
  .discover-cta { align-items: flex-start; }
  .image-strip img { height: 260px; }
}

@media (max-width: 640px) {
  .stage { min-height: 640px; }
  .site-header { grid-template-columns: 1fr auto; gap: 18px; padding: 24px; }
  .site-nav { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
  .header-spacer { display: none; }
  .site-header { grid-template-columns: 1fr auto; }

  /* the whole Experience chapter has to fit one phone screen */
  .experience-panel { padding: 86px 20px 24px; justify-content: flex-start; }
  .experience-panel h2 { font-size: 1.75rem; }
  .experience-panel > p { margin-top: 10px; font-size: .92rem; line-height: 1.4; max-width: 330px; }
  .experience-cards { margin-top: 16px; gap: 8px; }
  .card { padding: 11px 16px; border-radius: 16px; }
  .card em { font-size: 11px; letter-spacing: .16em; }
  .card h3 { margin-top: 5px; font-size: 1.02rem; line-height: 1.1; }
  .card p { margin-top: 4px; font-size: .85rem; line-height: 1.3; }

  /* figures read left to right, like everything else on a phone */
  .discover-cta { align-items: flex-start; text-align: left; gap: 26px; }
  .numbers-row { justify-content: flex-start; }
  .hero-content {
    width: min(92vw, 460px);
    padding: 30px 22px 26px;
    border-radius: 24px;
    background: rgba(22, 19, 16, .30);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 233, 223, .18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
  }
  .hero-title { font-size: 4.5rem; }
  .hero-subtitle { font-size: 1.2rem; }
  .hero-description { font-size: 0.95rem; }
  .hero-buttons { flex-direction: column; }
  .transition-panel h2 { font-size: 3rem; }
  .quote-section blockquote { font-size: 2.2rem; }
  .numbers-row { flex-wrap: wrap; gap: 20px 32px; }
  .number b { font-size: 3rem; }
  .feature-lines { margin-top: 26px; }
  .price-card { flex-direction: column; align-items: flex-start; gap: 22px; }
  .price-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .spec-row { gap: 0 18px; margin-top: 32px; }
  .spec-row span { font-size: 10px; letter-spacing: .16em; }
  .experience-cards { grid-template-columns: 1fr; }
  /* the panel must clear the fixed header, and all twelve rows must fit */
  .amenities-panel { padding-top: 96px; padding-bottom: 32px; }
  .amenities-panel h2 { font-size: 2.2rem; }
  .amenities-grid { grid-template-columns: 1fr; margin-top: 22px; }
  .amenities-grid span { padding: 10px 0; font-size: .88rem; gap: 12px; }
  .amenities-grid svg { width: 18px; height: 18px; flex: 0 0 18px; }

  /* the spec line wraps to several rows, so the bullets are dropped */
  .spec-lede { font-size: 1.24rem; }
  .spec-row { gap: 10px 16px; margin-top: 26px; padding-top: 16px; }
  .spec-row span + span::before { content: none; }

  /* photographs run two rows deep and still scroll sideways */
  .image-strip {
    display: grid; grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    gap: 12px; padding: 24px;
  }
  .image-strip img { height: 148px; }
  .booking-card { padding: 36px 28px; }
  .booking-card .price b { font-size: 3.2rem; }
  .primary, .secondary, .ghost, .outline { width: 100%; }
  .price-actions { width: 100%; margin-left: 0; flex-direction: column; }
  .discover-section { padding: 60px 24px; }
  .discover-cta nav { flex-wrap: wrap; gap: 18px; }
  .site-footer { flex-direction: column; gap: 16px; text-align: center; padding: 22px 24px 26px; }
  .site-footer nav { justify-content: center; gap: 14px 18px; }
  .site-footer .site-logo { font-size: 22px; }
  /* closing block echoes the hero plate, in warm glass on the cream */
  .final-booking {
    inset: auto 20px 250px; padding: 28px 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(31, 29, 26, .1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .1);
  }
  .final-booking h2 { font-size: 2.6rem; }
  .final-booking > p { margin-top: 20px; font-size: 1.05rem; }
  .final-booking .rating { margin-top: 26px; }
}

/* On a narrow screen the magazine spread becomes one column: every frame
   full width, stacked, still 16:9. */
@media (max-width: 900px) {
  .gallery-rail { width: min(600px, 88vw); }
  .gallery-rail article:nth-child(1),
  .gallery-rail article:nth-child(2),
  .gallery-rail article:nth-child(3),
  .gallery-rail article:nth-child(4),
  .gallery-rail article:nth-child(5),
  .gallery-rail article:nth-child(6),
  .gallery-rail article:nth-child(7) {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 9vh;
  }
  .gallery-rail article { border-radius: 20px; }
}

/* ── 16 · REDUCED MOTION ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .hero-content, .overview-panel, .transition-panel, .second-story,
  .gallery-panel, .experience-panel, .amenities-panel,
  .quote-section, .discover-section, .final-booking,
  .card, .image-strip img, .gallery-rail img { transition: none; }
  .mouse i, .paper-stage::after { animation: none; }
}


/* ── 17 · PHOTO VIEWER ───────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 40px);
  padding: clamp(20px, 5vw, 64px);
  background: rgba(16, 14, 12, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 0s linear 500ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.lb-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: min(1280px, 84vw); }
.lb-stage img {
  max-width: 100%; max-height: 76vh; border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
  opacity: 0; transform: scale(.985);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.lightbox.is-open .lb-stage img { opacity: 1; transform: scale(1); }


.lightbox button::before, .lightbox button::after { content: none; }
.lightbox button {
  width: 62px; height: 62px; flex: 0 0 62px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14); background-image: none;
  color: #fff; font-size: 22px; text-shadow: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  transition: background 300ms var(--ease), border-color 300ms var(--ease);
}
.lightbox button:hover { background: rgba(255, 255, 255, .3); border-color: #fff; }
.lb-close { position: absolute; top: clamp(20px, 4vw, 44px); right: clamp(20px, 4vw, 44px); }

@media (max-width: 640px) {
  .lightbox { flex-wrap: wrap; }
  .lb-stage { order: -1; width: 100%; }
  .lightbox button { width: 50px; height: 50px; flex: 0 0 50px; }
}

/* ── 18 · BOOKING PANEL ──────────────────────────────────────────────────── */

.booking-modal {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(16, 14, 12, .42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 0s linear 500ms;
}
.booking-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.bm-sheet {
  position: relative;
  width: min(520px, 100%); max-height: 92vh; overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background: rgba(247, 243, 236, .48);
  -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
  color: var(--ink);
  transform: translateY(16px); transition: transform 600ms var(--ease);
}
.booking-modal.is-open .bm-sheet { transform: translateY(0); }

.bm-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 999px; border: 1px solid rgba(31, 29, 26, .2);
  background: rgba(255, 255, 255, .35); background-image: none;
  color: var(--ink); font-size: 15px; box-shadow: none;
}
.bm-close::before, .bm-close::after { content: none; }
.bm-close:hover { background: rgba(255, 255, 255, .9); }

.bm-kicker {
  display: block; font-family: "Ogg Medium", Georgia, serif;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(31, 29, 26, .55);
}
.bm-sheet h2 {
  margin-top: 12px; font-family: "Ogg Medium", Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 500; line-height: .95;
}

.bm-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.bm-dates label { min-width: 0; }
.bm-dates label:last-child { grid-column: 1 / -1; }
.bm-dates span {
  display: block; margin-bottom: 7px;
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(31, 29, 26, .55);
}
.bm-dates input, .bm-dates select {
  /* iOS gives date inputs a wide intrinsic size — without this the grid
     grows past the screen and the sheet slides off to the right */
  width: 100%; min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  padding: 13px 14px;
  border-radius: 14px; border: 1px solid rgba(31, 29, 26, .18);
  background: rgba(255, 255, 255, .42);
  font-family: Archivo, system-ui, sans-serif; font-size: 15px; color: var(--ink);
}
.bm-dates input:focus, .bm-dates select:focus { outline: 1px solid var(--accent); }

.bm-summary { margin-top: 26px; }
.bm-summary div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid rgba(31, 29, 26, .1);
}
.bm-summary dt { font-size: .95rem; color: rgba(31, 29, 26, .7); }
.bm-summary dd { margin: 0; font-family: "Ogg Medium", Georgia, serif; font-size: 1.1rem; }
.bm-summary .bm-total { border-bottom: 0; padding-top: 16px; }
.bm-summary .bm-total dt { font-size: 1rem; color: var(--ink); }
.bm-summary .bm-total dd { font-size: 1.6rem; }

.bm-pay { margin-top: 20px; }
.bm-pay-label {
  display: block; margin-bottom: 12px;
  font-family: "Ogg Medium", Georgia, serif;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(31, 29, 26, .55);
}
.bm-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bm-method {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(31, 29, 26, .16);
  background: rgba(255, 255, 255, .34);
  transition: border-color 300ms var(--ease), background 300ms var(--ease),
              box-shadow 300ms var(--ease);
}
.bm-method:hover { background: rgba(255, 255, 255, .55); }
.bm-method input { position: absolute; opacity: 0; pointer-events: none; }
.bm-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 26px; flex: 0 0 40px;
  border-radius: 6px; background: rgba(255, 255, 255, .82);
}
.bm-mark svg { width: 32px; height: 20px; }
.bm-method b {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500; color: rgba(31, 29, 26, .8);
}
/* selected state */
.bm-method:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.bm-method:has(input:checked) b { color: var(--ink); }
.bm-method:has(input:focus-visible) { outline: 2px solid rgba(31, 29, 26, .25); outline-offset: 2px; }
.bm-method:last-child { grid-column: 1 / -1; }

.bm-submit { width: 100%; margin-top: 26px; }
.bm-sheet small {
  display: block; margin-top: 14px; text-align: center;
  font-size: 11.5px; line-height: 1.5; color: rgba(31, 29, 26, .45);
}

@media (max-width: 640px) {
  .booking-modal { align-items: flex-start; padding: 14px; }
  .bm-dates { grid-template-columns: 1fr; }
  .bm-sheet {
    border-radius: 24px; width: 100%; max-width: 100%;
    margin-top: 5vh; max-height: 88vh; padding: 26px 20px 24px;
  }
  .bm-sheet h2 { font-size: 2.1rem; }
  .bm-methods { grid-template-columns: 1fr; }
}