/* =========================================================
   Hotel Sandra Palace — Brand Theme
   Bootstrap 5 + Tailwind (CDN) + Custom overrides
   ========================================================= */

/* Light green theme. Every ground is a pale mint or white and the saturated
   greens are reserved for type, borders and small accents, so no section sits
   on a dark shade. Token names are kept (--forest / --gold) so existing class
   names like .btn-forest and .text-gold keep working; only the values changed. */
:root {
  --forest: #1f6b48;        /* primary green — headings, solid buttons */
  --forest-deep: #175136;   /* deeper green — hovers and accent type */
  --forest-soft: #2a8a5e;
  --forest-light: #8ecfb0;
  --purple: #256f4c;        /* links, eyebrows (AA on white) */
  --purple-deep: #1c5a3c;
  --ivory: #f1faf4;         /* pale mint page ground */
  --sand: #dcefe4;
  --gold: #217a52;          /* accent green — readable on light grounds */
  --gold-soft: #7fc7a4;
  --surface: #e7f6ed;          /* card / panel ground */
  --surface-deep: #d3ebde;     /* gradient partner for --surface */
  --ink: #1d3529;
  --muted: #56705f;         /* AA on the tinted surface, not just on white */
  --white: #ffffff;
  --line: rgba(31, 107, 72, 0.14);
  --shadow-sm: 0 6px 18px rgba(23, 81, 54, 0.08);
  --shadow: 0 22px 60px rgba(23, 81, 54, 0.12);
  --shadow-lg: 0 30px 80px rgba(23, 81, 54, 0.18);
  --radius: 16px;
  --radius-lg: 24px;
  --bs-body-font-family: "Poppins", "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: "Poppins", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--ivory);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4, body h5 {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--forest);
}

body h1 { font-size: clamp(2.5rem, 4.6vw, 3.85rem); font-weight: 600; letter-spacing: -0.035em; }
body h2 { font-size: clamp(2.15rem, 4vw, 2.3rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; }
body h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 600; }
body h4 { font-size: 1.05rem; font-weight: 600; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--purple); }

img { max-width: 100%; display: block; }
.container-hp { width: min(calc(100% - 32px), 1200px); margin-inline: auto; }

/* ---------- Utility overrides ---------- */
.text-forest { color: var(--forest) !important; }
.text-purple { color: var(--purple) !important; }
.text-gold { color: #ffffff !important; }
/* White suits the green topbar, where .text-gold is mostly used. The destination
   page heroes sit on a pale wash, so the pin there keeps the accent green. */
.inner-hero-content .text-gold { color: var(--gold) !important; }
.text-muted-hp { color: var(--muted) !important; }
/* Tailwind's preflight zeroes p margins, so consecutive body paragraphs ran
   together with no gap. Space them off each other rather than adding a trailing
   margin to every instance. */
.text-muted-hp + .text-muted-hp,
.lead-hp + .text-muted-hp { margin-top: 14px; }
.bg-forest { background: var(--surface) !important; color: var(--ink); }
.bg-forest-deep { background: var(--surface-deep) !important; color: var(--ink); }
.bg-ivory { background: var(--ivory) !important; }
.bg-sand { background: var(--sand) !important; }
.bg-purple { background: var(--surface-deep) !important; color: var(--ink); }

.eyebrow {
  display: inline-block;
  width: fit-content;
  color: var(--purple);
  font-family: "Poppins", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding: 6px 14px;
  line-height: 1.4;
  border-radius: 999px;
  background: rgba(31, 107, 72, 0.09);
  border: 1px solid rgba(31, 107, 72, 0.16);
}
.eyebrow.light {
  color: var(--gold);
  background: rgba(33, 122, 82, 0.1);
  border-color: rgba(33, 122, 82, 0.28);
  margin-bottom: 10px;
}
.eyebrow.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  max-width: fit-content;
}
/* No dash before eyebrow — cleaner, more premium look */
.eyebrow::before { content: none !important; display: none !important; }

.lead-hp {
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  color: #40584a; line-height: 1.7;
}
p.lead-hp { font-size: 16px; line-height: 27px; }
p.lead-hp.mt-3 { color: var(--muted); font-size: 16px; line-height: 27px; }
/* !important because body[data-page="about"] .lead-hp has equal specificity and
   sits later in the file, so it would otherwise win on the about page. */
p.lead-hp.mt-4 {
  font-size: .92rem !important;
  line-height: 29px !important;
  text-align: justify;
  color: var(--muted) !important;
}

.section-hp { padding: clamp(50px, 8vw, 60px) 0; }
.section-hp + .section-hp { padding-top: clamp(25px, 1vw, 88px); }
.section-hp .container-hp > * + * { margin-top: 0; }
.section-hp .row + .row { margin-top: 32px; }
.section-tight { padding-top: clamp(48px, 5vw, 68px); }

/* ---------- Buttons ---------- */
.btn-hp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.btn-hp:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-forest { background: var(--forest); color: #fff; }
.btn-forest:hover { background: var(--forest-soft); color: #fff; }
.btn-ivory { background: var(--ivory); color: var(--forest-deep); }
.btn-ivory:hover { background: #fff; color: var(--forest-deep); }
.btn-purple { background: var(--purple-deep); color: #fff; }
.btn-purple:hover { background: var(--purple); color: #fff; }
.btn-outline-light {
  /* .88 keeps the label at 4.5:1 even where the hero wash has cleared to zero */
  border-color: rgba(31, 107, 72, .38); background: rgba(255, 255, 255, .88);
  color: var(--forest); backdrop-filter: blur(8px);
}
.btn-outline-light:hover { background: #fff; color: var(--forest-deep); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--forest-deep); color: #fff; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--purple));
  transform-origin: left center; transform: scaleX(0);
  z-index: 1100; pointer-events: none;
  transition: transform .05s linear;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  transition: transform .25s ease;
}
.topbar {
  background: var(--forest);
  color: rgba(255, 255, 255, .88);
  font-size: .74rem; letter-spacing: .03em;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
  max-height: 44px; overflow: hidden;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
}
.topbar a { color: #fff; }
/* --gold-soft would only reach 3.26:1 on the green band; this clears AA at 5.1:1 */
.topbar a:hover { color: var(--surface-deep); }
.topbar .divider { opacity: .45; margin: 0 8px; }

.nav-wrap { padding: 14px 0 0; transition: padding .25s ease; background: transparent; }
.nav-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px;
  padding: 8px 12px 8px 24px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(31, 107, 72, .08);
  box-shadow: 0 14px 34px rgba(23, 81, 54, .14);
  backdrop-filter: blur(12px);
  transition: min-height .25s ease, box-shadow .25s ease;
}
.brand-hp { display: flex; flex-direction: column; gap: 3px; }
/* Sized by height, not width, so a wide or a stacked logo both sit correctly
   in the nav pill. max-width guards against very horizontal marks. */
.brand-hp img {
  height: 56px; width: auto; max-width: 190px;
  object-fit: contain; transition: height .25s ease;
}
.brand-sub {
  display: block; font-size: .58rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--purple); white-space: nowrap;
  transition: font-size .25s ease;
}
.nav-primary { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.nav-primary a {
  position: relative; font-size: .82rem; font-weight: 500; color: #1d3529;
  padding: 12px 2px; white-space: nowrap;
}
.nav-primary a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px; background: var(--purple); transform: scaleX(0);
  transform-origin: right; transition: transform .2s ease;
}
.nav-primary a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-primary a.active { color: var(--forest); }
.nav-primary a.active::after { transform: scaleX(1); }

.nav-cta { display: inline-flex; }
.mobile-toggle {
  display: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.mobile-toggle span { display: block; width: 18px; height: 1.5px; background: var(--forest); }

.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; padding: 0; }
.site-header.is-scrolled .nav-wrap { padding-top: 10px; }
.site-header.is-scrolled .nav-pill { min-height: 64px; box-shadow: 0 10px 28px rgba(23, 81, 54, .14); }
.site-header.is-scrolled .brand-hp img { height: 46px; }
.site-header.is-scrolled .brand-sub { font-size: .53rem; }

/* ---------- Hero ---------- */
.hero-hp {
  position: relative;
  min-height: min(880px, 100vh);
  display: flex; align-items: center;
  color: var(--ink); background: var(--ivory); isolation: isolate;
  overflow: hidden;
}
.hero-hp > .container-hp {
  padding-left: clamp(20px, 6vw, 72px);
  padding-right: clamp(16px, 4vw, 40px);
}
.hero-hp .hero-panel { margin-left: clamp(0px, 2vw, 24px); }
.hero-hp .hero-media {
  position: absolute; inset: -8% 0 -18% 0; z-index: -2; overflow: hidden;
}
.hero-hp .hero-media img,
.hero-hp .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transform: translate3d(0,0,0) scale(1.04);
  will-change: transform;
}
.hero-hp::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* Kept as light as the copy allows, so the photograph behind it still
       reads. Floors are what each element needs over the darkest pixel a photo
       can put behind it: lead (small, to 47%) >= .80, h1 (large, to 56%) >= .715.
       The eyebrow would have forced .955 here, so it carries its own chip
       instead (see .hero-panel .eyebrow.light) rather than taxing the whole
       banner. Past 57% there is no copy, so the wash clears entirely by 72%. */
    linear-gradient(90deg,
      rgba(241, 250, 244, .82) 0%,
      rgba(241, 250, 244, .82) 48%,
      rgba(241, 250, 244, .74) 57%,
      rgba(241, 250, 244, 0) 72%),
    linear-gradient(0deg, rgba(231, 246, 237, .22) 0%, transparent 40%);
}

/* Modern, cleaner hero — green accent line + free-flowing copy over a light wash */
.hero-panel {
  max-width: 780px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  position: relative;
}
.hero-panel .accent-line {
  display: block; width: 68px; height: 2px;
  background: var(--gold);
  margin-bottom: 26px;
  transform-origin: left;
  animation: heroLine 1s .1s cubic-bezier(.22,.61,.36,1) both;
}
.hero-panel .eyebrow.light {
  color: var(--gold);
  font-size: .82rem; letter-spacing: .28em;
  margin-bottom: 26px;
  /* Carries its own ground so the banner wash can stay light enough to see the
     photograph through. Alone this reaches 4.96:1 on the darkest pixel. */
  background: rgba(255, 255, 255, .85);
  border-color: rgba(31, 107, 72, .26);
  text-shadow: none;
}
.hero-panel .eyebrow.light::before { background: var(--gold); width: 34px; }
body .hero-panel h1 {
  color: var(--forest);
  font-size: clamp(2.1rem, 3.8vw, 3.35rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.035em;
  margin: 0 0 24px;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .75);
  max-width: none;
  white-space: normal;
}
/* Force clean 2-line break on the hero */
body .hero-panel h1 br { display: block; }
.hero-panel p.lead-hp {
  color: #40584a;
  font-size: 16px;
  line-height: 1.6;
  max-width: 540px;
  text-shadow: 0 2px 10px rgba(255, 255, 255, .8);
  margin: 0 0 32px;
}
.hero-panel .hero-actions .btn-hp {
  min-height: 56px; padding: 16px 28px;
  font-size: .88rem; letter-spacing: .04em;
  box-shadow: 0 10px 28px rgba(23, 81, 54, .12);
}
@keyframes heroLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.booking-strip {
  position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 40px), 1140px);
  display: grid; grid-template-columns: 1fr 1fr 1.1fr auto;
  align-items: stretch; min-height: 92px;
  background: #fff; border-radius: 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 107, 72, .08);
  overflow: hidden; z-index: 5;
}
.booking-strip > div {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 26px; border-right: 1px solid var(--line);
}
.booking-strip small {
  color: var(--muted); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 4px; font-weight: 600;
}
.booking-strip strong { font-size: .92rem; font-weight: 500; color: var(--ink); }
.booking-strip .book-cta {
  background: var(--purple-deep); color: #fff; flex-direction: row;
  align-items: center; gap: 14px; min-width: 220px; border: 0;
  font-weight: 600; font-size: .88rem;
}
.booking-strip .book-cta:hover { background: var(--purple); }
.booking-strip .book-cta .arrow {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); display: grid; place-items: center;
}

/* ---------- Quick enquiry (half-overlapping the hero banner) ---------- */
.quick-enquiry {
  position: relative;
  margin-top: 0;
  padding: 0 0 60px;
  background: transparent;
  z-index: 6;
}
.quick-enquiry > .container-hp { position: relative; z-index: 1; }

.qe-card {
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(33, 122, 82, 0.35);
  box-shadow: 0 30px 70px rgba(23, 81, 54, 0.28);
  padding: 28px 34px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: center;
  position: relative; overflow: hidden;

  /* Pull the card up so about half of it sits over the hero banner */
  margin-top: clamp(-120px, -7vw, -80px);
  z-index: 10;
}
.qe-card::before {
  /* Subtle gold accent stripe on the left */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(180deg, var(--gold), transparent);
  border-radius: 4px;
}
.qe-intro .eyebrow { margin-bottom: 10px; }
.qe-intro h3 { margin: 0 0 6px; font-size: 1.4rem; }
.qe-intro .qe-note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.qe-form {
  /* 5 fields + submit = a clean 3 × 2 grid */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.qe-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: var(--muted);
}
/* Only Check-in/Check-out are .qe-field, so only they reserve a 15px error
   slot. That made them 25px taller than Guests/Rooms/Room type, and with
   align-items:end the shorter fields dropped out of line. Reserve the same
   space on every field, and offset the submit by it so the button still sits
   level with the inputs rather than with the error row. */
.qe-form > label:not(.qe-field)::after {
  content: ""; display: block; min-height: 15px; margin-top: 4px;
}
/* 6px flex gap + 4px margin-top + 15px min-height = the 25px an error slot adds */
.qe-form .qe-submit { margin-bottom: 25px; }
.qe-form input, .qe-form select {
  min-height: 46px; padding: 10px 12px;
  border: 1px solid rgba(31, 107, 72, 0.18);
  border-radius: 10px;
  background: #fff; color: var(--ink);
  font-size: .88rem; font-family: inherit;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.qe-form input:focus, .qe-form select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(31, 107, 72, .12);
}
.qe-form .qe-submit {
  min-height: 46px; padding: 0 22px;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .qe-card { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .qe-form { grid-template-columns: repeat(2, 1fr); }
  .qe-submit { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 640px) {
  .qe-card { padding: 22px 20px; border-radius: 18px; }
  .qe-form { grid-template-columns: 1fr; gap: 12px; }
  .quick-enquiry { padding-bottom: 48px; margin-top: -30px; }
  /* One column here, so nothing needs equalising — drop the reserved error
     space and the submit offset rather than carry ~100px of dead height. */
  .qe-form > label:not(.qe-field)::after { content: none; }
  .qe-form .qe-submit { margin-bottom: 0; }
}

/* ---------- Enquiry modal (contact step) ---------- */
.enq-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.enq-modal.open { display: flex; }
.enq-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(23, 81, 54, 0.34);
  backdrop-filter: blur(8px);
  animation: fadeIn .25s ease both;
}
.enq-modal-card {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: 92vh; overflow: auto;
  background: #fff;
  border-radius: 22px;
  padding: 36px 38px 34px;
  box-shadow: 0 40px 90px rgba(23, 81, 54, .16);
  border: 1px solid rgba(33, 122, 82, 0.35);
  animation: modalIn .35s cubic-bezier(.22,.61,.36,1) both;
}
.enq-modal-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(180deg, var(--gold), transparent);
  border-radius: 4px 0 0 4px;
}
.enq-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  color: var(--forest); cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease;
}
.enq-modal-close:hover { background: var(--ivory); color: var(--purple-deep); }
.enq-modal .eyebrow { margin-bottom: 12px; }
.enq-modal h3 { margin: 0 0 8px; font-size: 1.4rem; }
.enq-modal-note { margin: 0 0 20px; color: var(--muted); font-size: .84rem; line-height: 1.55; }

.enq-summary {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 14px; margin-bottom: 22px;
  border-radius: 12px;
  background: var(--ivory);
  border: 1px dashed rgba(31, 107, 72, .22);
}
.enq-summary .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font-size: .7rem; font-weight: 500;
  border: 1px solid var(--line);
}
.enq-summary .chip small {
  color: var(--muted); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase;
  margin-right: 4px;
}

.enq-modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.enq-modal-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: var(--muted);
}
.enq-modal-form label span em {
  color: var(--purple-deep); font-style: normal; margin-left: 2px;
}
.enq-modal-form label.wide { grid-column: 1 / -1; }
.enq-modal-form input,
.enq-modal-form textarea {
  min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-size: .9rem; font-family: inherit;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.enq-modal-form textarea { min-height: 72px; resize: vertical; }
.enq-modal-form input:focus,
.enq-modal-form textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(31, 107, 72, .12);
}
.enq-modal-status {
  margin: 8px 0 0; font-size: .78rem; text-align: center;
  color: var(--forest); font-weight: 500; min-height: 1.2em;
  text-transform: none; letter-spacing: 0;
}
.enq-modal-status:not(:empty) { color: #b3413a; }

/* ---------- Inline field validation (quick-enquiry + modal) ---------- */
.qe-error {
  display: block;
  min-height: 15px;
  margin-top: 4px;
  color: #b3413a;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
.qe-form input.has-error,
.qe-form select.has-error,
.enq-modal-form input.has-error {
  border-color: #b3413a !important;
  box-shadow: 0 0 0 3px rgba(179, 65, 58, 0.12) !important;
}
.qe-field { position: relative; }
.enq-modal-form button[type="submit"]:disabled {
  opacity: .65; cursor: wait; transform: none;
}

/* ---------- Thank-you panel (replaces modal form on success) ---------- */
.enq-thanks {
  text-align: center;
  padding: 20px 6px 6px;
}
.enq-thanks-icon {
  width: 66px; height: 66px; margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(31, 107, 72, 0.08);
  color: var(--forest);
  display: grid; place-items: center;
  font-size: 1.7rem;
  animation: thanksPop .45s cubic-bezier(.22,.61,.36,1) both;
}
.enq-thanks h3 { margin: 0 0 12px; font-size: 1.5rem; }
.enq-thanks p {
  color: var(--muted); font-size: .92rem; line-height: 1.6;
  max-width: 420px; margin: 0 auto 26px;
}
.enq-thanks .btn-hp { margin: 0 auto; }
@keyframes thanksPop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 640px) {
  .enq-modal-card { padding: 28px 22px 24px; }
  .enq-modal-form { grid-template-columns: 1fr; }
  .enq-modal-form label.wide { grid-column: auto; }
}

/* ---------- Trust strip ---------- */
.trust-strip { padding: 10px 0; background: var(--ivory); }

/* Topic-relevant line drawing: Western Ghats + palms silhouette */
.scenery-divider {
  color: var(--forest);
  margin: 42px auto 4px;
  width: 100%;
  max-width: 1100px;
  display: block;
  opacity: .95;
  pointer-events: none;
}
.scenery-divider svg {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1200 / 140;
  overflow: visible;
}
.scenery-divider .s-far,
.scenery-divider .s-mid,
.scenery-divider .palm,
.scenery-divider .pines,
.scenery-divider .sun {
  transform-box: fill-box; transform-origin: center bottom;
}
/* subtle draw animation on load */
@keyframes sceneryFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scenery-divider svg > * {
  animation: sceneryFadeIn .9s cubic-bezier(.22,.61,.36,1) both;
}
.scenery-divider svg > *:nth-child(1) { animation-delay: 0ms; }
.scenery-divider svg > *:nth-child(2) { animation-delay: 100ms; }
.scenery-divider svg > *:nth-child(3) { animation-delay: 220ms; }
.scenery-divider svg > *:nth-child(4) { animation-delay: 300ms; }
.scenery-divider svg > *:nth-child(5) { animation-delay: 380ms; }
.scenery-divider svg > *:nth-child(6) { animation-delay: 460ms; }
.scenery-divider svg > *:nth-child(7) { animation-delay: 540ms; }
.scenery-divider svg > *:nth-child(8) { animation-delay: 620ms; }

@media (max-width: 900px) {
  .scenery-divider { height: 90px; margin-top: 24px; }
}
@media (max-width: 640px) {
  .scenery-divider { height: 72px; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .scenery-divider svg > * { animation: none; }
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-grid > div {
  padding: 8px 26px; border-left: 1px solid rgba(31, 107, 72, .16);
  display: flex; flex-direction: column; justify-content: center;
}
.trust-grid > div:last-child { border-right: 1px solid rgba(31, 107, 72, .16); }
.trust-grid strong {
  color: var(--forest); font-size: 1.55rem; font-weight: 500;
  letter-spacing: -.02em; font-family: "Poppins", "Segoe UI", sans-serif;
}
.trust-grid span { color: var(--muted); font-size: .78rem; }

/* ---------- Section: About / Story ---------- */
.about-hp {
  background: var(--ivory);
  padding-top: clamp(24px, 3vw, 42px);
  padding-bottom: clamp(56px, 0vw, 90px);
}
.about-collage-hp {
  position: relative; aspect-ratio: 1/1.05;
}
.about-collage-hp .main {
  width: 78%; margin-left: auto; height: 100%;
  border-radius: 200px 200px 20px 20px;
  overflow: hidden; box-shadow: var(--shadow);
}
.about-collage-hp .main img { width: 100%; height: 100%; object-fit: cover; }
/* The 78% width leaves room for the overlapping .accent figure. Where there is
   no accent, fill the frame rather than leaving a 22% gap beside it. */
.about-collage-hp .main:only-child { width: 100%; }
.about-collage-hp .accent {
  position: absolute; left: 0; bottom: 8%;
  width: 48%; border: 8px solid var(--ivory);
  border-radius: 18px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
}
.about-collage-hp .accent img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.about-collage-hp .accent .cap {
  padding: 16px 18px; color: var(--forest);
}
.about-collage-hp .accent .cap strong { display: block; font-size: .84rem; font-weight: 500; }
.about-collage-hp .accent .cap span { color: #56705f; font-size: .7rem; }

/* ---------- Room cards ---------- */
.room-card-hp {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%; display: flex; flex-direction: column;
}
.room-card-hp:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.room-card-hp .thumb { position: relative; overflow: hidden; aspect-ratio: 1.2; }
.room-card-hp .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.room-card-hp:hover .thumb img { transform: scale(1.045); }
.room-card-hp .kicker {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--forest);
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.room-card-hp .price-tag {
  position: absolute; bottom: 14px; right: 14px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--forest); color: #fff;
  font-size: .78rem; font-weight: 500;
}
.room-card-hp .price-tag small { display: block; font-size: .58rem; opacity: .75; letter-spacing: .08em; text-transform: uppercase; }
.room-card-hp .body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.room-card-hp .body h3 { font-size: 1.28rem; margin-bottom: 8px; }
.room-card-hp .body p { color: var(--muted); font-size: .87rem; margin-bottom: 16px; flex: 1; line-height: 25px; }
.room-card-hp .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.room-card-hp .tag-list li {
  list-style: none; padding: 5px 11px; border-radius: 999px;
  background: var(--ivory); color: #56705f; font-size: .66rem;
}
.room-card-hp .card-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid currentColor;
  color: var(--forest); font-weight: 600; font-size: .8rem;
  align-self: flex-start;
}

/* ---------- Amenities dark ---------- */
.amenities-hp {
  background: var(--surface); color: var(--ink); position: relative; overflow: hidden;
}
.amenities-hp h2 { color: var(--forest); }
.amenities-hp .lead-hp { color: var(--muted); font-size: 17px; margin-bottom: 16px; line-height: 27px; }
.amenities-photo {
  position: relative; border-radius: 16px; overflow: hidden; margin-top: 40px;
}
.amenities-photo img {
  width: 100%; aspect-ratio: 1.45; object-fit: cover;
  filter: saturate(.9) brightness(.95);
  transition: transform .5s ease;
}
.amenities-photo:hover img { transform: scale(1.03); }
.amenities-photo .tag {
  position: absolute; bottom: 16px; left: 16px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); font-size: .68rem; letter-spacing: .05em;
  backdrop-filter: blur(6px);
}
.panel-card {
  padding: 40px 32px 34px; border-radius: 16px;
  border: 1px solid rgba(31, 107, 72, .16);
  background: rgba(255, 255, 255, .78); position: relative;
  height: 100%; display: flex; flex-direction: column;
}
.panel-card .num { color: var(--gold); font-size: .7rem; letter-spacing: .14em; margin-bottom: 40px; }
.panel-card h3 { color: var(--forest); margin-bottom: 22px; }
.panel-card ul { list-style: none; padding: 0; margin: 0 0 22px; }
.panel-card ul li {
  position: relative; padding: 12px 0 12px 22px;
  border-top: 1px solid rgba(31, 107, 72, .14);
  color: #40584a; font-size: 14px;
}
.panel-card ul li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.panel-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--forest); font-size: .74rem; font-weight: 600;
  padding-bottom: 4px; border-bottom: 1px solid rgba(31, 107, 72, .4);
  margin-top: auto; align-self: flex-start;
}
.panel-link:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Dining section on home ---------- */
.dining-hp { background: var(--ivory); }
.dining-images-hp { position: relative; padding-right: 12%; padding-bottom: 12%; }
.dining-images-hp .main {
  width: 100%; aspect-ratio: 0.95;
  border-radius: 200px 200px 18px 18px;
  overflow: hidden; box-shadow: var(--shadow);
}
.dining-images-hp .main img { width: 100%; height: 100%; object-fit: cover; }
.dining-images-hp .accent {
  position: absolute; right: 0; bottom: 0;
  width: 48%; aspect-ratio: 1.05;
  border: 8px solid var(--ivory);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow);
}
.dining-images-hp .accent img { width: 100%; height: 100%; object-fit: cover; }
.dining-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
.dining-tags span {
  padding: 8px 14px; border: 1px solid rgba(31, 107, 72, .2);
  border-radius: 999px; color: var(--forest); font-size: .72rem;
}

/* ---------- Dining services (in-house · room service · takeaway) ---------- */
.dining-services { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 14px; }
.dining-services li {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px;
  align-items: center;
}
.dining-services i {
  grid-row: 1 / 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ivory); border: 1px solid var(--line);
  color: var(--forest); font-size: 1.05rem;
}
.dining-services strong { font-size: .9rem; color: var(--forest); font-weight: 600; }
.dining-services span { font-size: .8rem; color: var(--muted); line-height: 1.55; }

/* ---------- Destination cards ---------- */
.dest-card {
  position: relative; min-height: 380px;
  padding: 34px; border-radius: 18px; color: var(--ink);
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  isolation: isolate;
}
.dest-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 80% 18%, rgba(33, 122, 82, .22), transparent 32%),
    linear-gradient(145deg, #e9f7ef, #cfe8da);
}
.dest-card.p2::before {
  background:
    radial-gradient(circle at 78% 20%, rgba(127, 199, 164, .22), transparent 32%),
    linear-gradient(145deg, #e2f4ec, #c7e5d5);
}
.dest-card.p3::before {
  background:
    radial-gradient(circle at 80% 18%, rgba(200, 235, 215, .22), transparent 32%),
    linear-gradient(145deg, #edf9f2, #d5ecdf);
}
.dest-card::after {
  content: ""; position: absolute; top: -42px; right: -42px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 1px solid rgba(31, 107, 72, .18);
  box-shadow: 0 0 0 35px rgba(31, 107, 72, .03), 0 0 0 70px rgba(31, 107, 72, .02);
}
.dest-card .num { color: var(--gold); font-size: .74rem; letter-spacing: .14em; }
.dest-card .meta {
  color: #56705f; font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px;
}
.dest-card h3 { color: var(--forest); margin-bottom: 14px; }
.dest-card p { color: #40584a; font-size: .84rem; margin: 0; }

/* ---------- Destination — original 3-tile gradient cards ---------- */
.destination-hp { position: relative; background: var(--ivory); }

/* Section intro — clean vertical rhythm */
.destination-hp .intro {
  max-width: 720px; margin: 0 auto 30px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.destination-hp .intro .eyebrow { margin-bottom: 20px; }
.destination-hp .intro h2 { margin: 0 0 20px; }
.destination-hp .intro .lead-hp { color: var(--muted); margin: 0; }

/* ---------- In & Around Thekkady (attraction cards) ---------- */
.attraction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.attraction-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 34px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.attraction-card:hover {
  transform: translateY(-6px);
  border-color: rgba(31, 107, 72, .22);
  box-shadow: 0 24px 50px rgba(23, 81, 54, .16);
}
.attraction-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 6px;
  border-radius: 14px;
  background: linear-gradient(145deg, #e9f7ef 0%, #cfe8da 100%);
  color: var(--gold); font-size: 1.35rem;
}
.attraction-card h3 { margin: 0; font-size: 1.18rem; }
.attraction-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }

@media (max-width: 991px) { .attraction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .attraction-grid { grid-template-columns: 1fr; } }

/* 3-card grid */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Each card is a full-height flex column with equal internal spacing */
.dest-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 420px;
  padding: 40px 34px 34px;
  border-radius: 20px;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(23, 81, 54, 0.14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(23, 81, 54, 0.22);
  color: var(--ink);
}
.dest-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 82% 16%, rgba(33, 122, 82, .22), transparent 34%),
    linear-gradient(145deg, #e9f7ef 0%, #cfe8da 100%);
}
.dest-card.p2::before {
  background:
    radial-gradient(circle at 78% 20%, rgba(127, 199, 164, .22), transparent 34%),
    linear-gradient(145deg, #e2f4ec 0%, #c7e5d5 100%);
}
.dest-card.p3::before {
  background:
    radial-gradient(circle at 80% 18%, rgba(200, 235, 215, .22), transparent 34%),
    linear-gradient(145deg, #edf9f2 0%, #d5ecdf 100%);
}

/* Number chip — fixed spacing below to body */
.dest-card .num {
  color: var(--gold);
  font-size: .74rem;
  letter-spacing: .14em; font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin: 0 0 auto;  /* pushes body to the bottom */
  padding: 0 0 16px;
}

/* Body block — consistent rhythm between meta / title / copy / cta */
.dest-card .dest-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 0;  /* explicit margins per element for control */
}
.dest-card .meta {
  margin: 0 0 14px;
  color: #56705f;
  font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  line-height: 1.4;
}
.dest-card h3 {
  color: var(--forest);
  margin: 0 0 18px;
  font-size: 1.75rem; line-height: 1.18;
  letter-spacing: -.015em;
  max-width: 260px;
}
.dest-card p {
  color: #40584a;
  font-size: .84rem; line-height: 1.7;
  margin: 0 0 24px;
}
.dest-card .dest-more {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--forest); font-size: .78rem; font-weight: 600;
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(31, 107, 72, .4);
  align-self: flex-start;
  transition: gap .2s ease, border-color .2s ease, color .2s ease;
}
.dest-card:hover .dest-more { gap: 14px; color: var(--gold); border-color: var(--gold); }

/* Bottom CTA row */
.dest-cta-row.visible { margin-top: 20px; }
.dest-cta-row {
  margin-top: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 24px 32px;
  border-radius: 16px;
  background: var(--ivory);
  border: 1px solid var(--line);
}
.dest-cta-row p {
  margin: 0; color: var(--muted); font-size: .88rem;
  max-width: 560px; line-height: 1.55;
}

@media (max-width: 1024px) {
  .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .destination-grid > .dest-card:last-child { grid-column: 1 / -1; min-height: 340px; }
  .destination-hp .intro { margin-bottom: 52px; }
}
@media (max-width: 640px) {
  .destination-grid { grid-template-columns: 1fr; gap: 18px; }
  .dest-card { min-height: 360px; padding: 34px 28px 30px; }
  .dest-card h3 { max-width: none; font-size: 1.4rem; }
  .destination-grid > .dest-card:last-child { grid-column: auto; min-height: 360px; }
  .dest-cta-row { padding: 22px 24px; text-align: center; justify-content: center; }
  .destination-hp .intro { margin-bottom: 44px; }
}

/* ---------- Topic-relevant background patterns ---------- */
/* Subtle leaf-dot pattern for nature/destination sections */
.has-dots {
  position: relative;
}
.has-dots::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31, 107, 72, 0.09) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(31, 107, 72, 0.05) 1px, transparent 0);
  background-size: 22px 22px, 44px 44px;
  background-position: 0 0, 11px 11px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .55) 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .55) 55%, transparent 85%);
}
.has-dots > .container-hp { position: relative; z-index: 1; }

/* Leaf silhouette accent — for section corners */
.has-leaf { position: relative; overflow: hidden; }
.has-leaf::after {
  content: "";
  position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%2312381f' fill-opacity='.06' d='M100 20c50 0 80 40 80 80 0 40-30 80-80 80-30 0-50-20-60-40 40 0 70-40 80-80 -20 20-50 40-80 40 10-40 30-80 60-80z'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  pointer-events: none; z-index: 0;
}
.has-leaf > .container-hp { position: relative; z-index: 1; }

/* Ivory dot pattern for lighter sections */
.has-dots-light::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(31, 107, 72, 0.09) 1px, transparent 0);
  background-size: 24px 24px;
}

/* ---------- Related destination cards (detail pages) ---------- */
.related-dest-card {
  position: relative; display: block;
  min-height: 260px; border-radius: 20px; overflow: hidden;
  color: var(--ink); isolation: isolate;
  box-shadow: 0 10px 26px rgba(23, 81, 54, 0.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.related-dest-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23, 81, 54, 0.18); color: var(--ink); }
.related-dest-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.related-dest-card:hover img { transform: scale(1.06); }
.related-dest-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(241, 250, 244, 0.94), rgba(241, 250, 244, 0.35) 65%, transparent);
}
.related-dest-card .rd-content {
  position: relative; z-index: 1;
  padding: 26px 24px 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
}
.related-dest-card .rd-tag {
  color: var(--gold); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 8px; font-weight: 600;
}
.related-dest-card h3 { color: var(--forest); font-size: 1.35rem; margin: 0 0 14px; }
.related-dest-card .rd-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; color: var(--forest);
  padding-bottom: 3px; border-bottom: 1px solid rgba(31, 107, 72, .4);
  align-self: flex-start;
  transition: border-color .2s ease, gap .2s ease;
}
.related-dest-card:hover .rd-more { border-color: var(--gold); gap: 12px; }

/* ---------- Enquiry section ---------- */
.enquiry-hp { background: var(--surface); color: var(--ink); }
.enquiry-hp h2 { color: var(--forest); }
.enquiry-hp .lead-hp { color: #40584a; }
.direct-contact { margin-top: 40px; border-top: 1px solid rgba(31, 107, 72, .18); }
.direct-contact a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid rgba(31, 107, 72, .18);
  color: var(--forest);
  transition: padding-left .2s ease;
}
.direct-contact a:hover { padding-left: 6px; }
.direct-contact small {
  display: block; color: var(--gold); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px;
}
.direct-contact strong { font-size: .92rem; font-weight: 500; }
.enquiry-form-hp {
  padding: 48px; border-radius: 20px; background: var(--ivory); color: var(--ink);
  box-shadow: 0 30px 80px rgba(23, 81, 54, .1);
}
.enquiry-form-hp label {
  display: flex; flex-direction: column; gap: 8px;
  color: #40584a; font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.enquiry-form-hp input,
.enquiry-form-hp select,
.enquiry-form-hp textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(31, 107, 72, .28);
  background: transparent; color: var(--ink);
  font-size: .9rem; padding: 12px 0; outline: none;
  font-family: inherit; text-transform: none; letter-spacing: 0;
  font-weight: 400;
}
.enquiry-form-hp input:focus,
.enquiry-form-hp select:focus,
.enquiry-form-hp textarea:focus { border-color: var(--purple); }
.enquiry-form-hp textarea { min-height: 90px; resize: vertical; }
.enquiry-form-hp .form-note { color: var(--muted); font-size: .7rem; margin-top: 12px; text-align: center; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 60px 0 24px; background: #246b49; color: #ffffff;
}
.footer-grid {
  display: grid; grid-template-columns: 1.3fr .8fr 1fr 1fr; gap: 56px;
}
.footer-grid h5 {
  /* var(--forest) here would be 1.01:1 on the green footer ground */
  color: #ffffff; font-family: "Poppins", sans-serif;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-grid a, .footer-grid p {
  color: #ffffff; font-size: 14px;
  display: block; margin-bottom: 8px; line-height: 23px;
}
/* var(--gold) would be 1.21:1 on the green ground; this reads at 5.1:1 */
.footer-grid a:hover { color: var(--surface-deep); }
.footer-brand img {
  /* Bounded on both axes so a wide or stacked logo both sit well on the dark ground */
  width: auto; height: auto; max-width: 190px; max-height: 104px;
  object-fit: contain;
  margin-bottom: 12px; padding: 10px 12px;
  border-radius: 8px; background: #fff;
}
.footer-brand .brand-sub {
  color: var(--surface-deep); margin-bottom: 20px; font-size: .6rem;
}
.footer-brand p { max-width: 290px; }
.footer-bottom {
  margin-top: 30px; padding-top: 22px;
  /* A green rule is invisible on the green ground — use a white tint */
  border-top: 1px solid rgba(255, 255, 255, .22);
  /* Single line of copy now, so centre it rather than pushing it to one edge */
  display: flex; justify-content: center; text-align: center; align-items: center;
  font-size: .68rem;
}

/* ---------- Floating actions ---------- */
.float-actions {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
}
.float-actions a {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; box-shadow: 0 10px 24px rgba(23, 81, 54, .25);
  border: 3px solid rgba(255, 255, 255, .9);
  font-size: 1.05rem;
}
.float-wa { background: #25d366; }
.float-call { background: var(--purple); }
.float-actions a:hover { transform: translateY(-3px); color: #fff; }

/* ---------- Inner hero (page hero) ---------- */
.inner-hero {
  position: relative; min-height: 62vh; display: flex; align-items: flex-end;
  color: var(--ink); background: var(--ivory); isolation: isolate;
  overflow: hidden;
}
.inner-hero .media { position: absolute; inset: -8% 0 -18% 0; z-index: -2; overflow: hidden; }
.inner-hero .media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transform: translate3d(0,0,0) scale(1.04);
  will-change: transform;
}
.inner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      0deg, rgb(241 250 244 / 0%), rgb(241 250 244 / 93%) 78%),
    /* Fade starts at 50%, past the widest line of copy (h1 ends at 48.6%).
       Starting it at 0% put the headline on a mid-grey composite at 2.17:1. */
    linear-gradient(
      90deg, rgb(231 246 237), rgb(231 246 237) 50%, rgb(231 246 237 / 5%) 68%, #0000004a 84%);
}
.inner-hero-content {
  padding: 170px 0 84px;
  /* Align with the logo inside .nav-pill (container-hp edge + nav-pill's 24px padding) */
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.inner-hero-content > * { margin-left: 0; }
.inner-hero-content h1 {
  color: var(--forest); max-width: 900px;
  margin: 0 0 22px;
  font-size: clamp(2.4rem, 4.6vw, 2.85rem);
  line-height: 1.08; letter-spacing: -.035em;
  text-shadow: 0 2px 18px rgb(255 255 255 / 36%);
}
.inner-hero-content > p {
  color: #40584a; max-width: 680px;
  font-size: 1.05rem; line-height: 1.65;
  text-shadow: 0 2px 10px rgba(255, 255, 255, .8);
  margin: 0;
}
/* Accent line replaces the eyebrow's dash — keep either, not both */
.inner-hero-content .accent-line {
  display: block; width: 60px; height: 2px;
  background: var(--gold);
  margin: 6px 0 24px;
}
.inner-hero-content .eyebrow.light {
  color: var(--gold); letter-spacing: .26em;
  font-size: .82rem;
  margin: 0 0 26px;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .6);
}
.inner-hero-content > .crumb { margin-bottom: 28px; }
/* If accent-line is present, hide the eyebrow's built-in dash to avoid double lines */
.inner-hero-content .accent-line + .eyebrow.light,
.inner-hero-content .accent-line ~ .eyebrow.light { gap: 0; }
.inner-hero-content .accent-line + .eyebrow.light::before,
.inner-hero-content .accent-line ~ .eyebrow.light::before { display: none; }
/* Fallback: if no accent-line, the eyebrow keeps its own gold dash */
.inner-hero-content .eyebrow.light::before { background: var(--gold); width: 34px; }

.crumb {
  display: flex; gap: 10px; align-items: center;
  width: fit-content;
  color: #40584a; font-size: .74rem;
  margin: 0 0 20px;
  padding: 7px 14px;
  border: 1px solid rgba(31, 107, 72, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  letter-spacing: .04em;
}
.crumb a { color: var(--gold); transition: color .2s ease; }
.crumb a:hover { color: var(--forest-deep); }
.crumb i { font-size: .7rem; opacity: .7; }
.crumb span { color: var(--forest); }

/* ---------- Restaurant page (reworked) ---------- */
.rest-intro { background: var(--ivory); }
.rest-marquee {
  display: flex; gap: 24px; overflow: hidden;
  padding: 22px 0; background: var(--surface);
  color: var(--forest); font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 1.35rem; letter-spacing: .04em;
  border-top: 1px solid rgba(31, 107, 72, .16);
  border-bottom: 1px solid rgba(31, 107, 72, .16);
}
.rest-marquee .track {
  display: flex; gap: 40px; animation: rest-marquee 32s linear infinite;
  white-space: nowrap; align-items: center;
}
.rest-marquee .track span { display: inline-flex; align-items: center; gap: 40px; }
.rest-marquee .track b { color: var(--gold); font-weight: 400; }
@keyframes rest-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rest-showcase { padding: clamp(60px, 8vw, 100px) 0; }
.rest-hero-image {
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 1/1.05; box-shadow: var(--shadow);
  position: relative;
}
.rest-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rest-hero-image:hover img { transform: scale(1.04); }
.rest-hero-image .badge-tag {
  position: absolute; top: 20px; left: 20px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--forest);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.rest-hero-image .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 32px 26px 24px; color: var(--forest);
  background: linear-gradient(0deg, rgba(241, 250, 244, .92), transparent);
}
.rest-hero-image .caption h3 { color: var(--forest); font-size: 1.55rem; margin: 0 0 4px; }
.rest-hero-image .caption p { margin: 0; color: #40584a; font-size: .82rem; }

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-row > div {
  padding: 24px 20px; border-right: 1px solid var(--line);
  text-align: center;
}
.stat-row > div:last-child { border-right: 0; }
.stat-row strong {
  display: block; font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 1.9rem; color: var(--forest); font-weight: 500;
  letter-spacing: -.02em;
}
/* Direct child only, so the <strong><span data-count> counter keeps strong's size */
.stat-row > div > span { color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* Menu / Cuisine tabs */
.cuisine-tabs { background: var(--ivory); padding: clamp(60px, 8vw, 100px) 0; }
section#menu { padding-top: 10px; padding-bottom: 40px; }
.cuisine-tab-list {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 42px;
}
.cuisine-tab-list button {
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--forest); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  transition: all .2s ease; font-family: inherit;
}
.cuisine-tab-list button:hover { border-color: var(--forest); }
.cuisine-tab-list button.active {
  background: var(--forest); color: #fff; border-color: var(--forest);
}
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 60px; }
.menu-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 18px; align-items: baseline;
  padding-bottom: 18px; border-bottom: 1px dashed rgba(31, 107, 72, .2);
}
.menu-item h4 {
  font-family: "Poppins", "Segoe UI", sans-serif; color: var(--forest);
  font-size: 1.08rem; margin: 0 0 4px; font-weight: 500;
}
.menu-item p { margin: 0; color: var(--muted); font-size: .8rem; }
.menu-item .price { color: var(--purple); font-weight: 600; font-size: .95rem; white-space: nowrap; font-family: "Poppins", "Segoe UI", sans-serif; }
.menu-note {
  text-align: center; color: var(--muted); font-size: .74rem; margin-top: 32px;
}

/* Restaurant gallery mosaic */
.rest-mosaic {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px; gap: 12px;
}
.rest-mosaic figure { margin: 0; border-radius: 16px; overflow: hidden; position: relative; }
.rest-mosaic figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.rest-mosaic figure:hover img { transform: scale(1.04); }
.rest-mosaic figure.tall { grid-row: 1 / 3; }
.rest-mosaic figure .overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 20px; color: var(--forest);
  background: linear-gradient(0deg, rgba(241, 250, 244, .88), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.rest-mosaic figure:hover .overlay { opacity: 1; }
.rest-mosaic figure .overlay span { font-size: .82rem; font-weight: 500; }

/* Banquets */
.banquet-hp { background: var(--surface); color: var(--ink); }
.banquet-hp h2 { color: var(--forest); }
.banquet-hp .lead-hp { color: #40584a; }
.banquet-image {
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 1.15; box-shadow: var(--shadow-lg);
  position: relative;
}
.banquet-image img { width: 100%; height: 100%; object-fit: cover; }
.banquet-features { list-style: none; padding: 0; margin: 24px 0 32px; }
.banquet-features li {
  display: grid; grid-template-columns: 26px 1fr;
  gap: 12px; padding: 12px 0; align-items: baseline;
  border-bottom: 1px solid rgba(31, 107, 72, .16);
}
.banquet-features li i { color: var(--gold); font-size: .9rem; }
.banquet-features li span { color: #40584a; font-size: .88rem; }

/* Reservation card */
.rsvp-block {
  background: var(--ivory); border-radius: 22px;
  padding: 40px; box-shadow: var(--shadow);
}
.rsvp-block h3 { margin-bottom: 22px; }
.hour-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
  margin: 22px 0 28px;
}
.hour-grid > div {
  padding: 14px 0; border-bottom: 1px dashed rgba(31, 107, 72, .18);
}
.hour-grid small { display: block; color: var(--purple); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.hour-grid strong { color: var(--forest); font-size: .92rem; font-weight: 500; }

/* ---------- About page — dedicated components ---------- */
.about-hero .media img { object-position: center 40%; }

/* Scoped-down heading/body sizes — the site-wide h1/h2 clamp reads oversized
   on this content-dense page, so tone it down without touching other pages. */
body[data-page="about"] h2 {
  font-size: clamp(1.9rem, 3.2vw, 1.65rem);
  line-height: 1.18;
}
body[data-page="about"] h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}
body[data-page="about"] .lead-hp {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.65;
}
body[data-page="about"] .text-muted-hp {
  font-size: .92rem;
  line-height: 29px;
  text-align: justify;
}

/* Stats ribbon under hero */
.about-stats-ribbon { background: var(--ivory); padding: 44px 0; border-bottom: 1px solid var(--line); }
.stats-ribbon {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; text-align: center;
}
.stats-ribbon > div {
  padding: 8px 22px; border-left: 1px solid rgba(31, 107, 72, .16);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.stats-ribbon > div:first-child { border-left: 0; }
.stats-ribbon strong {
  color: var(--forest); font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1;
}
/* Direct child only — the counters are <strong><span data-count>, and an
   unscoped `.stats-ribbon span` would shrink those to label size too. */
.stats-ribbon > div > span {
  color: #171a18; font-size: 16px; letter-spacing: .04em;
}

/* Story collage */
.about-story { background: var(--ivory); position: relative; }
.story-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 160px 180px;
  gap: 14px;
  padding-right: 20px;
}
.story-collage figure { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.story-collage figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.story-collage figure:hover img { transform: scale(1.05); }
.story-collage .c1 { grid-column: 1 / 2; grid-row: 1 / 3; }
.story-collage .c2 { grid-column: 2 / 3; grid-row: 1 / 2; }
.story-collage .c3 { grid-column: 2 / 3; grid-row: 2 / 4; }
.story-collage .collage-badge {
  position: absolute; left: -8px; bottom: 12%;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(33, 122, 82, 0.35);
  transform: rotate(-8deg);
  border: 5px solid #fff;
}
.story-collage .collage-badge small {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
}
.story-collage .collage-badge strong {
  font-family: "Poppins", "Segoe UI", sans-serif; font-size: 1.7rem;
  font-weight: 500; letter-spacing: -.02em; line-height: 1;
}

/* Offering cards (signature) */
.offering-card {
  background: #fff; border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.offering-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.offering-card > img {
  width: 100%; aspect-ratio: 1.5; object-fit: cover;
  transition: transform .6s ease;
}
.offering-card:hover > img { transform: scale(1.05); }
.offering-card .card-body-hp {
  padding: 30px 28px 30px;
  display: flex; flex-direction: column; flex: 1;
}
/* .offering-card p below also matches this chip (it is a <p>), and its flex:1
   made the chip absorb the card's leftover height — 50px on the card with the
   shorter description vs 30px elsewhere. Keep the chip at its natural size. */
.offering-card .card-body-hp .eyebrow { margin-bottom: 14px; font-size: .74rem; flex: 0 0 auto; }
.offering-card h3 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 14px; }
.offering-card p { color: var(--muted); font-size: .85rem; margin: 0 0 20px; flex: 1; }
.offering-card .text-link { align-self: flex-start; }

/* Promise / quote */
.about-promise {
  background: var(--surface); color: var(--ink);
  padding: 80px 0; position: relative; overflow: hidden;
}
.about-promise::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(33, 122, 82, .14), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(31, 107, 72, .16), transparent 45%);
  pointer-events: none;
}
.promise-inner {
  max-width: 820px; margin: 0 auto; text-align: center;
  position: relative;
}
.promise-inner .quote-mark {
  color: var(--gold); font-size: 3.2rem; line-height: 1;
  opacity: .8; display: block; margin-bottom: 14px;
}
.promise-inner blockquote { margin: 0; }
.promise-inner blockquote p {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1rem);
  line-height: 1.4; margin: 0 0 22px;
  color: var(--forest); letter-spacing: -.01em;
  font-style: italic; font-weight: 400;
}
.promise-inner blockquote footer {
  color: var(--gold); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}

/* Glimpse strip (auto-scroll photo marquee) */
.glimpse-strip {
  display: flex; gap: 12px; padding: 14px;
  background: #fff; overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.glimpse-item {
  flex: 0 0 22%; aspect-ratio: 1.4;
  border-radius: 14px; overflow: hidden;
  transition: transform .3s ease;
}
.glimpse-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.glimpse-item:hover { transform: translateY(-4px); }
.glimpse-item:hover img { transform: scale(1.06); }

/* Responsive */
@media (max-width: 900px) {
  .stats-ribbon { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .stats-ribbon > div:nth-child(3) { border-left: 0; }
  .story-collage { grid-template-rows: 180px 140px 160px; padding-right: 0; }
  .story-collage .collage-badge { width: 88px; height: 88px; left: -4px; }
  .story-collage .collage-badge strong { font-size: 1.35rem; }
  .glimpse-item { flex: 0 0 45%; }
  .promise-inner blockquote p { font-size: 1.35rem; }
}
@media (max-width: 640px) {
  .stats-ribbon { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stats-ribbon > div { padding: 6px 8px; border-left: 0; }
  .story-collage { padding-right: 0; grid-template-rows: 160px 120px 140px; }
  .story-collage .collage-badge { width: 76px; height: 76px; }
  .glimpse-item { flex: 0 0 65%; }
  .about-promise { padding: 60px 0; }
  .promise-inner .quote-mark { font-size: 2.4rem; }
  .promise-inner blockquote p { font-size: 1.2rem; }
}

/* ---------- Story pages ---------- */
.story-grid-hp {
  display: grid; grid-template-columns: .9fr 1.1fr; align-items: start;
  gap: clamp(50px, 8vw, 110px);
}
/* Heading block sits above the image/list row rather than inside the right
   column, so the row starts level instead of leaving a wedge beside the image. */
.location-intro { max-width: 760px; margin: 0 0 clamp(28px, 3vw, 44px); }
.location-intro h2 { margin: 0; }

.image-copy-hp {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(50px, 8vw, 105px); align-items: center;
}
.image-copy-hp.reverse .framed-hp { order: 2; }
.framed-hp { position: relative; }
.framed-hp::before {
  content: ""; position: absolute; top: -18px; left: -18px;
  right: 18px; bottom: 18px; border: 1px solid rgba(31, 107, 72, .18);
  border-radius: 20px; z-index: 0;
}
.framed-hp img {
  position: relative; z-index: 1; width: 100%;
  aspect-ratio: 1.25; border-radius: 18px; object-fit: cover;
  box-shadow: var(--shadow);
}
.feature-lines-hp { list-style: none; padding: 0; margin: 30px 0 0; }
.feature-lines-hp li {
  display: grid; grid-template-columns: .7fr 1.3fr;
  gap: 24px; padding: 20px 0; border-top: 1px solid var(--line);
}
.feature-lines-hp strong { color: var(--forest); font-size: .88rem; font-weight: 600; }
.feature-lines-hp span { color: var(--muted); font-size: .8rem; }

/* ---------- Amenity/facility grid ---------- */
.amenity-detail-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.amenity-detail-item {
  padding: 26px 24px; min-height: 155px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .5);
  transition: background .2s ease;
}
.amenity-detail-item:hover { background: var(--ivory); }
.amenity-detail-item .icon {
  display: inline-flex; width: 42px; height: 42px;
  border-radius: 10px; background: var(--ivory);
  color: var(--forest); align-items: center; justify-content: center;
  margin-bottom: 20px; font-size: 1.1rem;
}
.amenity-detail-item strong { color: var(--forest); font-size: .88rem; display: block; margin-bottom: 6px; }
.amenity-detail-item p { color: var(--muted); font-size: .74rem; margin: 0; }

.facility-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.facility-cards article {
  padding: 28px 24px; border-radius: 16px;
  border: 1px solid var(--line); background: #fff;
  min-height: 240px; transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.facility-cards article:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.facility-cards .icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--ivory); color: var(--forest);
  display: grid; place-items: center; font-size: 1.2rem;
  margin-bottom: 24px;
}
.facility-cards h3 { font-size: 1.1rem; margin-bottom: 12px; }
.facility-cards p { margin: 0; color: var(--muted); font-size: .78rem; }

/* ---------- Gallery ---------- */
.gallery-grid-hp {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px; gap: 12px;
  /* A .wide tile that cannot fit the one cell left at the end of a row skips to
     the next row and strands that cell. Dense lets a later single tile back-fill it. */
  grid-auto-flow: row dense;
}
.gallery-grid-hp figure {
  margin: 0; border-radius: 14px; overflow: hidden;
  position: relative; cursor: zoom-in;
}
.gallery-grid-hp figure.wide { grid-column: span 2; }
.gallery-grid-hp figure.tall { grid-row: span 2; }
.gallery-grid-hp figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.gallery-grid-hp figure:hover img { transform: scale(1.05); }
.gallery-grid-hp figure .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 20px 18px; color: var(--forest);
  background: linear-gradient(0deg, rgba(241, 250, 244, .92), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.gallery-grid-hp figure:hover .caption { opacity: 1; transform: translateY(0); }
.gallery-grid-hp figure .caption strong { font-size: .88rem; display: block; }
.gallery-grid-hp figure .caption span { font-size: .68rem; opacity: .8; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(241, 250, 244, 0.97); display: none;
  align-items: center; justify-content: center;
  padding: 40px 24px;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 12px; }
.lightbox .close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(31, 107, 72, .12); border: 0; color: var(--forest);
  font-size: 1.3rem; cursor: pointer;
}
.lightbox .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(31, 107, 72, .12); border: 0; color: var(--forest);
  font-size: 1.4rem; cursor: pointer;
}
.lightbox .nav.prev { left: 22px; }
.lightbox .nav.next { right: 22px; }

/* ---------- Rooms detail ---------- */
.room-overview {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(60px, 9vw, 120px); align-items: start;
}
.room-facts-hp { border-top: 1px solid var(--line); }
.room-facts-hp > div {
  display: grid; grid-template-columns: .7fr 1.3fr;
  gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.room-facts-hp small {
  color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.room-facts-hp strong { color: var(--forest); font-size: .84rem; font-weight: 500; }

.room-gallery-hp {
  display: grid; grid-template-columns: 1.35fr .65fr;
  grid-template-rows: repeat(2, 290px); gap: 10px;
}
.room-gallery-hp figure { margin: 0; border-radius: 14px; overflow: hidden; position: relative; cursor: zoom-in; }
.room-gallery-hp figure:first-child { grid-row: 1 / 3; }
.room-gallery-hp figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.room-gallery-hp figure:hover img { transform: scale(1.04); }

/* ---------- Washroom gallery (uniform across every room category) ---------- */
.washroom-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-top: 10px;
}
.washroom-grid figure {
  margin: 0; border-radius: 14px; overflow: hidden;
  position: relative; height: 340px; cursor: zoom-in;
}
.washroom-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.washroom-grid figure:hover img { transform: scale(1.04); }

/* Placeholder shown until the real washroom photograph is supplied.
   White ground + dashed rule so it stays legible on ivory sections. */
.photo-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; padding: 18px; text-align: center; cursor: default;
  background: #fff; border: 1.5px dashed rgba(31, 107, 72, .32);
  border-radius: 14px; color: var(--muted);
}
.photo-placeholder i { font-size: 1.6rem; color: var(--purple); opacity: .65; }
.photo-placeholder strong {
  font-size: .78rem; font-weight: 600; color: var(--forest); letter-spacing: -.01em;
}
.photo-placeholder span { font-size: .68rem; letter-spacing: .04em; }

@media (max-width: 767px) {
  .washroom-grid { grid-template-columns: 1fr; }
  .washroom-grid figure { height: 260px; }
}
.rate-card {
  background: var(--ivory); border-radius: 20px;
  padding: 32px; box-shadow: var(--shadow-sm);
}
.rate-card small { color: var(--purple); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.rate-card .rate { font-family: "Poppins", "Segoe UI", sans-serif; font-size: 2.1rem; color: var(--forest); font-weight: 500; margin: 8px 0 6px; }
.rate-card p { color: var(--muted); font-size: .82rem; }

/* ---------- Page CTA ---------- */
.page-cta-hp {
  padding: 50px 0; background: var(--surface); color: var(--ink);
}
.page-cta-hp .inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 50px; align-items: center;
}
.page-cta-hp h2 {
  color: var(--forest);
  margin-bottom: 10px;
  font-size: clamp(1.9rem, 3.2vw, 1.65rem);
  line-height: 1.18;
}
.page-cta-hp p { color: #40584a; max-width: 720px; margin: 0; }

/* ---------- Places (destination) ---------- */
.place-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.place-cards article {
  padding: 30px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .7);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 280px; display: flex; flex-direction: column;
}
.place-cards article:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.place-cards .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--ivory); color: var(--forest);
  display: grid; place-items: center; font-size: 1.2rem;
  margin-bottom: 22px;
}
/* Photo sits where the icon would, at full card width. Cards without a photo
   keep their icon, so both variants start their text at the same height. */
.place-cards .place-photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 12px; margin-bottom: 18px;
}
.place-cards small { color: var(--purple); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.place-cards h3 { font-size: 1.15rem; margin: 8px 0 10px; }
.place-cards p { margin: 0; color: var(--muted); font-size: .78rem; }

/* ---------- Contact ---------- */
.contact-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.contact-cards a {
  /* Content is bottom-aligned, so any min-height above what the content needs
     (~152px incl. padding) becomes dead space above the label. */
  padding: 30px; min-height: 152px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: background .2s ease;
}
.contact-cards a:hover { background: var(--ivory); }
.contact-cards small {
  color: var(--purple); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 30px; font-weight: 600;
}
.contact-cards strong { color: var(--forest); font-size: 1rem; font-weight: 500; }
.contact-cards span { color: var(--muted); font-size: .72rem; margin-top: 6px; }

.map-wrap {
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  height: 420px;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Motion reveal — smoother easing, subtle depth ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.985);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .95s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

/* Per-word heading reveal */
.section-hp h2 .word,
.inner-hero h1 .word,
.hero-hp h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.section-hp h2 .word.visible,
.inner-hero h1 .word.visible,
.hero-hp h1 .word.visible {
  opacity: 1; transform: translate3d(0, 0, 0);
}

/* Card variants — subtle scale-in instead of slide */
.room-card-hp[data-reveal],
.dest-card[data-reveal],
.facility-cards article[data-reveal],
.place-cards article[data-reveal],
.panel-card[data-reveal] {
  transform: translate3d(0, 20px, 0) scale(0.96);
}
.room-card-hp[data-reveal].visible,
.dest-card[data-reveal].visible,
.facility-cards article[data-reveal].visible,
.place-cards article[data-reveal].visible,
.panel-card[data-reveal].visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Image-side reveals — sideways slide for horizontal grids */
.about-collage-hp[data-reveal],
.dining-images-hp[data-reveal],
.framed-hp[data-reveal] {
  transform: translate3d(24px, 0, 0) scale(0.98);
}
.about-collage-hp[data-reveal].visible,
.dining-images-hp[data-reveal].visible,
.framed-hp[data-reveal].visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-primary a { font-size: .76rem; }
  .brand-hp img { height: 46px; max-width: 150px; }
  .booking-strip { grid-template-columns: 1fr 1fr auto; }
  .booking-strip > div:nth-child(3) { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .amenity-detail-grid, .facility-cards { grid-template-columns: repeat(3, 1fr); }
  .place-cards, .gallery-grid-hp { grid-template-columns: repeat(2, 1fr); }
  .rest-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
  .rest-mosaic figure.tall { grid-row: auto; }
}
@media (max-width: 900px) {
  .site-header .nav-primary {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    box-shadow: var(--shadow); padding: 16px 24px;
    flex-direction: column; align-items: stretch; gap: 0;
    display: none;
  }
  .site-header .nav-primary.open { display: flex; }
  .site-header .nav-primary a { padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .site-header .nav-primary a:last-child { border-bottom: 0; }
  .site-header .nav-primary a::after { display: none; }
  .mobile-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .hero-hp { min-height: 82vh; }
  .about-collage-hp { max-width: 620px; margin: 0 auto; aspect-ratio: 1/1.1; }
  .story-grid-hp, .image-copy-hp, .room-overview { grid-template-columns: 1fr; gap: 44px; }
  .image-copy-hp.reverse .framed-hp { order: 0; }
  .dining-images-hp { max-width: 620px; margin: 0 auto; padding-right: 10%; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-row > div:last-child { border-bottom: 0; }
  .menu-grid { grid-template-columns: 1fr; gap: 26px 0; }
  .room-gallery-hp { grid-template-rows: 240px 240px; }
  .contact-cards { grid-template-columns: 1fr; }
  .page-cta-hp .inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .trust-grid { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .trust-grid > div { border-left: 0; padding: 4px 12px; }
  .trust-grid > div:last-child { border-right: 0; }
  .booking-strip { grid-template-columns: 1fr auto; bottom: -56px; }
  .booking-strip > div:not(:first-child):not(.book-cta) { display: none; }
  .amenity-detail-grid, .facility-cards, .place-cards, .gallery-grid-hp, .rest-mosaic { grid-template-columns: 1fr; }
  .gallery-grid-hp figure.wide, .gallery-grid-hp figure.tall { grid-column: auto; grid-row: auto; }
  .rest-mosaic { grid-template-rows: 240px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .enquiry-form-hp { padding: 28px 22px; }
  .room-gallery-hp { grid-template-columns: 1fr; grid-template-rows: 280px 200px 200px; }
  .room-gallery-hp figure:first-child { grid-row: auto; }
  .hero-panel { padding: 24px 22px 26px; }
  .rsvp-block { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none !important; }
  .scroll-progress { display: none; }
}

/* ---------- Mobile hero + quick-enquiry sizing ---------- */
@media (max-width: 640px) {
  .hero-hp .hero-panel { margin-left: clamp(0px, 0vw, 24px); }
  body .hero-panel h1 {
    color: var(--forest);
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.035em;
    margin: 0 0 24px;
    text-shadow: 0 2px 18px rgba(255, 255, 255, .75);
    max-width: none;
    white-space: normal;
  }
  .hero-panel .eyebrow.light {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: .28em;
    margin-bottom: 26px;
    background: rgba(255, 255, 255, .85);
    border-color: rgba(31, 107, 72, .26);
    text-shadow: none;
    padding: 11px;
  }
  .hero-panel p.lead-hp {
    color: #40584a;
    font-size: 15px;
    line-height: 1.6;
    max-width: 540px;
    text-shadow: 0 2px 10px rgba(255, 255, 255, .8);
    margin: 0 0 32px;
  }
  .hero-panel .hero-actions .btn-hp {
    min-height: 50px;
    padding: 11px 20px;
    font-size: 13px;
    letter-spacing: .04em;
    box-shadow: 0 10px 28px rgba(23, 81, 54, .12);
  }
  .hero-hp > .container-hp {
    padding-left: clamp(12px, 0vw, 65px);
    padding-right: clamp(8px, 0vw, 40px);
  }
  .container-hp.w-100 { padding-top: 120px !important; }
  .qe-intro h3 { margin: 0 0 6px; font-size: 18px; }
  .qe-intro .qe-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .container-hp { width: 100%; margin-inline: auto; }
}

/* ---------- Mobile fixes: edge gutters, overflow, legible small text ---------- */
@media (max-width: 640px) {
  /* width:100% above removed the container's side gutter, so copy sat 3px from
     the bezel and Bootstrap's -24px .row.g-5 margins pushed 24px past the
     viewport (which the fixed header then sized itself to). */
  .container-hp { padding-inline: 16px; }
  .container-hp.nav-pill { padding: 8px 12px 8px 18px; }
  /* g-5 is a 48px gutter — far too wide here, and wider than the padding that
     has to absorb it. 1.5rem keeps rows inside the container. */
  .container-hp .row { --bs-gutter-x: 1.5rem; }

  /* Nothing below ~11px on a phone. */
  .qe-form label span,
  .enq-modal-form label span { font-size: .72rem; }
  .room-card-hp .thumb .kicker { font-size: .7rem; }
  .room-card-hp .tag-list li { font-size: .72rem; }
  .amenities-photo .tag { font-size: .72rem; }
  .direct-contact a small { font-size: .72rem; }
  .contact-cards small { font-size: .72rem; }
  /* .story-collage .collage-badge small is more specific, so match it */
  .story-collage .collage-badge small { font-size: .72rem; }
  .rest-hero-image .badge-tag { font-size: .72rem; }
  .hour-grid small { font-size: .72rem; }
  .dest-card .meta { font-size: .72rem; }
  .place-cards article small { font-size: .72rem; }
  .gallery-grid-hp figure .caption span { font-size: .72rem; }
  .room-facts-hp small { font-size: .72rem; }
  .rate-card small { font-size: .72rem; }
  .related-dest-card .rd-tag { font-size: .72rem; }

  /* The reveal's initial state slides this in from 24px right, which hangs past
     the viewport until it scrolls into view. Come from below instead. */
  .framed-hp[data-reveal] { transform: translate3d(0, 24px, 0) scale(0.98); }
  .enquiry-form-hp label { font-size: .72rem; }
  .footer-bottom { font-size: .72rem; }
}

/* ---------- Small phones (<=400px) ---------- */
@media (max-width: 400px) {
  /* The site-wide clamps bottom out at their MIN (h2 = 2.15rem = 34.4px), which
     never scales below ~537px wide — far too large at 320px. Override the
     selectors that actually win: body h2, the about page, and the CTA band. */
  body h1 { font-size: 26px; line-height: 1.2; }
  body .inner-hero-content h1 { font-size: 26px; line-height: 1.2; }
  body h2,
  body[data-page="about"] h2,
  .page-cta-hp h2 { font-size: 21px; line-height: 1.25; }
  /* Component h3 rules outrank `body h3`, so name them explicitly. */
  body h3,
  .room-card-hp .body h3,
  .offering-card h3,
  .related-dest-card h3,
  .rest-hero-image .caption h3,
  .attraction-card h3,
  .facility-cards h3,
  .place-cards h3,
  .enq-modal h3,
  .enq-thanks h3,
  body[data-page="about"] h3,
  .dest-card h3 { font-size: 16.5px; line-height: 1.3; }
  body .hero-panel h1 { font-size: 22px; line-height: 27px; }
  .lead-hp, p.lead-hp, .hero-panel p.lead-hp { font-size: 14.5px; line-height: 1.55; }
  /* Body copy: 16px/24px is heavy at 320px. body[data-page="about"] is more
     specific than .text-muted-hp, so it has to be named too. */
  .text-muted-hp,
  body[data-page="about"] .text-muted-hp { font-size: 14.5px; line-height: 23px; }
  .text-muted-hp + .text-muted-hp,
  .lead-hp + .text-muted-hp { margin-top: 12px; }

  /* Grid items default to min-width:auto, so the date/select inputs' intrinsic
     width pushed the quick-enquiry track to 295px inside a 246px card. */
  .qe-card, .qe-form, .enquiry-form-hp { min-width: 0; }
  .qe-card > *, .qe-form > *, .qe-form label { min-width: 0; }
  .qe-form input, .qe-form select, .qe-form textarea,
  .enquiry-form-hp input, .enquiry-form-hp select, .enquiry-form-hp textarea {
    width: 100%; min-width: 0; max-width: 100%;
  }
  .qe-card { padding: 20px 16px; }

  /* Long email addresses are single unbreakable tokens, so the grid track could
     not shrink below them (314px inside 288px). Let them wrap. */
  .contact-cards a { min-width: 0; padding: 22px 16px; }
  /* 40px between the number and its heading is desktop spacing; too much here. */
  .panel-card .num { margin-bottom: 14px; }
  .contact-cards strong,
  .direct-contact strong,
  .footer-grid a { overflow-wrap: anywhere; }
}

/* ---------- Mobile type overrides ---------- */
@media (max-width: 640px) {
  .stats-ribbon > div > span { color: #171a18; font-size: 12px; letter-spacing: .04em; }
  body[data-page="about"] .lead-hp { font-size: 14px; line-height: 1.65; }
  .promise-inner blockquote p { font-size: 15px; }
  p.lead-hp.mt-3 { color: var(--muted); font-size: 15px; line-height: 25px; }
  .inner-hero-content > p {
    color: #40584a;
    max-width: 680px;
    font-size: 14px;
    line-height: 1.65;
    text-shadow: 0 2px 10px rgba(255, 255, 255, .8);
    margin: 0;
  }
}