: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}}

/* sound held back by the browser: invite a tap */
.sound.pending{border-color:var(--gold);color:#fff;background:rgba(201,165,110,.22);animation:soundPulse 2s ease-in-out infinite}
.sound.pending .i-off{display:none}.sound.pending .i-on{display:block}
.sound.pending .lbl{display:inline!important}
@keyframes soundPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,165,110,.55)}50%{box-shadow:0 0 0 10px rgba(201,165,110,0)}}

/* film strip: normal page scroll; the strip glides sideways on its own */
.film-pin{height:auto;padding-block:clamp(4.5rem,8vw,7rem) clamp(3.5rem,6vw,5rem)}
.film-track{width:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;will-change:auto}
.film-track::-webkit-scrollbar{display:none}
.film-track.dragging{cursor:grabbing;user-select:none}
.film-track.dragging video{pointer-events:none}
.film-progress span{transition:none}

/* ===== Gallery: "A Glimpse of Pearl Avenue" ===== */
.gallery{background:var(--sand);padding:clamp(5rem,9vw,8rem) 0}
.glimpse-head{text-align:center;display:grid;justify-items:center;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.glimpse-head h2{font-size:clamp(2.2rem,4.4vw,3.6rem);color:var(--ink)}
.glimpse-head h2 em{font-style:italic;color:#a8834f}
.glimpse-rule{display:block;width:56px;height:1px;background:var(--gold);margin-top:1.3rem}
.glimpse{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g-item{position:relative;display:block;overflow:hidden;background:var(--ink);aspect-ratio:16/10;cursor:zoom-in}
.g-item.g-feature{grid-column:1 / -1;aspect-ratio:21/9}
.g-item.g-extra{display:none}
.glimpse.show-all .g-item.g-extra{display:block}
.g-item img{width:100%;height:100%;object-fit:cover;object-position:center 45%;transition:transform 1.2s var(--ease),filter .6s}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,12,9,.65),rgba(20,12,9,.05) 55%);opacity:0;transition:opacity .5s var(--ease)}
.g-zoom{position:absolute;left:50%;top:50%;z-index:2;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1px solid rgba(255,255,255,.75);display:grid;place-items:center;color:#fff;background:rgba(20,12,9,.25);backdrop-filter:blur(4px);opacity:0;transform:scale(.8);transition:.5s var(--ease)}
.g-zoom svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.g-cap{position:absolute;left:1.2rem;bottom:1rem;z-index:2;color:#fff;font-family:var(--serif);font-size:1.25rem;letter-spacing:.02em;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.05)}
.g-item:hover::after,.g-item:focus-visible::after,.g-item:hover .g-zoom,.g-item:focus-visible .g-zoom,.g-item:hover .g-cap,.g-item:focus-visible .g-cap{opacity:1;transform:none}
.glimpse-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem)}
.glimpse-actions .btn{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.glimpse-actions .btn:hover{background:transparent;color:var(--ink)}
.glimpse-actions .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(26,18,15,.5)}
.glimpse-actions .btn-ghost:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
@media (hover:none){.g-cap{opacity:1;transform:none;font-size:1.05rem}.g-item::after{opacity:.8}}
@media (max-width:700px){.glimpse{grid-template-columns:1fr;gap:10px}.g-item.g-feature{aspect-ratio:16/10}}

/* ===== Key Highlights (Godrej-style: framed photo + numbered list on a dark band) ===== */
.intro{padding-bottom:clamp(4rem,8vw,6rem)}
.hl{background:var(--ink) url(../assets/brochure/bg-espresso.webp) center/cover;color:#fff;padding:clamp(5rem,9vw,8rem) 0}
.hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.hl-media{position:relative;margin:0 18px 18px 0}
.hl-media::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);pointer-events:none}
.hl-media img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 35%;display:block;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hl-eyebrow{display:flex;align-items:center;gap:.8rem;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.hl-eyebrow i{width:18px;height:18px;border-radius:50%;background:rgba(201,165,110,.25);display:grid;place-items:center;flex:none}
.hl-eyebrow i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.hl-copy h2{font-size:clamp(2.2rem,4.2vw,3.6rem);color:#fff;margin-bottom:1.1rem}
.hl-copy h2 em{font-style:normal;color:var(--gold)}
.hl-lead{color:#d9ccbd;max-width:46ch;margin-bottom:1.6rem}
.hl-list{list-style:none;border-top:1px solid rgba(255,255,255,.14);margin-bottom:2.2rem}
.hl-list li{display:grid;grid-template-columns:3.2rem 1fr;align-items:baseline;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(.98rem,1.15vw,1.08rem);color:#f3eadc;transition:padding-left .4s var(--ease),color .4s}
.hl-list li span{font-family:var(--serif);font-size:1.15rem;color:var(--gold)}
.hl-list li:hover{padding-left:.5rem;color:#fff}
.hl-btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hl-btn:hover{background:transparent;color:var(--gold)}
@media (max-width:900px){
  .hl-grid{grid-template-columns:1fr}
  .hl-media img{aspect-ratio:4/3}
}

/* brochure section now ends with the photo columns */
.bro{padding-bottom:clamp(3rem,6vw,5rem)}
.bro-cols{padding-bottom:0}

/* Residences: layout types instead of unit numbers & areas */
.types .t{grid-template-columns:1fr}
.t-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.t-chips span{font-family:var(--serif);font-size:1.35rem;padding:.25rem 1.1rem;border:1px solid rgba(26,18,15,.25);border-radius:999px;color:var(--ink)}
.t-rooms ul{list-style:none;margin-top:.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.2rem}
.t-rooms li{position:relative;padding-left:1rem;font-size:.95rem;text-align:left}
.t-rooms li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (max-width:600px){.t-rooms ul{grid-template-columns:1fr}}

/* ===== locked typical floor plan ===== */
.plan-gate{position:relative;display:block;width:100%;overflow:hidden;background:#fff;cursor:pointer}
.plan-gate img{width:100%;display:block;transition:filter .6s,transform .8s var(--ease)}
.gate-over{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:.55rem;padding:1.5rem;background:radial-gradient(ellipse at center,rgba(243,239,235,.85),rgba(243,239,235,.55))}
.gate-lock{width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;margin-bottom:.3rem}
.gate-lock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.gate-title{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--ink)}
.gate-sub{font-size:.92rem;color:#5b4a3c;max-width:30ch}
.gate-over .btn{margin-top:.6rem;background:var(--ink);border-color:var(--ink);color:var(--gold)}
.gate-over .btn:hover{background:transparent;color:var(--ink)}
.gate-zoom{display:none;position:absolute;right:1rem;bottom:1rem;background:var(--ink);color:#fff;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:.45rem .8rem}
.plan-gate.open{cursor:zoom-in}
.plan-gate.open .gate-over{display:none}
.plan-gate.open .gate-zoom{display:block}
.plan-gate.open:hover img{transform:scale(1.03)}

/* lead form */
.lead-modal{place-items:center}
.lead-card{position:relative;width:min(440px,100%);background:var(--cream);color:var(--ink);padding:2.2rem 2rem 2rem;display:grid;gap:1rem;max-height:92vh;overflow:auto;border-top:3px solid var(--gold)}
.lead-card .close{color:var(--ink);top:.4rem;right:.8rem;font-size:2.2rem}
.lead-card .eyebrow{margin:0}
.lead-card h3{font-size:2rem}
.lead-sub{font-size:.9rem;color:#5b4a3c;margin-top:-.4rem}
.lead-card label{display:grid;gap:.35rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#5b4a3c}
.lead-card label small{text-transform:none;letter-spacing:0}
.lead-card input,.lead-card select{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;border:1px solid rgba(26,18,15,.2);padding:.7rem .8rem;outline:0}
.lead-card input:focus,.lead-card select:focus{border-color:var(--gold)}
.lead-consent{grid-template-columns:auto 1fr !important;align-items:start;text-transform:none !important;letter-spacing:0 !important;font-size:.85rem !important}
.lead-consent input{width:18px;height:18px;margin-top:.15rem;padding:0}
.lead-err{color:#a12d2d;font-size:.88rem;min-height:1.2em;margin:-.3rem 0}
.lead-card .btn{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.lead-card .btn:hover{background:transparent;color:var(--ink)}

/* gallery: smaller, uniform 3-column tiles */
.glimpse{grid-template-columns:repeat(3,1fr);gap:12px;max-width:1080px;margin-inline:auto}
.g-item,.g-item.g-feature{grid-column:auto;aspect-ratio:4/3}
.g-zoom{width:46px;height:46px;margin:-23px 0 0 -23px}
.g-zoom svg{width:20px;height:20px}
.g-cap{font-size:1.05rem;left:.9rem;bottom:.75rem}
@media (max-width:1000px){.glimpse{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.glimpse{grid-template-columns:1fr}}

/* locked commercial plan buttons */
.plan-btns .btn .lk{display:none;width:15px;height:15px;margin:-3px .55rem 0 0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.plan-btns .btn.gated .lk{display:inline-block}

/* brochure download buttons */
.btn .dl{width:15px;height:15px;margin:-3px .55rem 0 0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-dl{font:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;padding:.3rem 0;position:relative;white-space:nowrap}
.nav-dl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:.4s var(--ease)}
.nav-dl:hover::after{width:100%}
.enq-dl{margin-top:1.4rem;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.enq-dl:hover{background:transparent;color:var(--gold)}
@media (max-width:900px){body.menu #nav nav .nav-dl{text-align:left;font-size:1rem}}

/* Retail & Offices photo (brochure p.10) and the portrait entrance tile (p.5) */
.comm-bg img{object-position:center 40%}
.g-item img[src*="entrance-lower-ground"]{object-position:center 72%}

/* Retail & Offices photo: show the street-level shops (bottom of the render) */
.comm-bg img{height:100%;object-position:center bottom;opacity:.9}
@media (min-aspect-ratio:16/9){.comm-bg,.comm-copy{height:max(86vh,600px)}}

/* Retail & Offices photo strip glides on its own */
.strip{scroll-snap-type:none;cursor:grab;-webkit-overflow-scrolling:touch}
.strip img{scroll-snap-align:none;user-select:none}
.strip.dragging{cursor:grabbing}
.strip::-webkit-scrollbar{display:none}
.strip img{aspect-ratio:16/9;object-fit:cover}   /* fixed width before each photo loads, so the loop never jumps */

/* nav: "A project by Al Araaf" under the Pearl Avenue logo */
.brand-wrap{display:grid;gap:.35rem;justify-items:start}
.brand-by{display:flex;align-items:center;gap:.5rem;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:opacity .4s,max-height .4s;max-height:40px;overflow:hidden}
.brand-by img{height:26px;width:auto;opacity:.95}
.brand-by:hover{color:var(--gold)}
#nav.solid .brand-by{max-height:0;opacity:0}      /* compact bar once scrolled */
@media (max-width:600px){.brand-by{font-size:.5rem}.brand-by img{height:22px}}

/* footer: MahaRERA QR code */
.foot-top{flex-wrap:wrap;gap:2rem}
.rera-qr{display:flex;align-items:center;gap:1.1rem;color:#d9ccbd}
.rera-qr img{width:120px;height:120px;background:#fff;padding:6px;border-radius:4px;image-rendering:pixelated}
.rera-qr span{display:grid;gap:.2rem;font-size:1rem;letter-spacing:.04em;color:#fff}
.rera-qr b{font-weight:400;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.rera-qr small{font-size:.72rem;letter-spacing:0;color:#b9a994;max-width:24ch;line-height:1.4}
.rera-qr:hover span{color:var(--gold)}
.brand-by{max-height:60px;gap:.6rem;font-size:.58rem}
.brand-by img{height:40px}
@media (max-width:600px){.brand-by img{height:32px}}

/* enquiry form: Google Form submission + thank-you state */
.form label small{text-transform:none;letter-spacing:0;opacity:.7}
.enq-consent{grid-template-columns:auto 1fr !important;align-items:start;text-transform:none !important;letter-spacing:0 !important;font-size:.85rem !important;opacity:.85}
.enq-consent input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--gold)}
.form .lead-err{color:#f0a9a0}
.form.sent > :not(.enq-thanks){display:none}
.enq-thanks{display:grid;gap:.6rem;outline:0}
.enq-thanks .thanks-title{font-family:var(--serif);font-size:2.2rem;color:var(--gold)}

/* Location: site QR for Google Maps directions */
.loc-qr{display:inline-flex;align-items:center;gap:1.1rem;margin-top:1.6rem;padding:.9rem 1.2rem .9rem .9rem;border:1px solid rgba(26,18,15,.15);background:#fff;transition:border-color .3s,box-shadow .3s}
.loc-qr:hover{border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(26,18,15,.4)}
.loc-qr img{width:112px;height:112px;image-rendering:pixelated}
.loc-qr span{display:grid;gap:.25rem;font-size:.95rem;color:var(--ink)}
.loc-qr b{font-weight:500;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-d)}
.loc-qr em{font-style:normal;font-size:.8rem;color:#8a6a3b}
/* anything marked hidden stays hidden, even if a rule gives it a display value */
[hidden]{display:none !important}

/* "A project by Al Araaf Infra" — always visible, logo + builder name */
.brand-by,#nav.solid .brand-by{max-height:none;opacity:1;overflow:visible;display:flex;align-items:center;gap:.55rem;color:#fff}
.brand-by .by-label{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);padding-right:.55rem;border-right:1px solid rgba(201,165,110,.5);line-height:1.3}
.brand-by img{height:44px;width:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.brand-by .by-name{display:grid;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.15;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.brand-by .by-name small{font-size:.58rem;font-weight:400;letter-spacing:.2em;color:var(--gold)}
.brand-by:hover .by-name{color:var(--gold)}
#nav.solid .brand-by img{height:36px}
#nav.solid{padding-block:.6rem}
@media (max-width:600px){
  .brand-by{gap:.45rem}
  .brand-by .by-label{font-size:.5rem;padding-right:.45rem;max-width:4.5em}
  .brand-by img,#nav.solid .brand-by img{height:34px}
  .brand-by .by-name{font-size:.7rem}
}

/* brochure request: thank-you + WhatsApp */
.lead-done{text-align:left}
.lead-done h3 span{color:#a8834f}
.wa-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:.6rem;background:#1f8f4e !important;border-color:#1f8f4e !important;color:#fff !important}
.wa-btn svg{width:20px;height:20px;fill:currentColor}
.wa-btn:hover{background:#17733e !important;color:#fff !important}
.done-note{font-size:.8rem;color:#5b4a3c;margin-top:-.4rem}
/* "A project by Al Araaf Infra": shown on the hero, tucked away once you scroll for a slimmer bar */
.brand-by{transition:max-height .45s var(--ease),opacity .3s,margin .45s var(--ease)}
#nav.solid .brand-by{max-height:0;opacity:0;overflow:hidden;margin-top:-.35rem;pointer-events:none}

/* 3D model links */
.enq-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.enq-actions .enq-dl{margin-top:0}
.enq-3d{color:#fff;border-color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:.55rem}
.enq-3d svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.enq-3d:hover{background:#fff;color:var(--ink);border-color:#fff}
.link-3d{font:inherit;color:var(--gold);letter-spacing:.06em;padding:0;border-bottom:1px solid rgba(201,165,110,.5)}
.link-3d:hover{color:#fff;border-color:#fff}

/* ===== mobile fixes ===== */
/* stop Android Chrome "font boosting" from enlarging some text and breaking layouts */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (max-width:600px){
  /* "A project by" on its own line, logo + builder name below it — nothing wraps or overlaps */
  .brand-by{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.5rem;row-gap:.25rem;align-items:center}
  .brand-by .by-label{grid-column:1 / -1;max-width:none;white-space:nowrap;border-right:0;padding-right:0;font-size:.52rem;letter-spacing:.22em}
  .brand-by img,#nav.solid .brand-by img{height:30px}
  .brand-by .by-name{font-size:.66rem;letter-spacing:.12em;white-space:nowrap}
  .brand-by .by-name small{font-size:.52rem}
  .brand{font-size:1.3rem}
}

@media (max-width:900px){
  /* open menu: full-screen panel. The bar's blur effect was clipping the panel to the bar's height. */
  body.menu{overflow:hidden}
  body.menu #nav{bottom:0;align-items:flex-start;background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  body.menu #nav nav{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;gap:1.5rem;padding:9rem 1.8rem 2rem;background:var(--ink);overflow-y:auto;font-size:1.05rem}
  body.menu #nav .brand-by{max-height:none;opacity:1}
}
@media (max-width:700px){
  /* locked floor plan: give the unlock panel enough room (the plan image is short on phones) */
  .plan-gate:not(.open){min-height:330px}
  .plan-gate:not(.open) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .gate-over{padding:1.2rem 1rem}
}
.plan-btns{margin-top:1.8rem}
@media (max-width:900px){
  /* Retail & Offices: photo on top (shopfronts fully visible), text underneath */
  .comm-bg{height:auto}
  .comm-bg img{height:auto;aspect-ratio:4/3;object-position:center bottom;opacity:1}
  .comm-copy{position:static;height:auto;background:none;padding:2.4rem 1.5rem 0;justify-content:flex-start}
}
@media (max-width:560px){
  /* gallery: compact 2-column tiles on phones */
  .glimpse{grid-template-columns:1fr 1fr;gap:8px}
  .g-item,.g-item.g-feature{aspect-ratio:1}
  .g-cap{font-size:.85rem;left:.6rem;bottom:.5rem;right:.6rem;line-height:1.2}
  .g-zoom{display:none}
}
@media (max-width:560px){.glimpse .g-item:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:2/1}}
@media (max-width:600px){.lead-card{padding:1.8rem 1.3rem 1.5rem;gap:.8rem}.lead-card h3{font-size:1.7rem}}

/* Nova Media Works branding credit */
.nova-credit{display:flex;flex-direction:column;align-items:center;gap:.55rem;background:#fff;padding:.9rem 1.3rem 1rem;border-radius:6px;border-top:3px solid var(--gold);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);transition:transform .4s var(--ease),box-shadow .4s}
.nova-credit:hover{transform:translateY(-3px);box-shadow:0 24px 48px -22px rgba(0,0,0,.7)}
.nova-credit span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#6b5a48}
.nova-credit img{width:170px;height:auto}

/* phones: "A project by Al Araaf Infra" on the same row as the Pearl Avenue logo */
@media (max-width:600px){
  .brand-wrap{display:flex;align-items:center;gap:.7rem}
  .brand{font-size:1.15rem;gap:.55rem}
  .brand .mark{width:13px;height:26px}
  .brand-by{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.4rem;row-gap:.15rem;align-items:center;padding-left:.7rem;border-left:1px solid rgba(201,165,110,.5)}
  .brand-by .by-label{grid-column:1 / -1;font-size:.46rem;letter-spacing:.2em}
  .brand-by img,#nav.solid .brand-by img{height:26px}
  .brand-by .by-name{font-size:.58rem;letter-spacing:.1em}
  .brand-by .by-name small{font-size:.46rem;letter-spacing:.16em}
  #nav.solid .brand-by{max-height:none;opacity:1;margin-top:0;pointer-events:auto}   /* same row, so no need to hide it on scroll */
  .nova-credit img{width:150px}
}
@media (max-width:600px){#nav .brand-by,#nav.solid .brand-by{overflow:visible;max-height:none;white-space:nowrap}}