/* NONA — project pages shared styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bk:#0A0A0A;--wh:#F7F7F2;--gd:#D4B36A;--gy:#9a9a92;--dk:#111;--mg:#555;
--sans:'Outfit',sans-serif;--serif:'Cormorant Garamond',serif}
html{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--gd) var(--bk);scroll-behavior:smooth}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bk)}::-webkit-scrollbar-thumb{background:var(--gd)}
body{background:var(--bk);color:var(--wh);font-family:var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased;animation:pageIn 1s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{display:block}

/* NAV */
nav{position:fixed;top:0;width:100%;padding:1.5rem 4rem;z-index:900;display:flex;justify-content:space-between;align-items:center;transition:all .5s;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);background:rgba(10,10,10,.5)}
nav.sc{padding:1rem 4rem;background:rgba(10,10,10,.94)}
.wordmark{font-family:var(--sans);font-weight:300;font-size:1.25rem;letter-spacing:.55em;color:var(--wh);text-decoration:none;text-transform:uppercase;transition:color .3s}
.wordmark:hover{color:var(--gd)}
.brandlink{display:inline-flex;align-items:center}
.brandmark{height:26px;width:auto;transition:opacity .3s,transform .3s}
.brandlink:hover .brandmark{opacity:.82;transform:scale(1.03)}
nav.sc .brandmark{height:22px}
.nav-right{display:flex;align-items:center;gap:2.4rem}
.nav-right a{font-family:var(--sans);font-weight:400;font-size:.82rem;letter-spacing:.2em;color:rgba(247,247,242,.8);text-decoration:none;text-transform:uppercase;transition:color .3s;position:relative}
.nav-right a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--gd);transition:width .4s cubic-bezier(.4,0,.2,1)}
.nav-right a:hover{color:var(--gd)}.nav-right a:hover::after{width:100%}
.nav-count{font-family:var(--sans);font-weight:300;font-size:.8rem;letter-spacing:.3em;color:var(--gd)}

/* REVEAL */
.rv{opacity:0;transform:translateY(70px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}.rv.v{opacity:1;transform:none}
.rl{opacity:0;transform:translateX(-80px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}.rl.v{opacity:1;transform:none}
.rr{opacity:0;transform:translateX(80px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}.rr.v{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* SLIDE-OVER STACKING — each panel lifts over the previous as you scroll */
.stack{position:relative;z-index:1}
.panel{position:relative;background:var(--bk)}
.panel.lift{border-radius:0;box-shadow:0 -40px 80px rgba(0,0,0,.55)}

/* HERO */
.hero{height:100vh;height:100svh;position:relative;overflow:hidden;background:var(--bk);display:flex;align-items:flex-end;position:sticky;top:0;z-index:0}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero img.bg{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero .backdrop{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(50px) brightness(.32) saturate(.9);z-index:0}
.hero.tall video.bg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:auto;height:100%;max-width:none;object-fit:contain;z-index:1;box-shadow:0 0 120px rgba(0,0,0,.6)}
@media (max-aspect-ratio:4/5){.hero.tall video.bg{left:0;top:0;transform:none;width:100%;height:100%;object-fit:cover;box-shadow:none}}
.hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5),rgba(10,10,10,.05) 35%,rgba(10,10,10,.05) 52%,rgba(10,10,10,.9));z-index:2;pointer-events:none}
.hero-meta{position:relative;z-index:3;padding:0 4rem 6rem;max-width:1150px}
.hero-kicker{font-family:var(--sans);font-weight:300;font-size:.82rem;letter-spacing:.5em;color:var(--gd);text-transform:uppercase;margin-bottom:1.3rem;opacity:0;animation:hUp 1.4s cubic-bezier(.16,1,.3,1) forwards .6s}
.hero-title{font-family:var(--sans);font-weight:200;font-size:clamp(3rem,7.5vw,6.5rem);line-height:1.02;letter-spacing:.04em;text-transform:uppercase;opacity:0;animation:hUp 1.6s cubic-bezier(.16,1,.3,1) forwards .9s;text-shadow:0 4px 60px rgba(0,0,0,.4)}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.7vw,1.5rem);color:rgba(247,247,242,.8);margin-top:1.5rem;font-weight:400;opacity:0;animation:hUp 1.4s ease forwards 1.3s}
@keyframes hUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
.hero-scroll{position:absolute;bottom:2.5rem;right:4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:3;opacity:0;animation:fIn 1s ease forwards 2.2s}
.hero-scroll span{font-family:var(--sans);font-size:.6rem;letter-spacing:.4em;color:rgba(247,247,242,.55);text-transform:uppercase;writing-mode:vertical-rl}
.hero-scroll .ln{width:1px;height:44px;background:linear-gradient(var(--gd),transparent);animation:scP 2.5s infinite}
@keyframes fIn{to{opacity:1}}
@keyframes scP{0%,100%{opacity:.15;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
.sound{position:absolute;bottom:2.5rem;left:4rem;z-index:4;display:flex;align-items:center;gap:.7rem;background:rgba(10,10,10,.5);border:1px solid rgba(212,179,106,.4);color:var(--gd);font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;padding:.75rem 1.4rem;cursor:pointer;transition:all .4s;backdrop-filter:blur(10px)}
.sound:hover{background:var(--gd);color:var(--bk)}
.sound .eq{display:flex;gap:2px;align-items:flex-end;height:10px}
.sound .eq i{width:2px;background:currentColor;height:3px}
.sound.on .eq i{animation:eq 0.9s ease-in-out infinite alternate}
.sound.on .eq i:nth-child(2){animation-delay:.2s}.sound.on .eq i:nth-child(3){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:10px}}

/* FACTS */
.facts{border-top:1px solid rgba(212,179,106,.14);border-bottom:1px solid rgba(212,179,106,.14);background:var(--dk)}
.facts-g{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:2.4rem 2rem;border-left:1px solid rgba(255,255,255,.05)}
.fact:first-child{border-left:0}
.fact .fl{font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.32em;color:var(--gd);text-transform:uppercase;margin-bottom:.8rem}
.fact .fv{font-family:var(--sans);font-weight:300;font-size:1.12rem;color:var(--wh);letter-spacing:.02em;line-height:1.4}

/* SPECS — architectural info with icons */
.specs{background:var(--bk);padding:6rem 4rem}
.specs-in{max-width:1200px;margin:0 auto}
.specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;margin-top:2.5rem}
.spec{display:flex;gap:1.2rem;align-items:flex-start;padding:1.8rem;background:var(--dk);border:1px solid rgba(255,255,255,.05);border-top:2px solid transparent;transition:all .5s}
.spec:hover{border-top-color:var(--gd);background:rgba(212,179,106,.04);transform:translateY(-4px)}
.spec svg{width:34px;height:34px;flex-shrink:0;stroke:var(--gd);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.spec .st{font-family:var(--sans);font-weight:400;font-size:.62rem;letter-spacing:.28em;color:var(--gd);text-transform:uppercase;margin-bottom:.5rem}
.spec .sv{font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.5;color:var(--wh)}

/* NARRATIVE */
.narr{padding:8rem 4rem;max-width:1150px;margin:0 auto}
.sn{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.5em;color:var(--gd);margin-bottom:1.3rem;display:block;text-transform:uppercase}
.narr h2{font-family:var(--sans);font-weight:300;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.28;margin-bottom:2.6rem;max-width:900px}
.narr-cols{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.narr-cols p{font-size:1.2rem;line-height:2.05;color:#c9c9c1;font-weight:400}
.narr-q{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.55;font-style:italic;color:var(--gd);margin-top:3.5rem;position:relative;padding-left:1.6rem;max-width:800px}
.narr-q::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:2px;background:var(--gd);opacity:.4}

/* WATCH / VR buttons */
.actions{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3rem}
.watch{display:inline-flex;align-items:center;gap:.9rem;padding:1.05rem 2.7rem;border:1px solid var(--gd);color:var(--gd);text-decoration:none;font-family:var(--sans);font-weight:400;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;transition:all .5s;position:relative;overflow:hidden}
.watch::before{content:'';position:absolute;inset:0;background:var(--gd);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.watch:hover::before{transform:scaleX(1)}.watch:hover{color:var(--bk)}
.watch span,.watch svg{position:relative;z-index:1}
.watch.solid{background:rgba(212,179,106,.08)}

/* VR TOUR */
.vr{padding:2rem 4rem 6rem;background:var(--bk)}
.vr-in{max-width:1300px;margin:0 auto}
.vr-head{display:flex;align-items:baseline;gap:1.4rem;border-bottom:1px solid rgba(212,179,106,.14);padding-bottom:1.2rem;margin-bottom:2.5rem}
.vr-head h3{font-family:var(--sans);font-weight:300;font-size:1.05rem;letter-spacing:.4em;text-transform:uppercase}
.vr-head .cn{font-family:var(--sans);font-weight:200;font-size:2rem;color:rgba(212,179,106,.5)}
.vr-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--dk);border:1px solid rgba(212,179,106,.15);overflow:hidden}
.vr-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vr-note{font-family:var(--sans);font-weight:300;font-size:.8rem;letter-spacing:.06em;color:var(--gy);margin-top:1.2rem;text-align:center}
.vr-note a{color:var(--gd);text-decoration:none;border-bottom:1px solid rgba(212,179,106,.4)}

/* GALLERY */
.chapter{padding:5rem 4rem 2rem}
.chapter-head{max-width:1400px;margin:0 auto 3rem;display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(212,179,106,.14);padding-bottom:1.2rem}
.chapter-head .cn{font-family:var(--sans);font-weight:200;font-size:2.2rem;color:rgba(212,179,106,.5)}
.chapter-head h3{font-family:var(--sans);font-weight:300;font-size:1.15rem;letter-spacing:.4em;text-transform:uppercase}
.g-wrap{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.g-item{position:relative;overflow:hidden;cursor:zoom-in;background:var(--dk)}
.g-item.full{grid-column:1/-1}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,1,.3,1),filter .8s;filter:brightness(.96)}
.g-item:hover img{transform:scale(1.035);filter:brightness(1.04)}
.g-item::after{content:'';position:absolute;inset:0;border:1px solid rgba(212,179,106,0);transition:border-color .6s;pointer-events:none}
.g-item:hover::after{border-color:rgba(212,179,106,.3)}
.g-item.full{aspect-ratio:16/8.5}
.g-item:not(.full){aspect-ratio:4/3}
.g-cap{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.9rem;background:linear-gradient(to top,rgba(10,10,10,.85),transparent);font-family:var(--sans);font-weight:400;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,247,242,.92);opacity:0;transform:translateY(8px);transition:all .5s}
.g-item:hover .g-cap{opacity:1;transform:none}

/* LIGHTBOX */
.lb{position:fixed;inset:0;background:rgba(6,6,6,.97);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 0 100px rgba(0,0,0,.8)}
.lb-x,.lb-p,.lb-n{position:absolute;background:0;border:0;color:rgba(247,247,242,.6);cursor:pointer;font-family:var(--sans);font-weight:200;transition:color .3s;z-index:2}
.lb-x:hover,.lb-p:hover,.lb-n:hover{color:var(--gd)}
.lb-x{top:1.6rem;right:2.2rem;font-size:2.2rem;line-height:1}
.lb-p{left:1.6rem;top:50%;transform:translateY(-50%);font-size:2.8rem;padding:1rem}
.lb-n{right:1.6rem;top:50%;transform:translateY(-50%);font-size:2.8rem;padding:1rem}
.lb-c{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);font-family:var(--sans);font-weight:300;font-size:.72rem;letter-spacing:.32em;color:var(--gy)}

/* NEXT */
.next{display:block;position:relative;height:56vh;min-height:360px;margin-top:6rem;overflow:hidden;text-decoration:none;border-top:1px solid rgba(212,179,106,.18)}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.42);transition:transform 1.8s cubic-bezier(.16,1,.3,1),filter 1s}
.next:hover img{transform:scale(1.04);filter:grayscale(0) brightness(.58)}
.next-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.next-l{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.5em;color:var(--gd);text-transform:uppercase}
.next-t{font-family:var(--sans);font-weight:200;font-size:clamp(2.2rem,5.5vw,4.4rem);color:var(--wh);letter-spacing:.06em;text-transform:uppercase;transition:letter-spacing .8s;text-align:center}
.next:hover .next-t{letter-spacing:.12em}
.next-a{font-family:var(--sans);font-weight:300;font-size:1.5rem;color:var(--gd);transition:transform .6s}
.next:hover .next-a{transform:translateX(10px)}

/* FOOTER */
footer{padding:2.6rem 4rem;border-top:1px solid rgba(255,255,255,.04);font-family:var(--sans);font-size:.74rem;color:var(--gy);letter-spacing:.1em;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

@media(max-width:900px){
nav{padding:1rem 1.5rem}.nav-right{gap:1.2rem}.wordmark{font-size:1.05rem;letter-spacing:.4em}
.nav-right a{font-size:.72rem}
.hero-meta{padding:0 1.5rem 5rem}
.hero-scroll{right:1.5rem}.sound{left:1.5rem;bottom:2rem}
.facts-g{grid-template-columns:1fr 1fr}.fact{padding:1.6rem 1.2rem}.fact .fv{font-size:1rem}
.specs{padding:4rem 1.5rem}.narr{padding:5rem 1.5rem}.narr-cols{grid-template-columns:1fr;gap:1.5rem}
.narr-cols p{font-size:1.1rem}
.chapter{padding:3.5rem 1.2rem 1rem}.g-wrap{grid-template-columns:1fr;gap:1rem}
.g-item.full{aspect-ratio:16/10}
.vr{padding:1rem 1.2rem 4rem}
footer{padding:2rem 1.5rem;flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){.hero{position:relative}*{animation-duration:.001s!important;transition-duration:.2s!important}}