@supports (animation-timeline: view()){
  main .s-head h2,main .i3-head h2,main .tstate-k h2,main .sstep h3,main .prof-txt h2,main .a-txt h3,main .cta h2,main .mhero-txt h1{
    animation:maskUp linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  @keyframes maskUp{from{clip-path:inset(0 0 100% 0);translate:0 .45em}to{clip-path:inset(0 0 -20% 0);translate:0 0}}
  main .area .m1,main .side-tile,main .who-plate img,main .reach-stage,main .mapcard{
    animation:unveil linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  @keyframes unveil{from{clip-path:inset(14% 6% 14% 6% round 22px)}to{clip-path:inset(0 0 0 0 round 16px)}}
  main .stats .stat,main .qa{animation:liftIn linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes liftIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce){main *{animation:none!important}}



.tower{position:relative;height:240vh;background:linear-gradient(180deg,var(--paper),var(--tint))}
.tower-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;padding-top:70px}
.tower-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,5vw,90px);align-items:center;width:100%}
.tower .jcap{max-width:36ch;margin:0 0 clamp(26px,3vw,40px);font-size:clamp(22px,2vw,28px);font-weight:200;line-height:1.45;letter-spacing:-.02em}
.tsteps{list-style:none;margin:0;padding:0}
.tstep{display:flex;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--muted);transition:color .34s ease,padding .4s cubic-bezier(.16,.84,.3,1)}
.tstep:first-child{border-top:1px solid var(--line)}
.tstep i{font-style:normal;font-family:"Jost",sans-serif;font-weight:300;font-size:14px;letter-spacing:.14em;color:rgba(59,90,124,.45);transition:color .34s ease}
.tstep b{font-weight:300;font-size:clamp(18px,1.5vw,22px)}
.tstep.on{color:var(--ink);padding-inline-start:10px}
.tstep.on i{color:var(--pine)}
.tstep.now b{color:var(--pine)}
.tower-stage{position:relative;display:grid;place-items:center}
.tower-svg{width:min(100%,520px);height:auto;overflow:visible;transition:transform .8s cubic-bezier(.16,.84,.3,1)}
.tshadow{fill:rgba(35,59,87,.14);filter:blur(10px);transform-box:fill-box;transform-origin:center;transition:transform .67s ease}
.slab{opacity:0;transform:translateY(-70px);transition:opacity .47s ease,transform .67s cubic-bezier(.16,.84,.3,1)}
.slab.on{opacity:1;transform:none}
.slab path{stroke-linejoin:round;stroke-width:6}
.slab .tt{fill:#F7FAFC;stroke:#F7FAFC}
.slab .tl{fill:#C9D6E3;stroke:#C9D6E3}
.slab .tr{fill:#A9BED3;stroke:#A9BED3}
.slab .tw{fill:rgba(255,255,255,.55);stroke:none}
.slab.now .tt{fill:#fff;stroke:#fff}
.slab.now .tr{fill:#8FA9C4;stroke:#8FA9C4}
@media (max-width:1000px){
  .tower{height:auto}.tower-pin{position:static;height:auto;padding:60px 0}.tower-g{grid-template-columns:1fr}
  .slab{opacity:1;transform:none}.tstep{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.slab{opacity:1;transform:none}}



@supports (animation-timeline: view()){
  .hero .rv,.phero .rv,.thero .rv,.mhero .rv,.lhero .rv{animation:none!important;
    transition:opacity .67s ease,transform .8s cubic-bezier(.16,.84,.3,1)!important}
  .hero .rv.d1,.phero .rv.d1,.thero .rv.d1,.mhero .rv.d1{transition-delay:.14s!important}
  .hero .rv.d2,.phero .rv.d2,.thero .rv.d2,.mhero .rv.d2{transition-delay:.28s!important}
  .hero .rv.d3,.phero .rv.d3,.thero .rv.d3,.mhero .rv.d3{transition-delay:.42s!important}
  .mhero-txt h1{animation:none!important}
}



html:not(.go) .hero .msk span,html:not(.go) .hero .rv,html:not(.go) .phero .rv,html:not(.go) .thero .rv,html:not(.go) .mhero .rv,
html:not(.go) .phero-media,html:not(.go) .tframe,html:not(.go) .mstack{opacity:0!important;transform:translateY(38px)!important;transition:none!important}
html.go .phero-media,html.go .mstack{transition:opacity .8s ease .2s,transform .94s cubic-bezier(.16,.84,.3,1) .2s}