/* ═══════════════════════════════════════════════════════════════
   Dhruvija Gopura — Landing Page
   Built 1:1 from Figma frame 361:74 (1920 × 11053)
   ═══════════════════════════════════════════════════════════════ */

/* ─── licensed fonts (drop the files into assets/fonts/ and these activate
       automatically — until then the Google-font substitutes render) ───── */
@font-face {
  font-family: "AdorHairline";
  src:
    url("../assets/fonts/AdorHairline-Regular.woff2") format("woff2"),
    url("../assets/fonts/AdorHairline-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* Medium/Bold cuts not supplied — serve Regular for those weights too
   (prevents faux-bold and mixed fallbacks; swap the src when the real
   AdorHairline-Medium/Bold files arrive) */
@font-face {
  font-family: "AdorHairline";
  src: url("../assets/fonts/AdorHairline-Regular.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "AdorHairline";
  src: url("../assets/fonts/AdorHairline-Regular.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src:
    url("../assets/fonts/TheSeasons-Regular.woff2") format("woff2"),
    url("../assets/fonts/TheSeasons-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Pro";
  src:
    url("../assets/fonts/HelveticaNeueLTPro-Lt.woff2") format("woff2"),
    url("../assets/fonts/HelveticaNeueLTPro-Lt.otf") format("opentype"),
    url("../assets/fonts/HelveticaNeueLTPro-Lt.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Pro";
  src: url("../assets/fonts/HelveticaNeueLTPro-Roman.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src:
    url("../assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2"),
    url("../assets/fonts/PPNeueMontreal-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("../assets/fonts/MyriadPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* palette (from Figma) */
  --c-page: #ffffff; /* page / section background     */
  --c-beige: #e1c6a6; /* accent tone on dark surfaces  */
  --c-brown: #8a7564; /* headings / amenities bg       */
  --c-ink: #333333; /* body text                     */
  --c-navy-1: #0a3466; /* pill gradient edge            */
  --c-navy-2: #215093; /* pill gradient centre / links  */
  --c-dark: #0c1e32; /* testimonial name              */
  --c-cream: #f4ecdf; /* arrow rings on dark           */
  --c-muted: #777777;
  --c-soft: #a1a1a1;
  --c-line: rgba(85, 85, 85, 0.2);
  --c-wa: #25d366;
  --c-call: #714224;

  --grad-pill: linear-gradient(90deg, #0a3466 0%, #215093 50%, #0a3466 100%);

  /* type — licensed fonts first, free substitutes as fallback */
  --font-display:
    "Ador Hairline", "AdorHairline", "Cormorant Garamond", Georgia, serif;
  --font-seasons: "The Seasons", "Playfair Display", Georgia, serif;
  --font-body:
    "Helvetica Neue LT Pro", "Helvetica Neue", "Inter", Helvetica, Arial,
    sans-serif;

  --header-h: clamp(60px, 4.4vw, 84px);
}

/* ─── base ─────────────────────────────────────────────────── */
html {
  scroll-behavior: auto;
  overflow-x: hidden;
} /* Lenis drives scrolling */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--c-ink);
  background: var(--c-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}

.container-lp {
  width: 100%;
  max-width: 85vw; /* section container: 100% wide, capped at 85vw */
  margin-inline: auto;
}

/* display serif headings — AdorHairline 70/80 ls 2.1 */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 3.65vw, 70px);
  line-height: 1.143;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-brown);
  margin: 0;
}
.h-display--md {
  font-size: clamp(30px, 2.6vw, 50px);
  line-height: 1.4;
}

/* ─── pill buttons (50h, radius 9999) ──────────────────────── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 50px;
  padding-inline: 24px;
  border-radius: 9999px;
  border: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s,
    background-color 0.35s,
    color 0.35s;
}
.btn-pill--solid {
  background: var(--grad-pill);
  background-size: 130% 100%;
  background-position: center;
  color: #fff;
}
.btn-pill--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 52, 102, 0.35);
  color: #fff;
}
.btn-pill--outline {
  background: transparent;
  border: 1px solid var(--c-navy-2);
  color: var(--c-navy-2);
}
.btn-pill--outline:hover {
  background: rgba(33, 80, 147, 0.08);
  transform: translateY(-2px);
}
.btn-pill--white {
  background: #fff;
  color: var(--c-navy-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn-pill--white:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

/* 4-point sparkle glyph inside pills */
.star-ico {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7 17 11.1 24 12c-7 .9-11.1 5-12 12-.9-7-5-11.1-12-12C7 11.1 11.1 7 12 0Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7 17 11.1 24 12c-7 .9-11.1 5-12 12-.9-7-5-11.1-12-12C7 11.1 11.1 7 12 0Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
}

/* ─── plain white sections ──────────────────────────────────── */
.section-paper {
  position: relative;
  background: var(--c-page);
}
.section-paper > * {
  position: relative;
  z-index: 1;
}

/* decorative sparkles */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* ─── header ───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
.site-header.is-scrolled {
  background: rgba(12, 30, 50, 0.55);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18);
}
.header-inner {
  height: 100%;
  width: 100%;
  max-width: 85vw;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-logo {
  /* the two-line lockup needs more height than the old single-word mark to
     read at the same size — this keeps it at ~3/4 of the header height */
  height: clamp(42px, 3.3vw, 62px);
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 23px;
}
.main-nav a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.04vw, 20px);
  color: #fff;
  text-decoration: none;
  position: relative;
  padding-block: 4px;
  transition: opacity 0.3s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.main-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.5);
}

/* hamburger */
.nav-toggle {
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}
.nav-toggle span {
  display: block;
  width: 15px;
  height: 2px;
  /* transform: scaleY(0.75); */
  background: #fff;
  border-radius: 2px;
  transition: width 0.3s;
}
.nav-toggle span:nth-child(2) {
  width: 14px;
  margin-right: 6px;
}
.nav-toggle:hover span:nth-child(2) {
  width: 20px;
  margin-right: 0;
}

/* ─── mobile offcanvas ─────────────────────────────────────── */
.mobile-menu {
  --bs-offcanvas-width: 100vw; /* full-screen menu on mobile */
  background: linear-gradient(160deg, #0c1e32 0%, #0a3466 60%, #16325c 100%);
  color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.mobile-menu .offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px 24px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .menu-close {
  margin-left: auto;
} /* cross at the extreme right */
.mobile-menu-logo {
  height: 46px;
  width: auto;
}
.menu-close {
  width: 44px;
  height: 44px;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.3s;
}
.menu-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
}
.menu-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.menu-close:hover {
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.14);
}

.mobile-menu .offcanvas-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 32px;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: baseline;
  gap: 16px;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.3s,
    padding-left 0.3s;
}
.mobile-nav a:hover {
  color: var(--c-beige);
  padding-left: 10px;
}
.mobile-menu.show .mobile-nav a {
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu.show .mobile-nav a:nth-child(1) {
  transition-delay: 0.12s;
}
.mobile-menu.show .mobile-nav a:nth-child(2) {
  transition-delay: 0.19s;
}
.mobile-menu.show .mobile-nav a:nth-child(3) {
  transition-delay: 0.26s;
}
.mobile-menu.show .mobile-nav a:nth-child(4) {
  transition-delay: 0.33s;
}
.mobile-menu.show .mobile-nav a:nth-child(5) {
  transition-delay: 0.4s;
}
.mobile-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}
.mobile-menu-social {
  display: flex;
  justify-content: center;
  gap: 22px;
}
.mobile-menu-social a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  transition:
    color 0.3s,
    transform 0.3s;
}
.mobile-menu-social a:hover {
  color: #fff;
  transform: translateY(-3px);
}

/* screen-reader-only copy (kept in the DOM for SEO, never painted) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* ─── hero ─────────────────────────────────────────────────── */
/* the launch banner is a finished creative — no height is set anywhere:
   the image sits in normal flow at its natural height and the section
   grows with it, so nothing is ever cropped or stretched. The top pad
   drops the artwork clear of the fixed header, keeping the RERA strip
   and QR readable. */
.hero {
  position: relative;
  padding-top: var(--header-h);
  background: #000618; /* = the banner's own top edge, so the translucent
                          header reads as part of the artwork */
}
.hero-bg,
.hero-bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* Short landscape viewports — a phone turned sideways, a laptop with a lot of
   browser chrome — would otherwise push the artwork's RERA strip and QR below
   the fold. Cap the height and scale the whole cut down inside it: `contain`
   letterboxes against the hero's own #000618 rather than cropping, so no part
   of the legal copy is ever lost. */
@media (orientation: landscape) and (max-height: 640px) {
  .hero-bg img {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    object-fit: contain;
    object-position: center;
  }
}

/* nothing is painted over the banner — .hero-content only carries the
   screen-reader copy, and the CTAs live in the header, the floating
   buttons and the fixed mobile bar */
.hero-title {
  font-family: "AdorHairline", "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  /* the supplied cut is Regular only — thicken its strokes for the Figma
     AdorHairline-Bold look (deterministic in every browser) */
  -webkit-text-stroke: 2.2px currentColor;
  paint-order: stroke fill;
  font-size: clamp(38px, 3.65vw, 70px);
  line-height: 1.214; /* 85/70 */
  color: #fff;
  max-width: 13em;
  margin: 0 0 clamp(16px, 1.5vw, 28px);
}
.hero-sub {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  color: #fff;
  margin: 0 0 clamp(24px, 2.4vw, 47px);
}

/* floating action buttons */
.float-actions {
  position: fixed;
  right: clamp(16px, 2vw, 40px);
  bottom: clamp(16px, 3vw, 48px);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s;
  cursor: pointer;
}
.fab:hover {
  transform: translateY(-4px) scale(1.06);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}
.fab--wa {
  background: var(--c-wa);
}
.fab--call {
  background: var(--c-call);
  font-size: 18px;
}
.fab--chat {
  background: var(--c-navy-1);
  font-size: 18px;
}

/* fixed bottom CTA bar — mobile only */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1041;
  display: flex;
  height: 45px;
  box-shadow: 0 -8px 24px rgba(12, 30, 50, 0.18);
}
.mcta {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.3s;
}
.mcta:hover {
  filter: brightness(1.08);
}
.mcta--call {
  background: #fff;
  color: var(--c-navy-2);
}
.mcta--call i {
  font-size: 15px;
}
.mcta--enquire {
  background: var(--grad-pill);
  color: #fff;
}
.mcta--enquire .star-ico {
  width: 11px;
  height: 11px;
  flex-basis: 11px;
}

/* ─── overview ─────────────────────────────────────────────── */
.overview {
  overflow: hidden;
}
.deco-overview-left {
  left: -4%;
  top: clamp(300px, 28.8vw, 553px);
  width: clamp(160px, 16.8vw, 322px);
}
.deco-overview-mid {
  left: 12.3%;
  top: clamp(340px, 32.3vw, 620px);
  width: clamp(230px, 24.6vw, 472px);
}
.deco-overview-sm {
  right: 4.6%;
  top: clamp(680px, 64vw, 1228px);
  width: clamp(80px, 7.7vw, 148px);
}

.overview-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4.6vw, 88px);
  align-items: stretch;
  padding-top: clamp(60px, 5.6vw, 108px);
  padding-left: clamp(0px, 4.1vw, 79px);
}
/* the heading owns its own row across both columns */
.overview-title {
  grid-column: 1 / -1;
  padding-top: 0;
  margin-bottom: clamp(24px, 2.5vw, 48px);
  /* No `white-space: nowrap` here. It used to force every hand-set line to
     paint at its natural width, so an over-long line silently overflowed the
     grid cell and printed on top of .overview-copy instead of wrapping.
     Wrapping is the safer failure: the <br>s still control the intended
     breaks, and anything too long now folds rather than collides. */
  overflow-wrap: break-word;
}
/* photo and copy share one row, so both start on the same line and the row
   height (set by the taller of the two) makes them end level as well */
.overview-photo {
  grid-column: 1;
  position: relative;
  margin: 0;
  min-height: clamp(260px, 26vw, 394px);
}
/* absolutely positioned so the photo's own intrinsic height never inflates the
   row — the copy column alone sets the height, and the image fills it */
.overview-photo a {
  display: block;
  position: absolute;
  inset: 0;
}
.overview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overview-copy {
  grid-column: 2;
  padding-top: 0;
}
.overview-copy p {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  margin-bottom: 1.78em;
}
.overview-signoff {
  color: var(--c-brown);
  font-weight: 400;
}
.overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(24px, 2vw, 40px);
}

.overview-rule {
  border: 0;
  border-top: 1px solid rgba(51, 51, 51, 0.2);
  margin: clamp(40px, 4.06vw, 78px) 0 0 38.5%; /* starts under the text column, Figma x≈750 */
  opacity: 1;
}

/* plans / configurations */
.plans {
  padding-top: clamp(48px, 4.9vw, 95px);
}
.plans-head {
  position: relative;
}
/* heading over copy, both centred: the note is now a two-paragraph block, far
   too tall for the 446px side column it used to sit in */
.plans-title {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.plans-note {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  margin: clamp(20px, 2vw, 34px) auto 0;
  max-width: 900px;
  text-align: center;
}
.plans-note p {
  margin: 0;
}
.plans-note p + p {
  margin-top: clamp(12px, 1.1vw, 20px);
}
@media (min-width: 1200px) {
  /* desktop: heading holds the left column, the copy runs alongside it */
  .plans-head {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: center;
  }
  .plans-title {
    text-align: left;
    margin-inline: 0;
  }
  .plans-note {
    text-align: left;
    margin: 0;
    max-width: 700px;
  }
}
.pill-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 40px);
  margin-top: clamp(28px, 3vw, 58px);
}
.pill-tabs .btn-pill--outline .star-ico {
  display: none;
}

/* The card is the slider frame; .plan-slide carries the two-column layout,
   so a whole unit — drawing plus its details — travels as one slide. */
.plan-card {
  margin-top: clamp(40px, 4.2vw, 80px);
  margin-left: clamp(0px, 4.1vw, 79px); /* Figma card x=169 */
  padding-bottom: clamp(60px, 7.6vw, 147px);
}
.plan-slide {
  display: grid;
  grid-template-columns: minmax(0, 735fr) minmax(0, 670fr);
  column-gap: clamp(32px, 7.3vw, 256px);
  align-items: center;
}
.plan-figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--c-line); /* keeps the frame readable on white */
  padding: clamp(20px, 2.08vw, 40px);
  aspect-ratio: 735/570;
}
/* tab switch: the whole card leaves to the left and the new one enters from
   the right. .is-entering mutes the transition for the one frame the card is
   parked off-stage (see the plan tabs in js/main.js). */
.plan-card .plan-swiper,
.plan-card .plan-pagination {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.plan-card.is-leaving .plan-swiper,
.plan-card.is-leaving .plan-pagination {
  opacity: 0;
  transform: translateX(-40px);
}
.plan-card.is-entering .plan-swiper,
.plan-card.is-entering .plan-pagination {
  opacity: 0;
  transform: translateX(40px);
  transition: none;
}
.plan-figure-inner {
  position: relative;
  background: var(--c-brown);
  min-height: clamp(260px, 25.5vw, 490px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* ─── floor-plan slider ──────────────────────────────────────
   The slider spans the whole card; the dots sit outside .plan-swiper, under
   the card, so Swiper never clips them. The "Enquire for Price" button stays
   centred over the drawing by the flex parent. */
.plan-swiper {
  width: 100%;
}
.plan-figure-inner img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.9;
  padding: 4%;
}
.plan-price-btn {
  position: relative;
  z-index: 2;
}
/* dots ride under the whole card now, not over the drawing, because the copy
   column slides with the image */
.plan-pagination.swiper-pagination {
  position: static;
  margin-top: clamp(20px, 2vw, 36px);
  display: flex;
  justify-content: center;
  gap: 8px;
  line-height: 0;
}
.plan-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0; /* gap handles the spacing */
  background: var(--c-brown);
  opacity: 0.3;
  transition: opacity 0.25s, transform 0.25s;
}
.plan-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.25);
}
/* a variant with a single drawing has nothing to slide between */
.plan-swiper.is-single ~ .plan-pagination {
  display: none;
}
.plan-towers {
  font-weight: 400;
  font-size: clamp(15px, 0.94vw, 18px);
  margin: 0 0 10px;
}
.plan-type {
  font-size: clamp(34px, 2.6vw, 50px);
  line-height: 1.5;
  font-weight: 500; /* Figma: AdorHairline-Medium */
}
.plan-tagline {
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 20px);
  color: var(--c-brown);
  margin: 6px 0 0;
}
.plan-rule {
  border: 0;
  border-top: 1px solid rgba(51, 51, 51, 0.25);
  margin: clamp(14px, 1.3vw, 25px) 0;
  opacity: 1;
}
.plan-area {
  font-weight: 400;
  font-size: clamp(18px, 1.25vw, 24px);
  color: var(--c-navy-2);
  margin: 0 0 clamp(14px, 1.3vw, 25px);
}
.plan-desc {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 2;
  margin: 0;
}

/* ─── location ─────────────────────────────────────────────── */
.location {
  overflow: hidden;
}
.location-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 714px);
  gap: clamp(24px, 3vw, 60px);
  padding-top: clamp(60px, 5.3vw, 101px);
  align-items: start;
}
.location-intro {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  margin: 0;
  padding-top: 10px;
}
.location-intro p {
  margin: 0;
}
.location-intro p + p {
  margin-top: clamp(12px, 1.1vw, 20px);
}

.location-body {
  display: grid;
  grid-template-columns: minmax(0, 471fr) minmax(0, 1171fr);
  gap: clamp(28px, 5.2vw, 98px);
  margin-top: clamp(40px, 4.06vw, 78px);
  padding-bottom: clamp(60px, 4.3vw, 82px);
  align-items: stretch; /* map matches the accordion's height */
}
.location-map {
  align-self: stretch;
  display: flex;
}
.loc-accordion {
  border: 1px solid rgba(138, 117, 100, 0.7);
  padding: clamp(20px, 2.08vw, 40px);
}
.loc-item + .loc-item {
  border-top: 1px solid rgba(138, 117, 100, 0.35);
}
.loc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  padding: clamp(16px, 2.05vw, 39px) 0; /* Figma: 124px title-to-title rhythm */
  font-family: var(--font-display);
  font-size: clamp(20px, 1.35vw, 26px);
  color: var(--c-brown);
  text-transform: capitalize;
  cursor: pointer;
  text-align: left;
  font-weight: 500; /* Figma: AdorHairline-Medium */
}
/* exact Figma chevron (curved caret, points up in the asset) */
.loc-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 10px;
  background: url("../assets/svg/chevron.svg") center / contain no-repeat;
  transform: rotate(180deg); /* closed: points down */
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.loc-item.is-open .loc-chevron {
  transform: rotate(0deg); /* open: points up, as drawn */
}
.loc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.loc-item.is-open .loc-panel {
  grid-template-rows: 1fr;
}
.loc-panel > * {
  overflow: hidden;
  min-height: 0;
}
.loc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.loc-item.is-open .loc-list {
  padding-bottom: clamp(10px, 1vw, 18px);
}
.loc-list li {
  display: grid;
  grid-template-columns: 1fr auto; /* name flexes, distance pinned to the panel edge */
  align-items: baseline;
  gap: 12px 24px;
  font-family: "Manrope", var(--font-body);
  font-weight: 200; /* Figma: Manrope Thin (100) — 200 is Google's lightest cut */
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 2;
  padding-left: 14px;
  position: relative;
}
.loc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1em - 2px); /* centred on the first line box (line-height: 2) */
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-ink);
}
.loc-list li i {
  font-style: italic;
  white-space: nowrap;
  justify-self: end;
  font-variant-numeric: tabular-nums; /* 0.1 / 1.1 / 14.8 line up digit-for-digit */
}

.location-map {
  margin: 0;
}
.location-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.location-map a {
  display: block;
  overflow: hidden;
  flex: 1;
  min-height: 100%;
}
.location-map a:hover img {
  transform: scale(1.02);
}
/* map links out to Google Maps in a new tab, so it needs a visible affordance */
.location-map-link {
  position: relative;
}
.location-map-cta {
  position: absolute;
  right: clamp(12px, 1.2vw, 22px);
  bottom: clamp(12px, 1.2vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--c-brown);
  color: #fff;
  font-family: "Manrope", var(--font-body);
  font-weight: 300;
  font-size: clamp(12px, 0.73vw, 14px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease;
}
.location-map-link:hover .location-map-cta {
  transform: translateY(-2px);
}

/* ─── amenities (dark) ─────────────────────────────────────── */
.amenities {
  position: relative;
  background: var(--c-brown);
  overflow: hidden;
  padding-block: clamp(56px, 4.7vw, 91px) clamp(48px, 3.6vw, 70px);
}
.amenities::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/amenities-texture.jpg") center/cover;
  opacity: 0.02;
  pointer-events: none;
}
.amenities::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.amenities > :not(.deco, .amenities-watermark) {
  position: relative;
  z-index: 1;
}
.amenities-watermark {
  position: absolute;
  left: 50%;
  top: clamp(24px, 3.6vw, 70px);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(110px, 16.15vw, 310px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  z-index: 0 !important;
  pointer-events: none;
}
.deco-amenities {
  left: -3.2%;
  bottom: -22%;
  width: clamp(240px, 25.6vw, 492px);
  opacity: 0.5;
}
.amenities-title {
  color: #fff;
  text-align: center;
}
.amenities-sub {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  max-width: 760px;
  margin: clamp(6px, 0.5vw, 10px) auto 0;
}

.amenities-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 85vw;
  margin: clamp(32px, 3.2vw, 62px) auto 0;
  padding-inline: clamp(
    64px,
    8.6vw,
    165px
  ); /* room for the circle arrows inside 85vw */
}
.amenities-swiper {
  overflow: hidden;
}
.amenity-card {
  margin: 0;
}
.amenity-card img {
  width: 100%;
  aspect-ratio: 433/529;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.amenity-card figcaption {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.3vw, 25px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin-top: clamp(12px, 1.5vw, 28px);
  font-weight: 500; /* Figma: AdorHairline-Medium */
}

/* circular slider arrows (109px on desktop) */
.slider-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: clamp(56px, 5.68vw, 109px);
  height: clamp(56px, 5.68vw, 109px);
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--c-brown);
  color: var(--c-brown);
  font-size: clamp(16px, 1.2vw, 23px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10; /* always above slides */
  transition:
    background-color 0.35s,
    color 0.35s,
    transform 0.35s;
}
.slider-arrow:hover {
  background: var(--c-brown);
  color: var(--c-cream);
  transform: translateY(-50%) scale(1.05);
}
.slider-arrow--light {
  border-color: var(--c-cream);
  color: var(--c-cream);
}
.slider-arrow--light:hover {
  background: var(--c-cream);
  color: var(--c-brown);
}
.slider-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.amenities-prev {
  left: clamp(8px, 1vw, 20px);
}
.amenities-next {
  right: clamp(8px, 1vw, 20px);
}

/* ─── gallery ──────────────────────────────────────────────── */
.gallery {
  overflow: hidden;
  padding-top: clamp(56px, 4.7vw, 90px);
}
.deco-gallery {
  right: 22%;
  bottom: 2%;
  width: clamp(70px, 6.2vw, 119px);
  z-index: 2;
} /* overlaps the card frame per Figma */
.deco-gallery-fan {
  left: -3.2%;
  top: -21.6%;
  width: clamp(240px, 25.6vw, 492px);
}
.gallery .pill-tabs {
  margin-top: clamp(24px, 2.7vw, 52px);
}

.gallery-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 85vw; /* same container rhythm as every section */
  margin-inline: auto;
  margin-top: clamp(28px, 2.9vw, 56px);
  padding-bottom: clamp(56px, 4.7vw, 90px);
}
/* geometry: each slide box is the STEP width (Figma: adjacent card centres are
   274.5px apart at 1920w) and the full-size card is absolutely centred on it —
   all positions are pure CSS, exact on every step, no runtime measuring */
.gallery-swiper {
  overflow: hidden; /* the stage clips sliding cards — nothing escapes it */
  height: calc(
    clamp(12px, 1.3vw, 25px) +
      (min(1292px, 67.3vw) - 2 * clamp(12px, 1.3vw, 25px)) * 0.562 +
      clamp(20px, 1.82vw, 35px) * 2.16
  );
}
.gallery-swiper .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gallery-swiper .swiper-slide {
  width: min(274.5px, 14.3vw); /* the step */
  z-index: 1;
  opacity: 0; /* Figma shows only the active card + one neighbor per side */
  pointer-events: none;
  transition: opacity 0.55s ease 0.18s;
}
.gallery-swiper .swiper-slide-active,
.gallery-swiper .swiper-slide-prev,
.gallery-swiper .swiper-slide-next {
  opacity: 1;
  pointer-events: auto;
}
.gallery-swiper .swiper-slide-active {
  z-index: 5;
}
.gallery-card {
  background: #fff;
  padding: clamp(12px, 1.3vw, 25px) clamp(12px, 1.3vw, 25px) 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  margin: 0;
}
.gallery-swiper .gallery-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1292px, 67.3vw);
  transform: translate(-50%, 0) scale(0.798);
  transform-origin: center center; /* side cards stay vertically centred */
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gallery-swiper .swiper-slide-active .gallery-card {
  transform: translate(-50%, 0) scale(1);
}
.gallery-swiper .swiper-slide:not(.swiper-slide-active) .gallery-card {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
}
.gallery-card img {
  width: 100%;
  aspect-ratio: 1242/698;
  object-fit: cover;
  display: block;
}
.gallery-card figcaption {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.82vw, 35px);
  line-height: 2.16;
  text-transform: uppercase;
  color: var(--c-brown);
  text-align: center;
  font-weight: 500; /* Figma: AdorHairline-Medium */
}
.gallery-prev {
  left: -6.6vw; /* centred in the outer 7.5vw margin, off the stage */
}
.gallery-next {
  right: -6.6vw;
}

/* ─── construction ─────────────────────────────────────────── */
.construction {
  display: none; /* temporarily hidden per client — delete this line to restore */
  padding-top: clamp(56px, 3.7vw, 71px);
}
.construction-sub {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  text-align: center;
  margin: clamp(6px, 0.8vw, 14px) 0 0;
}
.construction-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 85vw;
  margin: clamp(30px, 3vw, 58px) auto 0;
  padding-inline: clamp(56px, 4.7vw, 90px);
  padding-bottom: clamp(48px, 4vw, 76px);
}
.construction-swiper {
  overflow: hidden;
}
.construction-card {
  margin: 0;
}
.construction-card img {
  width: 100%;
  aspect-ratio: 534/554;
  object-fit: cover;
  display: block;
}
.construction-card figcaption {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.82vw, 35px);
  line-height: 2.16;
  color: var(--c-brown);
  text-transform: capitalize;
  text-align: center;
  font-weight: 500; /* Figma: AdorHairline-Medium */
}
.construction-prev {
  left: clamp(4px, 0.5vw, 10px);
}
.construction-next {
  right: clamp(4px, 0.5vw, 10px);
}

/* ─── testimonials ─────────────────────────────────────────── */
.testimonials {
  padding-top: clamp(56px, 4.7vw, 90px);
}
.testimonials-rule {
  border: 0;
  border-top: 1px solid #bdbdbd;
  margin: clamp(28px, 2.9vw, 56px) 0 0;
  opacity: 1;
}
.testimonials-body {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 1198fr);
  gap: clamp(32px, 4.6vw, 88px);
  padding-block: clamp(36px, 3.5vw, 68px) clamp(48px, 4.3vw, 82px);
}
.testimonials-left {
  position: relative;
}
.quote-ico {
  position: absolute;
  right: 0;
  top: clamp(-6px, -0.3vw, 0px);
  width: clamp(52px, 4.7vw, 91px);
  opacity: 0.2; /* Figma: group opacity 20% */
}
.t-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.46vw, 28px);
  line-height: 1.69;
  color: var(--c-dark);
  text-transform: capitalize;
  margin: 0 0 clamp(8px, 0.75vw, 14px);
}
.t-meta {
  font-weight: 400;
  font-size: clamp(13px, 0.83vw, 16px);
  color: var(--c-muted);
  margin: 0 0 clamp(24px, 2.9vw, 56px);
}
.t-text {
  font-weight: 400;
  font-size: clamp(16px, 1.04vw, 20px);
  /* line-height: 1.8; */
  margin: 0;
  max-width: 540px;
}
.t-text + .t-text {
  margin-top: clamp(12px, 1.1vw, 20px);
}
.t-arrows {
  display: flex;
  gap: clamp(16px, 2vw, 40px);
  margin-top: clamp(28px, 4vw, 77px);
}
.t-arrows .slider-arrow {
  position: static;
  transform: none;
}
.t-arrows .slider-arrow:hover {
  transform: scale(1.05);
}

.testimonials-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.3vw, 44px);
  align-items: start;
  padding-top: clamp(0px, 4vw, 76px);
}
@media (min-width: 1200px) {
  .testimonials-videos {
    margin-right: -68px;
  } /* Figma: second card bleeds past the container */
}
.t-video {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.t-video img {
  width: 100%;
  aspect-ratio: 577/308;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--c-brown);
  transition: transform 0.7s ease;
}
.t-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: background-color 0.4s;
}
.t-video:hover img {
  transform: scale(1.05);
}
.t-video:hover::after {
  background: rgba(0, 0, 0, 0.1);
}
.t-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 63px;
  height: 41px;
  border-radius: 999px;
  background: var(--grad-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.t-video:hover .t-play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* ─── about ────────────────────────────────────────────────── */
.about {
  position: relative;
  overflow: hidden;
}
.about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(9px) saturate(1.05); /* Figma: blurred aerial with warm wash */
  transform: scale(1.05);
}
.about::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(228, 178, 116, 0.25);
  pointer-events: none;
}
.about-panel {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 40px));
  margin: clamp(60px, 5.2vw, 100px) auto;
  background: rgba(255, 255, 255, 0.97);
  overflow: hidden;
  padding: clamp(48px, 4.2vw, 81px) clamp(24px, 2vw, 40px)
    clamp(80px, 9.6vw, 184px);
}
.about-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 142.7%;
  max-width: none;
  pointer-events: none;
}
.about-content {
  position: relative;
  z-index: 1;
  max-width: 645px;
  margin-inline: auto;
  text-align: center;
}
.about-content .h-display {
  white-space: nowrap;
} /* Figma: exactly 3 centered lines */
.about-logo {
  width: clamp(160px, 12.1vw, 232px);
  margin-bottom: clamp(28px, 2.6vw, 51px);
}
.about-copy {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  max-width: 543px;
  margin: clamp(20px, 1.7vw, 32px) auto 0;
}

/* ─── footer: faq ──────────────────────────────────────────── */
.footer {
  overflow: hidden;
}
.deco-footer-lg {
  right: 4.9%;
  top: clamp(760px, 79vw, 1482px);
  width: clamp(100px, 10vw, 192px);
}
.deco-footer-sm {
  right: 12.9%;
  top: clamp(810px, 84vw, 1577px);
  width: clamp(44px, 4.3vw, 82px);
}
.deco-footer-l1 {
  left: 1.9%;
  top: clamp(720px, 74.8vw, 1404px);
  width: clamp(36px, 3.3vw, 64px);
}
.deco-footer-l2 {
  left: 5.2%;
  top: clamp(726px, 75.4vw, 1415px);
  width: clamp(36px, 3.3vw, 64px);
}

.faq-title {
  padding-top: clamp(60px, 5.2vw, 100px);
  line-height: 1; /* Figma: 70/70 on this heading only */
}
.faq {
  margin-top: clamp(36px, 4.4vw, 85px);
}
.faq-item {
  border-bottom: 1px solid var(--c-line);
}
.faq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(16px, 1.8vw, 34px) 0;
  cursor: pointer;
}
.faq-q {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.56vw, 30px);
  line-height: 1.5;
  color: var(--c-brown);
  text-transform: capitalize;
  margin: 0;
  transition: opacity 0.3s;
}
.faq-row:hover .faq-q {
  opacity: 0.75;
}
.faq-btn {
  flex: 0 0 auto;
  min-width: 115px;
  height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-soft);
  color: var(--c-soft);
  font-family: "PP Neue Montreal", "Inter", var(--font-body);
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  transition:
    border-color 0.35s,
    color 0.35s,
    transform 0.35s;
}
.faq-btn:hover {
  transform: translateY(-2px);
}
.faq-btn-open {
  display: none;
}
.faq-item.is-open .faq-btn {
  border-color: var(--c-navy-2);
}
.faq-item.is-open .faq-btn-open {
  display: inline;
  background: var(--grad-pill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.faq-item.is-open .faq-btn-closed {
  display: none;
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}
/* single wrapper child: the 0fr→1fr row only clips ONE grid item, so every
   paragraph of an answer has to live inside it */
.faq-a-in {
  overflow: hidden;
}
.faq-a p {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  max-width: 1253px;
  margin: 0;
}
.faq-a p + p {
  margin-top: clamp(12px, 1.1vw, 20px);
}
.faq-item.is-open .faq-a-in {
  padding-bottom: clamp(18px, 1.8vw, 34px);
}

/* ─── footer: contact ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 777px); /* form column x=1053..1830 per Figma */
  gap: clamp(32px, 3vw, 60px);
  padding-top: clamp(64px, 8.3vw, 160px);
}
.contact-note {
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.78;
  max-width: 400px;
  margin: clamp(20px, 2.2vw, 42px) 0 0 clamp(0px, 7.8vw, 149px);
}
.contact-left h2 {
  max-width: 100%;
  overflow-wrap: break-word;
}
/* site address — indented to line up with .contact-note above it */
.contact-address {
  font-style: normal;
  font-family: "Manrope", var(--font-body);
  font-weight: 300;
  font-size: clamp(14px, 0.88vw, 17px);
  line-height: 1.85;
  margin: clamp(20px, 2.2vw, 40px) 0 0 clamp(0px, 7.8vw, 149px);
  max-width: 400px;
}
.contact-address-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(15px, 0.94vw, 18px);
  color: var(--c-brown);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.contact-form-title {
  font-family: var(--font-seasons);
  font-weight: 400;
  font-size: clamp(32px, 3.13vw, 60px);
  line-height: 1.33;
  color: var(--c-brown);
  text-transform: capitalize;
  margin: 0 0 clamp(24px, 2.6vw, 50px);
}

/* lead form (footer + modal) */
.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3.5vw, 67px);
  row-gap: clamp(24px, 2.1vw, 40px);
  max-width: 721px;
}
.lead-field {
  position: relative;
}
.lead-field--phone {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.lead-prefix {
  font-family: "Inter", var(--font-body);
  font-size: clamp(
    16px,
    0.94vw,
    18px
  ); /* 16px floor: prevents iOS focus zoom */
  color: var(--c-ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-brown);
}
.lead-label {
  display: block;
  font-family: "Inter", var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--c-brown);
  margin-bottom: 4px;
}
.lead-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-brown);
  border-radius: 0;
  font-family: "Inter", var(--font-body);
  font-weight: 400; /* Figma: Inter Regular */
  font-size: clamp(
    16px,
    0.94vw,
    18px
  ); /* 16px floor: prevents iOS focus zoom */
  color: var(--c-ink);
  padding: 8px 0 12px;
  transition: border-color 0.3s;
}
.lead-field--phone .lead-input {
  flex: 1;
  padding-left: 10px;
}
.lead-field--phone .lead-label {
  width: 100%;
}
.lead-input::placeholder {
  color: var(--c-ink);
  opacity: 1;
}
.lead-input:focus {
  outline: none;
  border-bottom-color: var(--c-navy-2);
}
.lead-input.is-invalid {
  border-bottom-color: #b3261e;
}
.lead-error {
  position: absolute;
  top: 100%;
  left: 0; /* always directly below the underline */
  font-family: "Inter", var(--font-body);
  font-size: 12.5px;
  color: #b3261e;
  margin: 3px 0 0;
  min-height: 0;
}
.lead-error--consent {
  position: static;
}

.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-family: "Inter", var(--font-body);
  font-weight: 400; /* Figma: Inter Regular */
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.6;
  color: var(--c-brown);
  margin-top: clamp(28px, 3.1vw, 60px);
  cursor: pointer;
  max-width: 721px;
}
.lead-consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lead-check {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  border: 1px solid var(--c-brown);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.lead-check::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  margin-top: -2px;
  opacity: 0;
  transform: rotate(-45deg) scale(0.4);
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.lead-consent input:checked + .lead-check {
  background: var(--c-navy-2);
  border-color: var(--c-navy-2);
}
.lead-consent input:checked + .lead-check::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}
.lead-consent.is-invalid .lead-check {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}
.lead-error--consent {
  font-size: 14px;
  margin-top: 6px;
}
.lead-submit {
  margin-top: clamp(24px, 2.1vw, 41px);
  min-width: 166px;
}

/* Brand row — now a normal child of .contact-left, indented to line up with
   the note and address above it. The old rule pulled it up with a negative
   margin of -80 to -120px so it would sit beside the form; that is what put
   the QR codes under the Submit button. */
.footer-brandrow {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.5vw, 28px);
  margin: clamp(32px, 3.2vw, 62px) 0 0 clamp(0px, 7.8vw, 149px);
  min-height: 130px;
  width: fit-content;
  max-width: 100%;
  user-select: none;
}
/* sized to sit inside the contact column, not span the page */
.footer-logo {
  width: clamp(150px, 11.5vw, 220px);
  flex-shrink: 0;
}
.footer-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(51, 51, 51, 0.8);
}
.footer-qr {
  width: clamp(64px, 4.6vw, 88px);
  flex-shrink: 0;
}

/* mandatory KARERA registration line — shares the brand row's left indent so
   it reads as part of that lockup rather than a stray line of body copy */
.footer-rera {
  margin: clamp(12px, 1.2vw, 20px) 0 0 clamp(0px, 7.8vw, 149px);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c-brown);
}
.footer-rera span {
  font-weight: 500;
  color: var(--c-ink);
  overflow-wrap: anywhere; /* the number must never widen the column */
}
.footer-disclaimer {
  font-size: 12px;
  line-height: 1.83;
  margin: clamp(40px, 4.7vw, 90px) 0 0;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(20px, 2vw, 38px) 0 clamp(16px, 1.3vw, 26px);
}
.footer-copy {
  font-family:
    "Myriad Pro", var(--font-body); /* Figma: Myriad Pro (renders if installed) */
  font-weight: 400;
  font-size: clamp(14px, 0.94vw, 18px);
  color: var(--c-brown);
  margin: 0;
}
.footer-social {
  display: flex;
  gap: clamp(12px, 1vw, 20px);
}
.footer-social a {
  color: var(--c-navy-2);
  font-size: 18px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.footer-social a:hover {
  transform: translateY(-3px);
  opacity: 0.75;
}
.footer-credit {
  height: 18px;
  width: auto;
}

/* ─── enquiry modal ────────────────────────────────────────── */
.enquiry-modal .modal-dialog {
  max-width: 560px;
}
.enquiry-modal .modal-content {
  position: relative;
  background: var(--c-page);
  border: 0;
  border-radius: 18px;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3.4vw, 48px);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.4);
}
.enquiry-modal .modal-content::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--grad-pill);
}
.enquiry-modal .modal-content > :not(.modal-x, .modal-sparkle, .modal-loader) {
  position: relative;
  z-index: 1;
}

/* smooth premium open/close */
.enquiry-modal.fade .modal-dialog {
  transform: translateY(46px) scale(0.94);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
}
.enquiry-modal.show .modal-dialog {
  transform: none;
  opacity: 1;
}
.modal-backdrop.show {
  opacity: 0.6;
}

.modal-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--c-brown);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3 !important;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.3s;
}
.modal-x span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 1.5px;
  background: var(--c-brown);
  transition: background-color 0.3s;
}
.modal-x span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-x span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal-x:hover {
  transform: rotate(90deg);
  background: var(--c-brown);
}
.modal-x:hover span {
  background: var(--c-cream);
}

.modal-sparkle {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 130px;
  height: 130px;
  background: var(--c-brown);
  opacity: 0.12;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7 17 11.1 24 12c-7 .9-11.1 5-12 12-.9-7-5-11.1-12-12C7 11.1 11.1 7 12 0Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7 17 11.1 24 12c-7 .9-11.1 5-12 12-.9-7-5-11.1-12-12C7 11.1 11.1 7 12 0Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.modal-title-lp {
  font-family: var(--font-seasons);
  font-size: clamp(28px, 4.5vw, 38px);
  color: var(--c-brown);
  margin: 0 0 8px;
}
.modal-sub {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0 0 clamp(20px, 3vw, 34px);
}
.enquiry-modal .lead-field {
  margin-bottom: 32px;
} /* room for the error line below the underline */
.enquiry-modal .lead-submit {
  margin-top: 8px;
}

/* modal loader + success */
.modal-loader,
.page-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(225, 198, 166, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.page-loader {
  position: fixed;
  z-index: 2000;
  background: rgba(12, 30, 50, 0.45);
}
.modal-loader.is-active,
.page-loader.is-active {
  display: flex;
}
.loader-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(33, 80, 147, 0.25);
  border-top-color: var(--c-navy-2);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.modal-success {
  display: none;
  text-align: center;
  padding: clamp(24px, 3vw, 40px) 0 clamp(8px, 1vw, 16px);
}
.modal-success.is-active {
  display: block;
  animation: successIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes successIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.success-ico {
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--grad-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  animation: successPop 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.15s both;
}
@keyframes successPop {
  from {
    transform: scale(0);
  }
}
.modal-success h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-brown);
  font-size: 30px;
}
.modal-success p {
  color: var(--c-ink);
  font-size: 15px;
  margin: 0;
}

/* ═══ responsive ════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .plans-note {
    max-width: 640px;
  }
  .gallery-swiper .swiper-slide {
    width: min(1292px, 86vw);
  }
}

/* ─── fancybox theme ───────────────────────────────────────── */
.fancybox__backdrop {
  background: rgba(12, 30, 50, 0.92);
}
.fancybox__caption {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0.02em;
}
.fancybox__caption a {
  color: var(--c-beige);
  text-decoration: underline;
}
.gallery-card a,
.amenity-card a,
.construction-card a {
  display: block;
  cursor: zoom-in;
}
.overview-photo a {
  cursor: zoom-in;
}
.location-map-link {
  cursor: pointer; /* leaves the page for Google Maps, not a lightbox */
}
.plan-figure-inner img {
  cursor: pointer; /* opens the enquiry modal */
}
/* The form column is capped at 777px. Between ~992px and ~1280px that left
   almost nothing for the text column, so the heading, note and address each
   collapsed to roughly one word per line and the heading printed over the
   Full Name field. Stack the two columns before that band is reached.
   NOTE: must sit after the base .contact-* / .footer-brandrow rules — media
   queries carry no extra specificity, so an earlier block loses to a later
   plain rule and the margin-left reset silently does nothing. */
@media (max-width: 1279.98px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-note,
  .contact-address,
  .footer-brandrow,
  .footer-rera {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  /* make room for the fixed bottom CTA bar */
  body {
    padding-bottom: 58px;
  }
  .float-actions {
    bottom: calc(58px + 16px);
  }

  /* sliders: one image at a time, arrows centered below the image */
  .amenities-slider-wrap,
  .gallery-slider-wrap,
  .construction-slider-wrap {
    text-align: center;
    padding-bottom: clamp(40px, 8vw, 60px);
    padding: 0px;
  }
  .amenities-slider-wrap .slider-arrow,
  .gallery-slider-wrap .slider-arrow,
  .construction-slider-wrap .slider-arrow {
    position: static;
    transform: none;
    display: inline-flex;
    width: 56px;
    height: 56px;
    margin: 26px 10px 0;
  }
  .amenities-slider-wrap .slider-arrow:hover,
  .gallery-slider-wrap .slider-arrow:hover,
  .construction-slider-wrap .slider-arrow:hover {
    transform: scale(1.05);
  }
  /* mobile: one full-width card per step, in normal flow */
  .gallery-swiper {
    height: auto;
  }
  .gallery-swiper .swiper-slide {
    width: 100%; /* full stage width — the stage itself is 85vw */
  }
  .gallery-swiper .gallery-card,
  .gallery-swiper .swiper-slide-active .gallery-card {
    position: static;
    transform: none;
    width: 100%; /* one full-width centred card, like the amenities slider */
    margin-inline: auto;
  }
  .gallery-swiper .swiper-slide-prev,
  .gallery-swiper .swiper-slide-next {
    opacity: 0;
    pointer-events: none;
  } /* only one visible image */
  /* minmax(0,1fr) keeps px-sized content (Swiper slides, nowrap text)
     from inflating the tracks — plain 1fr min-sizes to the content */
  .overview-top {
    grid-template-columns: minmax(0, 1fr);
  }
  /* single column: nothing to match heights with, so the photo goes back to
     its own proportions instead of stretching */
  .overview-top {
    padding-left: 0;
  }
  .overview-photo,
  .overview-copy {
    grid-column: 1;
  }
  .overview-photo {
    min-height: 0;
    margin-bottom: 32px;
  }
  /* stacked: no column to match, so the photo goes back in the flow */
  .overview-photo a {
    position: static;
  }
  .overview-photo img {
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 410/394;
  }
  .overview-title {
    padding-left: 0;
    white-space: normal;
  }
  .overview-title br,
  .about-content .h-display br {
    display: none; /* the <br>s encode the 3-line desktop layout only */
  }
  /* floor-plan card: height follows content, centered */
  .plan-card {
    margin-left: 0;
  }
  .plan-figure {
    aspect-ratio: auto;
    margin-bottom: 30px;
  }
  .plan-figure-inner {
    aspect-ratio: 655/490;
    min-height: 0;
  }
  .location-head,
  .location-body {
    grid-template-columns: minmax(0, 1fr);
  }
  /* stacked: no accordion height to match, so fall back to the map's own ratio */
  .location-map img {
    height: auto;
    aspect-ratio: 1171/658;
  }
  .plan-slide {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-note,
  .contact-address {
    margin-left: 0;
  }
  .testimonials-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .testimonials-left,
  .testimonials-videos {
    min-width: 0;
  }
  .testimonials-videos {
    padding-top: 0;
  }
  .footer-brandrow {
    margin-top: 40px;
  }

  /* about: panel nearly fills the width so the blurred bg reads as a thin frame */
  .about-panel {
    width: calc(100% - 24px);
    margin: 40px auto;
    padding-bottom: clamp(56px, 10vw, 90px);
  }

  /* headings wrap naturally on small screens — nowrap is a desktop-fidelity device */
  .overview-title,
  .about-content .h-display {
    white-space: normal;
    margin-bottom: 15px;
  }
  .faq-btn {
    min-width: 96px;
    height: 44px;
    font-size: 15px;
  }
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .lead-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pill-tabs {
    gap: 10px;
  }
  .btn-pill {
    height: 46px;
    padding-inline: 18px;
  }
  .overview-actions .btn-pill {
    width: 100%;
  }
  .testimonials-videos {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery-swiper .swiper-slide {
    width: 100%; /* full stage width — the stage itself is 85vw */
  }
  /* logo on its own centred row, both QRs together centred below */
  .footer-brandrow {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    gap: 26px 24px;
    width: 100%;
  }
  .footer-brandrow .footer-logo {
    grid-column: 1 / -1;
    width: 180px;
  }
  .footer-qr {
    width: 88px;
  }
  .footer-divider {
    display: none;
  }
  .float-actions {
    gap: 12px;
  }
  .fab {
    width: 46px;
    height: 46px;
    font-size: 19px;
  }
}

/* ─── highlights (USP strip under the banner) ──────────────── */
.highlights {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfbf8 0%, #f7f0e6 55%, #f2e8d9 100%);
  border-bottom: 1px solid rgba(138, 117, 100, 0.14);
  padding-block: clamp(40px, 4.6vw, 90px);
}
/* lift the content above the sparkles — scoped to the container, NOT `> *`:
   a bare `> *` here outranks `.deco { position: absolute }` (same specificity,
   declared later), which drops the sparkles back into the flow and pads the
   section's top out by their own height */
.highlights > .container-lp {
  position: relative;
  z-index: 1;
}
.deco-highlights-l {
  left: -1.5%;
  top: 12%;
  width: clamp(60px, 6vw, 116px);
  opacity: 0.55;
}
.deco-highlights-r {
  right: -1%;
  bottom: 8%;
  width: clamp(48px, 4.6vw, 88px);
  opacity: 0.45;
}

/* eyebrow with a hairline rule running out to either side */
.highlights-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 24px);
  margin: 0 0 clamp(26px, 2.6vw, 52px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(11px, 0.73vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.highlights-eyebrow::before,
.highlights-eyebrow::after {
  content: "";
  height: 1px;
  flex: 0 1 clamp(30px, 9vw, 150px);
  background: linear-gradient(90deg, transparent, rgba(138, 117, 100, 0.55));
}
.highlights-eyebrow::after {
  background: linear-gradient(90deg, rgba(138, 117, 100, 0.55), transparent);
}

/* slider stage: side padding reserves the room the arrows sit in, so they
   never overlap a card the way an absolutely-positioned arrow otherwise would */
.highlights-slider-wrap {
  position: relative;
  padding-inline: clamp(56px, 6vw, 120px);
}
.highlights-swiper {
  overflow: hidden;
}
/* equal-height cards: the slide stretches, the card fills it */
.highlights-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.highlights-slider-wrap .slider-arrow {
  top: 50%;
}
.highlights-prev {
  left: 0;
}
.highlights-next {
  right: 0;
}
.highlights-pagination.swiper-pagination {
  position: static;
  margin-top: clamp(18px, 1.8vw, 30px);
  display: flex;
  justify-content: center;
  gap: 8px;
  line-height: 0;
}
.highlights-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0; /* gap handles the spacing */
  background: var(--c-brown);
  opacity: 0.3;
  transition: opacity 0.25s, transform 0.25s;
}
.highlights-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.25);
}

.hl-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: clamp(12px, 1vw, 20px);
  padding: clamp(22px, 2.1vw, 38px) clamp(10px, 1vw, 20px);
  /* solid white, not a wash: at 62% alpha the beige section gradient bled
     through and greyed the whole strip down */
  background: #fffdfa;
  border: 1px solid rgba(138, 117, 100, 0.3);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(138, 117, 100, 0.1);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s,
    border-color 0.45s,
    background-color 0.45s;
}
/* gold hairline that draws in from the centre on hover */
.hl-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--grad-pill);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hl-card:hover {
  transform: translateY(-6px);
  background: #fff;
  border-color: var(--c-beige);
  box-shadow: 0 18px 38px rgba(138, 117, 100, 0.26);
}
.hl-card:hover::after {
  width: 46%;
}

.hl-icon {
  width: clamp(52px, 4.2vw, 76px);
  height: clamp(52px, 4.2vw, 76px);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* solid brown disc — strokes flip to cream so they read against it */
  color: var(--c-cream);
  background: #8a7564;
  border: 1px solid #8a7564;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.45s,
    background 0.45s,
    border-color 0.45s;
}
.hl-icon svg {
  /* glyph fills more of the brown disc; the disc itself is unchanged */
  width: 66%;
  height: 66%;
  display: block;
  /* overrides the stroke-width="1.4" presentation attribute on each icon —
     CSS outranks it, and the paths inherit, so all eight thicken from here */
  stroke-width: 1.8;
}
.hl-card:hover .hl-icon {
  color: #fff;
  background: var(--grad-pill);
  border-color: transparent;
  transform: translateY(-2px) scale(1.06);
}

.hl-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* deeper than --c-brown (#8a7564), which washed out against the card */
  color: #64513f;
  margin: 0;
  /* two lines' worth of room so the longest label ("Vaastu Compliant Homes")
     doesn't push its card taller than the one-line labels beside it */
  min-height: 2.6em;
  text-wrap: balance;
}

/* per-view count (4 → 3 → 2) is set by the Swiper breakpoints in main.js */
@media (max-width: 767.98px) {
  .highlights-eyebrow {
    letter-spacing: 0.18em;
  }
  .deco-highlights-l,
  .deco-highlights-r {
    display: none;
  }
  /* mobile: swipe drives the track, arrows drop to a centred row underneath */
  .highlights-slider-wrap {
    padding-inline: 0;
    text-align: center;
  }
  .highlights-slider-wrap .slider-arrow {
    position: static;
    transform: none;
    display: inline-flex;
    width: 48px;
    height: 48px;
    margin: 20px 8px 0;
  }
  .highlights-slider-wrap .slider-arrow:hover {
    transform: scale(1.05);
  }
  .highlights-pagination.swiper-pagination {
    margin-top: 18px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001s !important;
    animation-duration: 0.001s !important;
  }
}

/* visual-QA mode (?noanim) — final states only, no transitions */
.qa-noanim *,
.qa-noanim *::before,
.qa-noanim *::after {
  transition: none !important;
  animation: none !important;
}