/* ===================== HOME v2 ===================== */

/* ---- 01 hero film ---- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#1d1f27;color:#fff}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(ellipse at center,rgba(20,22,30,.05) 0%,rgba(20,22,30,.35) 75%,rgba(20,22,30,.6) 100%),
  linear-gradient(180deg,rgba(20,22,30,.4) 0%,transparent 28%,transparent 70%,rgba(20,22,30,.55) 100%)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.hero-emblem{width:clamp(58px,6vw,84px)}
.hero-title{font-size:clamp(36px,6.6vw,100px);letter-spacing:.14em;text-transform:uppercase;margin:26px 0 14px;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero-sub{letter-spacing:.5em;font-size:clamp(9px,1vw,12px);color:var(--gold-lt)}
.hero-actions{display:flex;gap:12px;margin-top:48px;flex-wrap:wrap;justify-content:center}
.hero-btn{font-size:10px;letter-spacing:.32em;text-transform:uppercase;padding:12px 22px;border-radius:8px;border:1px solid rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.06);transition:all .5s var(--ease)}
.hero-btn:hover{background:#fff;color:var(--slate)}
.hero-btn--gold{border-color:var(--gold-lt);background:rgba(140,116,68,.55)}
.hero-btn--gold:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.scroll-cue{position:absolute;left:50%;bottom:28px;width:1px;height:56px;background:rgba(255,255,255,.25);overflow:hidden}
.scroll-cue span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:cue 2.4s infinite var(--ease)}
@keyframes cue{to{top:110%}}
html:not(.gsap) .hero-copy>*{animation:rise 1.8s var(--ease) both}
html:not(.gsap) .hero-copy>*:nth-child(2){animation-delay:.2s}html:not(.gsap) .hero-copy>*:nth-child(3){animation-delay:.4s}html:not(.gsap) .hero-copy>*:nth-child(4){animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- 01b the arrival ---- */
.passage{position:relative;height:720vh;background:#e9e2d4}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#fff}
.stage::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:7;pointer-events:none;background:linear-gradient(180deg,rgba(20,22,30,.42),rgba(20,22,30,0))}
.layer{position:absolute;inset:0;opacity:0;visibility:hidden;contain:strict}
.layer video,.layer img{width:100%;height:100%;object-fit:cover}
.stage-veil{position:absolute;inset:0;pointer-events:none;opacity:0;background:
  radial-gradient(ellipse at center,transparent 50%,rgba(15,17,24,.45) 100%),linear-gradient(180deg,rgba(15,17,24,.3),transparent 30%,transparent 60%,rgba(15,17,24,.6))}

.portal{position:absolute;left:50%;top:50%;width:max(100vw,177.86vh);aspect-ratio:2650/1490;contain:layout paint;transform:translate(-50%,-50%);transform-origin:50.02% 55.44%;will-change:transform}
.facade{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.opening{position:absolute;left:35.057%;top:21.678%;width:29.925%;height:67.517%;z-index:1;overflow:hidden;perspective:1400px;background:#e9c98e}
.through{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);transform-origin:50% 55%}
.glow{position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 55%,rgba(255,236,196,.9),rgba(255,214,150,.35) 45%,transparent 75%);opacity:0;mix-blend-mode:screen}
.leaf{position:absolute;top:0;bottom:0;transform-style:preserve-3d;will-change:transform}
.leaf img{width:100%;height:100%;object-fit:fill;backface-visibility:hidden}
.leaf--l{left:0;width:50.95%;transform-origin:0 50%}
.leaf--r{right:0;width:49.05%;transform-origin:100% 50%}
.leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.55));opacity:var(--shade,0)}
.leaf--r::after{background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.55))}

.pcaps{position:absolute;left:0;right:0;bottom:clamp(60px,11vh,120px);text-align:center;pointer-events:none;padding:0 var(--gutter);z-index:5}
.cap{position:absolute;left:0;right:0;bottom:0;margin:0;opacity:0;display:grid;gap:12px;justify-items:center}
.cap .eyebrow{color:var(--gold-lt)}
.cap em{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,3vw,44px);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.cap[data-cap="arrive"] em{color:#fff;text-shadow:0 2px 24px rgba(40,30,10,.55)}
.cities{position:absolute;left:0;right:0;bottom:clamp(60px,11vh,120px);opacity:0;pointer-events:none;padding:0 var(--gutter);z-index:5}
.cities ol{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
.cities li{font-family:var(--serif);font-size:clamp(17px,2vw,30px);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.32);transition:color .7s}
.cities li+li::before{content:"\2192";margin:0 .9em;color:rgba(200,173,118,.5);letter-spacing:0}
.cities li.on{color:#fff}
.triad{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,40px);opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(15,17,24,.5),rgba(15,17,24,.15) 70%);flex-wrap:wrap;padding:0 var(--gutter)}
.triad span{font-family:var(--serif);font-size:clamp(30px,4.4vw,70px);letter-spacing:.14em;text-transform:uppercase;font-weight:300;white-space:nowrap}
.triad i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold-lt)}
.pprogress{position:absolute;right:var(--gutter);top:50%;width:1px;height:120px;margin-top:-60px;background:rgba(255,255,255,.25);z-index:6}
.pprogress i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--gold-lt);transform:scaleY(0);transform-origin:top}
@media (max-width:700px){.pprogress{display:none}.triad{flex-direction:column;gap:14px}}

/* ---- 02 world ---- */
.world-lede{max-width:29em;text-align:center}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(70px,9vw,130px);border-top:1px solid var(--rule)}
.pillar{padding:44px 24px 40px;text-align:center;border-right:1px solid var(--rule);cursor:default;outline:none;position:relative;transition:background .8s var(--ease)}
.pillar:last-child{border-right:0}
.p-n{font-size:10px;letter-spacing:.3em;color:var(--gold)}
.pillar h3{font-size:clamp(30px,3.6vw,56px);letter-spacing:.1em;text-transform:uppercase;margin-top:14px;transition:color .6s var(--ease),letter-spacing .9s var(--ease)}
.pillar p{margin:18px 0 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateY(-8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pillar::after{content:"";position:absolute;left:50%;top:-1px;width:0;height:1px;background:var(--gold);transition:width .9s var(--ease),left .9s var(--ease)}
.pillar:hover,.pillar:focus{background:var(--gold-wash)}
.pillar:hover h3,.pillar:focus h3{color:var(--gold);letter-spacing:.16em}
.pillar:hover p,.pillar:focus p{opacity:1;transform:none}
.pillar:hover::after,.pillar:focus::after{left:0;width:100%}
@media (hover:none){.pillar p{opacity:1;transform:none}}
@media (max-width:760px){.pillars{grid-template-columns:1fr}.pillar{border-right:0;border-bottom:1px solid var(--rule)}.pillar p{opacity:1;transform:none}}

/* ---- 03 circle ---- */
.circle-head{display:flex;justify-content:space-between;align-items:baseline;gap:30px;flex-wrap:wrap}
.circle-head .display{max-width:16em}
.rotator{position:relative;font-size:clamp(56px,12.5vw,200px);height:1.12em;margin:clamp(40px,6vw,80px) 0;overflow:hidden}
.rotator span{position:absolute;left:0;top:0;font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.02em;color:#fff;
  opacity:0;transform:translateY(105%);transition:transform 1.3s var(--ease),opacity 1.3s var(--ease);white-space:nowrap}
.rotator span.is-on{opacity:1;transform:none}
.rotator span.is-out{opacity:0;transform:translateY(-105%)}
.circle-foot{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,110px);align-items:end;border-top:1px solid var(--rule-slate);padding-top:48px}
@media (max-width:820px){.circle-foot{grid-template-columns:1fr}}

/* ---- 04 office (Nexus-style expanding card) ---- */
.office-top{padding-bottom:clamp(50px,6vw,80px)}
.office-head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.office-head .display{margin-top:18px}
.expand{display:flex;justify-content:center;padding:0}
.expand-card{width:62vw;height:78vh;border-radius:var(--radius);will-change:width,border-radius}
.expand-card img{transform:scale(1.2);will-change:transform}
.office-bottom{padding-top:clamp(60px,8vw,110px)}
.domains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.domains li{padding:28px 24px 0 0;font-family:var(--serif);font-size:clamp(20px,1.9vw,28px);line-height:1.2}
.domains li span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:var(--gold);margin-bottom:14px}
@media (max-width:860px){.office-head{grid-template-columns:1fr}.expand-card{width:100%!important;height:56vh;border-radius:0!important}.domains{grid-template-columns:1fr 1fr;gap:20px}}

/* ---- 05 membership ---- */
.mem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.mem-media{aspect-ratio:4/5}
.mem-copy .display{margin:18px 0 26px}
.unlocks{list-style:none;padding:0;margin:40px 0 44px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.unlocks li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.unlocks li::before{content:"";width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--gold);flex-shrink:0}
@media (max-width:860px){.mem-grid{grid-template-columns:1fr}.mem-media{aspect-ratio:16/11}}

/* ---- 06 beyond (horizontal on desktop) ---- */
.beyond{background:var(--paper);overflow:hidden}
.beyond-pin{display:flex;align-items:center;gap:clamp(40px,5vw,90px);height:100vh;padding:0 var(--gutter)}
.beyond-head{flex:0 0 clamp(300px,30vw,440px)}
.beyond-head .display{margin:18px 0 22px}
.beyond-head .body{font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:2.1;margin-bottom:34px}
.track{display:flex;gap:28px;will-change:transform}
.card{flex:0 0 clamp(300px,30vw,460px);display:block}
.card .media{aspect-ratio:4/5}
.card .media img{transition:transform 1.6s var(--ease)}
.card:hover .media img{transform:scale(1.05)}
.c-n{display:block;margin-top:22px;font-family:var(--serif);color:var(--gold);letter-spacing:.2em}
.card h3{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.2vw,34px);margin:6px 0 6px}
.card p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:900px){.beyond-pin{flex-direction:column;align-items:stretch;height:auto;padding:110px var(--gutter)}.beyond-head{flex:none}.track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-right:calc(var(--gutter)*-1)}.card{flex-basis:78vw;scroll-snap-align:start}}

/* ---- 07 gala ---- */
.gala{position:relative;min-height:110vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--slate)}
.gala-bg{position:absolute;inset:0;background:var(--slate)}
.gala-bg img{height:120%;margin-top:-10%}
.gala-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(25,28,38,.45),rgba(25,28,38,.82) 85%)}
.gala-in{position:relative;padding:120px var(--gutter);max-width:960px}
.gala-in .display{margin:22px 0 26px}
.gala-in .lede{color:rgba(255,255,255,.88)}
.gala-words{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);margin:48px 0 52px;flex-wrap:wrap}
.gala-words span{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-lt);padding-top:16px;border-top:1px solid var(--gold-lt)}

/* ---- 08 review ---- */
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:22px 0}
.masthead .eyebrow:last-child{text-align:right}
.mast{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(32px,4.8vw,70px);margin:0;text-align:center;line-height:1}
.rv-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 34px;padding:16px 0;border-bottom:1px solid var(--rule)}
.rv-tabs a{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.rv-tabs a:hover{color:var(--gold)}
.rv-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(30px,5vw,72px);margin-top:56px}
.rv-cover .media{aspect-ratio:16/10;margin-bottom:24px}
.rv-cover h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,46px);line-height:1.12;margin:12px 0 14px}
.rv-cover p,.rv-item p{color:var(--muted);margin:0;font-size:14px}
.rv-list{display:grid;align-content:start}
.rv-item{padding:26px 0;border-top:1px solid var(--rule)}
.rv-item:last-child{border-bottom:1px solid var(--rule)}
.rv-item h4{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.9vw,27px);line-height:1.2;margin:8px 0}
.rv-cover:hover h3,.rv-item:hover h4{color:var(--gold)}
@media (max-width:860px){.rv-grid{grid-template-columns:1fr}.masthead{grid-template-columns:1fr}.masthead .eyebrow{display:none}}

/* ---- 09 closing (bright) ---- */
.closing{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ivory)}
.closing-bg{position:absolute;inset:0}
.closing-bg img{height:120%;margin-top:-10%}
.closing-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(237,227,208,.86) 0%,rgba(237,227,208,.62) 45%,rgba(237,227,208,.18) 100%)}
.closing-in{position:relative;padding:140px var(--gutter);display:flex;flex-direction:column;align-items:center;max-width:1000px}
.closing-emblem{width:64px;margin-bottom:40px}
.closing-in .display{margin-bottom:52px}
.closing-login{margin-top:28px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.closing-login:hover{color:var(--gold)}
.beyond-head{position:relative;z-index:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:var(--paper);
  box-shadow:60px 0 60px -10px var(--paper);margin-left:calc(var(--gutter)*-1);padding-left:var(--gutter)}
.track{position:relative;z-index:1}
@media (max-width:900px){.beyond-head{box-shadow:none;margin-left:0;padding-left:0}}