/* AUTO-GENERATED from 04_V2_Experience/pro-tower.html. Do not edit. */
/* ============ ACT 1, REVEAL ============ */
.p-reveal{position:relative;height:100svh;min-height:640px;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.p-reveal .stage{position:relative;width:min(1180px,86vw)}
.p-reveal .stage img{width:100%;filter:drop-shadow(0 50px 90px rgba(0,0,0,.75))}
.p-reveal .stage .dim{filter:brightness(.22) drop-shadow(0 50px 90px rgba(0,0,0,.75))}
.p-reveal .stage .lit{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.p-reveal .word{position:absolute;left:0;right:0;bottom:10vh;text-align:center;z-index:3}
.p-reveal .word h1{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--steel-2);font-size:clamp(44px,9vw,132px);line-height:1;letter-spacing:.34em;padding-left:.34em;opacity:0}
.p-reveal .word .cat{margin-top:16px;font-family:var(--body);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);opacity:0}
.p-reveal .cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:1px;height:40px;background:var(--line);overflow:hidden}
.p-reveal .cue::after{content:"";display:block;width:100%;height:50%;background:var(--steel-2);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(200%)}}

/* ============ ACT 2, INTRODUCE ============ */
.p-intro{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.p-intro .mach{position:absolute;top:8vh;right:-4vw;width:min(44vw,620px);opacity:.85;z-index:0}
.p-intro .inner{position:relative;z-index:2}
.p-intro .one{font-size:clamp(26px,3.2vw,44px);line-height:1.3;font-weight:300;color:var(--white);max-width:24ch}
.p-intro .hooks{display:flex;gap:56px;margin-top:8vh;border-top:1px solid var(--line);padding-top:34px;flex-wrap:wrap}
.p-intro .hooks .h .v{font-family:var(--disp);font-weight:300;font-size:clamp(34px,3.6vw,56px);color:var(--white)}
.p-intro .hooks .h .v b{font-weight:600;color:var(--steel-2)}
.p-intro .hooks .h .l{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--muted);margin-top:8px}

/* ============ ACT 3, WHY IT EXISTS ============ */
.p-why{position:relative;height:300vh}
.p-why .sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.p-why .bg{position:absolute;inset:0;z-index:0}
.p-why .bg img{width:100%;height:100%;object-fit:cover;opacity:.12;transform:scale(1)}
.p-why .beat{position:absolute;left:0;right:0;padding:0 40px;max-width:var(--maxw);margin:0 auto;opacity:0}
.p-why .beat p{font-family:var(--disp);font-weight:500;text-transform:uppercase;color:var(--white);font-size:clamp(26px,3.6vw,52px);line-height:1.14;max-width:26ch}
.p-why .beat .n{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--steel);margin-bottom:22px}

/* ============ ACT 4, PHILOSOPHY PANELS ============ */
.p-phil .panel{min-height:88vh;display:flex;align-items:center;border-top:1px solid var(--line-2)}
.p-phil .panel .grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:60px;align-items:baseline;width:100%}
.p-phil .panel .no{font-family:var(--disp);font-size:13px;letter-spacing:.2em;color:var(--steel);border-top:1px solid var(--line);padding-top:18px}
.p-phil .panel h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--white);font-size:clamp(30px,4.6vw,68px);line-height:1}
.p-phil .panel .d{margin-top:22px;font-size:17px;font-weight:300;color:var(--txt);max-width:52ch}

/* ============ ACT 5, CAD TO REALITY ============ */
.p-cad .frame{position:relative;max-width:1180px;margin:0 auto;border:1px solid var(--line);background:#e9eaec;overflow:hidden;aspect-ratio:16/10}
.p-cad .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-cad .frame .real{clip-path:inset(0 0 0 100%)}
.p-cad .handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:0;box-shadow:0 0 18px rgba(0,0,0,.4);z-index:3}
.p-cad .tagword{position:absolute;z-index:4;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#0a0b0d;background:#fff;padding:7px 12px}
.p-cad .tagword.l{left:18px;top:18px}
.p-cad .tagword.r{right:18px;bottom:18px}
.p-cad .cap{text-align:center;margin-top:26px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--muted)}

/* ============ ACT 6, ANATOMY ============ */
.p-anat{position:relative;height:340vh}
.p-anat .sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:84px}
.p-anat .head{text-align:center;margin-bottom:4vh}
.p-anat .head h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--white);font-size:clamp(26px,3.4vw,52px)}
.p-anat .head p{color:var(--muted);margin-top:12px}
.p-anat .stage{position:relative;height:min(60vh,calc(90vw*.577));aspect-ratio:1000/577;width:auto;margin:0 auto}
.p-anat .stage>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 80px rgba(0,0,0,.7))}
.hs{position:absolute;opacity:0;transform:translateY(8px)}
.hs .mark{width:22px;height:22px;border-radius:50%;border:1px solid var(--steel);position:relative;background:rgba(10,11,13,.5);transition:border-color .3s}
.hs .mark::before,.hs .mark::after{content:"";position:absolute;background:var(--steel-2);transition:background .3s}
.hs .mark::before{left:50%;top:5px;bottom:5px;width:1px;transform:translateX(-50%)}
.hs .mark::after{top:50%;left:5px;right:5px;height:1px;transform:translateY(-50%)}
.hs .card{position:absolute;left:30px;top:-8px;width:max-content;max-width:196px;background:rgba(16,18,22,.85);border:1px solid var(--line);padding:11px 13px;backdrop-filter:blur(6px)}
.hs .card .k{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.13em;font-size:10px;color:var(--white)}
.hs .card .v{display:block;font-size:11.5px;color:var(--steel);margin-top:3px;line-height:1.45}
.hs:hover{z-index:5}
.hs.flip .card{left:auto;right:32px;text-align:right}
.p-anat .stage:hover .hs{opacity:.35}
.p-anat .stage .hs:hover{opacity:1!important}
.p-anat .stage .hs:hover .mark{border-color:var(--steel-2)}

/* ============ ACT 7, PERFORMANCE ============ */
.p-perf{background:#08090b;border-top:1px solid var(--line-2)}
.p-perf .rows{margin-top:6vh}
.p-perf .r{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;padding:5vh 0;border-bottom:1px solid var(--line-2)}
.p-perf .r .v{font-family:var(--disp);font-weight:300;font-size:clamp(48px,6vw,96px);color:var(--white);line-height:1}
.p-perf .r .v b{font-weight:600;color:var(--steel-2)}
.p-perf .r .l{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted);margin-top:10px}
.p-perf .r .bar{height:1px;background:var(--line-2);position:relative}
.p-perf .r .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--steel);width:0}
.p-perf .r .bar .cap{position:absolute;right:0;top:12px;font-family:var(--disp);font-size:10px;letter-spacing:.16em;color:var(--low);text-transform:uppercase}
.p-perf .note{margin-top:36px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted)}

/* ============ ACT 8, SPECIFICATIONS (light) ============ */
.p-spec{background:var(--paper);color:var(--ink)}
.p-spec .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
.p-spec h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--ink);font-size:clamp(28px,3.6vw,56px);line-height:1}
.p-spec .head p{color:#5b6168;max-width:44ch}
.p-spec .btn{border-color:var(--ink);color:var(--ink)}
.p-spec .btn:hover{background:var(--ink);color:var(--paper)}
.p-spec table{width:100%;border-collapse:collapse;margin-top:50px}
.p-spec tr{border-bottom:1px solid var(--hair-paper)}
.p-spec th{font-family:var(--disp);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#5b6168;text-align:left;font-weight:500;padding:20px 24px 20px 0;vertical-align:top;width:34%}
.p-spec td{font-size:15px;color:var(--ink);padding:20px 0;line-height:1.6}

/* ============ ACT 9, CLOSE ============ */
.p-close{text-align:center;padding:18vh 0 14vh}
.p-close .mach{width:min(680px,74vw);margin:0 auto 6vh}
.p-close h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--white);font-size:clamp(34px,5.4vw,84px);line-height:.95}
.p-close .b{margin-top:42px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.p-close .proof{margin-top:56px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted)}

/* compare embed band */
.p-range{border-top:1px solid var(--line-2);background:var(--ink-2)}
.p-range .grid{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.p-range h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--white);font-size:clamp(22px,2.6vw,38px)}
.p-range p{color:var(--muted);margin-top:10px;max-width:52ch}

@media(prefers-reduced-motion:reduce){
  .p-reveal .stage .dim{filter:none}
  .p-reveal .stage .lit{clip-path:inset(0 0 0 0)!important}
  .p-reveal .word h1,.p-reveal .word .cat{opacity:1!important}
  .p-why{height:auto}
  .p-why .sticky{position:static;height:auto;padding:14vh 0;display:block}
  .p-why .beat{position:static;opacity:1!important;margin-bottom:8vh}
  .p-anat{height:auto}
  .p-anat .sticky{position:static;height:auto;padding:12vh 0}
  .hs{opacity:1!important;transform:none!important}
  .p-cad .frame .real{clip-path:inset(0 0 0 0)!important}
  .p-perf .r .bar i{width:var(--w)!important}
}
@media(max-width:760px){
  .p-reveal{height:auto;min-height:0;padding:12vh 0 6vh;display:block}
  .p-reveal .stage{width:92vw;margin:0 auto}
  .p-reveal .word{position:static;bottom:auto;margin-top:3.5vh;padding:0 6vw}
  .p-reveal .cue{display:none}
  .p-reveal .word h1{letter-spacing:.14em;padding-left:.14em}
  .p-intro .mach{position:static;width:100%;margin-bottom:40px;opacity:1}
  .p-intro{display:block;padding:16vh 0 10vh}
  .p-why{height:auto}
  .p-why .sticky{position:static;height:auto;padding:10vh 0;display:block}
  .p-why .beat{position:static;opacity:1;margin-bottom:9vh;padding:0 22px}
  .p-phil .panel .grid{grid-template-columns:1fr;gap:20px}
  .p-anat{height:auto}
  .p-anat .sticky{position:static;height:auto;padding:10vh 0}
  .p-anat .stage{aspect-ratio:auto}
  .p-anat .stage>img{position:static}
  .hs{position:static;opacity:1;transform:none;display:flex;gap:14px;align-items:flex-start;margin-top:18px}
  .hs .mark{flex:0 0 22px}
  .hs .card{position:static;max-width:none;background:transparent;border:none;padding:0;backdrop-filter:none}
  .hs.flip .card{text-align:left}
  .p-perf .r{grid-template-columns:1fr;gap:26px}
  .p-spec th{width:44%;padding-right:14px}
}