:root {
  --radius: .125rem;
  --font-display: "Baskerville", "Iowan Old Style", "Times New Roman", serif;
  --font-sans: "Helvetica Neue", "Avenir Next", Arial, sans-serif;

  /* Universal Hex Fallbacks (Guaranteed to render on all servers, browsers & CDNs) */
  --background: #f7f6f2;
  --foreground: #1c2824;
  --primary: #142821;
  --primary-foreground: #f4f3ed;
  --muted: #e7e8e2;
  --muted-foreground: #677871;
  --accent: #b38b59;
  --champagne: #c4a77d;
  --forest-soft: #233c33;
  --stone: #cdd0cc;
  --border: #baa58c;

  /* Modern OKLCH Palette (Applied if supported by browser) */
  --background: oklch(.975 .009 88);
  --foreground: oklch(.205 .027 169);
  --primary: oklch(.226 .041 171);
  --primary-foreground: oklch(.955 .017 85);
  --muted: oklch(.91 .006 105);
  --muted-foreground: oklch(.47 .014 160);
  --accent: oklch(.68 .064 76);
  --champagne: oklch(.72 .065 75);
  --forest-soft: oklch(.31 .038 168);
  --stone: oklch(.82 .006 160);
  --border: oklch(.72 .025 80);

  --envelope-progress: 0;
  --door-progress: 0;
  --door-opacity: 1;
  --top-progress: 0;
  --fold-progress: 0;
  --reveal-progress: 0;
}

* { box-sizing: border-box; border-color: var(--border); }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: 0;
  position: relative;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
}
main {
  width: 100%;
  max-width: 100%;
}
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--champagne); color: var(--primary); }

.btn { border-radius: var(--radius); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.6rem; padding: .65rem 1.15rem; border: 1px solid var(--foreground); color: var(--foreground); background: transparent; text-decoration: none; transition: border-color .25s ease, color .25s ease, background-color .25s ease; }
.btn-quiet:hover, .btn-quiet:focus-visible { border-color: var(--accent); color: var(--accent); background: transparent; }

.text-link { display: inline-flex; gap: .75rem; align-items: center; margin-top: 2rem; padding-bottom: .5rem; color: var(--foreground); border-bottom: 1px solid var(--accent); text-decoration: none; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.text-link i, .text-link svg { font-size: .95rem; width: .95rem; transition: transform .25s ease; }
.text-link:hover { color: var(--accent); }
.text-link:hover i, .text-link:hover svg { transform: translateX(4px); }

.eyebrow { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.fine-rule { display: block; width: 2.8rem; border-top: 1px solid var(--champagne); margin-bottom: 1rem; }
.section-number { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }
.section-number.light { color: var(--stone); }

/* Title Arch Icon (Brand Emblem) */
.title-icon {
  display: block;
  width: clamp(2.85rem, 4.4vw, 4rem);
  margin-top: .85rem;
  margin-bottom: clamp(.85rem, 1.6vw, 1.35rem);
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.title-icon img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
.title-icon--light img {
  filter: brightness(0) invert(1);
  opacity: .88;
}
.manifesto-copy > .title-icon,
.interior-section div > .title-icon,
.envelope-hero-copy > .title-icon {
  margin-top: 0;
}
.envelope-hero-copy > .title-icon {
  margin-bottom: clamp(.65rem, 1.2vw, .95rem);
}

figure figcaption { margin-top: .7rem; color: var(--muted-foreground); font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; }

/* ----------------------------------------------------
   OPENING DOUBLE DOORS 3D SCROLL EXPERIENCE
---------------------------------------------------- */
.envelope-scroll { 
  height: 320vh; 
  background: #142821;
  background: var(--primary); 
  position: relative;
  width: 100%;
  max-width: 100%;
}
.envelope-sticky { 
  position: sticky; 
  top: 0; 
  height: 100vh; 
  height: 100dvh;
  overflow: hidden; 
  background: #142821;
  background: var(--primary); 
  width: 100%;
  max-width: 100%;
}
.envelope-stage { 
  position: absolute; 
  inset: 0; 
  perspective: 1800px; 
  transform-style: preserve-3d; 
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.envelope-scene { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  max-width: 100%;
  overflow: hidden; 
  contain: paint; 
  background: #142821;
  background: var(--primary); 
}

.envelope-hero { 
  position: absolute; 
  inset: 0; 
  z-index: 1; 
  overflow: hidden; 
  background: var(--muted); 
  transform: scale(calc(1.08 - var(--reveal-progress, 0) * .08)); 
}
.envelope-hero img { width: 100%; height: 100%; object-fit: cover; }
.envelope-hero-shade { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.2) 55%, transparent 75%), linear-gradient(90deg, oklch(0.1 0.02 170 / 55%), transparent 64%); 
  opacity: calc(.72 + var(--reveal-progress, 0) * .28); 
}
.envelope-hero-copy { 
  position: absolute; 
  inset: auto auto 9% 8%; 
  color: var(--primary-foreground); 
  opacity: var(--reveal-progress, 0); 
  transform: translateY(calc((1 - var(--reveal-progress, 0)) * 2rem)); 
  z-index: 2; 
}
.envelope-hero-copy p { margin: .8rem 0 1.2rem; font: 400 clamp(2rem, 4.4vw, 5.2rem)/.98 var(--font-display); }
.envelope-hero-copy small { text-transform: uppercase; letter-spacing: .25em; font-size: clamp(.65rem, 1.2vw, .85rem); }
.hero-reveal-brand-wrap { display: block; margin-bottom: clamp(.65rem, 1.4vw, 1rem); }
.hero-reveal-brand {
  height: clamp(2.3rem, 4vw, 3.2rem);
  width: auto;
  max-width: 175px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
  opacity: .95;
  display: block;
}

/* Double Door Panels (Splits exactly from center 50% / 50%) */
.door-panel,
.envelope-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 4;
  background-color: #142821;
  background-color: var(--primary);
  color: #f4f3ed;
  color: var(--primary-foreground);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: var(--door-opacity, 1);
}

.door-panel--left,
.envelope-fold--left {
  left: 0;
  transform-origin: left center;
  transform: rotateY(calc(var(--door-progress, 0) * -90deg));
  border-right: 1px solid #c4a77d;
  border-right: 1px solid oklch(from var(--champagne) l c h / 35%);
}

.door-panel--right,
.envelope-fold--right {
  right: 0;
  transform-origin: right center;
  transform: rotateY(calc(var(--door-progress, 0) * 90deg));
  border-left: 1px solid #c4a77d;
  border-left: 1px solid oklch(from var(--champagne) l c h / 35%);
}

/* Door Inner Architectural Framing & Texture */
.door-panel::before,
.envelope-fold::before {
  content: "";
  position: absolute;
  inset: clamp(1rem, 3vh, 3rem) clamp(1rem, 2.5vw, 3rem);
  border: 1px solid rgba(196, 167, 125, 0.2);
  border: 1px solid oklch(from var(--champagne) l c h / 18%);
  border-radius: var(--radius);
  pointer-events: none;
}

.door-panel::after,
.envelope-fold::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image: repeating-linear-gradient(92deg, transparent 0 2px, rgba(255, 255, 255, 0.08) 3px, transparent 4px 8px);
  background-image: repeating-linear-gradient(92deg, transparent 0 2px, oklch(1 0 0 / 8%) 3px, transparent 4px 8px);
}

/* Center Seam Hairline Highlight */
.door-center-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(196, 167, 125, 0.5);
  background: linear-gradient(to bottom, transparent, rgba(196, 167, 125, 0.5) 20%, rgba(196, 167, 125, 0.5) 80%, transparent);
  background: linear-gradient(to bottom, transparent, oklch(from var(--champagne) l c h / 50%) 20%, oklch(from var(--champagne) l c h / 50%) 80%, transparent);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: calc(1 - var(--door-progress, 0) * 3);
}

/* Center Identity Layer (Fades smoothly as doors open) */
.envelope-identity {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--primary-foreground);
  opacity: calc(1 - var(--door-progress, 0) * 2.6);
  transform: scale(calc(1 + var(--door-progress, 0) * 0.08));
  pointer-events: none;
}

.envelope-projects {
  position: absolute;
  top: auto;
  bottom: calc(52% + clamp(6.25rem, 8.5vw + 1rem, 8.85rem));
  left: 50%;
  width: min(100% - 2rem, 40rem);
  display: grid;
  justify-items: center;
  gap: clamp(.35rem, 1.2vh, .8rem);
  padding-inline: .25rem;
  text-align: center;
  color: var(--primary-foreground);
  text-transform: uppercase;
  transform: translateX(-50%);
}
.envelope-projects span { max-width: 100%; font-size: clamp(.62rem, 1.1vw, 1.15rem); font-weight: 600; letter-spacing: clamp(.12em, .35vw, .28em); white-space: nowrap; }
.envelope-projects b { width: fit-content; max-width: 100%; padding: clamp(.25rem, .7vh, .38rem) clamp(.65rem, 1.6vw, 1.3rem) clamp(.32rem, .9vh, .45rem); color: var(--primary-foreground); background: oklch(0.38 0.11 22); font-size: clamp(.66rem, 1.35vw, 1.45rem); line-height: 1; letter-spacing: clamp(.02em, .12vw, .05em); font-weight: 600; white-space: nowrap; border-radius: var(--radius); }
.envelope-projects b em { display: inline-block; margin: 0 .08em; font: 400 clamp(1.35rem, 3.2vw, 3.8rem)/.7 var(--font-display); text-transform: none; vertical-align: -.14em; }
.envelope-projects strong { max-width: 100%; font: 400 clamp(.68rem, 1.4vw, 1.45rem)/1 var(--font-display); letter-spacing: clamp(.1em, .35vw, .2em); white-space: nowrap; }
.envelope-identity > p {
  position: absolute;
  top: calc(48% + clamp(6.25rem, 8.5vw + 1rem, 8.85rem));
  bottom: auto;
  font: 400 clamp(1rem, 2vw, 1.8rem) var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.envelope-identity > p em { font-weight: 400; text-transform: lowercase; }

.wax-seal {
  position: absolute;
  top: 48%;
  left: 50%;
  width: clamp(10.5rem, 17vw, 15.5rem);
  aspect-ratio: 1;
  filter: drop-shadow(0 .65rem .8rem rgba(0, 0, 0, 0.45));
  filter: drop-shadow(0 .65rem .8rem oklch(0.08 0.02 170 / 45%));
  transform: translate(-50%, -50%) rotate(-3deg);
}
.wax-seal img { width: 100%; height: 100%; object-fit: contain; }

.opening-guide {
  position: absolute;
  bottom: clamp(1.8rem, 4vh, 2.8rem);
  left: 50%;
  display: flex;
  gap: .7rem;
  align-items: center;
  color: #f4f3ed;
  color: var(--primary-foreground);
  font-size: clamp(.65rem, .9vw, .75rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translateX(-50%);
  z-index: 30;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: opacity .2s ease;
}
.opening-guide i,
.opening-guide svg {
  display: inline-block;
  font-size: 1rem;
  width: auto;
  color: #c4a77d;
  color: var(--champagne);
  animation: drift 1.8s ease-in-out infinite;
}
.opening-index { display: none !important; }
@keyframes drift { 50% { transform: translateY(.35rem); } }

/* ----------------------------------------------------
   SITE HEADER & NAVIGATION
---------------------------------------------------- */
.site-header { position: sticky; z-index: 50; top: 0; height: 5rem; display: flex; align-items: center; padding: 0 clamp(1.25rem, 3.5vw, 4.5rem); background: oklch(from var(--background) l c h / 96%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: height .25s ease; }
.site-header .container-fluid { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.header-brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.header-logo {
  height: clamp(2.3rem, 3.8vw, 3rem);
  width: auto;
  max-width: 175px;
  object-fit: contain;
  display: block;
  transition: transform .25s ease, opacity .2s ease;
}
.header-brand:hover .header-logo {
  transform: scale(1.02);
  opacity: .95;
}

.brand-mark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; color: var(--champagne); text-transform: uppercase; }
.brand-arc { width: 4rem; height: 1.15rem; border: 2px solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0; margin-bottom: .25rem; }
.brand-name { font: 400 clamp(1.35rem, 2.2vw, 2.5rem)/1 var(--font-display); letter-spacing: .06em; white-space: nowrap; }
.brand-name b { font-size: 1.5em; font-weight: 400; }
.brand-place { margin-top: .42rem; font-size: .52rem; letter-spacing: .25em; }
.brand-mark--compact .brand-arc { width: 2.4rem; height: .7rem; }
.brand-mark--compact .brand-name { font-size: 1rem; }
.brand-mark--compact .brand-place { font-size: .42rem; }

.site-nav { display: flex; align-items: center; gap: clamp(.75rem, 1.8vw, 2.2rem); }
.site-nav > a.nav-link { color: var(--foreground); text-decoration: none; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; transition: color .2s ease; padding: .5rem 0; }
.site-nav > a.nav-link:hover { color: var(--accent); }
.menu-button { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); font-size: 1.35rem; cursor: pointer; transition: all .2s ease; }
.menu-button:hover, .menu-button:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------------
   PAGE SECTIONS (DESKTOP DEFAULT)
---------------------------------------------------- */
.section-pad { padding: clamp(3rem, 5vw, 4.75rem) clamp(1.5rem, 6vw, 7rem); }

/* 01 — The Address */
.manifesto { min-height: auto; display: grid; grid-template-columns: .4fr 1fr 1.25fr; gap: clamp(2rem, 4.5vw, 6rem); align-items: start; }
.manifesto-copy { padding-top: 0; }
.manifesto-copy h1, .nature-heading h2, .recreation-intro h2 { font: 400 clamp(2.2rem, 3.6vw, 3.8rem)/1.02 var(--font-display); margin: 1.2rem 0 1.8rem; }
.lead { max-width: 28rem; font: 400 clamp(1rem, 1.3vw, 1.2rem)/1.75 var(--font-display); color: var(--muted-foreground); }
.manifesto-image { margin: 0; align-self: end; width: 100%; }
.manifesto-image img { width: 100%; height: min(65vh, 680px); object-fit: cover; }
.manifesto-caption {
  margin-top: .85rem;
  font-size: clamp(.82rem, 1.05vw, .95rem);
  line-height: 1.6;
  color: var(--muted-foreground);
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: none;
}

/* ====================================================
   Why 6 Boulevard Section
==================================================== */
.why-section {
  background: var(--background);
  border-top: 1px solid oklch(0.2 0.04 171 / 8%);
  position: relative;
}

.why-header {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.why-header h2 {
  font: 400 clamp(1.85rem, 3vw, 2.65rem)/1.1 var(--font-display);
  margin: .85rem 0 1rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.why-header .lead {
  font-size: clamp(.95rem, 1.15vw, 1.12rem);
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.why-card {
  position: relative;
  background: #ffffff;
  border: 1px solid oklch(0.2 0.04 171 / 10%);
  border-radius: var(--radius);
  padding: clamp(1.65rem, 2.2vw, 2.25rem);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow .3s ease,
              border-color .3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--champagne));
  opacity: 0;
  transition: opacity .3s ease;
}

.why-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px rgba(12, 36, 27, 0.08);
}

.why-card:hover::before {
  opacity: 1;
}

.why-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.35rem;
}

.why-card-number {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .04em;
  line-height: 1;
}

.why-card-icon {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  background: oklch(from var(--champagne) l c h / 25%);
  border: 1px solid oklch(from var(--accent) l c h / 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.25rem;
  transition: all .3s ease;
}

.why-card:hover .why-card-icon {
  background: var(--primary);
  color: var(--champagne);
  border-color: var(--primary);
  transform: rotate(6deg) scale(1.05);
}

.why-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.35vw, 1.35rem);
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 .55rem;
  line-height: 1.25;
  letter-spacing: .01em;
}

.why-card-desc {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
}

/* 02 — The Residences */
.residences-section { min-height: auto; display: grid; grid-template-columns: 1.2fr .8fr; background: var(--primary); color: var(--primary-foreground); }
.tower-visual { min-height: 520px; width: 100%; }
.tower-visual img { width: 100%; height: 100%; object-fit: cover; }
.tower-copy { padding: clamp(2.5rem, 4.5vw, 4.5rem) clamp(2rem, 5vw, 6rem); display: flex; flex-direction: column; justify-content: center; }
.tower-copy h2, .interior-section h2 { font: 400 clamp(2rem, 3.2vw, 3.4rem)/1.05 var(--font-display); margin: 1rem 0 1.75rem; }
.residence-stat { padding: 1.75rem 0; display: flex; align-items: center; gap: 2rem; border-top: 1px solid oklch(from var(--champagne) l c h / 48%); border-bottom: 1px solid oklch(from var(--champagne) l c h / 48%); }
.residence-stat strong { color: var(--champagne); font: 400 clamp(2.5rem, 3.8vw, 4.5rem)/1 var(--font-display); }
.residence-stat span, .residence-notes { font-size: .63rem; line-height: 1.65; letter-spacing: .14em; text-transform: uppercase; }
.residence-notes { display: grid; gap: .85rem; margin-top: 2rem; color: var(--stone); }

/* 03 — Nature */
.nature-section { display: grid; grid-template-columns: 1fr 1.35fr; grid-template-rows: auto auto; gap: clamp(1.75rem, 3.2vw, 2.75rem) clamp(2rem, 4.5vw, 5.5rem); background: var(--background); }
.nature-heading { align-self: start; }
.nature-image { margin: 0; grid-row: span 2; width: 100%; display: flex; align-items: center; justify-content: center; }
.nature-image img { width: 100%; height: auto; max-height: min(85vh, 760px); object-fit: contain; }
.nature-stat { display: flex; align-items: baseline; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1.75rem; }
.nature-stat strong { font: 400 clamp(4.5rem, 8vw, 9rem)/.8 var(--font-display); color: var(--primary); }
.nature-stat span { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.nature-copy { max-width: 27rem; line-height: 1.8; color: var(--muted-foreground); font-size: clamp(.88rem, 1.1vw, 1.05rem); margin: 0; }

/* Landscape Band */
.landscape-band { position: relative; height: clamp(22rem, 50vh, 32rem); overflow: hidden; color: var(--primary-foreground); }
.landscape-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.08 0.03 170 / 65%), transparent 65%); }
.landscape-band img { width: 100%; height: 100%; object-fit: cover; }
.landscape-title { position: absolute; z-index: 1; left: 7vw; top: 12%; }
.landscape-title span, .landscape-band > p { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; }
.landscape-title h2 { margin-top: 1rem; font: 400 clamp(2.2rem, 3.6vw, 3.8rem)/1.02 var(--font-display); }
.landscape-band > p { position: absolute; z-index: 1; bottom: 8%; right: 7vw; }

/* ----------------------------------------------------
   LANDSCAPE PLAN SECTION (FULL WIDTH)
---------------------------------------------------- */
.landscape-plan-section {
  background: var(--background);
  padding-top: clamp(2.75rem, 4.5vw, 4.25rem);
  padding-bottom: clamp(2.75rem, 4.5vw, 4.25rem);
  position: relative;
  overflow: hidden;
}

.landscape-plan-header {
  padding: 0 clamp(1.5rem, 6vw, 7rem);
  max-width: 58rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.landscape-plan-header h2 {
  font: 400 clamp(2rem, 3.2vw, 3.4rem)/1.05 var(--font-display);
  margin: 1.2rem 0 1.4rem;
  color: var(--foreground);
}

.landscape-plan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.8rem;
}

.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid var(--border);
  background: oklch(from var(--muted) l c h / 65%);
  border-radius: var(--radius);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--foreground);
  font-weight: 500;
}

.plan-tag i {
  color: var(--accent);
  font-size: .85rem;
}

.landscape-plan-frame {
  width: 100%;
  position: relative;
  background: #fcfcfc;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 36px oklch(0.08 0.02 170 / 6%);
}

.landscape-plan-media {
  position: relative;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  display: block;
}

.landscape-plan-media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform .6s cubic-bezier(.2,.65,.25,1);
}

.landscape-plan-media:hover img {
  transform: scale(1.012);
}

.plan-zoom-hint {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
  opacity: .92;
  transition: opacity .25s ease, transform .25s ease;
}

.plan-zoom-hint .btn {
  background: oklch(from var(--background) l c h / 94%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--border);
  box-shadow: 0 6px 18px oklch(0.08 0.02 170 / 12%);
  color: var(--foreground);
}

.landscape-plan-media:hover .plan-zoom-hint {
  opacity: 1;
  transform: translateY(-2px);
}

/* Modal styling */
.landscape-modal .modal-content {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px oklch(0.08 0.02 170 / 35%);
}

.landscape-modal .modal-header {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  background: oklch(from var(--background) l c h / 98%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landscape-modal .modal-title-group {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.landscape-modal .modal-title {
  font: 400 clamp(1.35rem, 2.5vw, 1.85rem)/1.1 var(--font-display);
  color: var(--foreground);
  margin: 0;
}

.landscape-modal .modal-image-scroll {
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fcfcfc;
  display: flex;
  justify-content: center;
}

.landscape-modal .modal-image-scroll img {
  width: 100%;
  min-width: 800px;
  height: auto;
  object-fit: contain;
  display: block;
}

.landscape-modal .modal-footer {
  border-top: 1px solid var(--border);
  padding: .9rem clamp(1.25rem, 3vw, 2rem);
  background: oklch(from var(--background) l c h / 98%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.modal-note {
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.modal-note i {
  color: var(--accent);
}

/* 04 — Recreation */
.recreation-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 6.5rem); background: var(--muted); }
.recreation-intro { padding-top: 3.5rem; }
.recreation-intro em { color: var(--accent); font-weight: 400; }
.pool-image { margin: 0; width: 100%; }
.pool-image img { width: 100%; aspect-ratio: 1.8; object-fit: cover; }
.lounge-image { margin: -7rem 0 0 10%; width: 90%; }
.lounge-image img { width: 100%; aspect-ratio: 1.45; object-fit: cover; }
.amenity-list { margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2rem; list-style: none; align-content: end; }
.amenity-list li { padding: .95rem 0; border-top: 1px solid var(--border); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }

/* ----------------------------------------------------
   05 — AMENITIES AUTO-SCROLLING MARQUEE
---------------------------------------------------- */
.amenities-section {
  background: var(--primary);
  color: var(--primary-foreground);
  overflow: hidden;
  position: relative;
}
.amenities-header {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.amenities-header h2 {
  font: 400 clamp(2.2rem, 3.6vw, 3.8rem)/1.02 var(--font-display);
  margin: 1.2rem 0 1.5rem;
  color: var(--primary-foreground);
}
.lead.light {
  color: var(--stone);
}

.amenities-marquee-container {
  --marquee-gap: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--marquee-gap);
  width: 100%;
  overflow: hidden;
  padding: .5rem 0;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}

.amenities-track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  will-change: transform;
}

.track-1 {
  animation: marquee-scroll-left 40s linear infinite;
}
.track-2 {
  animation: marquee-scroll-left 46s linear infinite;
}

.amenities-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - (var(--marquee-gap) / 2)));
  }
}

.amenity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .95rem;
  width: clamp(140px, 14vw, 175px);
  flex-shrink: 0;
  cursor: default;
}

.amenity-circle {
  width: clamp(4.6rem, 5.8vw, 5.5rem);
  height: clamp(4.6rem, 5.8vw, 5.5rem);
  border-radius: 50%;
  background: oklch(0.18 0.035 170);
  border: 1px solid oklch(from var(--champagne) l c h / 35%);
  box-shadow: 0 6px 16px oklch(0.08 0.02 170 / 40%), inset 0 1px 1px oklch(1 0 0 / 8%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
  transition: transform .3s cubic-bezier(.2,.65,.25,1), background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.amenity-circle svg {
  width: clamp(1.6rem, 2.2vw, 2rem);
  height: clamp(1.6rem, 2.2vw, 2rem);
  transition: transform .3s ease;
}

.amenity-card:hover .amenity-circle {
  transform: translateY(-6px) scale(1.06);
  border-color: var(--champagne);
  background: var(--champagne);
  color: var(--primary);
  box-shadow: 0 12px 28px oklch(0.08 0.02 170 / 60%);
}

.amenity-card:hover .amenity-circle svg {
  transform: scale(1.1);
}

.amenity-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-foreground);
  line-height: 1.35;
  margin: 0;
  transition: color .2s ease;
}

.amenity-card:hover .amenity-label {
  color: var(--champagne);
}

/* 06 — Specifications */
.specifications-section { background: var(--background); border-top: 1px solid var(--border); }
.specifications-header { max-width: 44rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.specifications-header h2 { font: 400 clamp(2rem, 3.2vw, 3.4rem)/1.05 var(--font-display); margin: 1.2rem 0 1.5rem; }
.specifications-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.spec-accordion { display: flex; flex-direction: column; gap: .85rem; }

.spec-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: oklch(from var(--background) l c h / 70%);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.spec-item:hover {
  border-color: var(--champagne);
  box-shadow: 0 8px 24px oklch(0.08 0.02 170 / 6%);
}
.spec-item:has(button:not(.collapsed)) {
  border-color: oklch(from var(--champagne) l c h / 80%);
  background: oklch(from var(--background) l c h / 95%);
}

.spec-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--foreground);
  transition: background-color .2s ease;
}
.spec-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.spec-title-wrap {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}
.spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius);
  background: oklch(from var(--champagne) l c h / 18%);
  color: var(--primary);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.spec-button:not(.collapsed) .spec-icon {
  background: var(--primary);
  color: var(--champagne);
  transform: scale(1.05);
}
.spec-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
}
.spec-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  font-size: .85rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2,.65,.25,1), color .2s ease;
}
.spec-button:not(.collapsed) .spec-toggle {
  transform: rotate(180deg);
  color: var(--accent);
}
.spec-body {
  padding: 0 1.35rem 1.35rem 4.4rem;
  border-top: 1px solid oklch(from var(--border) l c h / 40%);
  margin-top: .15rem;
  padding-top: 1rem;
}
.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.spec-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  letter-spacing: .02em;
}
.spec-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--champagne);
  font-weight: 700;
}

/* Interior */
.interior-section { min-height: auto; display: grid; grid-template-columns: 1.25fr .75fr; background: var(--background); align-items: center; }
.interior-section > img { width: 100%; height: auto; max-height: min(85vh, 760px); object-fit: contain; }
.interior-section > div { padding: clamp(2.5rem, 4.5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.interior-section p:last-child { color: var(--muted-foreground); line-height: 1.8; font-size: clamp(.88rem, 1.1vw, 1.05rem); }

/* ----------------------------------------------------
   FLOOR PLANS & PRICING SECTION
---------------------------------------------------- */
.floorplans-section {
  background: var(--background);
  position: relative;
  overflow: visible;
}

.floorplans-header {
  max-width: 54rem;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  text-align: left;
}

.floorplans-header .title-icon {
  margin-bottom: clamp(.65rem, 1.8vw, .95rem);
}

.floorplans-header h2 {
  font: 400 clamp(2rem, 3.2vw, 3.4rem)/1.05 var(--font-display);
  color: var(--foreground);
  margin: 1.2rem 0 1.4rem;
  max-width: 54rem;
}

.floorplans-header .lead {
  max-width: 48rem;
  margin: 0;
  font-size: clamp(.88rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--muted-foreground);
}

.floorplans-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.plan-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.85rem, 3.4vw, 2.75rem) clamp(1.5rem, 3.8vw, 3.5rem);
  background-color: transparent;
  border-bottom: 1px solid var(--border);
  transition: background-color .35s ease, color .35s ease;
  cursor: pointer;
}

.plan-row:last-child {
  border-bottom: none;
}

.plan-row-main {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4.2vw, 5.5rem);
}

.plan-bullet {
  font-size: .85rem;
  line-height: 1;
  color: var(--foreground);
  transition: color .3s ease;
  user-select: none;
}

.plan-type h3 {
  font: 600 clamp(1.75rem, 2.6vw, 2.35rem)/1 var(--font-display);
  color: var(--foreground);
  margin: 0;
  min-width: clamp(95px, 12vw, 130px);
  transition: color .3s ease;
  letter-spacing: .02em;
}

.plan-specs {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.plan-spec-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-foreground);
  font-weight: 500;
  transition: color .3s ease;
}

.plan-spec-val {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 600;
  color: var(--foreground);
  transition: color .3s ease;
  letter-spacing: .02em;
}

.plan-price-col {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.plan-price-val {
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  font-weight: 700;
  color: var(--foreground);
  transition: color .3s ease;
  letter-spacing: .02em;
  white-space: nowrap;
}

.plan-onwards {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .85;
}

.plan-card-price {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: #7a572d;
  margin-top: .25rem;
  letter-spacing: .02em;
}

/* Floor Plan Preview Card Slot */
.plan-card-slot {
  position: relative;
  width: 175px;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-preview-card {
  position: absolute;
  bottom: -95px;
  width: 170px;
  background: #F0F0E3;
  padding: 16px 18px 12px;
  border-radius: 4px;
  box-shadow: 0 16px 36px oklch(0.08 0.02 170 / 22%);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.92);
  transition: opacity .35s cubic-bezier(.2,.65,.25,1), transform .35s cubic-bezier(.2,.65,.25,1), visibility .35s ease;
  z-index: 15;
  cursor: pointer;
}

.plan-preview-card:hover {
  box-shadow: 0 20px 44px oklch(0.08 0.02 170 / 32%);
}

.plan-card-media {
  width: 100%;
  height: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 2px;
  padding: 8px;
}

.plan-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.plan-card-title {
  font-size: .88rem;
  font-weight: 600;
  color: #182009;
  margin: .55rem 0 0;
  letter-spacing: .04em;
}

/* Plan Button */
.plan-action {
  flex-shrink: 0;
}

.btn-plan-enquire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .65rem clamp(1.4rem, 2.2vw, 2.2rem);
  border: 1px solid var(--foreground);
  border-radius: 50px;
  background: transparent;
  color: var(--foreground);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .04em;
  transition: all .28s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn-plan-enquire:hover {
  background: var(--foreground);
  color: var(--background);
}

/* Active and Hover State */
.plan-row.is-active,
.plan-row:hover {
  background-color: #7a572d;
}

.plan-row.is-active .plan-bullet,
.plan-row:hover .plan-bullet,
.plan-row.is-active .plan-type h3,
.plan-row:hover .plan-type h3,
.plan-row.is-active .plan-spec-val,
.plan-row:hover .plan-spec-val,
.plan-row.is-active .plan-price-val,
.plan-row:hover .plan-price-val {
  color: #ffffff;
}

.plan-row.is-active .plan-spec-label,
.plan-row:hover .plan-spec-label {
  color: rgba(255, 255, 255, 0.78);
}

.plan-row.is-active .plan-preview-card,
.plan-row:hover .plan-preview-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.plan-row.is-active .btn-plan-enquire,
.plan-row:hover .btn-plan-enquire {
  border-color: rgba(255, 255, 255, 0.75);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.15);
}

.plan-row.is-active .btn-plan-enquire:hover,
.plan-row:hover .btn-plan-enquire:hover {
  background: #ffffff !important;
  color: #7a572d !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ----------------------------------------------------
   07 — VISUAL GALLERY & LIGHTBOX
---------------------------------------------------- */
.gallery-section {
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.gallery-header {
  max-width: 100%;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.85rem);
}

.gallery-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.gallery-header-copy {
  max-width: 54rem;
}

.gallery-header h2 {
  font: 400 clamp(2rem, 3.2vw, 3.4rem)/1.05 var(--font-display);
  margin: 1.2rem 0 1.4rem;
  color: var(--foreground);
}

.gallery-nav-buttons {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}

.gallery-nav-btn {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: oklch(from var(--background) l c h / 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 4px 12px oklch(0.08 0.02 170 / 8%);
}

.gallery-nav-btn:hover:not(:disabled),
.gallery-nav-btn:focus-visible:not(:disabled) {
  border-color: var(--champagne);
  background: var(--champagne);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px oklch(0.08 0.02 170 / 18%);
}

.gallery-nav-btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  transform: none;
}

.gallery-slider-wrap {
  position: relative;
  width: 100%;
}

.gallery-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid oklch(from var(--champagne) l c h / 50%);
  background: oklch(from var(--background) l c h / 94%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 8px 24px oklch(0.08 0.02 170 / 22%);
}

.gallery-slider-arrow:hover:not(:disabled),
.gallery-slider-arrow:focus-visible:not(:disabled) {
  border-color: var(--champagne);
  background: var(--champagne);
  color: var(--primary);
  transform: translateY(-50%) scale(1.08);
}

.gallery-slider-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.gallery-slider-prev {
  left: -1rem;
}

.gallery-slider-next {
  right: -1rem;
}

.gallery-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: clamp(1.15rem, 2vw, 1.85rem);
  padding: .5rem .25rem 1.75rem;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: oklch(from var(--champagne) l c h / 50%) transparent;
}

.gallery-grid::-webkit-scrollbar {
  height: 5px;
}

.gallery-grid::-webkit-scrollbar-track {
  background: oklch(from var(--border) l c h / 25%);
  border-radius: 999px;
}

.gallery-grid::-webkit-scrollbar-thumb {
  background: oklch(from var(--champagne) l c h / 50%);
  border-radius: 999px;
}

.gallery-grid::-webkit-scrollbar-thumb:hover {
  background: var(--champagne);
}

.gallery-item {
  flex: 0 0 clamp(310px, 28vw, 420px);
  width: clamp(310px, 28vw, 420px);
  min-width: 0;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: oklch(0.14 0.025 170);
  border: 1px solid oklch(from var(--border) l c h / 60%);
  cursor: pointer;
  box-shadow: 0 8px 24px oklch(0.08 0.02 170 / 8%);
  transition: transform .35s cubic-bezier(.2,.65,.25,1), box-shadow .35s ease, border-color .3s ease;
  outline: none;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px oklch(0.08 0.02 170 / 16%);
  border-color: var(--champagne);
}

.gallery-item.is-hidden {
  display: none !important;
}

.gallery-item-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: oklch(0.12 0.02 170);
}

.gallery-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.65,.25,1);
}

.gallery-item:hover .gallery-item-media img,
.gallery-item:focus-visible .gallery-item-media img {
  transform: scale(1.06);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: linear-gradient(to top, rgba(8, 16, 14, 0.88) 0%, rgba(8, 16, 14, 0.35) 45%, transparent 75%);
  transition: background .3s ease;
}

.gallery-item:hover .gallery-item-overlay {
  background: linear-gradient(to top, rgba(8, 16, 14, 0.92) 0%, rgba(8, 16, 14, 0.45) 50%, rgba(8, 16, 14, 0.15) 100%);
}

.gallery-expand-icon {
  align-self: flex-end;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: oklch(from var(--background) l c h / 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
  box-shadow: 0 4px 12px oklch(0.08 0.02 170 / 20%);
}

.gallery-item:hover .gallery-expand-icon {
  transform: scale(1.1);
  background: var(--champagne);
  color: var(--primary);
  border-color: var(--champagne);
}

.gallery-item-info {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.gallery-item-badge {
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 600;
}

.gallery-item-title {
  font: 400 clamp(1.05rem, 1.4vw, 1.25rem)/1.2 var(--font-display);
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Lightbox Modal */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}

.gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.08 0.02 170 / 94%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1250px;
}

.lightbox-figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-image-wrap {
  position: relative;
  max-height: 72vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-height: 72vh;
  max-width: 92vw;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 25px 60px -10px oklch(0.02 0.01 170 / 70%);
  border: 1px solid oklch(from var(--champagne) l c h / 30%);
  transition: opacity .2s ease, transform .2s ease;
}

.lightbox-caption {
  margin-top: 1.15rem;
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid oklch(from var(--champagne) l c h / 28%);
  padding-top: .9rem;
  color: var(--primary-foreground);
}

.lightbox-caption-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.lightbox-badge {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 600;
}

.lightbox-title {
  font: 400 clamp(1.2rem, 2.4vw, 1.8rem)/1.15 var(--font-display);
  color: #ffffff;
  margin: 0;
}

.lightbox-subtitle {
  font-size: clamp(.72rem, 1vw, .85rem);
  color: var(--stone);
  margin: .25rem 0 0;
  line-height: 1.5;
}

.lightbox-counter {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 500;
  white-space: nowrap;
  padding-left: 1.5rem;
}

.lightbox-btn {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(1 0 0 / 10%);
  border: 1px solid oklch(1 0 0 / 22%);
  color: #ffffff;
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  background: var(--champagne);
  color: var(--primary);
  border-color: var(--champagne);
  transform: scale(1.08);
}

.lightbox-close {
  top: clamp(1rem, 2.5vw, 2.25rem);
  right: clamp(1rem, 2.5vw, 2.5rem);
  width: 3rem;
  height: 3rem;
  font-size: 1.2rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.35rem;
}

.lightbox-prev:hover,
.lightbox-prev:focus-visible {
  transform: translateY(-50%) scale(1.08);
}

.lightbox-next:hover,
.lightbox-next:focus-visible {
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: clamp(1rem, 2.5vw, 2.5rem);
}

.lightbox-next {
  right: clamp(1rem, 2.5vw, 2.5rem);
}

/* ----------------------------------------------------
   ABOUT THE PROJECT SECTION
---------------------------------------------------- */
.about-section {
  background: var(--background);
  border-top: 1px solid oklch(0.2 0.04 171 / 8%);
  position: relative;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.about-header {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
}

.about-header h2 {
  font: 400 clamp(1.85rem, 3vw, 2.65rem)/1.1 var(--font-display);
  margin: .85rem 0 0;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.about-card {
  position: relative;
  background: #ffffff;
  border: 1px solid oklch(0.2 0.04 171 / 10%);
  border-radius: var(--radius);
  padding: clamp(2rem, 3.8vw, 3.5rem);
  box-shadow: 0 10px 32px rgba(12, 36, 27, 0.04);
  overflow: hidden;
}

.about-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--champagne));
}

.about-lead {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.65;
  color: var(--foreground);
  margin-bottom: 1.15rem;
}

.about-text {
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}

.about-features {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: 2.25rem;
}

.about-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: oklch(from var(--champagne) l c h / 20%);
  border: 1px solid oklch(from var(--accent) l c h / 25%);
  font-size: .8rem;
  font-weight: 500;
  color: var(--primary);
  transition: border-color .2s ease, background-color .2s ease;
}

.about-feat-pill i {
  color: var(--accent);
  font-size: .95rem;
}

.about-feat-pill:hover {
  background: oklch(from var(--champagne) l c h / 35%);
  border-color: var(--accent);
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.btn-about-enquire {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
  padding: .75rem 1.65rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  transition: all .25s ease;
}

.btn-about-enquire:hover,
.btn-about-enquire:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(195, 153, 83, 0.25);
}

/* ----------------------------------------------------
   07.5 — FAQS SECTION (6 Boulevard Tathawade)
---------------------------------------------------- */
.faq-section {
  background: var(--background);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.faq-header {
  max-width: 50rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.faq-main-title {
  font: 400 clamp(2rem, 3.2vw, 3rem)/1.1 var(--font-display);
  margin: .85rem 0 1rem;
  color: var(--primary);
  letter-spacing: .02em;
}

.faq-header .lead {
  font-size: clamp(.92rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--muted-foreground);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem 1.35rem;
  align-items: start;
}

.faq-col {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid oklch(0.2 0.04 171 / 12%);
  border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(12, 36, 27, 0.03);
}

.faq-item:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(195, 153, 83, 0.12);
}

.faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.35rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color .2s ease;
}

.faq-button:hover {
  background-color: oklch(from var(--champagne) l c h / 8%);
}

.faq-num {
  font-family: var(--font-display, serif);
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 600;
  min-width: 1.85rem;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.faq-question {
  flex: 1;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--foreground);
  margin: 0;
  transition: color .2s ease;
}

.faq-button:not(.collapsed) .faq-question {
  color: var(--primary);
}

.faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: oklch(from var(--champagne) l c h / 18%);
  color: var(--accent);
  font-size: .85rem;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2,.65,.25,1), background-color .25s ease, color .25s ease;
}

.faq-button:not(.collapsed) .faq-toggle {
  transform: rotate(45deg);
  background: var(--primary);
  color: #ffffff;
}

.faq-body {
  padding: 0 1.35rem 1.35rem 4rem;
  border-top: 1px solid oklch(from var(--border) l c h / 35%);
  margin-top: .15rem;
  padding-top: .95rem;
}

.faq-body p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  letter-spacing: .01em;
}

/* FAQ Footer Card */
.faq-footer-card {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background: linear-gradient(135deg, oklch(0.2 0.04 171 / 8%) 0%, oklch(0.2 0.04 171 / 4%) 100%);
  border: 1px solid oklch(from var(--accent) l c h / 30%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.faq-footer-eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}

.faq-footer-content h4 {
  font: 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.3 var(--font-display);
  color: var(--primary);
  margin: 0 0 .35rem;
}

.faq-footer-content p {
  font-size: .84rem;
  color: var(--muted-foreground);
  margin: 0;
  max-width: 36rem;
}

.faq-footer-action .btn {
  white-space: nowrap;
}

/* ----------------------------------------------------
   08 — ENQUIRY SECTION & INTERACTIVE FORM
---------------------------------------------------- */
.enquiry-section {
  background: var(--background);
  border-top: 1px solid var(--border);
  position: relative;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}

.enquiry-info-col {
  display: flex;
  flex-direction: column;
}

.enquiry-brand-badge {
  margin-top: .6rem;
  margin-bottom: clamp(.75rem, 1.5vw, 1.15rem);
}
.enquiry-section-logo {
  height: clamp(2.3rem, 3.6vw, 3rem);
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

.enquiry-title {
  font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.2 var(--font-display);
  color: var(--foreground);
  margin: .35rem 0 1.25rem;
}

.enquiry-info-col .lead {
  font-size: clamp(.88rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.enquiry-highlights {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid oklch(from var(--border) l c h / 50%);
}

.enquiry-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.highlight-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(from var(--champagne) l c h / 20%);
  border: 1px solid oklch(from var(--champagne) l c h / 50%);
  color: oklch(0.42 0.08 60);
  font-size: 1.05rem;
}

.enquiry-highlight-item strong {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: .2rem;
}

.enquiry-highlight-item p {
  font-size: .82rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}

.enquiry-highlight-item a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}

.enquiry-highlight-item a:hover {
  color: var(--accent);
}

/* Enquiry Form Card */
.enquiry-card {
  background: #ffffff;
  border: 1px solid oklch(from var(--border) l c h / 65%);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.8vw, 2.75rem);
  box-shadow: 0 20px 45px -15px oklch(0.08 0.02 170 / 10%);
}

.enquiry-card-header {
  margin-bottom: 1.65rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid oklch(from var(--border) l c h / 45%);
}

.badge-privilege {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: oklch(0.42 0.08 60);
  background: oklch(from var(--champagne) l c h / 25%);
  border: 1px solid oklch(from var(--champagne) l c h / 60%);
  padding: .35rem .85rem;
  border-radius: 999px;
  margin-bottom: .85rem;
}

.enquiry-card-header h3 {
  font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--font-display);
  color: var(--primary);
  margin: 0 0 .45rem;
}

.enquiry-card-header p {
  font-size: .84rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}

/* Form Groups & Inputs */
.enquiry-form .form-group {
  margin-bottom: 1.25rem;
}

.enquiry-form .form-row {
  display: flex;
  gap: 1rem;
}

.enquiry-form .form-col-6 {
  flex: 1;
  min-width: 0;
}

.enquiry-form .form-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: .45rem;
}

.enquiry-form .form-label .required {
  color: #c92a2a;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  color: var(--muted-foreground);
  font-size: 1rem;
  pointer-events: none;
}

.luxury-input {
  width: 100%;
  height: 2.95rem;
  padding: .65rem 1rem .65rem 2.65rem;
  font-size: .88rem;
  font-family: var(--font-sans);
  color: var(--foreground);
  background: oklch(from var(--background) l c h / 55%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.luxury-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px oklch(from var(--champagne) l c h / 20%);
}

.phone-input-wrap .phone-prefix {
  position: absolute;
  left: .9rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--foreground);
  padding-right: .55rem;
  border-right: 1px solid var(--border);
  line-height: 1.2;
  pointer-events: none;
}

.phone-input-wrap .phone-input {
  padding-left: 3.5rem;
}

/* Config Pills */
.config-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}

.config-pill {
  display: block;
  position: relative;
  margin: 0;
  cursor: pointer;
}

.config-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.config-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .65rem .35rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .03em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: oklch(from var(--background) l c h / 45%);
  color: var(--foreground);
  transition: all .2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.config-pill:hover span {
  border-color: var(--accent);
  background: oklch(from var(--champagne) l c h / 15%);
}

.config-pill input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px oklch(0.2 0.04 171 / 25%);
}

/* Consent Checkbox */
.form-consent {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .75rem;
  color: var(--muted-foreground);
  line-height: 1.45;
  cursor: pointer;
}

.consent-label input {
  margin-top: .15rem;
  accent-color: var(--primary);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

/* Submit Button */
.btn-submit-enquiry {
  width: 100%;
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 22px oklch(0.2 0.04 171 / 28%);
  transition: all .25s ease;
}

.btn-submit-enquiry:hover,
.btn-submit-enquiry:focus-visible {
  background: oklch(0.18 0.035 170);
  color: var(--champagne);
  border-color: var(--champagne);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px oklch(0.2 0.04 171 / 38%);
}

.btn-submit-enquiry:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

.btn-submit-enquiry i {
  font-size: .95rem;
  transition: transform .25s ease;
}

.btn-submit-enquiry:hover i {
  transform: translateX(4px);
}

.form-privacy-note {
  text-align: center;
  font-size: .72rem;
  color: var(--muted-foreground);
  margin-top: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

.form-error {
  display: none;
  font-size: .7rem;
  color: #c92a2a;
  margin-top: .35rem;
  font-weight: 500;
}

.form-group.has-error .form-error {
  display: block;
}

.form-group.has-error .luxury-input {
  border-color: #c92a2a;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.12);
}

/* Success Confirmation State */
.enquiry-success {
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}

.enquiry-success .success-icon {
  font-size: 3.25rem;
  color: #2b8a3e;
  line-height: 1;
  margin-bottom: 1.15rem;
}

.enquiry-success h4 {
  font: 400 clamp(1.6rem, 2.5vw, 2.1rem)/1.2 var(--font-display);
  color: var(--primary);
  margin: 0 0 .65rem;
}

.enquiry-success p {
  font-size: .88rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto 1.65rem;
}

/* ----------------------------------------------------
   AUTO POP-UP & INTERACTIVE ENQUIRY MODAL
---------------------------------------------------- */
.enquiry-modal .modal-dialog {
  max-width: 540px;
  margin: 1.5rem auto;
}

.enquiry-modal-content {
  background: #ffffff;
  border: 1px solid oklch(from var(--border) l c h / 75%);
  border-radius: var(--radius);
  box-shadow: 0 25px 60px -10px oklch(0.08 0.02 170 / 45%);
  position: relative;
  overflow: hidden;
}

.modal-close-gold {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 10;
  opacity: .65;
  transition: opacity .2s ease, transform .2s ease;
}

.modal-close-gold:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.enquiry-modal-body {
  padding: clamp(1.75rem, 3.8vw, 2.5rem);
}

.modal-brand-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid oklch(from var(--border) l c h / 45%);
}

.modal-brand-logo {
  height: clamp(2.4rem, 4.5vw, 3.1rem);
  width: auto;
  max-width: 165px;
  object-fit: contain;
  margin: 0 auto .85rem;
  display: block;
}

.modal-eyebrow {
  display: block;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: oklch(0.52 0.09 55);
  font-weight: 600;
  margin-bottom: .45rem;
}

.modal-title {
  font: 400 clamp(1.4rem, 2.4vw, 1.85rem)/1.2 var(--font-display);
  color: var(--primary);
  margin: 0 0 .45rem;
}

.modal-sub {
  font-size: .82rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}

/* ----------------------------------------------------
   SITE FOOTER (Luxury Brand Theme)
---------------------------------------------------- */
.site-footer {
  background: var(--primary);
  color: var(--primary-foreground);
  border-top: 1px solid oklch(from var(--champagne) l c h / 30%);
  position: relative;
  overflow: hidden;
}

.footer-container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 1fr;
  gap: clamp(2.5rem, 4.5vw, 5rem);
  align-items: start;
}

/* Col 1: Brand & Tagline */
.footer-col--brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}
.footer-brand-logo {
  height: clamp(3.2rem, 5.2vw, 4.4rem);
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .95;
  transition: opacity .2s ease;
}
.footer-brand-wrap .brand-place {
  font-size: .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #c4a77d;
  color: var(--champagne);
  margin-top: .15rem;
}

.footer-brand-mark {
  align-items: flex-start;
}

.footer-tagline {
  font: 400 clamp(1.35rem, 2vw, 1.85rem)/1.2 var(--font-display);
  color: var(--primary-foreground);
  letter-spacing: .02em;
  margin: 1.35rem 0 1.25rem;
}

.footer-brochure-btn {
  margin-top: .35rem;
  border-color: oklch(from var(--champagne) l c h / 55%);
  color: var(--champagne);
}
.footer-brochure-btn:hover {
  background: var(--champagne);
  color: var(--primary);
  border-color: var(--champagne);
}

/* Common Column Titles */
.footer-col-title {
  font: 600 clamp(.95rem, 1.2vw, 1.15rem)/1.3 var(--font-sans);
  letter-spacing: .06em;
  color: var(--primary-foreground);
  margin: 0 0 1.5rem;
  text-transform: none;
}

/* Col 2: Stay In Touch */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: oklch(0.18 0.035 170);
  border: 1px solid oklch(from var(--champagne) l c h / 45%);
  box-shadow: 0 4px 12px oklch(0.08 0.02 170 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
  font-size: .95rem;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.footer-contact-item:hover .contact-icon {
  transform: translateY(-2px) scale(1.05);
  background: var(--champagne);
  color: var(--primary);
  border-color: var(--champagne);
}

.contact-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: clamp(.78rem, .9vw, .86rem);
  line-height: 1.55;
  color: var(--stone);
}

.contact-text p {
  margin: 0;
}

.contact-text a {
  color: var(--stone);
  text-decoration: none;
  transition: color .2s ease;
  width: fit-content;
}

.contact-text a:hover {
  color: var(--champagne);
}

/* Col 3: RERA Details */
.footer-rera-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-rera-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.footer-maharera-logo {
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
  transition: transform .25s ease;
}

.footer-maharera-logo:hover {
  transform: scale(1.08);
}

.footer-rera-num {
  font: 700 clamp(1.15rem, 1.45vw, 1.4rem)/1 var(--font-sans);
  letter-spacing: .06em;
  color: var(--primary-foreground);
  margin: 0;
}

.footer-qr-card {
  width: fit-content;
  padding: 6px;
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px oklch(0.08 0.02 170 / 50%);
  margin-bottom: 1rem;
  line-height: 0;
  transition: transform .3s ease;
}

.footer-qr-card:hover {
  transform: scale(1.04);
}

.footer-qr-card img {
  width: 74px;
  height: 74px;
  display: block;
  object-fit: contain;
}

.footer-rera-link-wrap {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: clamp(.75rem, .88vw, .84rem);
}

.rera-caption {
  color: var(--stone);
  font-size: .75rem;
}

.rera-link {
  color: var(--primary-foreground);
  text-decoration: none;
  word-break: break-all;
  transition: color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.4;
}

.rera-link:hover {
  color: var(--champagne);
  text-decoration: underline;
}

.rera-arrow {
  color: var(--champagne);
  font-weight: 600;
  display: inline-block;
  transition: transform .2s ease;
}

.rera-link:hover .rera-arrow {
  transform: translateX(3px);
}

/* Divider */
.footer-divider {
  width: 100%;
  max-width: 100%;
  height: 1px;
  background: oklch(from var(--champagne) l c h / 25%);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.25rem, 2vw, 1.75rem);
}

/* Disclaimer */
.footer-disclaimer {
  width: 100%;
}

.footer-disclaimer p {
  font-size: clamp(.68rem, .82vw, .76rem);
  line-height: 1.8;
  color: oklch(from var(--stone) l c h / 85%);
  margin: 0;
  text-align: justify;
}

.footer-disclaimer strong {
  color: var(--primary-foreground);
  font-weight: 600;
}

/* ----------------------------------------------------
   FLOATING ACTION BUTTONS (from reference)
---------------------------------------------------- */
/* 1. WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.85rem);
  bottom: clamp(1rem, 2.5vw, 1.85rem);
  z-index: 80;
  width: clamp(3rem, 4vw, 3.4rem);
  height: clamp(3rem, 4vw, 3.4rem);
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform .3s cubic-bezier(.2,.65,.25,1), box-shadow .3s ease;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.58), 0 4px 10px rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

/* 2. Floating 'Enquire Now' Fixed Button (Bottom-Right, All Devices) */
.floating-enquire-btn {
  position: fixed;
  right: clamp(1rem, 3vw, 1.85rem);
  bottom: clamp(1.15rem, 3.5vw, 1.85rem);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: clamp(.85rem, 1.25vw, 1.1rem) clamp(1.5rem, 2.2vw, 2.1rem);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  background: linear-gradient(135deg, var(--primary) 0%, #163d2e 100%);
  color: #ffffff;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: clamp(.84rem, 1.1vw, .98rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(196, 167, 125, 0.35);
  transition: transform .25s cubic-bezier(.2,.65,.25,1), background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  outline: none;
  text-decoration: none;
  overflow: hidden;
  animation: enquirePulse 3s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.floating-enquire-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(196, 167, 125, 0.35) 65%,
    transparent 100%
  );
  border-radius: inherit;
  transform: skewX(-22deg);
  animation: enquireShimmer 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.floating-enquire-btn i {
  font-size: clamp(1.12rem, 1.35vw, 1.32rem);
  color: var(--champagne);
  transition: color .25s ease, transform .25s ease;
  display: inline-block;
  animation: enquireIconPulse 3s ease-in-out infinite;
  transform-origin: center center;
  position: relative;
  z-index: 1;
}

.floating-enquire-btn span {
  position: relative;
  z-index: 1;
}

.floating-enquire-btn:hover,
.floating-enquire-btn:focus-visible {
  animation-play-state: paused;
  background: var(--accent);
  border-color: #f4e3c1;
  color: #ffffff;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 30px rgba(195, 153, 83, 0.5), 0 4px 10px rgba(0, 0, 0, 0.25);
}

.floating-enquire-btn:hover i,
.floating-enquire-btn:focus-visible i {
  color: #ffffff;
  transform: scale(1.15);
  animation-play-state: paused;
}

/* 3. Floating 'Book A Site Visit' Side Badge */
.floating-visit-badge {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 75;
  background: oklch(0.52 0.09 55); /* Elegant warm bronze-caramel matching reference */
  color: #ffffff;
  padding: 1rem .55rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%) rotate(180deg);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 0 var(--radius) var(--radius) 0;
  border: none;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  line-height: inherit;
  box-shadow: 0 8px 24px oklch(0.08 0.02 170 / 35%);
  text-decoration: none;
  transition: background-color .25s ease, transform .25s ease;
}

.floating-visit-badge:hover,
.floating-visit-badge:focus-visible {
  background: var(--champagne);
  color: var(--primary);
  transform: translateY(-50%) rotate(180deg) translateX(3px);
}

.image-reveal { overflow: hidden; }
.image-reveal img { transition: transform 1.1s cubic-bezier(.2,.65,.25,1); }
.image-reveal:hover img { transform: scale(1.025); }

/* ----------------------------------------------------
   RESPONSIVE: TABLET LANDSCAPE & PORTRAIT (768px - 1024px)
---------------------------------------------------- */
@media (max-width: 1024px) {
  .envelope-scroll { height: 270vh; }
  .envelope-projects { top: auto; bottom: calc(54% + clamp(6.75rem, 12vw + 1rem, 8.85rem)); }
  .wax-seal { width: clamp(11.5rem, 24vw, 15.5rem); top: 46%; }
  .envelope-identity > p { top: calc(46% + clamp(6.75rem, 12vw + 1rem, 8.85rem)); bottom: auto; }
  .opening-guide { bottom: clamp(1.6rem, 3.5vh, 2.4rem); font-size: .68rem; z-index: 30; }
  .opening-index { bottom: clamp(1.6rem, 3.5vh, 2.4rem); z-index: 30; }

  .manifesto { min-height: auto; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; }
  .manifesto .section-number { grid-column: 1 / -1; }
  .manifesto-copy { padding-top: 0; }
  .manifesto-image img { height: 48vh; min-height: 360px; }

  .residences-section { min-height: auto; grid-template-columns: 1fr 1fr; }
  .tower-visual { min-height: 100%; }
  .tower-copy { padding: 2.5rem 2rem; }

  .nature-section { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  .nature-image { grid-row: span 2; display: flex; align-items: center; justify-content: center; }
  .nature-image img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }

  .landscape-band { height: clamp(20rem, 45vh, 26rem); min-height: auto; }
  .landscape-title { top: 9%; left: 5vw; }
  .landscape-title h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
  .landscape-band > p { bottom: 7%; right: 5vw; }

  .recreation-section { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .recreation-intro { padding-top: 1.5rem; }
  .lounge-image { margin: -3.5rem 0 0 6%; width: 94%; }

  .interior-section { min-height: auto; grid-template-columns: 1fr 1fr; align-items: center; }
  .interior-section > img { max-height: 520px; }
  .interior-section > div { padding: 2.5rem 2rem; }

  .specifications-header h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
  .specifications-grid { gap: 1.25rem; }
  .spec-body { padding: 0 1.25rem 1.25rem 4rem; padding-top: 1rem; }

  /* Gallery Tablet */
  .gallery-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 1.25rem;
  }
  .gallery-item {
    flex: 0 0 clamp(280px, 44vw, 360px) !important;
    width: clamp(280px, 44vw, 360px) !important;
  }
  .gallery-slider-prev { left: -.5rem; }
  .gallery-slider-next { right: -.5rem; }
  .lightbox-prev { left: .75rem; }
  .lightbox-next { right: .75rem; }
  .lightbox-btn { width: 2.85rem; height: 2.85rem; font-size: 1.15rem; }

  /* Footer Tablet */
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-col--brand {
    grid-column: span 2;
  }

  /* Enquiry Section Tablet */
  .enquiry-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ----------------------------------------------------
   RESPONSIVE: MOBILE DRAWER (Below 992px)
---------------------------------------------------- */
@media (min-width: 992px) {
  .menu-button { display: none !important; }
  .site-nav.collapse { display: flex !important; }
}

@media (max-width: 991px) {
  html { scroll-padding-top: 4.5rem; }
  .site-header { height: 4.5rem; padding: 0 1.5rem; }
  .header-logo { height: 2.2rem; max-width: 140px; }
  .menu-button { display: inline-flex; }

  .mobile-drawer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1.25rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid oklch(from var(--border) l c h / 45%);
  }
  .mobile-drawer-logo {
    height: 2.45rem;
    width: auto;
    object-fit: contain;
    display: block;
  }
  .mobile-drawer-place {
    font-size: .52rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-top: .4rem;
  }

  .site-nav.collapse:not(.show) { display: none; }
  .site-nav.collapse.show, .site-nav.collapsing {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 4.5rem;
    left: 0;
    right: 0;
    width: 100%;
    padding: 1.5rem 1.5rem 2rem;
    background: oklch(from var(--background) l c h / 98%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px oklch(0.08 0.02 170 / 14%);
    gap: .35rem;
  }
  .site-nav > a.nav-link {
    padding: .85rem 0;
    font-size: .72rem;
    letter-spacing: .18em;
    border-bottom: 1px solid oklch(from var(--border) l c h / 45%);
  }
  .site-nav .btn {
    width: 100%;
    margin-top: .9rem;
    min-height: 2.8rem;
    font-size: .68rem;
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* ----------------------------------------------------
   RESPONSIVE: MOBILE HANDHELD (Below 768px)
---------------------------------------------------- */
@media (max-width: 767px) {
  html, body {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
  }
  main {
    width: 100%;
    max-width: 100%;
  }
  .envelope-scroll { 
    height: 220vh; 
    width: 100%;
    max-width: 100%;
  }
  .envelope-stage {
    perspective: 1200px;
    overflow: hidden;
  }
  .envelope-hero { transform: none; }
  .envelope-hero-copy { left: 7%; right: 7%; bottom: 8%; }
  .envelope-hero-copy p { font-size: clamp(2rem, 7.5vw, 2.75rem); }
  .door-panel::before { inset: clamp(.65rem, 2vh, 1.25rem) clamp(.65rem, 2vw, 1.25rem); }

  .envelope-projects {
    top: auto;
    bottom: calc(54% + clamp(5.85rem, 19vw + .85rem, 7.8rem));
    width: min(100% - 1.5rem, 30rem);
    gap: .35rem;
  }
  .envelope-projects span { letter-spacing: .12em; font-size: clamp(.6rem, 2.8vw, .85rem); }
  .envelope-projects b { font-size: clamp(.65rem, 3.2vw, .95rem); padding: .3rem .75rem .35rem; }
  .envelope-projects b em { font-size: clamp(1.2rem, 6.5vw, 2.2rem); }
  .wax-seal {
    width: clamp(10rem, 38vw, 13.5rem);
    top: 46%;
  }
  .envelope-identity > p {
    top: calc(46% + clamp(5.85rem, 19vw + .85rem, 7.8rem));
    bottom: auto;
    font-size: clamp(.85rem, 3.6vw, 1.25rem);
  }
  .opening-guide {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
    font-size: clamp(.65rem, 2.8vw, .75rem);
    letter-spacing: .16em;
    white-space: nowrap;
    z-index: 30;
  }
  .opening-index {
    right: 1rem;
    bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
    z-index: 30;
  }
  .opening-index i { width: 2rem; }

  .section-pad { padding: clamp(2rem, 5.5vw, 3rem) clamp(1.15rem, 4vw, 1.75rem); }

  /* Title Icon Mobile */
  .title-icon {
    width: clamp(2.35rem, 7vw, 3rem);
    margin-top: .65rem;
    margin-bottom: clamp(.65rem, 1.8vw, .95rem);
  }
  .manifesto-copy > .title-icon,
  .interior-section div > .title-icon,
  .envelope-hero-copy > .title-icon {
    margin-top: 0;
  }

  /* Section 01 */
  .manifesto { display: flex; flex-direction: column; gap: 1.5rem; min-height: auto; }
  .manifesto-copy { padding-top: 0; }
  .manifesto-copy h1 { font-size: clamp(1.85rem, 6.5vw, 2.5rem); margin: .6rem 0 1rem; }
  .manifesto-image img { height: clamp(240px, 44vh, 350px); width: 100%; }
  .manifesto-caption { margin-top: .75rem; font-size: clamp(.8rem, 2.7vw, .92rem); line-height: 1.55; }

  /* Why 6 Boulevard (2 Columns on Mobile) */
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.5rem, 2vw, .85rem);
  }
  .why-card {
    padding: clamp(.9rem, 2.5vw, 1.25rem) clamp(.7rem, 2vw, 1rem);
  }
  .why-card-top {
    margin-bottom: .75rem;
  }
  .why-card-number {
    font-size: clamp(1.1rem, 3.8vw, 1.35rem);
  }
  .why-card-icon {
    width: 2.2rem;
    height: 2.2rem;
    font-size: .95rem;
  }
  .why-card-title {
    font-size: clamp(.88rem, 3vw, 1.05rem);
    margin: 0 0 .35rem;
    line-height: 1.25;
  }
  .why-card-desc {
    font-size: clamp(.72rem, 2.3vw, .82rem);
    line-height: 1.45;
  }
  .why-header {
    margin-bottom: 1.5rem;
  }
  .why-header h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    margin: .5rem 0 .65rem;
  }

  /* Section 02 */
  .residences-section { display: flex; flex-direction: column; min-height: auto; }
  .tower-visual { min-height: clamp(240px, 42vh, 360px); }
  .tower-copy { padding: 0.75rem 1.25rem 2rem; min-height: auto; justify-content: flex-start; }
  .tower-copy h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .75rem 0 1.25rem; }
  .residence-stat { padding: 1.2rem 0; gap: 1.2rem; }
  .residence-stat strong { font-size: clamp(2.2rem, 8vw, 3.4rem); }

  /* Section 03 */
  .nature-section { display: flex; flex-direction: column; gap: 1.5rem; }
  .nature-heading h2 { font-size: clamp(1.85rem, 6.5vw, 2.5rem); margin: .6rem 0 .9rem; }
  .nature-copy { font-size: clamp(.84rem, 2.8vw, .95rem); line-height: 1.65; }
  .nature-image img { width: 100%; height: auto; max-height: clamp(280px, 55vh, 420px); object-fit: contain; }
  .nature-stat { padding-top: 1.25rem; gap: .75rem; }
  .nature-stat strong { font-size: clamp(4.2rem, 16vw, 6.5rem); }

  /* Landscape Band */
  .landscape-band { height: clamp(18rem, 45vh, 24rem); }
  .landscape-title { top: 7%; left: 6vw; right: 6vw; }
  .landscape-title h2 { font-size: clamp(1.65rem, 5.5vw, 2.2rem); margin-top: .6rem; }
  .landscape-band > p { bottom: 5%; right: 6vw; background: oklch(0.1 0.02 170 / 75%); backdrop-filter: blur(8px); padding: .35rem .75rem; border: 1px solid oklch(from var(--champagne) l c h / 30%); border-radius: var(--radius); }

  /* Landscape Plan */
  .landscape-plan-header { padding: 0 clamp(1.25rem, 4vw, 2rem); margin-bottom: 1.25rem; }
  .landscape-plan-header h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .6rem 0 .85rem; }
  .landscape-plan-tags { gap: .5rem; margin-top: 1rem; }
  .plan-tag { font-size: .58rem; padding: .35rem .65rem; }
  .plan-zoom-hint { bottom: .75rem; right: .75rem; }
  .plan-zoom-hint .btn { min-height: 2.2rem; padding: .4rem .8rem; font-size: .6rem; }

  /* Section 04 */
  .recreation-section { display: flex; flex-direction: column; gap: 1.5rem; }
  .recreation-intro { padding-top: 0; }
  .recreation-intro h2 { font-size: clamp(1.85rem, 6.5vw, 2.5rem); margin: .6rem 0 1rem; }
  .pool-image img { aspect-ratio: 16/9; }
  .lounge-image { margin: 0; width: 100%; }
  .lounge-image img { aspect-ratio: 16/9; width: 100%; }
  .amenity-list { margin-top: 1.25rem; grid-template-columns: repeat(2, 1fr); gap: 0 1.25rem; }

  /* 05 — Amenities */
  .amenities-header { margin-bottom: 1.25rem; }
  .amenities-header h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .6rem 0 .85rem; }
  .amenities-marquee-container { --marquee-gap: 1.5rem; }
  .amenity-card { width: 120px; gap: .75rem; }
  .amenity-circle { width: 4.2rem; height: 4.2rem; }
  .amenity-circle svg { width: 1.45rem; height: 1.45rem; }
  .amenity-label { font-size: .62rem; }

  /* Specifications */
  .specifications-header { margin-bottom: 1.25rem; }
  .specifications-header h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .6rem 0 .85rem; }
  .specifications-grid { grid-template-columns: 1fr; gap: .85rem; }
  .spec-button { padding: 1rem 1.15rem; }
  .spec-title { font-size: .7rem; letter-spacing: .08em; }
  .spec-icon { width: 2rem; height: 2rem; font-size: .95rem; }
  .spec-body { padding: 0 1.15rem 1.15rem 1.15rem; padding-top: .85rem; }
  .spec-list li { font-size: .74rem; line-height: 1.55; }

  /* Interior */
  .interior-section { display: flex; flex-direction: column; min-height: auto; }
  .interior-section > img { width: 100%; height: auto; max-height: clamp(280px, 55vh, 420px); object-fit: contain; }
  .interior-section > div { padding: 2rem 1.25rem 2.25rem; }
  .interior-section h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .75rem 0 1.25rem; }

  /* Floor Plans & Pricing Mobile */
  .floorplans-header { margin-bottom: 1.5rem; }
  .floorplans-header h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .6rem 0 .85rem; }
  .plan-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.35rem;
    padding: 1.6rem 1.15rem;
  }
  .plan-row-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem 1rem;
  }
  .plan-row-main > .plan-bullet {
    display: none;
  }
  .plan-type {
    width: 100%;
    margin-bottom: .15rem;
  }
  .plan-type h3 {
    font-size: clamp(1.5rem, 5.5vw, 1.85rem);
    min-width: 0;
  }
  .plan-area-col,
  .plan-price-col {
    flex: 1 1 45%;
    min-width: 120px;
  }
  .plan-price-col {
    text-align: right;
  }
  .plan-spec-val,
  .plan-price-val {
    font-size: clamp(.92rem, 3.2vw, 1.05rem);
  }
  .plan-card-slot {
    width: 100%;
    height: auto;
  }
  .plan-preview-card {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: min(100%, 200px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    margin: 0 auto;
  }
  .plan-action {
    display: flex;
    justify-content: center;
  }
  .btn-plan-enquire {
    width: 100%;
    max-width: 260px;
  }

  /* Gallery Mobile */
  .gallery-header { margin-bottom: .85rem; width: 100%; max-width: 100%; min-width: 0; }
  .gallery-header h2 { font-size: clamp(1.75rem, 6vw, 2.35rem); margin: .6rem 0 .85rem; }
  .gallery-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.15rem;
  }
  .gallery-nav-buttons {
    align-self: flex-end;
    gap: .5rem;
  }
  .gallery-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .95rem;
  }
  .gallery-slider-arrow {
    display: none;
  }
  .gallery-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: .75rem;
    margin-top: .5rem;
    padding-bottom: 1.25rem;
  }
  .gallery-item {
    flex: 0 0 calc(50% - .38rem) !important;
    width: calc(50% - .38rem) !important;
    min-width: 0;
  }
  .gallery-item-media { aspect-ratio: 16 / 11; }
  .gallery-item-overlay { padding: .55rem .65rem; }
  .gallery-expand-icon { width: 1.7rem; height: 1.7rem; font-size: .68rem; }
  .gallery-item-badge { font-size: .48rem; letter-spacing: .1em; margin-bottom: .15rem; }
  .gallery-item-title {
    font-size: clamp(.72rem, 2.5vw, .86rem) !important;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Lightbox Mobile */
  .lightbox-container { padding: 1rem .75rem; justify-content: space-between; }
  .lightbox-content { height: 100%; justify-content: center; }
  .lightbox-figure { height: 100%; justify-content: center; }
  .lightbox-image-wrap { max-height: 58vh; }
  .lightbox-image { max-height: 58vh; max-width: 96vw; }
  .lightbox-caption { flex-direction: column; align-items: flex-start; gap: .4rem; padding-top: .75rem; margin-top: .75rem; }
  .lightbox-counter { padding-left: 0; font-size: .62rem; }
  .lightbox-prev, .lightbox-next {
    top: auto;
    bottom: 1.25rem;
    transform: none;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.1rem;
  }
  .lightbox-prev { left: 1rem; }
  .lightbox-next { right: 1rem; }
  .lightbox-prev:hover, .lightbox-prev:focus-visible,
  .lightbox-next:hover, .lightbox-next:focus-visible {
    transform: scale(1.06);
  }
  .lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1rem;
  }

  /* Footer Mobile */
  .footer-container {
    padding: 2.25rem 1.25rem 1.75rem;
  }
  .footer-main-grid {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  .footer-brand-logo {
    height: 2.9rem;
    max-width: 195px;
  }
  .footer-disclaimer p {
    text-align: left;
    font-size: .72rem;
  }
  .floating-visit-badge {
    display: none;
  }

  /* About The Project Mobile */
  .about-card {
    padding: 1.5rem 1.25rem;
  }
  .about-header h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    margin-top: .6rem;
  }
  .about-lead {
    font-size: .98rem;
    line-height: 1.55;
    margin-bottom: .85rem;
  }
  .about-text {
    font-size: .88rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
  }
  .about-features {
    gap: .5rem;
    margin-bottom: 1.75rem;
  }
  .about-feat-pill {
    font-size: .74rem;
    padding: .4rem .75rem;
  }
  .about-actions {
    flex-direction: column;
    width: 100%;
  }
  .about-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* FAQs Mobile */
  .faq-header {
    margin-bottom: 1.5rem;
  }
  .faq-main-title {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    margin: .6rem 0 .75rem;
  }
  .faq-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .faq-col {
    gap: .75rem;
  }
  .faq-button {
    padding: .95rem 1rem;
    gap: .65rem;
  }
  .faq-num {
    font-size: .92rem;
    min-width: 1.5rem;
  }
  .faq-question {
    font-size: .82rem;
  }
  .faq-toggle {
    width: 1.65rem;
    height: 1.65rem;
    font-size: .75rem;
  }
  .faq-body {
    padding: 0 1rem 1rem 1rem;
    padding-top: .75rem;
  }
  .faq-body p {
    font-size: .78rem;
    line-height: 1.6;
  }
  .faq-footer-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem 1.15rem;
    gap: 1.15rem;
    margin-top: 2rem;
  }
  .faq-footer-action {
    width: 100%;
  }
  .faq-footer-action .btn {
    width: 100%;
    justify-content: center;
  }

  /* Floating Action Buttons Mobile */
  .floating-whatsapp {
    position: fixed !important;
    bottom: 1.15rem !important;
    bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 1rem !important;
    z-index: 998 !important;
    width: 3.15rem !important;
    height: 3.15rem !important;
    font-size: 1.5rem !important;
  }

  .floating-enquire-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 1.15rem !important;
    bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
    z-index: 999 !important;
    padding: .82rem 1.45rem !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    gap: .55rem !important;
    pointer-events: auto !important;
  }
  .floating-enquire-btn i {
    font-size: 1.12rem !important;
    display: inline-block !important;
  }
  .floating-enquire-btn span {
    display: inline-block !important;
  }

  /* Enquiry Section Mobile */
  .enquiry-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .enquiry-form .form-row {
    flex-direction: column;
    gap: 1.25rem;
  }
  .config-pills {
    grid-template-columns: repeat(2, 1fr);
    gap: .45rem;
  }
  .enquiry-card {
    padding: 1.5rem 1.15rem;
  }
  .enquiry-modal-body {
    padding: 1.5rem 1.15rem;
  }
}

/* ----------------------------------------------------
   RESPONSIVE: SMALL SMARTPHONES (Below 420px)
---------------------------------------------------- */
@media (max-width: 420px) {
  .section-pad { padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1rem, 3.5vw, 1.5rem); }
  .envelope-scroll { height: 200vh; }
  .wax-seal { width: clamp(8.8rem, 42vw, 11.2rem); top: 46%; }
  .envelope-projects {
    top: auto;
    bottom: calc(54% + clamp(5.15rem, 21vw + .75rem, 6.45rem));
    width: calc(100% - 1rem);
  }
  .envelope-identity > p {
    top: calc(46% + clamp(5.15rem, 21vw + .75rem, 6.45rem));
    bottom: auto;
    font-size: clamp(.8rem, 3.8vw, 1.05rem);
  }
  .opening-guide {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    font-size: .62rem;
    gap: .5rem;
    z-index: 30;
  }
  .opening-index {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    z-index: 30;
  }
  .header-logo { height: 1.95rem; max-width: 125px; }
  .footer-brand-logo { height: 2.6rem; max-width: 170px; }
  .modal-brand-logo { height: 2.2rem; max-width: 140px; }
  .plan-tag { font-size: .55rem; padding: .3rem .55rem; }
  .gallery-grid { gap: .65rem; }
  .gallery-item {
    flex: 0 0 calc(50% - .33rem) !important;
    width: calc(50% - .33rem) !important;
  }
  .gallery-item-overlay { padding: .45rem .55rem; }
  .gallery-expand-icon { width: 1.55rem; height: 1.55rem; font-size: .62rem; }
  .gallery-item-badge { font-size: .44rem; }
  .gallery-item-title { font-size: .74rem !important; }
  .title-icon { width: 2.25rem; margin-bottom: .65rem; }
  .amenity-list { grid-template-columns: 1fr; }
  .residence-notes { font-size: .58rem; }
  .config-pill span { font-size: .7rem; padding: .55rem .2rem; }
  .why-grid { gap: .5rem; }
  .why-card { padding: .85rem .65rem; }
  .why-card-top { margin-bottom: .5rem; }
  .why-card-icon { width: 1.95rem; height: 1.95rem; font-size: .85rem; }
  .why-card-number { font-size: 1.05rem; }
  .why-card-title { font-size: .82rem; }
  .why-card-desc { font-size: .68rem; line-height: 1.4; }
  .about-card { padding: 1.25rem 1rem; }
  .about-feat-pill { font-size: .7rem; padding: .35rem .65rem; }
  .faq-question { font-size: .78rem; }
  .faq-body p { font-size: .74rem; }
  .faq-button { padding: .85rem .85rem; }
  .faq-body { padding: 0 .85rem .85rem .85rem; padding-top: .65rem; }
  .floating-whatsapp {
    bottom: 1rem !important;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    left: .85rem !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
    font-size: 1.35rem !important;
  }
  .floating-enquire-btn {
    bottom: 1rem !important;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    right: .85rem !important;
    padding: .75rem 1.25rem !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    gap: .48rem !important;
  }
  .floating-enquire-btn i {
    font-size: 1.05rem !important;
  }
}

/* ----------------------------------------------------
   ACCESSIBILITY: REDUCED MOTION
---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .envelope-scroll { height: 100vh; }
  .door-panel, .door-center-seam, .envelope-identity { display: none; }
  .envelope-hero { transform: none; }
  .envelope-hero-copy { opacity: 1; transform: none; }
  .envelope-hero-shade { opacity: .7; }
  .opening-guide, .opening-index { display: none; }
  .image-reveal img, .opening-guide i, .opening-guide svg { transition: none; animation: none; }
  .amenities-track { animation: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .amenity-card { scroll-snap-align: start; }
  .floating-enquire-btn,
  .floating-enquire-btn::after,
  .floating-enquire-btn i {
    animation: none !important;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

/* Floating Enquire Button Continuous Loop Animations */
@keyframes enquirePulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(196, 167, 125, 0.35), 0 0 0 0 rgba(196, 167, 125, 0.75);
  }
  30% {
    transform: translateY(-4px) scale(1.035);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(196, 167, 125, 0.6), 0 0 0 14px rgba(196, 167, 125, 0);
  }
  55% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(196, 167, 125, 0.35), 0 0 0 0 rgba(196, 167, 125, 0);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 14px rgba(196, 167, 125, 0.35), 0 0 0 0 rgba(196, 167, 125, 0);
  }
}

@keyframes enquireShimmer {
  0%, 20% {
    left: -130%;
  }
  50%, 100% {
    left: 140%;
  }
}

@keyframes enquireIconPulse {
  0%, 65%, 100% {
    transform: scale(1) rotate(0deg);
  }
  15% {
    transform: scale(1.18) rotate(-9deg);
  }
  30% {
    transform: scale(1.18) rotate(9deg);
  }
  45% {
    transform: scale(1) rotate(0deg);
  }
}