/* ===========================================================================
   THE RESERVE by Kolte-Patil — Sinhgad Road
   reserve.css — complete rebuild of the landing page design system.

   Replaces the inherited template stylesheet. Structure:
     01 tokens          06 pricing
     02 reset + type    07 amenities (bento)
     03 primitives      08 gallery + lightbox
     04 header          09 plans / location / tour
     05 hero + stats    10 developer / faq / cta / footer / overlays

   Class names that the existing JS toggles are preserved verbatim:
   .active .is-active .is-visible .open .scrolled .clone .has-multiple
   =========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  /* Brand, taken from the official opportunity document */
  --ink: #1b2a1a;
  --ink-2: #35452f;
  --ink-soft: #5c6a55;
  --green: #213520;
  --green-lift: #335534;
  --green-deep: #16240f;
  --gold: #8a6b28;
  --gold-lift: #b8963f;
  --gold-pale: #e3d3a8;
  --paper: #f6f5f0;
  --paper-2: #efeee6;
  --paper-3: #e6e6da;
  --line: #d9dbcf;
  --white: #fff;

  --shadow-s: 0 1px 2px rgba(27, 42, 26, .06), 0 4px 12px rgba(27, 42, 26, .05);
  --shadow-m: 0 2px 6px rgba(27, 42, 26, .07), 0 14px 34px rgba(27, 42, 26, .09);
  --shadow-l: 0 6px 18px rgba(27, 42, 26, .1), 0 30px 70px rgba(27, 42, 26, .14);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Lato", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 44px);
  --section-y: clamp(58px, 8vw, 118px);
  --radius: 16px;
  --radius-s: 10px;

  --header-h: 92px;
}

/* ------------------------------------------------------- 02 reset + type */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* The off-canvas nav is parked at translateX(100%); clipping here as well as
     on body stops it from widening the scrollable area on tablets/phones. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: .4px;
}

h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 500; letter-spacing: 1.5px; }
h2 { font-size: clamp(28px, 4vw, 46px); }
h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .3px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

em, .accent-italic { font-family: var(--serif); font-style: italic; }

/* --------------------------------------------------- 03 layout primitives */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--green); color: #d8dfd2; }
.section--ink h2, .section--ink h3 { color: var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.section-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 54px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.section-head p { margin-top: 14px; color: var(--ink-soft); }

.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.8; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .6px;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn--primary {
  background: linear-gradient(135deg, var(--green-lift), var(--green) 58%, var(--green-deep));
  color: var(--white);
  box-shadow: var(--shadow-s);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn--gold {
  background: linear-gradient(135deg, var(--gold-lift), var(--gold));
  color: var(--white);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn--ghost { border-color: rgba(33, 53, 32, .34); color: var(--ink); }
.btn--ghost:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.btn--light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .42); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--green); }
.btn--block { width: 100%; }

/* Scroll reveal (progressive enhancement; visible by default without JS) */
[data-reveal] { opacity: 0; transform: translateY(20px); }
.reveal-ready [data-reveal] { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].in, .no-js [data-reveal] { opacity: 1; transform: none; }

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

/* ---------------------------------------------------------------- 04 header */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(246, 245, 240, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background .3s ease;
}
.siteHeader.scrolled { box-shadow: var(--shadow-s); background: rgba(246, 245, 240, .98); }

.siteHeader .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 22px;
}

.brandLock { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.brandLock img { width: auto; }
.brandLock__project { height: 62px; }
.brandLock__rule {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(33, 53, 32, .3), transparent);
}
.brandLock__dev { height: 50px; }

.siteNav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.headerLink {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .4px;
  color: var(--ink-2);
  white-space: nowrap;
  padding: 6px 0;
}
.headerLink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width .3s ease;
}
.headerLink:hover { color: var(--ink); }
.headerLink:hover::after { width: 100%; }

.headerCta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.headerCta .btn { padding: 11px 20px; font-size: 13.5px; }
.headerCta img { width: 18px; height: 18px; filter: brightness(0) invert(1); }

.burgerMenu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.burgerMenu span {
  width: 20px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s ease, opacity .3s ease;
}
.burgerMenu.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burgerMenu.active span:nth-child(2) { opacity: 0; }
.burgerMenu.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------ 05 hero */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--green-deep);
}
.hero__media { position: absolute; inset: 0; }
.bannerSlides, .bannerSlide { position: absolute; inset: 0; }
.bannerSlide { opacity: 0; transition: opacity .9s ease; }
.bannerSlide.is-active { opacity: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 20, 10, .58) 0%, rgba(11, 20, 10, .18) 34%, rgba(11, 20, 10, .82) 100%),
    linear-gradient(90deg, rgba(11, 20, 10, .62) 0%, rgba(11, 20, 10, 0) 62%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 392px;
  align-items: end;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(38px, 6vw, 76px);
}

.hero__copy { color: var(--white); max-width: 660px; }
.hero__copy .eyebrow { color: var(--gold-pale); }
.hero__copy h1 { color: var(--white); }
.hero__sub {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--gold-pale);
  letter-spacing: .4px;
}
.hero__place {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.hero__price {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  padding: 12px 22px;
  border: 1px solid rgba(227, 211, 168, .4);
  border-radius: 999px;
  background: rgba(11, 20, 10, .42);
  backdrop-filter: blur(4px);
}
.hero__price b {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 600;
  color: var(--white);
}
.hero__price span { font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-pale); }

.hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero__chips li {
  list-style: none;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .07);
}

/* Hero enquiry card */
.leadCard {
  background: rgba(246, 245, 240, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-l);
}
.leadCard__title {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.leadCard__note { margin: 6px 0 18px; font-size: 12.5px; color: var(--ink-soft); }

.field { margin-bottom: 12px; }
.field input, .field select, .quoteInput, .quoteSelect, .quotePhoneInput {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 150, 63, .16);
}
.field input::placeholder { color: #97a091; }
.fieldRow { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 16px;
  font-size: 11.8px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.consent input { margin-top: 3px; accent-color: var(--green); }
.consent a { color: var(--gold); font-weight: 600; text-decoration: underline; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* Stat strip */








/* --------------------------------------------------------- 06 overview */
.overview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.overview__body { position: relative; }
.pullQuote {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.4;
  color: var(--ink);
}
.clampText { display: block; }
.readMoreLink {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid rgba(138, 107, 40, .4);
}


.overview__media { position: relative; }
.overview__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-m); }
.overview__badge {
  position: absolute;
  left: -18px;
  bottom: -18px;
  padding: 18px 22px;
  border-radius: var(--radius-s);
  background: var(--white);
  box-shadow: var(--shadow-m);
  text-align: center;
}
.overview__badge b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold);
  line-height: 1;
}
.overview__badge span {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- 07 pricing */
.priceSection { background: var(--paper-2); }
.priceLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.priceTableWrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-s); }
.priceTable { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--white); }
.priceTable thead th {
  padding: 15px 20px;
  background: var(--green);
  color: var(--gold-pale);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: left;
}
.priceTable tbody td {
  padding: 17px 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  vertical-align: middle;
}
.priceTable tbody tr:hover { background: var(--paper); }
.priceTable .cfg {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
}
.priceTable .area { white-space: nowrap; }
.priceTable .rate { font-weight: 600; color: var(--ink); white-space: nowrap; }
.priceTable .eoi { color: var(--gold); font-weight: 600; white-space: nowrap; }
.priceTable td .btn { padding: 9px 18px; font-size: 12.5px; }
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(138, 107, 40, .12);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
}

.eoiCard {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  padding: 28px 26px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--green-lift), var(--green) 60%, var(--green-deep));
  color: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-m);
}
.eoiCard h3 {
  color: var(--white);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
}
.eoiCard ul { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.eoiCard li { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; }
.eoiCard li::before { content: "\2713"; color: var(--gold-pale); font-weight: 700; }

/* ------------------------------------------------------- 08 amenities */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.amenityCard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 168px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--white), var(--paper-2));
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.amenityCard:hover {
  transform: translateY(-4px);
  border-color: rgba(138, 107, 40, .5);
  box-shadow: var(--shadow-m);
}
.amenityIcon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(33, 53, 32, .08);
  border: 1px solid rgba(33, 53, 32, .16);
  transition: background .35s ease, transform .35s ease;
}
.amenityIcon i { font-size: 25px; color: var(--green); transition: color .35s ease; }
.amenityCard:hover .amenityIcon {
  background: linear-gradient(135deg, var(--green-lift), var(--green));
  transform: scale(1.06);
}
.amenityCard:hover .amenityIcon i { color: var(--gold-pale); }
.amenityCard h3 { font-size: 15.5px; color: var(--ink); }
.amenityCard p { font-size: 13px; color: var(--ink-soft); margin: 0; }

.amenityCard--wide { grid-column: span 2; }
.amenityCard--media { padding: 0; border: none; min-height: 230px; }
.amenityCard--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amenityCard--media .amenityCard__label {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(11, 20, 10, .82));
  color: var(--white);
}
.amenityCard--media h3 { color: var(--white); }
.amenityCard--media p { color: rgba(255, 255, 255, .84); }

/* --------------------------------------------------- 09 gallery + plans */
.galleryStrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallerySlide {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
  margin: 0;
}
.gallerySlide:nth-child(1),
.gallerySlide:nth-child(6) { grid-column: span 2; aspect-ratio: 8 / 5; }
.galleryImage { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.gallerySlide:hover .galleryImage { transform: scale(1.05); }
.gallerySlide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(11, 20, 10, .78));
  color: var(--white);
  font-size: 12.5px;
  letter-spacing: .6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.gallerySlide:hover figcaption { opacity: 1; transform: none; }

.galleryLightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 20, 10, .93);
}
.galleryLightbox.active { display: flex; }
.galleryLightboxImage { max-width: min(1100px, 92vw); max-height: 84vh; border-radius: 10px; }
.galleryLightboxClose,
.galleryLightboxNav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  transition: background .25s ease;
}
.galleryLightboxClose:hover,
.galleryLightboxNav:hover { background: rgba(255, 255, 255, .22); }
.galleryLightboxClose { top: 22px; right: 22px; }
.galleryLightboxPrev { left: 22px; top: 50%; transform: translateY(-50%); }
.galleryLightboxNext { right: 22px; top: 50%; transform: translateY(-50%); }
.galleryLightboxCounter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  letter-spacing: 1.4px;
}

.planGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.planCard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-s);
  transition: transform .35s ease, box-shadow .35s ease;
}
.planCard:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.planCard img { width: 100%; border-radius: var(--radius-s); background: var(--paper-2); }
.planCard h3 { margin-top: 14px; font-size: 16px; }
.planCard .btn { margin-top: 14px; }

/* -------------------------------------------------------- 10 location */
.locationLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 3.4vw, 44px);
  align-items: start;
}
.mapFrame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
  background: var(--white);
}
.mapFrame img { width: 100%; height: 100%; object-fit: cover; }
.mapActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.map-dropdown { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--white); margin-bottom: 10px; }
.map-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.map-dropdown-btn:hover { background: var(--paper-2); }
.map-dropdown-btn.active {
  background: linear-gradient(135deg, var(--green-lift), var(--green));
  color: var(--white);
}
.map-arrow { display: inline-flex; font-size: 18px; transition: transform .3s ease; }
.map-arrow.active { transform: rotate(180deg); color: var(--white); }
.map-dropdown-content { display: none; }
.map-dropdown-content.active { display: block; }
.connectivity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.connectivity-item .location { color: var(--ink-2); }
.connectivity-item .time {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------ 11 tour */
.tourBand { position: relative; overflow: hidden; }
.tourFrame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  cursor: pointer;
}
.tourFrame img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.tourPlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 20, 10, .3);
  transition: background .3s ease;
}
.tourFrame:hover .tourPlay { background: rgba(11, 20, 10, .16); }
.tourPlay span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 28px;
  padding-left: 5px;
  transition: transform .3s ease, background .3s ease;
}
.tourFrame:hover .tourPlay span { transform: scale(1.08); background: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------- 12 developer */
.devBand { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.devMark {
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-s);
}
.devMark img { height: 128px; width: auto; }

/* ------------------------------------------------------------- 13 faq */
/* Single centred column: the old two-column split put the heading in a narrow
   left rail, which fought the centred heading used by every other section. */
.faqGrid { max-width: 860px; margin-inline: auto; }
.faqFoot {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 15px;
  color: var(--ink-soft);
}
.faqItem {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faqItem[open] { border-color: rgba(138, 107, 40, .5); box-shadow: var(--shadow-s); }
.faqQuestion {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
}
.faqQuestion::-webkit-details-marker { display: none; }
.faqQuestion h3 { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.faqQuestion::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  transition: transform .25s ease;
}
.faqItem[open] .faqQuestion::after { content: "\2013"; }
.faqAnswer { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.faqAnswer a { color: var(--gold); font-weight: 600; }

/* ------------------------------------------------------------- 14 cta */
.ctaBand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--green-lift), var(--green) 55%, var(--green-deep));
  color: rgba(255, 255, 255, .88);
}
.ctaBand h2 { color: var(--white); }
.ctaLayout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: clamp(28px, 4vw, 60px); align-items: center; }
.ctaBand .leadCard { background: rgba(246, 245, 240, .98); }
.ctaPoints { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ctaPoints li { display: flex; gap: 12px; font-size: 15px; }
.ctaPoints li::before { content: "\2713"; color: var(--gold-pale); font-weight: 700; }
.ctaPhone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--white);
}

/* ---------------------------------------------------------- 15 footer */
.siteFooter { background: var(--green-deep); color: rgba(255, 255, 255, .62); font-size: 13.5px; }
.siteFooter a { color: rgba(255, 255, 255, .82); }
.siteFooter a:hover { color: var(--gold-pale); }
.footerTop {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 190px;
  gap: clamp(26px, 4vw, 56px);
  padding-block: clamp(40px, 5vw, 66px);
}
.footerBrand img { height: 60px; width: auto; margin-bottom: 16px; }
.footerCols h4 {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.footerCols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.footerQr { text-align: center; }
.footerQr img {
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: 10px;
  background: var(--white);
  margin-inline: auto;
}
.footerQr span { display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: 1px; }
.footerLegal {
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .48);
}
.footerLegal p { margin-bottom: 10px; }
.footerBase {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  padding-block: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
}

/* ------------------------------------------------- 16 overlays / mobile */
.quotePopup { position: fixed; inset: 0; z-index: 10000; display: none; }
.quotePopup.active { display: block; }
.quotePopupOverlay { position: absolute; inset: 0; background: rgba(11, 20, 10, .72); backdrop-filter: blur(3px); }
.quotePopupContent {
  position: relative;
  z-index: 2;
  width: min(420px, calc(100% - 32px));
  max-height: 92vh;
  overflow-y: auto;
  margin: 4vh auto 0;
  padding: 26px 24px 24px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-l);
}
.quotePopupClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  font-size: 18px;
  color: var(--ink);
}
.popupLogo { height: 54px; width: auto; margin: 0 auto 12px; }

.mobileBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  display: none;
  background: var(--green);
  box-shadow: 0 -6px 20px rgba(11, 20, 10, .25);
}

.sideBrochure {
  position: fixed;
  right: 0;
  top: 52%;
  z-index: 870;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border: none;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(135deg, var(--gold-lift), var(--gold));
  color: var(--white);
  writing-mode: vertical-rl;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  cursor: pointer;
  box-shadow: var(--shadow-m);
}

/* ------------------------------------------------------- 17 responsive */
@media (max-width: 1080px) {
  :root { --header-h: 78px; }
  .hero .wrap { grid-template-columns: 1fr; align-items: start; }
  .leadCard { max-width: 460px; }
  .priceLayout { grid-template-columns: 1fr; }
  .eoiCard { position: static; }
  .locationLayout { grid-template-columns: 1fr; }
  .faqGrid { grid-template-columns: 1fr; }
  .ctaLayout { grid-template-columns: 1fr; }
  .devBand { grid-template-columns: 1fr; }
  .devMark { max-width: 260px; }
  .footerTop { grid-template-columns: 1fr 1fr; }
  .footerQr { grid-column: span 2; }
}

@media (max-width: 1024px) {
  .siteNav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: calc(var(--header-h) + 24px) 26px 26px;
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-l);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s;
    overflow-y: auto;
  }
  .siteNav.open { transform: none; visibility: visible; }
  .siteNav .headerLink { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
  .burgerMenu { display: flex; }
  .headerCta { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .amenityCard--wide { grid-column: span 2; }
  .galleryStrip { grid-template-columns: repeat(2, 1fr); }
  .gallerySlide:nth-child(1), .gallerySlide:nth-child(6) { grid-column: span 2; }
  .planGrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .overview__grid { grid-template-columns: 1fr; }
  .overview__badge { left: auto; right: 14px; bottom: -14px; padding: 14px 18px; }
  .brandLock__project { height: 52px; }
  .brandLock__dev { height: 42px; }
  .brandLock__rule { height: 34px; }
  .mobileBar { display: flex; }
  body { padding-bottom: 62px; }
  /* The bottom bar already carries Brochure here, and the floating tab was
     overlapping the hero form. */
  .sideBrochure { display: none; }
    .footerTop { grid-template-columns: 1fr; }
  .footerQr { grid-column: auto; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .amenityCard--wide { grid-column: auto; }
  .galleryStrip { grid-template-columns: 1fr; }
  .gallerySlide:nth-child(1), .gallerySlide:nth-child(6) { grid-column: auto; }
  .planGrid { grid-template-columns: 1fr; }
  .fieldRow { grid-template-columns: 104px minmax(0, 1fr); }
  .hero__price { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
  .brandLock__rule, .brandLock__dev { display: none; }
}

/* Collapsed body copy, expanded by the Read More link in reserve.js */
.clampText {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clampText.is-expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ===========================================================================
   18 INNER PAGES — legal, thank-you, 404
   Shared shell with index.html so the site reads as one product.
   =========================================================================== */
.pageHero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 82px);
  background: linear-gradient(135deg, var(--green-lift) 0%, var(--green) 48%, var(--green-deep) 100%);
  color: rgba(255, 255, 255, .82);
  text-align: center;
}
.pageHero::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -160px; bottom: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 150, 63, .16), transparent 70%);
  pointer-events: none;
}
.pageHero .wrap { position: relative; z-index: 1; }
.pageHero h1 { color: var(--white); font-size: clamp(32px, 4.6vw, 54px); }
.pageHero .eyebrow { color: var(--gold-pale); justify-content: center; }
.pageHero .eyebrow::after {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.pageHero .lede { margin-top: 12px; color: rgba(255, 255, 255, .76); }

.crumbs {
  margin-bottom: 16px;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.crumbs a { color: var(--gold-pale); }
.crumbs a:hover { color: var(--white); }
.crumbs span[aria-hidden] { margin-inline: 8px; opacity: .5; }

/* ---- legal body ---- */
.legalBody {
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-s);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.legalBody .legalTitle { display: none; }
.legalBody .legalMeta {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.legalBody h3 {
  margin: 34px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--ink);
}
.legalBody h3:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legalBody p { margin-bottom: 14px; }
.legalBody a { color: var(--gold); font-weight: 600; border-bottom: 1px solid rgba(138, 107, 40, .32); }
.legalBody a:hover { color: var(--green); border-color: var(--green); }
.legalBody strong { color: var(--ink); }
.legalBody ul, .legalBody ol { margin: 0 0 16px; padding-left: 22px; }
.legalBody li { margin-bottom: 8px; }

/* callout blocks carried over from the old legal pages */
.legalBody .disclaimer-strong,
.legalBody .compliance-note,
.legalBody .developer-disclosure,
.legalBody .highlight-box,
.legalBody .contact-numbers,
.legalBody .last-updated {
  margin: 0 0 22px;
  padding: 16px 20px;
  border-radius: var(--radius-s);
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  font-size: 14.5px;
}
.legalBody .disclaimer-strong {
  background: rgba(33, 53, 32, .06);
  border-left-color: var(--green);
}
.legalBody .compliance-note { background: rgba(184, 150, 63, .1); }
.legalBody .last-updated {
  margin-top: 28px;
  margin-bottom: 0;
  background: transparent;
  border-left: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.legalBody .policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.legalBody .policy-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-size: 14px;
}
.legalBody .numbers { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- thank-you / 404 centred card ---- */
.noticePage {
  display: grid;
  place-items: center;
  padding-block: clamp(50px, 8vw, 110px);
}
.noticeCard {
  width: 100%;
  max-width: 640px;
  /* place-items on .noticePage centres the .wrap, not the card inside it */
  margin-inline: auto;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-m);
  text-align: center;
}
.noticeIcon {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-lift), var(--green));
  color: var(--gold-pale);
  font-size: 38px;
}
.noticeCard h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 12px; }
.noticeCard .lede { color: var(--ink-soft); margin-bottom: 26px; }
.noticeActions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.noticeMeta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.noticeMeta a { color: var(--gold); font-weight: 600; }
.errorCode {
  font-family: var(--serif);
  font-size: clamp(74px, 13vw, 128px);
  font-weight: 600;
  line-height: 1;
  color: var(--green);
  letter-spacing: 2px;
}

@media (max-width: 640px) {
  .legalBody .policy-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   19 COMPLIANCE UI — channel-partner label, cookie bar, compliant footer
   =========================================================================== */

/* "Authorized Channel Partner" must sit beside the developer logo */
.brandLock__devWrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.brandLock__cp {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1;
}

.footerCpTag {
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.siteFooter .footerBrand p { font-size: 12.8px; line-height: 1.75; margin-bottom: 10px; }
.siteFooter .footerBrand strong { color: rgba(255, 255, 255, .92); }
.footerNav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footerNav a { position: relative; }
.footerNav a + a::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 1px; height: 11px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .22);
}

/* Cookie bar */
.cookieBar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 9500;
  width: min(920px, calc(100% - 24px));
  transform: translate(-50%, 22px);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-l);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.cookieBar.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cookieBar[hidden] { display: none; }
.cookieBar p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.cookieBar a { color: var(--gold); font-weight: 600; text-decoration: underline; }
.cookieBar__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookieBar__actions .btn { padding: 10px 22px; font-size: 13px; }

@media (max-width: 768px) {
  .cookieBar { flex-direction: column; align-items: stretch; gap: 12px; bottom: 70px; }
  .cookieBar__actions .btn { flex: 1; }
}

/* Contact page form */
.contactForm { max-width: 460px; margin-top: 8px; }

/* ===========================================================================
   20 ALIGNMENT FIXES
   =========================================================================== */

/* Read More became a <button> when the dead href="#" was removed, so it
   inherited button chrome. It is a text control, not a boxed button. */
.readMoreLink {
  padding: 0;
  border: none;
  border-bottom: 1px solid rgba(138, 107, 40, .4);
  border-radius: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
}
.readMoreLink:hover { color: var(--green); border-bottom-color: var(--green); }

/* Icon tiles sit in rows stretched by a taller image tile; bottom-aligning
   their content left a large void above the icon. Centre them instead and
   let only the image tiles bottom-align their caption. */
.amenityCard { justify-content: center; }
.amenityCard--media { justify-content: flex-end; }

/* The map is a wide, short image (942x333). Filling the column height cropped
   the location pin out of frame, so it keeps its natural aspect and the whole
   left column is centred against the taller connectivity list instead. */
.locationLayout { align-items: stretch; }
.locationLayout > div { display: flex; flex-direction: column; justify-content: center; }
.mapFrame img { width: 100%; height: auto; }

/* Tighter vertical rhythm: 118px top + 118px bottom put ~236px of dead space
   between every pair of sections. */
:root { --section-y: clamp(52px, 6.4vw, 92px); }

/* The overview keeps an editorial two-column body, but its heading now sits
   centred above the grid like every other section. */
.overview__grid { align-items: center; }

@media (max-width: 1080px) {
  .locationLayout > div { display: block; }
  .mapFrame img { height: auto; min-height: 0; }
}

/* ===========================================================================
   21 MOTION — hero slideshow, sliders, ken-burns
   =========================================================================== */

/* ---- hero slideshow ---- */
.bannerSlide { opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.bannerSlide.is-active { opacity: 1; pointer-events: auto; }
.bannerSlide img { width: 100%; height: 100%; object-fit: cover; }

/* slow drift on the visible slide so the hero is never dead still */
.bannerSlide.is-active img { animation: kenburns 12s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.07); }
}

.heroNav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(11, 20, 10, .3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background .3s ease, transform .3s ease;
}
.hero:hover .heroNav { opacity: 1; }
.heroNav:hover { background: rgba(255, 255, 255, .9); color: var(--green); }
.heroNav--prev { left: clamp(10px, 2vw, 26px); }
.heroNav--next { right: clamp(10px, 2vw, 26px); }

.heroDots {
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 5vh, 64px);
  z-index: 3;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}
.heroDot {
  width: 26px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.heroDot.is-active { width: 42px; background: var(--gold-pale); }

/* ---- generic scroll-snap slider ---- */
.slider { position: relative; --pv: 3; }
.slider[data-slider-pv="4"] { --pv: 4; }

.slider__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (14px * (var(--pv) - 1))) / var(--pv));
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport > * { scroll-snap-align: start; }

.sliderNav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 23px;
  cursor: pointer;
  box-shadow: var(--shadow-m);
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.sliderNav:hover:not(:disabled) { background: var(--green); color: #fff; border-color: var(--green); }
.sliderNav:disabled { opacity: .32; cursor: default; }
.sliderNav--prev { left: -18px; }
.sliderNav--next { right: -18px; }

.sliderDots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.sliderDot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(33, 53, 32, .22);
  cursor: pointer;
  transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.sliderDot.is-active { width: 26px; border-radius: 4px; background: var(--gold); }

/* gallery + amenity tiles inside a slider need a fixed height to line up */
.slider .gallerySlide { aspect-ratio: 4 / 3; }
.slider .gallerySlide:nth-child(1),
.slider .gallerySlide:nth-child(6) { grid-column: auto; aspect-ratio: 4 / 3; }
.slider .amenityCard { min-height: 210px; }
.slider .amenityCard--media { min-height: 210px; }

@media (max-width: 1024px) {
  .slider { --pv: 2; }
  .sliderNav--prev { left: 4px; }
  .sliderNav--next { right: 4px; }
}
@media (max-width: 620px) {
  .slider { --pv: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bannerSlide.is-active img { animation: none; }
  .slider__viewport { scroll-behavior: auto; }
}

/* ===========================================================================
   22 HIGHLIGHTS + SECTION REDESIGNS
   =========================================================================== */

/* ---- highlights: image left, icon cards right ---- */
.hiGrid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3.4vw, 46px);
  align-items: stretch;
}
.hiMedia { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-m); }
.hiMedia img { width: 100%; height: 100%; object-fit: cover; }
.hiMedia figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(11, 20, 10, .8));
  color: rgba(255, 255, 255, .82);
  font-size: 10.5px;
  line-height: 1.5;
}
.hiList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hiList li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hiList li:hover { transform: translateY(-3px); border-color: rgba(138, 107, 40, .45); box-shadow: var(--shadow-s); }
.hiIcon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; color: var(--gold); font-size: 25px; }

/* ---- dark quick-fact tiles ---- */
.factTiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.factTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 14px 20px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--green-lift), var(--green) 55%, var(--green-deep));
  color: rgba(255, 255, 255, .78);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.factTile:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.factTile__icon { font-size: 34px; color: var(--gold-pale); line-height: 1; }
.factTile h3 { font-size: 13px; font-weight: 700; color: var(--white); letter-spacing: .3px; }
.factTile p { margin: 0; font-size: 13px; line-height: 1.45; }

/* ---- price section ---- */
.priceSection { background: var(--paper); }
.priceTableWrap { border: 1px solid var(--line); }
.priceTable tbody tr { transition: background .25s ease; }
.priceTable tbody tr:nth-child(odd) { background: rgba(33, 53, 32, .022); }
.priceTable tbody tr:hover { background: rgba(184, 150, 63, .09); }
.priceTable .cfg { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.tourBand h2, .tourBand .section-head p { color: var(--white); }
.tourBand .section-head p { color: rgba(255, 255, 255, .74); }
.tourBand .eyebrow { color: var(--gold-pale); }
.tourFrame { max-width: 980px; margin-inline: auto; border: 1px solid rgba(255, 255, 255, .16); }
.tourNote { margin-top: 20px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .66); }

/* ---- FAQ: two columns on desktop ---- */
.faqGrid { max-width: 1100px; }
.faqCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
.faqCols .faqItem { break-inside: avoid; }

/* ---- header nav icons ---- */
.headerLink { display: inline-flex; align-items: center; gap: 7px; }
.headerLink i { font-size: 16px; color: var(--gold); transition: color .25s ease; }
.headerLink:hover i { color: var(--green); }

/* ---- footer ---- */
.siteFooter { background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 70%); }
.footerTop { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footerCols ul li { display: flex; gap: 8px; align-items: flex-start; }
.footerQr img { box-shadow: var(--shadow-m); }
.footerCpTag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(227, 211, 168, .4);
  border-radius: 999px;
}

@media (max-width: 1080px) {
  .factTiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hiGrid { grid-template-columns: 1fr; }
  .hiMedia img { max-height: 340px; }
}
@media (max-width: 768px) {
  .faqCols { grid-template-columns: 1fr; }
  .hiList { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .factTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- amenities: full grid of icon cards (no photos, no slider) ---- */
.amenityGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.amenityGrid .amenityCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-s);
}
.amenityGrid .amenityCard:hover {
  transform: translateY(-4px);
  border-color: rgba(138, 107, 40, .45);
  box-shadow: var(--shadow-m);
}
.amenityGrid .amenityIcon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(184, 150, 63, .18), rgba(33, 53, 32, .08));
  border: 1px solid rgba(138, 107, 40, .22);
}
.amenityGrid .amenityIcon i { font-size: 26px; color: var(--gold); }
.amenityGrid .amenityCard:hover .amenityIcon {
  background: linear-gradient(135deg, var(--green-lift), var(--green));
  transform: none;
}
.amenityGrid .amenityCard:hover .amenityIcon i { color: var(--gold-pale); }
.amenityGrid .amenityCard h3 { font-size: 15.5px; line-height: 1.35; }
.amenityGrid .amenityCard p { font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 1024px) { .amenityGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .amenityGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 460px)  { .amenityGrid { grid-template-columns: 1fr; } }

/* ===========================================================================
   23 PRICE SECTION — single price column, full width, cards on mobile
   =========================================================================== */
.priceLayout { display: block; }

.priceTableWrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-m);
}
.priceTable { width: 100%; min-width: 0; border-collapse: collapse; }

.priceTable thead th {
  padding: 16px 26px;
  background: linear-gradient(135deg, var(--green-lift), var(--green) 60%, var(--green-deep));
  color: var(--gold-pale);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
}
.priceTable thead th:nth-child(2),
.priceTable thead th:nth-child(3) { text-align: center; }
.priceTable thead th:last-child { text-align: right; }

.priceTable tbody td {
  padding: 22px 26px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.priceTable tbody tr:nth-child(odd) { background: rgba(33, 53, 32, .018); }
.priceTable tbody tr:hover { background: rgba(184, 150, 63, .1); }

.priceTable .cfg {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
  white-space: nowrap;
}
.priceTable .area {
  text-align: center;
  font-size: 15.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.priceTable .eoi {
  text-align: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  text-decoration: none;
}
.priceTable .act { text-align: right; }
.priceTable .act .btn { padding: 11px 22px; font-size: 13px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Stacked cards rather than a sideways-scrolling table on small screens */
@media (max-width: 860px) {
  .priceTableWrap { border: none; background: none; box-shadow: none; overflow: visible; }
  .priceTable, .priceTable tbody, .priceTable tr, .priceTable td { display: block; width: 100%; }
  .priceTable thead { display: none; }
  .priceTable tbody tr {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-s);
    overflow: hidden;
  }
  .priceTable tbody tr:nth-child(odd) { background: var(--white); }
  .priceTable tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    text-align: right;
  }
  .priceTable tbody td:first-child {
    border-top: none;
    background: linear-gradient(135deg, var(--green-lift), var(--green));
    color: var(--white);
    display: block;
    text-align: left;
  }
  .priceTable td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--ink-soft);
  }
  .priceTable .area, .priceTable .eoi { text-align: right; }
  .priceTable .eoi { font-size: 23px; }
  .priceTable .act { justify-content: stretch; }
  .priceTable .act .btn { width: 100%; }
}

/* ===========================================================================
   24 FOOTER REBUILD
   The logo PNG has a white background, so brightness(0) invert(1) flattened it
   into a solid white block. It now sits on a light chip at natural colour.
   =========================================================================== */
.footerTop {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
  padding-block: clamp(40px, 5vw, 64px);
}

.footerLogo {
  display: inline-block;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-s);
}
.footerLogo img { height: 52px; width: auto; filter: none; opacity: 1; }

.siteFooter .footerBrand p { font-size: 12.8px; line-height: 1.75; margin-bottom: 12px; }
.footerCpTag { margin-bottom: 14px; }

.footerCols h4 {
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.footerCols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footerCols ul li { display: block; }
.footerCols ul a { font-size: 13.5px; transition: color .25s ease, padding-left .25s ease; }
.footerCols ul a:hover { color: var(--gold-pale); padding-left: 4px; }

.footerContact { align-self: start; }
.footerPhone {
  display: inline-block;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .5px;
  line-height: 1.2;
}
.footerPhone:hover { color: var(--gold-pale); }
.footerHint { margin: 8px 0 16px; font-size: 12.5px; line-height: 1.6; }
.footerActions { display: flex; flex-wrap: wrap; gap: 10px; }
.footerActions .btn { padding: 10px 20px; font-size: 13px; }

.footerQr { text-align: center; }
.footerQr img { width: 128px; height: 128px; padding: 8px; border-radius: 10px; background: var(--white); }
.footerQr span { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .8px; line-height: 1.6; }
.footerQr strong { color: var(--gold-pale); letter-spacing: .4px; }
.footerQr a { display: inline-block; margin-top: 6px; font-size: 11px; }

.footerLegal { padding-block: 20px; }
.footerBase { align-items: center; }

@media (max-width: 1080px) {
  .footerTop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footerQr { grid-column: span 2; justify-self: start; text-align: left; }
  .footerQr img { margin-inline: 0; }
}
@media (max-width: 620px) {
  .footerTop { grid-template-columns: 1fr; gap: 30px; }
  .footerQr { grid-column: auto; }
  .footerActions .btn { flex: 1; }
  .footerBase { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===========================================================================
   25 STICKY FIX + GATED PLANS / MAP
   `overflow-x: hidden` on <html> turns it into a scroll container, which kills
   position:sticky on the header. `clip` clips exactly the same overflow but
   creates no scroll container, so the header sticks again.
   =========================================================================== */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ---- gated floor plans ---- */
.planCard { cursor: pointer; }
.planCard__media {
  position: relative;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--paper-2);
}
.planCard__media img {
  width: 100%;
  filter: blur(7px) saturate(.85);
  transform: scale(1.06);
  transition: filter .4s ease;
}
.planCard__lock,
.mapFrame__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  background: rgba(22, 36, 15, .34);
  color: var(--white);
  transition: background .35s ease;
}
.planCard__lock i,
.mapFrame__lock i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-size: 24px;
}
.planCard__lock b,
.mapFrame__lock b {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.mapFrame__lock small {
  max-width: 280px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.planCard:hover .planCard__lock,
.mapFrame:hover .mapFrame__lock { background: rgba(22, 36, 15, .48); }
.planCard:focus-visible,
.mapFrame:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.planCard h3 { margin-top: 16px; }
.planCard .btn { margin-top: 12px; }

/* ---- gated map ---- */
.mapFrame { position: relative; cursor: pointer; }
.mapFrame img { filter: blur(6px) saturate(.9); transform: scale(1.05); }

/* Stronger scrim so the unlock prompt stays legible over pale plan images */
.planCard__lock,
.mapFrame__lock {
  background: linear-gradient(180deg, rgba(22, 36, 15, .58), rgba(22, 36, 15, .72));
}
.planCard:hover .planCard__lock,
.mapFrame:hover .mapFrame__lock {
  background: linear-gradient(180deg, rgba(22, 36, 15, .48), rgba(22, 36, 15, .62));
}
.planCard__lock b,
.mapFrame__lock b { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* ===========================================================================
   26 POPUP CENTRING
   Previously pinned near the top with `margin: 4vh auto 0`. Now centred in the
   viewport on every device. The card uses `margin: auto` inside a flex box
   rather than `align-items: center`, because that is the pattern that still
   lets you scroll to the top of a card taller than the screen (align-items
   centring clips the overflowing top edge).
   =========================================================================== */
.quotePopup {
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.quotePopup.active { display: flex; }

.quotePopupContent {
  margin: auto;
  max-height: none;
  overflow: visible;
  width: min(420px, 100%);
}

@media (max-width: 480px) {
  .quotePopup { padding: 12px; }
  .quotePopupContent { padding: 24px 18px 20px; }
}

/* Price set in the sans with lining figures: Cormorant uses old-style numerals,
   so "89.99" rendered with mismatched heights and descenders. */
.priceTable .eoi {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .2px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

/* ===========================================================================
   27 IMAGE-ONLY HERO
   The hero is now purely the slideshow: no copy, no form. Height is driven by
   the image rather than by content, and the dots move up now that nothing
   sits below them.
   =========================================================================== */
.hero {
  min-height: 0;
  height: clamp(340px, 62vh, 660px);
  display: block;
  padding: 0;
}
.hero__media, .bannerSlide { position: absolute; inset: 0; }
.hero__scrim {
  background: linear-gradient(180deg, rgba(11, 20, 10, .3) 0%, rgba(11, 20, 10, .05) 42%, rgba(11, 20, 10, .42) 100%);
}
.heroDots { bottom: 18px; }
.heroNav { opacity: 1; }

@media (max-width: 768px) {
  .hero { height: clamp(260px, 42vh, 420px); }
  .heroNav { width: 38px; height: 38px; font-size: 20px; }
}

/* ===========================================================================
   28 HIGHLIGHTS — scaled up
   Now that the hero carries no copy, this is the first content block on the
   page, so it needs presence: taller image, larger cards and type, bigger
   fact tiles.
   =========================================================================== */
#highlights { padding-block: clamp(64px, 7vw, 118px); }

.hiGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 3.6vw, 54px);
}
.hiMedia { min-height: 100%; }
.hiMedia img { min-height: 460px; }
.hiMedia figcaption { font-size: 11.5px; padding: 26px 20px 16px; }

.hiList { gap: 14px; }
.hiList li {
  gap: 16px;
  padding: 20px 22px;
  font-size: 16px;
  line-height: 1.45;
  border-radius: var(--radius);
}
.hiIcon { width: 44px; height: 44px; font-size: 31px; }

.factTiles { gap: 16px; margin-top: clamp(30px, 3.6vw, 52px); }
.factTile { gap: 10px; padding: 30px 16px 26px; }
.factTile__icon { font-size: 42px; }
.factTile h3 { font-size: 14.5px; }
.factTile p { font-size: 14px; }

@media (max-width: 1080px) {
  .hiMedia img { min-height: 0; max-height: 420px; width: 100%; object-fit: cover; }
}

@media (max-width: 768px) {
  .hiList { grid-template-columns: 1fr; gap: 12px; }
  .hiList li { padding: 18px 18px; font-size: 15.5px; }
  .hiIcon { width: 40px; height: 40px; font-size: 28px; }
  .hiMedia img { max-height: 300px; }
  .factTile { padding: 26px 14px 22px; }
  .factTile__icon { font-size: 38px; }
  .factTile h3 { font-size: 14px; }
  .factTile p { font-size: 13.5px; }
}

/* The two-column .hiGrid above is unconditional and sits later in the file, so
   it was overriding the earlier max-width:1080 single-column rule and squeezing
   the image to ~157px on phones. Re-assert the stack here. */
@media (max-width: 1080px) {
  .hiGrid { grid-template-columns: 1fr; }
  .hiMedia img { width: 100%; max-height: 420px; object-fit: cover; }
}
@media (max-width: 768px) {
  .hiMedia img { max-height: 280px; }
}

/* Give the image real height on small screens rather than letting it collapse
   to its natural 5:3 ratio (212px at 354px wide). */
@media (max-width: 1080px) {
  .hiMedia img { height: 400px; max-height: none; }
}
@media (max-width: 768px) {
  .hiMedia img { height: 290px; }
}
@media (max-width: 460px) {
  .hiMedia img { height: 250px; }
}

/* ===========================================================================
   29 ENQUIRY POPUP — promise rail + form + availabilities strip
   =========================================================================== */
.quotePopupContent {
  width: min(760px, 100%);
  padding: clamp(22px, 3vw, 34px);
  background: var(--white);
  border-radius: 14px;
}

.popupTitle {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 14px;
  font-family: var(--sans);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.popupTitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}

.popupBody {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

/* ---- we promise rail ---- */
.popupPromise {
  padding: 0 0 20px;
  border-radius: 12px;
  background: var(--paper-2);
  overflow: hidden;
}
.popupPromise__head {
  display: block;
  padding: 11px 14px;
  background: linear-gradient(135deg, var(--gold-lift), var(--gold));
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 12px;
}
.popupPromise ul { margin: 18px 0 0; padding: 0 14px; list-style: none; display: grid; gap: 18px; }
.popupPromise li { display: flex; align-items: center; gap: 12px; }
.popupPromise i { font-size: 32px; color: var(--gold); line-height: 1; }
.popupPromise span { display: block; line-height: 1.25; }
.popupPromise b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--gold);
}
.popupPromise span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- form column ---- */
.popupForm .field input,
.popupForm .field select { padding: 15px 16px; font-size: 15px; border-radius: 8px; }
.popupForm .consent { font-size: 11.5px; line-height: 1.55; margin: 6px 0 18px; }
.popupSubmit {
  display: block;
  margin: 0 auto;
  min-width: 190px;
  padding: 13px 34px;
  font-size: 15px;
  border-radius: 8px;
}

/* ---- availabilities strip ---- */
.popupAvail {
  position: relative;
  margin-top: 30px;
  padding: 26px 18px 18px;
  border: 1px solid var(--gold-lift);
  border-radius: 12px;
}
.popupAvail__head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--gold-lift), var(--gold));
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.popupAvail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px 18px;
}
.popupAvail li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink);
}
.popupAvail i { color: var(--gold); font-size: 18px; }

@media (max-width: 640px) {
  .popupBody { grid-template-columns: 1fr; }
  .popupPromise { padding-bottom: 16px; }
  .popupPromise ul { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .popupPromise li { flex-direction: column; text-align: center; gap: 6px; }
  .popupPromise i { font-size: 26px; }
  .popupPromise b { font-size: 13px; }
  .popupPromise span { font-size: 11px; }
  .popupAvail__head { font-size: 11px; padding: 7px 14px; white-space: normal; text-align: center; width: max-content; max-width: 92%; }
  .popupAvail ul { flex-direction: column; align-items: flex-start; }
  .popupSubmit { width: 100%; }
}

/* ===========================================================================
   30 ENQUIRY POPUP — dark panel, underline fields
   Replaces the light two-column popup. Brand deep green stands in for the
   reference's navy so it still reads as The Reserve.
   =========================================================================== */
.quotePopupContent {
  width: min(560px, 100%);
  padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(160deg, #16240f 0%, #0f1a0b 60%, #0b1207 100%);
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

/* hairline inner frame, like the reference */
.popupFrame {
  border: 1px solid rgba(255, 255, 255, .16);
  padding: clamp(24px, 4vw, 40px) clamp(20px, 3.4vw, 38px);
}

.quotePopupClose {
  top: -6px;
  right: -6px;
  width: 46px;
  height: 46px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 24px;
}
.quotePopupClose:hover { background: #fff; color: var(--green-deep); }

.popupTitle {
  margin: 0 0 30px;
  padding: 0;
  font-family: var(--sans);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
}
.popupTitle::after { content: none; }

/* ---- underline fields ---- */
.lineField { margin-bottom: 26px; }
.lineField label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .3px;
  color: rgba(255, 255, 255, .88);
}
.lineField input {
  width: 100%;
  padding: 6px 2px 9px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .42);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  transition: border-color .25s ease;
}
.lineField input:focus {
  outline: none;
  border-bottom-color: var(--gold-pale);
  box-shadow: none;
}
.lineField input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #16240f inset;
}

/* ---- looking for ---- */
.lookingFor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 22px;
  padding: 0;
  border: none;
}
.lookingFor legend {
  padding: 0;
  margin-right: 4px;
  float: left;
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
}
.lookingFor label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
}
.lookingFor input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lookingFor input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-pale);
  transform: scale(0);
  transition: transform .18s ease;
}
.lookingFor input[type="radio"]:checked { border-color: var(--gold-pale); }
.lookingFor input[type="radio"]:checked::after { transform: scale(1); }

/* ---- consent on dark ---- */
.consent--dark { margin: 0 0 22px; font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.consent--dark a { color: var(--gold-pale); text-decoration: underline; }
.consent--dark input { accent-color: var(--gold-pale); }

/* ---- primary action ---- */
.popupSubmit {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 0;
  background: #fff;
  color: var(--green-deep);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.popupSubmit:hover { background: var(--gold-pale); color: var(--green-deep); }

@media (max-width: 480px) {
  .popupFrame { padding: 24px 18px 26px; }
  .popupTitle { font-size: 20px; margin-bottom: 24px; }
  .lookingFor { gap: 8px 12px; }
  .quotePopupClose { top: -4px; right: -4px; width: 40px; height: 40px; font-size: 21px; }
}

/* ===========================================================================
   31 CONFIGURATIONS — bordered cards replacing the price table
   =========================================================================== */
.priceSection { background: var(--paper); }

.cfgHead { text-align: center; margin-bottom: clamp(34px, 4vw, 58px); }
.cfgHead h2 {
  font-family: var(--sans);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green-lift);
}
.cfgHead__rule {
  position: relative;
  display: block;
  width: min(360px, 70%);
  height: 1px;
  margin: 18px auto 0;
  background: var(--green-lift);
}
.cfgHead__rule::before,
.cfgHead__rule::after { content: ""; position: absolute; top: 50%; }
/* small diamond centred on the rule */
.cfgHead__rule::before {
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--green-lift);
}
/* dotted tails either side */
.cfgHead__rule::after {
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background-image: radial-gradient(circle, var(--green-lift) 1px, transparent 1px);
  background-size: 6px 1px;
  background-position: 0 0;
  opacity: .0;
}
.cfgHead p { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }

.cfgGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.cfgCard {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3vw, 40px) 26px clamp(26px, 3vw, 34px);
  border: 1px solid rgba(33, 53, 32, .38);
  background: var(--white);
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.cfgCard:hover {
  transform: translateY(-4px);
  border-color: var(--green-lift);
  box-shadow: var(--shadow-m);
}
/* faint concentric motif bleeding in from the left, as in the reference */
.cfgCard::before {
  content: "";
  position: absolute;
  left: -70px;
  top: 50%;
  width: 190px;
  height: 190px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(184, 150, 63, .16) 0 1px,
      transparent 1px 13px);
  pointer-events: none;
}
.cfgCard > * { position: relative; z-index: 1; }

.cfgCard h3 {
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--ink);
  margin-bottom: 14px;
}
.cfgCard__area,
.cfgCard__price {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: var(--ink-2);
}
.cfgCard__area b,
.cfgCard__price b { font-weight: 700; color: var(--ink); }
.cfgCard__price { margin-bottom: 22px; }
.cfgCard__price b { font-size: 17px; }

.cfgCard__btn {
  display: inline-block;
  padding: 13px 30px;
  border: none;
  border-radius: 0;
  background: var(--green-lift);
  color: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.cfgCard__btn:hover { background: var(--green-deep); }

@media (max-width: 480px) {
  .cfgGrid { grid-template-columns: 1fr; }
  .cfgCard__btn { width: 100%; }
}

/* ===========================================================================
   32 OVERVIEW COPY — smaller body type
   The 18px/32px lede read oversized next to the rest of the page.
   =========================================================================== */
.overview__body .lede {
  font-size: 15px;
  line-height: 1.75;
}
.overview__body .pullQuote {
  font-size: clamp(17px, 1.7vw, 21px);
  margin: 20px 0 18px;
  padding-left: 18px;
}
.overview__body .readMoreLink { font-size: 13px; }

@media (max-width: 768px) {
  .overview__body .lede { font-size: 14.5px; line-height: 1.72; }
  .overview__body .pullQuote { font-size: 17px; }
}

/* ===========================================================================
   33 FOOTER — RERA blocks, collapsible disclaimer, link + action rows
   =========================================================================== */
.siteFooter {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  color: rgba(255, 255, 255, .82);
  text-align: center;
  font-size: 14px;
}
.siteFooter a { color: #fff; }
.siteFooter a:hover { color: var(--gold-pale); }

/* quick links */
.footerNavRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  padding-block: 26px 0;
  font-size: 14px;
}
.footerNavRow a { position: relative; padding-bottom: 2px; }
.footerNavRow a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-pale);
  transition: width .25s ease;
}
.footerNavRow a:hover::after { width: 100%; }

/* action buttons */
.footerActionsRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-block: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footerActionsRow .btn { padding: 11px 22px; font-size: 13.5px; }

/* RERA blocks */
.footerRera {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px clamp(30px, 6vw, 90px);
  padding-block: 30px 24px;
}
.reraBlock {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.65;
}
.reraBlock b { display: block; color: #fff; font-weight: 700; }
.reraBlock__seal {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold-pale);
  background: rgba(255, 255, 255, .08);
  color: var(--gold-pale);
  font-size: 22px;
}

/* collapsible disclaimer */
.footerLegal {
  padding-block: 6px 26px;
  max-width: 1000px;
  margin-inline: auto;
}
.footerDisclaimer {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .74);
}
.footerDisclaimer strong { color: #fff; }
.footerMore { display: none; }
.footerMore.is-open { display: inline; }
.footerToggle {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold-pale);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  border-bottom: 1px solid rgba(227, 211, 168, .5);
}
.footerToggle:hover { color: #fff; border-bottom-color: #fff; }

/* copyright row */
.footerBase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  padding-block: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .66);
}
.footerBase > * + *::before {
  content: "|";
  margin-right: 14px;
  color: rgba(255, 255, 255, .28);
}

@media (max-width: 768px) {
  .footerNavRow { gap: 8px 18px; font-size: 13px; }
  .footerActionsRow .btn { flex: 1 1 44%; }
  .reraBlock { font-size: 12.5px; }
  .footerBase { font-size: 11.5px; }
}

/* Developer copy matched to the overview: 18px/32px read oversized. */
.devBand .lede {
  font-size: 15px;
  line-height: 1.75;
}
.devBand .readMoreLink { font-size: 13px; }

@media (max-width: 768px) {
  .devBand .lede { font-size: 14.5px; line-height: 1.72; }
}

/* ===========================================================================
   34 MOBILE ACTION BAR — Enquire / Call Now / WhatsApp
   =========================================================================== */
.mobileBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  display: none;
  background: var(--green-deep);
  border-top: 1px solid rgba(227, 211, 168, .22);
  box-shadow: 0 -6px 20px rgba(11, 20, 10, .35);
}
.mobileBar__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 6px;
  border: none;
  background: none;
  color: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .2s ease;
}
.mobileBar__item + .mobileBar__item { border-left: 1px solid rgba(255, 255, 255, .16); }
.mobileBar__item i { font-size: 17px; color: var(--gold-pale); }
.mobileBar__item:first-child,
.mobileBar__item:first-child i { color: var(--gold-pale); }
.mobileBar__item:active { background: rgba(255, 255, 255, .08); }

@media (max-width: 900px) {
  .mobileBar { display: flex; }
  body { padding-bottom: 54px; }
}

/* Keep icon and label on one line: the longer labels were wrapping and
   pushing the text under the icon. */
.mobileBar__item { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.mobileBar__item span { white-space: nowrap; }

@media (max-width: 400px) {
  .mobileBar__item { gap: 6px; font-size: 12.5px; padding: 12px 4px; }
  .mobileBar__item i { font-size: 15px; }
}
@media (max-width: 340px) {
  .mobileBar__item { font-size: 11.5px; }
}

/* ===========================================================================
   35 CTA FORM — matched to the popup treatment
   =========================================================================== */
.darkForm {
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(11, 20, 10, .28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.darkForm__title {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
}
.darkForm__note {
  margin: 0 0 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, .66);
}
.darkForm .lineField label { color: rgba(255, 255, 255, .88); }
.darkForm .lineField input { color: #fff; border-bottom-color: rgba(255, 255, 255, .42); }
.darkForm .lineField input:focus { border-bottom-color: var(--gold-pale); }
.darkForm .lineField input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #1c2d18 inset;
}

/* ===========================================================================
   36 FOOTER REDESIGN — brand mark, RERA cards, depth
   =========================================================================== */
.siteFooter {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  color: rgba(255, 255, 255, .78);
  text-align: center;
}
/* gold hairline along the top edge */
.siteFooter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-lift), var(--gold-pale), var(--gold-lift), transparent);
}
/* soft glow so the band is not a flat slab */
.siteFooter::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 211, 168, .09), transparent 68%);
  pointer-events: none;
}
.siteFooter > * { position: relative; z-index: 1; }

/* ---- head ---- */
.footerHead { padding-block: clamp(38px, 4.5vw, 60px) 0; }
.footerLogo {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-s);
}
.footerLogo img { height: 54px; width: auto; }
.footerTagline {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--gold-pale);
}

.footerNavRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}
.footerActionsRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* ---- RERA cards ---- */
.footerRera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding-block: clamp(30px, 3.6vw, 44px);
  max-width: 1040px;
}
.reraCard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .04);
  text-align: left;
}
.reraCard__seal {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--gold-pale);
  background: rgba(227, 211, 168, .12);
  color: var(--gold-pale);
  font-size: 22px;
}
.reraCard__label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.reraCard__body b { display: block; color: #fff; font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.reraCard__body p { margin: 0; font-size: 13px; line-height: 1.6; }
.reraCard__body strong { color: var(--gold-pale); }

/* ---- legal ---- */
.footerLegal { max-width: 940px; padding-bottom: 28px; }
.footerDisclaimer { font-size: 12.8px; line-height: 1.75; color: rgba(255, 255, 255, .66); }

/* ---- base bar ---- */
.footerBaseWrap { background: rgba(0, 0, 0, .22); border-top: 1px solid rgba(255, 255, 255, .1); }
.footerBase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding-block: 15px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}
.footerBase > *::before { content: none; }
.footerLegalLinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footerLegalLinks a { position: relative; }
.footerLegalLinks a + a::before {
  content: "";
  position: absolute;
  left: -9px; top: 50%;
  width: 1px; height: 11px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .24);
}

@media (max-width: 768px) {
  .footerBase { justify-content: center; text-align: center; }
  .footerActionsRow .btn { flex: 1 1 46%; }
  .reraCard { padding: 18px; }
}

/* ===========================================================================
   37 HEADER REDESIGN
   Measured problems: at 1200px brand(301) + nav(685) + CTA(236) overflowed the
   container by 22px, and on a 390px phone the brand block alone took 282px.
   Tighter bar, smaller marks, nav icons dropped before the nav itself, and the
   burger now takes over at 1200px instead of 1024.
   =========================================================================== */
:root { --header-h: 76px; }

.siteHeader { border-bottom: 1px solid rgba(33, 53, 32, .12); }
.siteHeader.scrolled { box-shadow: 0 6px 24px rgba(27, 42, 26, .1); }
.siteHeader .wrap { gap: 16px; }

/* ---- brand lock ---- */
.brandLock { gap: 11px; }
.brandLock__project { height: 46px; }
.brandLock__rule { height: 30px; opacity: .55; }
.brandLock img.brandLock__dev { height: 38px; }
.brandLock__devWrap { gap: 2px; }
.brandLock__cp {
  font-size: 7.5px;
  letter-spacing: .9px;
  color: var(--ink-soft);
  opacity: .85;
}

/* ---- nav ---- */
.siteNav { gap: 20px; }
.headerLink { font-size: 13.5px; gap: 6px; }
.headerLink i { font-size: 15px; }

.headerCta { gap: 8px; }
.headerCta .btn { padding: 9px 16px; font-size: 12.5px; letter-spacing: .3px; }

/* Drop the nav icons before dropping the nav: buys ~150px at laptop widths */
@media (max-width: 1340px) {
  .headerLink i { display: none; }
  .siteNav { gap: 22px; }
}

/* Burger takes over early enough that the row never crushes */
@media (max-width: 1200px) {
  .siteNav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: calc(var(--header-h) + 22px) 26px 26px;
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-l);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s;
    overflow-y: auto;
  }
  .siteNav.open { transform: none; visibility: visible; }
  .siteNav .headerLink {
    width: 100%;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15.5px;
  }
  .siteNav .headerLink i { display: inline-flex; }
  .burgerMenu { display: flex; margin-left: auto; }
  .headerCta { margin-left: auto; }
  .headerCta .btn--ghost { display: none; }   /* keep only WhatsApp beside the burger */
}

/* ---- phones ---- */
@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .brandLock__project { height: 38px; }
  /* the developer mark + partner label crowd a 390px bar; the footer states
     the relationship in full, so the project mark alone leads here */
  .brandLock__rule,
  .brandLock__devWrap { display: none; }
  .headerCta { display: none; }
  .burgerMenu { width: 40px; height: 40px; }
}

/* The Reserve logo PNG carries a white background, so on the cream bar it read
   as a pale box. A white header lets it sit flush and gives the bar a crisper
   separation from the ivory page. */
.siteHeader { background: rgba(255, 255, 255, .94); }
.siteHeader.scrolled { background: rgba(255, 255, 255, .99); }

/* the partner label belongs to the developer mark, not the whole lockup */
.brandLock__cp { max-width: 150px; text-align: center; line-height: 1.2; }

@media (max-width: 1200px) {
  .siteNav { background: #fff; }
}

/* backdrop-filter on .siteHeader established a containing block for
   fixed-position descendants, so the off-canvas nav resolved inset:0 against
   the 76px header instead of the viewport and was clipped to a sliver.
   The bar is 94% opaque white now, so the blur bought nothing. */
.siteHeader {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 1200px) {
  .siteNav { height: 100dvh; max-height: 100dvh; }
}

/* ===========================================================================
   38 LOCATION — map matches the connectivity column height
   Filling the height was avoided earlier because it cropped the map pin out of
   frame; the map is blurred behind the unlock overlay now, so cover-cropping
   costs nothing and the two columns line up.
   =========================================================================== */
.locationLayout { align-items: stretch; }
.locationLayout > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.mapFrame {
  flex: 1 1 auto;
  min-height: 320px;
  display: flex;
}
.mapFrame img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .locationLayout > div { display: block; }
  .mapFrame { display: block; min-height: 0; }
  .mapFrame img { height: 260px; min-height: 0; }
}

/* ===========================================================================
   39 HIGHLIGHTS — full-width image
   It already filled its column exactly (460px against a 460px card stack), so
   "full size" means giving it the whole section width, with the highlight
   cards laid out beneath it.
   =========================================================================== */
.hiGrid {
  display: block;
}
.hiMedia {
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.hiMedia img {
  width: 100%;
  height: clamp(320px, 42vw, 560px);
  min-height: 0;
  max-height: none;
  object-fit: cover;
}
.hiMedia figcaption { font-size: 11.5px; padding: 30px 22px 16px; }

.hiList {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1080px) {
  .hiList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hiMedia img { height: clamp(280px, 40vw, 420px); }
}
@media (max-width: 620px) {
  .hiList { grid-template-columns: 1fr; }
  .hiMedia img { height: 250px; }
}

/* ===========================================================================
   40 HIGHLIGHTS — back to image-left / cards-right, on a 1600px canvas
   Section 39 made the image full width; this restores the two-column layout
   and widens only this section's container.
   =========================================================================== */
#highlights .wrap { max-width: 1600px; }

.hiGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 2.8vw, 48px);
  align-items: stretch;
}

.hiMedia {
  margin: 0;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-m);
}
.hiMedia img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-height: none;
  object-fit: cover;
}

.hiList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: stretch;
}
.hiList li {
  padding: 22px 24px;
  font-size: 16.5px;
  border-radius: var(--radius);
}
.hiIcon { width: 46px; height: 46px; font-size: 32px; }

.factTiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1200px) {
  .hiGrid { grid-template-columns: 1fr; }
  .hiMedia img { min-height: 0; height: 420px; }
  .hiList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hiList { grid-template-columns: 1fr; gap: 12px; }
  .hiList li { padding: 18px; font-size: 15.5px; }
  .hiMedia img { height: 290px; }
}
@media (max-width: 560px) {
  .factTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hiMedia img { height: 250px; }
}

/* ===========================================================================
   41 BANNER — designed image stage
   No copy sits over the banner any more, so the treatment carries it: a taller
   stage, a soft vignette, a gold edge, refined controls and progress-bar dots.
   =========================================================================== */
.hero {
  position: relative;
  height: clamp(400px, 72vh, 760px);
  background: var(--green-deep);
}

/* vignette: keeps the render bright in the middle, grounded at the edges */
.hero__scrim {
  background:
    radial-gradient(120% 85% at 50% 45%, transparent 40%, rgba(11, 20, 10, .38) 100%),
    linear-gradient(180deg, rgba(11, 20, 10, .28) 0%, transparent 26%, transparent 70%, rgba(11, 20, 10, .5) 100%);
}

/* gold hairline where the banner meets the page */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold-lift), var(--gold-pale), var(--gold-lift), transparent);
}

/* controls */
.heroNav {
  width: 52px;
  height: 52px;
  border-color: rgba(255, 255, 255, .34);
  background: rgba(11, 20, 10, .26);
  opacity: 0;
  transition: opacity .3s ease, background .3s ease, color .3s ease, transform .3s ease;
}
.hero:hover .heroNav { opacity: 1; }
.heroNav:hover { background: var(--gold-pale); border-color: transparent; color: var(--green-deep); }
.heroNav--prev { left: clamp(12px, 2.4vw, 34px); }
.heroNav--next { right: clamp(12px, 2.4vw, 34px); }

/* dots as a progress rail */
.heroDots {
  bottom: clamp(20px, 3vh, 34px);
  gap: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(11, 20, 10, .34);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.heroDot {
  width: 34px;
  height: 3px;
  margin: 0 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .34);
  transition: background .35s ease, width .35s ease;
}
.heroDot.is-active { width: 54px; background: var(--gold-pale); }

@media (max-width: 900px) {
  .heroNav { opacity: 1; width: 40px; height: 40px; font-size: 20px; }
  .heroDot { width: 24px; }
  .heroDot.is-active { width: 38px; }
}
@media (max-width: 620px) {
  .hero { height: clamp(280px, 46vh, 420px); }
  .heroDots { bottom: 14px; padding: 6px 10px; }
}

/* Banner reads small on desktop: taller stage on wide screens */
.hero { height: clamp(420px, 82vh, 940px); }

@media (min-width: 1200px) {
  .hero { height: clamp(620px, 84vh, 940px); min-height: 620px; }
}
@media (min-width: 1600px) {
  .hero { min-height: 700px; }
}
@media (max-width: 620px) {
  .hero { height: clamp(280px, 46vh, 420px); }
}

/* ===========================================================================
   42 VIRTUAL TOUR — restore the dark band
   The section's white heading had no background behind it: an earlier
   dead-rule cleanup removed `.priceTable .cfg small` with a lazy regex that
   ran on to the next `\n}\n` and took the `.tourBand { background }` block
   with it, leaving white text on the ivory page.
   =========================================================================== */
.tourBand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--green-lift) 0%, var(--green) 55%, var(--green-deep) 100%);
  color: rgba(255, 255, 255, .84);
}
.tourBand::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -220px;
  bottom: -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 211, 168, .12), transparent 70%);
  pointer-events: none;
}
.tourBand > * { position: relative; z-index: 1; }
.tourBand h2 { color: var(--white); }
.tourBand .section-head p { color: rgba(255, 255, 255, .74); }
.tourBand .eyebrow { color: var(--gold-pale); }

/* The ken-burns zoom was magnifying an already-upscaled source: at 1920 the
   1.07 scale pushed the rendered width to 1984px against a 1335px file. A
   gentler drift keeps the motion without amplifying the softness. */
@keyframes kenburns {
  from { transform: scale(1.001); }
  to   { transform: scale(1.025); }
}

/* Header carries the project mark alone now; the developer lockup rules are
   dead but harmless. Give the single mark a touch more presence. */
.brandLock { gap: 0; }
.brandLock__project { height: 52px; }

@media (max-width: 620px) {
  .brandLock__project { height: 42px; }
}

/* ===========================================================================
   43. LARGER BRAND MARK
   The header carries one logo now, so it can afford more presence. The bar
   grows with it to keep the same breathing room above and below the mark.
   --header-h drives the bar height, the scroll-anchor offset and the drawer
   padding, so raising the token is enough. The phone value has to be restated
   here: the max-width:620px block that sets it sits earlier in the file, and
   an unconditional rule placed after a media query wins on every viewport.
   =========================================================================== */
:root { --header-h: 92px; }
.brandLock__project { height: 66px; }

@media (max-width: 620px) {
  :root { --header-h: 74px; }
  .brandLock__project { height: 54px; }
}