/* ==========================================================================
   Ankur Azalea – Landing Page
   --------------------------------------------------------------------------
   LAYOUT SYSTEM
   • Desktop (>= 1200px): every size/position is taken straight from the
     1920px Figma frame and written as  calc(N * var(--u))  where
     1u = 1px of the Figma frame  (--u = 100vw / 1920).
     => pixel-perfect at 1920 and proportionally scaled on any other width.
   • Below 1200px: stacked, Bootstrap-friendly layout with a mobile menu.

   FONTS – the Figma fonts, self-hosted (assets/fonts/)
   • Headings: "Identica"  -> Identica-Regular.woff2
   • Body:     "Helvetica Neue" Light / Regular / Medium / Bold  -> HelveticaNeue-*.woff2
               (Latin subset; on macOS / iOS the device's own, identical, copy is used first)
   • Stats numerals: Montserrat (Google Fonts, same as Figma).
   • Playfair Display and TeX Gyre Heros are NOT design fonts: they only fill the instant
     before the real files arrive (font-display:swap) or cover a blocked download.
   The web files were made from the client's licensed desktop fonts (.otf/.ttc), which are not
   kept in this project - only assets/fonts is needed.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Identica – heading font */
@font-face{
  font-family:"Identica";
  src:url("../fonts/Identica-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
/* Stand-in for the instant before Identica arrives (Playfair is ~10% wider, so it is shrunk to match) */
@font-face{
  font-family:"Identica Fallback";
  src:url("../fonts/playfair-display-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  size-adjust:91%;
}
/* Helvetica Neue – body font, the four weights the design uses */
@font-face{font-family:"Helvetica Neue";font-weight:300;font-style:normal;font-display:swap;src:local("HelveticaNeue-Light"),local("Helvetica Neue Light"),url("../fonts/HelveticaNeue-Light.woff2") format("woff2")}
@font-face{font-family:"Helvetica Neue";font-weight:400;font-style:normal;font-display:swap;src:local("HelveticaNeue"),local("HelveticaNeue-Regular"),local("Helvetica Neue"),url("../fonts/HelveticaNeue-Regular.woff2") format("woff2")}
@font-face{font-family:"Helvetica Neue";font-weight:500;font-style:normal;font-display:swap;src:local("HelveticaNeue-Medium"),local("Helvetica Neue Medium"),url("../fonts/HelveticaNeue-Medium.woff2") format("woff2")}
@font-face{font-family:"Helvetica Neue";font-weight:700;font-style:normal;font-display:swap;src:local("HelveticaNeue-Bold"),local("Helvetica Neue Bold"),url("../fonts/HelveticaNeue-Bold.woff2") format("woff2")}
/* Free Helvetica clone: only the instant before Helvetica Neue arrives (Regular covers 300–500, Bold 600+) */
@font-face{font-family:"Helvetica Fallback";src:url("../fonts/texgyreheros-regular.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Fallback";src:url("../fonts/texgyreheros-bold.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --cream:#F5E9DD;
  --brown:#5C3D3B;
  --gold:#BC9051;
  --gold-dark:#a47b3d;
  --navy:#322978;
  --grey:#5F5F5F;
  --grey-d:#535353;
  --orange:#F68F58;

  --font-display:"Identica","Identica Fallback",Georgia,"Times New Roman",serif;
  --font-body:"Helvetica Neue","Helvetica Fallback",Helvetica,Arial,"Liberation Sans",sans-serif;
  --font-num:"Montserrat","Helvetica Neue","Helvetica Fallback",Arial,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);

  --u:1px;                                   /* design unit (overridden >= 1200px) */
  --sy:clamp(40px,10.5vw,64px);              /* vertical section rhythm on phones / tablets */
  --fs-h:clamp(31px,8.6vw,46px);             /* Figma 64px  */
  --fs-body:16px;                            /* Figma 21px  */
  --fs-ui:15px;                              /* Figma 18px  */
  --gutter:clamp(20px,5.5vw,56px);
}
@media (min-width:1200px), (min-width:768px) and (not (pointer:coarse)){
  :root{
    --u:calc(100vw / 1920);
    --fx:clamp(0px, calc((100vw - 1000px) / 200), 1px);   /* 1px of "minimum size" at >=1200px, fading to 0 by 1000px so the layout stays proportional when zoomed */
    --fs-h:max(calc(40 * var(--fx)),calc(64 * var(--u)));
    --fs-body:max(calc(15 * var(--fx)),calc(21 * var(--u)));
    --fs-ui:max(calc(14 * var(--fx)),calc(18 * var(--u)));
    --fs-card:max(calc(11 * var(--fx)),calc(18 * var(--u)));    /* text inside scaled cards stays proportional */
  }
}

/* ---------- Base ---------- */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-ui);
  color:var(--grey);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:none;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
.page{position:relative;overflow-x:clip}
.text-navy{color:var(--navy)!important}

.h-display{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-h);
  line-height:1.2;
  letter-spacing:0;
  margin:0;
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Hidden-until-animated states (removed automatically if JS fails) */
.js .hero__logo,
.js .site-header__inner > *,
.js .float-cta__btn{opacity:0;animation:fallbackShow 0s 4s forwards}
@keyframes fallbackShow{to{opacity:1}}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-pill{
  --h:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--h);padding:0 26px;
  border:1px solid transparent;border-radius:999px;
  font-family:var(--font-body);font-size:var(--fs-ui);font-weight:700;line-height:1.2;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn-pill img{width:24px;height:24px;flex:none;transition:transform .45s var(--ease)}
.btn-pill i{font-size:16px;flex:none}
.btn-pill:hover{transform:translateY(-2px)}
.btn-pill:active{transform:translateY(0)}

.btn-pill--gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-pill--gold:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff;box-shadow:0 10px 26px -10px rgba(188,144,81,.8)}
.btn-pill--outline-gold{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-pill--outline-gold:hover{background:var(--gold);color:#fff;box-shadow:0 10px 26px -10px rgba(188,144,81,.8)}
.btn-pill--brown{background:var(--brown);color:#fff;border-color:var(--brown);font-weight:500}
.btn-pill--brown:hover{background:#4a3130;border-color:#4a3130;color:#fff;box-shadow:0 12px 28px -12px rgba(60,35,33,.9)}
.btn-pill--white{background:#fff;color:var(--brown);border-color:var(--brown);font-weight:500}
.btn-pill--white:hover{background:var(--brown);color:#fff}
.btn-pill--white:hover img{filter:brightness(0) invert(1);transform:translateY(2px)}
.btn-pill--brown:hover img{transform:scale(1.12)}
.btn-pill--block{width:100%}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1030;
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease),-webkit-backdrop-filter .5s,backdrop-filter .5s;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);
  transition:padding .5s var(--ease);
}
.brand{display:block;line-height:0}
.brand img{height:auto;transition:width .5s var(--ease),opacity .4s}
.brand--ankur img{width:112px}
.site-header.is-stuck{
  background:rgba(92,61,59,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.55);
}
.site-header.is-stuck .site-header__inner{padding-top:8px;padding-bottom:8px}
.site-header.is-stuck .brand--ankur img{width:96px}

/* RERA badge (desktop header, right) */
.rera-pill{
  margin:0;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.33);border-radius:999px;
  color:#fff;font-size:var(--fs-ui);font-weight:500;line-height:1;white-space:nowrap;
  transition:width .5s var(--ease),height .5s var(--ease),top .5s var(--ease);
}

/* hamburger */
.menu-toggle{
  position:relative;width:50px;height:50px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.menu-toggle:hover{background:rgba(255,255,255,.2);border-color:#fff}
.menu-toggle__bars{position:absolute;inset:0;display:block}
.menu-toggle__bars i{
  position:absolute;left:50%;height:1.5px;background:#fff;border-radius:2px;
  transition:width .5s var(--ease),transform .5s var(--ease);
}
.menu-toggle__bars i:nth-child(1){top:21px;width:22px;transform:translateX(-50%)}
.menu-toggle__bars i:nth-child(2){top:28px;width:14px;transform:translateX(-50%) translateX(4px)}
.menu-toggle:hover .menu-toggle__bars i:nth-child(2){width:22px;transform:translateX(-50%)}

/* ==========================================================================
   Mobile menu – full-width offcanvas
   ========================================================================== */
.offcanvas-full{
  --bs-offcanvas-width:100%;
  --bs-offcanvas-bg:var(--brown);
  --bs-offcanvas-color:#fff;
  --bs-offcanvas-border-width:0;
  --bs-offcanvas-transition:transform .85s var(--ease-io);
  --bs-offcanvas-zindex:1045;
  width:100%;max-width:100%;
  background:
    radial-gradient(120% 70% at 100% 0%,rgba(188,144,81,.22),transparent 60%),
    radial-gradient(90% 60% at 0% 100%,rgba(246,143,88,.14),transparent 62%),
    var(--brown);
  overflow:hidden;
}
.offcanvas-full .offcanvas-header{
  padding:14px var(--gutter);justify-content:space-between;align-items:center;
}
.offcanvas-full .brand img{width:112px}
.offcanvas-full .offcanvas-body{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(18px,4vh,40px) var(--gutter) clamp(26px,5vh,48px);
  overflow-y:auto;
}
.menu-close{
  position:relative;width:50px;height:50px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);cursor:pointer;
  transition:background-color .4s var(--ease),transform .6s var(--ease);
}
.menu-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.menu-close span{position:absolute;inset:0}
.menu-close i{
  position:absolute;left:50%;top:50%;width:22px;height:1.5px;background:#fff;border-radius:2px;
  transform:translate(-50%,-50%) rotate(0) scaleX(0);
  transition:transform .6s var(--ease) 0s;
}
.offcanvas-full.show:not(.hiding) .menu-close i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg) scaleX(1);transition-delay:.45s}
.offcanvas-full.show:not(.hiding) .menu-close i:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg) scaleX(1);transition-delay:.52s}

.mm-links{list-style:none;margin:0;padding:0}
.mm-links li{
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(34px);
  transition:opacity .3s ease,transform .3s ease;
}
.offcanvas-full.show:not(.hiding) .mm-links li{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease) calc(.35s + var(--i) * .07s),transform .9s var(--ease) calc(.35s + var(--i) * .07s);
}
.mm-links a{
  display:flex;align-items:baseline;gap:18px;padding:clamp(12px,2.2vh,20px) 0;
  color:#fff;text-decoration:none;
  font-family:var(--font-display);font-size:clamp(30px,8.4vw,48px);line-height:1.15;
  transition:color .4s var(--ease),padding-left .5s var(--ease);
}
.mm-links a:hover,.mm-links a:focus-visible{color:var(--cream);padding-left:10px}
.mm-branch{
  position:absolute;z-index:0;right:-70px;bottom:18%;width:260px;opacity:.16;pointer-events:none;transform:rotate(-12deg);
}
.offcanvas-full .offcanvas-header,.offcanvas-full .offcanvas-body{position:relative;z-index:1}

/* ==========================================================================
   Floating CTAs
   ========================================================================== */
.float-cta{
  position:fixed;z-index:1020;left:0;right:0;bottom:0;
  display:flex;
}
.float-cta__btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 10px;border:0;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:14px;line-height:1.2;
  -webkit-backdrop-filter:blur(23px);backdrop-filter:blur(23px);
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .5s var(--ease);
}
.float-cta__btn img{width:20px;height:20px;flex:none}
.float-cta__btn--light{background:rgba(255,255,255,.96);color:var(--gold)}
.float-cta__btn--gold{background:var(--gold);color:#fff}
@media (max-width:1199.98px){
  body{padding-bottom:54px}
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;background:#10161c;
  height:100svh;min-height:600px;max-height:900px;
}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:74% 50%;will-change:transform}
.hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 75% 52%,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.15) 43%,rgba(0,0,0,.15) 48%,rgba(0,0,0,.22) 57%,rgba(0,0,0,.31) 70%,rgba(0,0,0,.37) 84%,rgba(0,0,0,.41) 100%),
    linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.2) 26%,rgba(0,0,0,0) 44%);
}
.hero__bg::before{                         /* extra legibility for stacked/mobile layout */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,10,0) 28%,rgba(10,8,10,.5) 60%,rgba(10,8,10,.86) 100%);
}
.hero__logo{
  position:absolute;z-index:2;left:var(--gutter);bottom:clamp(64px,11vh,110px);
  width:min(64vw,330px);height:auto;
}

/* ==========================================================================
   Shared section scaffolding (mobile first)
   ========================================================================== */
.intro,.amenities,.plans,.location,.specs,.gallery{position:relative;overflow:hidden}
.sec-head{text-align:center;margin:0 auto;max-width:720px;padding:0 var(--gutter);position:relative;z-index:2}
.sec-head p{margin:16px auto 0;font-size:16px;line-height:1.6}
.sec-head--light{color:#fff}
.sec-head--light p{font-weight:300}
.sec-head--dark h2{color:var(--navy)}
.sec-head--dark p{color:var(--grey)}

/* ==========================================================================
   2. Overview
   ========================================================================== */
.intro{--wv:max(135vw,min(185vw,700px));background:var(--cream);padding:120px var(--gutter) calc(var(--wv) * .1614 + 22px)}
.intro__wave{position:absolute;pointer-events:none;width:var(--wv);left:calc(100vw - var(--wv) * .8);bottom:calc(var(--wv) * -.182)}
.intro__branch{position:absolute;left:-14px;top:14px;width:138px;pointer-events:none}
.intro__copy{position:relative;z-index:2}
.intro__copy h2{margin-bottom:22px}
.intro__text p{margin:0;font-size:var(--fs-body);line-height:1.62;color:var(--grey);text-align:justify}
.intro__text p + p{margin-top:1.1em}
.intro__text strong{font-weight:700}
.intro__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.intro__cta .btn-pill{flex:1 1 210px;--h:56px}
.intro__media{position:relative;z-index:2;margin:44px 0 0;aspect-ratio:707/733}
.intro__photo{width:100%;height:100%;object-fit:cover;border-radius:15px 15px 120px 15px}
.intro__flower{position:absolute;right:-6px;bottom:-14px;width:30%;max-width:130px}

/* ==========================================================================
   3. Amenities  (three feature cards + six common-amenity tiles)
   ========================================================================== */
.amenities{background:var(--brown);padding:80px var(--gutter) 56px}
.amenities__branch{position:absolute;right:-22px;top:-6px;width:112px;pointer-events:none}
.amenities .sec-head{margin-bottom:34px;padding:0}
.amenity-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:22px;max-width:520px;margin:0 auto}
.amenity-card{
  position:relative;background:#fff;padding:28px 6.1%;
  border-radius:15px 15px 55px 15px;box-shadow:0 0 90px rgba(0,0,0,.05);
}
.amenity-card__head h3{margin:0;font-size:16px;font-weight:700;line-height:1.1667;color:var(--navy)}
.amenity-card__head p{margin:7px 0 0;font-size:15px;line-height:1.1667;color:var(--grey)}
.amenity-card__head::after{content:"";display:block;width:calc(var(--ln) / 453 * 100%);margin-top:7px;border-top:.75px solid rgba(246,143,88,.5)}
.amenity-card__img{margin-top:30px;aspect-ratio:453/354;overflow:hidden;border-radius:15px 15px 41px 15px}
.amenity-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.amenity-card__link{display:block;width:100%;height:100%;border-radius:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.amenity-card__link:hover img{transform:scale(1.04)}

.feature-tiles{
  position:relative;z-index:2;list-style:none;margin:28px auto 0;padding:0;max-width:520px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.feature-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:22px 12px 20px;background:#fff;border-radius:15px 55px 15px 15px;box-shadow:0 0 90px rgba(0,0,0,.05);
}
.feature-tile__icon{display:grid;place-items:center;height:76px}
.feature-tile__icon img{width:calc(var(--iw) * .72px);height:auto}
.feature-tile p{margin:12px 0 0;font-size:14px;line-height:1.2;color:var(--grey)}

/* ==========================================================================
   4. Floor plans
   ========================================================================== */
.plans{
  --ww:max(134vw,min(220vw,900px));                    /* wave artwork width: only its arc + gold band is shown */
  background:var(--brown);padding:44px 0 calc(var(--ww) * .1614 + 24px);
}
.plans__wave{
  position:absolute;pointer-events:none;width:var(--ww);
  left:calc(var(--ww) * -.1831);bottom:calc(var(--ww) * -.1819);   /* = the same window of the artwork the Figma frame shows */
}
.plans .sec-head{margin-bottom:30px}
.plans__stage{
  position:relative;z-index:2;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 14px;
}
.plans-swiper{flex:0 0 100%;min-width:0;overflow:hidden;border-radius:22px}
.plans-swiper .swiper-slide{width:100%;height:auto}

/* card = the unit's brochure page (key plan, floor plan, compass for the facing) shown whole - never cropped -
   on the same cream as the brochure, unit + area tags above it */
.plan-card{
  position:relative;isolation:isolate;overflow:hidden;
  background:#F5E9DD;border-radius:22px;
}
.plan-card::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(88,88,88,.14);
}
.plan-card__link{display:block;padding:52px 10px 10px;border-radius:inherit;overflow:hidden;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.plan-card__bg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;-webkit-user-drag:none;user-select:none;transition:transform .8s var(--ease)}
.plan-card__link:hover .plan-card__bg{transform:scale(1.03)}
.plan-card__top{position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 14px 0}
/* the brochure's figures for the unit, as text so they read at any size (the lightbox shows the brochure page itself) */
.plan-card__info{position:relative;z-index:2;pointer-events:none;max-width:540px;margin:0 auto;padding:4px 18px 18px;color:var(--grey);line-height:1.25}
.plan-card__floors{margin:0;padding-bottom:10px;border-bottom:1px solid rgba(92,61,59,.16);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brown)}
.plan-card__floors span{display:block;margin-top:3px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey)}
.plan-card__areas{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:12px 0 0}
.plan-card__areas dt{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.plan-card__areas dd{margin:3px 0 0;font-size:16px;font-weight:700;color:var(--brown)}
.tag{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  height:30px;padding:0 13px;border-radius:999px;font-size:12px;line-height:1;
}
.tag--gold{background:var(--gold);color:#fff;font-weight:700;text-transform:uppercase}
.tag--outline{background:#fff;border:1px solid var(--gold);color:var(--brown);font-weight:700;box-shadow:0 6px 18px -8px rgba(60,35,33,.45)}

.plans-arrow{
  width:68px;height:46px;padding:0;border:0;border-radius:999px;background:var(--gold);
  display:grid;place-items:center;cursor:pointer;transition:background-color .4s var(--ease);
}
.plans-arrow img{width:26px;height:26px;transition:transform .5s var(--ease)}
.plans-arrow:hover{background:var(--gold-dark)}
.plans-arrow--prev:hover img{transform:translateX(-5px)}
.plans-arrow--next:hover img{transform:translateX(5px)}

/* ==========================================================================
   Custom scroller (native scrolling + styled, draggable rail – see initScrollers() in main.js)
   ========================================================================== */
.scroller{position:relative;min-height:0}
.scroller__view{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.scroller__view::-webkit-scrollbar{display:none}
.scroller__view:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.scroller__rail{
  position:absolute;right:0;top:0;bottom:0;width:4px;border-radius:99px;
  background:rgba(85,85,85,.1);opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.scroller.is-scrollable > .scroller__rail{opacity:1;pointer-events:auto}
.scroller__thumb{
  position:absolute;left:0;right:0;top:0;min-height:34px;border-radius:99px;
  background:var(--orange);cursor:grab;touch-action:none;will-change:transform;
  transition:background-color .3s ease;
}
.scroller__thumb::before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:-10px}   /* easier to grab */
.scroller:hover > .scroller__rail > .scroller__thumb,.scroller.is-dragging > .scroller__rail > .scroller__thumb{background:#e97b3f}
.scroller.is-dragging > .scroller__rail > .scroller__thumb{cursor:grabbing}

/* ==========================================================================
   5. Location
   ========================================================================== */
.location{background:var(--cream);padding:calc(var(--sy) + 8px) 0 var(--sy)}
.location .sec-head{margin-bottom:62px}
.location__grid{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;padding:0 var(--gutter)}
.location__branch{display:none;position:absolute;left:-20px;top:-56px;width:92px;z-index:3;pointer-events:none}   /* leaf hidden everywhere for now: drop "display:none" to bring it back */

.conn-card{position:relative;background:#fff;border-radius:24px}
.conn-card__view{padding:26px 30px 14px 22px}
.conn-card__scroller > .scroller__rail{right:11px;top:16px;bottom:16px;width:3px}
.conn-acc{--bs-accordion-bg:transparent;--bs-accordion-border-width:0;--bs-accordion-border-radius:0}
.conn-acc .accordion-item{background:transparent;border:0;border-radius:0}
.conn-acc .accordion-item + .accordion-item{margin-top:26px}
.conn-acc .accordion-button{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 15px;background:transparent;box-shadow:none;border-radius:0!important;
  border-bottom:1px solid rgba(85,85,85,.25);
  font-family:var(--font-body);font-size:17px;font-weight:400;color:#8A8A8A;line-height:1.3;
}
.conn-acc .accordion-button:not(.collapsed){color:var(--navy);font-weight:500;background:transparent;box-shadow:none}
.conn-acc .accordion-button:focus{box-shadow:none}
.conn-acc .accordion-button::after{
  content:"";flex:none;width:16px;height:10px;margin-left:12px;
  background:#8A8A8A;transform:rotate(0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s var(--ease),background-color .4s;
}
.conn-acc .accordion-button:not(.collapsed)::after{background:var(--orange);transform:rotate(180deg)}
.conn-acc .accordion-body{padding:16px 0 0}
.conn-list-wrap{position:relative;padding-bottom:16px;border-bottom:1px solid rgba(85,85,85,.25)}
.conn-list{list-style:none;margin:0;padding:0 20px 0 0;max-height:160px}      /* 4 rows + a sliver of the 5th: hints that it scrolls */
.conn-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;line-height:1.3;color:var(--grey)}
.conn-list li + li{margin-top:18px}
.conn-list li b{font-weight:400;white-space:nowrap}
.conn-scroller > .scroller__rail{right:0;width:3px}

.map-card{
  position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:1035/585;
  background:#e8e4df;
}
.map-card iframe{display:block;width:100%;height:100%;border:0}
.map-card::after{content:"";position:absolute;inset:0;border:8px solid #fff;border-radius:24px;pointer-events:none}   /* white frame over the live map */

/* ==========================================================================
   5b. Specifications  (elevation render + accordion of all brochure groups)
   ========================================================================== */
.specs{background:var(--cream);padding:calc(var(--sy) + 8px) 0 var(--sy)}
.specs .sec-head{margin-bottom:34px}
.specs__media{position:relative;z-index:2;margin:0 var(--gutter);aspect-ratio:601/653}   /* sized so the whole building (roof to gate) fits */
.specs__link{display:block;width:100%;height:100%;overflow:hidden;border-radius:15px;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.specs__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:15px;transition:transform .8s var(--ease)}
.specs__link:hover .specs__img{transform:scale(1.04)}

.specs__panel{position:relative;z-index:2;margin:34px var(--gutter) 0}
.specs-view{max-height:520px;padding-right:22px}
.specs-scroller > .scroller__rail{right:0;width:6px;background:#fff}

.spec-acc{--bs-accordion-bg:transparent;--bs-accordion-border-width:0;--bs-accordion-border-radius:0}
.spec-acc .accordion-item{background:transparent;border:0;border-radius:0;border-bottom:1px solid rgba(85,85,85,.25)}
.spec-acc .accordion-item + .accordion-item{margin-top:22px}
.spec-acc .accordion-button{
  display:flex;align-items:center;gap:16px;text-align:left;
  padding:0 4px 16px 0;background:transparent;box-shadow:none;border-radius:0!important;
  font-family:var(--font-body);font-size:19px;font-weight:400;line-height:1.2;color:var(--grey);
  transition:padding .35s var(--ease),color .35s;
}
.spec-acc .accordion-button:not(.collapsed){color:var(--navy);font-weight:500;background:transparent;box-shadow:none;padding-bottom:0}
.spec-acc .accordion-button:focus{box-shadow:none}
.spec-acc .accordion-button::after{
  content:"";flex:none;width:16px;height:10px;margin-left:auto;
  background:currentColor;transform:rotate(0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8l6.5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s var(--ease);
}
.spec-acc .accordion-button:not(.collapsed)::after{transform:rotate(180deg)}
.spec-ico{
  flex:none;width:36px;height:36px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.spec-ico--structure{--ico:url("../svg/spec-structure.svg")}
.spec-ico--flooring{--ico:url("../svg/spec-flooring.svg")}
.spec-ico--wall{--ico:url("../svg/spec-wall.svg")}
.spec-ico--doors{--ico:url("../svg/spec-doors.svg")}
.spec-ico--windows{--ico:url("../svg/spec-windows.svg")}
.spec-ico--kitchen{--ico:url("../svg/spec-kitchen.svg")}
.spec-ico--plumbing{--ico:url("../svg/spec-plumbing.svg")}
.spec-ico--electrical{--ico:url("../svg/spec-electrical.svg")}
.spec-ico--power{--ico:url("../svg/spec-power.svg")}
.spec-ico--elevator{--ico:url("../svg/spec-elevator.svg")}
.spec-ico--stairs{--ico:url("../svg/spec-stairs.svg")}
.spec-acc .accordion-body{padding:18px 0 16px}
.spec-acc .accordion-body p,.spec-list li{margin:0;font-size:15px;line-height:1.45;color:var(--grey)}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{position:relative;padding-left:17px}
.spec-list li + li{margin-top:7px}
.spec-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ==========================================================================
   6. Gallery
   ========================================================================== */
.gallery{background:var(--cream);padding:var(--sy) 0 var(--sy)}
.gallery .sec-head{margin-bottom:20px}
.gallery-swiper{overflow:visible;padding:26px 0}
.gallery-swiper .swiper-slide{width:min(66vw,300px);height:auto;aspect-ratio:438/547}
.gallery-swiper .swiper-wrapper{transition-timing-function:var(--ease)}      /* one soft curve for the strip ... */
.g-card{
  position:relative;margin:0;width:100%;height:100%;border-radius:22px;overflow:visible;
  will-change:transform;cursor:grab;
  transition:transform var(--g-dur,0ms) var(--ease);                           /* ... and the same curve + duration (set from JS) for the cards */
}
.g-card__link{display:block;width:100%;height:100%;border-radius:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.g-card img{width:100%;height:100%;object-fit:cover;border-radius:22px;-webkit-user-drag:none;user-select:none}
.g-card::after{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  border:3px solid var(--gold);opacity:var(--f,0);
  transition:opacity var(--g-dur,0ms) var(--ease);
}
.g-card figcaption{
  position:absolute;left:0;right:0;bottom:4.4%;text-align:center;color:#fff;font-size:14px;line-height:1.2;pointer-events:none;
}
/* Fancybox lightbox - brand colours (variables come from the vendor stylesheet) */
.fancybox__container{
  --fancybox-backdrop-bg:rgba(34,21,20,.95);
  --f-button-color:#fff;
  --f-button-hover-bg:rgba(188,144,81,.4);
  --f-toolbar-font:var(--font-body);
  --f-caption-color:var(--cream);
  --f-caption-font:400 15px/1.5 var(--font-body);
}
/* the floor plans are whole brochure pages with the unit title at the very top: keep it clear of the toolbar */
.fancybox--plans{--f-carousel-slide-padding:64px 12px 0}
.gallery__nav{display:flex;justify-content:center;gap:14px;margin-top:10px}
.pill-arrow{
  width:68px;height:46px;padding:0;border:0;border-radius:999px;background:var(--gold);
  display:grid;place-items:center;cursor:pointer;
  transition:background-color .4s var(--ease);
}
.pill-arrow img{width:26px;height:26px;transition:transform .5s var(--ease)}
.pill-arrow:hover{background:var(--gold-dark)}
.gallery-prev:hover img{transform:translateX(-5px)}
.gallery-next:hover img{transform:translateX(5px)}

/* ==========================================================================
   7. About developer
   ========================================================================== */
.developer{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--cream);padding:calc(var(--sy) + 12px) var(--gutter) 0}
.developer__photo{                                         /* mobile/tablet: sits in flow below the stats, cropped to the building */
  position:relative;order:3;display:block;width:calc(100% + 2 * var(--gutter));max-width:none;height:auto;aspect-ratio:1/1;
  margin:8px calc(-1 * var(--gutter)) 0;object-fit:cover;object-position:100% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16%);
}
.developer__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,233,221,0) 80%,rgba(245,233,221,.9) 96%,rgba(245,233,221,1) 100%);
}
.developer__branch{position:absolute;right:-60px;top:18px;width:170px;pointer-events:none}
.developer__copy{position:relative;z-index:2}
.developer__copy h2{margin-bottom:22px;padding-right:80px}
.developer__text p{margin:0;font-size:var(--fs-body);line-height:1.62;color:var(--grey-d);text-align:justify}
.developer__text strong{font-weight:700}
.developer__text p + p{margin-top:1.1em}
.developer__tagline{margin:26px 0 0;padding-left:16px;border-left:2px solid var(--orange);font-family:var(--font-display);font-size:21px;line-height:1.3;color:var(--navy)}
.stats{position:relative;z-index:2;list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:22px 28px}
.stat{display:flex;align-items:center;gap:14px}
.stat__line{width:1px;height:78px;background:rgba(0,0,0,.14)}
.stat__num{
  display:flex;align-items:flex-start;font-family:var(--font-num);font-weight:500;
  font-size:34px;line-height:1.15;color:var(--navy);
}
.stat__num b{font-weight:500}
.stat__num sup{font-weight:300;font-size:.62em;line-height:1;margin-left:2px;position:relative;top:.12em}
.stat p{margin:6px 0 0;font-size:14px;line-height:1.3;color:var(--grey-d)}

/* enquiry card */
.enquire{position:relative;z-index:3;margin-top:-110px;padding:0 var(--gutter) 36px}
.enquire__card{
  position:relative;background:#FBF9F7;border-radius:20px;box-shadow:0 0 60px rgba(0,0,0,.05);
  padding:36px 22px 46px;
}
.enquire__copy h2{margin-bottom:18px}
.enquire__copy p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--grey)}
.enquire__form{margin-top:30px}
.enquire__grid{display:grid;grid-template-columns:1fr;gap:16px}
.field{position:relative}
.field--full{grid-column:1/-1}
.field .form-control,.field .form-select{
  height:54px;padding:0 24px;border:0;border-radius:10px;
  background-color:rgba(86,86,86,.1);box-shadow:none;
  font-family:var(--font-body);font-size:15px;color:#3c3c3c;
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea.form-control{height:125px;padding:18px 24px;resize:none}
.field .form-control::placeholder{color:#727272;opacity:1}
.field .form-select{
  color:#3c3c3c;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.2 7 7.3l6-6.1' fill='none' stroke='%23727272' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 24px center;background-size:13px 8px;
}
.field .form-select:invalid{color:#727272}
.field .form-select option{color:#222}
.field .form-control:focus,.field .form-select:focus{background-color:rgba(188,144,81,.1);box-shadow:0 0 0 1px var(--gold)}
.was-validated .field .form-control:invalid,.was-validated .field .form-select:invalid{
  background-image:none;box-shadow:0 0 0 1px #c0463a;padding-right:24px;
}
.was-validated .field .form-select:invalid{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.2 7 7.3l6-6.1' fill='none' stroke='%23727272' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.was-validated .field .form-control:valid,.was-validated .field .form-select:valid{background-image:none;border:0}
.was-validated .field .form-select:valid{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.2 7 7.3l6-6.1' fill='none' stroke='%23727272' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field .invalid-feedback{
  position:absolute;left:24px;top:100%;margin-top:2px;font-size:12px;line-height:1.2;color:#c0463a;
}
.btn-pill--submit{min-width:170px;--h:52px;font-weight:500;margin-top:22px}
.btn-pill.is-loading{pointer-events:none;opacity:.75}
.enquire__flower{position:absolute;right:16px;bottom:14px;width:64px;pointer-events:none}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{position:relative;overflow:hidden;background:var(--cream);padding:124px var(--gutter) 22px}
.footer__branch{position:absolute;top:8px;pointer-events:none;width:122px}
.footer__branch--l{left:-30px}
.footer__branch--r{right:-30px}
.footer__logo{position:relative;z-index:1;display:flex;justify-content:center;margin-bottom:34px}
.footer__logo img{width:min(60vw,250px);height:auto}
.footer__rule{margin:0;border:0;height:1.5px;opacity:1;background:rgba(88,88,88,.25)}
.footer__info{display:flex;flex-direction:column;gap:30px;padding:34px 0}
.footer__contact{margin:0;display:flex;flex-direction:column;gap:14px;font-style:normal}
.fc{margin:0;display:flex;gap:15px;font-size:14.5px;line-height:1.75;color:var(--grey)}
.fc img{width:22px;height:22px;flex:none;margin-top:3px}
.fc b{font-weight:500}
.fc a{text-decoration:none}
.fc a:hover{color:var(--gold)}
.footer__qr{display:flex;gap:26px}
.footer__qr figure{margin:0;width:140px}
.footer__qr figcaption{margin-bottom:10px;font-size:13.5px;line-height:1.4;text-transform:uppercase;color:var(--grey);text-align:center;white-space:nowrap}
.footer__qr img{width:100%;height:140px;object-fit:fill}
.footer__disclaimer{margin:28px 0 0;font-size:14px;line-height:1.7;color:var(--grey)}
.footer__bottom{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--grey)}
.footer__bottom p{margin:0}
.footer__credit{display:flex;align-items:center;gap:12px}
.footer__credit img{width:78px;height:auto}

/* ==========================================================================
   CTA modal
   ========================================================================== */
.modal-backdrop{--bs-backdrop-bg:#1d1110;--bs-backdrop-opacity:.58;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cta-modal .modal-dialog{max-width:min(940px,calc(100% - 32px))}
/* Bootstrap ends the hide sequence after the .modal's own transition-duration, then fades the
   backdrop (a second duration). Exit is therefore kept short (.3s + .3s) while the entrance
   (defined on the .show state) stays slow and soft. */
.cta-modal.fade{transition:opacity .3s ease}
.cta-modal.fade.show{transition-duration:.5s}
.modal-backdrop.fade{transition:opacity .3s ease}
.cta-modal.fade .modal-dialog{
  transform:translateY(40px) scale(.97);opacity:0;
  transition:transform .3s ease,opacity .25s ease;
}
.cta-modal.show .modal-dialog{
  transform:none;opacity:1;
  transition:transform .8s var(--ease),opacity .5s ease;
}
.cta-modal .modal-content{
  position:relative;display:grid;grid-template-columns:.88fr 1.12fr;
  border:0;border-radius:26px;overflow:hidden;background:#FBF9F7;
  box-shadow:0 50px 120px -20px rgba(20,8,8,.6);
}
.cta-modal__art{
  position:relative;overflow:hidden;color:#fff;padding:44px 40px;min-height:540px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(188,144,81,.28),transparent 62%),
    radial-gradient(80% 60% at 0% 100%,rgba(246,143,88,.2),transparent 65%),
    var(--brown);
}
.cta-modal__logo{width:112px;height:auto;position:relative;z-index:2}
.cta-modal__kicker{
  position:relative;z-index:2;margin:0;font-family:var(--font-display);font-size:36px;line-height:1.15;max-width:11ch;
}
.cta-modal__branch{position:absolute;right:-46px;top:34px;width:250px;opacity:.9}
.cta-modal__flower{position:absolute;right:26px;bottom:34px;width:82px;opacity:.9;transform:rotate(-14deg)}
.cta-modal__panel{position:relative;padding:54px 52px 44px;display:flex;flex-direction:column;justify-content:center}
.cta-modal__eyebrow{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cta-modal__title{font-size:clamp(30px,3.4vw,42px)}
.cta-modal__sub{margin:12px 0 26px;font-size:15.5px;line-height:1.6;color:var(--grey)}
.cta-modal__detail{
  margin:-12px 0 24px;padding:11px 14px;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  background:rgba(188,144,81,.1);font-size:13.5px;line-height:1.55;color:var(--grey-d);
}
.cta-modal__detail[hidden]{display:none}
.cta-form{display:flex;flex-direction:column;gap:26px}
.cta-form .field .form-control{background-color:rgba(86,86,86,.09)}
.cta-form .btn-pill--submit{margin-top:6px}
.cta-modal__consent{margin:0;font-size:12px;line-height:1.5;color:#8a8a8a}
.cta-form .invalid-feedback{left:22px}
.cta-modal__close{
  position:absolute;z-index:5;top:18px;right:18px;width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(92,61,59,.2);background:rgba(255,255,255,.7);cursor:pointer;
  transition:transform .6s var(--ease),background-color .4s,border-color .4s;
}
.cta-modal__close:hover{transform:rotate(90deg);background:#fff;border-color:var(--gold)}
.cta-modal__close span{position:absolute;inset:0}
.cta-modal__close i{position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--brown);border-radius:2px}
.cta-modal__close i:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.cta-modal__close i:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* staggered entrance of the form content */
.cta-modal__form-wrap > *,.cta-form > *{opacity:0;transform:translateY(18px);transition:opacity .2s ease,transform .2s ease}
.cta-modal.show .cta-modal__form-wrap > *,.cta-modal.show .cta-form > *{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease) calc(.28s + var(--n,0) * .07s),transform .8s var(--ease) calc(.28s + var(--n,0) * .07s);
}
.cta-modal__form-wrap > :nth-child(1){--n:0}.cta-modal__form-wrap > :nth-child(2){--n:1}
.cta-modal__form-wrap > :nth-child(3){--n:2}.cta-modal__form-wrap > :nth-child(4){--n:3}.cta-modal__form-wrap > :nth-child(5){--n:4}
.cta-form > :nth-child(n+4){--n:4}
.cta-form > :nth-child(4){--n:4}.cta-form > :nth-child(5){--n:5}.cta-form > :nth-child(6){--n:6}.cta-form > :nth-child(7){--n:7}

@keyframes draw{to{stroke-dashoffset:0}}

@media (max-width:767.98px){
  .cta-modal .modal-dialog{margin:0;max-width:100%;min-height:100%;align-items:flex-end}
  .cta-modal.fade .modal-dialog{transform:translateY(100%);opacity:1;transition:transform .3s ease}
  .cta-modal.fade.show .modal-dialog{transform:none;transition:transform .7s var(--ease)}
  .cta-modal .modal-content{grid-template-columns:1fr;border-radius:26px 26px 0 0;max-height:94svh}
  .cta-modal__art{display:none}
  .cta-modal__panel{padding:46px 24px 30px}
  .cta-modal__title{font-size:32px}
}

/* ==========================================================================
   DESKTOP – exact Figma geometry (1920 frame, 1u = 100vw / 1920)
   Applies at >=1200px, and from 768px on non-touch devices so browser zoom up
   to ~175% keeps the desktop layout. Touch devices keep tablet/mobile below 1200px.
   Keep the query in sync with the 3 desktop @media rules here and isDesktop() in main.js.
   ========================================================================== */
@media (min-width:1200px), (min-width:768px) and (not (pointer:coarse)){

  body{padding-bottom:0}
  .show-desk-block{display:block!important}
  .show-desk-flex{display:flex!important}
  .show-desk-inline{display:inline!important}
  .hide-desk{display:none!important}

  /* ---- Buttons ---- */
  .btn-pill{--h:max(calc(46 * var(--fx)),calc(59 * var(--u)));gap:calc(14 * var(--u));padding:0 calc(20 * var(--fx))}
  .btn-pill--brochure{min-width:calc(266 * var(--u))}
  .btn-pill--visit{min-width:calc(229 * var(--u))}
  .btn-pill--submit{--h:max(calc(44 * var(--fx)),calc(52 * var(--u)));min-width:calc(170 * var(--u));margin-top:0}
  .btn-pill img{width:max(calc(20 * var(--fx)),calc(24 * var(--u)));height:max(calc(20 * var(--fx)),calc(24 * var(--u)))}

  /* ---- Header ---- */
  .site-header{height:calc(134 * var(--u))}
  .site-header__inner{
    display:block;position:relative;height:calc(98 * var(--u));
    margin:0 calc(113 * var(--u));padding:0;top:calc(36 * var(--u));
    transition:top .5s var(--ease);
  }
  .brand{position:absolute}
  .brand--ankur{left:0;top:calc(30.5 * var(--u))}
  .brand--ankur img{width:calc(149 * var(--u))}
  .rera-pill{position:absolute;right:0;top:calc(16 * var(--u));width:calc(287 * var(--u));height:calc(56 * var(--u));font-size:max(calc(13 * var(--fx)),calc(18 * var(--u)))}
  .main-nav{position:absolute;left:50%;top:calc(29.5 * var(--u));transform:translateX(-50%)}
  .main-nav ul{display:flex;align-items:center;gap:calc(23 * var(--u));margin:0;padding:0;list-style:none}
  .main-nav li{display:flex;align-items:center;gap:calc(23 * var(--u))}
  .main-nav li + li::before{content:"";width:1px;height:calc(18 * var(--u));background:rgba(255,255,255,.18)}
  .main-nav a{
    position:relative;display:block;padding:0;color:#fff;text-decoration:none;white-space:nowrap;
    font-size:max(calc(13 * var(--fx)),calc(18 * var(--u)));line-height:1.2;
  }
  .main-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);
  }
  .main-nav a:hover::after,.main-nav a.is-active::after{transform:scaleX(1);transform-origin:left}
  /* compact (scrolled) header */
  .site-header.is-stuck{height:calc(92 * var(--u))}
  .site-header.is-stuck .site-header__inner{top:calc(11 * var(--u))}
  .site-header.is-stuck .main-nav{top:calc(23 * var(--u))}
  .site-header.is-stuck .brand--ankur{top:calc(19 * var(--u))}
  .site-header.is-stuck .brand--ankur img{width:calc(124 * var(--u))}
  .site-header.is-stuck .rera-pill{top:calc(10 * var(--u));height:calc(48 * var(--u));width:calc(262 * var(--u))}

  /* ---- Enquiry modal ----
     Same unit as the rest of the desktop layout, so it keeps its look at any browser zoom (it used to be fixed px,
     which made it fill the screen at 200%). 1u = 100vw / 1920; sizes are the old px values x1.2 (the old 940px
     modal was ~59% of a 1600px-wide window, which is what 1128u is). */
  .cta-modal{--bs-modal-margin:calc(34 * var(--u))}
  .cta-modal .modal-dialog{max-width:calc(1128 * var(--u))}
  .cta-modal .modal-content{border-radius:calc(31 * var(--u));box-shadow:0 calc(60 * var(--u)) calc(144 * var(--u)) calc(-24 * var(--u)) rgba(20,8,8,.6)}
  .cta-modal__art{padding:calc(53 * var(--u)) calc(48 * var(--u));min-height:calc(648 * var(--u))}
  .cta-modal__logo{width:calc(134 * var(--u))}
  .cta-modal__kicker{font-size:max(calc(26 * var(--fx)),calc(43 * var(--u)))}
  .cta-modal__branch{right:calc(-55 * var(--u));top:calc(41 * var(--u));width:calc(300 * var(--u))}
  .cta-modal__flower{right:calc(31 * var(--u));bottom:calc(41 * var(--u));width:calc(98 * var(--u))}
  .cta-modal__panel{padding:calc(65 * var(--u)) calc(62 * var(--u)) calc(53 * var(--u))}
  .cta-modal__eyebrow{margin-bottom:calc(14 * var(--u));font-size:max(calc(11 * var(--fx)),calc(15 * var(--u)))}
  .cta-modal__title{font-size:max(calc(30 * var(--fx)),calc(50 * var(--u)))}
  .cta-modal__sub{margin:calc(14 * var(--u)) 0 calc(31 * var(--u));font-size:max(calc(13 * var(--fx)),calc(18.6 * var(--u)))}
  .cta-modal__detail{margin:calc(-14 * var(--u)) 0 calc(29 * var(--u));padding:calc(13 * var(--u)) calc(17 * var(--u));border-left-width:calc(3.6 * var(--u));border-radius:0 calc(10 * var(--u)) calc(10 * var(--u)) 0;font-size:max(calc(12 * var(--fx)),calc(16 * var(--u)))}
  .cta-form{gap:calc(31 * var(--u))}
  .cta-form .btn-pill--submit{margin-top:calc(7 * var(--u))}
  .cta-modal__consent{font-size:max(calc(11 * var(--fx)),calc(14.4 * var(--u)))}
  .cta-modal__close{top:calc(22 * var(--u));right:calc(22 * var(--u));width:calc(50 * var(--u));height:calc(50 * var(--u))}
  .cta-modal__close i{width:calc(19 * var(--u))}

  /* ---- Floating CTAs ---- */
  .float-cta{
    left:auto;right:0;bottom:calc(160.6 * var(--u));
    flex-direction:column;align-items:flex-end;gap:calc(16.93 * var(--u));
  }
  .float-cta__btn{
    flex:none;gap:calc(9.4 * var(--u));height:calc(51.73 * var(--u));min-height:calc(44 * var(--fx));padding:0;
    font-size:max(calc(13 * var(--fx)),calc(16.93 * var(--u)));
    border-radius:calc(939 * var(--u)) 0 0 calc(939 * var(--u));
  }
  .float-cta__btn img{width:max(calc(18 * var(--fx)),calc(22.57 * var(--u)));height:max(calc(18 * var(--fx)),calc(22.57 * var(--u)))}
  .float-cta__btn--light{width:calc(177.89 * var(--u));min-width:calc(150 * var(--fx));border:calc(.94 * var(--u)) solid var(--gold);border-right:0;background:#fff}
  .float-cta__btn--gold{width:calc(236.19 * var(--u));min-width:calc(196 * var(--fx))}
  .float-cta__btn:hover{transform:translateX(-8px)}
  .float-cta__btn--light:hover{background:var(--gold);color:#fff}
  .float-cta__btn--light:hover img{filter:brightness(0) invert(1)}
  .float-cta__btn--gold:hover{background:var(--gold-dark)}

  /* ---- 1. Hero ---- */
  .hero{height:calc(1080 * var(--u));min-height:0;max-height:none}
  .hero__bg{inset:calc(-10 * var(--u)) calc(-13 * var(--u)) calc(-8 * var(--u)) calc(-19 * var(--u))}   /* Figma frame is 1948x1096 at (-16,-9); -3/-1 px matches its crop transform */
  .hero__bg img{object-position:50% 50%}
  .hero__bg::before{display:none}
  .hero__logo{left:calc(114 * var(--u));top:calc(393 * var(--u));bottom:auto;width:calc(441 * var(--u))}

  /* ---- shared section heads ---- */
  .intro,.amenities,.plans,.location,.specs,.gallery{padding:0}
  .sec-head{position:absolute;left:0;right:0;top:calc(70 * var(--u));max-width:none;margin:0;padding:0}
  .sec-head p{margin:calc(25 * var(--u)) auto 0;font-size:var(--fs-body);line-height:1.381}
  .sec-head--amenities p{width:calc(773 * var(--u))}
  .sec-head--specs p{width:calc(742 * var(--u))}
  .sec-head--plans p{width:calc(773 * var(--u))}
  .sec-head--location p{width:calc(840 * var(--u))}
  .sec-head--gallery p{width:calc(850 * var(--u));line-height:1.571}

  /* ---- 2. Overview ---- */
  .intro{height:calc(988 * var(--u))}
  .intro__wave{right:auto;bottom:auto;left:calc(-48 * var(--u));top:calc(582 * var(--u));width:calc(2408 * var(--u))}
  .intro__branch{left:calc(-4 * var(--u));top:calc(47 * var(--u));width:calc(211 * var(--u))}
  .intro__copy{position:absolute;left:calc(160 * var(--u));top:calc(231 * var(--u));width:calc(669 * var(--u))}
  .intro__copy h2{width:calc(655 * var(--u));margin-bottom:calc(41 * var(--u))}
  .intro__text p{line-height:1.381}
  .intro__text p + p{margin-top:calc(29 * var(--u))}
  .intro__cta{gap:calc(25 * var(--u));margin-top:calc(61 * var(--u));flex-wrap:nowrap}
  .intro__cta .btn-pill{flex:none;--h:max(calc(46 * var(--fx)),calc(59 * var(--u)))}
  .intro__media{
    position:absolute;left:calc(1119 * var(--u));top:calc(120 * var(--u));
    width:calc(707 * var(--u));height:calc(733 * var(--u));margin:0;aspect-ratio:auto;
  }
  .intro__photo{border-radius:calc(15 * var(--u)) calc(15 * var(--u)) calc(300 * var(--u)) calc(15 * var(--u))}
  .intro__flower{right:auto;bottom:auto;left:calc(507 * var(--u));top:calc(554 * var(--u));width:calc(179 * var(--u));max-width:none}

  /* ---- 3. Amenities ---- */
  .amenities{height:calc(1080 * var(--u));padding:0}
  .amenities__branch{right:auto;left:calc(1687 * var(--u));top:calc(46 * var(--u));width:calc(239 * var(--u))}
  .amenities .sec-head{margin:0;top:calc(60 * var(--u))}                 /* Figma: this heading block sits at y=60 (the other sections use 70) */
  .amenity-grid{position:absolute;left:calc(135 * var(--u));top:calc(294 * var(--u));width:calc(1651 * var(--u));max-width:none;margin:0;display:flex;gap:calc(50 * var(--u))}
  .amenity-card{flex:none;width:calc(517 * var(--u));height:calc(497 * var(--u));padding:0;border-radius:calc(15 * var(--u)) calc(15 * var(--u)) calc(55 * var(--u)) calc(15 * var(--u));box-shadow:0 0 calc(89.88 * var(--u)) rgba(0,0,0,.05)}
  .amenity-card__head{position:absolute;left:calc(31.5 * var(--u));top:calc(28 * var(--u));width:calc(453.29 * var(--u))}
  .amenity-card__head h3{font-size:var(--fs-card);line-height:1.1667}
  .amenity-card__head p{margin-top:calc(7 * var(--u));font-size:var(--fs-card);line-height:1.1667}
  .amenity-card__head::after{margin-top:calc(7 * var(--u));border-top-width:calc(.75 * var(--u))}
  .amenity-card__img{
    position:absolute;left:calc(31.79 * var(--u));top:calc(115 * var(--u));width:calc(453.29 * var(--u));height:calc(354 * var(--u));margin:0;aspect-ratio:auto;
    border-radius:calc(15 * var(--u)) calc(15 * var(--u)) calc(41 * var(--u)) calc(15 * var(--u));
  }
  .feature-tiles{position:absolute;left:calc(135 * var(--u));top:calc(841 * var(--u));width:calc(1652 * var(--u));max-width:none;margin:0;display:flex;gap:calc(58 * var(--u))}
  .feature-tile{
    flex:none;width:calc(227 * var(--u));height:calc(204 * var(--u));padding:0;
    border-radius:calc(15 * var(--u)) calc(55 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u));box-shadow:0 0 calc(89.88 * var(--u)) rgba(0,0,0,.05);
  }
  .feature-tile__icon{position:absolute;left:0;right:0;top:calc(17 * var(--u));height:calc(96 * var(--u))}
  .feature-tile__icon img{width:calc(var(--iw) * var(--u))}
  .feature-tile p{
    position:absolute;left:50%;top:calc(134 * var(--u));transform:translateX(-50%);width:calc(var(--tw) * var(--u));margin:0;
    font-size:var(--fs-card);line-height:1.1667;
  }

  /* ---- 4. Floor plans ---- */
  .plans{height:calc(1139 * var(--u))}
  .plans{--ww:calc(2408 * var(--u))}
  .plans__wave{bottom:auto;left:calc(-441 * var(--u));top:calc(734 * var(--u));width:calc(2408 * var(--u))}
  .plans .sec-head{margin:0}
  .plans__stage{position:absolute;left:calc(168 * var(--u));top:calc(341 * var(--u));width:calc(1587.86 * var(--u));height:calc(619.58 * var(--u));padding:0;display:block}
  .plans-swiper{height:100%;border-radius:0;overflow:hidden}
  .plans-swiper .swiper-slide{width:calc(764.86 * var(--u))}
  .plan-card{width:calc(764.86 * var(--u));height:calc(619.58 * var(--u));border-radius:calc(30 * var(--u))}
  .plan-card__link{position:absolute;inset:0;padding:calc(92 * var(--u)) calc(300 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u))}
  .plan-card__bg{max-width:none;height:100%;object-fit:contain}
  .plan-card__info{
    position:absolute;left:calc(490 * var(--u));right:calc(36 * var(--u));top:calc(92 * var(--u));bottom:calc(12 * var(--u));
    max-width:none;margin:0;padding:0 0 0 calc(26 * var(--u));border-left:calc(1.07 * var(--u)) solid rgba(92,61,59,.16);
    display:flex;flex-direction:column;justify-content:center;
  }
  .plan-card__floors{padding-bottom:calc(16 * var(--u));font-size:max(calc(10 * var(--fx)),calc(14 * var(--u)))}
  .plan-card__areas{grid-template-columns:1fr;gap:calc(16 * var(--u));margin-top:calc(18 * var(--u))}
  .plan-card__areas dt{font-size:max(calc(9 * var(--fx)),calc(13 * var(--u)))}
  .plan-card__areas dd{margin-top:calc(4 * var(--u));font-size:max(calc(12 * var(--fx)),calc(21 * var(--u)))}
  .plan-card::after{box-shadow:inset 0 0 0 calc(1.07 * var(--u)) rgba(88,88,88,.14)}
  .plan-card__top{position:absolute;left:calc(36.59 * var(--u));top:calc(29 * var(--u));padding:0;gap:calc(16 * var(--u));flex-wrap:nowrap}
  .tag{height:calc(51 * var(--u));font-size:var(--fs-card);padding:0 calc(12 * var(--u))}
  .tag--gold{min-width:calc(213 * var(--u))}
  .tag--outline{min-width:calc(152.71 * var(--u));border-width:calc(1.07 * var(--u))}
  .plans-arrow{position:absolute;z-index:4;top:calc(275 * var(--u));width:calc(106 * var(--u));height:calc(70 * var(--u));min-width:calc(72 * var(--fx));min-height:calc(48 * var(--fx))}
  .plans-arrow img{width:calc(41 * var(--u));height:calc(41 * var(--u));min-width:calc(26 * var(--fx));min-height:calc(26 * var(--fx))}
  .plans-arrow--prev{left:calc(-54 * var(--u))}
  .plans-arrow--next{right:auto;left:calc(1536 * var(--u))}

  /* ---- 5. Location ---- */
  .location{height:calc(938 * var(--u))}
  .location .sec-head{margin:0}
  .location__grid{position:absolute;left:calc(114 * var(--u));top:calc(300 * var(--u));flex-direction:row;gap:calc(72 * var(--u));padding:0;align-items:flex-start}
  .conn-card{width:calc(585 * var(--u));height:calc(585 * var(--u));border-radius:calc(30 * var(--u))}
  .conn-card__scroller{height:100%}
  .conn-card__view{height:100%;padding:calc(46 * var(--u)) calc(65 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u))}
  .conn-card__scroller > .scroller__rail{right:calc(26 * var(--u));top:calc(21 * var(--u));bottom:auto;height:calc(519 * var(--u));width:calc(4 * var(--u));min-width:3px}
  .conn-acc{width:calc(480 * var(--u))}
  .conn-acc .accordion-item + .accordion-item{margin-top:calc(45 * var(--u))}
  .conn-acc .accordion-button{padding-bottom:calc(18 * var(--u));font-size:max(calc(15 * var(--fx)),calc(20 * var(--u)));line-height:1.2}
  .conn-acc .accordion-item:first-child .accordion-button{padding-bottom:calc(21 * var(--u))}
  .conn-acc .accordion-button::after{width:max(calc(13 * var(--fx)),calc(16 * var(--u)));height:max(calc(8 * var(--fx)),calc(10 * var(--u)))}
  .conn-acc .accordion-body{padding-top:calc(18 * var(--u))}
  .conn-list-wrap{width:calc(480 * var(--u));padding-bottom:calc(18 * var(--u))}
  .conn-list{width:calc(442 * var(--u));max-height:calc(151 * var(--u));padding:0}
  .conn-list li{font-size:var(--fs-ui);line-height:1.1667}
  .conn-list li + li{margin-top:calc(21 * var(--u))}
  .conn-scroller{width:calc(480 * var(--u))}
  .conn-scroller > .scroller__rail{right:calc(9 * var(--u));width:calc(4 * var(--u));min-width:3px}
  .map-card{width:calc(1035 * var(--u));height:calc(585 * var(--u));aspect-ratio:auto;border-radius:calc(30 * var(--u))}
  .map-card::after{border-width:calc(12 * var(--u));border-radius:calc(30 * var(--u))}
  .location__branch{left:calc(-124 * var(--u));top:calc(-81 * var(--u));width:calc(211 * var(--u))}   /* = page x -10 / y 219 in the Figma frame */

  /* ---- 5b. Specifications ---- */
  .specs{height:calc(1080 * var(--u))}
  .specs .sec-head{margin:0}
  .specs__media{position:absolute;left:calc(210 * var(--u));top:calc(345 * var(--u));width:calc(601 * var(--u));height:calc(653 * var(--u));margin:0;aspect-ratio:auto}   /* image + panel centred as a pair */
  .specs__link,.specs__img{border-radius:calc(15 * var(--u))}
  .specs__panel{position:absolute;left:calc(964 * var(--u));top:calc(350 * var(--u));width:calc(707 * var(--u));margin:0}
  .specs-view{height:calc(653 * var(--u));max-height:none;padding-right:0}
  .specs-scroller > .scroller__rail{left:calc(737 * var(--u));right:auto;bottom:auto;height:calc(644 * var(--u));width:calc(8.4 * var(--u));min-width:5px;background:#fff}
  .spec-acc .accordion-item + .accordion-item{margin-top:calc(41 * var(--u))}
  .spec-acc .accordion-button{gap:calc(23.44 * var(--u));padding:0 calc(18.6 * var(--u)) calc(23.5 * var(--u)) 0;font-size:max(calc(16 * var(--fx)),calc(25 * var(--u)));line-height:calc(31 * var(--u))}
  .spec-acc .accordion-button::after{width:max(calc(14 * var(--fx)),calc(21 * var(--u)));height:max(calc(8 * var(--fx)),calc(11 * var(--u)))}
  .spec-ico{width:calc(36 * var(--u));height:calc(36 * var(--u));min-width:calc(26 * var(--fx));min-height:calc(26 * var(--fx))}
  .spec-acc .accordion-body{padding:calc(25 * var(--u)) 0 calc(16 * var(--u))}
  .spec-acc .accordion-body p,.spec-list li{max-width:calc(648 * var(--u));font-size:max(calc(13 * var(--fx)),calc(18 * var(--u)));line-height:calc(25 * var(--u))}
  .spec-list li{padding-left:calc(18 * var(--u))}
  .spec-list li + li{margin-top:calc(7 * var(--u))}
  .spec-list li::before{width:max(calc(4 * var(--fx)),calc(5 * var(--u)));height:max(calc(4 * var(--fx)),calc(5 * var(--u)))}

  /* ---- 6. Gallery ---- */
  .gallery{height:calc(1080 * var(--u))}
  .gallery .sec-head{margin:0}
  .gallery-swiper{position:absolute;left:calc(-11.06 * var(--u));top:calc(394.39 * var(--u));width:100%;height:calc(547 * var(--u));padding:0}   /* Figma row is offset 11u left of centre */
  .gallery-swiper .swiper-slide{width:calc(438 * var(--u));height:calc(547 * var(--u));aspect-ratio:auto}
  .g-card,.g-card img{border-radius:calc(30 * var(--u))}
  .g-card::after{border-radius:calc(30 * var(--u));border-width:calc(4.244 * var(--u))}
  .g-card figcaption{bottom:calc(24 * var(--u));font-size:var(--fs-ui)}
  .gallery__nav{position:absolute;left:calc(132 * var(--u));top:calc(633 * var(--u));width:calc(1637 * var(--u));margin:0;justify-content:space-between;pointer-events:none;z-index:6}
  .pill-arrow{pointer-events:auto;width:calc(106 * var(--u));height:calc(70 * var(--u));min-width:calc(72 * var(--fx));min-height:calc(48 * var(--fx))}
  .pill-arrow img{width:calc(41 * var(--u));height:calc(41 * var(--u));min-width:calc(26 * var(--fx));min-height:calc(26 * var(--fx))}

  /* ---- 7. Developer ---- */
  .developer{min-height:calc(1141 * var(--u));padding:calc(70 * var(--u)) 0 calc(200 * var(--u)) calc(113 * var(--u))}   /* grows with the copy; the bottom padding clears the enquiry card that overlaps it */
  .developer__photo{position:absolute;left:0;top:0;bottom:auto;width:100%;height:100%;margin:0;aspect-ratio:auto;object-fit:cover;object-position:50% 50%;-webkit-mask-image:none;mask-image:none}   /* full Figma composition: sketch, fades and branch baked in */
  .developer__veil,.developer__branch{display:none}
  .developer__copy{width:calc(736 * var(--u))}
  .developer__copy h2{width:calc(656 * var(--u));padding:0;margin-bottom:calc(55 * var(--u))}
  .developer__text p{line-height:1.381}
  .developer__text p + p{margin-top:calc(29 * var(--u))}
  .developer__tagline{width:calc(656 * var(--u));margin-top:calc(40 * var(--u));padding-left:calc(22 * var(--u));border-left-width:max(2px,calc(3 * var(--u)));font-size:max(calc(18 * var(--fx)),calc(28 * var(--u)))}
  .stats{width:calc(806 * var(--u));margin:calc(64 * var(--u)) 0 0;justify-content:space-between;gap:0;flex-wrap:nowrap}
  .stat{gap:calc(22 * var(--u))}
  .stat__line{height:calc(120 * var(--u))}
  .stat__num{font-size:max(calc(32 * var(--fx)),calc(50 * var(--u)));line-height:1.22}
  .stat p{margin-top:calc(10 * var(--u));font-size:var(--fs-ui);line-height:1.278}

  /* ---- enquiry card ---- */
  .enquire{margin-top:calc(-107 * var(--u));padding:0 calc(222 * var(--u)) calc(37 * var(--u)) calc(223 * var(--u))}
  .enquire__card{width:calc(1475 * var(--u));height:calc(551 * var(--u));padding:0;border-radius:calc(20 * var(--u));box-shadow:0 0 calc(60 * var(--u)) rgba(0,0,0,.05)}
  .enquire__copy{position:absolute;left:calc(93 * var(--u));top:calc(118.5 * var(--u));width:calc(600 * var(--u))}
  .enquire__copy h2{width:calc(460 * var(--u));margin-bottom:calc(45 * var(--u))}
  .enquire__copy p{width:calc(546 * var(--u));font-size:var(--fs-body);line-height:1.381}
  .enquire__form{position:absolute;left:calc(793 * var(--u));top:calc(80 * var(--u));width:calc(589 * var(--u));margin:0}
  .enquire__grid{grid-template-columns:calc(275 * var(--u)) calc(275 * var(--u));column-gap:calc(39 * var(--u));row-gap:calc(30 * var(--u))}
  .field .form-control,.field .form-select{height:max(calc(44 * var(--fx)),calc(52 * var(--u)));padding:0 calc(30 * var(--u));border-radius:calc(10 * var(--u));font-size:max(calc(13 * var(--fx)),calc(16 * var(--u)))}
  .field textarea.form-control{height:calc(125 * var(--u));padding:calc(18 * var(--u)) calc(30 * var(--u))}
  .field .form-select{background-position:right calc(30 * var(--u)) center}
  .field .invalid-feedback{left:calc(30 * var(--u));font-size:max(calc(11 * var(--fx)),calc(12 * var(--u)))}
  .enquire__form .btn-pill--submit{margin-top:calc(50 * var(--u))}
  .enquire__flower{right:calc(23 * var(--u));bottom:calc(19 * var(--u));width:calc(101 * var(--u))}

  /* ---- Footer ---- */
  .site-footer{height:calc(1018 * var(--u));padding:0}
  .footer__branch{width:auto}
  .footer__branch--l{left:calc(-11.02 * var(--u));top:calc(126.17 * var(--u));width:calc(295.08 * var(--u))}
  .footer__branch--r{right:auto;left:calc(1633.5 * var(--u));top:calc(96.17 * var(--u));width:calc(295.08 * var(--u))}
  .footer__logo{position:absolute;left:calc(768 * var(--u));top:calc(120 * var(--u));margin:0;display:block}
  .footer__logo img{width:calc(385 * var(--u))}
  .footer__body{position:absolute;left:calc(114 * var(--u));width:calc(1693 * var(--u));top:calc(472 * var(--u))}
  .footer__rule{height:max(1px,calc(1.5 * var(--u)))}
  .footer__info{flex-direction:row;justify-content:space-between;align-items:flex-start;height:calc(326 * var(--u));padding:calc(50 * var(--u)) 0 0;gap:0}
  .footer__contact{width:calc(458 * var(--u));gap:calc(14 * var(--u))}
  .fc{gap:calc(15 * var(--u));font-size:max(calc(13 * var(--fx)),calc(16.5 * var(--u)));line-height:calc(30 * var(--u))}
  .fc--pin{min-height:calc(62 * var(--u))}
  .fc img{width:calc(24 * var(--u));height:calc(24 * var(--u));margin-top:calc(3 * var(--u))}
  .footer__qr{gap:calc(50 * var(--u))}
  .footer__qr figure{width:calc(170 * var(--u))}
  .footer__qr figcaption{margin-bottom:calc(10 * var(--u));font-size:max(calc(12 * var(--fx)),calc(16.5 * var(--u)));line-height:calc(30 * var(--u))}
  .footer__qr img{height:calc(170 * var(--u))}
  .footer__disclaimer{margin-top:calc(36 * var(--u));font-size:var(--fs-ui);line-height:1.556}
  .footer__bottom{margin-top:calc(50 * var(--u));font-size:var(--fs-ui)}
  .footer__credit img{width:calc(77.21 * var(--u))}
}

/* ==========================================================================
   Tablet refinements (768 – 1199)
   ========================================================================== */
@media (min-width:768px) and (max-width:1199.98px) and (pointer:coarse){
  :root{--fs-body:17px;--fs-ui:16px;--sy:50px}
  .hero__logo{width:min(46vw,380px);bottom:clamp(90px,14vh,160px)}
  .amenity-grid,.feature-tiles{max-width:none}
  .amenity-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .amenity-card__head h3{font-size:15px}
  .amenity-card__head p{font-size:14px}
  .feature-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .intro{padding-top:140px}
  .intro__media{max-width:640px;margin-left:auto;margin-right:auto}
  .gallery-swiper .swiper-slide{width:320px}
  .location__grid{max-width:760px;margin:0 auto}
  .location__branch{width:120px;top:-72px;left:-26px}
  .footer__info{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .footer__qr figure{width:150px}
  .footer__qr img{height:150px}
  .enquire__card{padding:48px 44px 56px}
  .enquire__grid{grid-template-columns:1fr 1fr}
  .field--full{grid-column:1/-1}
  .developer__photo{aspect-ratio:4/3}
  .stat__num{font-size:42px}
  .stat__line{height:92px}
  .plans__stage{max-width:760px;margin:0 auto}
  .plan-card__top{padding:22px 22px 0}
  .plan-card__link{padding-top:72px}
  .plan-card__info{padding:6px 24px 26px}
  .tag{height:38px;font-size:14px;padding:0 18px}
  .specs__media,.specs__panel{max-width:760px;margin-left:auto;margin-right:auto}
  .specs__media{width:calc(100% - 2 * var(--gutter));max-width:560px}
  .specs__panel{width:calc(100% - 2 * var(--gutter))}
  .specs-view{max-height:560px}
  .conn-list{max-height:158px}
}

/* ==========================================================================
   Thank-you page (thank-you.php) - same brown section + gold-edged wave as "Floor plans",
   with the cream enquiry-card look, the leaf sprig and the animated tick from the pop-up
   ========================================================================== */
.thanks{
  --ww:max(134vw,min(220vw,900px));
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;min-height:max(100svh,620px);
  background:var(--brown);
  padding:104px var(--gutter) calc(var(--ww) * .1614 + 40px);
}
.thanks__wave{position:absolute;z-index:-1;pointer-events:none;width:var(--ww);left:calc(var(--ww) * -.1831);bottom:calc(var(--ww) * -.1819)}
.thanks__branch{position:absolute;z-index:-1;right:-22px;top:84px;width:112px;pointer-events:none}
.thanks__card{
  position:relative;width:min(100%,640px);text-align:center;
  background:#FBF9F7;border-radius:20px;box-shadow:0 0 60px rgba(0,0,0,.05);
  padding:44px 24px 46px;
}
.thanks__tick{display:inline-block;margin-bottom:18px;line-height:0}
.thanks__tick svg{width:68px;height:68px;display:block}
.thanks__tick circle{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .9s var(--ease) .15s forwards}
.thanks__tick path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:draw .6s var(--ease) .7s forwards}
.thanks__eyebrow{display:block;margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.thanks__title{margin:0;font-size:clamp(26px,7vw,46px);overflow-wrap:anywhere}
.thanks__text{margin:18px auto 0;max-width:34em;font-size:var(--fs-body);line-height:1.6;color:var(--grey)}
.thanks__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.thanks__flower{position:absolute;right:16px;bottom:14px;width:64px;pointer-events:none}

@media (min-width:1200px), (min-width:768px) and (not (pointer:coarse)){
  .thanks{--ww:calc(2408 * var(--u));min-height:max(100svh,calc(900 * var(--u)));padding:calc(230 * var(--u)) 0 calc(130 * var(--u))}
  .thanks__wave{left:calc(-441 * var(--u));bottom:calc(-422 * var(--u))}       /* same artwork window as the Figma floor-plans frame */
  .thanks__branch{right:auto;left:calc(1687 * var(--u));top:calc(160 * var(--u));width:calc(239 * var(--u))}
  .thanks__card{width:calc(860 * var(--u));padding:calc(64 * var(--u)) calc(70 * var(--u)) calc(60 * var(--u));border-radius:calc(20 * var(--u));box-shadow:0 0 calc(60 * var(--u)) rgba(0,0,0,.05)}
  .thanks__title{font-size:var(--fs-h)}
  .thanks__tick{margin-bottom:calc(22 * var(--u))}
  .thanks__tick svg{width:calc(84 * var(--u));height:calc(84 * var(--u));min-width:calc(56 * var(--fx));min-height:calc(56 * var(--fx))}
  .thanks__eyebrow{margin-bottom:calc(14 * var(--u));font-size:max(calc(12 * var(--fx)),calc(15 * var(--u)))}
  .thanks__text{max-width:calc(560 * var(--u));margin-top:calc(26 * var(--u))}
  .thanks__actions{margin-top:calc(40 * var(--u));gap:calc(25 * var(--u))}
  .thanks__flower{right:calc(23 * var(--u));bottom:calc(19 * var(--u));width:calc(101 * var(--u))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .hero__logo,.js .site-header__inner > *,.js .float-cta__btn{opacity:1;animation:none}
}