/* HUTAN — the glass lift */
:root {
  --bg: #0a0b0a; --bg2: #121413; --fg: #f3f2ee; --dim: rgba(243,242,238,.6); --ln: rgba(243,242,238,.12); --ln2: rgba(243,242,238,.28);
  --led: #63ff9a; --ledg: rgba(99,255,154,.55);
  --f: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --m: "Geist Mono", ui-monospace, Menlo, monospace;
  --e: cubic-bezier(.16,1,.3,1); --io: cubic-bezier(.76,0,.24,1);
  --pad: clamp(18px, 2.4vw, 40px); --rail: 0px; --topbar: 60px; --max: 1800px;
}
@media (min-width: 900px) { :root { --rail: 96px; --topbar: 0px; } }
.lt { --bg: #f1f0ec; --bg2: #e6e5e0; --fg: #0b0c0b; --dim: rgba(11,12,11,.58); --ln: rgba(11,12,11,.12); --ln2: rgba(11,12,11,.26); background: var(--bg); color: var(--fg); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--bg); color: var(--fg); font-family: var(--f); line-height: 1.4; padding-left: var(--rail); padding-top: var(--topbar); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--led); color: #0a0b0a; }
.mono { font-family: var(--m); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; }
.dim { color: var(--dim); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.sec, .stop { position: relative; background: var(--bg); }
.sec { padding: clamp(90px, 10vw, 170px) 0; }
.h2 { font-size: clamp(42px, 5vw, 96px); font-weight: 500; line-height: .95; letter-spacing: -.05em; }
.lead { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; max-width: 40ch; }
.shead { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 80px); }
.shead > div { display: grid; gap: 16px; }
@media (min-width: 900px) { .shead--row { grid-template-columns: 1fr auto; align-items: end; gap: 40px; } }
.split-line { padding-bottom: .05em; margin-bottom: -.05em; }

/* buttons — label rolls up on hover */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 24px; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .35s, color .35s, border-color .35s; }
.btn--w { background: #fff; color: #0a0b0a; border-color: #fff; } .btn--w:hover { background: var(--led); border-color: var(--led); }
.btn--wg { background: rgba(10,11,10,.3); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn--wg:hover { background: #fff; color: #0a0b0a; }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--ln2); } .btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn__t { position: relative; display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25; }
.btn__t > span { display: block; transition: transform .5s var(--e); }
.btn:hover .btn__t > span { transform: translateY(-100%); }
.btn > span:last-child:not(.btn__t) { transition: transform .5s var(--e); } .btn:hover > span:last-child:not(.btn__t) { transform: translateX(5px); }
.rnd { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ln2); font-size: 18px; transition: background .3s, color .3s, border-color .3s, transform .5s var(--e); flex: none; }
.rnd:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: scale(1.06); }

/* ---------- doors ---------- */
.doors { --o: 0; position: fixed; z-index: 900; top: 0; bottom: 0; left: var(--rail); right: 0; pointer-events: none; display: grid; place-items: center; }
.doors.shut { pointer-events: auto; }
.doors i { position: absolute; top: 0; bottom: 0; width: 50.2%; will-change: transform;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(90deg, #141615, #232625 45%, #1a1c1b 70%, #0f1110); }
.doors__l { left: 0; transform: translateX(calc(var(--o) * -101%)); box-shadow: inset -1px 0 0 rgba(255,255,255,.18), 10px 0 40px rgba(0,0,0,.6); }
.doors__r { right: 0; transform: translateX(calc(var(--o) * 101%)); box-shadow: inset 1px 0 0 rgba(255,255,255,.18), -10px 0 40px rgba(0,0,0,.6); }
.doors__c { position: relative; display: grid; justify-items: center; gap: 10px; padding: 26px 34px; background: #000; border: 1px solid rgba(99,255,154,.25); opacity: calc(1 - var(--o) * 3); }
.doors__c b { font-family: var(--m); font-weight: 500; font-size: clamp(56px, 7vw, 110px); line-height: 1; color: var(--led); text-shadow: 0 0 24px var(--ledg); font-variant-numeric: tabular-nums; }
.doors__c .mono { color: rgba(243,242,238,.6); }

.flutter { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 700; pointer-events: none; visibility: hidden; }
.cursor { position: fixed; left: 0; top: 0; z-index: 950; pointer-events: none; opacity: 0; transition: opacity .4s; }
@media (pointer: fine) and (min-width: 900px) { .has-mouse .cursor { opacity: 1; } }
.cursor i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: transform .5s var(--e); }
.cursor span { position: absolute; transform: translate(-50%,-50%) scale(.3); color: #0a0b0a; opacity: 0; transition: opacity .3s, transform .5s var(--e); }
.link-hover .cursor i { transform: scale(3.2); }
.drag-hover .cursor i { transform: scale(8.5); mix-blend-mode: normal; background: var(--led); }
.drag-hover .cursor span { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ---------- lift panel ---------- */
.lift { position: fixed; z-index: 800; left: 0; top: 0; right: 0; height: var(--topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); background: #0a0b0a; color: #f3f2ee; border-bottom: 1px solid rgba(243,242,238,.1); }
.lift__logo { font-size: 16px; font-weight: 600; letter-spacing: .4em; }
.lift__scr { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; background: #000; border: 1px solid rgba(243,242,238,.18); }
.lift__scr b { font-family: var(--m); font-size: 20px; font-weight: 500; color: var(--led); text-shadow: 0 0 14px var(--ledg); font-variant-numeric: tabular-nums; }
.lift__scr .mono { font-size: 9px; color: rgba(243,242,238,.5); }
.lift__arr { font-size: 10px; color: var(--led); transition: transform .3s; } .lift__arr.down { transform: rotate(180deg); }
.lift__btns, .lift__view { display: none; }
@media (max-width: 899px) { .lift__scr { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 4px 10px; } .lift__scr b { font-size: 17px; } }
@media (min-width: 900px) {
  .lift { right: auto; bottom: 0; height: auto; width: var(--rail); flex-direction: column; justify-content: space-between; padding: 26px 0; border-bottom: 0; border-right: 1px solid rgba(243,242,238,.1); }
  .lift__logo { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; }
  .lift__scr { flex-direction: column; align-items: center; gap: 4px; width: 66px; padding: 14px 0; }
  .lift__scr b { font-size: 30px; line-height: 1; }
  .lift__btns { display: grid; gap: 10px; }
  .lift__btns a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-family: var(--m); font-size: 12.5px; color: rgba(243,242,238,.7);
    background: radial-gradient(circle at 35% 30%, #3a3e3c, #151716 70%); border: 1.5px solid #4a4f4c; box-shadow: inset 0 -3px 6px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.4); transition: color .3s, border-color .3s, box-shadow .3s; }
  .lift__btns a:hover { color: #fff; border-color: #8a908c; }
  .lift__btns a.passed { color: rgba(99,255,154,.75); border-color: rgba(99,255,154,.35); }
  .lift__btns a.on { color: var(--led); border-color: var(--led); box-shadow: 0 0 18px var(--ledg), inset 0 0 10px rgba(99,255,154,.35); }
  .lift__view { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .2em; padding: 14px 8px; border: 1px solid rgba(243,242,238,.3); transition: background .3s, color .3s; }
  .lift__view:hover { background: var(--led); color: #0a0b0a; border-color: var(--led); }
}

.top { position: fixed; z-index: 820; top: 0; right: 0; display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 var(--pad); color: #f3f2ee; }
@media (min-width: 900px) { .top { top: 22px; right: var(--pad); height: 46px; padding: 0 6px 0 16px; background: rgba(10,11,10,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(243,242,238,.14); } }
.top__snd, .top__menu { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 12px; }
.wave { display: flex; align-items: flex-end; gap: 2px; height: 11px; } .wave i { width: 2px; height: 30%; background: currentColor; }
.playing .wave i { animation: wave 1s ease-in-out infinite; } .wave i:nth-child(2) { animation-delay: -.3s !important; } .wave i:nth-child(3) { animation-delay: -.6s !important; }
@keyframes wave { 50% { height: 100%; } }
.top__menu i { width: 22px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .4s var(--e); }
.menu-open .top__menu i { transform: scaleY(.15); }
@media (max-width: 899px) { .top__snd span { display: none; } }

/* ---------- menu: the lift's button panel, big ---------- */
.mn { position: fixed; z-index: 780; top: var(--topbar); bottom: 0; left: var(--rail); right: 0; background: #0a0b0a; color: #f3f2ee; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--io); overflow-y: auto; }
.menu-open .mn { clip-path: inset(0); }
.mn__in { min-height: 100%; display: grid; align-content: center; gap: 34px; padding: 90px var(--pad) 40px; max-width: 1200px; }
.mn__scr { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; background: #000; border: 1px solid rgba(243,242,238,.16); }
.mn__scr .mono { color: rgba(243,242,238,.55); } .mn__scr b { font-family: var(--m); font-size: 40px; font-weight: 500; color: var(--led); text-shadow: 0 0 16px var(--ledg); }
.mn__l { display: grid; gap: 8px; }
.mn__l a { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); opacity: 0; transform: translateX(-24px); transition: opacity .5s, transform .8s var(--e); }
.menu-open .mn__l a { opacity: 1; transform: none; }
.mn__l li:nth-child(2) a { transition-delay: .04s; } .mn__l li:nth-child(3) a { transition-delay: .08s; } .mn__l li:nth-child(4) a { transition-delay: .12s; } .mn__l li:nth-child(5) a { transition-delay: .16s; } .mn__l li:nth-child(6) a { transition-delay: .2s; }
.mn__k { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-family: var(--m); font-size: 16px; background: radial-gradient(circle at 35% 30%, #3a3e3c, #151716 70%); border: 2px solid #4a4f4c; box-shadow: inset 0 -3px 6px rgba(0,0,0,.6); transition: color .3s, border-color .3s, box-shadow .3s; }
.mn__t { font-size: clamp(30px, 3.8vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; transition: transform .6s var(--e); }
.mn__l a:hover .mn__k { color: var(--led); border-color: var(--led); box-shadow: 0 0 22px var(--ledg); } .mn__l a:hover .mn__t { transform: translateX(10px); }
.mn__f { color: rgba(243,242,238,.5); }

/* ---------- 01 the ride ---------- */
.ride { position: relative; height: 520vh; background: #000; color: #fff; }
.ride__stick { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: hidden; }
.ride__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); opacity: 0; transition: opacity .4s; }
.ride__v.has-frame { opacity: 1; }
.ride__stick { background: #000 url(../video/lift-poster.jpg) center / cover no-repeat; }   /* the poster under the film: a video with a src but no frame yet paints black */
.ride__glare { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 45%, transparent 55%); mix-blend-mode: screen; will-change: transform; }
.ride__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,6,.62), rgba(5,8,6,.15) 48%, transparent 70%), linear-gradient(0deg, rgba(5,8,6,.5), transparent 30%); pointer-events: none; }
.ride__t { position: absolute; left: var(--pad); top: clamp(80px, 13vh, 150px); display: grid; gap: 22px; width: min(820px, 78vw); }
.ride__h { font-size: clamp(56px, 8vw, 160px); font-weight: 500; letter-spacing: -.06em; line-height: .88; }
.ride__lead { font-size: clamp(16px, 1.3vw, 20px); max-width: 36ch; color: rgba(255,255,255,.82); }
.ride__b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ride__s { position: absolute; left: var(--pad); bottom: 30px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); }
.ride__s i { width: 1px; height: 34px; background: linear-gradient(#fff, transparent); animation: drop 1.8s var(--e) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }
.ride__meter { position: absolute; right: var(--pad); bottom: 30px; display: grid; justify-items: end; gap: 4px; padding: 12px 16px; background: rgba(0,0,0,.55); border: 1px solid rgba(99,255,154,.22); color: rgba(255,255,255,.65); backdrop-filter: blur(8px); }
.ride__meter b { color: var(--led); font-weight: 500; text-shadow: 0 0 10px var(--ledg); }
@media (max-width: 899px) { .ride__t { top: 34px; width: auto; right: var(--pad); } .ride__h { font-size: 54px; } .ride__shade { background: linear-gradient(180deg, rgba(5,8,6,.7), rgba(5,8,6,.25) 55%, rgba(5,8,6,.55)); } .ride__meter { display: none; } }

/* ---------- 02 slider ---------- */
.sl-sec { height: 210vh; background: #000; }
.sl { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); min-height: 560px; overflow: hidden; color: #fff; background: #000; touch-action: pan-y; }
.sl__track, .sl__s { position: absolute; inset: 0; margin: 0; }
.sl__s { visibility: hidden; }
.sl__s.on, .sl__s.go { visibility: visible; }
.sl__media { position: absolute; inset: 0; will-change: transform; }
.sl__s img { width: 100%; height: 100%; object-fit: cover; }
.water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sl__s figcaption { position: absolute; left: var(--pad); bottom: clamp(110px, 16vh, 170px); display: grid; gap: 12px; z-index: 2; }
.sl__s figcaption .mono { color: var(--led); }
.sl__s figcaption b { font-size: clamp(30px, 3.4vw, 60px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.sl__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,8,6,.55), transparent 30%, transparent 55%, rgba(5,8,6,.7)); pointer-events: none; }
.sl__ui { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding-top: clamp(80px, 12vh, 130px); padding-bottom: 36px; pointer-events: none; max-width: none; }
.sl__h { display: grid; gap: 16px; }
.sl__nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px; pointer-events: auto; }
.sl__n b { font-size: 22px; font-weight: 500; font-family: var(--f); }
.sl__bars { display: flex; gap: 6px; margin: 0 10px; }
.sl__bars > i { width: clamp(40px, 5vw, 80px); height: 2px; background: rgba(255,255,255,.25); position: relative; }
.sl__bars > i > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
.sl .rnd { border-color: rgba(255,255,255,.45); color: #fff; } .sl .rnd:hover { background: #fff; color: #000; }
@media (max-width: 700px) { .sl__bars { display: none; } }

/* ---------- 03 horizontal gallery ---------- */
.hz { position: relative; }
.hz__stick { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding: clamp(70px, 10vh, 110px) 0 34px; }
.hz__track { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); padding: 0 var(--pad); width: max-content; will-change: transform; }
.hz__intro { width: clamp(300px, 32vw, 560px); display: grid; gap: 22px; align-self: center; flex: none; padding-right: 3vw; }
.hz__count b { font-size: 24px; font-family: var(--f); font-weight: 500; color: var(--fg); }
.hz__c { position: relative; flex: none; width: clamp(260px, 28vw, 500px); height: min(60vh, 640px); margin: 0; }
.hz__c--t { width: clamp(220px, 22vw, 400px); height: min(72vh, 760px); }
.hz__c:nth-child(odd) { align-self: flex-end; } .hz__c:nth-child(even) { align-self: flex-start; }
.hz__ph { position: absolute; inset: 0 0 52px 0; overflow: hidden; }
.hz__media { position: absolute; top: 0; left: -12%; width: 124%; height: 100%; will-change: transform; }
.hz__ph img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hz__c figcaption { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: baseline; gap: 14px; }
.hz__c figcaption .mono { color: var(--dim); } .hz__c figcaption b { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.hz__bar > i { display: block; height: 1px; background: var(--ln2); position: relative; } .hz__bar > i > i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--led); box-shadow: 0 0 10px var(--led); }

/* ---------- 04 compare + pool ---------- */
.cp-sec { padding: clamp(90px, 10vw, 170px) 0; }
.cp { --x: 50%; position: relative; height: min(88vh, 980px); min-height: 460px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; background: #111; }
.cp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cp__b { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cp__h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: #fff; z-index: 2; pointer-events: none; }
.cp__h span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 11px; letter-spacing: -.1em; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.cp__l, .cp__r { position: absolute; top: 18px; z-index: 2; padding: 7px 12px; background: rgba(10,11,10,.6); color: #fff; backdrop-filter: blur(6px); }
.cp__l { left: 18px; } .cp__r { right: 18px; color: var(--led); }
.pool { display: grid; gap: 40px; margin-top: clamp(80px, 9vw, 150px); align-items: center; }
@media (min-width: 900px) { .pool { grid-template-columns: 1.1fr 1fr; gap: 6vw; } }
.pool__f { position: relative; height: min(80vh, 860px); overflow: hidden; margin: 0; }
.pool__f img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.pool__t { display: grid; gap: 28px; justify-items: start; }
.pool__q { font-size: clamp(30px, 3.2vw, 58px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }

/* ---------- 05 3D ring ---------- */
.rs { padding: clamp(90px, 10vw, 170px) 0; overflow: hidden; }
.ring { position: relative; height: min(66vh, 720px); perspective: 1800px; cursor: grab; touch-action: pan-y; user-select: none; }
.ring:active { cursor: grabbing; }
.ring__stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ring__c { position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); margin: 0; overflow: hidden; backface-visibility: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transition: filter .5s; }
.ring { --w: min(30vw, 46vh); --h: calc(var(--w) * 1.28); }
@media (max-width: 899px) { .ring { --w: 62vw; } }
.ring__c img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rs__info { display: grid; grid-template-columns: auto 1fr auto auto; gap: 24px; align-items: center; margin-top: 30px; }
.rs__card { display: grid; gap: 6px; }
.rs__card .mono { color: var(--led); }
.rs__card h3 { font-size: clamp(34px, 3.4vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.rs__p { display: flex; align-items: center; gap: 20px; }
.rs__p b { font-size: clamp(26px, 2.4vw, 42px); font-weight: 500; letter-spacing: -.03em; }
@media (max-width: 899px) { .rs__info { grid-template-columns: auto 1fr auto; } .rs__p { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; } }

/* ---------- 06 crown ---------- */
.cr { position: relative; height: 340vh; background: #000; color: #fff; }
.cr__stick { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: hidden; display: grid; align-items: end; background: #000 url(../video/roof-poster.jpg) center / cover no-repeat; }
.cr__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.cr__v.has-frame { opacity: 1; }
.cr__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,8,6,.78), rgba(5,8,6,.1) 45%, transparent 60%), linear-gradient(180deg, rgba(5,8,6,.4), transparent 22%); }
.cr__t { position: relative; display: grid; gap: 22px; padding-bottom: clamp(36px, 6vh, 70px); max-width: none; }
.cr__h { font-size: clamp(54px, 7.4vw, 150px); font-weight: 500; letter-spacing: -.06em; line-height: .88; }
.cr__n { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.28); margin-top: 18px; }
.cr__n div { display: grid; gap: 8px; padding: 22px 18px 0 0; } .cr__n div + div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.2); }
.cr__n b { font-size: clamp(40px, 4.6vw, 90px); font-weight: 400; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.cr__n .mono { color: rgba(255,255,255,.7); }
@media (max-width: 700px) { .cr__n { grid-template-columns: 1fr 1fr; } .cr__n div:nth-child(3) { border-left: 0; padding-left: 0; } .cr__n div:nth-child(n+3) { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.2); } }

/* ---------- paint ---------- */
.pt { position: relative; height: min(80vh, 920px); min-height: 420px; overflow: hidden; touch-action: pan-y; background: #111; }
.pt__bw { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.pt canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pt__l, .pt__r { position: absolute; top: 16px; padding: 7px 11px; background: rgba(10,11,10,.62); color: #f3f2ee; backdrop-filter: blur(6px); }
.pt__l { left: 16px; } .pt__r { right: 16px; } .pt__r b { color: var(--led); font-weight: 500; }
.pt__all { position: absolute; right: 16px; bottom: 16px; }
.pt__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 12px 18px; background: rgba(10,11,10,.65); color: #fff; pointer-events: none; transition: opacity .6s; }
.pt__hint.off { opacity: 0; }
.pt.paint-on { cursor: none; }
.brush { position: fixed; z-index: 950; left: 0; top: 0; width: 120px; height: 120px; margin: -60px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; opacity: 0; transition: opacity .3s; }
.brush.on { opacity: 1; }

/* ---------- final + footer ---------- */
.fin { position: relative; min-height: 100vh; display: grid; align-items: end; overflow: hidden; color: #fff; background: #000; }
.fin > img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.fin::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,8,6,.15), rgba(5,8,6,.35) 40%, rgba(5,8,6,.9) 78%); }
.fin__in { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: start; padding-top: 160px; padding-bottom: 26px; max-width: none; }
.fin__h { font-size: clamp(54px, 7.6vw, 150px); font-weight: 500; letter-spacing: -.06em; line-height: .88; }
.fin__clk { justify-self: stretch; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.fin__clk div { display: grid; gap: 6px; } .fin__clk .mono { color: rgba(255,255,255,.55); }
.fin__clk b { font-size: clamp(24px, 2.2vw, 38px); font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fin__nav { justify-self: stretch; display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.fin__nav a { color: rgba(255,255,255,.8); } .fin__nav a:hover { color: var(--led); }
.fin__word { justify-self: stretch; width: 100%; height: auto; margin-top: 30px; overflow: visible; }
.fin__word text { font-family: var(--f); font-weight: 500; font-size: 252px; letter-spacing: -.02em; fill: rgba(243,242,238,.94); }
.fin__c { color: rgba(255,255,255,.45); font-size: 10.5px; }
@media (max-width: 700px) { .fin__clk { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { .ride, .cr { height: auto; } .ride__stick, .cr__stick, .hz__stick { position: relative; } .doors { display: none; } }

/* ---------- L18 · life above: layers in depth ---------- */
.js .ride__h { opacity: 0; } .js .ride__h.split-ready { opacity: 1; }
.lf { position: relative; height: 120vh; min-height: 760px; overflow: hidden; background: #000; color: #fff; }
.lf__bg { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: brightness(.62) saturate(1.1); will-change: transform; }
.lf__w { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 24vw; font-weight: 500; letter-spacing: -.07em; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.55); white-space: nowrap; pointer-events: none; will-change: transform; }
.lf__f { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); will-change: transform; }
.lf__f img { width: 100%; height: 100%; object-fit: cover; }
.lf__f--a { left: 8%; top: 14%; width: clamp(160px, 18vw, 320px); aspect-ratio: 3 / 4; }
.lf__f--b { right: 9%; top: 10%; width: clamp(180px, 23vw, 420px); aspect-ratio: 4 / 5; }
.lf__f--c { left: 38%; top: 52%; width: clamp(150px, 16vw, 300px); aspect-ratio: 1; }
.lf__t { position: absolute; left: 0; right: 0; bottom: 9%; display: grid; gap: 18px; max-width: none; }
.lf__q { font-size: clamp(34px, 4.6vw, 86px); font-weight: 500; letter-spacing: -.05em; line-height: .98; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
@media (max-width: 700px) { .lf__f--c { display: none; } .lf__f--b { top: 30%; } }

/* ---------- L30 · amenities: a stack of cards ---------- */
.am { padding: clamp(90px, 10vw, 170px) 0; }
.am__stack { display: grid; gap: 26px; }
.am__c { position: sticky; top: calc(var(--topbar) + 40px + var(--i, 0) * 22px); display: grid; grid-template-columns: 1.15fr 1fr; min-height: min(74vh, 720px); background: #fff; color: #0b0c0b; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0,0,0,.4); transform-origin: 50% 0; will-change: transform, filter; }
.am__ph { position: relative; overflow: hidden; } .am__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am__t { display: grid; align-content: space-between; gap: 30px; padding: clamp(28px, 4vw, 64px); }
.am__t > .mono { color: #1f8f4e; }
.am__t h3 { font-size: clamp(40px, 4.6vw, 88px); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.am__t p { font-size: clamp(16px, 1.25vw, 20px); color: rgba(11,12,11,.65); max-width: 36ch; }
.am__t ul { display: flex; flex-wrap: wrap; gap: 8px; } .am__t li { padding: 8px 12px; border: 1px solid rgba(11,12,11,.18); }
@media (max-width: 899px) { .am__c { grid-template-columns: 1fr; grid-template-rows: 46vh auto; min-height: 0; } }

/* ---------- L48 · the window opens ---------- */
.wn { position: relative; height: 320vh; background: #0a0b0a; color: #f3f2ee; }
.wn__stick { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: hidden; display: grid; place-items: center; }
.wn__f { position: absolute; left: 50%; top: 50%; width: 26vw; height: 36vh; transform: translate(-50%,-50%); overflow: hidden; will-change: width, height; box-shadow: 0 0 0 1px rgba(243,242,238,.2), 0 40px 120px -30px rgba(0,0,0,.9); }
.wn__f img { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; max-width: none; object-fit: cover; transform: translate(-50%,-50%) scale(1.3); will-change: transform; }
.wn__mul { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(33.33% - 3px), #0a0b0a calc(33.33% - 3px) calc(33.33% + 3px), transparent calc(33.33% + 3px) calc(66.66% - 3px), #0a0b0a calc(66.66% - 3px) calc(66.66% + 3px), transparent calc(66.66% + 3px)), linear-gradient(0deg, transparent calc(50% - 3px), #0a0b0a calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)); box-shadow: inset 0 0 0 8px #0a0b0a; }
.wn__l, .wn__r { position: absolute; top: 50%; font-size: clamp(40px, 4.6vw, 96px); font-weight: 500; letter-spacing: -.055em; line-height: 1; white-space: nowrap; transform: translateY(-50%); will-change: transform; z-index: 2; }
.wn__l { right: calc(50% + 14.5vw); } .wn__r { left: calc(50% + 14.5vw); }
.wn__cap { position: absolute; left: var(--pad); bottom: 30px; color: #fff; opacity: 0; z-index: 3; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
@media (max-width: 899px) { .wn__f { width: 56vw; height: 30vh; } .wn__l, .wn__r { font-size: 34px; } .wn__l { right: auto; left: var(--pad); top: 22%; } .wn__r { left: auto; right: var(--pad); top: 78%; } }

/* ---------- L56 · voices ---------- */
.vc { padding: clamp(90px, 10vw, 170px) 0 clamp(60px, 6vw, 100px); background: #0a0b0a; overflow: hidden; }
.vc__track { display: flex; gap: 18px; padding: 0 var(--pad); width: max-content; cursor: grab; touch-action: pan-y; user-select: none; will-change: transform; }
.vc__track:active { cursor: grabbing; }
.vc__c { flex: none; width: clamp(300px, 30vw, 480px); min-height: 360px; display: grid; align-content: space-between; gap: 40px; padding: 34px; background: #121413; border: 1px solid rgba(243,242,238,.1); transition: border-color .4s; }
.vc__c:hover { border-color: rgba(99,255,154,.45); }
.vc__c p { font-size: clamp(22px, 1.9vw, 32px); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.vc__c div { display: flex; align-items: center; gap: 14px; } .vc__c img { width: 54px; height: 54px; object-fit: cover; }
.vc__c div > span { display: grid; gap: 2px; } .vc__c b { font-size: 17px; font-weight: 500; } .vc__c .mono { color: var(--led); }
.vc__row { margin-top: clamp(60px, 7vw, 110px); overflow: hidden; }
.vc__mq { display: flex; gap: 14px; width: max-content; will-change: transform; }
.vc__mq img { width: clamp(220px, 20vw, 360px); height: clamp(150px, 13vw, 240px); object-fit: cover; flex: none; }