/* ============================================================
   Thalassa — coastal-nature theme
   Palette + type tokens live here; change them in one place.
   ============================================================ */
:root {
  --paper:     #fbf8f1;   /* cards / light surfaces */
  --sand:      #f2ede1;   /* page background */
  --sand-2:    #e9e1d1;   /* alt section background */
  --ink:       #21302b;   /* deep green-charcoal text */
  --ink-soft:  #57655d;
  --sea:       #14615c;   /* primary — deep teal-green */
  --sea-deep:  #0b3936;
  --foam:      #8fb3aa;   /* muted sage foam */
  --sage:      #6f8a5f;   /* leaf-green accent */
  --sage-deep: #4f6642;
  --brass:     #b1893c;   /* warm sun / brass accent */
  --brass-soft:#d9b878;
  --line:      rgba(33, 48, 43, 0.12);
  --wa:        #25d366;   /* WhatsApp brand — floating button only */
  --wa-dark:   #1da851;

  --maxw: 1160px;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 34px 74px -40px rgba(11, 57, 54, 0.32);
  --shadow-sm: 0 18px 46px -32px rgba(11, 57, 54, 0.28);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain for a warm, editorial feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;            /* above section content (2), below sticky nav (50) */
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--sea-deep);
}
h1 { font-size: clamp(2.7rem, 6.5vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: 1.22rem; font-weight: 400; letter-spacing: -0.005em; }

/* Editorial italic accent inside headings */
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage);
}
.hero h1 em { color: var(--brass-soft); }
.contact h2 em { color: var(--brass-soft); }

p { margin: 0 0 1rem; color: var(--ink-soft); font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.3rem, 4vw, 2.2rem);
}
.section { position: relative; z-index: 2; padding: clamp(5.5rem, 12vw, 10rem) 0; }

/* Eyebrow with a short rule line */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sage-deep);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
}
.eyebrow--light { color: var(--brass-soft); }
.eyebrow--light::before { background: var(--brass-soft); }

.section__head { max-width: 620px; margin-bottom: 4.5rem; }
.section__head p { font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.05rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 3px; }

/* Primary = deep sea (elegant), WhatsApp signalled by the icon + label */
.btn--primary {
  background: var(--sea);
  color: #f4f0e6;
  box-shadow: 0 14px 30px -20px rgba(11, 57, 54, 0.7);
}
.btn--primary:hover { background: var(--sea-deep); box-shadow: 0 18px 36px -18px rgba(11, 57, 54, 0.75); }

.btn--ghost {
  background: transparent;
  color: #f4f0e6;
  border-color: rgba(244, 240, 230, 0.4);
}
.btn--ghost:hover { background: rgba(244, 240, 230, 0.1); border-color: rgba(244,240,230,0.7); }

/* On the light contact-less sections, ghost needs dark text */
.location .btn--ghost { color: var(--sea-deep); border-color: var(--line); }
.location .btn--ghost:hover { background: rgba(20,97,92,0.06); border-color: var(--sea); }

/* Outline = dark text on light sections (secondary action) */
.btn--outline {
  background: transparent;
  color: var(--sea-deep);
  border-color: var(--line);
}
.btn--outline:hover { background: rgba(20, 97, 92, 0.06); border-color: var(--sea); }

.btn--lg { padding: 1.15rem 2.2rem; font-size: 0.78rem; }
.wa-icon { width: 17px; height: 17px; fill: currentColor; opacity: 0.9; }
.btn__ext { width: 13px; height: 13px; opacity: 0.85; }

/* ---------- Header / Nav ---------- */
/* The bar is FIXED (not sticky) so it doesn't reserve space above the hero —
   the video runs full-bleed to the top. It stays tucked out of view over the
   hero and slides in (via .is-tucked toggled in script.js) once the guest
   scrolls past the hero. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(242, 237, 225, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
/* Fade + slide out (opacity also hides the mobile dropdown, which is anchored to
   the header's bottom edge and would otherwise peek at the viewport top). */
.site-header.is-tucked { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.85rem clamp(1.3rem, 4vw, 2.2rem);
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s;
}
.nav-menu a:hover { color: var(--sea); }
.nav-cta {
  background: transparent;
  color: var(--sea-deep) !important;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--sea);
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--sea); color: #f4f0e6 !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }

/* ---------- Logo / brand lockup ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; line-height: 1; }
.brand__mark {
  display: inline-flex;
  width: 36px; height: 36px;
  flex: none;
  filter: drop-shadow(0 5px 12px rgba(11, 57, 54, 0.3));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__sun { transform-origin: 28.5px 15px; transition: transform 0.6s ease; }
.brand__wave { transition: transform 0.5s ease; }

.brand__text {
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.005em;
  text-transform: lowercase;
  color: var(--sea-deep);
  padding-left: 0.05em;
}
.brand:hover .brand__mark { transform: translateY(-1px) rotate(-3deg); }
.brand:hover .brand__sun { transform: rotate(28deg); }
.brand:hover .brand__wave--1 { transform: translateX(1.2px); }
.brand:hover .brand__wave--2 { transform: translateX(-1.2px); }
.brand:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 4px; border-radius: 8px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;   /* fill the whole viewport (dvh accounts for mobile browser chrome) */
  display: flex;
  align-items: center;
  color: #f4f0e6;
  background:
    linear-gradient(180deg, rgba(11,57,54,0.2), rgba(11,57,54,0.6)),
    radial-gradient(120% 90% at 72% 12%, #4f9b90 0%, #1f6e66 45%, #0e4b47 74%, #082e2c 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero__video.is-playing { opacity: 1; }
/* Phones & small tablets: a still photo instead of the clip. The video is
   never fetched at this width (script.js attaches its src only above 900px),
   and the background image here is only fetched when this query matches.
   IMAGE SWAP: change the url() below to another file in /images/rooms/ */
@media (max-width: 900px) {
  .hero {
    /* Shoreline from above, cropped portrait: water at the top, the breaking
       foam through the middle, a sliver of sand at the foot.
       IMAGE SWAP: change the url() below. */
    background:
      url('/images/hero-mobile.jpg') center / cover no-repeat,
      radial-gradient(120% 90% at 72% 12%, #4f9b90 0%, #1f6e66 45%, #0e4b47 74%, #082e2c 100%);
  }
  .hero__video { display: none; }
  /* White foam and bright sand sit right where the text does, so this scrim is
     far deeper than the desktop one — and it reaches most of the way up the
     frame rather than hugging the bottom. */
  .hero__overlay {
    background: linear-gradient(0deg,
      rgba(6,28,30,0.9) 0%,
      rgba(6,28,30,0.78) 26%,
      rgba(6,28,30,0.6) 46%,
      rgba(6,28,30,0.38) 64%,
      rgba(6,28,30,0.16) 82%,
      rgba(6,28,30,0) 100%);
  }
  /* A touch more weight behind the type itself, for the stretches that sit on
     white water where the scrim alone isn't enough. */
  .hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.35); }
  .hero__sub { text-shadow: 0 1px 20px rgba(0,0,0,0.6); color: rgba(246,242,232,0.95); }
  .hero .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Neutral scrim (no green tint) — just enough darkening bottom-left for the
     headline to stay readable over the video. Lower these alphas to reveal more
     of the footage, raise them if your video is bright and text gets lost. */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.14) 52%, rgba(0,0,0,0) 78%),
    linear-gradient(0deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 42%);
}

.hero__content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem clamp(1.3rem, 4vw, 2.2rem) 4rem;
}
.hero .eyebrow { color: #dce9df; }
.hero .eyebrow::before { background: var(--brass-soft); }
.hero h1 { color: #f6f2e8; text-shadow: 0 2px 26px rgba(0,0,0,0.28); max-width: 15ch; }
.hero__sub {
  color: rgba(246,242,232,0.9);
  font-size: 1.16rem;
  font-weight: 300;
  max-width: 46ch;
  margin-bottom: 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__scroll {
  position: absolute; z-index: 3;
  bottom: 1.7rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(246,242,232,0.8);
  font-size: 1.3rem;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,8px);} }

/* ---------- About + what's included (one split section) ---------- */
/* Split section: the story on the left, the photo carousel on the right.
   The carousel gets the slightly wider half so the photos have room. */
.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: center;
}
.about__text p { font-size: 1.06rem; }
/* The old "Everything you need, nothing you don't" headline, folded in as a
   display-type lead-in to the feature list. */
.about__lede {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sea-deep);
  margin: 2rem 0 0;
}
.about__lede em { font-style: italic; color: var(--sage); }
.feature-list {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; gap: 0.75rem;
}
.feature-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink);
  font-weight: 400;
}
.feature-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 12px;
  border: 1.5px solid var(--sage);
  border-radius: 0 50% 50% 50%;   /* little leaf/droplet */
  transform: rotate(45deg);
}

/* ---------- What's included ---------- */
.contact::before {
  /* hairline top divider */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--line);
}
/* What's included — an automatic photo carousel, sitting in the right half of
   the about section. The caption sits low on the photo as plain type over a
   bottom-only scrim, so the sea and sky stay clear; arrows let a guest step
   through it. */
.incl { position: relative; scroll-margin-top: 90px; }
.incl::after {
  /* organic leaf-like arc detail — carried over from the old about photo */
  content: "";
  position: absolute;
  right: -14px; top: -14px;
  width: 90px; height: 90px;
  border: 1.5px solid var(--brass-soft);
  border-radius: 0 60% 0 60%;
  opacity: 0.5;
  pointer-events: none;
}
.incl__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(33, 48, 43, 0.06);
}
.incl__track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.incl__slide {
  position: relative;
  flex: 0 0 100%;
  /* Slightly portrait — wide enough for the photo to breathe, without towering
     over the text column beside it. */
  aspect-ratio: 8 / 9;
  overflow: hidden;
  background: linear-gradient(120deg, #cfe0d8 0%, #86ab9e 45%, #2f6e66 100%);
}
.incl__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 7s ease-out;
}
.incl__slide.is-active .incl__img { transform: scale(1); }   /* slow drift in */
/* Scrim: a soft band along the bottom plus a little extra weight in the
   corner the caption sits in. Nothing touches the horizon or the sky. */
.incl__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 62% at 0% 100%, rgba(6, 28, 30, 0.5), transparent 72%),
    linear-gradient(0deg,
      rgba(6, 28, 30, 0.7) 0%,
      rgba(6, 28, 30, 0.3) 20%,
      rgba(6, 28, 30, 0) 46%);
}
.incl__caption {
  position: absolute;
  z-index: 2;
  left: clamp(1.3rem, 2.6vw, 2.2rem);
  right: clamp(1.3rem, 2.6vw, 2.2rem);
  bottom: clamp(1.3rem, 2.6vw, 2rem);
  color: #f6f2e8;
}
/* Caption lines lift in as their slide becomes the active one. Gated on
   .is-ready (added by script.js) so the text stays visible without JS. */
.incl.is-ready .incl__caption > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.incl__slide.is-active .incl__caption > * { opacity: 1; transform: none; }
.incl__slide.is-active .incl__caption > *:nth-child(1) { transition-delay: 0.08s; }
.incl__slide.is-active .incl__caption > *:nth-child(2) { transition-delay: 0.15s; }
.incl__slide.is-active .incl__caption > *:nth-child(3) { transition-delay: 0.22s; }
.incl__slide.is-active .incl__caption > *:nth-child(4) { transition-delay: 0.29s; }
.incl__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--brass-soft);
}
.incl__meta svg { width: 16px; height: 16px; flex: none; }
.incl__of { opacity: 0.55; }
.incl__caption h3 {
  color: #fbf8f1;
  margin: 0 0 0.35rem;
  font-size: clamp(1.25rem, 1.9vw, 1.62rem);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.incl__caption p {
  margin: 0 0 0.9rem;
  color: rgba(246, 242, 232, 0.82);
  font-size: 0.94rem;
  line-height: 1.6;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.incl__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6f2e8;
  border-bottom: 1px solid rgba(246, 242, 232, 0.4);
  padding-bottom: 3px;
  transition: gap 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.incl__link:hover { gap: 0.75rem; color: #fff; border-color: var(--brass-soft); }
.incl__link:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 4px; }

/* Prev / next over the photo — same treatment as the room tour arrows */
.incl__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 230, 0.45);
  background: rgba(8, 46, 44, 0.28);
  color: #f6f2e8;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, transform 0.25s ease;
}
.incl__nav svg { width: 20px; height: 20px; }
.incl__nav:hover { background: var(--sea); transform: translateY(-50%) scale(1.06); }
.incl__nav:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 3px; }
.incl__nav--prev { left: clamp(0.6rem, 2vw, 1.1rem); }
.incl__nav--next { right: clamp(0.6rem, 2vw, 1.1rem); }

/* Hairline progress bar — fills across while a slide is showing */
.incl__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 2px;
  background: rgba(246, 242, 232, 0.18);
  opacity: 0;                     /* only shown once autoplay is running */
  transition: opacity 0.4s ease;
}
.incl.is-auto .incl__progress { opacity: 1; }
.incl__progress i {
  display: block;
  height: 100%;
  background: var(--brass-soft);
  transform: scaleX(0);
  transform-origin: left center;
}
.incl.is-auto .incl__progress i { animation: inclFill 5.5s linear forwards; }
.incl.is-paused .incl__progress i { animation-play-state: paused; }
@keyframes inclFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Room Tour / Carousel ---------- */
.tour {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(20,97,92,0.06), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%);
}
.section__head--center {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  text-align: center;
}
.section__head--center .eyebrow { justify-content: center; }

/* Segmented toggles (layout + lighting) */
.tour__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-bottom: 2.4rem;
}
.seg {
  --i: 0;
  --n: 2;
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(20, 97, 92, 0.07);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.seg__btn {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.seg__btn.is-active { color: #f4f0e6; }
.seg__btn:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 3px; border-radius: 999px; }
.seg__ico { width: 16px; height: 16px; fill: none; }
.seg__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / var(--n));
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sea) 0%, var(--sea-deep) 100%);
  box-shadow: 0 10px 22px -12px rgba(11, 57, 54, 0.8);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Carousel shell */
.tour__carousel {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.tour__viewport {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(33, 48, 43, 0.06);
}
.tour__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.tour__slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* Photo layer (sits over the slide's fallback gradient) */
.tour__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Depth vignette + caption */
.tour__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,46,44,0) 45%, rgba(6,28,30,0.55) 100%),
    radial-gradient(120% 120% at 50% 40%, transparent 60%, rgba(6,28,30,0.28));
  pointer-events: none;
}
.tour__caption {
  position: absolute;
  z-index: 2;
  left: clamp(1.2rem, 3vw, 2.2rem);
  bottom: clamp(1.2rem, 3vw, 1.8rem);
  right: clamp(1.2rem, 3vw, 2.2rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: #f6f2e8;
}
.tour__caption h3 {
  color: #f9f6ee;
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.tour__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4f0e6;
  background: rgba(8, 46, 44, 0.4);
  border: 1px solid rgba(244, 240, 230, 0.3);
  backdrop-filter: blur(8px);
}
.tour__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-soft); }

/* Prev / next */
.tour__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 230, 0.5);
  background: rgba(8, 46, 44, 0.32);
  color: #f6f2e8;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, transform 0.25s ease;
}
.tour__nav svg { width: 22px; height: 22px; }
.tour__nav:hover { background: var(--sea); transform: translateY(-50%) scale(1.06); }
.tour__nav:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 3px; }
.tour__nav--prev { left: clamp(0.6rem, 2vw, 1.1rem); }
.tour__nav--next { right: clamp(0.6rem, 2vw, 1.1rem); }

/* Dots */
.tour__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.tour__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--sea);
  background: transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, width 0.3s ease, border-radius 0.3s ease;
}
.tour__dot:hover { transform: scale(1.2); }
.tour__dot.is-active { width: 26px; border-radius: 999px; background: var(--sea); }
.tour__dot:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 3px; }

/* --- Room "scenes": stylised gradient placeholders shown until a real photo is
   dropped into /images/2bhk|3bhk. They sit on the slide, under the photo layer. --- */
.scene--living  { background: linear-gradient(120deg,#fce7c8 0%,#f2d3a0 30%,#cfe0d8 66%,#8fb3aa 100%); }
.scene--master  { background: linear-gradient(120deg,#eaf3f2 0%,#cfe6e6 40%,#9cc4c2 75%,#4f9b90 100%); }
.scene--bed2    { background: linear-gradient(120deg,#f0f2e4 0%,#d5ddbf 42%,#a9bd8c 78%,#6f8a5f 100%); }
.scene--bed3    { background: linear-gradient(120deg,#faeed6 0%,#eecfa6 40%,#d8a877 76%,#b1893c 100%); }
.scene--kitchen { background: linear-gradient(120deg,#fdf6e8 0%,#eaddc4 40%,#cdd9c0 74%,#8aa88c 100%); }
.scene--deck    { background: linear-gradient(180deg,#bfe6f0 0%,#8fcfe0 34%,#e7d9b0 52%,#2f6e66 53%,#0e4b47 100%); }
.scene--bath    { background: linear-gradient(120deg,#f3ece0 0%,#e2d3b6 42%,#c9b896 76%,#8f7f63 100%); }

/* ---------- Stays / Book (Airbnb layout cards) ---------- */
.stays::before {
  /* hairline top divider, matches .contact */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--line);
}
/* Photo tiles, one per layout — each opens its listing.
   At rest a tile shows only its name. On hover the panel underneath opens
   (grid-template-rows 0fr -> 1fr animates the height), the stats stagger in and
   the photo drifts closer. Touch screens can't hover, so there the panel is
   simply always open — see the (hover: hover) block at the end. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.3rem);
  max-width: 880px;
  margin: 0 auto;
}
.plan-icons { display: none; }     /* <symbol> definitions only */

.plan-card {
  position: relative;
  display: block;
  container-type: inline-size;   /* lets .plan-stats respond to the tile width */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* No border: the photo is positioned to the padding box, so a border ring
     would sit outside it and show this fallback gradient as a green hairline. */
  background: linear-gradient(120deg, #cfe0d8 0%, #86ab9e 45%, #2f6e66 100%);
  color: #f6f2e8;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.plan-card:hover,
.plan-card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan-card:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 4px; }
.plan-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.plan-card:hover .plan-card__img,
.plan-card:focus-visible .plan-card__img { transform: scale(1.06); }
/* Bottom-weighted scrim. These rooms are bright and tiled, so it has to carry
   further up the frame than the carousel's does — and further still on hover,
   once there is a panel of text to read. */
.plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(6, 28, 30, 0.9) 0%,
    rgba(6, 28, 30, 0.6) 24%,
    rgba(6, 28, 30, 0.16) 46%,
    rgba(6, 28, 30, 0) 68%);
  transform: translateY(22%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.plan-card:hover::after,
.plan-card:focus-visible::after { transform: none; }

.plan-card__body {
  position: absolute;
  z-index: 1;
  left: clamp(1rem, 2vw, 1.35rem);
  right: clamp(1rem, 2vw, 1.35rem);
  bottom: clamp(1rem, 2vw, 1.25rem);
  display: block;
  text-align: left;
}
.plan-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: #fbf8f1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* The panel that opens on hover */
.plan-card__reveal { display: grid; grid-template-rows: 1fr; }
.plan-card__reveal-in { overflow: hidden; }

/* Two columns so the counts line up in a tidy block rather than reflowing
   ragged — three stats read as 2 + 1, four as a clean 2 x 2. On a narrow tile
   (two-up on a small tablet) there isn't room for two, so the card asks for
   one column instead — see the @container rule under .plan-card. */
.plan-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.6rem;
  margin-top: 0.6rem;
}
@container (max-width: 255px) {
  .plan-stats { grid-template-columns: 1fr; }
}
.plan-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(246, 242, 232, 0.9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.plan-stat svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--brass-soft);
}
.plan-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-soft);
  border-bottom: 1px solid rgba(217, 184, 120, 0.45);
  padding-bottom: 3px;
  transition: gap 0.3s ease, border-color 0.3s ease;
}
.plan-card:hover .plan-card__cta { gap: 0.7rem; border-color: var(--brass-soft); }
.plan-card__cta .btn__ext { width: 12px; height: 12px; }

/* Only devices that can actually hover get the reveal — on a touch screen the
   panel is simply always open. */
@media (hover: hover) {
  .plan-card__reveal {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .plan-card:hover .plan-card__reveal,
  .plan-card:focus-visible .plan-card__reveal { grid-template-rows: 1fr; }
  /* Stats fade up one after another as the panel opens */
  .plan-stat {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .plan-card__cta {
    opacity: 0;
    transform: translateY(8px);
    /* keeps the arrow-nudge from the base rule alongside the fade-up */
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                gap 0.3s ease, border-color 0.3s ease;
  }
  .plan-card:hover .plan-stat,
  .plan-card:hover .plan-card__cta,
  .plan-card:focus-visible .plan-stat,
  .plan-card:focus-visible .plan-card__cta { opacity: 1; transform: none; }
  .plan-card:hover .plan-stat:nth-child(1) { transition-delay: 0.12s; }
  .plan-card:hover .plan-stat:nth-child(2) { transition-delay: 0.17s; }
  .plan-card:hover .plan-stat:nth-child(3) { transition-delay: 0.22s; }
  .plan-card:hover .plan-stat:nth-child(4) { transition-delay: 0.27s; }
  .plan-card:hover .plan-card__cta { transition-delay: 0.3s; }
}

/* One quiet line under the tiles, linking out to the Airbnb reviews.
   Understated on purpose: no card, no badge — just the rating, a hairline that
   draws itself under the text on hover, and the star warming to brass. */
.stays__reviews {
  margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0;
  text-align: center;
}
.review-link {
  display: inline-flex;
  flex-wrap: wrap;              /* on a phone the score sits above the link text */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}
.review-link__score {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  color: var(--sea-deep);
}
.review-link__star {
  width: 14px;
  height: 14px;
  fill: var(--foam);
  transition: fill 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Underlined and arrowed at rest so it reads as a link straight away; hover
   just warms it up. text-decoration (rather than a border) so every line gets
   the rule when it wraps. */
.review-link__text {
  text-decoration: underline;
  text-decoration-color: rgba(177, 137, 60, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease;
  text-wrap: balance;      /* even line lengths when it wraps on a phone */
}
.review-link__ext {
  width: 12px;
  height: 12px;
  margin-left: 0.35rem;
  vertical-align: -1px;
  color: var(--brass);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.review-link:hover { color: var(--sea-deep); }
.review-link:hover .review-link__star { fill: var(--brass); transform: rotate(-12deg) scale(1.1); }
.review-link:hover .review-link__text { text-decoration-color: var(--brass); }
.review-link:hover .review-link__ext { transform: translate(2px, -2px); }
.review-link:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 5px; border-radius: 4px; }
@media (max-width: 480px) { .review-link { font-size: 0.88rem; gap: 0.4rem; } }

/* ---------- Location ---------- */
.location::before {
  /* hairline top divider — carries the section rhythm now that the reviews
     block (which used to sit here on the alt background) is gone */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.location__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.location__text p { font-size: 1.06rem; }
/* Clickable location card → Google Maps. An aerial photo of the property with
   the address sitting over it; a bottom-weighted scrim keeps the type legible
   while the sea and sky stay clear. */
.location__map {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 460px;
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  color: #f4f0e6;
  text-align: left;
  /* IMAGE SWAP: change the url() below to another file in /images/rooms/ */
  background:
    url('/images/rooms/outer_2.jpg') center/cover no-repeat,
    linear-gradient(160deg, #2f8079 0%, #14615c 45%, #0b3936 100%);
  /* Cover the border box too — the default (padding-box) leaves the border ring
     showing the teal fallback gradient as a hairline around the photo. */
  background-origin: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.location__map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(6, 28, 30, 0.55), transparent 74%),
    linear-gradient(0deg,
      rgba(6, 28, 30, 0.78) 0%,
      rgba(6, 28, 30, 0.34) 26%,
      rgba(6, 28, 30, 0) 58%);
}
.location__map > * { position: relative; z-index: 1; }
.location__map:hover { transform: translateY(-3px); box-shadow: 0 40px 80px -40px rgba(11,57,54,0.5); }
.location__map:focus-visible { outline: 3px solid var(--brass-soft); outline-offset: 4px; }
.location__map-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #f9f6ee;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.location__map-addr {
  color: rgba(246,242,232,0.86);
  font-size: 0.98rem;
  max-width: 32ch;
  text-shadow: 0 1px 18px rgba(0,0,0,0.5);
}
.location__map-cta {
  margin-top: 0.6rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-soft);
  text-shadow: 0 1px 18px rgba(0,0,0,0.5);
}

/* ---------- Contact ---------- */
.contact {
  background:
    radial-gradient(120% 120% at 80% 0%, #1a726a 0%, #0f4d48 50%, #082e2c 100%);
  color: #f4f0e6;
  text-align: center;
}
.contact__inner { max-width: 660px; margin: 0 auto; }
.contact .eyebrow { justify-content: center; }
.contact__sub { color: rgba(246,242,232,0.88); font-size: 1.12rem; font-weight: 300; margin-bottom: 2.2rem; }
.contact__note { color: rgba(246,242,232,0.62); font-size: 0.86rem; margin-top: 1.1rem; letter-spacing: 0.02em; }

/* ---------- Floating WhatsApp (keeps brand green for recognition) ---------- */
.wa-float {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,0.65);
  transition: transform 0.2s;
}
.wa-float:hover { transform: scale(1.08); background: var(--wa-dark); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Scroll reveal (classes added by script.js) ---------- */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal.reveal--in { opacity: 1; transform: none; }

/* Hero intro */
.hero h1 { animation: rise 1s cubic-bezier(0.22,1,0.36,1) both; }
.hero__sub { animation: rise 1s 0.12s cubic-bezier(0.22,1,0.36,1) both; }
.hero__actions { animation: rise 1s 0.24s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px);} to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--sand);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .nav-menu.open { max-height: 360px; }
  .nav-menu li { width: 100%; }
  .nav-menu a { display: block; padding: 0.9rem clamp(1.3rem, 4vw, 2.2rem); width: 100%; }
  .nav-cta { border-radius: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Stacked: story first, then the carousel full width */
  .about__grid, .location__grid { grid-template-columns: 1fr; }
  .about__lede { margin-top: 1.6rem; }

  .tour__slide { aspect-ratio: 4 / 3; }
  .tour__controls { gap: 0.8rem; }

  /* What's included: back to a landscape frame now it has the full row */
  .incl__slide { aspect-ratio: 4 / 3; }
  .incl__caption {
    left: clamp(1.3rem, 3.5vw, 2.8rem);
    right: clamp(1.3rem, 3.5vw, 2.8rem);
  }
}

@media (max-width: 480px) {
  /* Phone: keep the text, but understated and pinned to the lower third so the
     photo keeps most of the frame. The scrim is set in the 900px block above,
     where the still photo is swapped in for the video. */
  .hero { min-height: 100vh; min-height: 100dvh; align-items: flex-end; }
  .hero__content { padding-top: 0; padding-bottom: 4.6rem; }
  .hero .eyebrow { font-size: 0.64rem; margin-bottom: 0.7rem; }
  .hero h1 { font-size: 2.35rem; margin-bottom: 0.7rem; }
  .hero__sub { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.4rem; max-width: 42ch; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .brand__text { font-size: 1.4rem; }
  .seg__btn { padding: 0.55rem 1rem; font-size: 0.66rem; letter-spacing: 0.1em; }
  .tour__slide { aspect-ratio: 3 / 4; }

  /* Phone: taller frame, smaller type, arrows tucked in so they clear the text */
  .incl__slide { aspect-ratio: 4 / 5; }
  .incl__caption p { font-size: 0.88rem; margin-bottom: 0.8rem; }
  .incl__meta { font-size: 0.62rem; letter-spacing: 0.16em; margin-bottom: 0.5rem; }
  .incl__nav { width: 38px; height: 38px; }
  .incl__nav svg { width: 17px; height: 17px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__video { opacity: 1; }
}