/* ============================================================
   ELARA — Landing Page (responsive)
   ============================================================ */

@font-face {
  font-family: "Tartuffo Trial";
  src: url("../assets/fonts/Tartuffo_Trial.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brochure palette — Sujay Global Elara
     green #245951 (interior spreads) / #1f4a40 (cover + back cover)
     brown #63442f / #543522 (about + contact spreads)
     gold  #c3a06a decorative / #dcc49a for labels on dark grounds
     paper #f5f1e9 (warm off-white ground) */
  --bg-cream: #f5f1e9;
  --brand: #245951;
  --brand-dark: #1f4a40;
  --brand-deep: #163830;

  --brown: #63442f;
  --brown-dark: #543522;

  --gold: #c3a06a;
  --gold-soft: #dcc49a;

  --text: #2f2a26;
  --text-mute: #5c554e;
  --line: rgba(36, 89, 81, 0.16);
  --white: #ffffff;

  --serif: "Tartuffo Trial", serif;
  --sans: "Montserrat", sans-serif;

  --max: 1720px;

  /* fluid spacing */
  --section-pad: clamp(40px, 4vw, 110px);
  --gutter: clamp(20px, 4vw, 80px);

  --t: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* fixed navbar height (padding + logo + border) — hero starts below it */
  --nav-h: calc(2 * clamp(6px, 0.8vw, 12px) + clamp(40px, 5vw, 46px) + 1px);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: auto;
  overflow-x: clip;
} /* Lenis handles smooth scroll */
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Lenis class hooks (fixed elements compatibility) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}

/* Single shared section container — 95% wide, centered */
.custom-container {
  width: 90%;
  display: block;
  margin: 0 auto;
}

/* ---------- Typography (fluid) ---------- */
.eyebrow {
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.eyebrow--brown {
  color: var(--brown);
  font-weight: 400;
}
.eyebrow--white {
  color: var(--gold-soft);
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 60px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}
.display--white {
  color: var(--white);
}

.h-md {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 52px);
  line-height: 1.35;
  margin: 0 0 24px;
  color: var(--text);
}

.body {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
  margin: 0 0 22px;
  color: var(--text);
}
.body--brown {
  color: var(--brand);
}

/* ---------- Section heads ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.section-head .eyebrow {
  margin: 0;
}
.section-head--center {
  align-items: center;
  text-align: center;
}
.section-head--white {
  color: var(--white);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.25s var(--t),
    background 0.25s var(--t),
    color 0.25s var(--t),
    border-color 0.25s var(--t);
  border-radius: 0;
}
.btn:hover,
.btn:focus {
  transform: translateY(-1px);
}
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(36, 89, 81, 0.28);
}

.btn--solid {
  background: var(--brand);
  color: var(--white);
}
.btn--solid:hover {
  background: var(--brand-dark);
  color: var(--white);
}
.btn--solid-light {
  background: var(--white);
  color: var(--brand);
}
.btn--solid-light:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand);
}
.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  height: 56px;
  padding: 0 32px;
}
.btn--ghost-light:hover {
  background: var(--white);
  color: var(--brand);
}

/* ---- Submit button loading state ---- */
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
  flex-shrink: 0;
}
.btn--solid-light .btn-spinner {
  border-color: rgba(36, 89, 81, 0.3);
  border-top-color: var(--brand);
}

.round-btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--brand);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 13px;
  background: transparent;
  transition:
    background 0.25s var(--t),
    color 0.25s var(--t);
}
.round-btn:hover {
  background: var(--brand);
  color: var(--white);
}
.round-btn--light {
  border-color: var(--white);
  color: var(--white);
}
.round-btn--light:hover {
  background: var(--white);
  color: var(--brand);
}

.gallery {
  overflow-x: hidden;
}

/* ============================================================
   SITE NAVBAR (transparent + border-bottom)
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding: clamp(6px, 0.8vw, 12px) clamp(20px, 3vw, 48px);
  background: var(--brand);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition:
    background 0.4s var(--t),
    border-color 0.4s var(--t),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* add this */
}
.site-nav.is-scrolled {
  background: rgba(36, 89, 81, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}
.site-nav__menu {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  justify-self: start;
}
.site-nav__menu span {
  display: block;
  height: 1.5px;
  background: var(--white);
  transition:
    transform 0.3s var(--t),
    width 0.3s var(--t);
}
.site-nav__menu span:nth-child(1) {
  width: 28px;
}
.site-nav__menu span:nth-child(2) {
  width: 22px;
}
.site-nav__menu span:nth-child(3) {
  width: 26px;
}
.site-nav__menu:hover span:nth-child(2) {
  width: 28px;
}

.site-nav__logo {
  grid-column: 3;
  justify-self: end;
  display: inline-block;
}
.site-nav__logo img {
  height: clamp(34px, 5vw, 46px);
  width: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}
.site-nav__spacer {
  justify-self: end;
}

/* ============================================================
   OFFCANVAS MENU (full-screen, smooth open + close)
   ============================================================ */
.site-menu.offcanvas {
  /* Override Bootstrap's CSS variable so BOTH open and close use the same easing */
  --bs-offcanvas-transition: transform 0.85s cubic-bezier(0.77, 0, 0.18, 1);
  width: 100%;
  max-width: 100vw;
  background: var(--brand);
  color: var(--white);
  border: 0;
  overflow: hidden; /* no inner scroll */
}

.site-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 1.8vw, 28px) clamp(24px, 3vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.site-menu__brand img {
  height: clamp(44px, 4.6vw, 64px);
  width: auto;
  opacity: 0.95;
}
.site-menu__close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition:
    border-color 0.4s var(--t),
    background 0.4s var(--t);
}
.site-menu__close span {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.5s var(--t);
}
.site-menu__close span:nth-child(1) {
  transform: rotate(45deg);
}
.site-menu__close span:nth-child(2) {
  transform: rotate(-45deg);
}
.site-menu__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}
.site-menu__close:hover span:nth-child(1) {
  transform: rotate(135deg);
}
.site-menu__close:hover span:nth-child(2) {
  transform: rotate(45deg);
}

/* The body fills the rest of the screen and centers the nav */
.site-menu .offcanvas-body.site-menu__body {
  overflow: hidden; /* belt-and-braces — kill internal scroll */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 4vw, 60px);
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.4vw, 8px);
  text-align: center;
  width: 100%;
}
.site-menu__list a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 38px);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.94);
  display: inline-block;
  position: relative;
  padding: 4px 0;
  transition:
    color 0.25s var(--t),
    letter-spacing 0.5s var(--t);
}
.site-menu__list a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--bg-cream);
  transition:
    width 0.5s var(--t),
    left 0.5s var(--t);
}
.site-menu__list a:hover {
  letter-spacing: 0.02em;
}
.site-menu__list a:hover::after {
  width: 50%;
  left: 25%;
}

/* Stagger the list items in/out */
.site-menu__list li {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--t),
    transform 0.7s var(--t);
  transition-delay: calc(0.04s * var(--i, 0));
}
.site-menu.show .site-menu__list li {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.3s + 0.06s * var(--i, 0));
}

.site-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 48px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  justify-content: center;
  width: min(92%, 720px);
}
.site-menu__foot a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.25s;
}
.site-menu__foot a:hover {
  color: var(--white);
}
.site-menu__foot i {
  width: 16px;
  opacity: 0.8;
}

/* Match the backdrop fade to the panel timing so they finish together */
.offcanvas-backdrop.fade {
  transition: opacity 0.85s cubic-bezier(0.77, 0, 0.18, 1);
}
.offcanvas-backdrop.show {
  opacity: 0.62;
}

@media (max-width: 700px) {
  .site-menu__list a {
    font-size: clamp(18px, 5.5vw, 30px);
  }
  .site-menu__foot {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}

/* ============================================================
   HERO (Bootstrap carousel)
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  min-height: 620px;
  max-height: 1080px;
  overflow: hidden;
  isolation: isolate;
}
.hero__carousel,
.hero__carousel .carousel-inner,
.hero__carousel .carousel-item {
  height: 100%;
}
.hero__carousel .carousel-item {
  transition:
    opacity 1.2s ease,
    transform 8s ease;
}
.hero__img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  /* object-position: center; */
}
/* .hero__carousel .carousel-item.active .hero__img {
  animation: heroZoom 9s ease-out forwards;
}
@keyframes heroZoom {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
} */

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.hero__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(25px, 2vh, 110px);
  transform: translateX(-50%);
  width: min(92%, 1280px);
  z-index: 3;
  text-align: center;
  color: var(--white);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 60px);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: 0.005em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.hero__lede {
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Carousel indicators — slim, brand-toned */
.hero__carousel .carousel-indicators {
  bottom: clamp(20px, 3vh, 36px);
  margin: 0;
  left: 0;
  right: 0;
  gap: 8px;
}
.hero__carousel .carousel-indicators [data-bs-target] {
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  border-radius: 2px;
  opacity: 1;
  transition:
    background 0.3s,
    width 0.3s;
}
.hero__carousel .carousel-indicators .active {
  background: var(--white);
  width: 56px;
}

/* ============================================================
   BOTANICAL MOTIF  (frond drawn to match the brochure artwork)
   Decorative watermark. Add to any section:
     <span class="leaf-motif leaf-motif--bl" aria-hidden="true"></span>
   and give that section `.has-motif`.
   ============================================================ */
.has-motif {
  position: relative;
  overflow: hidden;
}
.has-motif > *:not(.leaf-motif) {
  position: relative;
  z-index: 1;
}

.leaf-motif {
  position: absolute;
  z-index: 0;
  width: clamp(100px, 12vw, 200px);
  aspect-ratio: 404 / 684;
  background-color: var(--brand);
  opacity: 0.18;
  pointer-events: none;
  -webkit-mask: url("../assets/icons/leaf-frond.svg") no-repeat center / contain;
  mask: url("../assets/icons/leaf-frond.svg") no-repeat center / contain;
}

/* Corners. The frond is rooted at its base with the leaves fanning up-right,
   so each corner is flipped to fan the leaves INTO the content, not off-page. */
.leaf-motif--bl {
  left: -2vw;
  bottom: 0;
}
.leaf-motif--br {
  right: -2vw;
  bottom: 0;
  transform: scaleX(-1);
}
.leaf-motif--tl {
  left: -2vw;
  top: 0;
  transform: scaleY(-1);
}
.leaf-motif--tr {
  right: -2vw;
  top: 0;
  transform: scale(-1, -1);
}

/* on dark grounds */
.leaf-motif--light {
  background-color: var(--bg-cream);
  opacity: 0.15;
}
.leaf-motif--gold {
  background-color: var(--gold);
  opacity: 0.2;
}

@media (max-width: 575.98px) {
  .leaf-motif {
    opacity: 0.13;
  }
}

/* ============================================================
   ABOUT / OVERVIEW
   ============================================================ */
.about {
  padding: var(--section-pad) 0;
}
.about .section-head {
  gap: 20px;
}
.about__row {
  margin-top: 1rem;
}
@media (min-width: 992px) {
  .about__row {
    margin-top: clamp(50px, 6vw, 90px);
  }
}

.enquiry {
  --brand: var(--brown);
  --brand-dark: var(--brown-dark);
  background: var(--brown);
  color: var(--white);
  padding: clamp(28px, 4vw, 50px);
  height: 100%;
  min-height: 0;
}
.enquiry__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 45px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(12px, 1.2vw, 15px);
}
.enquiry__fields {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 30px);
  margin-bottom: clamp(24px, 2.5vw, 35px);
}
.field {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--white);
  height: clamp(62px, 4vw, 70px);
}
.field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  padding: 26px 0 6px;
}
.field__label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  font-size: 15px;
  pointer-events: none;
  transition:
    transform 0.25s var(--t),
    font-size 0.25s var(--t),
    opacity 0.25s var(--t);
}
.field input:focus + .field__label,
.field input:valid + .field__label {
  transform: translateY(-26px);
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.1em;
}
.field em {
  font-style: normal;
}

.enquiry__consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  font-size: 13px;
  line-height: 1.75;
  margin: 0 0 clamp(36px, 4vw, 50px);
  cursor: pointer;
  user-select: none;
}
.enquiry__consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.enquiry__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--white);
  background: transparent;
  margin-top: 4px;
  font-size: 10px;
  color: var(--brand);
}
.enquiry__check i {
  opacity: 0;
  transition: opacity 0.2s;
}
.enquiry__consent input:checked ~ .enquiry__check {
  background: var(--white);
}
.enquiry__consent input:checked ~ .enquiry__check i {
  opacity: 1;
}

/* ---- Form validation ---- */
.field .invalid-feedback {
  position: absolute;
  bottom: -18px;
  left: 0;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #ffb3b3;
  white-space: nowrap;
  display: none;
}
.was-validated .field input:invalid ~ .invalid-feedback,
.field input.is-invalid ~ .invalid-feedback {
  display: block;
}
.was-validated .field input:invalid {
  border-bottom-color: #ff8080;
}
.was-validated .field input:valid {
  border-bottom-color: rgba(180, 255, 180, 0.7);
}

/* Consent checkbox invalid */
.enquiry__consent-error {
  position: static !important;
  grid-column: 1 / -1;
  margin-top: -8px;
  white-space: normal !important;
}
.was-validated .enquiry__consent input:invalid ~ .enquiry__check {
  border-color: #ff8080;
}

/* ============================================================
   WHY CHOOSE / FEATURES
   ============================================================ */
.features {
  padding: var(--section-pad) 0;
}

/* ---- desktop: plain flex row (Swiper disabled) ---- */
.features__row {
  margin-top: clamp(40px, 6vw, 80px);
}

@media (min-width: 768px) {
  .features-swiper.swiper {
    overflow: visible;
  }
  .features-swiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    gap: clamp(20px, 3.8vw, 55px);
    flex-wrap: wrap;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    transition-duration: 0ms !important;
  }
  .features-swiper .swiper-slide {
    width: auto !important;
    height: auto !important;
    flex: 1 1 220px;
    max-width: 256px;
    margin-right: 0 !important;
  }
  .features-pagination {
    display: none !important;
  }
}

/* ---- mobile: Swiper 1-up slider ---- */
@media (max-width: 767px) {
.hero__caption {
    bottom: clamp(60px, 9vh, 110px);
}
  
  .features-swiper.swiper {
    overflow: hidden;
    padding-bottom: 44px;
  }
  .enquiry__consent {
    font-size: 10px;
}
  .features-swiper .swiper-slide {
    height: auto;
    padding: 0 32px;
  }
  .features-pagination {
    bottom: 10px;
  }
  .features-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--brand);
    opacity: 0.3;
  }
  .features-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
  }
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 1.6vw, 22px);
  position: relative;
}

/* vertical divider between features (desktop only) */
.feature::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(10px, 1.5vw, 27px));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(130px, 15vw, 175px);
  background: var(--brand);
  opacity: 0.35;
}
.feature:last-child::after {
  display: none;
}
@media (max-width: 767px) {
  .feature::after { display: none; }
  .eyebrow {

    margin-top: 5rem;
}
}

.feature__icon {
  width: 100%;
  min-height: clamp(66px, 7.5vw, 96px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.feature__icon img {
  width: auto;
  height: auto;
  max-width: clamp(60px, 7vw, 88px);
  max-height: clamp(60px, 7vw, 88px);
  display: block;
}
.feature__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.35;
  margin: 0;
  color: var(--text);
}
.feature__copy {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
  max-width: 240px;
}

/* ============================================================
   CONFIGURATION (Bootstrap tabs)
   ============================================================ */
.config {
  padding: var(--section-pad) 0;
}
.config__row {
  margin-top: clamp(24px, 3vw, 48px);
}

.config__plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--brand);
  aspect-ratio: 923 / 631;
  width: 100%;
  overflow: hidden;
}
/* Image inset from edges — matches Figma where image is ~91.6% wide × ~85% tall */
.config__plan-img {
  position: absolute;
  top: 7.5%;
  left: 4.2%;
  width: 91.6%;
  height: 85%;
  object-fit: contain;
  filter: blur(10px);
}
.config__plan-pin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
/* SVG has width/height="100%" + preserveAspectRatio="none" — height:auto fails.
   ViewBox ratio: 69.99 × 66.86 ≈ 1.047, so height ≈ width × 0.955 */
.config__plan-pin img {
  width: clamp(44px, 3.5vw, 62px);
  height: clamp(42px, 3.35vw, 59px);
  object-fit: contain;
}
/* Check Prices button — Figma: 46px height, mixed-case, thin lock icon */
.config__copy .btn--solid {
  height: 46px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  gap: 8px;
}
.config__copy .btn--solid img {
  flex-shrink: 0;
}

.config__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 50px);
}

/* Override Bootstrap nav-tabs to match brand */
.config__tabs.nav-tabs {
  border-bottom: 0;
  gap: clamp(9px, 2vw, 30px);
  flex-wrap: wrap;
}
.config__tabs .nav-item {
  display: flex;
}
.config__tabs .nav-link {
  width: clamp(110px, 12vw, 146px);
  height: clamp(50px, 5vw, 60px);
  border: 1px solid rgba(36, 89, 81, 0.35);
  border-radius: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(36, 89, 81, 0.75);
  background: transparent;
  margin: 0;
  padding: 0;
  transition:
    background 0.25s var(--t),
    color 0.25s var(--t),
    border-color 0.25s var(--t);
}
.config__tabs .nav-link:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.config__tabs .nav-link.active {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}

.config__sizes {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--text);
}
.config__copy .btn {
  align-self: flex-start;
}

/* ============================================================
   SPACES (numbered amenity highlight)
   ============================================================ */
.spaces {
  padding: var(--section-pad) 0;
}
.spaces__head {
  margin-bottom: clamp(32px, 4vw, 60px);
}
.spaces__lede {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
  color: var(--brand);
}

.spaces__stage {
  position: relative;
}

.spaces__bg {
  position: relative;
  width: 100%;
  aspect-ratio: 1143 / 643;
  overflow: hidden;
}
.spaces__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dot {
  position: absolute;
  width: clamp(28px, 2.4vw, 38px);
  height: clamp(28px, 2.4vw, 38px);
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  font-size: clamp(13px, 1.1vw, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.25s var(--t),
    background 0.25s var(--t),
    color 0.25s var(--t);
  z-index: 3;
}
.dot:hover,
.dot--active {
  background: var(--brand);
  color: var(--white);
  transform: scale(1.15);
}

.spaces__card {
  position: relative;
  height: 100%;
  background: var(--white);
  padding: clamp(20px, 2vw, 30px);
  box-shadow: 0 6px 60px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s var(--t), transform 0.3s var(--t);
}
.spaces__card.is-leaving {
  opacity: 0;
  transform: translateY(10px);
}
.spaces__card-num {
  position: absolute;
  top: clamp(14px, 2vw, 24px);
  right: clamp(20px, 3vw, 36px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  color: var(--brand);
  opacity: 0.5;
}
.spaces__card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: clamp(40px, 6vw, 60px) 0 16px;
}
.spaces__card-copy {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.85;
  color: var(--brand);
  margin: 0 0 24px;
}
.spaces__card-img {
  flex: 1;
  margin-top: auto;
  overflow: hidden;
  min-height: 220px;
  /* the frame owns the size, so every amenity image fills the same box */
  position: relative;
}
.spaces__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 992px) {
  .spaces__col:first-child {
    padding-right: 10px;
    padding-left: 0;
  }
  .spaces__col:last-child {
    padding-left: 10px;
    padding-right: 0;
  }
}

/* ============================================================
   AMENITIES — GSAP ScrollTrigger horizontal pin (desktop)
   ============================================================ */
.amen-scroll {
  background: var(--brand);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.amen-scroll__inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  padding: 0 5vw;
  height: 100vh;
  width: max-content; /* contents drive width; ScrollTrigger pans this */
  will-change: transform;
}

@media (max-width: 991.98px) {
  .amen-scroll {
    padding: var(--section-pad) 0;
  }
  .amen-scroll__inner {
    height: auto;
    min-height: 0;
  }
}

.amen-scroll__intro {
  flex: 0 0 clamp(380px, 32vw, 600px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
}
.amen-scroll__intro .display {
  font-size: clamp(28px, 3.4vw, 50px);
}
.amen-scroll__lede {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  margin: 0;
  max-width: 560px;
}
.amen-scroll__cta {
  align-self: flex-start;
  margin-top: clamp(8px, 2vw, 24px);
}

/* The track of cards */
.amen-scroll__cards {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 48px);
  height: 80vh;
  flex-shrink: 0;
  position: relative;
}

/* Card: image + plus + sliding info panel */
.amen-card {
  position: relative;
  border: 2px solid var(--white);
  overflow: hidden;
  flex-shrink: 0;
}
.amen-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.7s var(--t),
    filter 0.4s var(--t);
}
.amen-card:hover > img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

/* Per-card mosaic sizes + vertical offsets matching the Figma */
.amen-card--a {
  /* small, low  (Yoga Deck)         */
  width: 22vw;
  height: 32vh;
  margin-top: 38vh;
}
.amen-card--b {
  /* large, mid  (Fitness Centre)    */
  width: 38vw;
  height: 56vh;
  margin-top: 14vh;
}
.amen-card--c {
  /* small, high (Swimming Pool)     */
  width: 22vw;
  height: 36vh;
  margin-top: 4vh;
}
.amen-card--d {
  /* extra-tall (Clubhouse)          */
  width: 38vw;
  height: 64vh;
  margin-top: 6vh;
}
.amen-card--e {
  /* small mid  (Play Area)          */
  width: 18vw;
  height: 32vh;
  margin-top: 22vh;
}
.amen-card--f {
  /* large mid  (Landscaped Gardens) */
  width: 38vw;
  height: 54vh;
  margin-top: 16vh;
}

/* Prev / next — mobile only; the desktop track is driven by the GSAP pin */
.amen-scroll__nav {
  display: none;
}

/* + button — centered, hides on hover so the panel takes over */
@keyframes plus-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.25); }
  50%       { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 6px 18px rgba(0,0,0,0.25); }
}

.amen-card__plus {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%) scale(1);
  width: clamp(40px, 3vw, 52px);
  height: clamp(40px, 3vw, 52px);
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  animation: plus-pulse 1.8s ease-in-out infinite;
  transition:
    opacity 0.3s var(--t),
    transform 0.3s var(--t);
  z-index: 2;
}
.amen-card:hover .amen-card__plus {
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  pointer-events: none;
}

/* White info patch slides in from the right on hover */
.amen-card__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  background: var(--white);
  color: var(--text);
  padding: clamp(20px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  transform: translateX(100%);
  transition: transform 0.55s var(--t);
  z-index: 3;
}
.amen-card:hover .amen-card__panel,
.amen-card:focus-within .amen-card__panel {
  transform: translateX(0);
}
.amen-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0;
}
.amen-card__desc {
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.7;
  color: var(--brand);
  margin: 0;
}

/* On smaller cards the panel covers more so the text stays readable */
.amen-card--a .amen-card__panel,
.amen-card--c .amen-card__panel,
.amen-card--e .amen-card__panel {
  width: 100%;
}

/* Mobile / tablet: drop the pin/horizontal scroll; show a vertical-stack mosaic */
@media (max-width: 991.98px) {
  .amen-scroll {
    padding: var(--section-pad) 0;
  }
  .amen-scroll__inner {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    transform: none !important; /* defeat any GSAP residual */
  }
  .amen-scroll__intro {
    width: 90%;
    margin: 0 auto clamp(28px, 5vw, 48px);
    flex: none;
  }
  .amen-scroll__cards {
    height: auto;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 6px 5vw clamp(20px, 4vw, 40px);
    /* match the side padding so the first card snaps to scrollLeft 0 */
    scroll-padding: 0 5vw;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    /* let the browser own horizontal panning here — Lenis keeps the vertical axis */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }
  .amen-scroll__cards::-webkit-scrollbar {
    display: none;
  }
  /* pointer-drag (mouse / stylus): suppress snap + image zoom while dragging */
  .amen-scroll__cards.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
  .amen-scroll__cards.is-dragging .amen-card > img {
    transform: none !important;
    transition: none !important;
  }
  .amen-scroll__cards.is-dragging * {
    pointer-events: none;
  }
  .amen-card,
  .amen-card--a,
  .amen-card--b,
  .amen-card--c,
  .amen-card--d,
  .amen-card--e,
  .amen-card--f {
    margin-top: 0;
    width: clamp(240px, 70vw, 360px);
    height: clamp(300px, 80vw, 420px);
    scroll-snap-align: start;
  }
  .amen-card > img {
    -webkit-user-drag: none;
    user-select: none;
  }
  /* Tap = panel toggle on touch */
  .amen-card .amen-card__panel {
    width: 100%;
  }
  .amen-scroll__nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
  }
  .amen-scroll__nav .round-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
  }
}

/* ============================================================
   GALLERY (Bootstrap tabs + Swiper)
   ============================================================ */
.gallery {
  padding: var(--section-pad) 0;
}
.gallery__tabs-wrap {
  display: flex;
  justify-content: center;
  margin: clamp(24px, 3vw, 40px) 0 clamp(28px, 4vw, 50px);
}
.gallery__tabs.nav-tabs {
  border:  1px solid rgba(95, 95, 95, 0.15);
  background: var(--white);
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 5px;
  margin: 0;
  border-radius: 0;
}
.gallery__tabs .nav-item {
  display: flex;
}
.gallery__tabs .nav-link {
  height: 48px;
  padding: 0 clamp(20px, 2.5vw, 40px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  white-space: nowrap;
  transition:
    background 0.25s,
    color 0.25s;
}
.gallery__tabs .nav-link.active{
  background: var(--brand);
  color: var(--white);
  border-radius: 0;
}

/* Carousel sits OUTSIDE the custom-container so side slides bleed to the viewport edges */
.gallery__content {
  width: 100%;
  margin: 0;
}
.gallery-swiper {
  width: 100%;
  padding-bottom: 16px;
  overflow: visible; /* let side slides peek past the swiper box */
}
.gallery-swiper .swiper-wrapper {
  align-items: center;
  transform-style: preserve-3d;
}
.gallery__item {
  width: clamp(280px, 50vw, 720px);
  height: clamp(340px, 30vw, 440px);
  overflow: hidden;
  border-radius: clamp(10px, 1.5vw, 20px);
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .gallery__content {
    overflow: hidden; /* clip anything that escapes the swiper on mobile */
  }
  .gallery-swiper {
    padding: 0;
    width: calc(100% - 32px);
    margin: 0 auto;
    overflow: hidden;
    perspective: none; /* kill 3-D space — rotateY leaks through overflow:hidden */
  }
  .gallery-swiper .swiper-wrapper {
    transform-style: flat;
  }
  /* Reset every slide transform on mobile so nothing peeks in */
  .gallery-swiper .swiper-slide,
  .gallery-swiper .swiper-slide.swiper-slide-prev,
  .gallery-swiper .swiper-slide.swiper-slide-next,
  .gallery-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
    transform: none !important;
    filter: none !important;
  }
  .gallery-swiper .swiper-slide:not(.swiper-slide-active) img {
    filter: none !important;
  }
  /* Force each slide to fill the full swiper width on mobile — one image per view */
  .gallery__item {
    width: 100% !important;
    height: clamp(260px, 62vw, 420px);
    border-radius: 14px;
  }
  .config__row{
    margin-top: 0px !important;
  }

  .config__copy {
    padding-top: 4rem;
}


.config__tabs.nav-tabs {
    margin-top: 1rem;
}
.config__copy .btn--solid {

    margin-bottom: 2rem;
}
}
.gallery__item > a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), filter 0.6s ease;
}
/* Non-active slides: scaled down + desaturated + subtle curve tilt */
.gallery-swiper {
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
.gallery-swiper .swiper-slide {
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), filter 0.6s ease;
  transform-origin: center center;
}
.gallery-swiper .swiper-slide.swiper-slide-active {
  transform: scale(1) rotateY(0deg);
}
.gallery-swiper .swiper-slide.swiper-slide-prev {
  transform: scale(0.9) rotateY(7deg);
}
.gallery-swiper .swiper-slide.swiper-slide-next {
  transform: scale(0.9) rotateY(-7deg);
}
.gallery-swiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
  transform: scale(0.9) rotateY(10deg);
}
.gallery-swiper .swiper-slide:not(.swiper-slide-active) img {
  filter: grayscale(1) brightness(0.7);
}
.gallery-swiper .swiper-slide.swiper-slide-active img {
  filter: none;
}
/* Image zoom ONLY on hover — and only when the swiper is at rest */
.gallery__item:hover img {
  transform: scale(1.05);
}
.gallery-swiper.swiper-grabbing .gallery__item img,
.gallery-swiper.swiper-grabbing .gallery__item:hover img {
  transform: none !important;
  transition: none !important;
}
/* Smoother Swiper translate for the gallery */
.gallery-swiper .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.gallery__nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 50px);
}

/* ============================================================
   DAY & NIGHT
   ============================================================ */
.dn {
  position: relative;
  height: 100svh;
  min-height: 600px;
  max-height: 1080px;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.dn__day,
.dn__night {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.8s ease;
}
.dn__night {
  opacity: 0;
}
.dn[data-mode="night"] .dn__day {
  opacity: 0;
}
.dn[data-mode="night"] .dn__night {
  opacity: 1;
}

.dn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0.65) 100%
  );
  z-index: 1;
}

.dn__content {
  position: absolute;
  bottom: clamp(40px, 8vw, 90px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 95%;
  max-width: var(--max);
}
.dn__copy {
  max-width: 870px;
}
.dn__copy .display {
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.2;
  margin-bottom: 14px;
}
.dn__lede {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 700px;
}

/* Sun/Moon circular toggle (Figma-style) */
.dn__toggle {
  position: absolute;
  right: clamp(16px, 2.5vw, 50px);
  bottom: clamp(60px, 9vh, 120px);
  z-index: 4;
}

/* ---- Dial circle ---- */
.dn__dial {
  --dial: clamp(140px, 12vw, 180px);
  width: var(--dial);
  height: var(--dial);
  border-radius: 50%;
  border: none;
  position: relative;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

/* Border ring with gaps at 9-o'clock (left chevron) and 3-o'clock (right chevron) */
.dn__dial::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.6)  0deg,
    rgba(255,255,255,0.6)  72deg,
    transparent            72deg,
    transparent           108deg,
    rgba(255,255,255,0.6) 108deg,
    rgba(255,255,255,0.6) 252deg,
    transparent           252deg,
    transparent           288deg,
    rgba(255,255,255,0.6) 288deg,
    rgba(255,255,255,0.6) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 0, transparent calc(100% - 2px), #000 calc(100% - 2px), #000 100%);
  mask: radial-gradient(farthest-side, transparent 0, transparent calc(100% - 2px), #000 calc(100% - 2px), #000 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Icons fully inside the border, translated from center ---- */
.dn__dial-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.5s ease, height 0.5s ease,
              background 0.5s ease, opacity 0.5s ease;
}

/* Sun — active, large, at top in day mode */
.dn__dial-icon--sun {
  width: clamp(36px, 3vw, 48px);
  height: clamp(36px, 3vw, 48px);
  transform: translate(-50%, calc(-50% - 52px));
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.dn__dial-icon--sun img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

/* Moon — inactive, small, at bottom in day mode */
.dn__dial-icon--moon {
  width: clamp(28px, 2.6vw, 36px);
  height: clamp(28px, 2.6vw, 36px);
  transform: translate(-50%, calc(-50% + 50px));
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
}
.dn__dial-icon--moon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* Night mode — swap: moon active at top, sun inactive at bottom */
.dn[data-mode="night"] .dn__dial-icon--sun {
  transform: translate(-50%, calc(-50% + 50px));
  width: clamp(28px, 2.6vw, 36px);
  height: clamp(28px, 2.6vw, 36px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: none;
  opacity: 0.8;
}
.dn[data-mode="night"] .dn__dial-icon--moon {
  transform: translate(-50%, calc(-50% - 52px));
  width: clamp(36px, 3vw, 48px);
  height: clamp(36px, 3vw, 48px);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  opacity: 1;
}

/* ---- Center label ---- */
.dn__dial-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.dn__dial-center span {
  font-family: var(--serif);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* ---- Chevrons on the dial border (left & right equator) ---- */
.dn__dial-chevron {
  position: absolute;
  top: 50%;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.3s;
  z-index: 2;
}
.dn__dial-chevron:hover { color: var(--white); }
.dn__dial-chevron--left  { left: 0;  transform: translate(-50%, -50%); }
.dn__dial-chevron--right { right: 0; transform: translate(50%, -50%); }

@media (max-width: 700px) {
  .dn__toggle {
    bottom: auto;
    top: 80px;
    right: 12px;
    gap: 6px;
  }
  .dn__dial { --dial: 110px; }
}

/* ============================================================
   LOCATION (Bootstrap accordion)
   ============================================================ */
.loc {
  padding: var(--section-pad) 0;
}
.loc__row {
  margin-top: clamp(36px, 5vw, 70px);
}

.loc__list.accordion {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 22px;
  height: 100%;
}
.loc__list .accordion-item {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.loc__list .accordion-item + .accordion-item {
  border-top: 1px dashed rgba(36, 89, 81, 0.4);
}
.loc__list .accordion-button {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: clamp(22px, 3vw, 36px) 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 16px;
}
.loc__list .accordion-button::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  background: none;
  width: auto;
  height: auto;
  font-size: 16px;
  color: var(--brand);
  margin-left: auto;
  transition: transform 0.3s var(--t);
}
.loc__list .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}
.loc__list .accordion-button:focus {
  box-shadow: none;
}
.loc__list .accordion-button:not(.collapsed) {
  color: var(--brand);
}

.loc__icon {
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.loc__icon img {
  max-width: 100%;
  max-height: 100%;
}

.loc__list .accordion-body {
  padding: 0 0 18px 18px;
}
.loc__list .accordion-body ul {
  list-style: disc;
  padding: 0;
  margin: 0;
}
.loc__list .accordion-body li {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  color: var(--text-mute);
  margin-left: 16px;
}

.loc__map {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.loc__map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 10px;
}

@media (max-width: 991.98px) {
  .loc__map {
    height: auto;
    min-height: unset;
  }
  .loc__map img {
    width: 100%;
    height: auto;
  }
}

/* ============================================================
   FAQ (Bootstrap accordion)
   ============================================================ */
.faq {
  padding: var(--section-pad) 0;
}
.faq__head {
  margin-bottom: clamp(32px, 4vw, 50px);
}
.faq__lede {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.9;
  color: var(--brand);
  margin: 0;
}

.faq__photo {
  height: clamp(360px, 42vw, 665px);
  border-radius: 6px;
  overflow: hidden;
}
.faq__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq__list.accordion .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(36, 89, 81, 0.3);
  border-radius: 0;
}
.faq__list .accordion-button {
  background: transparent;
  color: var(--brand);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.9vw, 27px);
  letter-spacing: 0.02em;
  padding: clamp(20px, 2vw, 28px) 0;
  border: 0;
  box-shadow: none;
}
.faq__list .accordion-button:focus {
  box-shadow: none;
}
.faq__list .accordion-button:not(.collapsed) {
  color: var(--brand-dark);
}
.faq__list .accordion-button::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  background: none;
  width: auto;
  height: auto;
  font-size: 16px;
  color: var(--brand);
  transition: transform 0.3s var(--t);
}
.faq__list .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.faq__list .accordion-body {
  padding: 0 0 22px;
}
.faq__list .accordion-body p {
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.85;
  color: var(--brand);
  margin: 0;
  max-width: 720px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--brand);
  color: var(--white);
  padding: clamp(40px, 6vw, 70px) 0 30px;
  text-align: center;
}
.footer__logo img {
  width: clamp(120px, 12vw, 190px);
  height: auto;
  margin: 0 auto 26px;
}
.footer__rera,
.footer__disc {
  margin: 0 auto;
  max-width: 1300px;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.92);
}
.footer__rera {
  margin-bottom: 24px;
}
.footer__disc {
  font-size: clamp(12px, 0.9vw, 14px);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 40px;
}
.footer__disc p {
  margin: 0 0 6px;
}

.footer__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(14px, 1.1vw, 18px);
}
.footer__row > .footer__contact:first-child {
  justify-self: start;
}
.footer__row > .footer__contact:last-child {
  justify-self: end;
}
.footer__contact i {
  font-size: 14px;
}

.footer__social {
  display: flex;
  gap: 14px;
}
.footer__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--t);
}
.footer__social a:hover {
  transform: translateY(-2px);
}
.footer__social img {
  width: 36px;
  height: 36px;
}

.footer__line {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 36px 0 20px;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255, 255, 255, 0.92);
  gap: 16px;
}
.footer__bottom p {
  margin: 0;
}

@media (max-width: 700px) {
  .footer__row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }
  .footer__row > .footer__contact:first-child,
  .footer__row > .footer__contact:last-child {
    justify-self: center;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ============================================================
   ENQUIRY MODAL
   ============================================================ */
.enquiry-modal__content {
  --brand: var(--brown);
  --brand-dark: var(--brown-dark);
  background: var(--brown);
  color: var(--white);
  border: none;
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.enquiry-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(16px, 1.5vw, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.enquiry-modal__eyebrow {
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
  font-weight: 500;
}

.enquiry-modal__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.01em;
}

.enquiry-modal__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--white);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s var(--t), border-color 0.25s var(--t);
  margin-top: 4px;
}
.enquiry-modal__close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--white);
}

.enquiry-modal__body {
  padding: clamp(24px, 2.5vw, 36px) clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px);
}

.enquiry-modal__body .enquiry__fields {
  margin-bottom: clamp(20px, 2vw, 28px);
}

.enquiry-modal__submit {
  width: 100%;
  height: 52px;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.enquiry-modal__submit:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Dim the backdrop more to focus on the form */
#enquiryModal .modal-backdrop,
.modal-backdrop {
  --bs-backdrop-opacity: 0.75;
}

/* ============================================================
   PAGE LOADER  (matches Figma "FinalBanner" node 318:4684)
   Animation (verified from screencast):
     1. Logo fades in at centre → slides up to top
     2. "Welcome To Atharv Brindavan" fades in at centre (large)
     3. Counter "01" appears at bottom, counts to "100" while
        sliding upward to the top of the screen
     4. Each image starts at centre and flies to its corner
     5. Logo fades out as images begin flying
   ============================================================ */
body.loader-active { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-cream);
  overflow: hidden;
  clip-path: inset(0 0 0% 0);    /* starting state for the bottom→top wipe exit */
}

/* Logo — GSAP positions it; starts at centre */
.loader__logo {
  position: absolute;
  width: clamp(100px, 9vw, 175px);
  height: auto;
  opacity: 0;
  top: 0; left: 0;          /* GSAP sets x/y */
  image-rendering: crisp-edges;
  z-index: 3;               /* stays above flying images (z-index: 2) */
}

/* Welcome text — GSAP positions it; starts below logo */
.loader__welcome {
  position: absolute;
  font-family: var(--serif);
  font-size: clamp(26px, 4.8vw, 80px);
  color: var(--brand);
  font-weight: 300;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  top: 0; left: 0;          /* GSAP sets x/y/width */
}

/* Images — all start at centre, GSAP flies each to its corner */
.loader__img {
  position: absolute;
  width: clamp(160px, 16vw, 280px);
  height: clamp(160px, 16vw, 280px);
  object-fit: cover;
  opacity: 0;
  top: 0; left: 0;          /* GSAP sets x/y */
  z-index: 2;               /* sits above the counter line */
}

/* Counter — starts at bottom, GSAP slides it up while counting */
.loader__counter {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  top: 0; left: 0;          /* GSAP sets x/y */
  z-index: 1;               /* counter number stays visible but line sits behind images */
  will-change: transform;
  backface-visibility: hidden;
}

.loader__count {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 60px);
  color: var(--brand);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  min-width: 3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.loader__counter-line {
  width: 1px;
  height: 100vh;          /* extends to bottom; loader overflow:hidden clips it */
  background: var(--brand);
  margin-top: 10px;
  opacity: 0.55;
}

/* CSS-only exit class (used when GSAP is absent) */
.loader--out {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

@media (max-width: 575px) {
  .loader              { display: none; }
  body.loader-active   { overflow: auto; }
}

/* ============================================================
   AOS overrides — defaults safer on mobile
   ============================================================ */
[data-aos] {
  pointer-events: auto;
}

/* On mobile, convert horizontal slide animations to vertical to prevent
   the 100px translateX from creating horizontal overflow/scroll */
@media (max-width: 767px) {
  [data-aos="fade-right"],
  [data-aos="fade-left"] {
    transform: translate3d(0, 50px, 0) !important;
  }
.h-md {
margin-top: 1rem;
}
  .loc__row {
    margin-top: 0px;
}
.loc__map {
  margin-top: 1rem;
}

.float-mobile-bar {
    border-top: 1px solid #fff;
}
}
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero__bg {
    animation: none;
  }
  .hero__scroll-line {
    animation: none;
  }
}

/* ============================================================
   Custom AOS animations
   ============================================================ */

/* text-reveal — clip wipe from bottom with translateY */
[data-aos="text-reveal"] {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(30px);
  transition-property: clip-path, opacity, transform;
}
[data-aos="text-reveal"].aos-animate {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
}

/* text-blur-in — fade in with blur */
[data-aos="text-blur-in"] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(25px);
  transition-property: opacity, filter, transform;
}
[data-aos="text-blur-in"].aos-animate {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* text-slide-up — clean vertical slide */
[data-aos="text-slide-up"] {
  opacity: 0;
  transform: translateY(60px);
  transition-property: opacity, transform;
}
[data-aos="text-slide-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* text-clip-left — horizontal clip reveal */
[data-aos="text-clip-left"] {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition-property: clip-path, opacity;
}
[data-aos="text-clip-left"].aos-animate {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* Splitting.js — words inside text-reveal headings */
[data-splitting][data-aos="text-reveal"] .word {
  display: inline-block;
  vertical-align: bottom;
}

/* ============================================================
   FLOATING CTA BUTTONS (Desktop only, shown after hero scrolls away)
   ============================================================ */
.float-enquire-btn,
.float-download-btn {
  position: fixed;
  bottom: -80px;
  z-index: 50;
  background: transparent;
  border: none;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: bottom 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              right  1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              left   1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.float-enquire-btn {
  right: -100px;
}
.float-download-btn {
  left: -100px;
}

.float-enquire-btn.show {
  bottom: clamp(20px, 3vw, 40px);
  right: clamp(16px, 1.5vw, 24px);
  opacity: 1;
  pointer-events: auto;
}
.float-download-btn.show {
  bottom: clamp(20px, 3vw, 40px);
  left: clamp(16px, 1.5vw, 24px);
  opacity: 1;
  pointer-events: auto;
}

@keyframes pulse-effect {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 var(--gold);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.float-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  background: var(--brand);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  animation: pulse-effect 2s infinite;
  transition: background 0.3s var(--t);
}
.float-cta:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
}
.float-cta i {
  font-size: 15px;
  flex-shrink: 0;
}

/* ============================================================
   FLOATING CTA BAR (Mobile only)
   ============================================================ */
.float-mobile-bar {
  position: fixed;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: bottom 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.float-mobile-bar.show {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
}
.float-mobile-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--brand);
  color: var(--white);
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.float-mobile-btn--outline {
  background: var(--brand-dark);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.float-mobile-btn i {
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================================
   ELARA — additions
   ============================================================ */

/* ---- Hero eyebrow ---- */
.hero__eyebrow {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ---- About: quick numbers ---- */
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(36px, 5vw, 72px);
}
.stat {
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  padding: clamp(22px, 2.6vw, 40px) clamp(16px, 2vw, 32px);
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  transition: transform 0.5s var(--t), box-shadow 0.5s var(--t);
}
.stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(36, 89, 81, 0.12);
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.15;
  color: var(--brand);
  margin: 0 0 10px;
}
.stat__label {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0;
}
@media (max-width: 767px) {
  .about__stats {
    grid-template-columns: 1fr;
  }
}

/* ---- Elevation banner ---- */
.elev {
  position: relative;
  min-height: clamp(380px, 70vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.elev__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}
.elev__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}
.elev__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  text-align: center;
}
.elev__content .display {
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ---- Location: allow a Font Awesome glyph in the icon slot ---- */
.loc__icon i {
  font-size: clamp(18px, 1.7vw, 24px);
  color: var(--brand);
  line-height: 1;
}

/* ---- Why Choose: 6 cards read best as a balanced 3 × 2 grid ---- */
@media (min-width: 768px) {
  .features-swiper .swiper-wrapper {
    max-width: calc(3 * 300px + 2 * 55px);
    margin-left: auto;
    margin-right: auto;
  }
  .features-swiper .swiper-slide {
    max-width: 300px;
  }
}

/* ---- Day & Night dial: single-word brand reads better with wider tracking ---- */
.dn__dial-center .dn__dial-word {
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

/* ---- Floor plan: legend list under each tab ---- */
.config__legend {
  list-style: none;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(16px, 2vw, 32px);
}
.config__legend li {
  break-inside: avoid;
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.5;
  color: var(--text-mute);
}
.config__legend li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
@media (max-width: 575.98px) {
  /* stay two-up on phones — a single column leaves a tall band of white space */
  .config__legend {
    column-gap: 14px;
  }
  .config__legend li {
    padding-left: 13px;
    margin-bottom: 6px;
    font-size: 12px;
  }
  .config__legend li::before {
    width: 4px;
    height: 4px;
  }
}

/* Centre the map against the (taller) benefits accordion instead of letting
   it sit at the top of the column. Kept at top level on purpose: the
   @media (max-width: 767px) block further up is never closed, so anything
   placed near it gets nested inside and a min-width query there can never match. */
@media (min-width: 992px) {
  .loc__map-col {
    display: flex;
    align-items: center;
  }
  .loc__map-col .loc__map {
    width: 100%;
    margin-top: 0;
  }
}