body.services-page.what-page{background:#050505;color:var(--paper);cursor:auto}
.what-page .site-header{background:#050505}
.what-page .services-intro{min-height:58vh;padding-bottom:70px}

/* switch */
.what-switch{display:flex;justify-content:center;padding:0 7vw 70px}
.what-switch div{display:inline-flex;border:1px solid rgba(255,255,255,.25);padding:4px;border-radius:999px}
.what-switch button{padding:12px 26px;border-radius:999px;font:500 14px var(--sans);color:rgba(255,255,255,.65);cursor:pointer;transition:background .4s,color .4s}
.what-switch button[aria-pressed=true]{background:#fff;color:#050505}
.what-switch button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* timeline */
.tl{position:relative;max-width:1180px;margin:0 auto;padding:20px 7vw 140px;isolation:isolate}
.tl-line{position:absolute;top:0;bottom:140px;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.08);z-index:0}
.tl-fill{position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(0);box-shadow:0 0 14px rgba(255,255,255,.5);will-change:transform}
.tl-head{position:absolute;left:50%;top:0;width:12px;height:12px;border-radius:50%;background:#f1c1d0;box-shadow:0 0 22px 5px rgba(241,193,208,.7);transform:translate(-50%,-50%);will-change:top}
.tl-items{position:relative;z-index:1;display:flex;flex-direction:column;gap:12vh;transition:opacity .35s}
.tl-items.swap{opacity:0}
.tl-card{position:relative;width:calc(50% - 52px);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.03);opacity:.3;transform:scale(.98) translateY(20px);transition:opacity .7s,transform .8s cubic-bezier(.16,1,.3,1),border-color .6s,box-shadow .8s}
.tl-card:nth-child(odd){align-self:flex-start}
.tl-card:nth-child(even){align-self:flex-end}
.tl-card.active{opacity:1;transform:none;border-color:rgba(255,255,255,.28);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 50px -30px rgba(255,255,255,.35)}
.tl-card:after{content:'';position:absolute;top:50%;width:32px;height:1px;background:#fff;transform:scaleX(0);transition:transform .5s .1s}
.tl-card:nth-child(odd):after{left:100%;transform-origin:left}
.tl-card:nth-child(even):after{right:100%;transform-origin:right}
.tl-card.active:after{transform:scaleX(1)}
.tl-text h3{margin:0 0 10px;font:600 18px var(--sans);letter-spacing:.04em;text-transform:uppercase}
.tl-text h3 b{font:400 italic 22px var(--serif);margin-right:12px;opacity:.7}
.tl-text p{margin:0;color:#cfcfcf;line-height:1.55;font-size:15px;max-width:44ch}
.tl-icon{flex:none;width:68px;height:68px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.7);transition:color .5s,border-color .5s,transform .6s}
.tl-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tl-card.active .tl-icon{color:#fff;border-color:rgba(255,255,255,.5);transform:rotate(4deg)}
.tl-cta{display:flex;justify-content:center;margin-top:12vh}
.tl-cta .button{max-width:340px}

/* people */
.people{padding:110px 7vw 130px;border-top:1px solid rgba(255,255,255,.12);overflow:hidden}
.people h2{font:400 clamp(44px,6.4vw,104px)/.95 var(--sans);letter-spacing:-.05em;margin:0}
.people h2 em{font:italic 400 1em var(--serif);letter-spacing:-.03em}
.people-sub{max-width:44ch;color:rgba(255,255,255,.6);line-height:1.5;margin:22px 0 0}
.people-note{margin:14px 0 0;color:#777;font-size:12px}
.people-stage{position:relative;height:720px;margin-top:110px}
.pcard{position:absolute;width:220px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;opacity:1;transform:translate(-50%,-50%) scale(.35);transition:filter .25s ease}
.pcard.in-view{opacity:1;transform:none}
.pcard.drag{cursor:grabbing;z-index:5}
.pcard-in{border:1px solid rgba(255,255,255,.16);background:#000;border-radius:6px;overflow:hidden;animation:pfloat var(--d,6s) ease-in-out infinite alternate;transition:border-color .4s}
.pcard:hover .pcard-in,.pcard.drag .pcard-in{border-color:rgba(255,255,255,.55)}
.pcard img{display:block;width:100%;height:160px;object-fit:cover;filter:grayscale(1) contrast(1.05);pointer-events:none;transition:filter .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.pcard.in-view img{filter:grayscale(0) contrast(1);transform:scale(1.02)}
.pcard-b{padding:12px 13px 14px}
.pcard-b strong{display:block;font:600 14px var(--sans)}
.pcard-b span{display:block;margin-top:2px;font-size:12px;color:#8a8a8a}
.pcard-b div{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:#bbb}
.pcard-b em{font-style:normal;color:#fff}
@keyframes pfloat{to{transform:translateY(-14px)}}
.what-end{text-align:center;padding:100px 7vw 130px;border-top:1px solid rgba(255,255,255,.12)}
.what-end h2{font:italic 400 clamp(48px,7vw,112px)/.95 var(--serif);letter-spacing:-.04em;margin:0 0 40px}
.what-end .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.what-end .button{width:auto;min-width:240px;margin:0}
.what-end .button-dark{border-color:rgba(255,255,255,.35);color:#fff}
.what-end .button-dark:hover{background:#fff;color:#050505}

@media(max-width:900px){
  .tl{padding:10px 20px 100px 56px}
  .tl-line{left:20px}.tl-head{left:20px}
  .tl-card,.tl-card:nth-child(odd),.tl-card:nth-child(even){width:100%;align-self:stretch;flex-direction:column-reverse;align-items:flex-start;padding:22px}
  .tl-card:nth-child(odd):after,.tl-card:nth-child(even):after{left:auto;right:100%;width:24px;transform-origin:right}
  .tl-icon{width:54px;height:54px}
  .tl-items{gap:8vh}
  .people{padding:80px 22px 90px}
  .people-stage{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-top:70px}
  .pcard{position:relative;left:auto!important;top:auto!important;flex:0 0 190px;scroll-snap-align:start;cursor:auto;touch-action:pan-x}
  .what-end{padding:80px 22px 100px}
}
@media(prefers-reduced-motion:reduce){
  .tl-card{opacity:1;transform:none;transition:none}
  .tl-card:after{transform:scaleX(1)}
  .tl-head,.tl-fill{display:none}
  .pcard-in{animation:none}
}