/* ═══════════════════════════════════════════════════════════
   ONR Resort — Mobile-First Single Page
   
   Structure:
   1. Base (reset, fonts, grain, shared keyframes)
   2. Section common (color vars, bleed gradient)
   3. #hero
   4. #weddings    (Round 2)
   5. #events      (Round 3)
   6. #stays       (Round 4)
   7. #reviews     (Round 5)
   8. #cta         (Round 6)
   ═══════════════════════════════════════════════════════════ */


/* ═══ 1. BASE ═══ */

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

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Newsreader', Georgia, serif;
  color: #191613;
  background: #FAF6F0;
}

/* Grain — single fixed overlay */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}

/* Shared keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes imgFade { to { opacity: 1; } }


/* ═══ 2. SECTION COMMON ═══ */

/* Color worlds — each section sets its palette */
#hero     { --bg: #FAF6F0; --bg-next: #F0E8DC; --text: #191613; --accent: #C84B31; --sand: #8A7E70; --marigold: #D4930D; }
#weddings { --bg: #F0E8DC; --bg-next: #D5D4C5; --text: #191613; --accent: #C84B31; --sand: #9A8E7E; --sindoor: #6B1D2A; }
#events   { --bg: #D5D4C5; --bg-next: #C8BCAC; --text: #191613; --accent: #6B7A4A; --sand: #9A8E7E; }
#stays    { --bg: #C8BCAC; --bg-next: #E8E0D0; --text: #1F1810; --accent: #8A6E4E; --sand: #7A6E5E; }
#reviews  { --bg: #E8E0D0; --bg-next: #5A6348; --text: #2A261E; --accent: #A08050; --sand: #8A7E68; }
#cta      { --bg: #5A6348; --text: #FAF6F0; --accent: #D4A030; --sand: #B8B0A0; }

section {
  min-height: 100svh;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--bg) 70%, var(--bg-next, var(--bg)) 100%);
  color: var(--text);
}

/* Show/hide toggle for mobile ↔ desktop layouts */
/* !important is correct here — utility toggles must win over component CSS */
.w-desktop { display: none !important; }
.w-mobile  { display: block; }

@media (min-width: 1024px) {
  .w-desktop { display: block !important; }
  .w-mobile  { display: none !important; }
  #weddings .w-desktop { display: grid !important; }
  #events .w-desktop   { display: flex !important; }
  #stays .w-desktop    { display: grid !important; }
}

/* Breathing space — sections after hero are taller, content starts lower */
section + section {
  --gap: 7svh;
  min-height: calc(100svh + var(--gap));
}

@media (min-width: 1024px) {
  section + section { --gap: 18svh; }
}


/* ═══ 3. HERO ═══ */

#hero {
  height: 100svh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Marquee strips */
.hero-marquee {
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.hero-marquee--top  { height: 28%; min-height: 140px; }
.hero-marquee--bot  { height: 28%; min-height: 140px; }

.hero-marquee__track {
  display: flex;
  gap: 12px;
  width: max-content;
  height: 100%;
  padding: 8px 0;
}

.hero-marquee--top .hero-marquee__track { animation: marqueeLeft 50s linear infinite; }
.hero-marquee--bot .hero-marquee__track { animation: marqueeRight 42s linear infinite; }

.hero-marquee__img {
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(25,22,19,0.07);
  opacity: 0;
  animation: imgFade 0.8s var(--ease) 0.4s forwards;
}

.hero-marquee__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.hero-marquee__img:hover img { transform: scale(1.06); }

/* Fade edges — use var(--bg) */
.hero-marquee::before,
.hero-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
.hero-marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.hero-marquee::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }


/* Center text ribbon */
.hero-ribbon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 2rem;
  position: relative;
  z-index: 10;
  min-height: 0;
}

/* Subtle top/bottom borders */
.hero-ribbon::before,
.hero-ribbon::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25,22,19,0.08) 30%, rgba(25,22,19,0.08) 70%, transparent);
}
.hero-ribbon::before { top: 0; }
.hero-ribbon::after  { bottom: 0; }

.hero-ribbon__badge {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.8rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.6s forwards;
}

.hero-ribbon__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--text);
  opacity: 0;
  animation: scaleIn 0.9s var(--ease) 0.1s forwards;
}

.hero-ribbon__sub {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 4.5vw, 3.5rem);
  color: var(--accent);
  margin-bottom: 0.8rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.35s forwards;
}

.hero-ribbon__tagline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.8s forwards;
}

.hero-ribbon__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 1s forwards;
}

.hero-meta__loc {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 0.6rem;
  letter-spacing: 0.05em; color: var(--sand);
}
.hero-meta__loc svg { color: var(--accent); }

.hero-meta__rating {
  display: flex; align-items: center; gap: 0.3rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 0.55rem;
  letter-spacing: 0.1em; color: var(--marigold);
  padding: 0.28rem 0.65rem;
  border: 1.5px solid rgba(212,147,13,0.25);
  border-radius: 100px;
}


/* Hero responsive */
@media (max-width: 768px) {
  .hero-marquee--top, .hero-marquee--bot { height: 24%; min-height: 110px; }
  .hero-marquee__img { border-radius: 8px; }
  .hero-ribbon { padding: 1rem 1.5rem; }
  .hero-ribbon__meta { flex-direction: column; gap: 0.6rem; }
}

@media (max-width: 400px) {
  .hero-marquee--top, .hero-marquee--bot { height: 22%; min-height: 95px; }
  .hero-ribbon__title { font-size: 3.5rem; }
}

@media (min-width: 1200px) {
  .hero-marquee--top, .hero-marquee--bot { height: 30%; }
  .hero-ribbon__title { font-size: 9rem; }
}


/* ═══ 4. WEDDINGS ═══ */

@keyframes imgIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

#weddings {
  height: calc(100svh + var(--gap, 0px));
  min-height: 0;
}

/* Rangoli — champagne tinted */
#weddings .rangoli { position: absolute; pointer-events: none; z-index: 1; }
#weddings .rangoli--tr {
  top: -10px; right: -10px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(200,75,49,0.06) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  border-radius: 50%;
}
#weddings .rangoli--bl {
  bottom: 3rem; left: 1rem;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(212,147,13,0.06) 1.5px, transparent 1.5px) 0 0 / 14px 14px;
  border-radius: 50%;
}

/* Text — upper left */
#weddings .text-upper {
  position: absolute;
  top: 0; left: 0;
  z-index: 30;
  padding: 2.5rem 2rem;
}

#weddings .title {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.35s forwards;
}

#weddings .title__hero {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
  margin-bottom: 0.15em;
}

#weddings .title__sub {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 3.2vw, 1.7rem);
  line-height: 1.35;
  color: var(--sand);
  margin-bottom: 0.4em;
}

#weddings .title__closing {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  white-space: nowrap;
  gap: 0.25em;
}

#weddings .title__bridge {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 3.2vw, 1.7rem);
  color: var(--sand);
}

#weddings .title__hero--accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(3rem, 11vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Bottom text — right side */
#weddings .text-bottom {
  position: absolute;
  bottom: 0; right: 0;
  z-index: 30;
  padding: 1.2rem 2rem;
  text-align: right;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.9s forwards;
  margin-bottom: 0;
}

#weddings .facts {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Diagonal strip */
#weddings .strip-anchor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  padding-top: 18vh;
}

#weddings .strip-rotator {
  transform: rotate(-5deg);
  width: 200%;
  margin-left: -50%;
  position: relative;
}

/* Fade edges into bg */
#weddings .strip-rotator::before,
#weddings .strip-rotator::after {
  content: '';
  position: absolute;
  top: -20px; bottom: -20px;
  width: 100px;
  z-index: 5;
  pointer-events: none;
}
#weddings .strip-rotator::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
#weddings .strip-rotator::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

#weddings .strip {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marqueeLeft 55s linear infinite;
  will-change: transform;
}

#weddings .strip:hover { animation-play-state: paused; }

#weddings .strip__img {
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(25,22,19,0.12), 0 2px 6px rgba(25,22,19,0.06);
  opacity: 0;
}

#weddings .strip__img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}

#weddings .strip__img:hover img { transform: scale(1.05); }

/* Image sizing — mixed aspects */
#weddings .strip__img--wide     { height: clamp(180px, 36vh, 340px); aspect-ratio: 16/9; }
#weddings .strip__img--portrait { height: clamp(180px, 36vh, 340px); aspect-ratio: 3/4; }
#weddings .strip__img--land     { height: clamp(180px, 36vh, 340px); aspect-ratio: 4/3; }
#weddings .strip__img--sq       { height: clamp(180px, 36vh, 340px); aspect-ratio: 1/1; }

/* Staggered entrance */
#weddings .strip__img:nth-child(1)  { animation: imgIn 0.8s var(--ease) 0.1s forwards; }
#weddings .strip__img:nth-child(2)  { animation: imgIn 0.8s var(--ease) 0.2s forwards; }
#weddings .strip__img:nth-child(3)  { animation: imgIn 0.8s var(--ease) 0.3s forwards; }
#weddings .strip__img:nth-child(4)  { animation: imgIn 0.8s var(--ease) 0.4s forwards; }
#weddings .strip__img:nth-child(5)  { animation: imgIn 0.8s var(--ease) 0.5s forwards; }
#weddings .strip__img:nth-child(n+6){ animation: imgIn 0.8s var(--ease) 0.5s forwards; }

/* Responsive */
@media (max-width: 768px) {
  #weddings .text-upper { padding: 2rem 1.5rem; }
  #weddings .text-bottom { padding: 1.5rem 1.5rem; }
  #weddings .strip-anchor { padding-bottom: 10vh; }
  #weddings .strip { gap: 10px; }
  #weddings .strip__img { border-radius: 8px; }
  #weddings .strip-rotator::before,
  #weddings .strip-rotator::after { width: 50px; }
}

@media (max-width: 420px) {
  #weddings .title__hero { font-size: 2.8rem; }
  #weddings .title__sub { font-size: 1rem; }
  #weddings .strip-anchor { padding-bottom: 8vh; }
}

@media (min-width: 1200px) {
  #weddings .text-upper { padding: 3.5rem 3rem; }
  #weddings .text-bottom { padding: 2.5rem 3rem; }
  #weddings .strip { gap: 18px; }
  #weddings .strip-rotator::before,
  #weddings .strip-rotator::after { width: 160px; }
}

/* Weddings mobile wrapper — fill section */
#weddings .w-mobile {
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
}

/* ── WEDDINGS DESKTOP — "The Split" ── */
#weddings .w-desktop {
  grid-template-columns: 34% 1fr;
  height: auto;
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
}

#weddings .wd-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.5rem;
  z-index: 30;
  position: relative;
}

#weddings .wd-title-block {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}

/* Reuse scoped title styles on desktop too */
#weddings .w-desktop .title__hero {
  font-size: clamp(3.8rem, 5.5vw, 6rem);
  line-height: 0.92;
  margin-bottom: 0.15em;
}

#weddings .w-desktop .title__sub {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.4;
  margin-bottom: 0.2em;
}

#weddings .w-desktop .title__closing {
  margin-bottom: 1.8rem;
}

#weddings .w-desktop .title__bridge {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
}

#weddings .w-desktop .title__hero--accent {
  font-size: clamp(3.8rem, 5.5vw, 6rem);
}

/* Editorial stat */
#weddings .wd-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.55s forwards;
}

#weddings .wd-stat__num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 4.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}

#weddings .wd-stat__label {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--sand);
}

/* Desktop strip column */
#weddings .wd-strip-col {
  position: relative;
  overflow: hidden;
}

#weddings .wd-strip-rotator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 250%;
}

#weddings .wd-strip-rotator::before,
#weddings .wd-strip-rotator::after {
  content: '';
  position: absolute;
  top: -40px; bottom: -40px;
  width: 180px;
  z-index: 5;
  pointer-events: none;
}
#weddings .wd-strip-rotator::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
#weddings .wd-strip-rotator::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

#weddings .wd-strip {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marqueeLeft 65s linear infinite;
  will-change: transform;
}

#weddings .wd-strip__img {
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(25,22,19,0.15), 0 4px 12px rgba(25,22,19,0.06);
  opacity: 0;
}

#weddings .wd-strip__img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  pointer-events: none;
}

/* Massive 80vh images */
#weddings .wd-strip__img--a { height: 80vh; aspect-ratio: 16/10; }
#weddings .wd-strip__img--b { height: 80vh; aspect-ratio: 3/4; }
#weddings .wd-strip__img--c { height: 80vh; aspect-ratio: 4/3; }
#weddings .wd-strip__img--d { height: 80vh; aspect-ratio: 1/1; }

#weddings .wd-strip__img:nth-child(1)  { animation: imgIn 0.9s var(--ease) 0.1s forwards; }
#weddings .wd-strip__img:nth-child(2)  { animation: imgIn 0.9s var(--ease) 0.2s forwards; }
#weddings .wd-strip__img:nth-child(3)  { animation: imgIn 0.9s var(--ease) 0.3s forwards; }
#weddings .wd-strip__img:nth-child(4)  { animation: imgIn 0.9s var(--ease) 0.4s forwards; }
#weddings .wd-strip__img:nth-child(5)  { animation: imgIn 0.9s var(--ease) 0.5s forwards; }
#weddings .wd-strip__img:nth-child(n+6){ animation: imgIn 0.9s var(--ease) 0.5s forwards; }


/* ═══ 5. EVENTS ═══ */

@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

#events {
  height: calc(100svh + var(--gap, 0px));
  min-height: 0;
}

/* Rangoli — sage-tinted */
#events .rangoli { position: absolute; pointer-events: none; z-index: 1; }
#events .rangoli--tr {
  top: -10px; right: -10px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(154,107,42,0.06) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  border-radius: 50%;
}
#events .rangoli--bl {
  bottom: 3rem; left: 1rem;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(154,107,42,0.05) 1.5px, transparent 1.5px) 0 0 / 14px 14px;
  border-radius: 50%;
}

/* Shared title styles */
.e-title__hero {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--text);
}

.e-title__accent {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(3.2rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
}


/* ── EVENTS MOBILE ── */

#events .e-mobile {
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}

#events .e-text-top {
  flex: 0 0 auto;
  padding: 2.5rem 2rem 1.5rem;
  z-index: 30;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}

#events .e-gallery-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  min-height: 0;
  overflow: hidden;
}

/* Gallery fade edges */
#events .e-gallery-wrap::before,
#events .e-gallery-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 5;
  pointer-events: none;
}
#events .e-gallery-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
#events .e-gallery-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

#events .e-gallery {
  display: flex;
  gap: 16px;
  padding: 1rem 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
#events .e-gallery::-webkit-scrollbar { display: none; }
#events .e-gallery:active { cursor: grabbing; }

#events .e-gallery__item {
  flex-shrink: 0;
  scroll-snap-align: center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(25,22,19,0.10), 0 2px 8px rgba(25,22,19,0.05);
  opacity: 0;
  transform: translateY(20px);
}

#events .e-gallery__item:nth-child(1) { animation: cardIn 0.7s var(--ease) 0.3s forwards; }
#events .e-gallery__item:nth-child(2) { animation: cardIn 0.7s var(--ease) 0.45s forwards; }
#events .e-gallery__item:nth-child(3) { animation: cardIn 0.7s var(--ease) 0.6s forwards; }
#events .e-gallery__item:nth-child(4) { animation: cardIn 0.7s var(--ease) 0.75s forwards; }
#events .e-gallery__item:nth-child(5) { animation: cardIn 0.7s var(--ease) 0.9s forwards; }

#events .e-gallery__item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
#events .e-gallery__item:hover img { transform: scale(1.04); }

#events .e-gallery__item--hero { width: clamp(260px, 55vw, 420px); height: clamp(200px, 38vh, 350px); }
#events .e-gallery__item--tall { width: clamp(190px, 36vw, 310px); height: clamp(220px, 42vh, 380px); }
#events .e-gallery__item--wide { width: clamp(280px, 55vw, 460px); height: clamp(180px, 34vh, 320px); }
#events .e-gallery__item--sq   { width: clamp(200px, 40vw, 340px); height: clamp(200px, 40vw, 340px); }

#events .e-text-bottom {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.5rem 2rem 2.5rem;
  z-index: 30;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.9s forwards;
}

#events .e-text-bottom__desc {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  line-height: 1.4;
  color: var(--sand);
  max-width: 26ch;
}

#events .e-text-bottom__fact {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #events .e-text-top { padding: 2rem 1.5rem 1rem; }
  #events .e-text-bottom { padding: 1rem 1.5rem 2rem; }
  #events .e-gallery { gap: 12px; padding: 0.8rem 1.5rem; }
  #events .e-gallery__item { border-radius: 10px; }
  #events .e-gallery-wrap::before,
  #events .e-gallery-wrap::after { width: 30px; }
}

@media (max-width: 420px) {
  .e-title__hero,
  .e-title__accent { font-size: 2.8rem; }
  #events .e-text-bottom { flex-direction: column; gap: 0.8rem; align-items: flex-start; }
}


/* ── EVENTS DESKTOP — Sage Diptych ── */

#events .e-desktop {
  flex-direction: column;
  padding: 2.5rem 3rem;
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
}

#events .e-top-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  z-index: 30;
}

#events .e-title-block {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}

@media (min-width: 1024px) {
  .e-title__hero,
  .e-title__accent { font-size: clamp(3.5rem, 5.5vw, 6rem); }
}

#events .e-top-right {
  text-align: right;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.4s forwards;
}

#events .e-top-right__desc {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: 1.1rem;
  color: var(--sand);
  line-height: 1.4;
}

#events .e-diptych {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  z-index: 10;
}

#events .e-diptych__panel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 52px rgba(26,22,18,0.14), 0 4px 14px rgba(26,22,18,0.06);
}

#events .e-diptych__panel--left {
  opacity: 0;
  animation: slideInLeft 0.9s var(--ease) 0.25s forwards;
}

#events .e-diptych__panel--right {
  margin-top: 4vh;
  margin-bottom: -1vh;
  opacity: 0;
  animation: slideInRight 0.9s var(--ease) 0.4s forwards;
}

#events .e-diptych__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

#events .e-diptych__frame.active { opacity: 1; }

#events .e-diptych__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

#events .e-diptych__frame.active img {
  animation: slowZoom 4s ease-in-out forwards;
}

/* Dots */
#events .e-bottom-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 1.2rem;
  z-index: 20;
  opacity: 0;
  animation: fadeUp 0.6s var(--ease) 0.9s forwards;
}

#events .e-dots { display: flex; gap: 8px; }

#events .e-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  opacity: 0.4;
  transition: all 0.5s var(--ease);
}

#events .e-dot.active {
  opacity: 1;
  width: 24px;
  border-radius: 3px;
  background: var(--accent);
}


/* ═══ 6. STAYS ═══ */

#stays {
  height: calc(100svh + var(--gap, 0px));
  min-height: 0;
}

/* Rangoli — taupe-tinted */
#stays .rangoli { position: absolute; pointer-events: none; z-index: 1; }
#stays .rangoli--tr {
  top: -10px; right: -10px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(138,110,78,0.06) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  border-radius: 50%;
}
#stays .rangoli--bl {
  bottom: 3rem; left: 1rem;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(180,160,48,0.06) 1.5px, transparent 1.5px) 0 0 / 14px 14px;
  border-radius: 50%;
}


/* ── STAYS MOBILE ── */

#stays .s-mobile {
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}

#stays .s-text-top {
  flex: 0 0 auto;
  padding-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
  z-index: 30;
}

#stays .s-title__hero {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}

#stays .s-title__accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Overlap container */
#stays .s-overlap {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 10;
}

/* Back image — top-left, bigger */
#stays .s-overlap__back {
  position: absolute;
  top: 0; left: 0;
  width: 68%; height: 75%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31,24,16,0.12), 0 2px 8px rgba(31,24,16,0.05);
  z-index: 2;
  opacity: 0;
  animation: slideInLeft 0.9s var(--ease) 0.3s forwards;
}

/* Front image — bottom-right, smaller, overlapping */
#stays .s-overlap__front {
  position: absolute;
  bottom: 0; right: 0;
  width: 55%; height: 60%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(31,24,16,0.15), 0 3px 10px rgba(31,24,16,0.06);
  z-index: 3;
  opacity: 0;
  animation: slideInRight 0.9s var(--ease) 0.45s forwards;
}

/* Border around front — var(--bg), NOT hardcoded hex */
#stays .s-overlap__front::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: var(--bg);
  z-index: -1;
}

#stays .s-overlap__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#stays .s-overlap__frame.active { opacity: 1; }

#stays .s-overlap__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

#stays .s-overlap__frame.active img {
  animation: slowZoom 3.5s ease-in-out forwards;
}

/* Phase dots */
#stays .s-phase-dots {
  position: absolute;
  bottom: 10px; left: 20px;
  display: flex; gap: 8px;
  z-index: 20;
}

#stays .s-phase-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  opacity: 0.4;
  transition: all 0.5s var(--ease);
}

#stays .s-phase-dot.active {
  opacity: 1;
  width: 22px;
  border-radius: 3px;
  background: var(--accent);
}

/* Text bottom */
#stays .s-text-bottom {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.9s forwards;
  z-index: 30;
}

#stays .s-text-bottom__desc {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  color: var(--sand);
  max-width: 22ch; line-height: 1.4;
}

#stays .s-text-bottom__fact {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand);
}

/* Mobile responsive */
@media (max-width: 768px) {
  #stays .s-mobile { padding: 1.5rem; }
  #stays .s-text-top { padding-bottom: 0.8rem; }
  #stays .s-overlap__back { width: 75%; height: 68%; }
  #stays .s-overlap__front { width: 58%; height: 50%; }
}

@media (max-width: 420px) {
  #stays .s-mobile { padding: 1.2rem; }
  #stays .s-title__hero,
  #stays .s-title__accent { font-size: 2.6rem; }
  #stays .s-overlap__back { width: 80%; height: 65%; }
  #stays .s-overlap__front { width: 60%; height: 48%; }
  #stays .s-text-bottom { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}


/* ── STAYS DESKTOP — "The Divide" ── */

#stays .s-desktop {
  grid-template-columns: 55% 1fr;
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
}

/* Left: Image column */
#stays .sd-img-col {
  position: relative;
  padding: 2.5rem;
  min-height: 0;
  z-index: 10;
}

#stays .s-desktop .s-overlap__back {
  top: 2.5rem; left: 2.5rem;
  width: 72%; height: 78%;
  border-radius: 16px;
}

#stays .s-desktop .s-overlap__front {
  bottom: 2.5rem; right: 2.5rem;
  width: 52%; height: 58%;
  border-radius: 16px;
}

#stays .s-desktop .s-overlap__front::before {
  inset: -5px;
  border-radius: 20px;
}

/* Right: Text column */
#stays .sd-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3rem 3rem 2.5rem;
  z-index: 30;
  position: relative;
}

/* Vertical divider */
#stays .sd-text-col::before {
  content: '';
  position: absolute;
  top: 12%; bottom: 12%; left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.06) 75%, transparent);
}

#stays .sd-text-top {
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}

#stays .s-desktop .s-title__hero {
  font-size: clamp(3.5rem, 5.5vw, 6rem);
}

#stays .s-desktop .s-title__accent {
  font-size: clamp(3.5rem, 5.5vw, 6rem);
}

#stays .sd-text-desc {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: 1.15rem;
  color: var(--sand);
  max-width: 22ch;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.6s forwards;
}

#stays .sd-text-fact {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.75s forwards;
}

#stays .s-desktop .s-phase-dots {
  position: static;
  opacity: 0;
  animation: fadeUp 0.6s var(--ease) 0.9s forwards;
}


/* ═══ 7. REVIEWS ═══ */

@keyframes starPop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

#reviews {
  height: calc(100svh + var(--gap, 0px));
  min-height: 0;
  /* No bleed — parchment→green is too dramatic for any gradient */
  background: var(--bg);
}

/* Content wrapper — absolute fill below gap */
#reviews .r-content {
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Rangoli — gold-tinted */
#reviews .rangoli { position: absolute; pointer-events: none; z-index: 1; }
#reviews .rangoli--tr {
  top: -10px; right: -10px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(160,128,80,0.06) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  border-radius: 50%;
}

/* Header */
#reviews .r-header {
  flex: 0 0 auto;
  padding: 2.5rem 2rem 1.5rem;
  z-index: 20;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
}

#reviews .r-stars {
  display: flex; gap: 4px;
  margin-bottom: 0.6rem;
}

#reviews .r-stars svg {
  width: 18px; height: 18px;
  fill: #B89840;
  opacity: 0;
  animation: starPop 0.4s var(--ease) forwards;
}
#reviews .r-stars svg:nth-child(1) { animation-delay: 0.3s; }
#reviews .r-stars svg:nth-child(2) { animation-delay: 0.4s; }
#reviews .r-stars svg:nth-child(3) { animation-delay: 0.5s; }
#reviews .r-stars svg:nth-child(4) { animation-delay: 0.6s; }
#reviews .r-stars svg:nth-child(5) { animation-delay: 0.7s; }

#reviews .r-header__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}

#reviews .r-header__accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; font-style: italic;
  color: var(--accent);
}

#reviews .r-header__sub {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 0.6rem;
}

/* Marquee zone */
#reviews .r-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  min-height: 0;
}

/* Fade edges — var(--bg) */
#reviews .r-zone::before,
#reviews .r-zone::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
#reviews .r-zone::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
#reviews .r-zone::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

/* Marquee tracks — reuse existing marqueeLeft / marqueeRight keyframes */
#reviews .r-marquee {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

#reviews .r-marquee--right { animation: marqueeLeft 60s linear infinite; }
#reviews .r-marquee--left  { animation: marqueeRight 55s linear infinite; }

/* Review cards */
#reviews .r-card {
  flex-shrink: 0;
  width: 280px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 2px 12px rgba(42,38,30,0.04);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

#reviews .r-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(42,38,30,0.08);
}

#reviews .r-card__text {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 0.7rem;
  font-style: italic;
}

#reviews .r-card__name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Footer */
#reviews .r-footer {
  flex: 0 0 auto;
  padding: 1rem 2rem 2rem;
  text-align: right;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 1s forwards;
  z-index: 20;
}

#reviews .r-footer__count {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Responsive */
@media (max-width: 768px) {
  #reviews .r-header { padding: 2rem 1.5rem 1rem; }
  #reviews .r-card { width: 240px; padding: 1rem 1.1rem; }
  #reviews .r-card__text { font-size: 0.82rem; }
  #reviews .r-zone { gap: 10px; }
  #reviews .r-zone::before, #reviews .r-zone::after { width: 40px; }
  #reviews .r-footer { padding: 0.8rem 1.5rem 1.5rem; }
}

@media (max-width: 420px) {
  #reviews .r-header__title { font-size: 2.5rem; }
  #reviews .r-card { width: 220px; }
}

@media (min-width: 1200px) {
  #reviews .r-header { padding: 3rem 3rem 2rem; }
  #reviews .r-card { width: 320px; }
  #reviews .r-zone::before, #reviews .r-zone::after { width: 120px; }
  #reviews .r-footer { padding: 1.5rem 3rem 2.5rem; }
}


/* ═══ 8. CTA ═══ */

@keyframes ctaStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

#cta {
  height: calc(100svh + var(--gap, 0px));
  min-height: 0;
  /* No --bg-next, this is the last section */
  background: var(--bg);
}

/* Content wrapper */
#cta .c-content {
  position: absolute;
  top: var(--gap, 0px); left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Rangoli — gold-tinted on dark */
#cta .rangoli { position: absolute; pointer-events: none; z-index: 1; }
#cta .rangoli--tr {
  top: -10px; right: -10px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(212,160,48,0.06) 1.5px, transparent 1.5px) 0 0 / 16px 16px;
  border-radius: 50%;
}

/* ── PROMISE PANEL ── */
#cta .c-promise {
  padding: 3rem 2rem 2.2rem;
  position: relative; z-index: 10;
  transition: padding 0.5s var(--ease);
  flex-shrink: 0;
}

#cta .c-promise::after {
  content: '';
  position: absolute; bottom: 0; left: 2rem; right: 2rem; height: 1px;
  background: rgba(250,246,240,0.08);
  transition: opacity 0.4s var(--ease);
}

/* Compressed state */
#cta .c-promise--compressed {
  padding: 1.4rem 2rem 1.2rem;
}
#cta .c-promise--compressed::after { opacity: 0; }
#cta .c-promise--compressed .c-promise__title {
  font-size: 1.6rem;
  margin-bottom: 0;
}
#cta .c-promise--compressed .c-promise__title em {
  font-size: 1.6rem;
}
#cta .c-promise--compressed .c-promise__break { display: none; }
#cta .c-promise--compressed .c-promise__rule,
#cta .c-promise--compressed .c-promise__sub { display: none; }
#cta .c-promise--compressed .c-promise__trust { margin-top: 0.3rem; }

#cta .c-promise__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 10vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 0.35em;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.15s forwards;
  transition: font-size 0.5s var(--ease), margin 0.5s var(--ease);
}

#cta .c-promise__title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  transition: font-size 0.5s var(--ease);
}

#cta .c-promise__rule {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1.6rem 0;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.35s forwards;
  transition: opacity 0.4s var(--ease), margin 0.4s var(--ease);
}

#cta .c-promise__rule::before,
#cta .c-promise__rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(250,246,240,0.08);
}

#cta .c-promise__rule svg {
  width: 8px; height: 8px;
  color: var(--sand);
  flex-shrink: 0;
}

#cta .c-promise__sub {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(1.15rem, 3.8vw, 1.5rem);
  color: var(--sand);
  line-height: 1.4;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.5s forwards;
  transition: opacity 0.4s var(--ease);
}

#cta .c-promise__trust {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.8rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease) 0.65s forwards;
  transition: margin-top 0.4s var(--ease);
}

#cta .c-trust__stars { display: flex; gap: 4px; }
#cta .c-trust__stars svg {
  width: 14px; height: 14px;
  fill: #E8C858;
}

#cta .c-trust__label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--sand);
}

/* ── INTERACTIVE PANEL ── */
#cta .c-interactive {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

#cta .c-step {
  display: none;
  flex-direction: column;
  width: 100%; height: 100%;
  padding: 2rem 2rem 2.4rem;
  position: relative;
  flex: 1;
  min-height: 0;
}

#cta .c-step.active {
  display: flex;
  animation: ctaStepIn 0.5s var(--ease) forwards;
}

#cta .c-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding-bottom: 0.4rem;
  gap: 2rem;
}

/* Back button */
#cta .c-back-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand); background: rgba(250,246,240,0.05);
  padding: 0.5rem 1rem; border-radius: 100px; border: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
  transition: all 0.3s var(--ease);
  align-self: flex-end;
  margin-bottom: -0.8rem;
}
#cta .c-back-btn:hover { color: #2A2520; background: rgba(250,246,240,0.15); }
#cta .c-back-btn svg { width: 14px; height: 14px; }

/* ── STATE 1: Landing ── */
#cta .c-step-1 {
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 3rem;
}

#cta .c-cta-main {
  width: 100%; max-width: 400px;
  background: #3A3528; color: #FAF6F0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1.6rem 2.2rem;
  border: none; border-radius: 18px;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: all 0.5s var(--ease);
  position: relative; overflow: hidden;
}

#cta .c-cta-main::before {
  content: '';
  position: absolute; inset: 0;
  background: #2A2520;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
  z-index: 1;
}

#cta .c-cta-main:hover::before { transform: scaleY(1); }
#cta .c-cta-main span, #cta .c-cta-main svg { position: relative; z-index: 2; }
#cta .c-cta-main svg { transition: transform 0.4s var(--ease); }
#cta .c-cta-main:hover svg { transform: translateX(6px); }

#cta .c-contact-row {
  display: flex; gap: 1rem;
  width: 100%; max-width: 400px;
  margin-top: 1rem;
}

#cta .c-contact-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1rem;
  border-radius: 100px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: none; cursor: pointer;
  background: #6A6A50; color: var(--text);
  transition: all 0.3s var(--ease);
  text-decoration: none;
}
#cta .c-contact-btn:hover { filter: brightness(0.95); transform: translateY(-1px); }
#cta .c-contact-btn svg { width: 14px; height: 14px; }

/* ── STATE 2: Date Picker ── */
#cta .c-step-2 { padding-top: 1.2rem; }

#cta .c-picker__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 0.2rem;
  padding-right: 5rem;
  align-self: flex-start;
}

#cta .c-year-toggle {
  display: flex;
  border: 1px solid rgba(250,246,240,0.08); border-radius: 100px;
  padding: 0.25rem;
  width: fit-content;
  align-self: flex-start;
}

#cta .c-year-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 0.55rem 1.4rem; border-radius: 100px; border: none;
  background: transparent; color: var(--sand); cursor: pointer;
  transition: all 0.3s var(--ease);
}
#cta .c-year-btn.active { background: #2A2520; color: #FAF6F0; }

#cta .c-track-wrapper {
  position: relative; width: 100%;
}

#cta .c-track-wrapper::before, #cta .c-track-wrapper::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 22%; z-index: 10;
  pointer-events: none;
}
#cta .c-track-wrapper::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
#cta .c-track-wrapper::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

#cta .c-scroll-target {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100px; height: 100%;
  border-left: 2px solid rgba(250,246,240,0.08); border-right: 2px solid rgba(250,246,240,0.08);
  pointer-events: none; z-index: 5;
}

#cta .c-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  align-items: center;
}
#cta .c-track::-webkit-scrollbar { display: none; }

#cta .c-track--months {
  height: 56px; min-height: 56px;
  border-bottom: 1px solid rgba(250,246,240,0.08);
  padding: 0 calc(50% - 50px);
  margin-bottom: 0.6rem;
}

#cta .c-track--dates {
  height: 64px; min-height: 64px;
  padding: 0 calc(50% - 50px);
  margin-bottom: 0.4rem;
}

#cta .c-dial-item {
  scroll-snap-align: center; flex: 0 0 100px;
  display: flex; justify-content: center; align-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; color: var(--sand);
  opacity: 0.3;
  transition: all 0.35s var(--ease);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#cta .c-track--months .c-dial-item {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03em;
}
#cta .c-track--dates .c-dial-item {
  font-size: 2.1rem; font-weight: 400; letter-spacing: -0.04em;
}

#cta .c-dial-item.is-active {
  opacity: 1;
  color: var(--text);
  transform: scale(1.12);
}
#cta .c-track--dates .c-dial-item.is-active {
  font-weight: 800;
  color: var(--accent);
}
#cta .c-dial-item.is-booked-hint {
  text-decoration: line-through;
  opacity: 0.12;
}

#cta .c-picker-actions {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column;
  gap: 1.6rem; align-items: center;
}

#cta .c-status-box {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1rem; border-radius: 10px;
  width: fit-content;
  transition: all 0.4s var(--ease);
}

#cta .c-status-box.available {
  color: var(--accent);
  background: rgba(212,160,48,0.08);
}
#cta .c-status-box.booked {
  color: var(--sand);
  background: rgba(184,176,160,0.10);
}
#cta .c-status-box svg { width: 14px; height: 14px; }

#cta .c-secure-btn {
  width: 100%; max-width: 400px;
  background: #2A2520; color: #FAF6F0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1.5rem 2.2rem; border: none; border-radius: 18px;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: all 0.5s var(--ease);
  position: relative; overflow: hidden;
  align-self: center;
}
#cta .c-secure-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: #D4A030;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
  z-index: 1;
}
#cta .c-secure-btn:hover::before { transform: scaleY(1); }
#cta .c-secure-btn span, #cta .c-secure-btn svg { position: relative; z-index: 2; }
#cta .c-secure-btn svg { transition: transform 0.4s var(--ease); }
#cta .c-secure-btn:hover svg { transform: translateX(6px); }
#cta .c-secure-btn:disabled { background: #4A4A38; color: var(--sand); cursor: not-allowed; }
#cta .c-secure-btn:disabled::before { display: none; }
#cta .c-secure-btn:disabled svg { transform: none; }

/* ── STATE 3: Form ── */
#cta .c-step-3 { padding-top: 1.2rem; }

#cta .c-form__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 5.5vw, 2.2rem);
  color: var(--text);
  margin-bottom: 0.3rem;
  padding-right: 5rem;
  align-self: flex-start;
}

#cta .c-form__date {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: 1rem; color: var(--accent);
  align-self: flex-start;
}

#cta .c-input-group {
  width: 100%; max-width: 400px;
  align-self: center;
}

#cta .c-input-group label {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sand); margin-bottom: 0.5rem;
}

#cta .c-input-group input {
  width: 100%; padding: 1.15rem;
  background: transparent;
  border: 1px solid rgba(250,246,240,0.08); border-radius: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem; color: var(--text);
  transition: border-color 0.3s var(--ease);
}
#cta .c-input-group input:focus { outline: none; border-color: #3A3528; }
#cta .c-input-group input::placeholder { color: rgba(184,176,160,0.45); }

#cta .c-form-actions {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column;
  gap: 1.2rem; align-items: center;
}

#cta .c-confirm-btn {
  width: 100%; max-width: 400px;
  background: #2A2520; color: #FAF6F0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1.5rem 2.2rem; border: none; border-radius: 18px;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: all 0.5s var(--ease);
  position: relative; overflow: hidden;
  align-self: center;
}
#cta .c-confirm-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: #D4A030;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
  z-index: 1;
}
#cta .c-confirm-btn:hover::before { transform: scaleY(1); }
#cta .c-confirm-btn span, #cta .c-confirm-btn svg { position: relative; z-index: 2; }
#cta .c-confirm-btn svg { transition: transform 0.4s var(--ease); }
#cta .c-confirm-btn:hover svg { transform: translateX(6px); }
#cta .c-confirm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#cta .c-confirm-btn:disabled::before { display: none; }

#cta .c-form__note {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.8rem; color: var(--sand);
  line-height: 1.5;
  align-self: center;
}

/* ── STATE 4: Booked ── */
#cta .c-step-4 {
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 3rem;
}

#cta .c-booked-banner {
  width: 100%; max-width: 400px;
  background: #6A6A50;
  border-radius: 18px;
  padding: 1.4rem 1.8rem;
  display: flex; flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

#cta .c-booked-banner__row {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
}

#cta .c-booked-banner__row svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

#cta .c-booked-banner__row--sub {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--sand);
  padding-left: 1.6rem;
}
#cta .c-booked-banner__row--sub svg {
  width: 14px; height: 14px;
  color: #3A3528;
}

#cta .c-action-row {
  display: flex; gap: 1rem;
  width: 100%; max-width: 400px;
}

#cta .c-action-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 1rem;
  border-radius: 100px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: none; cursor: pointer;
  background: #6A6A50; color: #FAF6F0;
  transition: all 0.3s var(--ease);
}
#cta .c-action-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
#cta .c-action-btn svg { width: 13px; height: 13px; }

/* Responsive */
@media (max-width: 768px) {
  #cta .c-promise { padding: 2.5rem 1.5rem 1.8rem; }
  #cta .c-step { padding: 1.5rem 1.5rem 2rem; }
}

@media (max-width: 420px) {
  #cta .c-promise__title { font-size: 2.4rem; }
}

/* Desktop: side-by-side layout */
@media (min-width: 1024px) {
  #cta .c-content {
    flex-direction: row;
  }

  #cta .c-promise {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    border-right: 1px solid rgba(250,246,240,0.08);
  }
  /* No compression on desktop */
  #cta .c-promise--compressed { padding: 4rem; }
  #cta .c-promise--compressed .c-promise__title { font-size: clamp(3.5rem, 5vw, 6rem); margin-bottom: 0.15em; }
  #cta .c-promise--compressed .c-promise__title em { font-size: clamp(3.5rem, 5vw, 6rem); }
  #cta .c-promise--compressed .c-promise__break { display: inline; }
  #cta .c-promise--compressed .c-promise__rule { display: flex; }
  #cta .c-promise--compressed .c-promise__sub { display: block; }
  #cta .c-promise--compressed .c-promise__trust { margin-top: 2.5rem; }
  #cta .c-promise::after { display: none; }

  #cta .c-promise__title { font-size: clamp(3.5rem, 5vw, 6rem); line-height: 0.92; margin-bottom: 0.15em; }
  #cta .c-promise__sub { font-size: 1.8rem; }
  #cta .c-promise__trust { margin-top: 2.5rem; }
  #cta .c-trust__stars svg { width: 16px; height: 16px; }
  #cta .c-trust__label { font-size: 0.72rem; }

  #cta .c-interactive { flex: 1 1 55%; overflow: hidden; min-width: 0; overscroll-behavior: contain; }
  #cta .c-step { padding: 3rem 3.5rem 3.5rem; }

  /* Step 1: center the CTA on desktop (not pushed to bottom) */
  #cta .c-step-1 {
    justify-content: center;
    align-items: center;
    padding-bottom: 3.5rem;
  }
  #cta .c-cta-main { max-width: 420px; border-radius: 100px; padding: 2rem 2.5rem; font-size: 1.15rem; }
  #cta .c-contact-row { max-width: 420px; }

  #cta .c-back-btn { position: absolute; top: 1rem; right: 1.5rem; align-self: auto; margin-bottom: 0; }

  #cta .c-track--months { height: 72px; min-height: 72px; padding: 0 calc(50% - 65px); }
  #cta .c-track--dates { height: 96px; min-height: 96px; padding: 0 calc(50% - 65px); }
  #cta .c-dial-item { flex: 0 0 130px; }
  #cta .c-track--months .c-dial-item { font-size: 1.4rem; }
  #cta .c-track--dates .c-dial-item { font-size: 3.2rem; }
  #cta .c-scroll-target { width: 130px; }
}