:root{
  --teal:#c8a574; --teal-d:#1f4a44; --ink:#1a120f; --ink2:#2a1c14; --cream:#f3efeb; --sand:#e9e1d9; --gold:#c9a56e; --white:#fff;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--cream);line-height:1.7;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.mark{display:inline-block;background:currentColor;-webkit-mask:url(../assets/brand/mark.svg) center/contain no-repeat;mask:url(../assets/brand/mark.svg) center/contain no-repeat}
.eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--teal-d);margin-bottom:1.1rem}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.05}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h2.big{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:14ch;text-transform:none}
h2 em,h3 em{font-style:italic;color:var(--teal-d)}
.lead{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:58ch;margin-top:2rem;color:#35545a}
.note{font-size:.8rem;color:#6c8387}
section{position:relative}

/* buttons */
.btn{display:inline-block;padding:1rem 2.1rem;background:var(--ink);color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:.76rem;font-weight:400;border:1px solid var(--ink);transition:.4s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn-sm{padding:.7rem 1.4rem}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink) url(../assets/brochure/bg-espresso.webp) center/cover;color:var(--gold);color:#fff;display:grid;place-content:center;justify-items:center;gap:1.2rem}
.loader-mark{width:46px;height:92px;animation:pulse 1.6s ease-in-out infinite}
.loader-word{font-family:var(--serif);font-size:2.2rem;letter-spacing:.2em;text-align:center;line-height:1}
.loader-word small,.brand small{display:block;font-size:.5em;letter-spacing:.35em;margin-top:.3em}
@keyframes pulse{50%{opacity:.35;transform:scale(.96)}}

/* nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.1rem clamp(1.2rem,3vw,3rem);color:#fff;transition:.5s var(--ease)}
#nav.solid{background:rgba(26,18,15,.86);backdrop-filter:blur(14px);padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.8rem;font-family:var(--serif);font-size:1.5rem;letter-spacing:.18em;line-height:1}
.brand .mark{width:16px;height:32px}
#nav nav{display:flex;gap:2rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
#nav nav a{position:relative;padding:.3rem 0}
#nav nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:.4s var(--ease)}
#nav nav a:hover::after{width:100%}
#burger{display:none;width:32px;height:24px;position:relative}
#burger i{position:absolute;left:0;right:0;height:1px;background:#fff;transition:.3s}
#burger i:first-child{top:8px}#burger i:last-child{top:16px}
body.menu #burger i:first-child{transform:translateY(4px) rotate(30deg)}
body.menu #burger i:last-child{transform:translateY(-4px) rotate(-30deg)}

/* hero */
.hero{height:100svh;min-height:600px;color:#fff;overflow:hidden;display:grid;place-items:center;text-align:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,9,.5),rgba(20,12,9,.15) 40%,rgba(20,12,9,.7))}
.hero-content{position:relative;padding:0 1.5rem}
.hero-title{font-size:clamp(4.2rem,15vw,12rem);letter-spacing:.06em;font-weight:300;text-transform:uppercase;line-height:.92}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line:nth-child(2){font-size:.46em;letter-spacing:.42em;margin-top:.15em}
.hero-title .line>span{display:block;transform:translateY(110%)}
.hero-sub{margin-top:2rem;font-size:.82rem;letter-spacing:.3em;text-transform:uppercase}
.hero-cta{margin-top:2.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero .btn{border-color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff}
.hero .btn:hover{background:#fff;color:var(--ink)}
.scroll-cue{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;display:grid;justify-items:center;gap:.6rem}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(#fff,transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* reveal */
.reveal{opacity:0;transform:translateY(34px)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.split .w>span{display:inline-block;transform:translateY(110%)}

/* intro */
.intro{padding:clamp(5rem,12vw,10rem) 0 0;overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:4.5rem;padding-top:2.5rem;border-top:1px solid rgba(26,18,15,.18)}
.stats b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(3rem,6vw,5.5rem);line-height:1;color:var(--teal-d)}
.stats span{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.intro-img{margin-top:6rem;height:min(90vh,780px);overflow:hidden}
.intro-img img{width:100%;height:125%;object-fit:cover;object-position:center 30%}

/* film */
.film{background:var(--ink);color:#fff;overflow:hidden}
.film-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;gap:2.4rem;padding-block:4rem 3rem}
.film-head{padding-inline:clamp(1.5rem,5vw,6rem);display:flex;align-items:end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.film-head .eyebrow{color:var(--gold);width:100%;margin:0}
.film-track{display:flex;gap:1.6rem;padding-inline:clamp(1.5rem,5vw,6rem);width:max-content;will-change:transform}
.clip{position:relative;width:min(62vw,720px);aspect-ratio:16/10;overflow:hidden;background:#000;flex:none}
.clip video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.clip:hover video{transform:scale(1.05)}
.clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.4rem 1.2rem;background:linear-gradient(transparent,rgba(0,0,0,.7));font-family:var(--serif);font-size:1.5rem}
.clip figcaption i{font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.2em;color:var(--gold);margin-right:.9rem}
.film-progress{margin-inline:clamp(1.5rem,5vw,6rem);height:1px;background:rgba(255,255,255,.2)}
.film-progress span{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.film .btn{background:transparent;border-color:var(--gold);color:var(--gold)}
.film .btn:hover{background:var(--gold);color:var(--ink)}

/* residences */
.resi{padding:clamp(5rem,10vw,9rem) 0 clamp(4rem,8vw,7rem)}
.tabs{display:flex;gap:2.2rem;margin-bottom:2rem;flex-wrap:wrap}
.tab{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;padding:.5rem 0;border-bottom:1px solid transparent;opacity:.55;transition:.3s}
.tab.active,.tab:hover{opacity:1;border-color:var(--teal-d)}
.plans{margin-top:5rem}
.plan-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:3rem;align-items:center}
.plan-img img{width:100%;transition:opacity .45s,transform .8s var(--ease)}
.plan-img img.out{opacity:0;transform:scale(.97)}
.plan-info h3{font-size:3rem;margin-bottom:1.5rem}
.spec{list-style:none;margin-bottom:1.5rem}
.spec li{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(26,18,15,.15);font-size:.95rem}
.spec span{opacity:.7}.spec b{font-weight:400;text-align:right}
.slider{position:relative;margin:6rem 0;height:min(82vh,760px);overflow:hidden;background:var(--ink)}
.slides figure{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.slides figure.on{opacity:1}
.slides img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.slides figure.on img{transform:scale(1)}
.slides figcaption{position:absolute;left:clamp(1.5rem,5vw,5rem);bottom:5.5rem;color:#fff;font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,3rem);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.slider-ui{position:absolute;left:clamp(1.5rem,5vw,5rem);bottom:1.8rem;display:flex;align-items:center;gap:1.4rem;color:#fff;font-size:.8rem;letter-spacing:.2em}
.slider-ui button{width:46px;height:46px;border:1px solid rgba(255,255,255,.6);border-radius:50%;transition:.3s}
.slider-ui button:hover{background:#fff;color:var(--ink)}
.floor{display:grid;grid-template-columns:1fr 1.8fr;gap:3rem;align-items:center}
.floor h3{font-size:2.6rem;margin-bottom:1rem}
.floor p{margin-bottom:1rem}
.plan-zoom,.map{position:relative;display:block;width:100%;cursor:zoom-in;background:#fff;overflow:hidden}
.plan-zoom img,.map img{width:100%;transition:transform .8s var(--ease)}
.plan-zoom:hover img,.map:hover img{transform:scale(1.04)}
.plan-zoom span,.map span{position:absolute;right:1rem;bottom:1rem;background:var(--ink);color:#fff;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:.45rem .8rem}

/* commercial */
.comm{background:var(--ink);color:#fff;padding-bottom:0}
.comm-bg{height:80vh;overflow:hidden}
.comm-bg img{width:100%;height:125%;object-fit:cover;opacity:.75}
.comm-copy{position:absolute;top:0;height:80vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(1.5rem,5vw,6rem) 5rem;background:linear-gradient(transparent 30%,var(--ink))}
.comm-copy .eyebrow{color:var(--gold)}.comm-copy .lead{color:#d6e2e4}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding-block:6rem}
.comm-grid figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.comm-grid figcaption{margin-top:.6rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.comm-text h3{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:1.4rem}
.mini-stats{display:flex;gap:3rem;margin:2rem 0}
.mini-stats b{display:block;font-family:var(--serif);font-weight:300;font-size:2.6rem;color:var(--gold);line-height:1}
.mini-stats span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.plan-btns{display:flex;gap:1rem;flex-wrap:wrap}
.comm .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:4px;scrollbar-width:none}
.strip img{height:46vh;width:auto;flex:none;scroll-snap-align:start}

/* amenities */
.amen{padding:clamp(5rem,10vw,9rem) 0 0}
.ba-wrap{margin-top:4.5rem}
.ba{position:relative;aspect-ratio:4/3;max-height:80vh;width:100%;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y;background:#000}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-day-wrap{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;translate:-1px 0}
.ba-handle span{position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.ba em{position:absolute;top:1.2rem;font-style:normal;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);padding:.35rem .8rem}
.ba-l{left:1.2rem}.ba-r{right:1.2rem}
.hint{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:.8rem}
.amen-lists{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;margin-top:6rem}
.amen-lists h3{font-size:2.4rem;margin-bottom:1.4rem}
.amen-lists ol{columns:2;gap:2rem;padding-left:1.6rem}
.amen-lists li{padding:.3rem 0;break-inside:avoid}
.amen-lists li::marker{color:var(--teal-d);font-family:var(--serif)}
.amen-lists dt{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-d);margin-top:1.2rem}
.amen-lists dd{font-family:var(--serif);font-size:1.7rem}
.hscroll{display:flex;gap:1.2rem;overflow-x:auto;padding:6rem clamp(1.5rem,5vw,6rem) 6rem;scrollbar-width:thin;scroll-snap-type:x proximity}
.hscroll figure{flex:none;width:min(70vw,520px);scroll-snap-align:center;overflow:hidden;position:relative}
.hscroll img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1s var(--ease)}
.hscroll figure:hover img{transform:scale(1.06)}
.hscroll figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.2rem 1rem;color:#fff;font-family:var(--serif);font-size:1.5rem;background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* gallery */
.gallery{background:var(--sand);padding:clamp(5rem,9vw,8rem) 0}
.gallery .tabs{margin-top:2.5rem}
.masonry{columns:3 320px;column-gap:10px;padding:0 10px;margin-top:1rem}
.masonry a{display:block;margin-bottom:10px;overflow:hidden;cursor:zoom-in;break-inside:avoid;background:var(--cream)}
.masonry img{width:100%;transition:transform .9s var(--ease),opacity .6s}
.masonry a:hover img{transform:scale(1.06)}
.masonry a.hide{display:none}

/* location */
.loc{padding:clamp(5rem,9vw,8rem) 0}
.loc-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.near{list-style:none;margin:2.2rem 0}
.near li{padding:.65rem 0 .65rem 2rem;border-bottom:1px solid rgba(26,18,15,.12);position:relative}
.near li::before{content:"";position:absolute;left:0;top:1.1rem;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(75,155,179,.6);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(75,155,179,0)}100%{box-shadow:0 0 0 0 rgba(75,155,179,0)}}
.addr b{display:inline-block;margin-right:.5rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-d)}

/* team */
.team{background:var(--ink2);color:#fff;padding:clamp(4rem,8vw,7rem) 0}
.team .eyebrow{color:var(--gold)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem;margin-top:3rem}
.team-grid div{border-top:1px solid rgba(255,255,255,.2);padding-top:1.2rem}
.team-grid span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.team-grid b{display:block;font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.2}
.team-grid em{font-style:normal;opacity:.7;font-size:.9rem}

/* enquire */
.enq{color:#fff;padding:clamp(5rem,10vw,9rem) 0;overflow:hidden}
.enq-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.enq-shade{position:absolute;inset:0;background:rgba(22,14,10,.82)}
.enq .wrap{position:relative}
.enq .eyebrow{color:var(--gold)}
.enq-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}
.phones{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2rem;margin:2.4rem 0;font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem)}
.phones a{border-bottom:1px solid rgba(255,255,255,.25);transition:.3s}
.phones a:hover{color:var(--gold);border-color:var(--gold)}
.form{background:rgba(255,255,255,.08);backdrop-filter:blur(14px);padding:2.4rem;display:grid;gap:1.4rem;border:1px solid rgba(255,255,255,.18)}
.form label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:grid;gap:.4rem}
.form input,.form select{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.5);color:#fff;font:inherit;font-size:1.05rem;padding:.5rem 0;letter-spacing:0;text-transform:none;outline:0}
.form input:focus,.form select:focus{border-color:var(--gold)}
.form select option{color:#000}
.form .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.form .btn:hover{background:transparent;color:var(--gold)}
.form small{opacity:.65;font-size:.75rem}

footer{background:var(--ink);color:#b9cdd0;padding:4rem clamp(1.5rem,5vw,6rem) 2.5rem}
.foot-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem}
.foot-logo{height:90px;width:auto}
.foot-top .mark{width:30px;height:60px;color:#fff}
.legal{font-size:.74rem;line-height:1.7;max-width:110ch;margin-top:1rem;opacity:.75}

/* modals */
.modal{position:fixed;inset:0;z-index:150;background:rgba(12,8,6,.95);display:grid;place-items:center;padding:3rem 1rem}
.modal[hidden]{display:none}
.modal video{width:min(1400px,100%);max-height:86vh;background:#000}
.modal>img{max-width:100%;max-height:88vh;object-fit:contain;background:#fff0}
.close{position:absolute;top:1rem;right:1.4rem;font-size:2.8rem;color:#fff;line-height:1}
.lb-nav{position:absolute;inset:auto 0 1.5rem;display:flex;justify-content:center;gap:1rem}
.lb-nav button{width:48px;height:48px;border:1px solid #fff8;border-radius:50%;color:#fff}

@media (max-width:900px){
  #nav nav,#nav>.btn{display:none}
  #burger{display:block}
  body.menu #nav{background:var(--ink)}
  body.menu #nav nav{display:flex;flex-direction:column;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--ink);padding:2.5rem 1.6rem;gap:1.4rem;font-size:1rem}
  .stats{grid-template-columns:1fr 1fr}
  .plan-grid,.floor,.comm-grid,.loc-grid,.enq-grid,.amen-lists{grid-template-columns:1fr}
  .amen-lists ol{columns:1}
  .clip{width:82vw}
  .film-pin{padding-block:5rem 2rem}
  .phones{grid-template-columns:1fr}
  .comm-bg,.comm-copy{height:70vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.split .w>span,.hero-title .line>span{opacity:1!important;transform:none!important}
}
.film h2 em,.comm h2 em,.enq h2 em{color:var(--gold)}

/* ===== v2 additions ===== */
.rera-tag{position:absolute;left:50%;bottom:5.2rem;translate:-50% 0;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:#fff;opacity:.85;white-space:nowrap}
.rera-tag.dark{position:static;translate:none;color:var(--gold);margin:1.6rem 0 0;font-size:.72rem}
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:1.3rem 0;border-block:1px solid rgba(255,255,255,.1)}
.marquee-in{display:flex;align-items:center;gap:2.6rem;width:max-content;animation:mq 38s linear infinite;font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);font-style:italic;font-weight:300;white-space:nowrap}
.marquee-in .mark{width:14px;height:28px;color:var(--gold);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
.mark.petals{background:none;-webkit-mask:none;mask:none}
.mark.petals svg{width:100%;height:100%;display:block;fill:currentColor}

.types{display:grid;gap:1px;background:rgba(26,18,15,.15);border:1px solid rgba(26,18,15,.15);margin-bottom:1.2rem}
.types .t{background:var(--cream);padding:1.1rem 1.2rem;display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:baseline;opacity:0;transform:translateX(24px)}
.types .t.in{opacity:1;transform:none;transition:.7s var(--ease)}
.types small{grid-column:1/-1;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-d)}
.types b{font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1}
.types b i{font-style:normal;font-size:.9rem;font-family:var(--sans);opacity:.7;margin-left:.3rem}
.types span{font-size:.86rem;text-align:right;opacity:.8}

/* explorer */
.explorer{padding-bottom:6rem}
.ex-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.ex-head h3{font-size:2.4rem}
.explorer .tabs{margin:0}
.ex-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.ex-grid button{position:relative;aspect-ratio:1.25;border:1px solid rgba(255,255,255,.25);display:grid;place-content:center;text-align:center;line-height:1.2;transition:.35s var(--ease);opacity:0;transform:scale(.85);overflow:hidden}
.ex-grid button.in{opacity:1;transform:none}
.ex-grid button small{font-size:.62rem;letter-spacing:.18em;opacity:.7}
.ex-grid button b{font-family:var(--serif);font-weight:400;font-size:1.35rem}
.ex-grid button::before{content:"";position:absolute;inset:auto 0 0 0;height:var(--h,20%);background:var(--gold);opacity:.22;transition:.5s var(--ease);z-index:0}
.ex-grid button>*{position:relative}
.ex-grid button:hover,.ex-grid button.sel{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.ex-grid button:hover::before,.ex-grid button.sel::before{opacity:0}
.ex-read{margin-top:1.2rem;min-height:3.2rem;font-family:var(--serif);font-size:1.7rem;color:var(--gold)}
.ex-read span{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;color:#fff}
.ex-read em{font-style:normal;font-family:var(--sans);font-size:.85rem;color:#fff;opacity:.75;margin-left:.8rem}

/* lifestyle reel */
.life{background:var(--ink);color:#fff}
.life-pin{height:100vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4vw;padding:5rem clamp(1.5rem,5vw,6rem) 3rem;position:relative;overflow:hidden}
.life-pin::before{content:"";position:absolute;right:-8vw;top:50%;width:40vw;height:80vw;translate:0 -50%;background:var(--teal);opacity:.07;-webkit-mask:url(../assets/brand/mark.svg) center/contain no-repeat;mask:url(../assets/brand/mark.svg) center/contain no-repeat}
.life-stage{position:relative;height:min(78vh,720px)}
.lf{position:absolute;inset:0;clip-path:inset(100% 0 0 0);overflow:hidden}
.lf:first-child{clip-path:inset(0)}
.lf img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.life-copy{position:relative}
.life-copy .eyebrow{color:var(--gold)}
.life-lines{position:relative;min-height:15rem}
.ll{position:absolute;inset:0 auto auto 0;font-size:clamp(2.2rem,4.4vw,4rem);opacity:0;transform:translateY(40px);pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ll.on{opacity:1;transform:none}
.ll em{color:var(--gold)}
.life-dots{display:flex;gap:.6rem;margin-top:2rem}
.life-dots i{width:34px;height:2px;background:rgba(255,255,255,.25);transition:.5s}
.life-dots i.on{background:var(--gold);width:64px}

/* amenity story */
.story{margin-top:6rem;display:grid;gap:7rem}
.story .row{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.story .row.rev{grid-template-columns:1fr 1.1fr}
.story .row.rev figure{order:2}
.parallax-fig{overflow:hidden;aspect-ratio:5/4;clip-path:inset(0 0 0 0)}
.parallax-fig img{width:100%;height:118%;object-fit:cover}
.story h3{font-size:clamp(2rem,3.6vw,3.2rem);margin-bottom:1.2rem}

/* brochure rail */
.bro{background:var(--ink);color:#fff;padding:clamp(4rem,8vw,7rem) 0;overflow:hidden}
.bro .eyebrow{color:var(--gold)}
.bro-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.bro-dl{display:flex;gap:1rem;flex-wrap:wrap}
.bro .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.bro .btn:hover{background:transparent;color:var(--gold)}
.bro .btn-ghost{background:transparent;color:#fff;border-color:#fff8}
.bro .btn-ghost:hover{background:#fff;color:var(--ink)}
.bro-rail{display:flex;gap:1.4rem;width:max-content;padding:1rem 0 2rem;animation:rail 90s linear infinite;perspective:1400px}
.bro-rail:hover{animation-play-state:paused}
.bro-rail button{flex:none;width:min(46vw,520px);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transition:transform .7s var(--ease);transform:rotateY(-6deg)}
.bro-rail button:nth-child(even){transform:rotateY(6deg) translateY(24px)}
.bro-rail button:hover{transform:rotateY(0) scale(1.04);z-index:2}
.bro-rail img{width:100%;aspect-ratio:1.414;object-fit:cover}
@keyframes rail{to{transform:translateX(-50%)}}

/* map fx */
.map-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-fx .route{fill:none;stroke:var(--teal-d);stroke-width:1.6;stroke-dasharray:5 6;opacity:.8}
.map-fx .ring{fill:none;stroke:var(--teal-d);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2.6s ease-out infinite}
.map-fx .ring.site{stroke:#e0242d}
@keyframes ring{from{transform:scale(.2);opacity:.9}to{transform:scale(2.4);opacity:0}}

@media (max-width:900px){
  .life-pin{grid-template-columns:1fr;grid-template-rows:46% auto;padding-top:5rem;gap:1.2rem}
  .life-stage{height:100%}
  .life-lines{min-height:11rem}
  .ll{font-size:2rem}
  .story .row,.story .row.rev{grid-template-columns:1fr;gap:1.6rem}
  .story .row.rev figure{order:0}
  .story{gap:4rem}
  .ex-grid{grid-template-columns:repeat(4,1fr)}
  .rera-tag{bottom:4.4rem;font-size:.58rem;letter-spacing:.18em}
  .bro-rail button{width:78vw}
}
#nav nav a{white-space:nowrap}
@media (max-width:1200px){#nav nav{gap:1.1rem;font-size:.68rem;letter-spacing:.12em}}
@media (max-width:1000px) and (min-width:901px){#nav nav a:nth-child(n+6){display:none}}

/* ===== v3 theme: espresso & bronze ===== */
body{background:var(--cream)}
#nav.solid{background:rgba(26,18,15,.9)}
.btn-sm{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-sm:hover{background:transparent;color:var(--gold)}
.hero .btn{background:rgba(201,165,110,.18);border-color:var(--gold);color:#fff}
.hero .btn:hover{background:var(--gold);color:var(--ink)}
.hero-shade{background:linear-gradient(180deg,rgba(20,12,9,.55),rgba(20,12,9,.1) 40%,rgba(20,12,9,.78))}
.eyebrow{color:var(--teal-d)}
.film .eyebrow,.comm .eyebrow,.life .eyebrow,.bro .eyebrow,.team .eyebrow,.enq .eyebrow{color:var(--gold)}
.marquee,.film,.comm,.life,.team,.bro,footer{background-color:var(--ink);background-image:url(../assets/brochure/bg-espresso.webp);background-size:cover;background-position:center}
.team{background-image:none;background-color:var(--ink2)}
.film .btn,.hero-cta .btn-ghost{border-color:var(--gold);color:var(--gold)}
.tab.active,.tab:hover{border-color:var(--gold)}
.explorer .tab.active,.explorer .tab:hover,.film .tab.active{border-color:var(--gold)}
.form .btn,.bro .btn,.film .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.film .btn{background:transparent;color:var(--gold)}
.form .btn:hover,.bro .btn:hover{background:transparent;color:var(--gold)}
.enq-shade{background:linear-gradient(rgba(22,14,10,.86),rgba(22,14,10,.9))}
.stats b,.near li::before{color:var(--teal-d)}
.near li::before{background:var(--gold);box-shadow:0 0 0 0 rgba(201,165,110,.6)}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(201,165,110,0)}100%{box-shadow:0 0 0 0 rgba(201,165,110,0)}}
.types small,.addr b,.amen-lists dt{color:var(--teal-d)}
.amen-lists li::marker{color:var(--gold)}
.gallery{background:var(--sand)}
.map-fx .route{stroke:#8a6a3b}
.map-fx .ring{stroke:#8a6a3b}
.life-pin::before{background:var(--gold);opacity:.06}
.slider-ui button:hover,.hscroll+.x{background:var(--gold);color:var(--ink)}
.ex-grid button::before{background:var(--gold)}
.team-grid span,.mini-stats b,.ex-read{color:var(--gold)}

/* brochure editorial */
.bro{padding:clamp(5rem,10vw,9rem) 0 0;overflow:hidden}
.bro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:5vw;align-items:start}
.bro-side{position:sticky;top:20vh;padding-bottom:4rem}
.bro-dl{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}
.bro .lead{color:#d9ccbd}
.bro .btn-ghost{background:transparent;color:#fff;border-color:#fff8}
.bro .btn-ghost:hover{background:#fff;color:var(--ink)}
.bro-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;padding-bottom:6rem}
.bro-cols .col{display:grid;gap:1.2rem;align-content:start}
.bro-cols .col:nth-child(2){margin-top:5rem}
.tile{position:relative;overflow:hidden;background:#000}
.t-tall{aspect-ratio:3/4}.t-sq{aspect-ratio:1}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s;filter:saturate(.92)}
.tile:hover img{transform:scale(1.07);filter:none}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem 1rem;font-family:var(--serif);font-size:1.35rem;color:#fff;background:linear-gradient(transparent,rgba(20,12,9,.8));transform:translateY(40%);opacity:0;transition:.6s var(--ease)}
.tile:hover figcaption{transform:none;opacity:1}
.bro-quote{display:grid;justify-items:center;text-align:center;gap:1.4rem;padding:5rem 0 6rem;border-top:1px solid rgba(201,165,110,.25)}
.bro-quote .mark{width:34px;height:68px;color:var(--gold)}
.bro-quote blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5vw,4.2rem);line-height:1.1;max-width:18ch}
@media (max-width:900px){
  .bro-grid{grid-template-columns:1fr}
  .bro-side{position:static;padding-bottom:1rem}
  .bro-cols .col:nth-child(2){margin-top:2.5rem}
  .tile figcaption{opacity:1;transform:none;font-size:1.05rem}
}
.hero-cta .btn-ghost{color:#fff;border-color:#fff9;background:transparent}
.hero-cta .btn-ghost:hover{background:#fff;color:var(--ink)}
.enq .addr b,.loc-dark .addr b{color:var(--gold)}
.enq .addr a{border-bottom:1px solid var(--gold);color:var(--gold)}
.hero-shade{background:linear-gradient(180deg,rgba(20,12,9,.6),rgba(20,12,9,.3) 45%,rgba(20,12,9,.82))}
.hero-title{text-shadow:0 4px 40px rgba(20,12,9,.45)}

/* hero sound toggle */
.sound{position:absolute;right:clamp(1.2rem,3vw,3rem);bottom:1.6rem;z-index:3;display:flex;align-items:center;gap:.6rem;padding:.55rem .95rem .55rem .7rem;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;background:rgba(20,12,9,.35);backdrop-filter:blur(8px);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;transition:.35s var(--ease)}
.sound:hover{border-color:var(--gold);color:var(--gold)}
.sound svg{width:18px;height:18px;fill:currentColor}
.sound .i-on,.sound.on .i-off{display:none}
.sound.on .i-on{display:block}
.sound .bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound .bars i{width:2px;height:3px;background:currentColor;transition:height .3s}
.sound.on .bars i{animation:eq 1s ease-in-out infinite}
.sound.on .bars i:nth-child(2){animation-delay:-.4s}.sound.on .bars i:nth-child(3){animation-delay:-.2s}.sound.on .bars i:nth-child(4){animation-delay:-.7s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.sound.on{border-color:var(--gold);color:var(--gold)}
@media (max-width:900px){.sound .lbl{display:none}.sound{bottom:1.2rem}}

/* hero "presents" line — legible over bright video */
.presents{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;margin-bottom:1.4rem;color:#fff;text-shadow:0 1px 2px rgba(20,12,9,.6),0 2px 18px rgba(20,12,9,.55)}
.presents span{position:relative;font-size:clamp(.8rem,1.1vw,.95rem);font-weight:500;letter-spacing:.34em;text-transform:uppercase;padding:0 3.2rem}
.presents span::before,.presents span::after{content:"";position:absolute;top:50%;width:2.2rem;height:1px;background:var(--gold);box-shadow:none}
.presents span::before{left:0}.presents span::after{right:0}
.presents em{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:.06em;color:var(--gold)}
.hero-content::before{content:"";position:absolute;inset:-12% -18%;z-index:-1;background:radial-gradient(ellipse at center,rgba(20,12,9,.45),rgba(20,12,9,0) 68%);pointer-events:none}
@media (max-width:600px){.presents span{padding:0 2.2rem;letter-spacing:.24em}.presents span::before,.presents span::after{width:1.4rem}}
.hero-content{z-index:1}
.presents em{color:#ecd3a3;font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:400}

/* RERA line sits in the hero flow, just below the buttons */
.rera-tag.hero-rera{position:static;translate:none;margin-top:1.6rem;opacity:.9;text-shadow:0 1px 10px rgba(20,12,9,.6)}
@media (max-width:900px){.rera-tag.hero-rera{margin-top:1.2rem;white-space:normal}}

/* ticker: one steady speed */
.marquee-in{animation-duration:38s!important}

/* ===== ticker strip v2: engraved caps, solid + outline words, star separators ===== */
.marquee{position:relative;padding:1.5rem 0;background:linear-gradient(180deg,#140d0a,#22170f 50%,#140d0a);border:0}
.marquee::before,.marquee::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);opacity:.55}
.marquee::before{top:7px}.marquee::after{bottom:7px}
.marquee-in{gap:3.2rem;font-family:'Marcellus',var(--serif);font-style:normal;font-weight:400;font-size:clamp(1.15rem,2.1vw,1.85rem);letter-spacing:.32em;text-transform:uppercase}
.marquee-in span{color:#efe3cf}
.marquee-in span:nth-of-type(even){color:transparent;-webkit-text-stroke:1px var(--gold);text-stroke:1px var(--gold)}
.marquee-in .mark{width:12px;height:12px;background:var(--gold);-webkit-mask:none;mask:none;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.marquee:hover .marquee-in{animation-play-state:paused}
@media (max-width:900px){.marquee{padding:1.15rem 0}.marquee-in{gap:2rem;letter-spacing:.24em}}

/* hero: keep the "presents" line clear of the fixed nav */
.hero{padding-top:clamp(5.5rem,11vh,8rem);padding-bottom:clamp(4.5rem,9vh,6rem);box-sizing:border-box}
.presents{margin-bottom:1.8rem}

/* active nav item (scroll spy) */
#nav nav a.active{color:var(--gold)}
#nav nav a.active::after{width:100%;background:var(--gold)}
#nav > .btn.active{background:transparent;color:var(--gold)}
@media (max-width:900px){body.menu #nav nav a.active{padding-left:.8rem;border-left:2px solid var(--gold)}}
/* hero fits between the nav and the bottom controls on any screen height */
.hero{padding-top:7.5rem;padding-bottom:5.5rem}
.hero-title{font-size:min(15vw,19vh,12rem)}
.hero-sub{margin-top:min(2rem,3vh)}
.hero-cta{margin-top:min(2.4rem,4vh)}
.rera-tag.hero-rera{margin-top:min(1.6rem,2.6vh)}
@media (max-height:640px){.presents{margin-bottom:1rem}.presents em{font-size:1.1rem}}
.hero{padding-bottom:7rem}

/* "by Al Araaf" on the opening curtain */
.loader-by{display:grid;justify-items:center;gap:.7rem;margin-top:1.4rem;opacity:0;animation:byIn 1.2s var(--ease) .9s forwards}
.loader-by em{font-family:var(--serif);font-style:italic;font-size:1.15rem;letter-spacing:.08em;color:#ecd3a3}
.loader-by img{width:74px;height:auto;opacity:.95}
@keyframes byIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* developer logo above "Al Araaf Infra Pvt. Ltd. presents" */
.presents-logo{width:clamp(44px,4.4vw,60px);height:auto;margin-bottom:.55rem;filter:drop-shadow(0 2px 10px rgba(20,12,9,.55))}
@media (max-height:640px){.presents-logo{width:38px;margin-bottom:.3rem}}

/* ===== featured clubhouse ===== */
.club{margin-top:4.5rem}
.club-hero{position:relative;height:min(82vh,760px);overflow:hidden;background:var(--ink);box-shadow:0 40px 80px -40px rgba(26,18,15,.55)}
.club-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:opacity 1.6s ease}
.club-day{opacity:0}
.club-hero.is-day .club-day{opacity:1}
.club-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,9,.82) 0%,rgba(20,12,9,.45) 38%,rgba(20,12,9,0) 65%),linear-gradient(0deg,rgba(20,12,9,.55),transparent 40%);pointer-events:none}
.club-hero::before{content:"";position:absolute;inset:14px;border:1px solid rgba(201,165,110,.55);z-index:2;pointer-events:none}
.club-badge{position:absolute;top:2.2rem;right:2.2rem;z-index:3;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.55rem 1rem}
.club-cap{position:absolute;left:clamp(1.6rem,4.5vw,4.5rem);bottom:clamp(2rem,6vh,4.5rem);z-index:3;max-width:min(34rem,80%);color:#fff}
.club-cap .eyebrow{color:var(--gold)}
.club-cap h3{font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.02;margin-bottom:1.1rem}
.club-cap p:not(.eyebrow){color:#e6dacb;font-size:clamp(.95rem,1.15vw,1.08rem)}
.club-floors{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.cf{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.cf img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cf:hover img{transform:scale(1.08)}
.cf figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .9rem;color:#fff;font-family:var(--serif);font-size:1.3rem;line-height:1.15;background:linear-gradient(transparent,rgba(20,12,9,.85))}
.cf small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.25rem}
@media (max-width:900px){
  .club-hero{height:72vh}
  .club-hero::after{background:linear-gradient(0deg,rgba(20,12,9,.9) 0%,rgba(20,12,9,.5) 50%,rgba(20,12,9,.1))}
  .club-badge{top:1.6rem;right:1.6rem}
  .club-floors{grid-template-columns:1fr 1fr}
}

/* amenity viewer: single-image tabs (no night render) */
.ba.single{cursor:default}
.ba.single .ba-handle,.ba.single em{display:none}
.ba.single.kb img{animation:baKB 9s ease-out both}
@keyframes baKB{from{transform:scale(1.14)}to{transform:scale(1)}}
#baTabs{gap:1.2rem 2rem}
@media (max-width:900px){#baTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem}#baTabs .tab{white-space:nowrap;flex:none}}

/* story tile that shows the whole picture (no crop, no parallax shift) */
.parallax-fig.full{aspect-ratio:auto}
.parallax-fig.full img{height:auto;object-fit:contain}
/* Retail & Offices intro: keep the heading legible over the bright frontage photo */
.comm-bg,.comm-copy{height:max(80vh,560px)}
.comm-copy{justify-content:center;padding-bottom:0;background:
  linear-gradient(90deg,rgba(20,12,9,.92) 0%,rgba(20,12,9,.78) 34%,rgba(20,12,9,.35) 60%,rgba(20,12,9,0) 80%),
  linear-gradient(0deg,var(--ink) 0%,rgba(20,12,9,0) 30%)}
.comm-copy h2.big{max-width:17ch;font-size:clamp(2.4rem,5vw,4.6rem);text-shadow:0 2px 24px rgba(20,12,9,.6)}
.comm-copy .eyebrow{text-shadow:0 1px 10px rgba(20,12,9,.7)}
.comm-copy .lead{max-width:44ch;color:#eee3d3;text-shadow:0 1px 12px rgba(20,12,9,.7)}
@media (max-width:900px){
  .comm-copy{justify-content:flex-end;padding-bottom:3rem;background:linear-gradient(0deg,rgba(20,12,9,.95) 0%,rgba(20,12,9,.75) 55%,rgba(20,12,9,.25) 100%)}
}
/* RERA line: exact "MahaRERA" casing, crisp and legible over the moving video */
.rera-tag{text-transform:none}
.rera-tag.hero-rera{display:inline-block;font-size:.8rem;font-weight:400;letter-spacing:.06em;line-height:1.4;color:#f3eadc;opacity:1;
  padding:.38rem .95rem;border:1px solid rgba(201,165,110,.45);border-radius:999px;background:rgba(20,12,9,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none;-webkit-font-smoothing:antialiased}
.rera-tag.hero-rera b{font-weight:500;color:var(--gold);letter-spacing:.08em}
.rera-tag.dark{font-size:.8rem;letter-spacing:.06em}
@media (max-width:600px){.rera-tag.hero-rera{font-size:.72rem;padding:.32rem .8rem}}