/* =================================================================
   THE GECKOS HOMESTAY – ONE-PAGE STYLESHEET
   Palette: lush jungle greens, warm earth tones, soft cream
   ================================================================= */

:root {
  --green-deep: #1f3a2c;
  --green-dark: #2d4a3a;
  --green-mid:  #4a6b52;
  --green-soft: #8aa896;
  --terracotta: #c97b4d;
  --terracotta-dark: #a8623a;
  --cream:     #faf6ee;
  --cream-warm:#f5efe3;
  --sand:      #e8dcc4;
  --tan:       #8a7654;
  --charcoal:  #2a2a2a;
  --gray:      #5a5a5a;
  --gray-light:#d6d2c8;
  --whatsapp:  #25d366;
  --whatsapp-dark: #128c7e;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --shadow-sm: 0 2px 8px rgba(31,58,44,0.08);
  --shadow-md: 0 8px 24px rgba(31,58,44,0.12);
  --shadow-lg: 0 16px 48px rgba(31,58,44,0.18);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--terracotta); }

h1,h2,h3,h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--green-deep);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; line-height: 1.15; }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1rem; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.center { text-align: center; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--terracotta-dark);
  margin-bottom: 0.8rem;
}
.eyebrow.center { display: block; }

.section-intro {
  max-width: 720px;
  margin: 0 auto 1.2rem;
  font-size: 1.08rem;
  color: var(--gray);
}
.section-intro:last-of-type {
  margin-bottom: 3rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green-deep);
  font-family: var(--font-serif);
}

.signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--terracotta-dark);
  margin-top: 1.5rem;
}

.pull-quote {
  margin: 2rem 0 0;
  padding: 18px 24px;
  border-left: 3px solid var(--terracotta);
  background: rgba(201,123,77,0.06);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--green-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* =================================================================
   BUTTONS
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--terracotta); color: white; }
.btn-primary:hover {
  background: var(--terracotta-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--green-deep);
  border-color: var(--green-deep);
}
.btn-outline:hover { background: var(--green-deep); color: white; }
.btn-whatsapp {
  background: var(--whatsapp);
  color: white;
  font-size: 1.05rem;
  padding: 18px 32px;
  border: none;
}
.btn-whatsapp:hover {
  background: var(--whatsapp-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-large { width: 100%; }

/* Booking-form submit button: on-brand terracotta with a small "via WhatsApp" tag */
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 32px;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(201,123,77,0.35);
}
.btn-send:hover { box-shadow: 0 12px 28px rgba(201,123,77,0.45); }
.btn-send .wa-mini {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.95;
}
.btn-send__small {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

/* =================================================================
   NAVIGATION
   ================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: all var(--transition);
}
.site-header.scrolled {
  background: rgba(250,246,238,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
}
.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo img {
  height: 56px;
  width: auto;
  transition: opacity var(--transition), filter var(--transition);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.nav-logo .logo-light { display: block; }
.nav-logo .logo-dark { display: none; }
.site-header.scrolled .logo-light { display: none; }
.site-header.scrolled .logo-dark { display: block; }
.site-header.scrolled .nav-logo img { filter: none; }

.nav-links { display: flex; gap: 32px; align-items: center; margin-left: auto; }

/* "Book now" CTA in nav */
.nav-cta {
  background: var(--terracotta);
  color: white;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-left: 24px;
  box-shadow: 0 4px 14px rgba(201,123,77,0.4);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--terracotta-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,123,77,0.55);
}
.site-header.scrolled .nav-cta {
  /* unchanged - stays bright on scroll */
}
.nav-links a {
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  position: relative;
}
.nav-links a::after {
  content:'';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 2px;
  background: var(--terracotta);
  transition: width var(--transition);
}
.nav-links a:hover::after { width: 100%; }

.site-header.scrolled .nav-links a {
  color: var(--green-deep);
  text-shadow: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px; height: 32px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: white;
  transition: all var(--transition);
}
.site-header.scrolled .nav-toggle span { background: var(--green-deep); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative;
  min-height: 100svh; /* small viewport height — accounts for mobile browser bars */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  overflow: hidden;
  padding: 130px 24px 90px;
}
@supports not (min-height: 100svh) {
  .hero { min-height: 100vh; }
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(31,58,44,0.35) 0%, rgba(31,58,44,0.55) 55%, rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, rgba(31,58,44,0.30) 0%, rgba(31,58,44,0.55) 70%, rgba(0,0,0,0.85) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
}
.hero-logo {
  height: 140px;
  width: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}
.hero-title {
  color: white;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.05;
  margin: 0 auto 0.6rem;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hero-tagline {
  margin: 0 auto 1.8rem;
  max-width: 760px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-tagline__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  color: white;
  line-height: 1.25;
  font-weight: 500;
}
.hero-tagline__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  letter-spacing: 0.04em;
  color: rgba(245, 239, 227, 0.85);
  font-weight: 500;
  margin-top: 2px;
}

/* Hero CTA — bigger, right-aligned */
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.btn-hero { padding: 18px 36px; font-size: 1.05rem; }
.btn-hero--book {
  padding: 22px 48px;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(201,123,77,0.55), 0 0 0 0 rgba(201,123,77,0);
  animation: heroBookPulse 2.6s ease-in-out infinite;
}
.btn-hero--book:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(201,123,77,0.65);
  animation-play-state: paused;
}
@keyframes heroBookPulse {
  0%, 100% { box-shadow: 0 10px 32px rgba(201,123,77,0.55), 0 0 0 0 rgba(201,123,77,0.35); }
  50%      { box-shadow: 0 10px 32px rgba(201,123,77,0.55), 0 0 0 14px rgba(201,123,77,0); }
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 30px; height: 50px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 14px;
}
.hero-scroll span {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 8px;
  background: white;
  border-radius: 2px;
  animation: scrollHint 1.6s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 20% { opacity: 0; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 8px); }
  100% { opacity: 0; transform: translate(-50%, 18px); }
}

/* Hero eyebrow (small uppercase line above title) */
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.6rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.6);
  vertical-align: middle;
  margin: 0 14px 4px;
}

/* Hero subtitle — sits between the brand name and the tagline.
   Tight margins so the four lines read as one block instead of four
   floating sentences. */
.hero-sub {
  color: rgba(255,255,255,0.92);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  letter-spacing: 0.01em;
  margin: 0 auto 1.6rem;
  max-width: 640px;
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  font-weight: 400;
}

/* Hero rating line (subtle, under the CTA) */
.hero-rating {
  margin: 1.6rem auto 0;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-rating__stars {
  color: #ffc233;
  letter-spacing: 0.12em;
  font-size: 1rem;
}
.hero-rating strong {
  color: white;
  font-weight: 700;
}

/* =================================================================
   FACTS ROW (used inside the Good-to-know block above the booking form)
   ================================================================= */
.facts-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
}
.fact {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.fact-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}
.fact strong {
  display: block;
  font-size: 0.95rem;
  color: var(--green-deep);
  font-weight: 700;
  line-height: 1.2;
}
.fact small {
  display: block;
  font-size: 0.82rem;
  color: var(--gray);
  margin-top: 2px;
}

/* Good-to-know panel just before the booking form */
.good-to-know {
  max-width: 920px;
  margin: 56px auto 0;
  background: var(--cream-warm);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 28px 32px 24px;
}
.good-to-know__heading {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--green-deep);
  margin: 0 0 18px;
}

/* "From IDR ..." price line inside the booking block */
.from-price {
  text-align: center;
  margin: -10px auto 2px;
  font-size: 1.05rem;
  color: var(--charcoal);
}
.from-price strong {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--terracotta);
  font-weight: 700;
}
.from-price em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 600;
}
/* Currency approximation — quieter than the IDR amount so it reads as a helper, not the headline. */
.from-price__currency {
  font-size: 0.92rem;
  color: var(--gray);
  font-weight: 400;
  margin-left: 4px;
  white-space: nowrap;
}
.from-price small {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--gray);
  font-weight: 400;
}
/* Calendar hint right under the "from IDR…" line — bigger than a <small>,
   so it actually reads as guidance instead of a footnote.
   Wide enough to stay on one line on desktop; wraps naturally on mobile. */
.from-price__hint {
  text-align: center;
  margin: 0 auto 28px;
  font-size: 1.02rem;
  color: var(--gray);
  max-width: 680px;
  line-height: 1.5;
}

/* Reassurance line that sits just above the Send button.
   No background, no box — meant to read as part of the button area
   so visitors feel safe and click through. */
.booking-reassure {
  text-align: center;
  margin: 18px auto 10px;
  padding: 0;
  max-width: 560px;
  line-height: 1.5;
  font-size: 0.98rem;
  color: var(--green-deep);
  background: none;
}

/* Honeypot field — visually hidden but still in the accessibility tree just
   enough for naive bots to find and fill it. Real users never see it. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =================================================================
   INLINE GUEST QUOTES (real-review excerpts, prominent)
   ================================================================= */
.guest-quote {
  margin: 36px 0 12px;
  padding: 14px 18px 14px 22px;
  border-left: 4px solid var(--terracotta);
  background: rgba(201, 123, 77, 0.06);
  border-radius: 0 8px 8px 0;
  max-width: 620px;
}
.guest-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--green-deep);
  margin: 0 0 10px;
  font-weight: 500;
}
.guest-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--charcoal, #2d2d2d);
}
.guest-quote cite span[aria-hidden="true"] {
  color: var(--terracotta);
  font-size: 1em;
}
/* Centered variant for full-width sections */
.guest-quote--center {
  margin: 48px auto 12px;
  text-align: center;
  border-left: none;
  background: transparent;
  padding: 0;
  position: relative;
  max-width: 720px;
}
.guest-quote--center::before {
  content: "\201C";
  display: block;
  font-family: var(--font-serif);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.guest-quote--center p {
  max-width: 680px;
  margin: 0 auto 12px;
  font-size: 1.4rem;
}
.guest-quote--center cite {
  color: var(--charcoal, #2d2d2d);
}

/* Closing quote at the end of the Stay gallery — give it air before
   the booking block so the two sections don't feel glued together */
.stay-closing-quote {
  margin-top: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  position: relative;
}
.stay-closing-quote::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(31, 58, 44, 0.18);
  margin: 32px auto 0;
}

/* Guest quote that sits between Reviews and the Kelimutu section */
.kelimutu-lead-quote {
  margin: 48px auto 24px;
  padding: 0 20px;
}

/* Giselle quote inside the dark Invite section — needs light colours
   to stay readable on the green-deep background */
.invite-quote {
  margin: 48px auto 0;
}
.invite-quote::before {
  color: var(--terracotta);
}
.invite-quote p {
  color: var(--cream);
}
.invite-quote cite {
  color: rgba(245, 239, 227, 0.85);
}
.invite-quote cite span[aria-hidden="true"] {
  color: var(--terracotta);
}

/* Lopez signature sits above the CTA button in Invite */
.invite-signature {
  margin-top: 8px;
  margin-bottom: 24px;
}

/* =================================================================
   (Legacy price-banner — left in place but no longer used in markup)
   ================================================================= */
.price-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 8px auto 56px;
  background: white;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 26px 28px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.price-banner__item {
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radius);
}
.price-banner__item--main {
  background: rgba(201,123,77,0.08);
}
.price-banner__amount {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1.1;
}
.price-banner__label {
  display: block;
  font-size: 0.85rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-top: 6px;
}
.price-banner__label small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--gray);
  margin-top: 4px;
}
.price-banner__note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--gray);
  text-align: center;
  border-top: 1px dashed var(--sand);
  padding-top: 14px;
}
.price-banner__note strong { color: var(--green-deep); }

/* =================================================================
   COOKIE CONSENT BANNER
   ================================================================= */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  background: var(--cream, #faf6ee);
  color: var(--green-deep, #1f3a2c);
  border: 1px solid rgba(31, 58, 44, 0.12);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 12px 36px rgba(31, 58, 44, 0.18);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-sans, 'Nunito Sans', sans-serif);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 280ms ease, transform 280ms ease;
  /* Sit above iOS safe-area */
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cookie-banner__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--green-deep, #1f3a2c);
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-banner__btn {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}
.cookie-banner__btn--accept {
  background: var(--terracotta, #c97b4d);
  color: #fff;
}
.cookie-banner__btn--accept:hover {
  background: var(--terracotta-dark, #a8623a);
}
.cookie-banner__btn--decline {
  background: transparent;
  color: var(--green-deep, #1f3a2c);
  border-color: rgba(31, 58, 44, 0.3);
}
.cookie-banner__btn--decline:hover {
  border-color: var(--green-deep, #1f3a2c);
  background: rgba(31, 58, 44, 0.05);
}
@media (max-width: 600px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 16px 16px;
    gap: 12px;
  }
  .cookie-banner__text { font-size: 0.88rem; flex-basis: 100%; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1; padding: 11px 14px; }
  /* When the mobile-book-bar is visible (≤700px), lift the cookie banner above it */
  .cookie-banner { bottom: 88px; }
}

/* =================================================================
   MOBILE STICKY BOOK BAR
   ================================================================= */
.mobile-book-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 1px solid var(--sand);
  box-shadow: 0 -6px 22px rgba(31,58,44,0.14);
  z-index: 95;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: none;            /* shown only on mobile via media query */
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mobile-book-bar__info { display: flex; flex-direction: column; line-height: 1.2; }
.mobile-book-bar__price {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--terracotta);
}
.mobile-book-bar__sub { font-size: 0.78rem; color: var(--gray); }
.mobile-book-bar__cta {
  padding: 12px 22px;
  font-size: 0.95rem;
  flex-shrink: 0;
  flex: 1;
  text-align: center;
}
.mobile-book-bar__ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: white;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  flex: 1;
  white-space: nowrap;
}
.mobile-book-bar__ask:hover { background: #1ebd5b; color: white; }

/* =================================================================
   ABOUT
   ================================================================= */
.about { background: var(--cream); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-photos {
  position: relative;
  height: 640px;
  position: sticky;
  top: 100px;          /* photos stay visible while text scrolls */
}
.about-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo--main {
  width: 75%;
  height: 70%;
  position: absolute;
  top: 0; left: 0;
}
.about-photo--small {
  width: 55%;
  height: 50%;
  position: absolute;
  bottom: 0; right: 0;
  border: 8px solid var(--cream);
}

/* =================================================================
   STAY (bungalows + booking, one continuous block)
   ================================================================= */
.stay { background: var(--cream-warm); }

/* Curated photo grid — 1 wide hero shot + 3 details below */
.stay-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin: 3rem 0 4rem;
}
.stay-gallery .gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  margin: 0;
}
.stay-gallery .gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.stay-gallery .gallery-item:hover img { transform: scale(1.04); }
.stay-gallery .gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  color: white;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  background: linear-gradient(to top, rgba(20,30,25,0.78) 0%, rgba(20,30,25,0.0) 100%);
}
.stay-gallery__hero {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}
.stay-gallery__small {
  aspect-ratio: 4 / 3;
}

/* Booking block sits inside .stay so they share one continuous bg */
.booking-block {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 1rem;
  /* Anchor targets need to clear the sticky nav header when the user
     clicks any "Book now" style CTA, otherwise the eyebrow gets
     hidden under the header. Roughly matches nav height. */
  scroll-margin-top: 100px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20,30,25,0.95);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 90%; max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.3); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* =================================================================
   KELIMUTU FEATURE BLOCK
   ================================================================= */
.kelimutu {
  background: var(--cream);
  padding-bottom: 60px;          /* tighter — kelimutu-meta is moved out */
}
.kelimutu-feature {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0;              /* was 3rem — now it's the last element in the section */
  box-shadow: var(--shadow-lg);
  min-height: 360px;
  display: flex;
  align-items: flex-end;
}
.kelimutu-feature img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.kelimutu-caption {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(31,58,44,0.92) 0%, rgba(31,58,44,0.75) 60%, transparent 100%);
  width: 100%;
  padding: 80px 40px 36px;
  color: white;
}
.kelimutu-caption .eyebrow { color: var(--sand); }
.kelimutu-caption h3 {
  color: white;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.kelimutu-caption p {
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin: 0;
}

/* Kelimutu meta block (address + maps button) */
.kelimutu-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 2rem;
}
.kelimutu-meta .location-address { margin: 0; }

/* =================================================================
   VIDEO SECTION — short clip next to a paragraph of text
   ================================================================= */
.video-section { background: var(--cream); }
.video-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.video-text { max-width: 520px; }
.video-text h2 { margin-bottom: 1.2rem; }
.video-text p {
  color: var(--gray);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.video-text__aside {
  margin-top: 1.6rem;
  padding: 18px 22px;
  background: white;
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--charcoal);
  box-shadow: var(--shadow-sm);
}
.video-text__aside em {
  color: var(--green-deep);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  display: block;
  margin-bottom: 6px;
}
.video-frame {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;          /* center inside its column */
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  aspect-ratio: 9 / 16;    /* Instagram portrait (720×1280) */
  position: relative;
}
.video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* =================================================================
   LOCATION — small "find us" section at the bottom of the page
   ================================================================= */
.location { background: var(--cream); padding-bottom: 80px; }
.location-inner { text-align: center; }
.location-inner h2 { margin-bottom: 1.5rem; }
.location .kelimutu-meta {
  background: white;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 620px;
  margin: 2rem auto 0;
  box-shadow: var(--shadow-sm);
}

/* =================================================================
   BOOKING FORM
   ================================================================= */
.booking-intro {
  max-width: 680px;
  margin: 0.5rem auto 2.5rem;
}

.booking-form {
  max-width: 860px;
  margin: 0 auto;
  background: white;
  padding: 40px 44px;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(31,58,44,0.08);
  border: 1px solid rgba(31,58,44,0.06);
}
.dates-row { margin-top: 16px; margin-bottom: 0; }
.calendar-wrap + .form-label { margin-top: 28px; display: block; }
.booking-form .form-label {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green-deep);
  margin-bottom: 12px;
  display: block;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.form-field span,
.form-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--green-deep);
}
.form-field span small {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--gray);
  font-size: 0.85rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  background: white;
  transition: border-color var(--transition);
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-mid);
}
.form-field textarea { resize: vertical; min-height: 100px; }

/* Half-width field (used for "Guests per bungalow" alone on a row) */
.form-field--half { max-width: calc(50% - 10px); }
@media (max-width: 768px) {
  .form-field--half { max-width: 100%; }
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: var(--cream-warm);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  cursor: pointer;
  transition: background var(--transition);
}
.checkbox-field:hover { background: var(--sand); }
.checkbox-field input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green-mid); }
.checkbox-field span { font-size: 0.95rem; color: var(--charcoal); }

/* Calendar */
.calendar-wrap { margin: 24px 0; }
.calendar {
  display: grid;
  grid-template-columns: 1fr;     /* single visible month */
  gap: 24px;
  margin: 12px auto 0;
  max-width: 440px;               /* don't stretch full form width */
  background: var(--cream-warm);
  padding: 24px;
  border-radius: var(--radius);
}
.cal-month { background: white; border-radius: var(--radius-sm); padding: 16px; }
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 8px;
}
.cal-title-block { flex: 1; text-align: center; }
.cal-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--green-deep);
  display: block;
}
.cal-price {
  font-size: 0.78rem;
  color: var(--terracotta);
  font-weight: 700;
  display: block;
  margin-top: 2px;
}
.cal-nav {
  background: none;
  border: 1px solid var(--gray-light);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: var(--green-deep);
  transition: all var(--transition);
  flex-shrink: 0;
}
.cal-nav:hover {
  background: var(--green-deep);
  color: white;
  border-color: var(--green-deep);
}
.cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.cal-dow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  position: relative;
  font-weight: 500;
  color: var(--charcoal);
  user-select: none;
}
.cal-day.empty { cursor: default; }
.cal-day.empty:hover { background: transparent; }
.cal-day.disabled {
  color: var(--gray-light);
  cursor: not-allowed;
  background: transparent;
}
.cal-day.disabled:hover { background: transparent; }

/* Available days get a soft sage-green wash so it's obvious at a glance
   which days are bookable (vs. blocked/past). Warmer + more saturated than
   the design-system --sand so it doesn't read as gray on cool monitors. */
.cal-day.available { background: #dfeed4; }
.cal-day.available:hover { background: #c9e2b6; }

/* Fully booked / closed by owner — red, not selectable as check-IN */
.cal-day.blocked {
  background: #fdecec;
  color: #b23c3c;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.cal-day.blocked:hover { background: #fdecec; }
/* A blocked day IS valid as check-out (the guest leaves that morning,
   doesn't sleep there). When it's being previewed as checkout via hover
   (.in-range) or committed (.checkout), drop the "not-allowed" cues so it
   doesn't look like the click was rejected. */
.cal-day.blocked.in-range,
.cal-day.blocked.checkout {
  text-decoration: none;
  cursor: pointer;
}

/* "Almost full" (1-2 bungalows left) — visually identical to any other
   available day. The class is still added so we can count these nights in
   the price summary and surface the warning there, right under the
   check-in/check-out fields. Nothing on the calendar itself hints at it. */

.cal-day.in-range {
  background: rgba(74,107,82,0.18);
  border-radius: 0;
  color: var(--green-deep);
  font-weight: 600;
}
.cal-day.checkin,
.cal-day.checkout {
  background: var(--green-mid);
  color: white;
  font-weight: 700;
}
.cal-day.checkin { border-radius: 6px 0 0 6px; }
.cal-day.checkout { border-radius: 0 6px 6px 0; }
.cal-day.checkin.checkout { border-radius: 6px; }

/* Price summary */
.price-summary {
  background: var(--cream-warm);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}
.price-summary h3 {
  margin-bottom: 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terracotta);
}
.price-summary ul {
  list-style: none;
  margin-bottom: 12px;
}
.price-summary li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed var(--gray-light);
}
.price-summary li:last-child { border-bottom: none; }
.price-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 2px solid var(--green-deep);
  font-size: 1.1rem;
}
.price-total strong {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--green-deep);
}

/* Shown right under the check-in/check-out row when the selected range
   includes 1+ "almost full" nights. Amber tint, low-key nudge, not alarming. */
.limited-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(230,126,34,0.08);
  border-left: 3px solid #e67e22;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 0.88rem;
  color: #8a4a10;
  line-height: 1.4;
}
.limited-note::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #e67e22;
}

/* Disabled dropdown options for bungalows that don't fit the selected
   date range. Some browsers already dim these; we give them a bit more
   visual weight so the "(not available)" label is easy to read. */
#formBungalows option:disabled {
  color: #999;
}

.response-note {
  background: rgba(201,123,77,0.08);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.92rem;
  color: var(--terracotta-dark);
  margin: 20px 0;
  text-align: center;
}
.ask-lopez-note {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: var(--green-deep);
}
.ask-lopez-note a {
  color: var(--terracotta-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 1px;
}
.ask-lopez-note a:hover { color: var(--terracotta); }

/* =================================================================
   LOCATION ADDRESS BLOCK (used in Kelimutu section)
   ================================================================= */
.location-address {
  background: white;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--terracotta);
  font-size: 0.95rem;
  margin: 0;
  box-shadow: var(--shadow-sm);
}

/* =================================================================
   REVIEWS
   ================================================================= */
.reviews {
  background: var(--cream);
  padding-top: 70px;             /* tighter handoff from Kelimutu */
}

/* Live Booking.com score block (no outbound link) */
.rating-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 2rem auto 3rem;
  max-width: 560px;
  background: white;
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}
.rating-score {
  background: #003580; /* Booking.com blue */
  color: white;
  width: 76px; height: 76px;
  border-radius: 16px 16px 16px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}
.rating-text { text-align: left; }
.rating-label {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--green-deep);
  margin: 0 0 2px;
  font-weight: 600;
}
.rating-source {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.4;
}
.rating-source small { font-size: 0.85em; }

.reviews-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 60px;
}
.reviews-track {
  position: relative;
  min-height: 240px;
}
.review-slide {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: white;
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.review-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.review-stars {
  color: var(--terracotta);
  font-size: 1.1rem;
  margin-bottom: 12px;
  letter-spacing: 0.15em;
}
.review-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.review-meta {
  font-size: 0.9rem;
  color: var(--gray);
}
.review-meta strong { color: var(--green-deep); }
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: 1px solid var(--sand);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--green-deep);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  z-index: 2;
}
.carousel-btn:hover {
  background: var(--green-deep);
  color: white;
  border-color: var(--green-deep);
}
.carousel-prev { left: 0; }
.carousel-next { right: 0; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.dot-btn {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gray-light);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  padding: 0;
}
/* Invisible expanded hit area for accessibility (min 24x24 tap target) */
.dot-btn::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
.dot-btn.is-active { background: var(--green-deep); width: 28px; border-radius: 999px; }

/* =================================================================
   STICKY CTA GROUP (Ask Lopez + Book now, floats bottom-right)
   ================================================================= */
.sticky-cta-group {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  gap: 10px;
  align-items: center;
}
.sticky-ask {
  background: #25D366;
  color: white;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  text-decoration: none;
}
.sticky-ask:hover {
  background: #1ebd5b;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}
.sticky-ask__icon { font-size: 1.05rem; line-height: 1; }

/* =================================================================
   STICKY BOOK NOW (terracotta CTA inside group)
   ================================================================= */
.sticky-book {
  /* positioning now handled by .sticky-cta-group */
  position: relative;
  z-index: 90;
  background: var(--terracotta);
  color: white;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(201,123,77,0.45);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  text-decoration: none;
}
.sticky-book:hover {
  background: var(--terracotta-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201,123,77,0.55);
}
.sticky-book__icon {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.95;
}
.sticky-book::before {
  content:'';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--terracotta);
  opacity: 0.6;
  animation: pulse-ring 2s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* =================================================================
   INVITE — closing CTA section in Lopez's voice
   ================================================================= */
.invite {
  background:
    linear-gradient(180deg, rgba(31,58,44,0.92), rgba(31,58,44,0.96)),
    radial-gradient(ellipse at top, rgba(201,123,77,0.25), transparent 60%);
  background-color: var(--green-deep);
  color: var(--cream);
  padding: 96px 0 104px;
  text-align: center;
}
.invite-inner {
  max-width: 720px;
  margin: 0 auto;
}
.invite .eyebrow {
  color: var(--terracotta);
  margin-bottom: 14px;
}
.invite h2 {
  color: white;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 28px;
  line-height: 1.15;
}
.invite-lead {
  color: rgba(245,239,227,0.92);
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0 auto 18px;
  max-width: 600px;
}
.invite-lead--soft {
  font-style: italic;
  color: rgba(245,239,227,0.78);
  font-size: 1.05rem;
  margin-bottom: 36px;
}
.invite-actions {
  display: flex;
  justify-content: center;
  margin: 8px 0 24px;
}
.invite .signature {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--cream);
  margin-top: 18px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer {
  background: var(--green-deep);
  color: var(--cream);
  padding: 80px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand img {
  height: 70px;
  width: auto;
  margin-bottom: 16px;
}
.footer-brand p { color: rgba(245,239,227,0.75); font-size: 0.95rem; }
.footer-col h4 { color: white; margin-bottom: 16px; font-size: 1.05rem; }
.footer-col__h4--legal { margin-top: 1.75rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: rgba(245,239,227,0.75);
  font-size: 0.95rem;
}
.footer-col a:hover { color: var(--terracotta); }
.footer-col p {
  color: rgba(245,239,227,0.75);
  font-size: 0.95rem;
}
.footer-col p a { color: var(--cream); font-weight: 600; }
.footer-bottom {
  border-top: 1px solid rgba(245,239,227,0.15);
  margin-top: 48px;
  padding-top: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(245,239,227,0.6);
}

/* =================================================================
   MODAL
   ================================================================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(20,30,25,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
[hidden] { display: none !important; }
.modal-inner {
  background: var(--cream);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--gray);
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: background var(--transition);
}
.modal-close:hover { background: var(--sand); }
.modal h2 { margin-bottom: 1rem; }
.modal h3 { margin: 1.5rem 0 0.5rem; font-size: 1.2rem; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 960px) {
  .section { padding: 70px 0; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photos { height: 500px; }
  .stay-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stay-gallery__hero { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .kelimutu-caption { padding: 60px 28px 28px; }
  .kelimutu-caption h3 { font-size: 1.6rem; }
  .nav-cta { display: none; } /* hide in tablet — sticky WhatsApp + mobile menu cover it */
  .facts-row { grid-template-columns: repeat(2, 1fr); }
  .guest-quote { margin: 28px 0 8px; padding: 12px 14px 12px 18px; }
  .guest-quote p { font-size: 1.15rem; }
  .guest-quote--center::before { font-size: 2.6rem; }
  .guest-quote--center p { font-size: 1.2rem; }
  .good-to-know { padding: 22px 22px 18px; }
}

@media (max-width: 700px) {
  .nav-links {
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    box-shadow: var(--shadow-md);
    transform: translateY(-130%);
    transition: transform var(--transition), visibility 0s linear var(--transition);
    visibility: hidden;
  }
  .nav-links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--transition), visibility 0s;
  }
  .nav-links a { color: var(--green-deep); text-shadow: none; }
  .nav-toggle { display: flex; }

  .hero { padding-top: 110px; padding-bottom: 70px; }
  .hero-logo { height: 80px; margin-bottom: 16px; }
  .hero-tagline { margin-bottom: 1.8rem; }
  .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
  .hero-actions .btn-hero { width: 100%; }

  .about-photos { height: 400px; }
  .about-photo--main { width: 80%; height: 65%; }
  .about-photo--small { width: 60%; height: 50%; }

  .stay-gallery { grid-template-columns: 1fr; gap: 10px; }
  .stay-gallery__hero { aspect-ratio: 16 / 10; }
  .stay-gallery__small { aspect-ratio: 4 / 3; }
  .stay-gallery .gallery-item figcaption { font-size: 0.95rem; padding: 12px 14px; }

  .booking-form { padding: 24px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .calendar { grid-template-columns: 1fr; gap: 16px; padding: 16px; max-width: 100%; }

  .video-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .video-text { margin: 0 auto; }
  .video-frame { max-width: 320px; }
  /* Mobile: hide "About the name" aside, move review under the video */
  .video-inner > .video-text { display: contents; }
  .video-text__aside { display: none; }
  .video-frame { order: 1; }
  .guest-quote { order: 2; max-width: 520px; margin-left: auto; margin-right: auto; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .footer-brand img { margin: 0 auto 16px; }

  .reviews-carousel { padding: 0 40px; }
  .review-slide { padding: 24px 20px; }
  .carousel-btn { width: 36px; height: 36px; }

  .kelimutu-feature { min-height: 280px; }
  .kelimutu-meta { flex-direction: column; gap: 16px; text-align: center; }

  /* On mobile, hide the floating CTA group — the bottom bar already covers it */
  .sticky-cta-group { display: none; }

  .booking-widget__fallback { padding: 24px 18px; }

  /* Hero adjustments for mobile */
  .hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.24em; margin-bottom: 1.2rem; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 18px; margin: 0 8px 4px; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 1.8rem; line-height: 1.55; }
  .hero-sub br { display: none; }
  .hero-rating { font-size: 0.85rem; margin-top: 1.3rem; }
  .hero-rating__stars { font-size: 0.9rem; }

  /* Facts row: 1 column on small phones */
  .facts-row { grid-template-columns: 1fr; gap: 14px; }
  .good-to-know { margin-top: 32px; }
  .from-price { font-size: 1rem; }
  .from-price strong { font-size: 1.4rem; }

  /* Show the mobile book bar, add bottom padding so it doesn't overlap content */
  .mobile-book-bar { display: flex; }
  body { padding-bottom: 78px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .modal-inner { padding: 24px 20px; }
}

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