/* ============================================================
   SAVANNAH WEST — v2 "Golden Hour"
   Ink & cream editorial system with one warm ember accent.
   Display: Calvera · Numerals/labels: Pegone · UI: Jost · Body: Source Sans 3
   ============================================================ */

@font-face {
  font-family: 'Grind';
  src: url('../fonts/grind/Grind.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pegone';
  src: url('../fonts/Pegone/Pegone.woff2') format('woff2'),
       url('../fonts/Pegone/Pegone.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #14242D;
  --navy: #203A45;
  --navy-soft: #2C4653;
  --cream: #F7F4EE;
  --sand: #EFE9DC;
  --ember: #E87928;
  --ember-deep: #A64B0B;
  --gold: #E5A05A;
  --ash: #8C9AA0;
  --body-on-cream: #3D4C54;
  --body-on-ink: #C8D0CC;

  --display: 'Grind', 'Arial Narrow', sans-serif;
  --subhead: 'Grind', 'Arial Narrow', sans-serif;
  --accent: 'Grind', 'Arial Narrow', sans-serif;
  --slab: 'Pegone', 'Rockwell', serif;
  --ui: 'Jost', 'Avenir Next', sans-serif;
  --body: 'Source Sans 3', 'Helvetica Neue', sans-serif;

  --gutter: clamp(20px, 5vw, 96px);
  --ease: cubic-bezier(.19, 1, .22, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body-on-cream);
  font-family: var(--body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
  overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--ember); color: var(--cream); }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
option { color: var(--ink); background: #fff; }

/* type helpers */
.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.h2--cream { color: var(--cream); }

/* split-text mask lines */
[data-split] .st-line { display: block; overflow: clip; }
[data-split] .st-line > div { will-change: transform; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--ui);
  font-weight: 500;
  font-size: clamp(13px, .95vw, 16px);
  letter-spacing: .09em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 1.05em 1.9em;
  white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ember { background: var(--ember-deep); color: var(--cream); }
.btn--ember:hover { background: #8F3F08; }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--navy); }
.btn--pill { background: transparent; color: var(--cream); border: 1.5px solid rgba(247,244,238,.7); }
.btn--pill:hover { background: var(--cream); color: var(--ink); }
.btn--big { font-size: clamp(15px, 1.15vw, 19px); padding: 1.2em 2.4em; }

.link-arrow {
  font-family: var(--ui);
  font-weight: 500;
  font-size: clamp(13px, .95vw, 16px);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ember);
  padding-bottom: .35em;
  transition: color .2s ease;
}
.link-arrow:hover { color: var(--ember-deep); }

/* glass card */
.glass {
  background: rgba(18, 30, 38, 0.52);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(247, 244, 238, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(8, 16, 22, 0.45);
}

/* ============ loader ============ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--ink);
}
.loader__mark { width: clamp(64px, 8vw, 110px); height: auto; }
.loader__word {
  font-family: var(--accent);
  font-size: clamp(22px, 2.4vw, 34px);
  color: var(--cream);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ============ nav ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px);
  padding: 14px var(--gutter);
  color: var(--cream);
  transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.is-solid {
  background: rgba(18, 30, 38, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(247,244,238,.08);
  padding-block: 10px;
}
.nav__logo img { height: clamp(40px, 4.2vw, 58px); width: auto; }
.nav__links {
  display: flex; gap: clamp(14px, 1.8vw, 30px);
  margin-inline: auto;
  font-family: var(--ui); font-weight: 500;
  font-size: clamp(12px, .9vw, 15px);
  letter-spacing: .1em; text-transform: uppercase;
}
.nav__links a { opacity: .85; transition: opacity .2s ease, color .2s ease; padding: 6px 2px; }
.nav__links a:hover { opacity: 1; color: var(--gold); }
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 600; letter-spacing: .05em;
  font-size: clamp(13px, 1vw, 16px);
  font-variant-numeric: tabular-nums;
}
.nav__phone svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__phone:hover { color: var(--gold); }
.nav__burger { display: none; }

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--ink);
  display: grid; place-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.menu.is-open { opacity: 1; pointer-events: auto; }
.menu__links { display: grid; gap: 26px; text-align: center; }
.menu__links a {
  color: var(--cream);
  font-family: var(--subhead);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(26px, 6.4vw, 40px);
}
.menu__links a.btn { font-family: var(--ui); font-size: 15px; }

/* ============ hero ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  color: var(--cream);
  overflow: clip;
  padding: 0 var(--gutter) clamp(84px, 10vh, 130px);
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,36,45,.62) 0%, rgba(20,36,45,.18) 30%, rgba(20,36,45,.20) 62%, rgba(16,28,36,.82) 100%),
    linear-gradient(76deg, rgba(16,28,36,.66) 0%, rgba(16,28,36,.18) 46%, rgba(16,28,36,0) 70%);
}
.hero__content { max-width: 900px; margin-bottom: clamp(24px, 3vh, 44px); }
.hero__locator {
  font-family: var(--slab);
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(16px, 2vh, 26px);
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 6.8vw, 108px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .002em;
  margin-bottom: clamp(18px, 2.4vh, 30px);
  text-shadow: 0 4px 40px rgba(10, 20, 26, .35);
}
.hero__sub {
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.6;
  color: #E9ECE6;
  max-width: 56ch;
}

/* reserve card */
.reserve {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(84px, 10vh, 130px);
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  padding: clamp(22px, 2vw, 30px);
  color: var(--cream);
}
.reserve__title {
  font-family: var(--accent);
  letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(19px, 1.5vw, 23px);
  margin-bottom: 18px;
}
.reserve__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.reserve__fields .rfield:nth-child(3) { grid-column: 1 / -1; }
.rfield { display: grid; gap: 7px; }
.rfield span {
  font-family: var(--ui); font-weight: 500;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #B9C4C0;
}
.rfield input, .rfield select, .rfield textarea {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: rgba(247, 244, 238, 0.07);
  border: 1px solid rgba(247, 244, 238, 0.22);
  border-radius: 12px;
  color: var(--cream);
  font-family: var(--body);
  font-size: 15.5px;
  padding: 12px 14px;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, background-color .2s ease;
  color-scheme: dark;
}
.rfield input:focus, .rfield select:focus, .rfield textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(247,244,238,.11);
}
.rfield input::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; }
.reserve__go { width: 100%; }
.reserve__alt { margin-top: 14px; text-align: center; font-size: 14.5px; color: #C4CDC9; }
.reserve__alt strong { color: var(--cream); font-variant-numeric: tabular-nums; }
.reserve__alt a:hover strong { color: var(--gold); }

.hero__scrollcue {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
  width: 26px; height: 42px;
  border: 1.5px solid rgba(247,244,238,.45);
  border-radius: 999px;
}
.hero__scrollcue span {
  position: absolute; left: 50%; top: 8px; translate: -50% 0;
  width: 3px; height: 8px; border-radius: 3px;
  background: var(--gold);
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(14px); opacity: 0 } 100% { opacity: 0 } }

/* ============ ticker ============ */
.ticker {
  background: var(--ink);
  color: var(--sand);
  overflow: clip;
  border-block: 1px solid rgba(247,244,238,.07);
  padding: 15px 0;
}
.ticker__track {
  display: flex; gap: 34px; width: max-content;
  font-family: var(--slab);
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: .22em; text-transform: uppercase;
  animation: tick 36s linear infinite;
}
.ticker__track i { color: var(--ember); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ============ manifesto ============ */
.manifesto {
  position: relative;
  padding: clamp(110px, 15vw, 230px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(40px, 6vw, 110px);
  background: var(--cream);
}
.manifesto__inner { max-width: 820px; }
.manifesto__text {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.34;
  color: var(--ink);
}
.manifesto__text em { font-style: normal; color: var(--ember-deep); }
.manifesto__text .w { display: inline-block; }
.manifesto__cta { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; margin-top: clamp(34px, 4vw, 56px); }
.manifesto__img { position: relative; border-radius: 18px; overflow: clip; }
.manifesto__img img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__img figcaption {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--slab); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(18,30,38,.55); backdrop-filter: blur(6px);
  padding: 7px 13px; border-radius: 999px;
}
.manifesto__figs { position: relative; align-self: start; }
.manifesto__img--a { aspect-ratio: 4/5; }
.manifesto__img--b {
  position: absolute;
  left: clamp(-90px, -6vw, -40px);
  bottom: clamp(-70px, -4vw, -34px);
  width: clamp(180px, 17vw, 300px);
  aspect-ratio: 3/2.4;
  z-index: 2;
  box-shadow: 0 30px 70px rgba(20,36,45,.28);
}

/* ============ stats ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--sand);
  padding: 2px;
}
.stat {
  background: var(--cream);
  padding: clamp(34px, 4vw, 64px) clamp(20px, 2.5vw, 44px);
  text-align: center;
}
.stat__num {
  font-family: var(--slab);
  font-size: clamp(52px, 6.4vw, 108px);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__unit {
  font-family: var(--slab);
  font-size: clamp(16px, 1.5vw, 24px);
  color: var(--ember-deep);
  margin-left: 6px;
  text-transform: uppercase;
}
.stat p { margin-top: 10px; font-size: clamp(13.5px, 1vw, 16px); color: var(--body-on-cream); }

/* ============ pads ============ */
.pads {
  background: linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
  color: var(--body-on-ink);
  padding: clamp(110px, 13vw, 200px) var(--gutter);
}
.pads__head { max-width: 1000px; margin-bottom: clamp(50px, 6vw, 100px); }
.pads__lede { margin-top: 26px; font-size: clamp(17px, 1.3vw, 21px); max-width: 62ch; }
.pads__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(44px, 6vw, 110px);
  align-items: start;
}
.pads__sticky { position: sticky; top: 14vh; }
.pads__blueprint {
  position: relative;
  border-radius: 18px;
  overflow: clip;
  background: var(--cream);
  padding: clamp(18px, 2vw, 34px);
}
.pads__plate { width: 100%; height: auto; }
.bdim {
  position: absolute;
  font-family: var(--slab);
  font-size: clamp(12px, 1.1vw, 18px);
  letter-spacing: .1em;
  color: var(--ember-deep);
}
.bdim--1 { left: 10%; top: 26%; transform: rotate(-9deg); }
.bdim--2 { left: 30%; top: 47%; transform: rotate(-13deg); }
.bdim--3 { left: 40%; top: 72%; transform: rotate(-10deg); }
.pads__plate-note {
  margin-top: 14px;
  font-family: var(--slab); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ash);
}
.pads__list { display: grid; gap: clamp(30px, 3.6vw, 58px); }
.padrow {
  border-top: 1px solid rgba(247,244,238,.14);
  padding-top: clamp(24px, 2.6vw, 40px);
}
.padrow h3 {
  font-family: var(--subhead);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: clamp(22px, 2vw, 33px);
  color: var(--cream);
  margin-bottom: 12px;
}
.padrow p { max-width: 52ch; font-size: clamp(15.5px, 1.15vw, 18.5px); }

/* ============ amenities ============ */
.amen { background: var(--cream); padding: clamp(110px, 13vw, 200px) var(--gutter); }
.amen__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(44px, 5vw, 80px); }
.amen__lede { font-size: clamp(16px, 1.2vw, 20px); max-width: 40ch; }
.amen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(200px, 21vw, 330px);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.2vw, 20px);
}
.acard { position: relative; border-radius: 18px; overflow: clip; }
.acard--tall { grid-row: 1 / 3; grid-column: 1; }
.acard--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.acard--img:hover img { transform: scale(1.045); }
.acard--img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,36,0) 42%, rgba(16,28,36,.78) 100%);
}
.acard__meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(18px, 1.8vw, 28px); color: var(--cream); }
.acard__meta h3 { font-family: var(--accent); font-size: clamp(20px, 1.65vw, 27px); letter-spacing: .035em; text-transform: uppercase; margin-bottom: 6px; }
.acard__meta p { font-size: clamp(13.5px, 1vw, 16px); color: #D4DAD5; max-width: 34ch; }
.acard--type {
  background: var(--sand);
  padding: clamp(20px, 2vw, 30px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.acard--type h3 { font-family: var(--accent); font-size: clamp(20px, 1.65vw, 27px); letter-spacing: .035em; text-transform: uppercase; color: var(--ink); }
.acard--type p { font-size: clamp(13.5px, 1vw, 16px); }
.acard--type svg {
  width: clamp(34px, 3vw, 48px); height: clamp(34px, 3vw, 48px);
  fill: none; stroke: var(--ember-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  align-self: flex-end;
}
.acard--ember { background: var(--navy); }
.acard--ember h3 { color: var(--cream); }
.acard--ember p { color: var(--body-on-ink); }
.acard--ember svg { stroke: var(--gold); }

/* ============ reels ============ */
.reels {
  background: var(--ink);
  color: var(--body-on-ink);
  padding: clamp(110px, 13vw, 190px) 0 clamp(110px, 13vw, 190px) var(--gutter);
  overflow: clip;
}
.reels__head { display: flex; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 4.5vw, 70px); padding-right: var(--gutter); }
.reels__lede { font-size: clamp(15px, 1.15vw, 19px); }
.reels__track {
  display: flex; gap: clamp(16px, 1.6vw, 28px);
  overflow-x: auto;
  padding-right: var(--gutter);
  scrollbar-width: none;
  cursor: grab;
}
.reels__track::-webkit-scrollbar { display: none; }
.reel {
  position: relative;
  flex: 0 0 clamp(230px, 22vw, 330px);
  aspect-ratio: 464 / 780;
  border-radius: 18px;
  overflow: clip;
  background: var(--navy);
}
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--slab); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(18,30,38,.55); backdrop-filter: blur(6px);
  padding: 7px 12px; border-radius: 999px;
}

/* ============ area ============ */
.area { background: var(--cream); padding: clamp(110px, 13vw, 200px) var(--gutter); }
.area__head { max-width: 1000px; margin-bottom: clamp(40px, 5vw, 76px); }
.area__lede { margin-top: 24px; font-size: clamp(16px, 1.25vw, 20px); max-width: 62ch; }
.trips { border-top: 1.5px solid var(--ink); }
.trip {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) auto;
  gap: clamp(16px, 3vw, 60px);
  align-items: center;
  padding: clamp(24px, 2.8vw, 44px) 0;
  border-bottom: 1px solid rgba(20,36,45,.18);
  transition: padding-left .4s var(--ease);
}
.trip:hover { padding-left: clamp(8px, 1vw, 18px); }
.trip h3 { font-family: var(--subhead); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 36px); color: var(--ink); }
.trip p { font-size: clamp(14.5px, 1.1vw, 18px); max-width: 52ch; }
.trip__tag {
  font-family: var(--slab); font-size: clamp(11px, .95vw, 15px); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid rgba(20,36,45,.35);
  padding: 9px 16px; border-radius: 999px;
  white-space: nowrap;
  justify-self: end;
}
.trip__tag--ember { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--cream); }
.trip--work h3 { color: var(--ember-deep); }

/* ============ long-term ============ */
.longterm {
  background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: var(--body-on-ink);
  padding: clamp(110px, 13vw, 200px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 120px);
  align-items: center;
}
.longterm__copy p { margin-top: 24px; font-size: clamp(16px, 1.25vw, 20px); max-width: 52ch; }
.longterm__phone {
  display: inline-block;
  margin-top: clamp(26px, 3vw, 44px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 52px);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  border-bottom: 3px solid var(--ember);
  padding-bottom: 6px;
  transition: color .2s ease;
}
.longterm__phone:hover { color: var(--gold); }
.longterm__points { margin-top: clamp(26px, 3vw, 40px); display: grid; gap: 12px; }
.longterm__points li {
  position: relative; padding-left: 26px;
  font-size: clamp(15px, 1.1vw, 18px);
}
.longterm__points li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--ember); transform: rotate(45deg) scale(.72);
}
.enq { padding: clamp(24px, 2.4vw, 38px); color: var(--cream); }
.enq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.rfield--full { grid-column: 1 / -1; }
.rfield textarea { resize: vertical; min-height: 84px; }

/* ============ rates ============ */
.rates { background: var(--sand); padding: clamp(90px, 11vw, 170px) var(--gutter); }
.rates__inner { max-width: 900px; }
.rates__inner p { margin-top: 24px; font-size: clamp(16px, 1.25vw, 20px); max-width: 60ch; }
.rates__actions { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; margin-top: clamp(30px, 3.4vw, 48px); }

/* ============ finale ============ */
.finale {
  position: relative;
  min-height: 92svh;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: clip;
  color: var(--cream);
  padding: clamp(90px, 10vw, 150px) var(--gutter);
}
.finale__bg { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; z-index: -2; }
.finale__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,28,36,.72), rgba(16,28,36,.5) 45%, rgba(16,28,36,.85));
}
.finale__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(46px, 7vw, 112px);
  line-height: 1.02;
  margin-bottom: clamp(30px, 4vh, 52px);
  text-shadow: 0 4px 44px rgba(10,20,26,.4);
}
.finale__actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.finale__note {
  margin-top: clamp(24px, 3vh, 40px);
  font-family: var(--slab); font-size: clamp(12px, 1vw, 16px);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
}

/* ============ footer ============ */
.footer { background: var(--ink); color: var(--body-on-ink); padding: clamp(70px, 8vw, 120px) var(--gutter) 40px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(34px, 5vw, 90px);
}
.footer__brand img { height: clamp(44px, 4vw, 60px); width: auto; }
.footer__brand p { margin-top: 22px; font-size: 15.5px; line-height: 1.7; }
.footer__col { display: grid; gap: 12px; align-content: start; }
.footer__col h4 {
  font-family: var(--slab); font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.footer__col a { font-size: 15.5px; opacity: .85; transition: opacity .2s ease, color .2s ease; }
.footer__col a:hover { opacity: 1; color: var(--gold); }
.footer__col p { font-size: 15.5px; line-height: 1.8; }
.footer__legal {
  margin-top: clamp(50px, 6vw, 80px);
  padding-top: 24px;
  border-top: 1px solid rgba(247,244,238,.08);
  font-size: 13.5px; color: #92A0A6;
}

/* ============ reveal defaults (JS adds .m to <html>) ============ */
.m .reveal-line { opacity: 0; transform: translateY(28px); }
.m .parallax img, .m .finale__bg { will-change: transform; }

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .amen__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(220px, 30vw, 300px); }
  .pads__body { grid-template-columns: 1fr; }
  .pads__sticky { position: static; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__figs { max-width: 520px; }
  .manifesto__img--b { left: auto; right: clamp(-20px, -2vw, -10px); bottom: -50px; width: clamp(180px, 38vw, 280px); }
  .manifesto { padding-bottom: clamp(150px, 20vw, 260px); }
  .longterm { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* The booking card has to stop floating at the same width the hero copy
     goes full bleed. These rules previously only appeared at 820px, so
     between 821px and 1080px (iPad portrait sits at 834) the card stayed
     absolutely positioned and sat on top of the hero copy. */
  .hero { padding-bottom: 30px; align-content: start; }
  .hero__content { margin-top: 22vh; }
  .reserve { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 36px; }
  .hero__scrollcue { display: none; }
}
@media (max-width: 820px) {
  .nav__links, .nav__phone { display: none; }
  .nav__burger {
    display: grid; gap: 6px; place-content: center;
    width: 46px; height: 46px;
    background: rgba(18,30,38,.5); backdrop-filter: blur(10px);
    border: 1px solid rgba(247,244,238,.2); border-radius: 999px;
    cursor: pointer;
  }
  .nav__burger span { width: 20px; height: 2px; background: var(--cream); transition: transform .3s ease, opacity .3s ease; }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav .btn--pill { display: none; }

  .hero { padding-bottom: 30px; align-content: start; }
  .hero__content { margin-top: 26vh; }
  .reserve { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 40px; }
  .hero__scrollcue { display: none; }

  .stats { grid-template-columns: 1fr 1fr; }
  .trip { grid-template-columns: 1fr; gap: 10px; }
  .trip__tag { justify-self: start; }
  .amen__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .acard--img { aspect-ratio: 4/3; }
  .acard--tall { grid-row: auto; aspect-ratio: 3/4; }
  .acard--type { min-height: 180px; }
  .enq__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* reduced motion & capture mode */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .hero__scrollcue span { animation: none; }
  * { transition-duration: .01ms !important; }
}
.static .reveal-line, .static [data-split] .st-line > div { opacity: 1 !important; transform: none !important; }

/* capture mode: pin viewport-height sections so full-page screenshots don't re-resolve svh */
.static .hero { min-height: 860px; }
.static .finale { min-height: 780px; }


/* ============ v3: hero chips + paths ============ */
.hero__chips {
  display: flex; flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: clamp(20px, 2.6vh, 30px);
}
.hero__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 500;
  font-size: clamp(12px, .9vw, 14.5px);
  letter-spacing: .06em; text-transform: uppercase;
  color: #EAEDE7;
  background: rgba(18, 30, 38, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(247,244,238,.18);
  border-radius: 999px;
  padding: 9px 16px;
}
.hero__chips li::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--gold);
}
.hero__paths {
  margin-top: clamp(18px, 2.4vh, 28px);
  font-size: clamp(15px, 1.15vw, 18px);
  color: #D7DCD6;
}
.hero__paths a {
  color: var(--cream);
  font-weight: 600;
  border-bottom: 2px solid var(--ember);
  padding-bottom: 2px;
  transition: color .2s ease;
}
.hero__paths a:hover { color: var(--gold); }

/* ============ v3: reserve tabs ============ */
.reserve { padding-top: 0; overflow: clip; }
.reserve__tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0 calc(-1 * clamp(22px, 2vw, 30px)) 20px;
  border-bottom: 1px solid rgba(247,244,238,.14);
}
.reserve__tab {
  appearance: none; border: 0; background: rgba(247,244,238,.04);
  color: #AEBAB6;
  font-family: var(--ui); font-weight: 600;
  font-size: clamp(12.5px, .95vw, 15px);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.reserve__tab.is-active {
  color: var(--cream);
  background: transparent;
  border-bottom-color: var(--ember);
}
.reserve__panel { display: none; }
.reserve__panel.is-active { display: block; }
.reserve__longcopy { font-size: 15.5px; line-height: 1.6; color: #D7DCD6; margin-bottom: 18px; }
.reserve__enq { color: var(--cream); }
.reserve__enq:hover strong { color: var(--gold); }
.reserve__go { text-align: center; }
a.reserve__go { display: flex; }

/* ============ v3: ways to stay ============ */
.stays { background: var(--cream); padding: clamp(90px, 11vw, 170px) var(--gutter); }
.stays__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(38px, 4.5vw, 66px); }
.stays__lede { font-size: clamp(16px, 1.2vw, 20px); }
.stays__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 30px);
}
.staycard {
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: clip;
  box-shadow: 0 10px 40px rgba(20,36,45,.08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.staycard:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(20,36,45,.14); }
.staycard__img { aspect-ratio: 16/10; overflow: clip; }
.staycard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.staycard:hover .staycard__img img { transform: scale(1.05); }
.staycard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(20px, 2vw, 30px); flex: 1; }
.staycard__body h3 { font-family: var(--accent); font-size: clamp(22px, 1.8vw, 29px); letter-spacing: .035em; text-transform: uppercase; color: var(--ink); }
.staycard__body p { font-size: clamp(14.5px, 1.05vw, 17px); flex: 1; }

/* ============ v3: proof band ============ */
.proof {
  background: linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
  color: var(--body-on-ink);
  padding: clamp(100px, 12vw, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 110px);
  align-items: stretch;
}
.proof__copy p { margin-top: 24px; font-size: clamp(16px, 1.25vw, 20px); max-width: 52ch; }
.proof__img {
  position: relative;
  border-radius: 18px; overflow: clip;
  height: 100%;
  min-height: 420px;
}
.proof__img img { width: 100%; height: 100%; object-fit: cover; }
.proof__img figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--slab); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(18,30,38,.55); backdrop-filter: blur(6px);
  padding: 7px 13px; border-radius: 999px;
}
.proof__stats { display: grid; gap: 2px; background: rgba(247,244,238,.1); border-radius: 18px; overflow: clip; margin-top: clamp(30px, 3.4vw, 52px); }
.proof .stat { background: rgba(247,244,238,.045); text-align: left; padding: clamp(24px, 2.4vw, 40px) clamp(22px, 2.4vw, 40px); }
.proof .stat__num { color: var(--cream); font-size: clamp(44px, 4.6vw, 76px); }
.proof .stat p { color: var(--body-on-ink); margin-top: 8px; max-width: 44ch; }

/* ============ v3: faq ============ */
.faq { background: var(--sand); padding: clamp(90px, 11vw, 170px) var(--gutter); }
.faq__head { max-width: 900px; margin-bottom: clamp(36px, 4vw, 60px); }
.faq__lede { margin-top: 20px; font-size: clamp(16px, 1.2vw, 20px); }
.faq__list { max-width: 900px; border-top: 1.5px solid var(--ink); }
.qa { border-bottom: 1px solid rgba(20,36,45,.18); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  list-style: none; cursor: pointer;
  padding: clamp(18px, 2vw, 28px) 4px;
  font-family: var(--subhead); font-weight: 400;
  letter-spacing: .03em; text-transform: uppercase;
  font-size: clamp(19px, 1.7vw, 27px);
  color: var(--ink);
  transition: color .2s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--ember-deep); }
.qa__icon { position: relative; flex: none; width: 22px; height: 22px; }
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ember-deep);
  transition: transform .3s var(--ease);
}
.qa__icon::before { width: 14px; height: 2px; }
.qa__icon::after { width: 2px; height: 14px; }
.qa[open] .qa__icon::after { transform: rotate(90deg); }
.qa > p { padding: 0 4px clamp(18px, 2vw, 26px); max-width: 68ch; font-size: clamp(15px, 1.1vw, 18px); }
.qa > p a { color: var(--ember-deep); font-weight: 600; border-bottom: 1.5px solid currentColor; }

/* v3 responsive */
@media (max-width: 1080px) {
  .stays__grid { grid-template-columns: 1fr; max-width: 560px; }
  .proof { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero__title br { display: none; }
}

/* ============ v3.1: texture system ============ */
/* fine film grain over the whole page — the single unifying finish */
body::after {
  content: "";
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1.4%); }
  40% { transform: translate(1.6%, -1.2%); }
  60% { transform: translate(-1.2%, -1.8%); }
  80% { transform: translate(1.8%, 1.2%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* warm light washes on the dark bands */
.proof, .pads, .reels, .longterm {
  position: relative;
  background-blend-mode: normal;
}
.proof::before, .pads::before, .reels::before, .longterm::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 82% 0%, rgba(232, 164, 94, 0.10), transparent 68%),
    radial-gradient(46% 38% at 8% 96%, rgba(232, 121, 40, 0.07), transparent 70%);
}
.proof > *, .pads > *, .reels > *, .longterm > * { position: relative; }

/* paper fibre on the cream bands */
.stays, .amen, .area, .faq {
  position: relative;
}
.stays::before, .amen::before, .area::before, .faq::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: multiply;
}
.stays > *, .amen > *, .area > *, .faq > * { position: relative; }

/* faq band gets a warm top light instead of flat sand */
.faq { background: linear-gradient(180deg, #F1EADB 0%, var(--sand) 30%); }

/* hero + finale: gentle vignette to seat the type */
.hero__veil {
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(10, 18, 24, 0.45), transparent 55%),
    linear-gradient(180deg, rgba(20,36,45,.62) 0%, rgba(20,36,45,.18) 30%, rgba(20,36,45,.20) 62%, rgba(16,28,36,.82) 100%),
    linear-gradient(76deg, rgba(16,28,36,.66) 0%, rgba(16,28,36,.18) 46%, rgba(16,28,36,0) 70%);
}
.finale__veil {
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(16,28,36,.28), rgba(16,28,36,.78)),
    linear-gradient(180deg, rgba(16,28,36,.66), rgba(16,28,36,.42) 45%, rgba(16,28,36,.9));
}

/* stat tiles pick up a soft inner light */
.proof .stat { background: linear-gradient(160deg, rgba(247,244,238,.07), rgba(247,244,238,.03)); }

/* image cards: subtle warm dodge on hover for a high-end feel */
.acard--img::before, .staycard__img::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(232,164,94,.12), transparent 70%);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.staycard__img { position: relative; }
.acard--img:hover::before, .staycard:hover .staycard__img::before { opacity: 1; }

/* ============ v4 ============ */
/* staycards v2: title on image */
.staycard__img { position: relative; aspect-ratio: 16/11; }
.staycard__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,36,.05) 30%, rgba(16,28,36,.78) 100%);
}
.staycard__img h3 {
  position: absolute; left: clamp(16px, 1.6vw, 24px); bottom: clamp(14px, 1.4vw, 20px); z-index: 2;
  font-family: var(--accent);
  font-size: clamp(24px, 2vw, 32px);
  letter-spacing: .035em; text-transform: uppercase;
  color: var(--cream);
}
.staycard__tag {
  position: absolute; left: clamp(16px, 1.6vw, 24px); top: clamp(14px, 1.4vw, 20px); z-index: 2;
  font-family: var(--slab); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(18,30,38,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(247,244,238,.22);
  padding: 7px 12px; border-radius: 999px;
}
.staycard__body { gap: 16px; }
.staycard__body .btn { align-self: stretch; text-align: center; justify-content: center; }

/* park map section */
.parkmap {
  background: linear-gradient(180deg, var(--ink) 0%, var(--navy) 100%);
  color: var(--body-on-ink);
  padding: clamp(100px, 12vw, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .64fr);
  gap: clamp(40px, 5vw, 90px);
  align-items: center;
  position: relative;
}
.parkmap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 82% 0%, rgba(232, 164, 94, 0.10), transparent 68%),
    radial-gradient(46% 38% at 8% 96%, rgba(232, 121, 40, 0.07), transparent 70%);
}
.parkmap > * { position: relative; }
.parkmap__copy p { margin-top: 22px; font-size: clamp(16px, 1.2vw, 20px); max-width: 46ch; }
.parkmap__legend { display: grid; gap: 12px; margin: clamp(24px, 2.6vw, 40px) 0; }
.parkmap__legend li { display: flex; align-items: center; gap: 12px; font-size: clamp(14px, 1.05vw, 17px); }
.parkmap .dot { width: 12px; height: 12px; border-radius: 999px; flex: none; }
.dot--ember { background: var(--ember); }
.dot--gold { background: var(--gold); }
.dot--cream { background: var(--cream); }
.parkmap__board {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  padding: clamp(14px, 1.4vw, 22px);
  box-shadow: 0 30px 80px rgba(8,16,22,.4);
  /* The site plan is portrait (871x1600). Cap the width so its height stays
     within a screenful rather than running to ~1300px. */
  width: min(100%, 430px);
  justify-self: center;
}
.parkmap__plate { width: 100%; height: auto; display: block; border-radius: 10px; }
.ping {
  position: absolute;
  left: var(--px); top: var(--py);
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(232,121,40,.25);
}
.ping::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(232,121,40,.5);
  animation: ping 2.4s var(--ease) infinite;
}
.ping--gold { background: var(--navy); box-shadow: 0 0 0 4px rgba(32,58,69,.2); }
.ping--gold::before { border-color: rgba(32,58,69,.45); }
.ping b {
  position: absolute; left: 22px; top: 50%; translate: 0 -50%;
  font-family: var(--slab); font-weight: 400; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  background: #FFFDF8;
  padding: 6px 11px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(20,36,45,.18);
}
@keyframes ping { 0% { transform: scale(.7); opacity: 1 } 100% { transform: scale(1.9); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .ping::before { animation: none; } }

/* stayers: full-bleed tabbed */
.stayers { position: relative; min-height: 88svh; display: grid; align-content: end; overflow: clip; color: var(--cream); }
.stayers__slides { position: absolute; inset: 0; }
.stayer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); pointer-events: none; display: grid; align-content: center; }
.stayer.is-active { opacity: 1; pointer-events: auto; }
.stayer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.stayer.is-active > img { animation: stayer-drift 7s var(--ease) both; }
@keyframes stayer-drift { from { transform: scale(1.08) } to { transform: scale(1.0) } }
.stayer__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,28,36,.35), rgba(16,28,36,.18) 40%, rgba(16,28,36,.86) 100%),
    linear-gradient(80deg, rgba(16,28,36,.6), rgba(16,28,36,.1) 55%);
}
.stayer__content {
  position: relative;
  padding: 0 var(--gutter);
  /* Centred in the space ABOVE the tab bar: the margin is counted into the
     centred track, which lifts the text clear of the tabs. */
  margin-bottom: clamp(96px, 13vh, 168px);
  max-width: 760px;
}
.stayer__kickline {
  font-family: var(--slab); font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.stayer__content h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.02;
  letter-spacing: .015em;
  margin-bottom: 16px;
  text-shadow: 0 4px 34px rgba(10,20,26,.4);
}
.stayer__copy { font-size: clamp(16px, 1.2vw, 20px); line-height: 1.6; color: #E4E8E2; max-width: 54ch; margin-bottom: 26px; }
.stayers__tabs {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 4vh, 48px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.stayers__tab {
  appearance: none; border: 0; cursor: pointer;
  text-align: left;
  background: rgba(18,30,38,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(247,244,238,.16);
  border-radius: 14px;
  color: #C9D1CC;
  font-family: var(--ui); font-weight: 600;
  font-size: clamp(12px, .95vw, 15px);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 18px 20px;
  position: relative; overflow: clip;
  transition: color .25s ease, background-color .25s ease;
}
.stayers__tab.is-active { color: var(--cream); background: rgba(18,30,38,.66); }
.stayers__tab i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(247,244,238,.14);
}
.stayers__tab i::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
}
.stayers__tab.is-active i::before { animation: tabfill var(--hold, 6.5s) linear both; }
@keyframes tabfill { to { transform: scaleX(1) } }

/* trips with imagery */
.trip {
  grid-template-columns: clamp(96px, 9vw, 150px) minmax(0, .9fr) minmax(0, 1fr) auto;
}
.trip__img {
  width: 100%; aspect-ratio: 4/3;
  border-radius: 14px; overflow: clip;
}
.trip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.trip:hover .trip__img img { transform: scale(1.06); }
.trip__text p { margin-top: 6px; }

/* faq layout */
.faq__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 4.5vw, 80px);
  align-items: start;
}
.faq__list { max-width: none; }
.faq__aside {
  position: sticky; top: 12vh;
  background: var(--ink);
  border-radius: 20px;
  overflow: clip;
  color: var(--body-on-ink);
  box-shadow: 0 24px 70px rgba(20,36,45,.22);
}
.faq__aside > img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.faq__aside-body { padding: clamp(22px, 2.2vw, 34px); display: grid; gap: 14px; justify-items: start; }
.faq__aside-body h3 {
  font-family: var(--accent); text-transform: uppercase; letter-spacing: .035em;
  font-size: clamp(22px, 1.8vw, 28px);
  color: var(--cream);
}
.faq__aside-body p { font-size: clamp(14.5px, 1.05vw, 17px); }
.link-arrow--cream { color: #C9D1CC; border-bottom-color: var(--gold); }
.link-arrow--cream:hover { color: var(--gold); }

@media (max-width: 1080px) {
  .parkmap { grid-template-columns: 1fr; }
  .faq__cols { grid-template-columns: 1fr; }
  .faq__aside { position: static; max-width: 520px; }
  .stayers__tabs { grid-template-columns: 1fr; gap: 8px; }
  .stayer__content { padding-bottom: clamp(240px, 34vh, 320px); }
}
@media (max-width: 820px) {
  .trip { grid-template-columns: 88px minmax(0, 1fr); }
  .trip__text { grid-column: 2; }
  .trip__tag { grid-column: 2; justify-self: start; }
  .ping b { display: none; }
}

/* ============ v5: eyebrows ============ */
.eyebrow {
  font-family: var(--slab);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ember-deep);
  margin-bottom: 14px;
}
.eyebrow--gold { color: var(--gold); }

/* eyebrow must claim its own line inside the flex section heads */
.stays__head .eyebrow,
.amen__head .eyebrow { flex: 0 0 100%; margin-bottom: -6px; }

/* pads: the whole left column pins, not just the map */
.pads__head { max-width: none; margin-bottom: clamp(26px, 2.8vw, 44px); }
.pads__lede { margin-top: 18px; }
.pads__sticky { top: clamp(80px, 10vh, 120px); }
.padrow h3 { color: var(--ember); }

/* parkmap: balance the tall portrait map with an eye-level view + real button spacing */
.parkmap { align-items: start; }
.parkmap__cta { margin-top: clamp(26px, 3vw, 40px); }
.parkmap__inset {
  position: relative;
  margin-top: clamp(30px, 3.4vw, 52px);
  border-radius: 18px;
  overflow: clip;
  aspect-ratio: 3 / 2;
  box-shadow: 0 26px 70px rgba(8, 16, 22, 0.4);
}
.parkmap__inset img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1080px) {
  .parkmap__inset { max-width: 560px; }
}

/* ---- v9: one vertical rhythm scale across every section ---- */
:root { --section-y: clamp(64px, 7vw, 112px); }
.stays, .proof, .pads, .amen, .parkmap, .area, .faq, .longterm {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.pads__inner, .listing__inner, .rates__inner { padding-block: 0; }
.stays__head, .amen__head, .area__head, .faq__head {
  margin-bottom: clamp(28px, 3vw, 46px);
}
.pads__head { margin-bottom: clamp(22px, 2.4vw, 36px); }
.footer { padding-top: clamp(56px, 6vw, 88px); }
.finale { padding-block: clamp(72px, 8vw, 120px); }

/* ---- v10: proof stats as a 2x2 block, image follows the shorter column ---- */
.proof__stats {
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(24px, 2.6vw, 40px);
}
.proof .stat { padding: clamp(18px, 1.9vw, 30px) clamp(18px, 1.9vw, 30px); }
.proof .stat__num { font-size: clamp(36px, 3.4vw, 58px); }
.proof .stat p { margin-top: 6px; font-size: clamp(13.5px, 1vw, 15.5px); max-width: 32ch; }
.proof__img { min-height: 340px; }
@media (max-width: 560px) {
  .proof__stats { grid-template-columns: 1fr; }
}

/* ---- v11: park map as a layered composition ---- */
.parkmap { align-items: center; }
.parkmap__board {
  width: min(100%, 400px);
  margin-inline: auto;
}
.parkmap__plate {
  max-height: 600px;
  width: 100%;
  object-fit: contain;
}
.parkmap__inset {
  position: absolute;
  left: clamp(-96px, -7vw, -60px);
  bottom: clamp(-30px, -3vw, -46px);
  width: clamp(200px, 20vw, 290px);
  aspect-ratio: 4 / 3;
  margin: 0;
  z-index: 2;
  border-radius: 16px;
  overflow: clip;
  border: 7px solid var(--ink);
  box-shadow: 0 28px 60px rgba(6, 12, 18, 0.55);
}
.parkmap__inset img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1080px) {
  .parkmap__board { margin-inline: 0; }
  .parkmap__inset {
    position: static; width: min(100%, 460px); aspect-ratio: 3 / 2;
    margin-top: 24px; border-width: 0; box-shadow: 0 20px 50px rgba(6,12,18,.4);
  }
}

/* ---- v11: sticky booking bar ---- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px var(--gutter);
  background: rgba(14, 24, 31, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  border-top: 1px solid rgba(247, 244, 238, 0.14);
  transform: translateY(115%);
  visibility: hidden;
  transition: transform .5s var(--ease), visibility .5s;
}
.stickybar.is-in { transform: none; visibility: visible; }
.stickybar__inner {
  display: flex; align-items: flex-end; gap: 14px;
  max-width: 1560px; margin-inline: auto;
}
.stickybar__brand {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .03em; color: var(--cream);
  font-size: clamp(15px, 1.2vw, 19px);
  margin-right: auto; padding-bottom: 9px; white-space: nowrap;
}
.stickybar__form { display: flex; align-items: flex-end; gap: 10px; }
.stickybar .rfield { gap: 4px; }
.stickybar .rfield span { font-size: 9.5px; letter-spacing: .14em; }
.stickybar .rfield input, .stickybar .rfield select {
  padding: 8px 10px; font-size: 14px; border-radius: 9px;
}
.stickybar__go { padding: 0.85em 1.5em; }
.stickybar__call {
  padding: 0.85em 1.4em; gap: 9px;
  font-variant-numeric: tabular-nums;
}
.stickybar__call svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) {
  .stickybar { padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); }
  .stickybar__brand, .stickybar .rfield { display: none; }
  .stickybar__inner { align-items: stretch; gap: 9px; }
  .stickybar__form { flex: 1 1 auto; }
  .stickybar__go { width: 100%; padding: 1em 0.8em; font-size: 13px; }
  .stickybar__call { flex: 0 0 auto; padding: 1em 1.15em; }
  .stickybar__call span { display: none; }
  .stickybar__call svg { width: 18px; height: 18px; }
  .footer { padding-bottom: 96px; }
}

/* ---- v11: mobile hero density + burger (mobile only; desktop untouched) ---- */
@media (max-width: 820px) {
  .nav { padding: 10px 16px; }
  .nav__logo { margin-right: auto; }
  .nav__logo img { height: 42px; }
  .nav__actions { display: none; }
  .nav__burger {
    width: 48px; height: 56px;
    border-radius: 14px;
    background: var(--ember);
    border: 0;
    gap: 5px;
  }
  .nav__burger span { width: 19px; height: 2.5px; background: var(--ink); border-radius: 2px; }

  .hero { padding-bottom: 22px; }
  .hero__content { margin-top: 11vh; }
  .hero__locator { font-size: 11px; letter-spacing: .2em; margin-bottom: 10px; }
  .hero__title { font-size: 42px; line-height: 1.04; margin-bottom: 12px; }
  .hero__sub { font-size: 16px; line-height: 1.5; }
  .hero__chips { gap: 7px; margin-top: 14px; }
  .hero__chips li { font-size: 10.5px; letter-spacing: .05em; padding: 7px 11px; gap: 6px; }
  .hero__chips li::before { width: 5px; height: 5px; }
  .hero__paths { font-size: 14px; margin-top: 14px; }
  .reserve { margin-top: 22px; }
  .reserve__tabs { margin-bottom: 16px; }
  .reserve__tab { padding: 13px 8px 11px; font-size: 12px; }
}

/* ---- v12: heading wrap + shorter finale on mobile ---- */
.h2 { text-wrap: balance; }
.finale__title { text-wrap: balance; }

@media (max-width: 820px) {
  .h2 { font-size: clamp(29px, 7.6vw, 34px); line-height: 1.06; }
  .area__head { margin-bottom: 20px; }
  .area__lede { margin-top: 16px; font-size: 16px; }
  .trip { padding: 20px 0; gap: 14px; }
  .trip h3 { font-size: 20px; }
  .trip p { font-size: 15px; }

  .finale { min-height: auto; padding-block: clamp(66px, 13vh, 96px); }
  .finale__title { font-size: clamp(34px, 9.6vw, 44px); margin-bottom: 24px; }
  .finale__actions { gap: 12px; width: 100%; }
  .finale__actions .btn { width: 100%; }
  .finale__note { margin-top: 22px; font-size: 11px; letter-spacing: .2em; }
}

/* ---- v12: footer base row with agency credit ---- */
.footer__base {
  margin-top: clamp(50px, 6vw, 80px);
  padding-top: 24px;
  border-top: 1px solid rgba(247, 244, 238, 0.08);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap;
}
.footer__base .footer__legal { margin: 0; padding: 0; border: 0; }
.footer__credit { margin: 0; font-size: 13.5px; color: #92A0A6; }
.footer__credit a {
  color: #BAC4C0;
  border-bottom: 1px solid rgba(232, 121, 40, .55);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.footer__credit a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---- v13: map must never be covered; balance with a wide photo strip instead ---- */
.parkmap__board { width: min(100%, 396px); }
.parkmap__inset {
  position: static;
  width: 100%;
  aspect-ratio: 21 / 9;
  margin: clamp(28px, 3vw, 44px) 0 0;
  border: 0;
  border-radius: 16px;
  overflow: clip;
  box-shadow: 0 22px 55px rgba(6, 12, 18, 0.42);
}
@media (max-width: 1080px) {
  .parkmap__inset {
    width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin-top: 26px;
  }
}

/* ---- v14: sticky bar balance on wide screens ---- */
.stickybar__inner { max-width: 1320px; gap: 18px; }
.stickybar__brand { margin-right: auto; }
.stickybar__form { margin-left: auto; gap: 12px; }
.stickybar__call { margin-left: auto; }
.stickybar .rfield input[type="date"] { min-width: 140px; }
.stickybar .rfield select { min-width: 104px; }
.stickybar__go { padding-inline: 1.9em; }

/* ---- v14: input icon contrast on dark fields ---- */
.rfield input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.9);
  opacity: .78;
  cursor: pointer;
  transition: opacity .2s ease;
}
.rfield input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* selects use appearance:none, so give them a light chevron of their own */
.rfield select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE3DE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}
.stickybar .rfield select { background-position: right 9px center; background-size: 13px; padding-right: 29px; }

/* color-scheme:dark already renders the picker glyph light — inverting it darkened it */
.rfield input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: .8;
}
.rfield input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---- v15: sticky bar spans the page container, brand carries a booking cue ---- */
.stickybar__inner { max-width: none; }
.stickybar__brand {
  margin-right: auto;
  display: grid;
  gap: 1px;
  padding-bottom: 5px;
}
.stickybar__name {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cream);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.15;
  white-space: nowrap;
}
.stickybar__cue {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.2;
  color: #93A0A6;
  white-space: nowrap;
}

/* ---- v16: sensible line breaking everywhere ---- */
h1, h2, h3, h4,
.hero__title, .finale__title, .stayer__content h3,
.qa summary, .stickybar__name { text-wrap: balance; }
p, li, figcaption, .hero__sub, .hero__paths { text-wrap: pretty; }

/* ---- v16: floating pill sticky bar ---- */
.stickybar {
  left: 50%;
  right: auto;
  width: min(96%, 1360px);
  bottom: clamp(12px, 2vh, 20px);
  padding: 10px 16px 10px 26px;
  border: 1px solid rgba(247, 244, 238, 0.16);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(4, 10, 15, 0.5);
  transform: translate(-50%, calc(100% + 40px));
}
.stickybar.is-in { transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .stickybar {
    width: 94%;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 8px 8px 8px 16px;
  }
  .footer { padding-bottom: 110px; }
}

/* ---- v16 fixes ---- */
/* extra break that only exists on small screens, so the headline never splits a phrase */
@media (max-width: 820px) {
  .hero__title br { display: inline; }
  .hero__title { font-size: 40px; }
  /* the floating-bar rules above re-enabled the brand; keep it off on small screens */
  .stickybar__brand { display: none; }
  .stickybar__form { margin-left: 0; }
}

/* ---- v17: headline holds two lines on mobile ---- */
@media (max-width: 820px) {
  .hero__title { font-size: clamp(30px, 11.4vw, 46px); line-height: 1.04; }
  .hero__title br}

/* Hero headline start state.
   Without this the H1 paints fully visible, then SplitText runs after
   document.fonts.ready and gsap.from() slides the lines up from below, so the
   headline is seen twice. Hidden only under .m (motion enabled, set inline in
   <head> before paint); app.js reveals it the moment the lines are masked and
   has an 1800ms failsafe, so it can never be stranded invisible. */
.m .hero__title-main { opacity: 0; }
.m .hero__kicker { opacity: 0; transform: translateY(28px); }
.hero__title-main { display: block; }

/* No JavaScript, no .m, so everything stays visible. */
.static .hero__title-main, .static .hero__kicker { opacity: 1 !important; transform: none !important; }

/* ============================================================
   WordPress theme additions
   New elements introduced by the WP build. Everything above this
   line is the original static design, unchanged.
   ============================================================ */

/* Accessibility: skip link, visible only on keyboard focus. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed!important;top:12px;left:12px;z-index:9999;
  width:auto;height:auto;clip:auto;margin:0;
  padding:12px 18px;border-radius:6px;
  background:var(--ink,#203A45);color:#F7F4EE;
  font:600 15px/1 "Source Sans 3",system-ui,sans-serif;text-decoration:none;
}

/* Pre-opening banner across the top of the booking card.
   Full-bleed to the card edges, matching the negative margins the tab row
   already uses, so it reads as part of the card rather than floating on it. */
.reserve__flag{
  display:block;
  font:600 11px/1.45 "Jost",system-ui,sans-serif;
  letter-spacing:.11em;text-transform:uppercase;text-align:center;
  color:#F7F4EE;background:rgba(232,121,40,.95);
  margin:0 calc(-1 * clamp(22px, 2vw, 30px)) 0;
  padding:10px 14px;
  text-wrap:balance;
}
/* The date must never split across lines. If the banner has to wrap it
   breaks at the separator, not in the middle of "1 December 2026". */
.reserve__flag .nowrap{white-space:nowrap;}

/* The keyword line now sits under the headline, quieter than it. */
/* Keyword line inside the H1, sitting under the brand line. Quieter than the
   headline, but still a real visible part of the H1 so the primary search term
   is carried by the page's main heading. */
h1.hero__kicker{font-weight:400;}
.hero__kicker{
  display:block;
  font-family:var(--slab);
  font-size:clamp(12px,1vw,16px);
  font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
  margin:0 0 clamp(16px,2vh,26px);
}

/* Amenity card for something not open yet. Dimmed so it cannot be
   mistaken for an available facility, but still indexed and visible. */
.acard--soon{opacity:.86}
.acard--soon h3{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
.acard__soon{
  font:600 10px/1 "Jost",system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  color:#203A45;background:rgba(232,121,40,.92);
  padding:5px 9px;border-radius:999px;white-space:nowrap;
}

/* Long-stay panel, phone-first while there is no inquiries mailbox. */
.enq__lead{
  margin:0 0 22px;font-size:1rem;line-height:1.6;
  color:rgba(247,244,238,.82);
}
.footer__phone{
  display:inline-block;margin-top:12px;
  font:600 1.05rem/1 "Jost",system-ui,sans-serif;
  color:inherit;text-decoration:none;
}
.footer__phone:hover{color:#E87928}

/* Interior pages (404, generic page template). */
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.page-body{padding:140px 0 100px}
.page-body h1{margin-bottom:24px}
.page-body p{margin:0 0 1em;font-size:1.05rem;line-height:1.7}

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

/* ============================================================
   Amenities v2: photo row + compact tiles
   The single bento grid was designed around four text cards with big
   icons. With ten operational amenities it produced empty slabs, so the
   photographs keep their drama on one row and the facilities below read
   as a tight, scannable list.
   ============================================================ */
.amen__grid--photos {
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-auto-rows: clamp(250px, 26vw, 410px);
}
.amen__grid--photos .acard--tall { grid-row: auto; grid-column: auto; }

.amen__list {
  list-style: none;
  margin: clamp(12px, 1.2vw, 20px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 20px);
}
.atile {
  background: var(--sand);
  border-radius: 14px;
  padding: clamp(18px, 1.7vw, 26px);
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.atile::before {
  content: "";
  display: block;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--ember);
  margin-bottom: 14px;
}
.atile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,28,36,.10); }
.atile h3 {
  font-family: var(--accent);
  font-size: clamp(17px, 1.25vw, 21px);
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.atile p { margin: 0; font-size: clamp(13.5px, .95vw, 15.5px); line-height: 1.55; }
.atile--ember { background: var(--navy); }
.atile--ember::before { background: var(--gold); }
.atile--ember h3 { color: var(--cream); }
.atile--ember p { color: var(--body-on-ink); }
.atile--soon { background: transparent; border: 1.5px dashed rgba(16,28,36,.28); }
.atile__soon {
  font: 600 10px/1 "Jost", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: rgba(232,121,40,.9);
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 1080px) {
  .amen__grid--photos { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(190px, 24vw, 300px); }
  .amen__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .amen__grid--photos { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .amen__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .amen__list { grid-template-columns: 1fr; }
}