/* ===== #arrive: pinned cinematic scene. Animated props: transform, opacity, clip-path only ===== */
.scene{position:relative;height:860svh;background:var(--ink);view-timeline:--arrive block}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);color:var(--paper);--ox:66%;--oy:54%;--px:0px;--py:0px;--aw:9%;--at:9%;--ab:6%;--ar:40vw;contain:layout paint}
.sa{animation-duration:1000ms;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused}
@supports (animation-timeline: view()){html:not(.fb) .sa{animation-play-state:running;animation-timeline:--arrive;animation-range:contain 0% contain 100%}}
.ph{position:absolute;inset:0;transform-origin:var(--ox) var(--oy);will-change:transform}
.ph img{width:100%;height:100%;object-fit:cover;object-position:66% 50%}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,19,.6) 0%,rgba(17,17,19,0) 22%,rgba(17,17,19,.1) 38%,rgba(17,17,19,.78) 62%,#111113 92%)}
.hero-type{position:absolute;left:0;right:0;top:36svh;display:flex;justify-content:center;pointer-events:none}
.title{margin:0;display:flex;flex-direction:column;align-items:center;font:900 30vw/.8 var(--bs);text-shadow:0 4px 40px rgba(0,0,0,.35);text-transform:uppercase;letter-spacing:-.01em;color:var(--paper)}
.tl{display:block;overflow:hidden;padding:0 .02em}.tl>span{display:block;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}.tl.a-t2>span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.ph img{animation:settle 1.8s cubic-bezier(.2,.7,.2,1) both}@keyframes settle{from{transform:scale(1.14)}to{transform:none}}
.hcopy>*{animation:fadeup .9s .45s cubic-bezier(.2,.8,.2,1) both}@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tl.a-t2{color:var(--teal);font-size:.82em;margin-top:-.02em}
.hcopy{position:absolute;left:20px;right:20px;bottom:calc(84px + env(safe-area-inset-bottom));display:grid;gap:12px}
.hcopy .k{color:var(--teal)}
.hsub{margin:0;font-size:18px;line-height:1.45;max-width:30ch;color:var(--paper)}.hsub b{font-weight:600}
.hcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.hcta .btn-ghost{color:inherit}
.cue{position:absolute;right:16px;top:calc(var(--bar) + 12px);margin:0;color:var(--paper);opacity:.8;writing-mode:vertical-rl}
.html-scrolled .hcopy{pointer-events:none}
/* inside */
.inside{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 40%,#1d2a2e 0%,#111113 60%);will-change:clip-path}
.padcopy{position:absolute;left:20px;right:20px;top:calc(var(--bar) + 26px);text-align:center}
.padcopy .k{color:var(--teal);margin:0 0 8px}
.big{margin:0;font:900 clamp(54px,15vw,150px)/.86 var(--bs);text-transform:uppercase}.big em{font:italic 400 .7em "SER",serif;text-transform:none;color:var(--teal)}
.pad{position:absolute;left:50%;top:56%;width:min(64vw,300px);margin-left:calc(min(64vw,300px)/-2);transform-origin:50% 50%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;aspect-ratio:3/4;margin-top:calc(min(64vw,300px)*-.55)}
.key,.glow{display:grid;place-items:center;border-radius:50%;font:500 clamp(20px,6vw,30px) var(--mono);aspect-ratio:1}
.key{border:1.5px solid rgba(243,238,229,.28);color:rgba(243,238,229,.75)}
.pad .key:nth-child(1){grid-area:1/1}.pad .key:nth-child(3){grid-area:1/3}.pad .key:nth-child(11){grid-area:4/2}
.glow{background:var(--teal);color:var(--ink);box-shadow:0 0 0 6px rgba(31,169,195,.22),0 0 38px rgba(31,169,195,.55)}
.opened{position:absolute;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));text-align:center;color:var(--teal);font-size:14px;margin:0}
.tunnel{position:absolute;inset:0;pointer-events:none}
.tn{position:absolute;left:50%;top:50%;width:46vw;height:auto;margin-left:-23vw;margin-top:-28vw;border:6px solid var(--paper);box-shadow:0 20px 40px rgba(0,0,0,.45);will-change:transform,opacity}
.wordA{position:absolute;left:0;right:0;top:50%;margin:-.9em 0 0;text-align:center;font:900 clamp(46px,13vw,150px)/.86 var(--bs);text-transform:uppercase;color:var(--paper);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.wordA em{font:italic 400 .72em "SER",serif;text-transform:none;color:var(--teal)}
/* hallway */
.hall{position:absolute;inset:0;transform-origin:52% 47%;will-change:transform,opacity}
.hall img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,19,.55) 0%,rgba(17,17,19,0) 26%,rgba(17,17,19,0) 55%,rgba(17,17,19,.85) 82%)}
.hallcopy{position:absolute;left:20px;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));margin:0;display:grid;gap:8px}
.hallcopy .k{color:var(--teal)}.hallcopy .big{font-size:clamp(48px,13vw,120px)}
/* board */
.board-wrap{position:absolute;left:16px;right:16px;top:calc(var(--bar) + 14px);height:52svh}
.board{position:relative;height:calc(100% - 22px);display:grid;grid-template-columns:1fr 40px 1fr;grid-template-rows:repeat(5,1fr);gap:7px 0;padding:8px;border:1.5px solid rgba(243,238,229,.32);background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(243,238,229,.03) 23px 24px)}
.board::before{content:"";grid-column:2;grid-row:1/6;border-left:1px dashed rgba(243,238,229,.25);border-right:1px dashed rgba(243,238,229,.25);margin:0 6px}
.cell{position:relative;border:1px solid rgba(243,238,229,.3);min-height:0}
.cell .lt{position:absolute;left:6px;bottom:4px;font:500 13px var(--mono);color:rgba(243,238,229,.45)}
.fill{position:absolute;inset:0;display:flex;align-items:center;gap:7px;padding:4px 6px;overflow:hidden}
.fill b{font:800 22px/1 var(--bs)}.fill em{font:600 11.5px/1.15 "IS";font-style:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.occupied .fill{background:var(--teal);color:var(--ink)}
.th{flex:none;width:clamp(28px,8svh,64px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}.th img{width:100%;height:100%;object-fit:contain}
.available .fill{background:var(--paper);color:var(--ink)}
.not_listed .fill{background:repeating-linear-gradient(135deg,#2a2a2f 0 6px,#1d1d21 6px 12px);color:rgba(243,238,229,.86)}
.mark-s{position:absolute;left:8px;top:8px;border:2.5px solid var(--paper);box-shadow:0 0 0 4px rgba(31,169,195,.5);pointer-events:none}
.plan-note{margin:6px 0 0;color:rgba(243,238,229,.55);font-size:10.5px}
.caps{position:absolute;left:16px;right:16px;top:calc(var(--bar) + 14px + 52svh + 12px);bottom:calc(80px + env(safe-area-inset-bottom))}
.cap{position:absolute;inset:0;display:flex;gap:14px;align-items:flex-start}
.cap figure{margin:0;flex:none;width:30%;max-width:170px;aspect-ratio:1;overflow:hidden;position:relative}
.cap figure img{width:100%;height:100%;object-fit:cover}.cap figure.logo img{object-fit:contain;padding:8%}
.cap figure.type{background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:10px}.cap figure.type span{font:900 clamp(26px,8vw,46px)/.86 var(--bs);text-transform:uppercase}.cap figure.type small{font:500 9px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#444}
.cap .note{margin:6px 0 0;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#ffd27a}
.cap figcaption{position:absolute;left:0;right:0;bottom:0;font:500 9px/1.2 var(--mono);background:rgba(17,17,19,.78);padding:3px 4px;color:var(--paper)}
.cap .k{color:var(--teal);margin:0 0 4px}
.cap h3{margin:0;font:900 clamp(30px,9vw,58px)/.9 var(--bs);text-transform:uppercase}
.cap .who{margin:4px 0 0;font:italic 20px/1.1 "SER",serif;color:var(--paper)}
.cap .svc{margin:6px 0 0;font-size:14px;line-height:1.4;color:rgba(243,238,229,.82)}
.cap .rt{margin:8px 0 0;font:600 14px "IS";color:var(--teal)}
/* rail */
.rail{position:absolute;left:6px;top:calc(var(--bar) + 12px);bottom:calc(84px + env(safe-area-inset-bottom));width:3px;background:rgba(243,238,229,.12)}
.rail i{position:absolute;inset:0;background:var(--teal);transform-origin:50% 0}
.rail span{position:absolute;left:10px;bottom:0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}
/* desktop */
@media(min-width:1024px){
 .stage{--aw:5.5%;--at:15%;--ab:9%;--ar:9vw}.ph img{object-position:66% 38%}
 .title{font-size:min(16.5vw,34svh);flex-direction:row;gap:.14em;align-items:baseline}.tl.a-t2{font-size:1em}
 .hero-type{top:auto;bottom:calc(48px + 150px);justify-content:flex-start;padding-left:48px}
 .hallcopy{left:8vw;bottom:10svh}
 .hcopy{left:56px;right:auto;bottom:40px;max-width:none;grid-template-columns:auto auto;align-items:end;column-gap:40px}.hcopy .k{grid-column:1/-1}.hsub{max-width:34ch}.hsub{font-size:21px}
 .rail{left:20px;bottom:48px}.cue{right:28px}
 .tn{width:21vw;margin-left:-10.5vw;margin-top:-13vw}
 .pad{width:min(26vw,300px);margin-left:calc(min(26vw,300px)/-2);margin-top:calc(min(26vw,300px)*-.5);top:58%}
 .board-wrap{left:8vw;right:auto;width:40vw;top:calc(var(--bar) + 6svh);height:80svh}
 .board{grid-template-columns:1fr 64px 1fr;gap:10px 0;padding:12px}.mark-s{left:12px;top:12px}
 .fill{gap:12px;padding:8px 12px}.fill b{font-size:32px}.fill em{font-size:15px}
 .caps{left:54vw;right:6vw;top:calc(var(--bar) + 20svh);bottom:12svh}
 .cap{flex-direction:column}.cap figure{width:220px;max-width:none}.cap h3{font-size:clamp(48px,5vw,84px)}.cap .svc{font-size:17px;max-width:42ch}.cap .who{font-size:28px}
 .opened{bottom:9svh;font-size:16px}
}
@media(min-width:1024px) and (max-width:1199px){.board-wrap{left:6vw;width:44vw}.caps{left:55vw}}
/* rough post-hero sections */
.after .hcta,.sec .hcta{margin-top:20px}
.plist{display:grid;gap:14px}@media(min-width:760px){.plist{grid-template-columns:1fr 1fr}}@media(min-width:1200px){.plist{grid-template-columns:1fr 1fr 1fr}}
.pc{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px;border:1px solid rgba(17,17,19,.16);background:#fbf8f2}
.pid{width:96px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}.pid img{width:100%;height:100%;object-fit:contain}
.pc h3{margin:2px 0;font:900 30px/.95 var(--bs);text-transform:uppercase}.pc .k{color:var(--tealD);margin:0}.pc .who{margin:4px 0 10px;font-size:14px;color:#3a3a3e}
.rts{display:flex;flex-wrap:wrap;gap:8px}.rts .btn{min-height:44px;font-size:14px;padding:0 14px}
.rates{width:100%;border-collapse:collapse;font-size:17px;margin-top:10px}.rates th,.rates td{text-align:left;padding:14px 0;border-top:1px solid var(--line);font-weight:400}.rates td{text-align:right;font:500 15px var(--mono)}
mark{background:#ffd27a;color:var(--ink);padding:1px 6px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.fine{font-size:14px;opacity:.85;max-width:60ch}
.dark .btn-ghost{color:var(--paper)}
/* reduced motion: no pin, everything resolved */
@media (prefers-reduced-motion: reduce){
 .tl>span,.ph img,.hcopy>*{animation:none!important}
 .scene{height:auto}.stage{position:relative;height:auto;overflow:visible;contain:none;display:flex;flex-direction:column}
 .sa{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
 .ph{position:relative;height:100svh}.scrim{position:absolute;inset:0;height:100svh}.hero-type,.hcopy{position:absolute}.cue,.rail,.tunnel,.wordA,.opened,.mark-s,.pad,.padcopy{display:none}
 .hall{position:relative;inset:auto;height:80svh}.hallcopy{position:relative;left:auto;right:auto;bottom:auto;margin:-140px 20px 30px}
 .inside{position:relative;inset:auto;background:var(--ink);padding:calc(var(--bar) + 20px) 0 40px}
 .board-wrap{position:relative;left:auto;right:auto;top:auto;width:auto;height:62svh;margin:0 16px}
 .caps{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:20px 16px 0;display:grid;gap:20px}.cap{position:relative;inset:auto}
}