:root {
  --green: #186b3f;          
  --green-dark: #135733;     
  --green-darker: #0d3f25;
  --green-mid: #238a54;  
  --green-soft: #eef7f2;
  --green-line: #d6e8dd;
  --blue: #2f85db;
  --black: #000000;
  --ink: #2c4437;
  --muted: #5e7a6a;
  --line: #e4ebe7;
  --bg: #ffffff;
  --bg-soft: #f5faf7;
  --gray-200: #e9ecea;
  --page-bg: #e7ebe9; /* light gray-green page canvas behind the white cards */
  --shadow: 0 8px 24px rgba(16, 74, 47, 0.08);
  --shadow-sm: 0 4px 14px rgba(16, 74, 47, 0.07);
  --shadow-md: 0 8px 24px rgba(16, 74, 47, 0.1);
  --shadow-lg: 0 16px 40px rgba(16, 74, 47, 0.14);
  --radius: 10px;
  --radius-sm: 3px;
  --container: 1180px;
  --panel-w: 340px; /* width of the fixed right panel */
  --font: "Poppins", system-ui, "Segoe UI", sans-serif;

  /* Animated gradient button utility (.effetGradient) */
 --colorPrimary: #186b3f; 
 --colorSecondary: #268f57; 
 --colorBtn: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.65;
  font-size: 15px;
  overflow-x: hidden;
  padding-right: var(--panel-w); /* reserve space for the fixed right panel */
}
/* Standalone pages (privacy policy, disclaimer) have no fixed side panel */
body.page-simple {
  padding-right: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons (flat, no glow) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}
.btn svg {
  width: 18px;
  height: 18px;
}
.btn--primary {
  background: var(--green);
  color: #fff;
}
.btn--primary:hover {
  background: var(--green-dark);
}
.btn--outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn--outline:hover {
  background: var(--green);
  color: #fff;
}
/* Download Brochure (Overview) — flowing gradient instead of flat green on hover */
.overview__cta .btn--outline:hover {
  background-image: linear-gradient(
    270deg,
    var(--green-darker),
    var(--colorPrimary),
    var(--colorSecondary),
    var(--colorPrimary),
    var(--green-darker)
  );
  background-size: 400% 400%;
  animation: Gradient 3s linear infinite;
  border-color: transparent;
  color: #fff;
}
.btn--light {
  background: #fff;
  color: var(--green);
}
.btn--light:hover {
  background: var(--green-soft);
}
.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}
.btn--block {
  width: 100%;
}

/* ---------- Section blocks (white cards on gray canvas) ---------- */
.block {
  padding: 14px 20px 14px 0;
}
.block > .container {
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 44px 40px;
}
.block__title {
  font-size: 35px;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 22px;
  line-height: 1.2;
}
.block > .container > p {
  color: var(--ink);
  margin-bottom: 16px;
  text-align: justify;
}
/* Section title with a CTA pushed to the right of the same row */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.section-head .block__title {
  margin-bottom: 0;
}

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(16, 74, 47, 0.07);
}
.header.is-scrolled {
  box-shadow: 0 4px 16px rgba(16, 74, 47, 0.14);
}
.header__inner {
  display: flex;
  align-items: stretch;
  height: 64px;
}
.header__inner--legal {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.legal-nav__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.legal-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
}
.legal-nav__back svg {
  width: 17px;
  height: 17px;
}
.legal-nav__back:hover {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .legal-nav__title {
    font-size: 15px;
  }
  .legal-nav__back {
    font-size: 13px;
  }
  .header__inner--legal {
    padding: 0 14px;
  }
}

.brand {
  display: flex;
  align-items: center;
  padding: 0;
  border-right: 1px solid var(--line);
}
.brand img {
  height: 50px;
  width: 100px;
  padding: 0 10px;
}

.nav-home {
  width: 70px;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.nav-home svg {
  width: 20px;
  height: 20px;
}
.nav-home:hover {
  background: var(--gray-200);
}
.nav-home.is-active {
  background: var(--green);
  color: #fff;
}

.nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.nav__link {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row; /* icon + text in the SAME row */
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-left: 1px solid var(--line);
  border-bottom: 3px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  text-align: center;
  white-space: nowrap;
}
.nav__link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.nav__link svg {
  width: 18px;
  height: 18px;
  color: var(--ink);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.nav__link:hover {
  background: var(--gray-200);
}
.nav__link.is-active {
  background: var(--green);
  color: #fff;
  border-bottom-color: var(--green);
}
.nav__link.is-active svg {
  color: #fff;
}
.nav__link.is-active:hover {
  background: var(--green-dark);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 20px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 25px;
  height: 3px;
  border-radius: 3px;
  background: var(--green-dark);
  transition: 0.3s ease;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.hero__slides {
  position: absolute;
  inset: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(9, 48, 29, 0.3) 0%,
    rgba(9, 48, 29, 0.05) 45%,
    rgba(9, 48, 29, 0.3) 100%
  );
}

/* Left info card */
.hero-card {
  position: relative;
  z-index: 3;
  width: 360px;
  max-width: 92%;
  margin: 10px 0 24px 24px;
  align-self: center;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-card__banner {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 11px 14px;
  animation: Bounce 1.8s ease-in-out infinite;
}
.hero-card__title {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
  margin: 16px 20px 4px;
  line-height: 1.15;
}
.hero-card__loc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14.5px;
  margin-bottom: 14px;
}
.hero-card__loc svg {
  width: 16px;
  height: 16px;
  color: var(--green);
}
.hero-card__facts {
  background: var(--bg-soft);
  margin: 0 20px 14px;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  display: grid;
  gap: 5px;
}
.hero-card__facts li {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hero-card__facts li::before {
  content: "\2013\00a0";
  color: var(--muted);
}
.hero-card__highlight {
  background-image: linear-gradient(
    270deg,
    var(--green-darker),
    var(--colorPrimary),
    var(--colorSecondary),
    var(--colorPrimary),
    var(--green-darker)
  );
  background-size: 400% 400%;
  animation: Gradient 3s linear infinite;
  color: #fff;
  margin: 0 20px 14px;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  transform: scale(1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.hero-card__highlight:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-md);
}
/* Inner panel: dashed white border framing the text, inset within the flowing gradient */
.hero-card__highlight-inner {
  border: 1.5px dashed #fff;
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 12px 14px;
}
.hero-card__highlight p {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 3px;
  /* White glow + a soft dark drop: keeps the copy legible as the animated
     gradient sweeps its light green stop under the text. */
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(6, 34, 20, 0.55);
}
.hero-card__rera {
  font-size: 12px !important;
  color: #eaf7f0;
  margin-top: 6px !important;
}
.hero-card__price-label {
  text-align: center;
  color: var(--green);
  font-weight: 600;
  font-size: 14.5px;
}
.hero-card__price {
  text-align: center;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 14px;
  animation: PdfJump 1.8s ease-in-out infinite;
}
.hero-card__price strong {
  font-size: 27px;
  color: var(--ink);
  font-weight: 700;
}
.hero-card .btn {
  margin: 0 20px 22px;
  width: calc(100% - 40px);
}

.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  transition: background 0.2s ease;
}
.hero__nav:hover {
  background: rgba(255, 255, 255, 0.5);
}
.hero__nav--next {
  right: 20px;
}

/* ============================================================
   Fixed right panel (full height, stays while page scrolls)
   ============================================================ */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--panel-w);
  height: 100vh;
  z-index: 95;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -6px 0 22px rgba(16, 74, 47, 0.07);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.side-panel__actions {
  display: flex;
  flex-direction: column;
}
.side-panel__row {
  display: flex;
}
.side-panel__row a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #0d3e28;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 14px;
}
.side-panel__row a:hover {
  background: #1d2c24;
}
.side-panel__row a + a {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.side-panel__wa {
  background: #25d366 !important;
}
.side-panel__wa:hover {
  background: #1da851 !important;
}
.side-panel__wa svg {
  width: 17px;
  height: 17px;
}
.side-panel__cb {
  display: block;
  text-align: center;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
}
.side-panel__cb:hover {
  background: var(--green-dark);
}

.side-panel__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  padding: 28px 26px;
}
.side-panel__form h3 {
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.side-panel__form input {
  width: 100%;
  padding: 11px 2px;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
.side-panel__form input:focus {
  outline: none;
  border-bottom-color: var(--green);
}
.side-panel__consent {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}

/* ---------- Panel foot: brochure CTA + docked chat launcher ----------
   Sticky so it stays put when the panel itself has to scroll. Its height
   (13 + 64 + 13 = 90px) is what the desktop .chatbot offset is measured
   against — change the slot size and change .chatbot's bottom with it. */
.side-panel__foot {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: #fff;
  border-top: 1px solid var(--line);
}
/* Recessed plate: green at the top edge washing through white into grey at the
   foot, with inset shadows doing the carving. */
.side-panel__brochure {
  flex: 0.8;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 5px;
  /* Any radius >= half the height clamps to a full pill, so this one number
     stays correct even if the 56px height changes later. */
  border-radius: 999px;
  color: var(--green-dark);
  background: linear-gradient(
    165deg,
    #bcdcca 0%,
    #ffffff 46%,
    #f2f4f3 68%,
    #ccd4d0 100%
  );
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 9px 14px -8px rgba(20, 92, 57, 0.5),
    inset 0 -8px 12px -6px rgba(96, 110, 103, 0.45),
    inset 0 0 0 1px rgba(20, 92, 57, 0.16);
  transition:
    box-shadow 0.2s ease,
    color 0.2s ease;
}
.side-panel__brochure:hover {
  color: var(--green);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 13px 18px -8px rgba(20, 92, 57, 0.62),
    inset 0 -10px 14px -6px rgba(96, 110, 103, 0.5),
    inset 0 0 0 1px rgba(20, 92, 57, 0.28);
}
/* Two lines stacked to the exact height of the icon beside them (2 x 17px) */
.side-panel__brochure-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.side-panel__brochure-text strong,
.side-panel__brochure-text em {
  display: block;
  font-style: normal;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-panel__brochure-text strong {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.side-panel__brochure-text em {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.09em;
  opacity: 0.75;
}
.side-panel__pdf {
  width: 34px;
  height: 34px;
  flex: none;
  animation: PdfJump 1.6s ease-in-out infinite;
}
/* Reserves the footprint the fixed launcher sits over, so the button never
   slides under it. */
.side-panel__chat-slot {
  width: 64px;
  height: 64px;
  flex: none;
}
@keyframes PdfJump {
  0%,
  55%,
  100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-7px) scale(1.07);
  }
  38% {
    transform: translateY(-2px) scale(1);
  }
}

.phone-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.phone-field__code {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 8px 11px 2px;
  cursor: pointer;
}
.phone-field__flag {
  font-size: 17px;
  line-height: 1;
}
.phone-field__dial {
  white-space: nowrap;
}
.phone-field__chev {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.phone-field__code[aria-expanded="true"] .phone-field__chev {
  transform: rotate(180deg);
}
.phone-field input {
  border-bottom: none !important;
  padding-left: 8px;
}
.phone-field:focus-within {
  border-bottom-color: var(--green);
}

/* Country dropdown popover */
.country-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(250px, 100%);
  max-width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 60;
  overflow: hidden;
}
.country-dropdown.is-open {
  display: flex;
  flex-direction: column;
}
.country-dropdown__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.country-dropdown__search svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.country-dropdown__search input {
  width: 100%;
  border: none !important;
  padding: 2px 0 !important;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
}
.country-dropdown__search input:focus {
  outline: none;
}
.country-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 240px;
  overflow-y: auto;
}
.country-dropdown__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.country-dropdown__list li:hover,
.country-dropdown__list li.is-active {
  background: var(--bg-soft);
}
.country-dropdown__list li .flag {
  font-size: 16px;
  flex-shrink: 0;
}
.country-dropdown__list li .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-dropdown__list li .dial {
  color: var(--muted);
  flex-shrink: 0;
}
.country-dropdown__empty {
  padding: 16px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

/* ============================================================
   Overview
   ============================================================ */
.overview__more {
  display: none;
}
.overview__more.is-open {
  display: block;
}
.link-more {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--green);
  font-family: var(--font);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: underline;
  padding: 0;
}
.overview__cta {
  margin-top: 26px;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 34px;
  align-items: start;
}
.pricing__table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pricing__head,
.pricing__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.3fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}
.pricing__head {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
.pricing__row {
  border-top: 1px solid var(--line);
}
.pricing__row.is-alt {
  background: var(--gray-200);
}
.pricing__row strong {
  color: var(--ink);
  font-weight: 600;
}
.pricing__row span[data-label="Price"] {
  color: var(--green-dark);
}

/* Cost sheet card */
.cost-sheet {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  cursor: pointer;
}
.cost-sheet__media {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.cost-sheet__media img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
/* Green scrim sweeps up from the bottom on hover */
.cost-sheet__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 48, 29, 0.88),
    rgba(13, 68, 41, 0.55)
  );
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
}
.cost-sheet:hover .cost-sheet__media::after {
  opacity: 1;
  transform: translateY(0);
}
.cost-sheet:hover .cost-sheet__media img {
  transform: scale(1.05);
}
.cost-sheet__bar {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  padding: 14px;
}

/* ============================================================
   360 Tour band
   ============================================================ */
.tour360 {
  background: var(--green-dark);
  color: #fff;
  padding: 42px 0;
}
.tour360__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.tour360__media {
  width: 300px;
  height: 170px;
  border-radius: var(--radius);
  background-image: url("assets/hero-1.webp");
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}
.tour360__badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  background: rgba(9, 48, 29, 0.45);
}
.tour360__text h2 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 6px;
}
.tour360__text p {
  color: #d2e8dc;
  margin-bottom: 18px;
}

/* ============================================================
   Master Plan
   ============================================================ */
.masterplan__frame {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 450 / 288; /* matches masterplan.webp — no crop, no letterbox */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.masterplan__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Green scrim sweeps up from the bottom on hover — plan reads clean at rest */
.masterplan__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(9, 48, 29, 0.88),
    rgba(13, 68, 41, 0.55)
  );
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
}
.masterplan__frame:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.masterplan__label {
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Solid enough to stay legible over the light-toned plan */
  background: rgba(13, 68, 41, 0.88);
  transition: background 0.2s ease;
}
.masterplan__frame:hover .masterplan__label {
  background-image: linear-gradient(
    270deg,
    var(--green-darker),
    var(--colorPrimary),
    var(--colorSecondary),
    var(--colorPrimary),
    var(--green-darker)
  );
  background-size: 400% 400%;
  animation: Gradient 3s linear infinite;
  border-color: transparent;
}

/* ============================================================
   Floor Plans
   ============================================================ */
.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.plan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.plan-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.plan-card__img {
  position: relative;
  height: 230px;
  overflow: hidden;
  background-color: #fff;
}
.plan-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* technical drawing — never crop it */
  /* Teaser: plans stay blurred until the visitor registers. The slight
     scale-up pushes the blur's soft edges outside the visible box. */
  filter: blur(5px);
  transform: scale(1.06);
  transition: transform 0.5s ease;
}
/* Green scrim fades in on hover */
.plan-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(5, 34, 20, 0.45), rgba(3, 26, 15, 0.65));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.plan-card:hover .plan-card__img::after {
  opacity: 1;
}
.plan-card:hover .plan-card__img img {
  transform: scale(1.12);
}
/* Free preview — shown sharp, so no blur and no edge-hiding scale */
.plan-card.is-unlocked .plan-card__img img {
  filter: none;
  transform: scale(1);
}
.plan-card.is-unlocked:hover .plan-card__img img {
  transform: scale(1.06);
}
.plan-card__bar {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-weight: 500;
  padding: 12px;
}

/* ============================================================
   Amenities
   ============================================================ */
.amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 30px 16px;
  background: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.amenity:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.amenity__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.amenity__icon img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 10; /* landscape — tiles fill the row width */
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery__item:hover img {
  transform: scale(1.06);
}
.gallery__item {
  cursor: pointer;
}
/* Expand cue on hover — signals the tile opens a lightbox */
.gallery__item::after {
  content: "\2922";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(9, 48, 29, 0.78);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 19px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}
.gallery__item:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(9, 48, 29, 0.85), transparent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
}

/* ============================================================
   FAQ Chatbot
   Sits below the modal (200) and lightbox (300), above the
   sticky contact rail (90) and the side panel (95).
   ============================================================ */
.chatbot {
  position: fixed;
  z-index: 150;
  /* Docked into .side-panel__chat-slot at the foot of the fixed right panel:
     18px matches the panel's side padding, 13px centres the 64px launcher in
     the 90px-tall foot. Both media queries below undock it. */
  bottom: 13px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* ---------- Launcher ---------- */
.chatbot__launcher {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 20%;
  border: none;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(9, 48, 29, 0.35);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.chatbot__launcher:hover {
  transform: scale(1.07);
  background: var(--green-dark);
}
.chatbot__icon {
  width: 29px;
  height: 29px;
}
.chatbot__icon--x {
  display: none;
}
.chatbot.is-open .chatbot__icon--x {
  display: block;
}

/* ---------- Divya's face (launcher + panel header) ----------
   Two stacked frames of the same shot; the eyes-closed one is transparent
   and flashes in on a timer, which reads as a blink. */
.chatbot__face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  overflow: hidden;
  background: #fff;
}
/* Fills the launcher button, so the pill reads as a photo of a real agent.
   Absolute (not inset:0 on the button) so the badge and pulse ring, which
   sit outside the circle, are not clipped. */
.chatbot__face--launcher {
  position: absolute;
  inset: 0;
}
.chatbot.is-open .chatbot__face--launcher {
  display: none;
}
/* Near-full shot, nudged in a little. Origin sits on the eyes so both frames
   stay registered against each other through the blink. */
.chatbot__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  transform-origin: 50% 38%;
}
.chatbot__face-blink {
  opacity: 0;
  animation: DivyaBlink 1s linear infinite;
}
/* Fast blink: eyes shut ~150ms, roughly once a second. Hard cuts, no fade —
   a cross-dissolve would ghost the two frames instead of reading as a blink. */
@keyframes DivyaBlink {
  0%,
  59.9% {
    opacity: 0;
  }
  60%,
  75% {
    opacity: 1;
  }
  75.1%,
  100% {
    opacity: 0;
  }
}
/* Attention ring — stops once the chat has been opened */
.chatbot__launcher::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20%;
  border: 2px solid var(--colorSecondary);
  animation: ChatPulse 2.2s ease-out infinite;
  pointer-events: none;
}
.chatbot.is-open .chatbot__launcher::before,
.chatbot.is-seen .chatbot__launcher::before {
  animation: none;
  opacity: 0;
}
@keyframes ChatPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}
.chatbot__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50px;
  border: 2px solid #fff;
  background: #e23b3b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
.chatbot.is-open .chatbot__badge,
.chatbot.is-seen .chatbot__badge {
  display: none;
}

/* ---------- Panel ---------- */
.chatbot__panel {
  width: 370px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(9, 48, 29, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chatbot.is-open .chatbot__panel {
  display: flex;
  animation: ChatIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes ChatIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.chatbot__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--green-dark);
  color: #fff;
  flex-shrink: 0;
}
.chatbot__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.16);
  display: block;
}
.chatbot__who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.chatbot__who strong {
  font-size: 14.5px;
  font-weight: 600;
}
.chatbot__who span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  opacity: 0.85;
}
.chatbot__who i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
.chatbot__close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  opacity: 0.8;
}
.chatbot__close:hover {
  opacity: 1;
}

/* ---------- Message log ---------- */
.chatbot__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 8px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg {
  max-width: 86%;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  border-radius: 14px;
  animation: ChatMsg 0.25s ease;
}
.chat-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
@keyframes ChatMsg {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chat-msg__action {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1px solid var(--green-line);
  background: var(--green-soft);
  color: var(--green-dark);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.chat-msg__action:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.chat-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: ChatDot 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2) {
  animation-delay: 0.18s;
}
.chat-typing span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes ChatDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ---------- FAQ chips ---------- */
.chatbot__faqs {
  flex-shrink: 0;
  max-height: 128px;
  overflow-y: auto;
  padding: 11px 14px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chat-chip {
  padding: 7px 13px;
  border-radius: 50px;
  border: 1px solid var(--green-line);
  background: #fff;
  color: var(--green-dark);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.chat-chip:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.chat-chip.is-used {
  opacity: 0.45;
}
.chatbot__foot {
  flex-shrink: 0;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.chatbot__foot .btn {
  font-size: 13.5px;
  padding: 10px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .chatbot__launcher::before {
    animation: none;
  }
}

/* ============================================================
   Gallery lightbox
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 64px 84px;
}
.lightbox.is-open {
  display: flex;
}
.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 30, 19, 0.9);
  backdrop-filter: blur(4px);
  animation: LbFade 0.3s ease;
}
.lightbox__figure {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Fixed stage + cover, so low-res sources fill the frame like the large
   ones instead of sitting small in the middle. */
.lightbox__figure img {
  width: min(1100px, 100%);
  height: calc(100vh - 190px);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
}
/* Class is re-applied on every slide change to restart the entrance */
.lightbox__figure img.is-in {
  animation: LbZoom 0.35s ease forwards;
}
.lightbox__figure figcaption {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
}
.lightbox__nav,
.lightbox__close {
  position: absolute;
  z-index: 3;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  line-height: 1;
  display: grid;
  place-items: center;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  font-size: 32px;
  padding-bottom: 4px;
}
.lightbox__nav:hover {
  background: var(--green);
  transform: translateY(-50%) scale(1.08);
}
.lightbox__nav--prev {
  left: 20px;
}
.lightbox__nav--next {
  right: 20px;
}
.lightbox__close {
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  padding-bottom: 3px;
}
.lightbox__close:hover {
  background: var(--green);
  transform: scale(1.08);
}
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 15px;
  border-radius: 50px;
}
@keyframes LbFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes LbZoom {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================
   Location
   ============================================================ */
.location__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.location__map {
  order: 1;
}
.location__text {
  order: 2;
}
.location__group {
  margin-bottom: 22px;
}
.location__group h4 {
  font-size: 20px;
  color: var(--green-dark);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--green-soft);
  font-weight: 600;
}
.location__group ul {
  display: grid;
  gap: 8px;
}
.location__group li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.location__group li span {
  font-size: 16px;
}
.location__group em {
  font-style: normal;
  font-weight: 600;
  color: var(--green);
}
.location__map {
  position: relative;
  /* Must stay a stacking context. Leaflet stacks its own panes from 200 up to
     1000 for controls; without this they'd be measured against the page root
     and paint over the sticky header (z-index 100). */
  z-index: 0;
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--green-soft);
}
/* Starts scaled up and blank; script.js adds .is-zoomed once the embed has
   loaded, easing it down to true size so the map reads as zooming in. */
/* Leaflet mounts here. Fades in once the tiles for the opening (India) view
   have painted, so the flight never starts over a grey box. */
.location__map-canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.location__map.is-ready .location__map-canvas {
  opacity: 1;
}
.location__map .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--green-soft);
  font-family: var(--font);
}
/* Site marker: a green dot that keeps pulsing after the flight lands */
.location__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(9, 48, 29, 0.45);
}
.location__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--green);
  animation: PinPulse 2s ease-out infinite;
}
@keyframes PinPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
/* Fallback embed (no JS, or Leaflet failed to load) */
.location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.location__pin {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(10px);
  background: var(--green-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.5s ease 1s,
    transform 0.5s ease 1s;
}
.location__map.is-zoomed .location__pin {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Virtual Tour
   ============================================================ */
.tour__video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 7;
  cursor: pointer;
}
.tour__poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.tour__hint {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 7px 18px;
  border-radius: 50px;
  background: rgba(9, 48, 29, 0.6);
}
.tour__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 48, 29, 0.3);
}
.tour__play {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--green);
  font-size: 26px;
  display: grid;
  place-items: center;
  padding-left: 5px;
  transition: transform 0.2s ease;
}
.tour__play:hover {
  transform: scale(1.06);
}
.tour__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
}

/* ============================================================
   About
   ============================================================ */
.about__logo {
  height: 70px;
  width: auto;
  margin: 0 auto 18px;
}
.about__inner .block__title {
  text-align: left;
  font-size: 28px;
  font-weight: 600;
}
.about__inner p {
  text-align: justify;
  color: var(--ink);
}
.about__rera {
  font-size: 15px;
  margin-top: 14px;
  text-align: left;
}
.about__rera h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.about__rera p + p {
  margin-top: 6px;
}
.about__rera strong {
  font-weight: 600;
}

/* ============================================================
   Legal pages (Privacy Policy / Disclaimer)
   ============================================================ */
.legal-page {
  background: var(--page-bg);
  padding: 20px 0 8px;
  display: grid;
  gap: 20px;
}
/* Full-bleed white card: no left/right margin, touches the viewport edges */
.legal-card {
  background: #fff;
  width: 100%;
}
/* Measure is capped so long legal copy stays readable on wide screens —
   `fit-content` let the text run the full width of the viewport. */
.legal-card__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 64px) 56px;
}
.legal-card__crumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.legal-card__crumb a {
  color: var(--green);
}
.legal-card__crumb a:hover {
  text-decoration: underline;
}
.legal-card h1 {
  font-size: 34px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 22px;
  line-height: 1.3;
}
/* One heading scale for the whole document: h2 = section, h3 = sub-section.
   (Previously each heading carried its own size class — 15/22/25/28px — so
   sibling sections rendered at unrelated sizes.) */
.legal-card h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
  text-transform: uppercase;
  margin: 34px 0 10px;
}
.legal-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  text-transform: uppercase;
  margin: 22px 0 8px;
}
.legal-card h2:first-of-type {
  margin-top: 0;
}
.legal-card p {
  color: var(--black);
  margin-bottom: 12px;
  line-height: 1.7;
  text-align: justify;
}
.legal-card p:last-child {
  margin-bottom: 0;
}
.legal-card p a {
  color: var(--green);
}
.legal-card p a:hover {
  text-decoration: underline;
}
.legal-card ul {
  margin: 0 0 16px 20px;
  display: grid;
  gap: 8px;
}
.legal-card li {
  list-style: disc;
  color: var(--black);
  text-align: justify;
  line-height: 1.7;
}
.legal-card .footer-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
}
.legal-card .footer-img img {
  height: 50px;
  width: auto;
}
.legal-card .rera-lines {
  margin-bottom: 14px;
  text-align: center;
  font-size: 14.5px;
  color: var(--black);
}
.legal-card .rera-lines span {
  display: block;
}
/* Legal pages on phones: tighter padding, smaller display heading, and no
   justification — justified copy at narrow widths opens large word gaps. */
@media (max-width: 640px) {
  .legal-card__inner {
    padding: 32px 20px 40px;
  }
  .legal-card h1 {
    font-size: 24px;
  }
  .legal-card h2 {
    font-size: 17px;
  }
  .legal-card p,
  .legal-card li {
    text-align: left;
  }
}

/* ============================================================
   Footer (privacy + disclaimer — sits on the gray canvas, no card)
   ============================================================ */
.site-footer {
  background: transparent;
  padding: 0 20px;
  text-align: center;
}
.site-footer__links {
  text-decoration: underline;
  font-size: 10px;
  text-align: center;
  font-weight: 400;
}
.site-footer__links a {
  color: var(--blue);
}
.site-footer__links a:hover {
  text-decoration: underline;
}
.site-footer__links span {
  color: var(--ink);
  margin: 0 4px;
}
.site-footer__text {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 10px;
  line-height: 1.5;
  color: var(--black);
  text-align: center;
  padding-bottom: 10px;
}
.site-footer__points {
  display: inline-block;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 10px 16px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.7;
  color: var(--black);
  text-align: center;
}
.site-footer__disclaimer {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.6;
  color: var(--black);
  text-align: center;
  opacity: 0.85;
  padding-bottom: 12px;
}
.site-footer__disclaimer strong {
  font-weight: 600;
}

/* ============================================================
   Sticky contact
   ============================================================ */
.sticky-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-end;
}
.sticky-contact__btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.sticky-contact__btn:hover {
  transform: scale(1.07);
}
.sticky-contact__icon {
  width: 22px;
  height: 22px;
  flex: none;
}
/* On the desktop rail the two round buttons are icon-only — only the pill
   keeps its word. The labels come back for the mobile bottom bar. */
.sticky-contact__btn--call .sticky-contact__label,
.sticky-contact__btn--wa .sticky-contact__label {
  display: none;
}
.sticky-contact__btn--call {
  background: var(--green);
  color: #fff;
}
.sticky-contact__btn--wa {
  background: #25d366;
  color: #fff;
}
.sticky-contact__btn--enq {
  width: auto;
  height: 50px;
  border-radius: 50px;
  padding: 0 22px;
  background: var(--green-dark);
  color: #fff;
  font-weight: 500;
  font-size: 14.5px;
}

/* ============================================================
   Modal
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-open {
  display: flex;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 48, 29, 0.65);
}
.modal__box {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* No overflow:hidden here — it would clip the country-code dropdown.
     Corners that need rounding are handled explicitly below instead. */
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.modal__close:hover {
  color: var(--green);
}

.modal__body {
  display: flex;
  align-items: stretch;
}

/* Left promise panel */
.modal__promise {
  flex: 0 0 158px;
  background: var(--gray-200);
  padding: 22px 14px 16px;
  border-top-left-radius: var(--radius);
}
.modal__promise .modal__logo {
  height: 50px;
  width: auto;
  margin: 0 auto 20px;
}
.modal__promise h4 {
  color: var(--green);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 24px;
}
.modal__promise ul {
  display: grid;
  gap: 26px;
}
.modal__promise li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.modal__promise svg {
  width: 40px;
  height: 40px;
  color: var(--green);
}
.modal__promise span {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}

/* Right main panel */
.modal__main {
  flex: 1;
  min-width: 0;
  padding: 20px 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal__logo {
  height: 50px;
  width: auto;
  margin-bottom: 16px;
}
/* Context badge — flat full-width bar echoing the CTA that opened the modal */
.modal__badge {
  width: 86%; /* inset so it clears the close button */
  padding: 10px 18px;
  margin: 4px 0 16px;
  border-radius: var(--radius-sm);
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: default;
}
.modal__main h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.35;
  margin-bottom: 20px;
}
.modal__accent {
  color: var(--green);
}
.modal__form {
  width: 100%;
  display: grid;
  gap: 14px;
}
.modal__form input {
  width: 100%;
  padding: 10px 2px;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
}
.modal__form input:focus {
  outline: none;
  border-bottom-color: var(--green);
}
.modal__submit {
  width: auto;
  justify-self: center;
  padding: 12px 46px;
  margin-top: 4px;
  border-radius: 50px;
}
.modal__consent {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.55;
  text-align: left;
}

/* Bottom full-width phone bar */
.modal__phone-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--green);
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 14px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.modal__phone-bar svg {
  width: 18px;
  height: 18px;
}
.modal__phone-bar:hover {
  background: var(--green-dark);
}

/* Shared consent (used elsewhere) */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--muted);
}
.form-consent input {
  width: auto;
  margin-top: 3px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 300;
  background: var(--green-dark);
  color: #fff;
  padding: 14px 26px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-weight: 500;
  max-width: min(460px, calc(100vw - 32px));
  text-align: center;
  line-height: 1.45;
  opacity: 0;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}
.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
@media (max-width: 640px) {
  .toast {
    left: 16px;
    right: 16px;
    max-width: none;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 14px);
    padding: 13px 18px;
    font-size: 14px;
    transform: translateY(120px);
  }
  .toast.is-visible {
    transform: translateY(0);
  }
}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .amenities__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop: fixed panel is always visible, so the sticky enquire button is redundant */
@media (min-width: 981px) {
  .sticky-contact {
    display: none;
  }
}

/* ------------------------------------------------------------
   Nav between the drawer breakpoint (980px) and a full-width
   desktop: the row layout truncates every label, so stack the
   icon over the text, let it wrap, and shrink the logo.
   ------------------------------------------------------------ */
/* Large screens keep the icon beside the label — a smaller logo and slightly
   tighter type buy back enough width to stop the labels truncating. */
@media (min-width: 1340px) and (max-width: 1560px) {
  .brand img {
    width: 200px;
    height: 60px;
    padding: 0 10px;
  }
  .nav__link {
    gap: 6px;
    padding: 0 2px;
  }
  .nav__link svg {
    width: 16px;
    height: 16px;
  }
  .nav__link span {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------
   iPad Pro / small laptop (981–1200px). The fixed 340px side panel
   leaves a narrow stage here, so 100vh blew the 1335x800 render up
   far too much and the centred card floated in dead space.
   ------------------------------------------------------------ */
@media (min-width: 981px) and (max-width: 1200px) {
  .hero {
    min-height: 0;
    height: auto;
    align-items: flex-start;
  }
  .hero__slide {
    background-position: center top;
  }
  .hero-card {
    align-self: flex-start;
    width: 316px;
    margin: 18px 0 22px 18px;
  }

  /* Cost sheet drops to its own row under the table instead of being
     squeezed into a second column */
  .pricing__inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .pricing__right {
    max-width: 400px;
  }
  .pricing__head,
  .pricing__row {
    padding: 12px 14px;
    gap: 10px;
    font-size: 13.5px;
  }
  .pricing__head {
    font-size: 12.5px;
  }
  .pricing__row .btn--sm {
    padding: 8px 13px;
    font-size: 12px;
  }
}

/* Below ~1280px a single row cannot fit the longest labels, so stack the
   icon over the text and let it wrap onto two lines. */
@media (min-width: 981px) and (max-width: 1339px) {
  .brand img {
    width: 122px;
    height: 61px;
  }
  .nav-home {
    width: 52px;
  }
  .nav__link {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 3px;
  }
  .nav__link svg {
    width: 17px;
    height: 17px;
  }
  .nav__link span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 10.5px;
    line-height: 1.15;
    font-weight: 600;
  }
}

@media (max-width: 980px) {
  /* Release the reserved right space and drop the panel into normal flow */
  body {
    padding-right: 0;
  }
  /* Lightbox is desktop-only, so the tiles stop advertising as clickable */
  .gallery__item {
    cursor: default;
  }
  .gallery__item::after {
    display: none;
  }
  /* Sticky contact rail takes over bottom-right, so the chat moves left */
  .chatbot {
    right: auto;
    left: 16px;
    bottom: 16px;
    align-items: flex-start;
  }
  .side-panel {
    position: static;
    width: 100%;
    height: auto;
    border-left: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
  }
  .side-panel__form {
    justify-content: flex-start;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
  /* Panel is in normal flow now — nothing to stick to, and the launcher has
     floated off elsewhere, so the reserved slot goes with it. The foot itself
     collapses to nothing once its only child is taken out of flow below. */
  .side-panel__foot {
    position: static;
    display: block;
    padding: 0;
    border-top: none;
  }
  .side-panel__chat-slot {
    display: none;
  }
  /* Brochure CTA becomes a tab hinged on the left edge of the screen.
     Rotating about the top-left corner swings the box up out of view, so
     translateX(-50%) walks it back down by half its own length to sit centred
     on the edge. Length is `width`; how far it juts out is `height`. */
  .side-panel__brochure {
    position: fixed;
    z-index: 110;
    left: 5px;
    top: 50%;
    transform-origin: 0 0;
    transform: rotate(-90deg) translateX(-50%);
    width: 160px;
    height: 46px;
    flex: none;
    gap: 9px;
    /* Only the outward edge is rounded — the other sits flush to the screen.
       23px == half the 46px height, so that edge caps off as a half-round. */
    border-radius: 0 0 23px 23px;
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.95),
      inset 0 9px 14px -8px rgba(20, 92, 57, 0.5),
      inset 0 -8px 12px -6px rgba(96, 110, 103, 0.45),
      inset 0 0 0 1px rgba(20, 92, 57, 0.16),
      0 6px 18px rgba(9, 48, 29, 0.22);
  }
  .side-panel__pdf {
    width: 26px;
    height: 26px;
  }
  .side-panel__brochure-text strong,
  .side-panel__brochure-text em {
    line-height: 13px;
    font-size: 12.5px;
  }
  .side-panel__brochure-text em {
    font-size: 10px;
  }

  .nav {
    position: fixed;
    top: 64px;
    right: 0;
    width: 270px;
    height: calc(100vh - 64px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    box-shadow: -10px 0 40px rgba(16, 74, 47, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .nav.is-open {
    transform: translateX(0);
  }
  .nav__link {
    flex: none;
    justify-content: flex-start;
    gap: 14px;
    padding: 15px 24px;
    border-left: none;
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle {
    display: flex;
  }

  /* The render stops being a zoomed-in backdrop and becomes a real image
     band above the card — 1335x800 art needs a landscape box to read. */
  .hero {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 0 0 26px;
    gap: 0;
  }
  .hero__slides {
    position: relative;
    inset: auto;
    width: 100%;
    height: 320px;
    flex-shrink: 0;
  }
  .hero__overlay {
    height: 320px;
    background: linear-gradient(rgba(9, 48, 29, 0.1), rgba(9, 48, 29, 0.45));
  }
  /* Card sits below the image band as its own block — no overlap, so the
     render stays fully visible */
  .hero-card {
    width: calc(100% - 32px);
    max-width: 430px;
    margin: 20px auto 0;
    align-self: auto;
  }
  .hero__nav {
    display: none;
  }

  .pricing__inner {
    grid-template-columns: 1fr;
  }
  .location__inner {
    grid-template-columns: 1fr;
  }
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plans__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }
  /* Full-bleed white sections on mobile — no gray gutter left/right */
  .block {
    padding-left: 0;
    padding-right: 0;
  }
  .block > .container {
    border-radius: 0;
    box-shadow: none;
    padding: 32px 20px;
  }
  .block__title {
    font-size: 24px;
  }
  /* Shorter band on phones so the card is above the fold */
  .hero__slides,
  .hero__overlay {
    height: 230px;
  }
  .hero-card {
    width: calc(100% - 24px);
    margin-top: 16px;
  }
  .gallery__grid {
    grid-template-columns: 1fr;
  }
  /* ---- Contact rail becomes a full-width bottom bar (icon + label) ---- */
  .sticky-contact {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(9, 48, 29, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sticky-contact__btn,
  .sticky-contact__btn--enq {
    flex: 1;
    width: auto;
    height: 58px;
    padding: 0;
    border-radius: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
  }
  .sticky-contact__btn:hover {
    transform: none;
  }
  .sticky-contact__icon {
    width: 20px;
    height: 20px;
  }
  .sticky-contact__btn--call .sticky-contact__label,
  .sticky-contact__btn--wa .sticky-contact__label {
    display: block;
  }
  /* The float animation would jitter a full-width bar segment */
  .sticky-contact__btn--enq.effetMove {
    animation: none;
    transform: none;
  }
  /* Content clears the bar. Legal pages don't render one, so they're excluded. */
  body:not(.page-simple) {
    padding-bottom: 62px;
  }

  /* Chat becomes a bottom sheet; launcher hides so it can't overlap.
     The rail no longer owns bottom-right, so the launcher returns there,
     lifted clear of the bar. */
  .chatbot {
    left: auto;
    right: 14px;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 14px);
    align-items: flex-end;
  }
  .chatbot.is-open .chatbot__launcher {
    display: none;
  }
  .chatbot__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 84vh;
    max-height: none;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  body.chat-open {
    overflow: hidden;
  }

  .lightbox {
    padding: 60px 16px;
  }
  .lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }
  .lightbox__nav--prev {
    left: 8px;
  }
  .lightbox__nav--next {
    right: 8px;
  }
  /* Drop the promise list and context badge so the form reads as one square
     card — but keep the logo, which lives inside the promise panel. */
  .modal__body {
    flex-direction: column;
  }
  .modal__promise {
    flex: none;
    background: #fff;
    padding: 20px 16px 0;
    border-top-right-radius: var(--radius);
  }
  .modal__promise h4,
  .modal__promise ul {
    display: none;
  }
  .modal__promise .modal__logo {
    height: 46px;
    margin: 0 auto;
  }
  .modal__badge {
    display: none;
  }
  .modal__main {
    padding: 16px 22px 22px;
  }
  .modal__main h3 {
    margin-bottom: 18px;
  }
  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing__head {
    display: none;
  }
  .pricing__row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .pricing__row span {
    display: flex;
    justify-content: space-between;
  }
  .pricing__row span::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
  }
  .pricing__row span:last-child::before {
    display: none;
  }
  .pricing__row span:last-child .btn {
    width: 100%;
  }

  .tour360__inner {
    flex-direction: column;
    text-align: center;
  }
  .tour360__media {
    width: 100%;
  }
}

.effetGradient {
  background-image: linear-gradient(
    270deg,
    var(--green-darker),
    var(--colorPrimary),
    var(--colorSecondary),
    var(--colorPrimary),
    var(--green-darker)
  ) !important;
  background-size: 400% 400% !important;
  animation: Gradient 3s linear infinite !important;
  text-shadow: 0 3px 6px var(--colorPrimary);
  color: var(--colorBtn) !important;
  border: none !important;
  transform: scale(1);
  transition: transform 0.2s ease;
}
/* Gradient itself is identical on hover — only the scale changes */
.effetGradient:hover {
  background-image: linear-gradient(
    270deg,
    var(--green-darker),
    var(--colorPrimary),
    var(--colorSecondary),
    var(--colorPrimary),
    var(--green-darker)
  ) !important;
  background-size: 400% 400% !important;
  animation: Gradient 3s linear infinite !important;
  text-shadow: 0 3px 6px var(--colorPrimary);
  color: var(--colorBtn) !important;
  border: none !important;
  transform: scale(1.06);
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* .effetMove — continuous transform motion for buttons.
   Add alongside any .btn, on <a> or <button> alike. */
@keyframes BtnMove {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.025);
  }
}
.effetMove {
  animation: BtnMove 2.4s ease-in-out infinite;
  will-change: transform;
}
/* Drop the loop on hover so the lift reads as a deliberate response */
.effetMove:hover {
  animation: none;
  transform: translateY(-4px) scale(1.06);
}
.effetMove:active {
  animation: none;
  transform: translateY(0) scale(0.98);
}

/* Paired with .effetGradient the two animations MUST be declared together:
   .effetGradient sets `animation: Gradient … !important`, and !important beats
   source order, so a separate `animation: BtnMove` on .effetMove is discarded. */
.effetGradient.effetMove {
  animation:
    Gradient 3s linear infinite,
    BtnMove 2.4s ease-in-out infinite !important;
}
.effetGradient.effetMove:hover {
  animation: Gradient 3s linear infinite !important;
  transform: translateY(-4px) scale(1.06);
}
.effetGradient.effetMove:active {
  animation: Gradient 3s linear infinite !important;
  transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .effetMove {
    animation: none;
  }
  /* Divya holds her eyes open */
  .chatbot__face-blink {
    animation: none;
  }
  .side-panel__pdf {
    animation: none;
  }
  /* Map still appears, just without the zoom sweep */
  .location__map iframe {
    transition: opacity 0.4s ease;
    transform: none;
  }
  .location__map.is-zoomed iframe {
    transform: none;
  }
  .effetGradient.effetMove {
    animation: Gradient 3s linear infinite !important;
  }
}
.icon-bounce {
  display: inline-block;
  animation: Bounce 1.6s ease-in-out infinite;
}

@keyframes Bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}