/* ==========================================================================
   The Vista — styles
   ========================================================================== */

:root {
  --paper: #FAF8F5;
  --paper-2: #F1EEE8;
  --ink: #1E2326;
  --ink-soft: #4A5053;
  --stone: #8A8F8C;
  --line: #E2DDD5;
  --accent: #2F4A4A;        /* reserved for booking buttons */
  --accent-hover: #233838;
  --white: #FFFFFF;
  --on-dark-soft: rgba(250, 248, 245, .72);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-h1: clamp(3rem, 5.5vw, 4.5rem);              /* 48–72px */
  --fs-h2: clamp(2.25rem, 3.6vw, 3.25rem);          /* 36–52px */
  --fs-h3: clamp(1.75rem, 2.6vw, 2.5rem);
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem); /* 16–18px */
  --fs-lead: clamp(1.125rem, 1rem + .4vw, 1.3rem);
  --fs-lines: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-label: clamp(.6875rem, .66rem + .1vw, .8125rem); /* 11–13px */

  /* Spacing */
  --gutter: clamp(16px, 5vw, 72px);
  --section: clamp(64px, 9vh, 112px);
  --header-h: 76px;
  --overlap: 0px;           /* how far the booking bar overlaps the hero */
  --ease: cubic-bezier(.22, .61, .36, 1);
}
/* Wide screens: the one-row booking bar sits on the hero's bottom edge, fully in the first view */
@media (min-width: 1101px) { :root { --overlap: 100px; } }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--header-h) - 1px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1.25em; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1.25em;
}
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-soft); }
/* Short poetic lines, one per row */
.lines {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lines);
  line-height: 1.45;
  margin: 1.4em 0 0;
}
.lines span { display: block; }
.meta {
  font-size: var(--fs-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 1.8em 0 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
}
.skip-link:focus { top: 16px; }

.center { text-align: center; }

/* ----- Buttons & links ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: 14px 30px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn::after {
  content: "→";
  font-size: 1.1em;
  letter-spacing: 0;
  transition: transform .35s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.btn--accent { background: var(--accent); color: var(--white); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--lg { padding: 20px 40px; }
.btn--block { width: 100%; }
.btn--glow:hover { box-shadow: 0 0 0 1px rgba(250, 248, 245, .35), 0 12px 48px rgba(250, 248, 245, .28); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 44px;
  margin-top: 1.4em;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 100% 1px no-repeat;
}
.link-arrow::after { content: "→"; letter-spacing: 0; transition: transform .35s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ----- Header ----- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding: 0 var(--gutter);
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.site-header.is-solid {
  background: rgba(250, 248, 245, .92);
  color: var(--ink);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { position: relative; display: flex; gap: clamp(24px, 2.6vw, 40px); margin-left: auto; }
.site-nav a {
  padding: 10px 0;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .82;
  transition: opacity .3s;
}
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; }
/* Underline that slides to whichever section is on screen (set from main.js) */
.site-nav__indicator {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: var(--w, 0);
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateX(var(--x, 0));
  transition: transform .6s var(--ease), width .6s var(--ease), opacity .4s var(--ease);
  pointer-events: none;
}
.site-nav.has-active .site-nav__indicator { opacity: 1; }

.btn--header {
  min-height: 42px;
  padding: 10px 22px;
  color: inherit;
  border-color: rgba(250, 248, 245, .6);
}
.btn--header::after { display: none; }
.btn--header:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-header.is-solid .btn--header { background: var(--accent); color: var(--white); border-color: var(--accent); }
.site-header.is-solid .btn--header:hover { background: var(--accent-hover); }

/* Hamburger (≤900px): two hairlines that cross into an × */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-left: auto;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
.menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* ----- Mobile menu ----- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.mobile-menu__nav a:nth-child(2) { transition-delay: .06s; }
.mobile-menu__nav a:nth-child(3) { transition-delay: .12s; }
.mobile-menu__nav a:nth-child(4) { transition-delay: .18s; }
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(1) { transition-delay: .1s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) { transition-delay: .16s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) { transition-delay: .22s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) { transition-delay: .28s; }
.mobile-menu__foot { opacity: 0; transition: opacity .6s var(--ease) .1s; }
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transition-delay: .34s; }
.mobile-menu__social { display: flex; gap: 28px; margin: 20px 0 0; }
.mobile-menu__social a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
html.menu-open, html.menu-open body { overflow: hidden; }
html.menu-open .site-header { background: transparent; color: var(--ink); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ----- Hero ----- */
/* Scroll-to-reveal hero. JS sets --p from 0 (cliff backdrop, small property
   card) to 1 (property photo fills the frame). Without JS it rests at 1. */
.hero {
  --p: 1;
  --grow-w: 1250px;
  --grow-h: 400px;
  --slide: 150vw;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  color: var(--paper);
  overflow: hidden;
  background: var(--ink);
}
.js .hero { --p: 0; }
.hero .eyebrow { color: inherit; }

.hero__bg {
  position: absolute; inset: 0;
  opacity: calc(1 - var(--p));
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 24, 26, .18);
}

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

/* Centred in the space between the header and the booking bar that overlaps the hero */
.hero__media {
  position: absolute;
  top: calc((var(--header-h) + 100svh - var(--overlap) - 24px) / 2);
  left: 50%;
  width: calc(300px + var(--p) * var(--grow-w));
  height: calc(400px + var(--p) * var(--grow-h));
  max-width: 95vw;
  max-height: calc(100svh - var(--header-h) - var(--overlap) - 48px);
  transform: translate(-50%, -50%);
  border-radius: calc(2px + (1 - var(--p)) * 14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35);
}
.hero__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%; /* keeps the house and pool in frame when the photo goes wide */
  border-radius: inherit;
}
.hero__shade {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(20, 24, 26, .5);
  opacity: calc(.7 - var(--p) * .3);
}

.hero__title {
  position: absolute;
  top: calc((var(--header-h) + 100svh - var(--overlap) - 24px) / 2);
  left: 0; right: 0;
  transform: translateY(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  text-align: center;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.hero__word { display: block; white-space: nowrap; }
.hero__word--left,  .hero__meta--left  { transform: translateX(calc(var(--p) * var(--slide) * -1)); }
.hero__word--right, .hero__meta--right { transform: translateX(calc(var(--p) * var(--slide))); }

.hero__meta {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
.hero__meta--left  { top: calc(100% + 20px); }
.hero__meta--right { top: calc(100% + 48px); opacity: .75; }

/* Revealed state: tagline + booking button over the property photo */
.hero__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(0deg, rgba(20,24,26,.55) 0%, rgba(20,24,26,0) 100%);
  transition: opacity .7s var(--ease), visibility .7s;
}
.js .hero:not(.is-revealed) .hero__content { opacity: 0; visibility: hidden; }
.hero__sub {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.25;
  max-width: 22ch;
  margin-bottom: 1.1em;
}
@media (max-width: 767px) {
  .hero { --grow-w: 650px; --grow-h: 200px; --slide: 180vw; }
}

/* ----- Booking bar ----- */
.booking {
  position: relative;
  z-index: 5;
  margin-top: calc(var(--overlap) * -1);
  padding: 0 var(--gutter) clamp(40px, 6vh, 72px);
  /* Charcoal starts below the part that overlaps the hero, so the hero photo is never covered */
  background: linear-gradient(transparent var(--overlap), var(--ink) var(--overlap));
}
.booking__bar {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr auto;
  min-height: var(--overlap);
  max-width: 1240px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -30px rgba(20, 24, 26, .45);
}
.booking__bar > * { min-width: 0; } /* let date fields shrink on narrow screens */
.booking__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 28px;
}
.booking__intro .eyebrow { margin: 0 0 6px; color: var(--ink); }
.booking__price { margin: 0; font-family: var(--serif); font-size: 1.25rem; color: var(--ink-soft); line-height: 1.3; }
.booking__price strong { font-weight: 400; color: var(--ink); }
.booking__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 24px;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.booking__field:hover, .booking__field:focus-within { background: var(--paper-2); }
.booking__field .eyebrow { margin: 0 0 4px; }
.booking__control { position: relative; display: block; }
.booking__control input,
.booking__control select {
  display: block;
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.booking__control select {
  padding-right: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238A8F8C' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 2px center / 10px no-repeat;
}
.booking__control input::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
/* "Add date" placeholder: main.js marks empty date fields with .is-empty.
   Without JS the browser's own date field shows instead. */
.booking__ph {
  display: none;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.js .booking__control.is-empty .booking__ph { display: block; }
.js .booking__control.is-empty input:not(:focus) { color: transparent; }
.js .booking__control.is-empty input:focus + .booking__ph { display: none; }
.booking__field:focus-within .eyebrow { color: var(--ink); }
.booking__cta { min-height: 100%; padding: 0 34px; }

/* ----- 3D property experience: cinematic scroll tour ----- */
.tour { background: var(--ink); color: var(--paper); }
.tour .eyebrow { color: var(--on-dark-soft); }
.tour__track { scroll-margin-top: 0; }

/* ----- Image stream (tour intro) -----
   Two rails of photo cards ride from the vanishing point toward the viewer.
   Every length is in cqw (% of the section's width), so the corridor keeps
   its proportions at any size. Cards and keyframes are built in main.js. */
.stream {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
}
/* The layer is the cqw reference; on phones it is wider than the screen so the cards stay large */
.stream__layer { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
.stream__view { position: absolute; inset: 0; }
.stream__rails { position: absolute; inset: 0; transform-style: preserve-3d; }
@media (max-width: 700px) { .stream__layer { inset: 0 -36%; } }
.stream__card {
  position: absolute;
  left: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.stream__card img { width: 100%; height: 100%; object-fit: cover; }
.stream.is-paused .stream__card { animation-play-state: paused; } /* off screen: save battery */
/* Darken the top and bottom so the text reads; the corridor stays clear in the middle */
.stream::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(30, 35, 38, .55) 24%, rgba(30, 35, 38, 0) 40%, rgba(30, 35, 38, 0) 64%, rgba(30, 35, 38, .6) 78%, var(--ink) 100%);
  pointer-events: none;
}
.stream__content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: calc(var(--header-h) + 24px) var(--gutter) clamp(40px, 7vh, 72px);
  text-align: center;
}
.stream__top, .stream__bottom { max-width: 640px; margin: 0 auto; }
.stream__top h2 { margin-bottom: .2em; }
.stream__top .lead { margin: 0; color: var(--paper); }
.stream__bottom > p:first-child { margin: 0 auto; max-width: 34em; color: var(--on-dark-soft); }
.stream__bottom .lines { margin-top: 1em; }
.stream__bottom .link-arrow { margin-top: 1em; }

/* Without motion (or before JS): the chapters simply stack */
.tour__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 var(--gutter) var(--section);
}
.tour__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.tour__frame:first-child { display: none; }
.tour__frame img { width: 100%; height: 100%; object-fit: cover; }
.tour__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,24,26,.6) 0%, rgba(20,24,26,0) 50%);
  pointer-events: none;
}
.tour__caption {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(24px, 4vw, 48px);
  max-width: 440px;
}
.tour__caption .eyebrow { color: var(--on-dark-soft); margin-bottom: .8em; }
.tour__caption p:last-child {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.25;
}
.tour__marker, .tour__rail, .tour__hint { display: none; }

/* With motion: a pinned full-screen stage that the scroll "films" */
.motion .tour__track { height: 500vh; }
.motion .tour__stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}
.motion .tour__frame {
  position: absolute;
  inset: 0;
  display: block;
  aspect-ratio: auto;
  opacity: 0;
}
.motion .tour__frame:first-child { opacity: 1; }
.motion .tour__frame img {
  position: absolute;
  top: 0; left: 0;
  max-width: none;
  width: 100%; height: 100%; /* replaced by the camera's sizing in main.js */
  transform-origin: 50% 50%;
  will-change: transform;
}
.motion .tour__frame::after {
  background: linear-gradient(0deg, rgba(20,24,26,.62) 0%, rgba(20,24,26,.12) 45%, rgba(20,24,26,.22) 100%);
}
.motion .tour__caption {
  left: var(--gutter);
  bottom: clamp(48px, 9vh, 96px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.motion .tour__frame.is-active .tour__caption { opacity: 1; transform: none; }

/* Hotspot ring on the feature of the current chapter */
.motion .tour__marker {
  display: block;
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(250, 248, 245, .9);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.motion .tour__marker::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--paper);
}
.motion .tour__marker::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(250, 248, 245, .6);
  border-radius: 50%;
  animation: tour-ring 3.2s var(--ease) infinite;
}
.motion .tour__marker.is-visible { opacity: 1; }
@keyframes tour-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }

.motion .tour__rail {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
}
.tour__rail button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(250, 248, 245, .5);
  font-size: var(--fs-label);
  letter-spacing: .2em;
  cursor: pointer;
  transition: color .4s var(--ease);
}
.tour__rail button::before {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width .5s var(--ease);
}
.tour__rail button:hover, .tour__rail button[aria-current] { color: var(--paper); }
.tour__rail button[aria-current]::before { width: 32px; }

.motion .tour__hint {
  display: block;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28px;
  margin: 0;
  transform: translateX(-50%);
  color: var(--on-dark-soft);
  transition: opacity .6s var(--ease);
}
.tour__stage.is-started .tour__hint { opacity: 0; }

/* ----- Section headings ----- */
.section-head { max-width: 760px; margin: 0 auto clamp(36px, 6vh, 60px); text-align: center; }
.section-head h2 { margin: 0; }
.section-head h2 + p { margin: 1em auto 0; max-width: 34em; color: var(--ink-soft); }

/* ----- Rooms (feature rows) ----- */
.rooms { padding: var(--section) 0; }
.feature {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  margin-bottom: clamp(48px, 8vh, 96px);
}
.feature:last-child { margin-bottom: 0; }
.feature__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
/* Oversized wrapper gives the parallax room to drift without showing edges */
.parallax { position: absolute; inset: -8% 0; }
.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__text {
  padding: 32px clamp(32px, 6vw, 112px);
  max-width: 620px;
}
.feature__text > p:not(.eyebrow):not(.lines):not(.meta) { color: var(--ink-soft); }
.feature__text h3 { margin-bottom: .5em; }

.feature--flip { grid-template-columns: 6fr 5fr; }
.feature--flip .feature__media { order: 2; }
.feature--flip .feature__text { justify-self: end; }

/* ----- Cinematic ocean section & final CTA ----- */
.cinematic, .final {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--paper);
  overflow: hidden;
  padding: var(--section) var(--gutter);
}
.cinematic .eyebrow, .final .eyebrow { color: var(--on-dark-soft); }
/* Extends above and below the section so the parallax drift never shows an edge */
.cinematic__bg, .final__bg {
  position: absolute; inset: -15% 0;
  background-size: cover;
  background-position: center;
}
.final__bg { background-position: center 40%; }
.cinematic::after, .final::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 24, 26, .38);
}
.final::after { background: rgba(20, 24, 26, .48); }
.cinematic__content, .final__content { position: relative; z-index: 1; }
.cinematic h2, .final h2 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
.cinematic h2 { margin-bottom: .7em; }
.cinematic__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lines);
  line-height: 1.75;
}

.final h2 { max-width: 16ch; margin: 0 auto .45em; }
.final__brand {
  margin: 0 0 .5em;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
}
.final__meta {
  margin: 0 0 2.2em;
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.final__note {
  margin: 1.6em 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lines);
  color: rgba(250, 248, 245, .85);
}

/* ----- Zoom parallax: inside the villa -----
   A collage of interior photos. While the 300vh track scrolls past, the stage
   stays pinned and each full-screen layer scales up about the centre, so the
   tiles rush outward and the centre photo ends up filling the screen.
   Tile sizes/offsets match the original component (vw/vh units). */
.zoom { background: var(--paper); }
.zoom__track { position: relative; }
.zoom__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.motion .zoom__track { height: 350vh; } /* zoom, then a hold for the message */
.motion .zoom__stage { position: sticky; top: 0; }

/* "Your view is waiting." — fades in once the centre photo fills the screen.
   Without motion it simply sits over the collage. */
.zoom__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background: rgba(20, 24, 26, .46);
  pointer-events: none;
}
.zoom__content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header-h) var(--gutter) 0;
  text-align: center;
  color: var(--paper);
  pointer-events: none;
}
.zoom__content h2 { font-size: clamp(2.5rem, 4.4vw, 4rem); margin-bottom: .7em; }
.motion .zoom__scrim,
.motion .zoom__content h2,
.motion .zoom__content li { opacity: 0; } /* main.js fades these in with scroll */
/* No motion: show the end state — the living room full-bleed under the message */
html:not(.motion) .zoom__layer:not(:first-child) { display: none; }
html:not(.motion) .zoom__tile--0 { width: 100%; height: 100%; }
.zoom__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.zoom__tile {
  position: relative;
  width: 25vw;
  height: 25vh;
  overflow: hidden;
}
.zoom__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}
.zoom__tile--1 { top: -30vh;   left: 5vw;     width: 35vw; height: 30vh; }
.zoom__tile--2 { top: -10vh;   left: -25vw;   width: 20vw; height: 45vh; }
.zoom__tile--3 {               left: 27.5vw;  width: 25vw; height: 25vh; }
.zoom__tile--4 { top: 27.5vh;  left: 5vw;     width: 20vw; height: 25vh; }
.zoom__tile--5 { top: 27.5vh;  left: -22.5vw; width: 30vw; height: 25vh; }
.zoom__tile--6 { top: 22.5vh;  left: 25vw;    width: 15vw; height: 15vh; }

/* ----- Gallery ----- */
.gallery { padding: var(--section) var(--gutter); background: var(--paper-2); }
.gallery__layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
}
.gallery__layout > * { min-width: 0; } /* the thumbnail strip must not widen the column */
.gallery__feature {
  display: block;
  width: 100%;
  height: min(78vh, 820px);
  padding: 0;
  border: 0;
  background: var(--line);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery__feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.gallery__feature:hover img { transform: scale(1.03); }
.gallery__feature:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.gallery__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
}
.gallery__caption {
  flex: 1;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lines);
  line-height: 1.3;
}
.gallery__counter {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.gallery__arrows { display: flex; gap: 8px; }
.gallery__arrow {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--stone);
  background: transparent;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.gallery__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.gallery__side { display: flex; flex-direction: column; gap: 24px; }
.gallery__tabs { display: flex; flex-wrap: wrap; gap: 0 26px; }
.gallery__tabs button {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.gallery__tabs button:hover { color: var(--ink); }
.gallery__tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.gallery__thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery__thumbs li[hidden] { display: none; }
.gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  background: var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: transform .5s var(--ease);
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), opacity .4s var(--ease);
}
.gallery__thumb::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .3s var(--ease);
}
.gallery__thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 2px var(--ink); }
.gallery__thumb:not([aria-current="true"]) img { opacity: .78; }
.gallery__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .gallery__thumb:hover { transform: translateY(-4px); }
  .gallery__thumb:hover img { transform: scale(1.06); opacity: 1; }
}
.gallery__all { align-self: flex-start; }

/* ----- Reviews ----- */
.reviews {
  background: var(--paper);
  padding: var(--section) var(--gutter);
  text-align: center;
}
.reviews__pull { margin: 0 auto clamp(40px, 7vh, 72px); }
.reviews__pull p {
  max-width: 18ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
}
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1100px;
  margin: 0 auto;
}
.review { position: relative; isolation: isolate; margin: 0; }
.review blockquote { margin: 0; }
/* Large, faint quotation mark behind each quote */
.review::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: -.42em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 9rem;
  line-height: 1;
  color: var(--line);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--base, 0s) + var(--i, 0) * var(--stagger) + .15s);
}
.review p {
  margin: 0 0 1em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.9vw, 1.65rem);
  line-height: 1.4;
}
.review figcaption {
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone);
}
.rating__stars { letter-spacing: .18em; }
.rating__stars span {
  color: var(--ink);
  transition: color .5s var(--ease) calc(var(--base, 0s) + var(--i, 0) * var(--stagger) + .3s + var(--s) * .1s);
}

/* ----- Footer ----- */
.site-footer {
  padding: clamp(56px, 8vh, 88px) var(--gutter) 32px;
  background: var(--ink);
  color: var(--paper);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250, 248, 245, .14);
}
.site-footer__brand p {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lines);
  color: var(--on-dark-soft);
}
.site-footer .eyebrow { color: var(--stone); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer ul a, .site-footer__legal a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.site-footer ul a:hover, .site-footer ul a:focus-visible,
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { background-size: 100% 1px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  font-size: var(--fs-label);
  letter-spacing: .12em;
  color: var(--stone);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; gap: 24px; }

/* ----- Mobile sticky booking bar ----- */
.sticky-book {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 248, 245, .96);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
  display: none;
}
.sticky-book.is-visible { transform: none; }
html.menu-open .sticky-book { transform: translateY(110%); }

/* ----- Lightbox ----- */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20, 24, 26, .96);
  color: var(--paper);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; } /* the dialog paints its own backdrop so it can fade */
.lightbox__img {
  max-width: min(92vw, 1600px);
  max-height: 78vh;
  object-fit: contain;
}
.lightbox__counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
}
.lightbox__btn {
  position: absolute;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--paper);
  font: 300 2.5rem/1 var(--serif);
  cursor: pointer;
  opacity: .8;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { opacity: 1; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__book { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ==========================================================================
   Scroll motion
   Only active under html.motion (JS on, reduced motion off). main.js adds
   .is-in to each .reveal the first time it scrolls into view.
   - .reveal                  the whole block fades and rises
   - .reveal--group           block stays put; its .r-item children stagger in
                              (--i = order, --stagger = gap, --base = start delay)
   - .r-wipe                  photo uncovered by a wipe from its own side
   Hidden states are written as ":not(.is-in)" so the revealed state is
   simply the element's normal styling.
   ========================================================================== */
:root { --rise: 24px; --stagger: .12s; }

.reveal { transition: opacity 1.1s var(--ease) var(--delay, 0s), transform 1.1s var(--ease) var(--delay, 0s); }
.motion .reveal:not(.is-in):not(.reveal--group) { opacity: 0; transform: translateY(var(--rise)); }

.r-item {
  --d: calc(var(--base, 0s) + var(--i, 0) * var(--stagger));
  transition: opacity .9s var(--ease) var(--d), transform .9s var(--ease) var(--d);
}
/* Buttons keep instant hover feedback; only the entrance is staggered */
.btn.r-item {
  transition-property: opacity, transform, background-color, color, box-shadow;
  transition-duration: .9s, .9s, .35s, .35s, .35s;
  transition-delay: var(--d), var(--d), 0s, 0s, 0s;
  transition-timing-function: var(--ease);
}
.motion .reveal:not(.is-in) .r-item { opacity: 0; transform: translateY(var(--rise)); }

/* Feature photos: wipe in from the side they sit on, while the image settles from a slight zoom */
.r-wipe { transition: clip-path 1.3s var(--ease); }
.motion .reveal:not(.is-in) .r-wipe { clip-path: inset(0 100% 0 0); }
.motion .reveal.feature--flip:not(.is-in) .r-wipe { clip-path: inset(0 0 0 100%); }
.motion .feature:not(.is-in) .feature__media img { transform: scale(1.1); }

/* Gallery: the large photo settles from a slight zoom */
.motion .gallery__viewer:not(.is-in) .gallery__feature img { transform: scale(1.08); }

/* Reviews: stars fill one by one, quote marks drift up behind the quotes */
.motion .reviews:not(.is-in) .rating__stars span { color: var(--line); }
.motion .reviews:not(.is-in) .review::before { opacity: 0; transform: translate(-50%, 16px); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1100px) {
  .booking { padding-top: 24px; }
  .booking__bar { grid-template-columns: repeat(3, 1fr); }
  .booking__intro { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 16px 24px; }
  .booking__intro .eyebrow { margin: 0; }
  .booking__field:nth-of-type(1) { border-left: 0; }
  .booking__cta { grid-column: 1 / -1; min-height: 56px; }

  .gallery__layout { grid-template-columns: 1fr 1fr; }
  .gallery__thumbs { grid-template-columns: repeat(2, 1fr); }

  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* Navigation switches to the hamburger; rows stack */
@media (max-width: 900px) {
  .site-nav, .btn--header { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { display: flex; }

  .motion .tour__track { height: 420vh; }
  .tour__rail { right: 12px; }
  .tour__rail button::before { width: 10px; }
  .tour__rail button[aria-current]::before { width: 20px; }

  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .feature--flip .feature__text { justify-self: start; }
  .feature__media { aspect-ratio: 4 / 3; }
  .feature__text { padding: 28px var(--gutter) 0; }

  .gallery__layout { grid-template-columns: 1fr; }
  .gallery__feature { height: min(72vh, 120vw); }
  .gallery__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gallery__tabs::-webkit-scrollbar { display: none; }
  .gallery__tabs button { flex: none; }
  /* Thumbnails become a sideways-scrolling strip */
  .gallery__thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 26%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 4px var(--gutter);
  }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .gallery__thumbs li { scroll-snap-align: start; }

  .reviews__grid { grid-template-columns: 1fr; gap: 56px; }

  .sticky-book { display: block; }
  .site-footer { padding-bottom: 112px; } /* clear the sticky bar */
}

/* Mobile */
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  .wordmark { font-size: 1.15rem; letter-spacing: .3em; }

  .hero .btn--lg { width: 100%; padding: 18px 20px; }

  .booking__bar { grid-template-columns: 1fr 1fr; }
  .booking__intro { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; }
  .booking__field { padding: 14px 20px; }
  .booking__field:nth-of-type(2) { border-left: 1px solid var(--line); }
  .booking__field:nth-of-type(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }

  .tour__stage { grid-template-columns: 1fr; }
  .motion .tour__caption { right: 64px; bottom: 112px; } /* clear the sticky booking bar */
  .motion .tour__hint { bottom: 96px; }

  .feature__media { aspect-ratio: 4 / 5; }

  .gallery__controls { flex-wrap: wrap; }
  .gallery__caption { flex-basis: 100%; }
  .gallery__counter { margin-right: auto; }
  .gallery__thumbs { grid-auto-columns: 38%; }
  .gallery__all { align-self: stretch; }

  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-footer__bottom { flex-direction: column; }
}

/* Small tablets: stack the booking fields into two columns as well */
@media (min-width: 701px) and (max-width: 900px) {
  .booking__bar { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  :root { --rise: 12px; --stagger: .08s; }
  /* Stacked layout on phones: photos wipe from the bottom up */
  .motion .reveal:not(.is-in) .r-wipe,
  .motion .reveal.feature--flip:not(.is-in) .r-wipe { clip-path: inset(100% 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}