/* marquisarjan.com — page design (EN / + FR /fr). No framework, no build.
   Method: skill realestate-lp, 13-editorial-design (the Regalia/DWTN/Belle Vie editorial kit), re-skinned to the
   Marquis One brand from the 2025 kit: warm charcoal, ivory, the logo's gold (#c39f50) as accent,
   wide light uppercase headings (Lexend Exa) over a serif text face (Cormorant Garamond), Jost for UI.
   Interactive pieces (amenities explorer, progress, rental calculator) are driven by /site.js. */

@font-face{font-family:"Lexend Exa";font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/lexend-exa-latin-200-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend Exa";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/lexend-exa-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend Exa";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lexend-exa-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/jost-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jost-latin-400-normal.woff2) format("woff2")}

:root{
  --stone:#f6f3ee;--sand:#ece6dc;--white:#fff;
  --night:#23272b;--night-2:#2c3136;--night-deep:#16191c;
  --bronze:#9a7630;--bronze-2:#d6b56d;--metro:#2f8fd6;--cyan:#c39f50;
  --ink:#1d2024;
  --ink-90:rgba(29,32,36,.9);--ink-80:rgba(29,32,36,.8);--ink-70:rgba(29,32,36,.7);--ink-60:rgba(29,32,36,.6);--ink-50:rgba(29,32,36,.5);
  --lt-90:rgba(246,243,238,.9);--lt-70:rgba(246,243,238,.7);--lt-55:rgba(246,243,238,.55);--lt-40:rgba(246,243,238,.4);
  --line:rgba(35,39,43,.14);--line-lt:rgba(246,243,238,.14);
  --display:"Lexend Exa",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Jost,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);--clip:cubic-bezier(.785,.135,.15,.86);
  --max:1400px;--gut:20px;--sec:104px;--hdr:72px;
}
@media(min-width:768px){:root{--gut:40px;--sec:160px}}

*,*:before,*:after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{margin:0;background:var(--stone);color:var(--ink);font:300 1rem/1.6 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
h1,h2,h3,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:200;color:var(--night)}
em{font-style:italic}
.urow .t,.poi .n,.mile .t,.facts-dl dd,.coll-h p,.lead,.quote p,.step b,.rows .n,.faq-q h3,.enq-desk .who,.okmsg .t{font-variant-numeric:lining-nums}
strong{font-weight:400;color:var(--night)}
::selection{background:rgba(195,159,80,.35);color:var(--night)}
:focus-visible{outline:1px solid var(--bronze);outline-offset:3px}
section[id],[id=form]{scroll-margin-top:var(--hdr)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0}
.bg-stone{background:var(--stone)}.bg-white{background:var(--white)}.bg-sand{background:var(--sand)}
.dark{background:var(--night);color:var(--lt-90)}
.dark h2,.dark h3,.eco h2,.eco h3,.loc h2,.market h2{color:var(--stone)}
.g12{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.g12.gap40{gap:40px}.g12.end{align-items:end}
@media(min-width:1024px){
  .g12{grid-template-columns:repeat(12,minmax(0,1fr));gap:56px}
  .l4{grid-column:span 4/span 4}.l5{grid-column:span 5/span 5}.l6{grid-column:span 6/span 6}.l7{grid-column:span 7/span 7}.l8{grid-column:span 8/span 8}
  .s6{grid-column-start:6}.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
}

/* ---------- Type ---------- */
.mini{display:inline-flex;align-items:center;gap:18px;text-transform:uppercase;font:300 .7rem/1.4 var(--display);letter-spacing:.3em;color:var(--bronze)}
.mini:before{content:"";display:block;width:48px;height:1px;background:currentColor}
.mini.bare:before{display:none}
.dark .mini,.eco .mini,.loc .mini,.market .mini{color:var(--bronze-2)}
.h2{margin-top:28px;font:200 clamp(1.45rem,2.7vw,2.35rem)/1.3 var(--display);text-transform:uppercase;letter-spacing:.05em}
.h2 em,.hero h1 em,.band h2 em{font:400 italic 1.18em/1 var(--serif);text-transform:none;letter-spacing:0;color:var(--bronze)}
.dark .h2 em,.eco .h2 em,.loc .h2 em,.market .h2 em{color:var(--bronze-2)}
.lead{font:400 1.3rem/1.6 var(--serif);color:var(--ink-90)}
.lead+.lead{margin-top:20px}
.dark .lead,.market .lead{color:var(--lt-90)}
.body{font-size:1rem;line-height:1.85;color:var(--ink-80)}
.dark .body,.eco .body,.loc .body{color:var(--lt-70)}
.fine{font-size:.75rem;line-height:1.65;color:var(--ink-50)}
.dark .fine,.loc .fine,.market .fine{color:var(--lt-40)}
.cap{font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-50)}
.label{font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-60)}
.ast{font-size:.62em;vertical-align:super;line-height:0;opacity:.75;margin-left:1px}
.num{font-family:var(--display);font-weight:200}
@media(min-width:768px){.lead{font-size:1.4rem}}

/* ---------- Buttons: square-cornered, clip-path fill ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.7em;padding:17px 30px;font:300 .68rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.26em;cursor:pointer;transition:color .6s var(--clip)}
.btn.sm{padding:12px 20px;font-size:.62rem}
.btn>.fill{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--clip);z-index:0}
.btn:hover>.fill,.btn:focus-visible>.fill{clip-path:inset(0)}
.btn>*:not(.fill){position:relative;z-index:1}
.btn .arr{transition:transform .9s var(--clip)}
.btn:hover .arr{transform:translateX(.35em)}
.btn[disabled]{opacity:.7;cursor:wait}
.btn-bronze{background:var(--bronze);color:#fff}
.btn-bronze>.fill{background:var(--night-deep)}
.btn-light{border:1px solid rgba(246,243,238,.45);color:var(--stone)}
.btn-light>.fill{background:var(--stone)}
.btn-light:hover{color:var(--night)}
.btn-dark{border:1px solid rgba(35,39,43,.35);color:var(--night)}
.btn-dark>.fill{background:var(--night)}
.btn-dark:hover{color:var(--stone)}
.btn svg{width:15px;height:15px;fill:currentColor;flex:none}

.nl{position:relative;overflow:hidden;display:inline-block;line-height:1.3;padding-top:.45em;margin-top:-.45em}
.nl>span{display:inline-block;transition:transform .35s var(--ease)}
.nl>span+span{position:absolute;left:0;top:.45em;transform:translateY(160%)}
.nl:hover>span:first-child{transform:translateY(-160%)}
.nl:hover>span+span{transform:none}

/* ---------- Header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:24px 0;transition:all .7s var(--ease)}
.hdr.is-scrolled{background:rgba(22,25,28,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-lt);padding:12px 0}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px;line-height:1}
.brand img{height:34px;width:auto}
.brand b{display:block;font:300 .95rem/1 var(--display);letter-spacing:.42em;color:var(--stone)}
.brand small{display:block;margin-top:6px;font:300 .5rem/1 var(--display);letter-spacing:.42em;text-transform:uppercase;color:var(--lt-70)}
.hdr nav.main{display:none;align-items:center;gap:32px}
.hdr nav.main a{font:300 .62rem/1 var(--display);text-transform:uppercase;letter-spacing:.24em;color:var(--lt-70);transition:color .5s}
.hdr nav.main a:hover{color:var(--stone)}
.hdr .right{display:flex;align-items:center;gap:14px}
.hdr .lang{font:300 .62rem/1 var(--display);letter-spacing:.24em;color:var(--lt-70);padding:6px 2px}
.hdr .lang:hover{color:var(--stone)}
.hdr .cta{display:none}
.burger{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;width:40px;height:40px}
.burger i{display:block;width:26px;height:1px;background:var(--stone);transition:all .5s}
.burger i:first-child{transform:translateY(-5px)}.burger i:last-child{transform:translateY(5px)}
.hdr.is-open .burger i:first-child{transform:rotate(22.5deg)}
.hdr.is-open .burger i:last-child{transform:rotate(-22.5deg)}
.hdr.is-open{background:var(--night-deep)}
.mmenu{overflow:hidden;max-height:0;transition:max-height .7s var(--ease)}
.hdr.is-open .mmenu{max-height:520px}
.mmenu nav{display:flex;flex-direction:column;gap:22px;padding:36px var(--gut) 40px}
.mmenu a{font:200 1.05rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.mmenu a.go{font-size:.7rem;letter-spacing:.26em;color:var(--bronze-2);margin-top:8px}
@media(min-width:640px){.hdr .cta{display:inline-flex}}
@media(min-width:1100px){.hdr nav.main{display:flex}.burger,.mmenu{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--night-deep)}
.kb{position:absolute;inset:0}
.kb-slide{position:absolute;inset:0;opacity:0;animation:kb 24s infinite;will-change:transform,opacity}
.kb-slide img{width:100%;height:100%;object-fit:cover}
.kb-slide:nth-child(1){animation-delay:0s}.kb-slide:nth-child(2){animation-delay:8s}.kb-slide:nth-child(3){animation-delay:16s}
.kb-cap{position:absolute;right:var(--gut);top:104px;z-index:2;font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(246,243,238,.6)}
@keyframes kb{0%{opacity:0;transform:scale(1.08)}4%{opacity:1}33%{opacity:1;transform:scale(1)}38%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse 75% 55% at 50% 62%,rgba(14,15,17,.62),transparent 72%),linear-gradient(180deg,rgba(14,15,17,.6),transparent 38%),linear-gradient(180deg,transparent 40%,rgba(14,15,17,.92))}
.hero-in{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 var(--gut) 104px;text-align:center}
.hero .mark{height:92px;width:auto;opacity:.95}
.hero h1{margin-top:22px;color:var(--stone);font:200 clamp(2.3rem,7.4vw,5.6rem)/1 var(--display);letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.hero h1 span{display:block;margin-top:.35em;font-size:.36em;letter-spacing:.62em}
.hero h1 em{display:block;margin-top:.9em;font-size:.26em;letter-spacing:.05em;color:var(--bronze-2)}
.hero .sub{margin-top:26px;max-width:38rem;color:var(--lt-90);font:400 1.2rem/1.55 var(--serif)}
.hero .ctas{margin-top:36px;display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:340px}
.hero .facts{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;color:var(--lt-70);font:300 .6rem/1.4 var(--display);text-transform:uppercase;letter-spacing:.24em}
.hero .facts .dot{display:none;color:var(--bronze)}
.cue{position:absolute;bottom:28px;left:50%;margin-left:-9px;z-index:10;color:var(--lt-70);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(10px);opacity:.4}}
@keyframes introFade{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.intro{opacity:0;animation:introFade 1.2s var(--ease) forwards}
@media(min-width:640px){.hero .ctas{flex-direction:row;justify-content:center;max-width:none;width:auto}.hero .facts .dot{display:inline}}
@media(min-width:768px){.hero-in{padding-bottom:120px}.hero .sub{font-size:1.4rem}.hero .mark{height:120px}}
@media(max-height:760px) and (min-width:768px){.hero .mark{height:70px}.hero-in{padding-bottom:88px}}

/* ---------- Intro stats ---------- */
.intro-r{display:flex;flex-direction:column;justify-content:flex-end}
.stats{margin-top:88px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.stat{padding:36px 8px 12px 0}
.stat .v{font:200 clamp(2.4rem,4.6vw,4.4rem)/1 var(--display);color:var(--night);letter-spacing:-.01em}
.stat .v small{font-size:.4em;letter-spacing:.1em;margin-left:.2em}
.stat .l{margin-top:14px;font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-60)}
@media(min-width:1024px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding-right:24px}}

/* ---------- Full-bleed band ---------- */
.band{position:relative;height:62vh;overflow:hidden;background:var(--night-deep)}
.band>img,.band>video{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}
.band .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,15,.2),transparent 40%,rgba(12,13,15,.55))}
.band .cap{position:absolute;bottom:18px;right:var(--gut);color:rgba(246,243,238,.7)}
.band .over{position:absolute;bottom:40px;left:var(--gut);right:var(--gut)}
.band h2{margin-top:16px;color:var(--stone);font:200 clamp(1.6rem,4vw,3.3rem)/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em;max-width:60rem}
@media(min-width:768px){.band{height:78vh}}

/* ---------- Tower facts ---------- */
.tower-grid{margin-top:72px}
.quote{position:relative;z-index:10;background:var(--night);color:var(--stone);padding:36px;border-top:2px solid var(--bronze)}
.quote p{font:400 clamp(1.55rem,2.4vw,2.2rem)/1.3 var(--serif)}
.quote em{color:var(--bronze-2)}
.quote .by{margin-top:22px;font:300 .6rem/1.4 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--lt-55)}
.tower-img{margin-top:40px;display:none}
.tower-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tower-img .cap{margin-top:12px}
.facts-dl{margin-top:44px}
.facts-dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.facts-dl>div:last-child{border-bottom:1px solid var(--line)}
.facts-dl dt{padding-top:5px;font-size:.64rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-60)}
.facts-dl dd{font:400 1.3rem/1.35 var(--serif);color:var(--night)}
@media(min-width:768px){.tower-grid{margin-top:104px}.quote{padding:52px}.facts-dl>div{grid-template-columns:190px minmax(0,1fr)}.facts-dl dd{font-size:1.5rem}}
@media(min-width:1024px){.quote{margin-top:-180px}.tower-img{display:block}}

/* ---------- Six ecosystems: interactive tower ---------- */
.eco{background:var(--night-deep);color:var(--lt-90);overflow:hidden}
.eco-head{display:grid;gap:32px}
@media(min-width:1024px){.eco-head{grid-template-columns:7fr 4fr;align-items:end;gap:56px}}
.eco-stage{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:1024px){.eco-stage{grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:stretch}}
.eco-tower{position:relative;display:flex;gap:18px}
.eco-tower svg{display:none;width:84px;height:100%;min-height:560px;flex:none}
.eco-levels{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.eco-levels::-webkit-scrollbar{display:none}
.eco-lvl{flex:none;text-align:left;padding:14px 16px;border:1px solid var(--line-lt);transition:border-color .5s,background .5s}
.eco-lvl .n{display:block;white-space:nowrap;font:300 .56rem/1.3 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--lt-55)}
.eco-lvl .t{display:block;margin-top:6px;font:400 1.15rem/1.2 var(--serif);color:var(--stone);white-space:nowrap}
.eco-lvl[aria-selected=true]{border-color:var(--c,var(--bronze));background:rgba(246,243,238,.04)}
.eco-lvl[aria-selected=true] .n{color:var(--c,var(--bronze-2))}
@media(min-width:1024px){
  .eco-tower{height:660px}
  .eco-tower svg{display:block;height:100%;min-height:0}
  .eco-levels{position:relative;display:block;overflow:visible}
  .eco-lvl{position:absolute;left:0;top:var(--y);transform:translateY(-50%);border:0;border-left:1px solid var(--line-lt);padding:6px 0 6px 18px;background:none!important}
  .eco-lvl[aria-selected=true]{border-left:2px solid var(--c,var(--bronze));padding-left:17px}
}
.tw-band{transition:fill .6s,opacity .6s;cursor:pointer}
.tw-band.on{opacity:1}
.eco-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}
.eco-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--night)}
.eco-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.eco-img img.on{opacity:1;transform:none}
.eco-img .cap{position:absolute;right:14px;bottom:12px;color:rgba(246,243,238,.75)}
.eco-img .glow{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(0deg,rgba(22,25,28,.75),transparent)}
.eco-txt{padding:32px 0 0;display:grid;gap:18px}
.eco-txt .lvl{font:300 .62rem/1.4 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--c,var(--bronze-2))}
.eco-txt h3{font:200 clamp(1.4rem,2.4vw,2rem)/1.2 var(--display);text-transform:uppercase;letter-spacing:.08em}
.eco-txt p{font:400 1.2rem/1.55 var(--serif);color:var(--lt-70);max-width:40rem}
.eco-txt ul{display:flex;flex-wrap:wrap;gap:8px 22px}
.eco-txt li{position:relative;padding-left:14px;font-size:.8rem;letter-spacing:.04em;color:var(--lt-70)}
.eco-txt li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--c,var(--bronze))}
.eco-fade{animation:ecoIn .9s var(--ease)}
@keyframes ecoIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eco-stats{margin-top:72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-lt)}
.eco-stats>div{padding:32px 12px 0 0}
.eco-stats .v{font:200 clamp(2rem,3.6vw,3.3rem)/1 var(--display);color:var(--stone)}
.eco-stats .l{margin-top:12px;font-size:.64rem;text-transform:uppercase;letter-spacing:.22em;color:var(--lt-55)}
@media(min-width:768px){.eco-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Residences ---------- */
.pics{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.pics figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pics .cap{margin-top:12px}
@media(min-width:768px){.pics{grid-template-columns:repeat(12,minmax(0,1fr))}.pics .p7{grid-column:span 7}.pics .p5{grid-column:span 5;margin-top:72px}}
.coll{margin-top:88px}
.coll+.coll{margin-top:64px}
.coll-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-bottom:18px}
.coll-h h3{font:200 1.05rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.18em}
.coll-h p{font:400 1.1rem/1.4 var(--serif);color:var(--ink-70)}
.urow{width:100%;text-align:left;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline;transition:background-color .5s,padding .5s var(--ease)}
.coll .urow:last-child{border-bottom:1px solid var(--line)}
.urow:hover{background:rgba(255,255,255,.7)}
.urow .t{font:400 1.5rem/1.2 var(--serif);color:var(--night);display:flex;align-items:baseline;gap:12px}
.urow .t .go{opacity:0;transform:translateX(-8px);transition:all .5s;color:var(--bronze);font-size:1.1rem}
.urow:hover .t .go{opacity:1;transform:none}
.urow .s,.urow .p{font-size:.9rem;color:var(--ink-80)}
.urow .p i,.urow .s i{font-style:normal;color:var(--ink-50);font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;margin-right:8px}
.units-fine{margin-top:22px;max-width:52rem}
@media(min-width:768px){
  .urow{grid-template-columns:5fr 4fr 3fr;gap:16px}
  .urow .p i,.urow .s i{display:none}
  .urow:hover{padding-left:12px}
  .coll .head{display:grid;grid-template-columns:5fr 4fr 3fr;gap:16px;padding-bottom:12px}
}
.coll .head{display:none}
@media(min-width:768px){.coll .head{display:grid}}

/* ---------- Film ---------- */
.film{position:relative;height:74vh;min-height:460px;overflow:hidden;background:var(--night-deep)}
.film video,.film>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,15,.35),rgba(12,13,15,.15) 40%,rgba(12,13,15,.7))}
.film .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.film h2{margin-top:18px;color:var(--stone);font:200 clamp(1.5rem,3.6vw,3rem)/1.25 var(--display);text-transform:uppercase;letter-spacing:.12em}
.play{margin-top:36px;display:inline-flex;align-items:center;gap:18px;color:var(--stone);font:300 .64rem/1 var(--display);letter-spacing:.28em;text-transform:uppercase}
.play .ring{position:relative;width:74px;height:74px;border-radius:50%;border:1px solid rgba(246,243,238,.55);display:flex;align-items:center;justify-content:center;transition:background .6s,border-color .6s}
.play .ring:after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(214,181,109,.4);animation:ring 2.8s var(--ease) infinite}
.play .ring svg{width:18px;height:18px;fill:currentColor;margin-left:3px}
.play:hover .ring{background:var(--bronze);border-color:var(--bronze);color:#fff}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.film .cap{position:absolute;bottom:16px;right:var(--gut);color:rgba(246,243,238,.65)}
.vmodal{position:fixed;inset:0;z-index:1150;background:rgba(12,13,15,.94);display:flex;align-items:center;justify-content:center;padding:16px}
.vmodal video{width:min(1200px,100%);max-height:86vh;background:#000}
.vmodal .x{position:absolute;top:14px;right:18px;font-size:2rem;line-height:1;color:var(--stone);padding:6px 10px}

/* ---------- Location: interactive map ---------- */
.loc{background:var(--night);color:var(--lt-90)}
.loc-grid{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:1024px){.loc-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}}
.map-card{position:relative;background:var(--night-deep);border:1px solid var(--line-lt);overflow:hidden}
.map-svg{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#1b1e22;touch-action:pan-y}
@media(min-width:640px){.map-svg{aspect-ratio:4/3}}
.map-tools{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;pointer-events:none}
.seg{display:inline-flex;background:rgba(22,25,28,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-lt);pointer-events:auto}
.seg button{padding:10px 14px;font:300 .56rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--lt-55);transition:color .4s,background .4s}
.seg button[aria-pressed=true]{background:var(--bronze);color:#fff}
.map-legend{position:absolute;right:12px;bottom:26px;display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 14px;background:rgba(22,25,28,.82);border:1px solid var(--line-lt);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-55)}
.map-legend{display:none}
@media(min-width:640px){.map-legend{display:flex}}
.map-legend i{display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:7px;background:var(--metro)}
.map-legend i.g{background:#3d9a5b}.map-legend i.r{background:#8391a0;height:3px}.map-legend i.w{background:#3a4047;height:6px}
.map-attr{position:absolute;right:12px;bottom:8px;font-size:.55rem;color:var(--lt-40)}
.map-attr a{text-decoration:underline}
/* SVG layers */
.m-land{fill:#1b1e22}
.m-sea{fill:#141619}
.m-water{fill:#2a2f35;stroke:none}
.m-canal{fill:none;stroke:#30353b;stroke-linecap:round;stroke-linejoin:round}
.m-road{fill:none;stroke:#3a4754;stroke-linecap:round;stroke-linejoin:round}
.m-road.major{stroke:#56636f}
.m-metro{fill:none;stroke:var(--metro);stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.m-metro.green{stroke:#3d9a5b;opacity:.55}
.m-stn{fill:var(--night-deep);stroke:var(--metro)}
.m-stn.main{fill:var(--metro)}
.m-lbl{font-family:var(--sans);font-weight:300;fill:rgba(246,243,238,.55);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.m-lbl.area{fill:rgba(246,243,238,.22);letter-spacing:.3em}
.m-lbl.big{fill:rgba(246,243,238,.85)}
.m-poi{cursor:pointer}
.m-poi circle.dot{fill:var(--stone);transition:r .4s,fill .4s}
.m-poi text{font-family:var(--sans);fill:rgba(246,243,238,.8);letter-spacing:.06em;transition:fill .4s;paint-order:stroke;stroke:#16191c;stroke-linejoin:round}
.m-poi.on circle.dot{fill:var(--bronze-2)}
.m-poi.on text{fill:var(--bronze-2)}
.m-route{fill:none;stroke:var(--bronze-2);stroke-linecap:round;stroke-dasharray:1 0;opacity:0;transition:opacity .4s}
.m-route.on{opacity:1}
.m-walk{fill:none;stroke:var(--stone);stroke-linecap:round}
.m-home .halo{fill:rgba(195,159,80,.18);transform-box:fill-box;transform-origin:center;animation:halo 2.6s var(--ease) infinite}
.m-home .core{fill:var(--bronze)}
@keyframes halo{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.m-train{fill:#fff}
.poi-list{border-top:1px solid var(--line-lt)}
.poi{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-lt);text-align:left;transition:padding .5s var(--ease),background .5s}
.poi .i{font:300 .6rem/1 var(--display);letter-spacing:.14em;color:var(--lt-40)}
.poi .n{font:400 1.2rem/1.3 var(--serif);color:var(--stone)}
.poi .n small{display:block;margin-top:3px;font:300 .72rem/1.4 var(--sans);letter-spacing:.04em;color:var(--lt-55)}
.poi .w{font:200 1.25rem/1 var(--display);color:var(--bronze-2);white-space:nowrap}
.poi .w small{font-size:.5em;letter-spacing:.2em;margin-left:4px;text-transform:uppercase}
.poi:hover,.poi.on{padding-left:10px;background:rgba(246,243,238,.03)}
.poi.on .i{color:var(--bronze-2)}
.poi.metro .w{color:#e6c77f}
.metro-card{margin-top:40px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center}
.metro-card img{width:120px;aspect-ratio:4/5;object-fit:cover}
.metro-card p{font:400 1.15rem/1.5 var(--serif);color:var(--lt-70)}
.metro-card .cap{margin-top:8px;display:block;color:var(--lt-40)}

/* ---------- Investors: payment plan + simulator ---------- */
.plan-grid{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media(min-width:1024px){.plan-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}}
.sim{background:var(--white);border:1px solid var(--line);padding:28px}
@media(min-width:768px){.sim{padding:44px}}
.sim .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sim .price{font:200 clamp(1.9rem,3.4vw,2.8rem)/1 var(--display);color:var(--night)}
.sim .usd{font-size:.8rem;color:var(--ink-60)}
.sim input[type=range]{width:100%;margin:26px 0 10px;accent-color:var(--bronze);height:28px}
.sim .presets{display:flex;flex-wrap:wrap;gap:6px}
.sim .presets button{padding:8px 12px;border:1px solid var(--line);font:300 .56rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-70);transition:all .4s}
.sim .presets button[aria-pressed=true],.sim .presets button:hover{border-color:var(--bronze);color:var(--night)}
.tl{margin-top:34px;position:relative}
.tl-bar{position:relative;height:6px;background:var(--sand);display:flex}
.tl-bar span{height:100%;background:var(--night);transition:background .5s}
.tl-bar span:nth-child(even){background:#3a4047}
.tl-bar span.paid{background:var(--bronze)}
.tl-bar span.paid:nth-child(even){background:#d6b56d}
.tl-now{position:absolute;top:-8px;width:1px;height:22px;background:var(--metro)}
.tl-now b{position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 .55rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--metro)}
.tl-rows{margin-top:26px;border-top:1px solid var(--line)}
.tl-rows>div{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.tl-rows .pc{font:300 .95rem/1 var(--display);color:var(--night)}
.tl-rows .d{color:var(--ink-70)}
.tl-rows .a{font-variant-numeric:tabular-nums;color:var(--night)}
.tl-rows .done .d:after{content:" ✓";color:var(--bronze)}
.tl-rows .hand{background:rgba(195,159,80,.08)}
.sim-sum{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sim-sum>div{background:var(--white);padding:18px}
.sim-sum .v{font:200 1.3rem/1.1 var(--display);color:var(--night)}
.sim-sum .l{margin-top:8px;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-60)}
.sim .fine{margin-top:18px}
.bigpc{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:40px}
.bigpc div .v{font:200 clamp(3.2rem,6vw,5.4rem)/.9 var(--display);color:var(--night)}
.bigpc div .l{margin-top:12px;font-size:.64rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-60);max-width:12rem}
.bigpc .plus{font:200 2.4rem/1 var(--display);color:var(--bronze);padding-bottom:28px}

/* ---------- Buy / sell split ---------- */
.split{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:1024px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.side{background:var(--stone);padding:36px 24px;display:flex;flex-direction:column;gap:22px}
@media(min-width:768px){.side{padding:56px}}
.side.dk{background:var(--night);color:var(--lt-90)}
.side.dk h3,.side.dk .step b{color:var(--stone)}
.side h3{font:200 clamp(1.3rem,2.2vw,1.8rem)/1.25 var(--display);text-transform:uppercase;letter-spacing:.08em}
.side .lead{font-size:1.2rem}
.steps{counter-reset:s;border-top:1px solid var(--line)}
.side.dk .steps,.side.dk .step{border-color:var(--line-lt)}
.step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.step:before{counter-increment:s;content:"0" counter(s);font:300 .62rem/1.9 var(--display);letter-spacing:.16em;color:var(--bronze)}
.step b{display:block;font:400 1.15rem/1.35 var(--serif);color:var(--night)}
.step span{display:block;margin-top:4px;font-size:.88rem;line-height:1.7;color:var(--ink-70)}
.side.dk .step span{color:var(--lt-55)}
.side .btn{align-self:flex-start;margin-top:auto}

/* ---------- Market (dark) ---------- */
.market{background:var(--night-2);color:var(--lt-90)}
.mstats{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-lt)}
.mstats>div{padding:34px 32px 12px 0}
.mstats .v{font:200 clamp(1.8rem,3.2vw,2.8rem)/1.05 var(--display);color:var(--stone)}
.mstats .l{margin-top:14px;font-size:.66rem;line-height:1.65;text-transform:uppercase;letter-spacing:.18em;color:var(--lt-55)}
.market .mtxt{margin-top:56px}
@media(min-width:768px){.mstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.mstats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Developer + progress ---------- */
.dev-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.dev-img .cap{margin-top:12px}
.rows{border-top:1px solid var(--line)}
.rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.rows .n{font:400 1.3rem/1.3 var(--serif);color:var(--night)}
.rows .w{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-60);text-align:right}
.miles{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr);border-left:1px solid var(--line);padding-left:24px;gap:22px}
.mile{position:relative}
.mile:before{content:"";position:absolute;left:-29px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--stone);border:1px solid var(--bronze)}
.mile.done:before{background:var(--bronze)}
.mile.now:before{background:var(--metro);border-color:var(--metro);box-shadow:0 0 0 5px rgba(47,143,214,.18)}
.mile .d{font:300 .6rem/1.4 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.mile .t{margin-top:4px;font:400 1.15rem/1.4 var(--serif);color:var(--night)}
@media(min-width:1024px){.dev-img{margin-top:88px}}

/* ---------- Partner ---------- */
.creds{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.creds>div{padding-top:28px}
.creds .v{font:200 clamp(1.6rem,3vw,2.4rem)/1 var(--display);color:var(--night)}
.creds .l{margin-top:10px;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-60)}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 0;text-align:left}
.faq-q h3{font:400 1.3rem/1.3 var(--serif);color:var(--night)}
.faq-q .ic{flex:none;color:var(--bronze);font-size:1.5rem;line-height:1;font-weight:300;transition:transform .6s var(--ease)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 36px 26px 0;font-size:.95rem;line-height:1.85;color:var(--ink-80)}
.faq-a a{color:var(--night);border-bottom:1px solid var(--bronze)}
.faq-item[data-open=true] .faq-a{grid-template-rows:1fr}
.faq-item[data-open=true] .ic{transform:rotate(45deg)}
@media(min-width:768px){.faq-q h3{font-size:1.5rem}}

/* ---------- Enquire ---------- */
.enq{position:relative;background:var(--white)}
.enq-card{position:relative;z-index:10;translate:0 96px;background:var(--night);color:var(--stone);display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--bronze)}
.enq-form,.enq-desk{padding:36px 22px}
.enq-form{border-bottom:1px solid var(--line-lt)}
.enq h2{margin-top:22px;color:var(--stone);font:200 clamp(1.35rem,2.4vw,2rem)/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em}
.enq .intro-t{margin-top:14px;color:var(--lt-70);font:400 1.15rem/1.55 var(--serif)}
.enq-desk{display:flex;flex-direction:column;justify-content:space-between;gap:44px}
.enq-desk .k{font:300 .62rem/1 var(--display);text-transform:uppercase;letter-spacing:.26em;color:var(--bronze-2)}
.enq-desk .who{margin-top:22px;font:400 1.5rem/1.35 var(--serif)}
.enq-desk .who span{display:block;margin-top:4px;font:300 .95rem/1.5 var(--sans);color:var(--lt-55)}
.enq-desk dl{margin-top:36px;display:grid;gap:18px;font-size:.95rem}
.enq-desk dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--lt-40)}
.enq-desk dd{margin-top:4px;color:var(--lt-90)}
.enq-desk dd a:hover{color:var(--bronze-2)}
.enq-desk .btn{align-self:flex-start}
@media(min-width:768px){.enq-form,.enq-desk{padding:60px}}
@media(min-width:1024px){.enq-card{grid-template-columns:7fr 5fr}.enq-form{border-bottom:0;border-right:1px solid var(--line-lt)}}

.lf{margin-top:36px;display:grid;gap:26px}
.lf .row{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media(min-width:560px){.lf .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lf .field{position:relative;min-width:0}
.lf input[type=text],.lf input[type=email],.lf input[type=tel],.lf select,.lf textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(246,243,238,.25);border-radius:0;outline:none;padding:12px 0;color:var(--stone);font:300 1rem/1.4 var(--sans);transition:border-color .5s}
.lf input::placeholder,.lf textarea::placeholder{color:var(--lt-40)}
.lf input:focus,.lf select:focus,.lf textarea:focus{border-bottom-color:var(--bronze)}
.lf textarea{resize:none;min-height:80px}
.lf select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b68d5a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.lf select.empty{color:var(--lt-40)}
.lf select option{color:var(--night);background:#fff}
.lf .field.invalid input{border-bottom-color:#e8a598}
.lf .fielderr{margin-top:6px;font-size:.75rem;color:#f0b4a8}
.lf .fielderr:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:2px 0 0;min-width:0}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:10px 14px;font:300 .58rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.18em;border:1px solid rgba(246,243,238,.2);color:var(--lt-55);transition:border-color .5s,color .5s}
.chips label:hover span{border-color:rgba(246,243,238,.45)}
.chips input:checked+span{border-color:var(--bronze);color:var(--bronze-2)}
.chips input:focus-visible+span{outline:1px solid var(--bronze);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.78rem;line-height:1.6;color:var(--lt-55);cursor:pointer}
.consent input{margin:3px 0 0;accent-color:var(--bronze);width:15px;height:15px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf .note{font-size:.72rem;color:var(--lt-40)}
.errmsg{display:none;font-size:.85rem;color:#f0b4a8}
.okmsg{display:none;margin-top:36px;border:1px solid rgba(195,159,80,.45);padding:30px}
.okmsg .t{font:400 1.6rem/1.3 var(--serif);color:var(--bronze-2)}
.okmsg p{margin-top:12px;color:var(--lt-70);font-size:.9rem;line-height:1.7}
.okmsg .btn{margin-top:22px}
.lf .iti{display:block;width:100%}
.lf .iti__selected-country,.lf .iti__selected-dial-code{color:var(--stone)}
.lf .iti__arrow{border-top-color:var(--lt-55)}
.lf .iti__arrow--up{border-bottom-color:var(--lt-55)}
.lf .iti__selected-country-primary{padding-left:0}
.iti--container,.iti__dropdown-content{z-index:1200}
.iti__dropdown-content{font:300 .9rem/1.4 var(--sans);color:var(--night)}

/* ---------- Footer ---------- */
.foot{background:var(--night-deep);color:var(--lt-70);padding:184px 0 44px}
.foot .top{display:flex;flex-direction:column;justify-content:space-between;gap:36px;border-bottom:1px solid var(--line-lt);padding-bottom:44px}
.foot .wm{display:flex;align-items:center;gap:16px}
.foot .wm img{height:54px;width:auto}
.foot .wm b{display:block;font:300 1.1rem/1 var(--display);letter-spacing:.42em;color:var(--stone)}
.foot .wm small{display:block;margin-top:8px;font:300 .54rem/1 var(--display);letter-spacing:.4em;text-transform:uppercase;color:var(--bronze-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot nav a{font:300 .6rem/1 var(--display);text-transform:uppercase;letter-spacing:.22em;color:var(--lt-55);transition:color .5s}
.foot nav a:hover{color:var(--stone)}
.foot .disclaimer{margin-top:40px;max-width:60rem;font-size:.74rem;line-height:1.7;color:var(--lt-40)}
.foot .permit{margin-top:24px;display:flex;align-items:center;gap:16px;font-size:.72rem;letter-spacing:.04em;color:var(--lt-55)}
.foot .permit b{font-weight:400;color:var(--stone)}
.foot .permit img{width:72px;height:72px;background:#fff;padding:5px;image-rendering:pixelated}
.foot .contact{margin-top:24px;font-size:.75rem;line-height:1.8;color:var(--lt-55)}
.foot .contact a{color:var(--lt-70)}
.foot .contact a:hover{color:var(--bronze-2)}
.foot .bottom{margin-top:32px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;font:300 .56rem/1.6 var(--display);text-transform:uppercase;letter-spacing:.22em;color:rgba(246,243,238,.35)}
.foot .bottom b{font-weight:300;color:var(--bronze-2)}
.foot .bottom a:hover{color:var(--stone)}
.clink{font-size:inherit;color:var(--lt-70);text-decoration:underline;text-underline-offset:3px}
@media(min-width:640px){.foot .bottom{flex-direction:row}}
@media(min-width:768px){.foot .top{flex-direction:row;align-items:flex-end}}

/* ---------- WhatsApp pre-chat modal ---------- */
.wamodal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px}
.wabackdrop{position:absolute;inset:0;background:rgba(12,13,15,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wabox{position:relative;width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;background:var(--stone);border-top:2px solid var(--bronze);padding:30px 26px;animation:introFade .6s var(--ease)}
.wahead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.wahead h2{margin-top:14px;font:200 1.3rem/1.25 var(--display);text-transform:uppercase;letter-spacing:.08em}
.waclose{font-size:1.6rem;line-height:1;color:var(--ink-60);padding:4px}
.wabox .intro-t{margin-top:12px;font:400 1.1rem/1.5 var(--serif);color:var(--ink-80)}
.lf.light{margin-top:26px;gap:22px}
.lf.light input[type=text],.lf.light input[type=tel],.lf.light textarea{color:var(--night);border-bottom-color:rgba(35,39,43,.25)}
.lf.light input::placeholder,.lf.light textarea::placeholder{color:var(--ink-50)}
.lf.light .iti__selected-country,.lf.light .iti__selected-dial-code{color:var(--night)}
.lf.light .iti__arrow{border-top-color:var(--ink-60)}
.lf.light .consent{color:var(--ink-70)}
.lf.light .errmsg,.lf.light .fielderr{color:#b0412e}

/* ---------- Floating WhatsApp (desktop) + sticky bar (mobile) ---------- */
.wafab{position:fixed;right:26px;bottom:26px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--night);color:var(--stone);border:1px solid rgba(195,159,80,.6);display:none;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(12,13,15,.3);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease),background .4s}
.wafab svg{width:24px;height:24px;fill:currentColor}
.wafab:hover{background:var(--bronze);color:#fff}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;background:var(--night-deep);border-top:1px solid rgba(195,159,80,.35);transform:translateY(100%);transition:transform .6s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.mbar a,.mbar button{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;font:300 .6rem/1 var(--display);text-transform:uppercase;letter-spacing:.22em;color:var(--stone)}
.mbar a{background:var(--bronze);color:#fff}
.mbar svg{width:16px;height:16px;fill:currentColor}
body.past-hero .wafab{opacity:1;transform:none;pointer-events:auto}
body.past-hero .mbar{transform:none}
@media(min-width:768px){.wafab{display:flex}.mbar{display:none}}
@media(max-width:767px){.foot{padding-bottom:96px}}

/* ---------- Cookie banner (/consent-v1.js) ---------- */
.cbanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;background:var(--stone);border:1px solid var(--line);border-top:2px solid var(--bronze);box-shadow:0 18px 40px rgba(12,13,15,.25);padding:20px;max-width:460px}
.cbanner p{font-size:.8rem;line-height:1.6;color:var(--ink-80)}
.cbanner .cbtns{margin-top:14px;display:flex;gap:10px;justify-content:flex-end}
.cbanner button{padding:10px 18px;font:300 .58rem/1 var(--display);text-transform:uppercase;letter-spacing:.2em}
.cbanner .cno{border:1px solid rgba(35,39,43,.3);color:var(--night)}
.cbanner .cyes{background:var(--bronze);color:#fff}
@media(max-width:767px){body.past-hero .cbanner{bottom:72px}}

/* ---------- Scroll effects (html.js only) ---------- */
.js [data-fade]{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js [data-fade].is-in{opacity:1;transform:none}
[data-mask]{overflow:hidden}
.js [data-mask] img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js [data-mask].is-in img{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kb-slide{animation:none}.kb-slide:first-child{opacity:1}
  .intro{animation:none;opacity:1}
  .cue,.play .ring:after,.m-home .halo{animation:none}
  .js [data-fade]{opacity:1!important;transform:none!important;transition:none}
  .js [data-mask] img{transform:none!important;transition:none}
  .band>img{transform:none!important}
}

/* ================= Belle Vie additions ================= */
.brand img{height:40px}
.foot .wm img{height:62px}
.hero .badge{display:inline-block;padding:9px 16px;border:1px solid rgba(214,181,109,.55);background:rgba(22,25,28,.35);color:var(--stone);font:300 .58rem/1.3 var(--display);letter-spacing:.26em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero h1{letter-spacing:.22em;padding-left:.22em}
.hero h1 span{font:400 italic .42em/1 var(--serif);letter-spacing:.04em;text-transform:none;color:var(--bronze-2)}
.hero h1 em{font:300 .2em/1 var(--display);letter-spacing:.5em;text-transform:uppercase;color:var(--lt-70);font-style:normal}

/* Construction progress (DLD) */
.prog{margin-top:64px;padding:36px 28px;background:var(--night);color:var(--lt-90);border-top:2px solid var(--bronze)}
.prog-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px}
.prog-head .v{font:200 clamp(3.2rem,7vw,6rem)/.9 var(--display);color:var(--stone)}
.prog-head .v small{font-size:.45em;margin-left:4px;color:var(--bronze-2)}
.prog-head .l{font-size:.66rem;line-height:1.7;text-transform:uppercase;letter-spacing:.2em;color:var(--lt-55)}
.prog-bar{margin-top:30px;height:10px;background:rgba(246,243,238,.1);position:relative;overflow:hidden}
.prog-bar span{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--bronze),var(--bronze-2));transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease) .3s}
.prog.is-in .prog-bar span{transform:scaleX(1)}
.prog-scale{margin-top:12px;display:flex;justify-content:space-between;gap:16px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lt-40)}
.prog-grid{margin-top:64px}
.prog-links{display:grid;gap:18px;align-content:start}
.olink{position:relative;display:grid;gap:6px;padding:24px 48px 24px 24px;border:1px solid var(--line);background:var(--stone);transition:border-color .5s,background .5s}
.olink:hover{border-color:var(--bronze);background:#fff}
.olink .k{font:300 .58rem/1.3 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.olink b{font:400 1.3rem/1.3 var(--serif);color:var(--night)}
.olink span:not(.k):not(.go){font-size:.88rem;line-height:1.6;color:var(--ink-70)}
.olink .go{position:absolute;right:20px;top:22px;color:var(--bronze);font-size:1.2rem;transition:transform .5s var(--ease)}
.olink:hover .go{transform:translate(3px,-3px)}

/* Amenities: flat tab list instead of the DWTN tower */
.amen .eco-tower{height:auto!important}
@media(min-width:1024px){
  .amen .eco-levels{display:flex!important;flex-direction:column;gap:2px}
  .amen .eco-lvl{position:static!important;transform:none;padding:12px 0 12px 18px}
}

/* Residences: four columns (type, size, launch, resale) */
@media(min-width:768px){
  .coll.four .urow,.coll.four .head{grid-template-columns:4fr 3fr 3fr 3fr}
}
.urow .p{color:var(--bronze);font-weight:400}
.pics3{margin-top:72px}
.pics3 figure img{aspect-ratio:4/5}
@media(min-width:768px){.pics3{grid-template-columns:repeat(3,minmax(0,1fr))}.pics3 figure:nth-child(2){margin-top:56px}}

/* Location: developer map images with a scale switch */
.mapimg{background:#1b1e22;aspect-ratio:auto}
.mapimg img{width:100%;height:auto;aspect-ratio:auto}
.mapimg img[data-map=near]{background:#fff}
.poi{cursor:default}
.poi.metro .w{color:var(--cyan)}

/* Payment plan switch */
.sim .plans{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.sim .plans button{padding:10px 14px;border:1px solid var(--line);font-size:.72rem;letter-spacing:.08em;color:var(--ink-70);transition:all .4s}
.sim .plans button[aria-pressed=true]{background:var(--night);border-color:var(--night);color:var(--stone)}

/* Developer */
.zlogo{width:210px;height:auto;margin-bottom:28px}
#zimaya .rows{margin-top:36px}

/* Lawncrest bridge */
.lawn{background:var(--night-deep);color:var(--lt-90)}
.lawn-card{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
@media(min-width:1024px){.lawn-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}}
.lawn-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.lawn-img .cap{margin-top:12px;color:var(--lt-40)}
.lawn-txt{display:grid;gap:22px}
.lawn .mini{color:var(--bronze-2)}
.lawn .h2{margin-top:0;color:var(--stone)}
.lawn .h2 em{color:var(--bronze-2)}
.lawn .lead{color:var(--lt-90);font-size:1.2rem}
.lawn .fine{color:var(--lt-40)}
.lawn-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-lt)}
.lawn-facts>div{padding-top:18px}
.lawn-facts dt{font-size:.58rem;text-transform:uppercase;letter-spacing:.2em;color:var(--lt-55)}
.lawn-facts dd{margin-top:8px;font:400 1.15rem/1.3 var(--serif);color:var(--stone)}
.lawn .ctas{display:flex;flex-wrap:wrap;gap:12px}
.lawn .btn-dark{border-color:rgba(246,243,238,.35);color:var(--stone)}
.lawn .btn-dark>.fill{background:var(--stone)}
.lawn .btn-dark:hover{color:var(--night)}
.dev-img img.zlogo{width:210px;height:auto;aspect-ratio:auto;object-fit:contain}

/* ---------- Marquis One additions ---------- */
/* Rental calculator (#calc) reuses .sim; second slider + outputs */
.sim .row+.row{margin-top:26px}
.sim .rent{font:200 clamp(1.4rem,2.4vw,1.9rem)/1 var(--display);color:var(--night)}
.sim .sim-sum.three{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){.sim .sim-sum.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sim .sim-sum .v.gold{color:var(--bronze)}
/* Similar projects (#similar): card grid on night */
.next{background:var(--night-deep);color:var(--lt-90)}
.next .mini{color:var(--bronze-2)}
.next .h2{color:var(--stone)}.next .h2 em{color:var(--bronze-2)}
.next .body{color:var(--lt-70)}.next .fine{color:var(--lt-40)}
.ncards{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:900px){.ncards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ncard{display:flex;flex-direction:column;border:1px solid var(--line-lt);background:rgba(246,243,238,.03)}
.ncard figure{position:relative;overflow:hidden}
.ncard img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.ncard:hover img{transform:scale(1.04)}
.ncard .cap{position:absolute;left:12px;bottom:10px;color:var(--lt-70)}
.ncard .nb{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.ncard h3{font:200 1.15rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--stone)}
.ncard .where{font:400 italic 1.1rem/1.3 var(--serif);color:var(--bronze-2)}
.ncard dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;border-top:1px solid var(--line-lt);padding-top:16px}
.ncard dt{font-size:.56rem;text-transform:uppercase;letter-spacing:.2em;color:var(--lt-55)}
.ncard dd{margin-top:6px;font:400 1.02rem/1.3 var(--serif);color:var(--stone)}
.ncard .btn{margin-top:auto;align-self:flex-start}
.next .btn-dark{border-color:rgba(246,243,238,.35);color:var(--stone)}
.next .btn-dark>.fill{background:var(--stone)}
.next .btn-dark:hover{color:var(--night)}
.ncard.txt{justify-content:center}
.ncard.txt .nb{justify-content:center}
.ncard.txt ul{display:grid;gap:10px;font-size:.92rem;color:var(--lt-70)}
.ncard.txt li:before{content:"— ";color:var(--bronze-2)}
/* Four-way split (buy / sell / let) */
.split.three{grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.split.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
