/* ============================================================
   Melange One — 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 {
  /* ---- Melange One — palette lifted from the brochure ---- */
  --bg-cream: #f7f1ee;        /* blush ivory (brochure plan pages) */
  --bg-sand: #efe4df;         /* deeper blush */
  --brand: #151b24;           /* midnight navy (brochure cover) */
  --brand-dark: #0d1219;
  --accent: #c5a7a3;          /* rose gold (logo + display type) */
  --accent-deep: #a8867f;
  --accent-soft: rgba(197, 167, 163, 0.18);
  --text: #232a33;
  --text-mute: #5b6572;
  --line: rgba(21, 27, 36, 0.14);
  --white: #ffffff;

  --serif: "Raleway", "Tartuffo Trial", serif;
  --sans: "Work Sans", "Raleway", sans-serif;

  --max: 1720px;

  /* fluid spacing */
  --section-pad: clamp(48px, 4.6vw, 120px);
  --gutter: clamp(20px, 4vw, 80px);

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

  /* Navbar height — logo box plus its vertical padding and rule. Keep in sync
     with .site-nav padding and .site-nav__logo img height. */
  --nav-h: calc(clamp(60px, 4.8vw, 72px) + 2 * clamp(8px, 1vw, 14px) + 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(--brand);
  font-weight: 400;
}
.eyebrow--white {
  color: rgba(255, 255, 255, 0.9);
}

.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(197, 167, 163, 0.35);
}

.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(197, 167, 163, 0.35);
  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;
  padding: clamp(6px, 0.8vw, 12px) clamp(20px, 3vw, 48px);
  background: rgba(0, 0, 0, 0.001);
  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(21, 27, 36, 0.88);
  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(64px, 7vw, 100px);
  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(48px, 5vw, 72px);
  filter: brightness(0) invert(1);
  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;
  height: 100svh;
  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;
}

/* ============================================================
   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 {
  background: var(--brand);
  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--panel .btn[type="submit"] {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

.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: 24px;
  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: 200px;
  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: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.feature__icon img {
  width: auto;
  height: auto;
  max-width: 130px;
  max-height: 130px;
  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(51, 51, 51, 0.4);
  border-radius: 0;
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(51, 51, 51, 0.7);
  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;
}
.spaces__card-img img {
  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;
}

/* + 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;
  }
  /* One card at a time, driven by Swiper (see initAmenSwiper). */
  .amen-swiper {
    display: block;
    overflow: hidden;
    /* margin, not padding: overflow clips at the padding box, so side padding
       would let the next card peek into the gutter. */
    margin: 0 5vw;
    padding: 6px 0 clamp(16px, 3vw, 28px);
  }
  .amen-scroll__cards {
    height: auto;
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    align-items: stretch;
  }
  .amen-card,
  .amen-card--a,
  .amen-card--b,
  .amen-card--c,
  .amen-card--d,
  .amen-card--e,
  .amen-card--f {
    margin-top: 0;
    height: clamp(320px, 86vw, 440px);
  }
  /* Tap = panel toggle on touch */
  .amen-card .amen-card__panel {
    width: 100%;
  }
}

/* ============================================================
   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(109, 90, 68, 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(109, 90, 68, 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(110px, 12vw, 220px);
  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;
}
/* Pinned to explicit columns so the social icons stay centred and the email
   stays right-aligned even with the phone link commented out. */
.footer__row > .footer__social {
  grid-column: 2;
  justify-self: center;
}
.footer__row > .footer__contact[href^="mailto:"] {
  grid-column: 3;
  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,
  .footer__row > .footer__social,
  .footer__row > .footer__contact[href^="mailto:"] {
    grid-column: auto;
    justify-self: center;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ============================================================
   ENQUIRY MODAL
   ============================================================ */
.enquiry-modal__content {
  background: var(--brand);
  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: rgba(255, 255, 255, 0.7);
  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 Melange One" 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 #A77D40;
  }
  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;
}

/* ============================================================
   MELANGE ONE — PREMIUM LAYER
   Type, colour and detailing taken from the project brochure:
   Raleway display caps + Work Sans body, midnight navy on blush
   ivory with rose-gold accents.
   ============================================================ */

body {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* ---------- Display type: the brochure's wide, light caps ---------- */
.display,
.h-md,
.enquiry__title,
.enquiry-modal__title,
.feature__title,
.amen-card__title,
.spaces__card-title,
.config__sizes,
.loc__title,
.faq__list .accordion-button {
  font-family: var(--serif);
  font-weight: 300;
}

.display {
  text-transform: uppercase;
  letter-spacing: 0.055em;
  line-height: 1.24;
  font-weight: 300;
}
.h-md {
  letter-spacing: 0.015em;
}

.eyebrow {
  color: var(--accent-deep);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(11px, 0.9vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 3vw, 46px);
  height: 1px;
  background: var(--accent);
  flex: none;
}
.section-head--center .eyebrow {
  justify-content: center;
}
.section-head--center .eyebrow::after {
  content: "";
  width: clamp(24px, 3vw, 46px);
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow--white {
  color: var(--accent);
}
.eyebrow--white::before,
.eyebrow--white::after {
  background: rgba(197, 167, 163, 0.6);
}

.body,
.spaces__lede,
.faq__lede,
.amen-scroll__lede,
.dn__lede {
  font-weight: 300;
  color: var(--text-mute);
}
.body--brown,
.spaces__lede,
.faq__lede {
  color: var(--text-mute);
}
.amen-scroll__lede,
.dn__lede {
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.16em;
  font-size: 12px;
  height: 54px;
  padding: 0 34px;
  border-radius: 0;
}
.btn--solid {
  background: var(--brand);
  color: var(--white);
  border: 1px solid var(--brand);
}
.btn--solid:hover {
  background: transparent;
  color: var(--brand);
}
.btn--solid-light {
  background: var(--accent);
  color: var(--brand);
  border: 1px solid var(--accent);
}
.btn--solid-light:hover {
  background: transparent;
  color: var(--accent);
}
.btn--ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn--ghost-light:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand);
}
.round-btn {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.round-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* ---------- Navigation ---------- */
.site-nav__logo img,
.site-menu__brand img,
.footer__logo img {
  width: auto;
}
.site-nav__logo img {
  height: clamp(54px, 5.6vw, 84px);
}
.site-menu__brand img {
  height: clamp(46px, 5vw, 64px);
}
.footer__logo img {
  width: clamp(150px, 15vw, 260px);
  height: auto;
}


/* ---------- Project Snapshot ---------- */
.snapshot {
  position: relative;
  isolation: isolate;
  background: var(--brand);
  color: var(--white);
  padding: clamp(56px, 6vw, 120px) 0;
  overflow: hidden;
}
.snapshot__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.snapshot__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.snapshot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    var(--brand) 0%,
    rgba(21, 27, 36, 0.78) 38%,
    rgba(21, 27, 36, 0.88) 72%,
    var(--brand) 100%
  );
}
.snapshot__inner { position: relative; }

.snapshot__lede {
  margin: clamp(18px, 2vw, 28px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Qualitative points ---- */
.snapshot__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 640px) {
  .snapshot__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .snapshot__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.snap-card {
  background: rgba(13, 18, 25, 0.72);
  padding: clamp(26px, 2.6vw, 44px);
  transition: background 0.35s var(--t);
}
.snap-card:hover { background: rgba(13, 18, 25, 0.92); }
.snap-card i {
  display: block;
  font-size: clamp(22px, 1.9vw, 28px);
  color: var(--accent);
  margin-bottom: clamp(16px, 1.8vw, 26px);
}
.snap-card h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 12px;
}
.snap-card p {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.8;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- Specification ---------- */
.spec {
  position: relative;
  isolation: isolate;
  background: var(--brand);
  color: var(--white);
  padding: clamp(38px, 3.4vw, 68px) 0;
  overflow: hidden;
}
.spec__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.spec__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
.spec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    var(--brand) 0%,
    rgba(21, 27, 36, 0.9) 32%,
    rgba(21, 27, 36, 0.94) 70%,
    var(--brand) 100%
  );
}
.spec__inner { position: relative; }
.spec .section-head .display {
  font-size: clamp(24px, 3.2vw, 46px);
}

.spec__panel {
  margin-top: clamp(22px, 2.2vw, 36px);
}
/* No reserved height — the panel sizes to the open group so short categories
   don't leave a band of empty navy underneath. */

/* ---- Category tabs ---- */
.spec__tabs.nav-tabs {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 12px);
  margin-bottom: clamp(18px, 1.8vw, 30px);
}
.spec__tabs .nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: transparent;
  padding: clamp(9px, 1vw, 13px) clamp(14px, 1.5vw, 22px);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(11px, 0.92vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  transition:
    color 0.28s var(--t),
    border-color 0.28s var(--t),
    background 0.28s var(--t);
}
.spec__tabs .nav-link:hover {
  color: var(--white);
  border-color: rgba(197, 167, 163, 0.5);
}
.spec__tabs .nav-link.active {
  background: rgba(197, 167, 163, 0.1);
  border-color: var(--accent);
  color: var(--white);
}
.spec__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.15em;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* ---- Rows ---- */
.spec__list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(36px, 4.5vw, 84px);
}
@media (min-width: 900px) {
  .spec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: clamp(11px, 1.1vw, 15px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
@media (min-width: 560px) {
  .spec__row {
    grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 26px);
    align-items: baseline;
  }
}
.spec__row dt {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.spec__row dd {
  margin: 0;
  font-size: clamp(13px, 0.98vw, 15px);
  line-height: 1.7;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Legacy / developer stats ---------- */
.legacy {
  padding: var(--section-pad) 0;
  background: var(--brand);
  color: var(--white);
}
.legacy .display { color: var(--white); }
.legacy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 50px);
  margin-top: clamp(30px, 3.4vw, 56px);
}
@media (min-width: 768px) {
  .legacy__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.legacy__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 1;
  color: var(--accent);
}
.legacy__label {
  display: block;
  margin-top: 12px;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

/* ---------- Configuration ---------- */
.config__sizes {
  font-size: clamp(18px, 1.7vw, 28px);
  letter-spacing: 0.04em;
  color: var(--brand);
}
.config__tabs .nav-link {
  font-family: var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
}
.config__units {
  display: grid;
  gap: 10px;
  margin: 22px 0 28px;
}
.config__unit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-mute);
}
.config__unit strong {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.04em;
}

/* ---------- Location ---------- */
.loc__title {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(15px, 1.3vw, 20px);
}
.loc__map img,
.masterplan__img img {
  border: 1px solid var(--line);
  background: var(--white);
}

/* ---------- Master plan ---------- */
.masterplan {
  padding: var(--section-pad) 0;
}
.masterplan__layout {
  margin-top: clamp(30px, 3.4vw, 56px);
}
.masterplan__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin-top: clamp(24px, 3vw, 44px);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-mute);
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .masterplan__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Desktop: the plan sits at a readable size on the left with the numbered
   legend running alongside it, rather than stretching edge to edge. */
@media (min-width: 992px) {
  .masterplan__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 48px);
    align-items: stretch;
  }
  /* The legend stretches to the plan's height and spreads its rows over it,
     so the two columns finish level instead of the text ending halfway. */
  .masterplan__legend {
    margin-top: 0;
    height: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
    align-content: space-between;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.4;
  }
}
.masterplan__legend li {
  display: flex;
  gap: 10px;
}
.masterplan__legend span {
  font-family: var(--serif);
  color: var(--accent-deep);
  font-weight: 500;
  flex: none;
}

/* ---------- Footer ---------- */
.footer__rera,
.footer__disc p,
.footer__bottom p {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.68);
}
.footer__rera {
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Fine detailing ---------- */
::selection {
  background: var(--accent);
  color: var(--brand);
}
.field input:focus {
  border-color: var(--accent);
}


/* Feature cards use Font Awesome glyphs so every card carries the same
   optical weight — the brochure's flourish SVGs distort at icon size. */
.feature__icon {
  min-height: 96px;
  align-items: center;
}
.feature__icon i {
  font-size: clamp(42px, 3.4vw, 50px);
  line-height: 1;
  color: var(--accent-deep);
}
.feature { text-align: center; }


/* ============================================================
   HERO — supplied banner creatives
   Web1-3 / Mob1-3 are pre-composed and carry their own headline,
   pricing and USPs, so the hero shows them whole rather than
   cropping them to the viewport, and adds no copy of its own.
   ============================================================ */
.hero {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1440 / 700;
}
@media (max-width: 767.98px) {
  .hero { aspect-ratio: 430 / 800; }
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The navbar carries a solid ground and the hero clears it, so the creatives
   are shown whole and the pale rose logo never has to fight a bright sky. */
.hero__overlay { display: none; }
.hero { margin-top: var(--nav-h); }

.hero__dots {
  bottom: clamp(14px, 2.5vh, 30px);
  margin: 0;
  z-index: 4;
}
.hero__dots [data-bs-target] {
  width: 26px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  opacity: 1;
  transition: background 0.3s var(--t), width 0.3s var(--t);
}
.hero__dots .active {
  background: var(--accent);
  width: 48px;
}


/* Spaces card: the amenity photos vary from landscape to portrait, and an
   intrinsically-sized <img> was letting a portrait shot stretch the card far
   past the master plan beside it. Take the image out of flow so the card's
   height is set by the row (i.e. by the plan) and never by the photo. */
.spaces__card-img {
  flex: 1 1 0;
  min-height: 200px;
  position: relative;
}
.spaces__card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .spaces__card-img { min-height: 260px; }
}

/* ============================================================
   ABOUT — editorial split
   Copy on the left, a sticky enquiry panel on the right, over the
   brochure cover's embossed leaf motif.
   ============================================================ */
.about {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(197, 167, 163, 0.16) 0%, rgba(197, 167, 163, 0) 55%),
    linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-sand) 100%);
}
.about__watermark {
  position: absolute;
  top: 6%;
  left: 2%;
  width: min(46vw, 560px);
  aspect-ratio: 1 / 1;
  background: url("../assets/images/logo/melange-one-mark.png") center / contain no-repeat;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

.about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0,…) is required: an implicit `auto` track lets the carousel's
     intrinsic width blow the column out to thousands of pixels. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 90px);
}
@media (min-width: 992px) {
  .about__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    align-items: start;
  }
}

.about__lead {
  margin: 18px 0 clamp(22px, 2.4vw, 34px);
  max-width: 24ch;
  font-size: clamp(26px, 3.2vw, 50px);
  line-height: 1.24;
}
.about__main .body {
  max-width: 62ch;
}

/* ---- Enquiry panel ---- */
@media (min-width: 992px) {
  .about__aside {
    position: sticky;
    top: clamp(96px, 11vh, 140px);
  }
}
.enquiry--panel {
  position: relative;
  height: auto;
  padding: clamp(30px, 3vw, 52px);
  box-shadow: 0 30px 80px rgba(21, 27, 36, 0.18);
  overflow: hidden;
}
.enquiry--panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(197, 167, 163, 0.32);
  pointer-events: none;
}
.enquiry--panel::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 260px;
  height: 260px;
  background: url("../assets/images/logo/melange-one-mark.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.enquiry--panel > * {
  position: relative;
  z-index: 1;
}
.enquiry__index {
  margin: 0 0 14px;
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.enquiry__index::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--accent);
}
.enquiry--panel .enquiry__title {
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 38px);
  letter-spacing: 0.03em;
}
.enquiry__note {
  margin: 0 0 clamp(24px, 2.4vw, 34px);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
  max-width: 42ch;
}
.enquiry--panel .field {
  border-bottom-color: rgba(255, 255, 255, 0.28);
  transition: border-color 0.3s var(--t);
}
.enquiry--panel .field:focus-within {
  border-bottom-color: var(--accent);
}
.enquiry--panel .field__label {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

/* ============================================================
   NAVBAR — logo left, menu right
   ============================================================ */
.site-nav__logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
}
.site-nav__logo img {
  height: clamp(60px, 4.8vw, 72px);
  width: auto;
  filter: drop-shadow(0 3px 16px rgba(0, 0, 0, 0.65));
}
.site-nav__menu {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.site-nav__menu span {
  margin-left: auto;
}
.site-nav__spacer {
  display: none;
}

/* ============================================================
   HERO — carousel arrows
   ============================================================ */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(38px, 3.2vw, 52px);
  height: clamp(38px, 3.2vw, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(13, 18, 25, 0.3);
  color: var(--white);
  font-size: clamp(12px, 1vw, 15px);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition:
    background 0.3s var(--t),
    border-color 0.3s var(--t),
    color 0.3s var(--t);
}
.hero__arrow:hover,
.hero__arrow:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand);
  outline: 0;
}
.hero__arrow--prev { left: clamp(12px, 2vw, 36px); }
.hero__arrow--next { right: clamp(12px, 2vw, 36px); }

/* ============================================================
   PROJECT SNAPSHOT — cards as a slider
   ============================================================ */
.snapshot__points {
  display: block;
  background: none;
  border: 0;
  gap: 0;
  /* The figures rail used to sit between the intro line and these cards;
     with it gone the slider needs its own breathing room above. */
  margin-top: clamp(36px, 3.6vw, 60px);
  padding-bottom: clamp(38px, 4vw, 56px);
  overflow: hidden;
}
.snapshot__points .swiper-wrapper {
  align-items: stretch;
}
.snap-card {
  height: auto;
  background: rgba(13, 18, 25, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.snap-card:hover {
  background: rgba(13, 18, 25, 0.92);
  border-color: rgba(197, 167, 163, 0.4);
}

.snap-pagination.swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.snap-pagination .swiper-pagination-bullet {
  width: 26px;
  height: 2px;
  border-radius: 0;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
  transition: background 0.3s var(--t), width 0.3s var(--t);
}
.snap-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 46px;
}

.snapshot__nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 2.6vw, 40px);
}
.snapshot__nav .round-btn {
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.8);
}
.snapshot__nav .round-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand);
}
.snapshot__nav .round-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Solid navbar at all times — the banner creatives begin below it. */
.site-nav {
  background: rgba(21, 27, 36, 0.96);
  border-bottom: 1px solid rgba(197, 167, 163, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-nav.is-scrolled {
  background: rgba(21, 27, 36, 0.96);
  border-bottom-color: rgba(197, 167, 163, 0.22);
}
.site-nav__logo img {
  filter: none;
}

/* ============================================================
   LIGHT SECTIONS — leaf motif
   Two blush sections carry the brochure's leaf mark, pre-faded into a
   background image (so it costs no extra element, no stacking context and
   no clipping) and placed wholly inside the section on opposite sides.
   ============================================================ */
.features,
.faq {
  background-repeat: no-repeat;
  background-image: url("../assets/images/logo/motif-soft.png");
  background-size: min(44vw, 520px) auto;
}

/* Each motif sits wholly inside its own section and the run alternates
   side to side, so the mark never reads as a shape sliced by a section
   boundary or by the edge of the viewport. */
.features { background-position: right 3% top 12%; }
.faq      { background-position: left 3% bottom 10%; }

@media (max-width: 767.98px) {
  .faq {
    background-size: min(78vw, 380px) auto;
  }
  /* The features card copy runs down the middle of the section on mobile, so
     the motif moves to the empty bottom-left corner and shrinks. */
  .features {
    background-size: min(48vw, 220px) auto;
    background-position: left 3% bottom 3%;
  }
}


/* Five feature cards on a flex row with a wide gap wrapped 4 + 1 below ~1500px,
   stranding the last card on its own line. A grid keeps the row intact. */
@media (min-width: 1200px) {
  .features-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 44px);
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .features-swiper .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
  }
}
@media (min-width: 768px) {
  .features-swiper .swiper-slide {
    max-width: none;
    flex: none;
  }
}

/* Consecutive blush sections were stacking 66px of bottom padding onto 66px of
   top padding — ~132px of dead space at every seam. Halve both sides where two
   light sections meet; the runs are masterplan→spaces→config→gallery and
   spec→location, each bounded by a dark section that keeps its full padding. */
.masterplan,
.spaces,
.config {
  padding-bottom: calc(var(--section-pad) * 0.5);
}
.spaces,
.config,
.gallery {
  padding-top: calc(var(--section-pad) * 0.5);
}

/* The map letterboxed inside its column while the accordion beside it grew
   with the open panel. Let the map fill the row's height instead. */
@media (min-width: 992px) {
  .loc__row > [class*="col-"] {
    display: flex;
  }
  .loc__row > [class*="col-"] > .loc__map,
  .loc__row > [class*="col-"] > .loc__list {
    flex: 1 1 auto;
    width: 100%;
  }
  .loc__map {
    margin-top: 0;
    min-height: 0;
  }
  .loc__map img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .loc__map > a {
    display: flex;
    width: 100%;
  }
}

/* Keep the bar's own padding in step with --nav-h so the hero clears it exactly. */
.site-nav {
  padding-top: clamp(8px, 1vw, 14px);
  padding-bottom: clamp(8px, 1vw, 14px);
}

/* ---- About / overview: mobile spacing ----
   Tighten the section's internal rhythm, but open up underneath the form:
   the enquiry panel is navy and the Project Snapshot band below it is navy
   too, so a thin blush gap made the two read as one merged block. */
@media (max-width: 991.98px) {
  .about {
    padding-top: clamp(28px, 6vw, 40px);
    padding-bottom: clamp(70px, 17vw, 96px);
  }
  .about__grid {
    gap: clamp(24px, 6vw, 34px);
  }
  .about__lead {
    margin: 10px 0 16px;
    max-width: none;
  }
  .about__main .body {
    margin-bottom: 16px;
    line-height: 1.75;
  }
  .about__main .body:last-child {
    margin-bottom: 0;
  }
}

/* ---- Overview: key-figure carousel ----
   The four project figures, moved out of the Project Snapshot band so they
   are not stated twice on the same page. */
.about__stats {
  margin: clamp(26px, 3vw, 40px) 0;
  padding-bottom: 34px;
  overflow: hidden;
}
.about__stat {
  height: auto;
  min-width: 0;
  padding: 4px 0;
  text-align: center;
}
.about__stat-val {
  display: block;
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--brand);
  white-space: nowrap;
}
.about__stat-val em {
  font-style: normal;
  font-size: 0.46em;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  margin-left: 0.14em;
}
.about__stat-key {
  display: block;
  margin-top: 10px;
  font-size: clamp(10px, 0.82vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.about__stats-dots.swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: auto;
  display: flex;
  gap: 8px;
}
.about__stats-dots .swiper-pagination-bullet {
  width: 22px;
  height: 2px;
  border-radius: 0;
  margin: 0 !important;
  background: rgba(21, 27, 36, 0.2);
  opacity: 1;
  transition: background 0.3s var(--t), width 0.3s var(--t);
}
.about__stats-dots .swiper-pagination-bullet-active {
  background: var(--accent-deep);
  width: 40px;
}

/* ---- Overview figures: one static row on desktop, a slider on mobile ---- */
@media (min-width: 992px) {
  .about__stats {
    padding-bottom: 0;
    overflow: visible;
    margin: clamp(30px, 3vw, 44px) 0;
  }
  .about__stats .swiper-wrapper {
    display: flex !important;
    transform: none !important;
    width: 100% !important;
  }
  .about__stat {
    flex: 1 1 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 clamp(10px, 1.2vw, 20px);
  }
  .about__stat + .about__stat {
    border-left: 1px solid var(--accent);
  }
  .about__stats-dots {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .about__stats {
    margin: clamp(22px, 5vw, 32px) 0;
  }
  .about__stats .swiper-wrapper {
    align-items: stretch;
  }
  /* Each figure sits in its own framed box, centred both ways. */
  .about__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 132px;
    padding: clamp(22px, 6vw, 30px) 18px;
    border: 1px solid rgba(197, 167, 163, 0.55);
    background: rgba(255, 255, 255, 0.42);
  }
  .about__stats-dots.swiper-pagination {
    left: 0;
    right: 0;
    justify-content: center;
  }
}

/* The blush gap between the map and the navy "About Melange One" band is
   whatever .loc puts below itself — the legacy section's own top padding sits
   inside its dark block and separates nothing. Give it more room on mobile. */
@media (max-width: 991.98px) {
  .loc {
    padding-bottom: clamp(72px, 17vw, 96px);
  }
}

/* Features slider controls (mobile only — the swiper is destroyed above 768). */
.features__nav {
  justify-content: center;
  gap: 14px;
  margin-top: clamp(18px, 5vw, 26px);
}
.features__nav .round-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* The Swiper container wraps the card track only on mobile; above 992 it must
   not exist as a box at all, so the GSAP horizontal pin keeps measuring the
   card row as a direct flex child of .amen-scroll__inner. Scoped to the query
   so it cannot override the mobile rule by source order. */
@media (min-width: 992px) {
  .amen-swiper {
    display: contents;
  }
}
.amen__nav {
  justify-content: center;
  gap: 14px;
  margin-top: clamp(6px, 2vw, 14px);
}
.amen__nav .round-btn {
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.8);
}
.amen__nav .round-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand);
}
.amen__nav .round-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}