/* Four physical studies, tied to the four stages of the work. */
#approach .process-board{aspect-ratio:1/1.05;top:110px;isolation:isolate;background:#f1eff5;min-width:0}
.process-visual{position:absolute;inset:11% 2% 12%;overflow:hidden}
.process-visual>.process-sculpture{inset:7% 6%;transition:opacity .35s}
#process-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .35s;pointer-events:none}
.process-ready>#process-canvas{opacity:1}
.process-ready>.process-sculpture{visibility:hidden;opacity:0}
#approach .board-stage-labels{z-index:3;bottom:80px;right:30px;font-size:12px;font-variant-numeric:tabular-nums;color:#746784}
#approach .board-top,#approach .board-bottom{color:#857790}
#approach .story-step{position:relative;min-height:160px;padding:20px 0;cursor:pointer;transition:border-color .3s}
#approach .story-step h3{margin-bottom:10px}
#approach .story-step.is-current{border-top-color:#a393b8}
#approach .story-step.is-current{background:linear-gradient(90deg,#f5f2f955,transparent 85%)}
#approach .story-step.is-current .process-step-button{color:#73558f}
.process-next{position:absolute;inset:10% 2% 12%;z-index:2;background:transparent;border:0;border-radius:20px;cursor:pointer;touch-action:pan-y pinch-zoom}
.process-next:focus-visible{outline:1px solid #a493b8;outline-offset:-8px}
.process-step-button{display:inline-flex;align-items:center;gap:13px;min-height:44px;padding:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;border:0;border-radius:0;cursor:pointer}
.process-step-button::before{content:'';width:6px;height:6px;border-radius:50%;background:#8c72aa;flex-shrink:0;opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s}
.process-step-button[aria-current=step]::before,.process-step-button:hover::before{opacity:1;transform:scale(1)}
.process-step-button:focus-visible{outline:2px solid #a18bb8;outline-offset:7px;border-radius:2px}
#approach .story-step p{margin-left:19px}
@media(max-width:1000px){#approach .process-board{top:104px}.process-step-button{gap:10px}#approach .story-step p{margin-left:16px}}
@media(max-width:800px){#approach .process-board{position:sticky;top:84px;z-index:3;height:clamp(230px,34svh,300px);max-height:none;aspect-ratio:auto;border:1px solid #e6e0eb;box-shadow:0 14px 20px #ffffffd9}#approach .process-visual{inset:9% 6% 12%}#approach .board-top{font-size:8px}#approach .board-bottom{bottom:15px;padding-top:12px;font-size:8px}#approach .board-stage-labels{bottom:48px;right:20px;font-size:10px}#approach .story-steps{margin-top:24px}#approach .story-step{min-height:164px;padding:22px 0;scroll-margin-top:calc(110px + clamp(230px,34svh,300px))}#approach .story-step h3{font-size:22px;margin-bottom:10px}#approach .story-step p{font-size:15px}}
@media(prefers-reduced-motion:reduce){#process-canvas,.process-visual>.process-sculpture,.process-step-button::before,#approach .story-step{transition:none}}
@media(max-width:800px) and (max-height:450px){#approach .process-board{position:relative;top:auto;height:230px;box-shadow:none}#approach .story-step{scroll-margin-top:84px}}