/* ============================================================
   Desert Glow — site stylesheet
   Palette: desert sand + sunset coral/pink + pool teal + dusk plum
   Type: Fraunces (display) / Karla (body)
   ============================================================ */

:root {
  --sand: #FAF3E8;
  --sand-deep: #F1E3CC;
  --paper: #FFFDF9;
  --ink: #33241C;
  --ink-soft: #71594A;
  --line: #E8D9C2;

  --terracotta: #D96844;
  --coral: #FF6B5E;
  --pink: #F04E86;
  --pink-soft: #FF7BA9;
  --amber: #F5A83C;
  --teal: #1FA9A0;
  --teal-deep: #0F6E67;

  --dusk: #3A2353;
  --night: #201434;
  --night-2: #2C1A3B;

  --grad-sunset: linear-gradient(100deg, var(--amber) 0%, var(--coral) 34%, var(--pink) 68%, #B04AA0 100%);
  --grad-btn: linear-gradient(100deg, #FF7A45, var(--pink));

  --radius: 22px;
  --shadow-1: 0 10px 30px rgba(51, 36, 28, .10);
  --shadow-2: 0 24px 60px rgba(51, 36, 28, .16);
  /* Glow system: warm halo for light sections, pink for interactive accents.
     Used for hover states, ambient section light, and the brand's namesake. */
  --glow-warm: 0 14px 40px rgba(217, 104, 68, .22);
  --glow-pink: 0 14px 40px rgba(240, 78, 134, .26);
  --nav-h: 76px;

  --fs-h1: clamp(2.75rem, 6.5vw, 4.9rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.35rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Karla", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 560; line-height: 1.08; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h2 em, h1 em, .finale h2 em {
  font-style: italic; font-weight: 620;
  background: var(--grad-sunset);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
::selection { background: var(--pink); color: #fff; }

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.container--narrow { width: min(820px, calc(100% - 48px)); }

.section { padding: clamp(72px, 9vw, 128px) 0; scroll-margin-top: var(--nav-h); }
.section--sand { background: var(--sand); }
.section__lead { max-width: 640px; color: var(--ink-soft); font-size: 1.08em; }

.eyebrow {
  font-family: "Karla", sans-serif; font-weight: 800; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--terracotta);
  margin: 0 0 14px;
}
.eyebrow--light { color: var(--amber); }
.eyebrow--neon { color: var(--pink-soft); }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Karla", sans-serif; font-weight: 800; font-size: .95rem;
  letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--lg { padding: 16px 34px; font-size: 1.02rem; }
.btn--primary {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 8px 24px rgba(240, 78, 134, .38);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(240, 78, 134, .5); color: #fff; }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { border-color: rgba(255,255,255,.85); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px); }
.btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Hero badge: one segmented glass pill carrying all the social proof */
.hero__badge {
  display: inline-flex; align-items: stretch; gap: 0;
  background: rgba(24, 12, 36, .58); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .30); border-radius: 999px;
  padding: 10px 8px; margin: 26px 0 30px;
  box-shadow: 0 10px 34px rgba(20, 8, 30, .35), inset 0 1px 0 rgba(255,255,255,.14);
}
.hero__badge-item { display: inline-flex; align-items: center; gap: 10px; padding: 2px 18px; color: #fff; }
.hero__badge-item .ic { color: var(--amber); width: 20px; height: 20px; }
.hero__badge-item .ic--pink { color: var(--pink-soft); }
.hero__badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.hero__badge-text strong { font-size: .98rem; letter-spacing: .01em; }
.hero__badge-text em { font-style: normal; font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.72); letter-spacing: .04em; }
.hero__badge-sep { width: 1px; margin: 4px 0; background: rgba(255,255,255,.22); }

.ic { width: 22px; height: 22px; flex: none; }
.ic--lg { width: 30px; height: 30px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.nav__inner {
  width: min(1320px, calc(100% - 40px)); margin-inline: auto;
  height: var(--nav-h); display: flex; align-items: center; gap: 28px;
}
.nav__logo { flex: none; display: block; position: relative; }
.nav__logo img { width: 150px; height: 50px; object-fit: contain; }
.nav__logo-black { display: none; }
.nav__links { display: flex; gap: 24px; margin-left: auto; }
.nav__links a {
  color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.35); padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav__links a:hover { color: var(--pink-soft); border-color: var(--pink-soft); }
.nav__cta { flex: none; padding: 11px 22px; }
.nav__burger { display: none; }

.nav--solid { background: rgba(250, 243, 232, .92); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(51,36,28,.10); }
.nav--solid .nav__links a { color: var(--ink); text-shadow: none; }
.nav--solid .nav__links a:hover { color: var(--pink); border-color: var(--pink); }
.nav--solid .nav__logo-white { display: none; }
.nav--solid .nav__logo-black { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__bg, .hero__bg picture, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; object-position: 50% 52%; }
/* One slow cinematic settle instead of a looping zoom: starts slightly closer,
   eases out to rest over ~30s and stays there. GPU-composited, no repaint churn. */
.hero__bg img {
  will-change: transform;
  transform: scale(1.12) translate3d(0, -1.2%, 0);
  animation: hero-settle 30s cubic-bezier(.16, .55, .27, .96) .15s forwards;
}
@keyframes hero-settle { to { transform: scale(1.015) translate3d(0, 0, 0); } }
/* The hero photo is a real sunset, so the scrim only buys legibility: it darkens
   the left column the text sits in, plus the top and bottom edges for the nav and
   the scroll cue. No colour is added, the sky already has plenty of its own. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,8,24,.80) 0%, rgba(14,8,24,.52) 34%, rgba(14,8,24,.14) 62%, rgba(14,8,24,0) 100%),
    linear-gradient(180deg, rgba(14,8,24,.46) 0%, rgba(14,8,24,0) 20%, rgba(14,8,24,0) 60%, rgba(14,8,24,.52) 100%);
}
.hero__content { position: relative; z-index: 2; color: #fff; padding: calc(var(--nav-h) + 40px) 0 90px; }
.hero__eyebrow {
  font-weight: 800; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px; text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.hero__title { color: #fff; text-shadow: 0 2px 30px rgba(20,8,30,.45); margin-bottom: .35em; }
.hero__title em {
  font-style: italic;
  background: linear-gradient(100deg, #FFC26B, #FF8E7A 45%, #FF7BA9 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 130, 150, .45));
  /* The word "glows" actually glows: a slow breath, never a blink. */
  animation: word-glow 5.5s ease-in-out infinite;
}
@keyframes word-glow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 130, 150, .42)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255, 158, 120, .72)); }
}
.hero__sub { max-width: 560px; font-size: 1.12rem; line-height: 1.6; color: rgba(255,255,255,.94); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__ctas .btn--primary { animation: cta-glow 3.6s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(240, 78, 134, .38); }
  50%      { box-shadow: 0 10px 30px rgba(240, 78, 134, .58), 0 0 44px rgba(255, 122, 69, .34); }
}
.hero__ctas .btn--primary:hover { animation: none; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 28px; height: 46px; border: 2px solid rgba(255,255,255,.7); border-radius: 999px; z-index: 2;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px;
  background: #fff; border-radius: 2px; animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(14px); opacity: .2; } }

/* ---------- Stats strip ---------- */
.stats { background: var(--night-2); color: #fff; }
.stats__row { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat { text-align: center; padding: 26px 8px; }
.stat strong {
  display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 122, 69, .32));
}
.stat span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 700; }

/* ---------- Shared grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.grid-2--rev > :first-child { order: 2; }
.grid-2--rev > :last-child { order: 1; }

/* ---------- Story ---------- */
.story__media { margin: 0; position: relative; isolation: isolate; }
/* Ambient sunset light spilling out from behind the arch. */
.story__media::before {
  content: ""; position: absolute; inset: -9% -7% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 48% at 50% 42%, rgba(255, 138, 76, .48), rgba(240, 78, 134, .26) 48%, transparent 72%);
  filter: blur(42px);
}
.story__media img {
  border-radius: 300px 300px var(--radius) var(--radius);
  box-shadow: var(--shadow-2), 0 0 60px rgba(240, 78, 134, .14);
}
.story__caption { margin-top: 12px; text-align: center; font-size: .88rem; color: var(--ink-soft); font-style: italic; }
.sunset-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--grad-sunset) border-box;
  border: 2px solid transparent; border-radius: var(--radius);
  padding: 18px 20px; margin-top: 26px; box-shadow: var(--shadow-1);
}
.sunset-card { box-shadow: var(--shadow-1), 0 0 34px rgba(245, 168, 60, .20); }
.sunset-card .ic--lg { color: var(--amber); margin-top: 2px; filter: drop-shadow(0 0 10px rgba(245, 168, 60, .55)); }
.sunset-card strong { display: block; font-size: 1.05rem; }
.sunset-card span { color: var(--ink-soft); font-size: .84rem; letter-spacing: -.005em; white-space: nowrap; }
@media (max-width: 1240px) { .sunset-card span { white-space: normal; } }

/* ---------- Backyard ---------- */
.backyard__collage {
  display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 18px; margin: 44px auto 54px;
}
.backyard__collage figure { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-1); }
.backyard__collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.backyard__collage figure:hover img { transform: scale(1.04); }
.collage__main { grid-row: 1 / 3; }
.collage__main img { min-height: 100%; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 20px; transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--glow-warm); border-color: rgba(240, 78, 134, .28); }
.feature .ic { width: 30px; height: 30px; color: var(--terracotta); margin-bottom: 12px; }
.feature h3 { margin-bottom: .35em; }
.feature p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- Game room ---------- */
.section--night { background: radial-gradient(1200px 600px at 80% -10%, #3A2065 0%, var(--night) 55%); color: #fff; }
.section--night h2 { color: #fff; }
.section--night p { color: rgba(255,255,255,.82); }
.neon {
  color: var(--pink-soft);
  text-shadow: 0 0 8px rgba(255,110,160,.9), 0 0 28px rgba(244,78,134,.55), 0 0 60px rgba(244,78,134,.35);
  animation: neon-hum 4.5s ease-in-out infinite;
}
@keyframes neon-hum {
  0%, 100% { text-shadow: 0 0 8px rgba(255,110,160,.9), 0 0 28px rgba(244,78,134,.55), 0 0 60px rgba(244,78,134,.35); }
  50% { text-shadow: 0 0 10px rgba(255,110,160,1), 0 0 36px rgba(244,78,134,.7), 0 0 80px rgba(244,78,134,.45); }
}
.ticklist { list-style: none; margin: 0 0 1em; padding: 0; }
.ticklist li { padding: 9px 0 9px 34px; position: relative; }
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--grad-sunset);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 10-10-1.4-1.4z" fill="black"/></svg>') center / contain no-repeat;
}
.section--night .ticklist li::before { background: linear-gradient(100deg, var(--amber), var(--pink-soft)); }
.gameroom__media { margin: 0; position: relative; padding-bottom: 56px; }
.gameroom__media > img { border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.gameroom__media-b {
  margin: 0; position: absolute; right: -8px; bottom: 0; width: 52%;
  border: 5px solid var(--night); border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.55); transform: rotate(2.5deg);
}

/* ---------- Bedrooms ---------- */
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.room-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease;
}
.room-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2), 0 0 34px rgba(240, 78, 134, .18); border-color: rgba(240, 78, 134, .26); }
.room-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.room-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.room-card:hover img { transform: scale(1.05); }
.room-card__body { padding: 20px 22px 22px; }
.room-card__body h3 { margin-bottom: .3em; }
.room-card__body p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.sleep__note { margin-top: 30px; color: var(--ink-soft); max-width: 720px; }
.floorplan { margin-top: 44px; text-align: center; }
.floorplan img {
  max-width: 760px; width: 100%; margin-inline: auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); background: #fff;
}
.floorplan figcaption { margin-top: 12px; font-size: .88rem; color: var(--ink-soft); font-style: italic; }

/* ---------- Gather ---------- */
.gather__media { margin: 0; position: relative; padding-bottom: 64px; }
.gather__media > img { border-radius: var(--radius); box-shadow: var(--shadow-2); }
.gather__media-b {
  margin: 0; position: absolute; left: -10px; bottom: 0; width: 55%;
  border: 6px solid var(--sand); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-2);
  transform: rotate(-2deg);
}
.water-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #EAF6F4; border: 1px solid #CBE8E4; border-radius: var(--radius);
  padding: 18px 20px; margin-top: 10px;
}
.water-card .ic--lg { color: var(--teal); margin-top: 2px; }
.water-card strong { display: block; font-size: 1.05rem; }
.water-card span { color: #3E6560; font-size: .92rem; }

/* ---------- Reviews ---------- */
.section--dusk {
  background:
    radial-gradient(900px 420px at 50% 118%, rgba(255,122,69,.34) 0%, rgba(240,78,134,.16) 42%, transparent 70%),
    linear-gradient(180deg, var(--night-2) 0%, var(--dusk) 100%);
  color: #fff;
}
.reviews__headline { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; margin: 10px 0 44px; }
.reviews__score { text-align: center; }
.reviews__number {
  display: block; font-family: "Fraunces", serif; font-weight: 620; font-size: clamp(4rem, 8vw, 6.2rem); line-height: 1;
  background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(255, 122, 69, .42));
}
.reviews__stars .ic { filter: drop-shadow(0 0 8px rgba(245, 168, 60, .6)); }
.reviews__stars { display: inline-flex; gap: 3px; color: var(--amber); margin: 10px 0 8px; }
.reviews__meta { display: block; color: rgba(255,255,255,.75); font-size: .9rem; font-weight: 700; }
.reviews__bars { display: grid; gap: 10px; max-width: 520px; }
.rbar { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 14px; font-size: .88rem; font-weight: 700; }
.rbar span { color: rgba(255,255,255,.8); }
.rbar b { text-align: right; }
.rbar__track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.rbar__track i { display: block; height: 100%; width: var(--w, 0); border-radius: 3px; background: var(--grad-sunset); transform-origin: left; }
.reveal-bars .rbar__track i { animation: bar-grow 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reviews__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  margin: 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 26px 24px; backdrop-filter: blur(4px);
}
.quote p { font-family: "Fraunces", serif; font-weight: 480; font-size: 1.02rem; line-height: 1.5; color: #fff; }
.quote footer { color: var(--amber); font-weight: 800; font-size: .85rem; letter-spacing: .06em; }
.reviews__tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 34px 0 8px; }
.tag {
  border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.9);
  border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 800;
}
.reviews__cta { text-align: center; margin-top: 26px; }

/* ---------- Gallery ---------- */
.gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 30px; }
.fbtn {
  font-family: "Karla", sans-serif; font-weight: 800; font-size: .88rem;
  padding: 9px 20px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
  transition: all .18s ease;
}
.fbtn:hover { border-color: var(--pink); color: var(--pink); }
.fbtn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery__item {
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 16px; cursor: zoom-in; padding: 0; border: 0; background: var(--sand-deep);
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover { box-shadow: 0 12px 34px rgba(240, 78, 134, .30); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item.is-hidden { display: none; }
.gallery__item::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(28,15,40,.35));
  opacity: 0; transition: opacity .25s ease;
}
.gallery__item:hover::after { opacity: 1; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(18, 10, 26, .96);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__stage { margin: 0; max-width: min(1400px, 92vw); max-height: 86vh; text-align: center; }
.lightbox__stage img { max-width: 100%; max-height: 80vh; width: auto; height: auto; margin-inline: auto; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.lightbox__stage figcaption { color: rgba(255,255,255,.8); font-size: .92rem; margin-top: 14px; }
.lightbox__close, .lightbox__nav {
  position: fixed; z-index: 101; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%; width: 52px; height: 52px; font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(240,78,134,.5); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ---------- Location ---------- */
.location__grid { align-items: stretch; }
.location__map { display: flex; flex-direction: column; }
.location__mapwrap { position: relative; flex: 1; display: flex; }
.location__map iframe {
  width: 100%; flex: 1; min-height: 380px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-btn); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(240, 78, 134, .45); pointer-events: none;
}
.map-pin .ic { color: #fff; width: 24px; height: 24px; }
.map-pin::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid rgba(240, 78, 134, .55); animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}
.location__note { font-size: .85rem; color: var(--ink-soft); margin: 10px 4px 0; font-style: italic; }
.location__list { display: grid; gap: 14px; align-content: center; }
.poi {
  display: flex; gap: 16px; align-items: flex-start; background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.poi:hover { transform: translateX(4px); box-shadow: var(--glow-warm); border-color: rgba(240, 78, 134, .24); }
.poi .ic { color: var(--terracotta); margin-top: 3px; }
.poi strong { display: block; font-size: 1.02rem; }
.poi span { color: var(--ink-soft); font-size: .92rem; }

/* ---------- Book direct ---------- */
.bookdirect { text-align: center; }
.bookdirect h2 { margin-bottom: 40px; }
.bookdirect__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.why-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: transform .2s ease, box-shadow .2s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--glow-pink); border-color: rgba(240, 78, 134, .28); }
.why-card .ic { width: 30px; height: 30px; color: var(--pink); margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(240, 78, 134, .35)); }
.why-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.bookdirect__cta { margin: 40px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bookdirect__alt { color: var(--ink-soft); font-size: .95rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Savings table ---------- */
.savings { margin-top: 56px; text-align: left; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px clamp(20px, 4vw, 44px) 30px; }
.savings h3 { margin-bottom: .35em; }
.savings__lead { color: var(--ink-soft); font-size: .96rem; max-width: 62ch; margin-bottom: 22px; }
.savings__tablewrap { overflow-x: auto; }
.savings__table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 460px; }
.savings__table th, .savings__table td { padding: 13px 14px; text-align: right; }
.savings__table thead th {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
  color: var(--ink-soft); border-bottom: 2px solid var(--line); white-space: nowrap;
}
.savings__table thead th:first-child, .savings__table tbody th { text-align: left; }
.savings__table tbody th { font-weight: 800; color: var(--ink); white-space: nowrap; }
.savings__table tbody tr + tr th, .savings__table tbody tr + tr td { border-top: 1px solid var(--line); }
.savings__table td { font-variant-numeric: tabular-nums; }
.savings__plat { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(217,104,68,.55); }
.savings__save { font-weight: 800; color: var(--teal-deep); white-space: nowrap; }
.savings__table tbody tr:hover th, .savings__table tbody tr:hover td { background: rgba(255,255,255,.6); }
.savings__fine { margin: 18px 0 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Good to know: benefits up front, rules folded away ---------- */
.goodtoknow { margin-top: 22px; text-align: left; }
.gtk__good { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px clamp(20px, 4vw, 40px) 26px; }
.gtk__good h3 { margin-bottom: 22px; }
.gtk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; }
.gtk__item { display: flex; gap: 14px; align-items: flex-start; }
.gtk__item .ic { width: 24px; height: 24px; color: var(--teal); margin-top: 2px; flex: none; filter: drop-shadow(0 0 8px rgba(31,169,160,.35)); }
.gtk__item strong { display: block; font-size: 1rem; line-height: 1.3; }
.gtk__item span { display: block; font-size: .88rem; color: var(--ink-soft); margin-top: 2px; }
.gtk__rules { margin-top: 14px; background: var(--sand); border: 1px solid var(--line); border-radius: 16px; padding: 0 clamp(18px, 3vw, 28px); }
.gtk__rules summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 800; font-size: .95rem; color: var(--ink-soft); padding: 16px 0;
}
.gtk__rules summary::-webkit-details-marker { display: none; }
.gtk__rules summary::after {
  content: "+"; font-family: "Fraunces", serif; font-size: 1.4rem; font-weight: 400; color: var(--terracotta);
  transition: transform .25s ease; flex: none; line-height: 1;
}
.gtk__rules[open] summary::after { transform: rotate(45deg); }
.gtk__rules ul { margin: 0 0 20px; padding-left: 20px; color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }
.gtk__rules li + li { margin-top: 8px; }

/* ---------- Contact ---------- */
.contact__grid { align-items: start; }
.contact__copy { padding-top: 14px; }
.contact__alt { color: var(--ink-soft); font-size: .95rem; }
.contact__form {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; box-shadow: var(--shadow-1);
}
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; }
.field > span, .field > legend {
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0;
}
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: 12px; padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240, 78, 134, .14);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #B7A28E; }
.field--topics { display: grid; gap: 8px; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; opacity: 0; pointer-events: none; }
.topics span {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--paper);
  font-size: .9rem; font-weight: 800; color: var(--ink-soft);
  transition: all .15s ease;
}
.topics input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.topics input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }
.topics label:hover span { border-color: var(--pink); color: var(--pink); }
.topics input:checked + span:hover { color: #fff; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.contact__error {
  margin: 0; padding: 12px 16px; border-radius: 12px; font-size: .92rem; font-weight: 700;
  background: #FDECEF; border: 1px solid #F6C2D0; color: #B2224E;
}
.field-error {
  margin: -6px 0 0; font-size: .88rem; font-weight: 700; color: #B2224E;
  display: flex; align-items: center; gap: 8px;
}
.field-error::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #B2224E; color: #fff; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.field input[aria-invalid="true"] { border-color: #E4809B; background: #FFF7F9; }
.field input:disabled { background: #F4EEE4; color: var(--ink-soft); cursor: not-allowed; opacity: .75; }
.date-jump { margin: -4px 0 0; }
.date-jump a {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 800; font-size: .92rem; color: var(--teal-deep);
  background: #EAF6F4; border: 1px solid #CBE8E4; border-radius: 999px;
  padding: 10px 18px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.date-jump a:hover {
  color: var(--teal-deep); transform: translateY(-2px);
  border-color: var(--teal); box-shadow: 0 10px 24px rgba(31, 169, 160, .22);
}
.date-jump .ic { width: 18px; height: 18px; color: var(--teal); }
.contact__submit { justify-self: start; }
.contact__submit:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; animation: none; }
.contact__submit[disabled] { opacity: .6; cursor: wait; transform: none !important; }
.contact__fine { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.contact__success {
  grid-column: 2; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(32px, 4vw, 48px); text-align: center; box-shadow: var(--shadow-1);
}
.contact__success .ic--lg { color: var(--amber); width: 40px; height: 40px; margin-bottom: 10px; }
.contact__success p { color: var(--ink-soft); margin: 0; }

/* ---------- FAQ ---------- */
.faq__list { display: grid; gap: 12px; margin-top: 10px; }
.faq__item {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px;
}
.faq__item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 800; font-size: 1.02rem; padding: 18px 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: "Fraunces", serif; font-size: 1.5rem; font-weight: 400; color: var(--pink);
  transition: transform .25s ease; flex: none; line-height: 1;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--ink-soft); margin: 0 0 20px; }

/* ---------- Finale ---------- */
.finale { position: relative; padding: clamp(110px, 16vw, 200px) 0; overflow: hidden; }
.finale__bg, .finale__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,12,36,.72), rgba(24,12,36,.35) 45%, rgba(24,12,36,.78)); }
.finale__content { position: relative; z-index: 2; text-align: center; color: #fff; }
.finale h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); text-shadow: 0 2px 26px rgba(0,0,0,.45); }
.finale h2 em { filter: drop-shadow(0 2px 14px rgba(20, 8, 30, .65)); }
.finale__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ---------- Footer ---------- */
.footer { background: var(--night); color: rgba(255,255,255,.75); padding: 54px 0 90px; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer__logo { width: 170px; height: auto; opacity: .95; }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.footer__links a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 700; font-size: .9rem; }
.footer__links a:hover { color: var(--pink-soft); }
.footer__fine { font-size: .8rem; color: rgba(255,255,255,.5); margin: 0; line-height: 1.9; }
.footer__fine a { color: rgba(255,255,255,.7); }

/* ---------- Mobile booking bar ---------- */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(32, 20, 52, .92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: translateY(110%); transition: transform .3s ease;
}
.mobilebar.is-visible { transform: translateY(0); }
.mobilebar__info { color: #fff; line-height: 1.25; }
.mobilebar__info strong { display: block; color: var(--amber); font-size: 1rem; }
.mobilebar__info span { font-size: .78rem; color: rgba(255,255,255,.75); }
.mobilebar .btn { padding: 12px 22px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid, .bookdirect__cols { grid-template-columns: repeat(2, 1fr); }
  .card-row { grid-template-columns: 1fr 1fr; }
  .reviews__quotes { grid-template-columns: 1fr 1fr; }
  .reviews__quotes .quote:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: rgba(32,20,52,.97); backdrop-filter: blur(12px);
    padding: 10px 0 16px; transform: translateY(-130%); transition: transform .3s ease; z-index: 49;
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links a { color: #fff !important; text-shadow: none; padding: 13px 28px; font-size: 1.05rem; border: 0; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-left: 6px;
    background: transparent; border: 0; cursor: pointer;
  }
  .nav__burger span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease; }
  .nav--solid .nav__burger span { background: var(--ink); }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav__cta { margin-left: auto; }
  .nav__inner { gap: 10px; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-2--rev > :first-child { order: 1; }
  .grid-2--rev > :last-child { order: 2; }
  .story__media img { border-radius: 200px 200px var(--radius) var(--radius); }
  .backyard__collage { grid-template-columns: 1fr; grid-template-rows: auto; }
  .collage__main { grid-row: auto; }
  .reviews__headline { grid-template-columns: 1fr; text-align: center; }
  .reviews__bars { margin-inline: auto; width: 100%; }
  .rbar { grid-template-columns: 104px 1fr 30px; }
  .gtk__grid { grid-template-columns: 1fr; }
  .stats__row { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 18px 6px; }
}
@media (max-width: 720px) {
  .mobilebar { display: flex; }
  .footer { padding-bottom: 150px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card-row { grid-template-columns: 1fr; }
  .feature-grid, .bookdirect__cols { grid-template-columns: 1fr; }
  .reviews__quotes { grid-template-columns: 1fr; }
  .hero__sub { font-size: 1.02rem; }
  .btn--lg { padding: 14px 26px; }
  .gameroom__media-b, .gather__media-b { position: static; width: 100%; transform: none; margin-top: 12px; border-width: 0; }
  .gameroom__media, .gather__media { padding-bottom: 0; }
  /* The mobile hero ships as a pre-cropped portrait file; center it and
     soften the settle so small screens get the calm version. */
  .hero__bg img { object-position: 50% 50%; transform: scale(1.08); }
  /* One clean row on phones: reviews + Superhost. The Guest Favorite item
     would wrap to a second row, so it is desktop/tablet-only. */
  .hero__badge-item--fav, .hero__badge-sep--fav { display: none; }
  .hero__badge-item { padding: 2px 14px; }
  .hero__badge-text strong { font-size: .9rem; }
  .contact__row { grid-template-columns: 1fr; }
  .contact__success { grid-column: auto; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__bg img { animation: none; transform: none; }
  .neon { animation: none; }
  .hero__scroll span { animation: none; }
  .map-pin::after { animation: none; }
  /* Glows stay, but they stop moving. */
  .hero__title em, .hero__ctas .btn--primary { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal.in { transition: none; }
  .reveal-bars .rbar__track i { animation: none; }
  * { transition-duration: .01ms !important; }
}