/* ============================================================
   M3M Jacob & Co. — theme
   Dark luxury + gold, serif display headings
   Palette and typography are intentionally unchanged.
   ============================================================ */
/* Fonts are self-hosted in css/fonts.css, loaded from <head> before this file.
   Do not re-add an @import here — it blocks first paint behind a serial chain. */

/* ---------- icons ----------
   Inline SVG sprite replaces Font Awesome. .ico mirrors FA's box so the existing
   font-size / color rules below keep working unchanged: 1em square, currentColor
   fill, and the same -.125em baseline nudge FA applied. */
.svgSprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -.125em;
  flex: none;
}

:root {
  --primary-color: #000;         /* page black */
  --surface: #0d0d0d;            /* section black */
  --surface-2: #141414;          /* card black */
  --gold: #cea23a;
  --gold-light: #e6c877;
  --gold-grad: linear-gradient(120deg, #a8811f 0%, #e6c877 45%, #cea23a 100%);
  --text: #d9d9d9;               /* body grey */
  --text-dim: #b9b3a4;
  --line: rgba(206, 162, 58, .25);
  --line-soft: rgba(206, 162, 58, .14);
  --serif: 'Tobias', 'Cormorant Garamond', serif;
  --sans: 'Rubik', sans-serif;
  --whatsapp: #25D366;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --radius: 3px;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; } /* anchored sections clear the fixed header */
html, body { overflow-x: clip; }

body {
  color: var(--text);
  background-color: var(--primary-color);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; display: block; }
a, a:hover { text-decoration: none; }
ul { padding-left: 0; margin-bottom: 0; }
ul li { list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.object-cover { object-fit: cover; }
.padding { padding-top: 5rem; padding-bottom: 5rem; }
.bg-sec { background-color: var(--surface); }
.bg-primary { background-color: var(--primary-color) !important; }
.text-primary { color: var(--gold) !important; }
.text-serif { font-family: var(--serif); }

h1, h2, h3, h4, h5, h6 { font-family: var(--serif); }
.h1 { font-size: 2.6rem; font-weight: 600; letter-spacing: .01em; line-height: 1.18; }
.h4 { font-family: var(--sans); font-weight: 400; font-size: .95rem; letter-spacing: .35em; text-transform: uppercase; color: var(--text-dim); }
p { color: var(--text-dim); }

::selection { background: var(--gold); color: #000; }

/* ---------- brand atoms ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .85rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .8;
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: .8;
}

/* hairline + rotated square — echoes the jeweller's mark */
.goldRule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1.1rem 0;
}
.goldRule span {
  height: 1px;
  width: clamp(38px, 9vw, 96px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.goldRule span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.goldRule i {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.goldRule.start { justify-content: flex-start; }
.goldRule.start span:first-child { display: none; }
/* over photography the hairline needs its own separation */
.bannerText .goldRule span,
.bannerText .goldRule i { filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }

/* ---------- buttons ---------- */
.button {
  display: inline-block;
  padding: .8rem 2.2rem;
  background: var(--gold-grad);
  color: #131313;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.button:hover {
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(206, 162, 58, .28);
}
.button::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-25deg);
  transition: left .55s var(--ease);
}
.button:hover::after { left: 130%; }

/* outlined companion CTA */
.buttonGhost {
  display: inline-block;
  padding: .8rem 2rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .3s var(--ease);
}
.buttonGhost:hover {
  color: #000;
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.buttonGhost .ico-whatsapp { color: var(--whatsapp); }
.buttonGhost:hover .ico-whatsapp { color: #000; }

/* ---------- header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding: .8rem 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
  background: linear-gradient(180deg, rgba(0,0,0,.75), transparent);
}
.header.fixed {
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding: .45rem 0;
}
.header .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
/* The brand mark is a square lockup — size it by HEIGHT and let the width
   follow, otherwise the crescent + wordmark collapse into an unreadable smear. */
.header .logo { flex: none; line-height: 0; }
.header .logo img {
  height: 96px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.65));
  transition: height .35s var(--ease);
}
.header.fixed .logo img { height: 74px; }
.header .menu-section { flex: 1 1 auto; display: flex; justify-content: center; }
.header .topHead { flex: none; }
.menu li { display: inline-block; }
.menu li a {
  color: var(--text);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  position: relative;
}
.menu li a::after {
  content: '';
  position: absolute;
  left: .9rem; right: 100%;
  bottom: .15rem;
  height: 1px;
  background: var(--gold);
  transition: right .35s var(--ease);
}
.menu li a:hover,
.menu li a.active { color: var(--gold-light); }
.menu li a:hover::after,
.menu li a.active::after { right: .9rem; }

.topHead ul { display: flex; gap: .6rem; margin: 0; }
.topHead ul li a {
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .55rem .9rem;
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .08em;
  transition: all .3s var(--ease);
}
.topHead ul li a:hover { background: var(--gold); color: #000; }
.topHead .whatsappBtn { color: var(--text); }
.topHead .whatsappBtn .ico-whatsapp { color: var(--whatsapp); font-size: 1rem; }
.topHead .whatsappBtn:hover .ico-whatsapp { color: #000; }

/* scroll progress hairline under the header */
.scrollProgress {
  position: fixed;
  top: 0; left: 0;
  z-index: 1031;
  height: 2px;
  width: 0;
  background: var(--gold-grad);
  pointer-events: none;
  transition: width .1s linear;
}

/* mobile menu button */
.menuBtn {
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.menuBtn span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--gold);
  transition: all .3s var(--ease);
}
.menuBtn.closeMenuBtn #menuLine1 { transform: translateY(6.5px) rotate(45deg); }
.menuBtn.closeMenuBtn #menuLine2 { opacity: 0; }
.menuBtn.closeMenuBtn #menuLine3 { transform: translateY(-6.5px) rotate(-45deg); }

.menuContainer {
  position: fixed;
  inset: 0;
  z-index: 1025;
  display: none;
  background: rgba(5,5,5,.97);
  backdrop-filter: blur(10px);
  padding: 7rem 2rem 2rem;
  overflow-y: auto;
}
.menuContainer ul li { margin-bottom: .4rem; }
.menuContainer ul li a {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--text);
  display: inline-block;
  padding: .35rem 0;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.menuContainer ul li a:hover { color: var(--gold); padding-left: .6rem; }
.menuFoot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ---------- hero ---------- */
.banner { height: 100svh; min-height: 580px; position: relative; }
.banner .carousel-item { position: relative; }
/* Scrim. The renders run from near-black to bright polished brass, so the
   type needs a guaranteed dark base — especially behind the gold lines,
   which otherwise disappear into the facade. */
.banner .carousel-item::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 28%, rgba(0,0,0,.6) 58%, rgba(0,0,0,.94) 100%),
    radial-gradient(78% 52% at 50% 80%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, transparent 78%),
    radial-gradient(120% 70% at 50% 100%, rgba(206,162,58,.12), transparent 60%);
}
.banner img { width: 100%; height: 100%; object-fit: cover; }
/* slow drift keeps the stills alive without a video payload */
.banner .carousel-item.active img { animation: heroDrift 9s var(--ease) both; }
@keyframes heroDrift {
  from { transform: scale(1.075); }
  to   { transform: scale(1); }
}

.bannerText {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: 12%;
  text-align: center;
  padding: 0 1.25rem;
}
.bannerText > * { animation: heroRise 1s var(--ease) both; }
.bannerText > :nth-child(2) { animation-delay: .1s; }
.bannerText > :nth-child(3) { animation-delay: .18s; }
.bannerText > :nth-child(4) { animation-delay: .26s; }
.bannerText > :nth-child(5) { animation-delay: .34s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.bannerKicker {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.62rem, 1.4vw, .74rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.9);
}
.bannerTitle {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.8), 0 10px 44px rgba(0,0,0,.85);
}
.bannerTitle .thin {
  display: block;
  font-size: .42em;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: .9rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 18px rgba(0,0,0,.9);
}
.bannerSub {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(.8rem, 1.6vw, .95rem);
  font-weight: 300;
  letter-spacing: .1em;
  color: #e4e4e4;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 18px rgba(0,0,0,.8);
}
.bannerTagline {
  display: block;
  margin: .2rem auto 1.15rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 2.15rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold-light);
  text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 4px 22px rgba(0,0,0,.8);
}
.bannerMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 1.4rem;
  margin: 1.1rem 0 1.6rem;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.85);
}
.bannerMeta span { display: inline-flex; align-items: center; gap: .55rem; }
.bannerMeta span + span::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.bannerCtas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}
.bannerCta { box-shadow: 0 14px 34px rgba(0,0,0,.45); }

.scrollCue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--gold-light);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
}
.scrollCue::after {
  content: '';
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop {
  0%   { opacity: 0; transform: scaleY(.2); transform-origin: top; }
  40%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ---------- quick facts strip ---------- */
.factsStrip {
  position: relative;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.factsRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.factBox {
  position: relative;
  text-align: center;
  padding: 1.5rem .75rem;
  border-right: 1px solid var(--line-soft);
  transition: background .35s var(--ease);
}
.factBox:last-child { border-right: 0; }
.factBox::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--gold-grad);
  transition: left .4s var(--ease), right .4s var(--ease);
}
.factBox:hover { background: rgba(206,162,58,.06); }
.factBox:hover::before { left: 0; right: 0; }
.factBox small {
  display: block;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .35rem;
}
.factBox span {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold);
}

/* ---------- headings ---------- */
.heading { margin-bottom: 2.2rem; }
.heading.has-border { padding-left: 1.1rem; border-left: 2px solid var(--gold); }
.headingContainer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.6rem;
}
.sectionHead { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.sectionHead .h1 { margin-bottom: 0; }
.sectionHead p { margin-top: .9rem; margin-bottom: 0; }

/* ---------- legacy / overview ---------- */
.overviewWrapper { position: relative; }
.overviewWrapper .inner {
  max-width: 980px;
  margin: 0 auto;
}
.overviewWrapper .inner p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.65;
  color: #d9d9d9;
  margin-bottom: 1rem;
}
.overviewWrapper .lead-line {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--gold-light);
}

.legacyWrapper { position: relative; overflow: hidden; }
.legacyWrapper::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 55vw; height: 55vw;
  max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(206,162,58,.09), transparent 62%);
  pointer-events: none;
}
.legacyText p {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
  color: #d9d9d9;
  margin-bottom: 1rem;
}
.legacyText .lead-line {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
}
.legacyStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 2rem;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.legacyStats div {
  background: var(--primary-color);
  padding: 1.1rem .9rem;
  text-align: center;
}
.legacyStats strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.1;
}
.legacyStats small {
  display: block;
  margin-top: .3rem;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* framed image treatment */
.frameImg {
  position: relative;
  padding: 12px;
}
.frameImg::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  pointer-events: none;
}
.frameImg a { display: block; }
.frameImg img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.frameImg figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  padding: 1.4rem 1.1rem .9rem;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8));
}

/* ---------- craft film ---------- */
.filmWrapper {
  position: relative;
  min-height: clamp(420px, 72vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #060606;
}
.filmWrapper video,
.filmWrapper .filmPoster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.filmWrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.25) 100%);
}
.filmOverlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 3rem 0;
}
.filmOverlay .inner { max-width: 620px; }
.filmOverlay .h1 { color: #fff; margin-bottom: 1rem; }
.filmOverlay p { color: var(--text); }
.filmToggle {
  position: absolute;
  z-index: 3;
  right: 1.4rem; bottom: 1.4rem;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: .9rem;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.filmToggle:hover { background: var(--gold); color: #000; }

/* ---------- image strips ---------- */
.bannerStrip { position: relative; overflow: hidden; }
.bannerStrip img { width: 100%; }
.bannerStrip.tall img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.stripCaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.25rem 1.5rem;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.8));
}

/* ---------- residences showcase ---------- */
.showGrid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1rem;
}
.showItem {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
/* the two landscape stills set the row heights… */
.showItem:nth-child(1),
.showItem:nth-child(2) { aspect-ratio: 16 / 9; }
/* …and the portrait still spans both of them */
.showItem:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
/* the anchor fills the tile so the image always has a definite box */
.showItem a { position: absolute; inset: 0; display: block; }
.showItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.showItem:hover img { transform: scale(1.06); }
.showItem figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  color: #fff;
  pointer-events: none;
}
.showItem figcaption b {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
}
.showItem figcaption span {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* ---------- floor plans ---------- */
.fpBox .inner {
  background: var(--surface-2);
  border: 1px solid rgba(206,162,58,.16);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.fpBox .inner:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 22px 48px rgba(0,0,0,.5);
}
.fpImg { position: relative; overflow: hidden; }
.fpImg img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.fpBox .inner:hover .fpImg img { transform: scale(1.06); }
.fpImg img.fpBlur { filter: blur(6px); transform: scale(1.04); } /* teaser blur — enquire to see plan */
.fpBox .inner:hover .fpImg img.fpBlur { transform: scale(1.1); }
/* "unlock" hint over the blurred teaser */
.fpImg .fpLock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: rgba(0,0,0,.35);
  color: var(--gold-light);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .85;
  transition: opacity .35s var(--ease), background .35s var(--ease);
}
.fpImg .fpLock .ico { font-size: 1.15rem; }
.fpBox .inner:hover .fpImg .fpLock { opacity: 1; background: rgba(0,0,0,.5); }
.planBase {
  display: flex;
  flex: 1;
  border-top: 1px solid rgba(206,162,58,.16);
  border-bottom: 1px solid rgba(206,162,58,.16);
}
.fpDetails {
  flex: 1;
  padding: 1rem;
  text-align: center;
}
.fpDetails + .fpDetails { border-left: 1px solid rgba(206,162,58,.16); }
.fpDetails small {
  display: block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .25rem;
}
.fpDetails h6 { font-size: 1.05rem; font-weight: 600; }
.fpBox .readmore { padding: 1.1rem; text-align: center; }
.fpBox .readmore .button { width: 100%; }

/* white residences section */
.fpLight { background: #fff; }
.fpLight .heading .h1 { color: #000; }
.fpLight .heading .h4 { color: #555; }
.fpLight .eyebrow { color: #8a6d14; }
.fpLight .eyebrow::before, .fpLight .eyebrow::after { background: #8a6d14; }
.fpLight .fpBox .inner {
  background: #fff;
  border-color: rgba(0,0,0,.12);
}
.fpLight .fpBox .inner:hover { border-color: var(--gold); box-shadow: 0 22px 48px rgba(0,0,0,.14); }
.fpLight .planBase,
.fpLight .fpDetails + .fpDetails { border-color: rgba(0,0,0,.1); }
.fpLight .fpDetails small { color: #666; }
.fpLight .fpDetails h6 { color: #000 !important; }
.fpLight .fpNote { color: #555; }

.fpNote {
  margin: 2rem auto 0;
  max-width: 700px;
  text-align: center;
  font-size: .82rem;
  letter-spacing: .04em;
}

/* ---------- amenities ---------- */
.amenitiesWrapper { background: var(--surface); }
.amenitiesWrapper .heading .h1 { color: #fff; }

/* image-led feature cards */
.amFeature {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.amFeature:hover { border-color: var(--gold); transform: translateY(-5px); }
.amFeature img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.amFeature:hover img { transform: scale(1.07); }
.amFeature .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.1rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.88));
}
.amFeature .cap b {
  display: block;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: #fff;
}
.amFeature .cap span {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.amenitiesitem .inner {
  text-align: center;
  padding: 1.8rem 1rem;
  border: 1px solid rgba(206,162,58,.18);
  border-radius: var(--radius);
  height: 100%;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(3px);
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.amenitiesitem .inner:hover {
  transform: translateY(-5px);
  background: rgba(206,162,58,.1);
  border-color: var(--gold);
}
.amenitiesitem .icon .ico {
  font-size: 1.9rem;
  color: var(--gold);
  margin-bottom: .8rem;
  transition: transform .35s var(--ease);
}
.amenitiesitem .inner:hover .icon .ico { transform: translateY(-3px); }
.amenitiesitem span {
  display: block;
  font-size: .88rem;
  letter-spacing: .1em;
  color: var(--text);
}

/* ---------- gallery ---------- */
.galleryWrapper .heading .h1 { color: #fff; font-size: 2.2rem; }
.characterSlider { padding: 2.2rem 0 1rem; overflow: visible; }
.characterSlider .swiper-slide {
  width: min(72vw, 520px);
  transition: opacity .5s var(--ease);
}
.characterSlider .swiper-slide-active { opacity: 1; }
.charSlide .imgBox {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.charSlide .imgBox img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.charSlide .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.6rem 1rem .7rem;
  text-align: center;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .12em;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
}
.charSlide .zoomHint {
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 2;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(0,0,0,.4);
  color: var(--gold);
  font-size: .75rem;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.charSlide .imgBox:hover .zoomHint { opacity: 1; }
.galleryNav {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.6rem;
}
.galleryNav button {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.galleryNav button:hover { background: var(--gold); color: #000; }

/* ---------- location ---------- */
.location-img a { display: block; height: 100%; }
.location-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.locBox .inner {
  background: var(--surface-2);
  border: 1px solid rgba(206,162,58,.16);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  height: 100%;
}
.locTitle { font-size: 1.5rem; margin-bottom: 1.4rem; }
.locBox .list li {
  position: relative;
  padding: .65rem 0 .65rem 1.9rem;
  color: var(--text-dim);
  border-bottom: 1px dashed rgba(206,162,58,.18);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.locBox .list li:last-child { border-bottom: 0; }
.locBox .list li:hover { color: var(--text); padding-left: 2.1rem; }
.locBox .list li::before {
  content: '\f3c5';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0; top: .68rem;
  color: var(--gold);
  font-size: .85rem;
}
.locBox .readmore { margin-top: 1.6rem; }

/* ---------- enquiry ---------- */
.enquiryWrapper { position: relative; }
.formContainer {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.enquiry-form .inner { padding: 2.8rem 2.4rem; }
.enquiry-form .heading h4 {
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--text-dim);
}
.form-img { position: relative; }
.form-img img { min-height: 100%; }
.form-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.85), transparent 45%);
  pointer-events: none;
}
.formAssure {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: 1.2rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.formAssure span { display: inline-flex; align-items: center; gap: .45rem; }
.formAssure .ico { color: var(--gold); }

/* ---------- sticky corner form + enquiry tab ---------- */
.enquiryBtn {
  position: fixed;
  top: 50%; right: 0;                 /* right-edge tab, clear of the chatbot corner */
  transform: translateY(-50%);
  z-index: 1029;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .9rem .55rem;
  background: var(--gold-grad);
  color: #131313;
  font-size: .95rem;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  box-shadow: -8px 8px 26px rgba(0,0,0,.45);
  transition: padding .3s var(--ease);
}
.enquiryBtn span {
  writing-mode: vertical-rl;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.enquiryBtn:hover { padding-right: .8rem; }
.stickyForm {
  position: fixed;
  top: 50%; right: 16px;              /* opens mid-screen, clear of the chatbot corner */
  transform: translateY(-50%);
  z-index: 1030;
  width: 300px;
  display: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem 1.2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.stickyForm h6 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1rem;
}
.stickyForm .form-close {
  position: absolute;
  top: 8px; right: 12px;
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.stickyForm .form-close:hover { color: var(--gold-light); }
.form-group { margin-bottom: .85rem; }

/* dark form controls (all forms) */
.form-control, .form-select {
  background: #0a0a0a;
  border: 1px solid rgba(206,162,58,.22);
  border-radius: 2px;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
}
.form-control:focus, .form-select:focus {
  background: #0a0a0a;
  border-color: var(--gold);
  box-shadow: 0 0 0 .18rem rgba(206,162,58,.14);
  color: var(--text);
}
.form-control::placeholder { color: #8b8578; }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cea23a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { background: #111; color: var(--text); }
.form-floating > label { color: var(--text-dim); font-size: .9rem; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { color: var(--gold); }
.form-floating > label::after { background: transparent !important; }

/* ---------- footer ---------- */
.footer.footerLight {
  background: #d9d9d9;
  padding: 2.4rem 0 2rem;
}
.footerLight .footText p, .footerLight .footText a { font-size: .95rem; color: #000; }
.footerLight .footText a:hover { color: #6d5314; }
.qrImg { width: 110px; border-radius: var(--radius); }
.footerLight .privacyLink {
  color: #000;
  font-size: .8rem;
  text-decoration: underline;
}
.footerLight .privacyLink:hover { color: #6d5314; }
.footerLight .footNote {
  font-size: .72rem;
  color: #3d3d3d;
  max-width: 900px;
  margin: 1rem auto 0;
}

/* ---------- back to top ---------- */
.button-top {
  position: fixed;
  bottom: calc(var(--bottomInset) + 16px); left: 24px;
  z-index: 1020;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-grad);
  color: #131313;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.button-top.show { opacity: 1; pointer-events: auto; }
.button-top:hover { transform: translateY(-3px); }

/* ---------- modal ---------- */
.modal-content {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.modal-header {
  border: 0;
  padding: .6rem .8rem 0;
  justify-content: flex-end;
}
.modal-header .close {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  width: 34px; height: 34px;
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
  transition: all .3s var(--ease);
}
.modal-header .close:hover { background: var(--gold); color: #000; }
.modal-details {
  text-align: center;
  padding: .4rem 1.5rem 0;
}
.modal-details img { width: 190px; height: auto; margin: 0 auto 1rem; }
.modal-details h5 { color: var(--text); font-size: 1.15rem; }
.banner-price { color: var(--gold); font-size: 1.4rem; }
.banner-price small { font-size: 1.05rem; color: var(--text-dim); }
.modal-body { padding: 0 1.75rem 1.9rem; }
.modal-body h5 { color: var(--text); }
.statusm { color: #ff6b5e; font-size: .88rem; }
.statusm:empty { display: none; }

/* ---------- RERA compliance rail ----------
   Regulator numbers have to stay on screen, so this is pinned to the bottom
   edge. Kept hairline-thin and low-contrast so it reads as a legal strip
   rather than a second banner competing with the CTAs.
   JS measures the stack and publishes --bottomInset; the media-query values
   below are the no-JS fallback. */
:root { --bottomInset: 0px; }

.reraRail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1029;
  background: rgba(5,5,5,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.reraRail .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .1rem 1.35rem;
  padding: .42rem 1rem;
  text-align: center;
  font-size: .66rem;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--text-dim);
}
.reraRail b {
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: .38rem;
}
.reraRail a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .3s var(--ease);
}
.reraRail a:hover { color: var(--gold-light); }

/* nothing fixed to the bottom may sit under the rail */
body { padding-bottom: var(--bottomInset); }

/* ---------- mobile sticky bar ---------- */
.footer-enquiryBtn {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  background: #0a0a0a;
  border-top: 1px solid var(--line);
}
.footer-enquiryBtn a {
  flex: 1;
  text-align: center;
  padding: .85rem .5rem;
  color: var(--gold);
  font-size: .85rem;
  letter-spacing: .06em;
  border-right: 1px solid rgba(206,162,58,.15);
}
.footer-enquiryBtn a:last-child { border-right: 0; }
.footer-enquiryBtn .whatsCall { color: var(--whatsapp); }

/* ---------- lightbox ---------- */
.mlLightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.92);
  padding: 2rem;
}
.mlLightbox.open { display: flex; }
.mlLightbox img {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mlLightbox button {
  position: absolute;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--gold);
  width: 44px; height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.mlLightbox button:hover { background: var(--gold); color: #000; }
.mlLightbox .mlClose { top: 18px; right: 18px; }
.mlLightbox.single .mlPrev,
.mlLightbox.single .mlNext { display: none; } /* solo images (map, QR) get no arrows */
.mlLightbox .mlPrev { left: 18px; top: 50%; transform: translateY(-50%); }
.mlLightbox .mlNext { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- alerts ---------- */
.alert-danger {
  background: rgba(180, 40, 30, .15);
  border: 1px solid rgba(255, 107, 94, .4);
  color: #ff8d82;
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
.rera-no {
  position: absolute;
  right: 0;
  top: 23%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  line-height: 16px;
  word-break: break-all;
  color: #fff;
  text-align: right;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2;
  margin-top: -59px;
}
.rera-no-text {
  text-align: right;
}
.rera-qr-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: #fff;
  padding: 3px;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .rera-no {
    position: absolute;
    top: 9%;
    right: 0;
    left: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: 8px;
    padding: 4px 8px;
    line-height: 12px;
    margin-top: 0;
    gap: 6px;
    text-align: right;
  }
  .rera-no-text {
    text-align: right;
  }
  .rera-qr-img {
    width: 38px;
    height: 38px;
  }
}