/* The same pieces carry each story from curiosity to a finished experience. */
.approach .process-object{display:block;width:100%;height:186px;margin:10px 0 0;padding:0;text-align:left;border:0;border-radius:6px;background:none;color:#345b72;isolation:isolate;touch-action:pan-y}
.process-object .process-motion{display:block;position:absolute;inset:0 0 26px;perspective:650px;transform-style:preserve-3d;transform:rotateX(var(--process-x,0deg)) rotateY(var(--process-y,0deg));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.process-object .process-object-rig{left:calc(50% - 49px);top:31px;width:98px;height:98px;transform:rotateX(52deg) rotateY(-8deg) rotateZ(-30deg);transition:transform 1.35s cubic-bezier(.22,.7,.18,1)}
.process-object .process-object-rig>i,.process-object .process-object-rig>b{display:block;transition:transform 1.35s cubic-bezier(.22,.7,.18,1),border-radius 1.35s,background-color 1.2s,opacity 1s;transform:translateZ(calc(var(--layer,0)*15px));backface-visibility:visible}
.process-object .process-object-rig>b{transform:translateZ(34px) scale(.32);background:linear-gradient(130deg,#e8f8ff,#4c8aaf 50%,#244e70);border-radius:50%;clip-path:none;box-shadow:0 0 16px #83bada44}
.process-action{position:absolute;bottom:5px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;font-size:8px;letter-spacing:.2px;color:#536c7a;line-height:1.5;min-height:20px}
.process-action .ui-arrow{width:10px;height:10px;opacity:.7;transition:transform 1s}.process-object[aria-pressed=true] .process-action .ui-arrow{transform:rotate(90deg)}
.process-focus-ring{position:absolute;left:calc(50% - 64px);top:16px;width:128px;height:128px;border:1px solid #5785a338;border-radius:50%;transform:scale(.7);opacity:0;transition:transform 1.4s,opacity 1s;pointer-events:none}
.process-focus-ring:before,.process-focus-ring:after{content:'';position:absolute;width:10px;height:1px;left:-5px;top:50%;background:#5184a0}.process-focus-ring:after{left:auto;right:-5px}
.process-interface{position:absolute;inset:12px;border:0;display:flex;flex-direction:column;gap:7px;opacity:0;transform:translateY(6px);transition:opacity .9s,transform 1.2s}
.process-interface>span{display:block;height:6px;width:60%;border-radius:3px;background:#effaffbb}.process-interface>span:nth-child(2){height:28px;width:100%;background:linear-gradient(125deg,#d6f1ff,#407698)}.process-interface>span:nth-child(3){height:11px;width:100%;background:#d7efff6e}
.process-finish{position:absolute;left:calc(50% - 20px);top:58px;width:40px;height:40px;opacity:0;transform:translateZ(40px) scale(.65);transition:opacity 1.1s,transform 1.4s}.process-finish svg{width:100%;height:100%;fill:none;stroke:#e3f6ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Discover: divergent planes find their shared center. */
.phase-0 .process-object-rig>i{border-color:#5d849d99;box-shadow:inset 0 1px 0 #faffff99}
.phase-0[data-stage="1"] .process-object-rig{transform:rotateX(20deg) rotateY(8deg) rotateZ(0)}
.phase-0[data-stage="1"] .process-object-rig>i:nth-child(1){transform:translate3d(-33px,3px,-12px) rotateZ(-28deg)}
.phase-0[data-stage="1"] .process-object-rig>i:nth-child(2){transform:translate3d(29px,-6px,5px) rotateZ(28deg)}
.phase-0[data-stage="1"] .process-object-rig>i:nth-child(3){transform:translate3d(0,-19px,22px) rotateZ(5deg)}
.phase-0[data-stage="2"] .process-object-rig,.phase-0[data-stage="3"] .process-object-rig{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
.phase-0[data-stage="2"] .process-object-rig>i,.phase-0[data-stage="3"] .process-object-rig>i{transform:translateZ(calc(var(--layer,0)*3px)) scale(calc(1 - var(--layer,0)*.13));border-radius:50%}
.phase-0[data-stage="3"] .process-focus-ring{opacity:1;transform:scale(1)}
.phase-0[data-stage="3"] .process-object-rig>b{transform:translateZ(20px) scale(.25);box-shadow:0 0 22px #5c9fc688}
/* Create: translucent layers become one small, usable interface. */
.phase-1[data-stage="1"] .process-object-rig{transform:rotateX(38deg) rotateY(-8deg) rotateZ(-18deg)}
.phase-1[data-stage="1"] .process-object-rig>i{transform:translateZ(calc(var(--layer,0)*30px))}
.phase-1[data-stage="2"] .process-object-rig,.phase-1[data-stage="3"] .process-object-rig{transform:rotateX(0deg) rotateY(-9deg) rotateZ(-3deg) scale(.95,1.14)}
.phase-1[data-stage="2"] .process-object-rig>i,.phase-1[data-stage="3"] .process-object-rig>i{transform:translateZ(calc(var(--layer,0)*3px));border-radius:13px;background-color:#3d779c}
.phase-1[data-stage="2"] .process-object-rig>b,.phase-1[data-stage="3"] .process-object-rig>b{transform:translate3d(28px,-36px,14px) scale(.07);opacity:.8}
.phase-1[data-stage="2"] .process-interface,.phase-1[data-stage="3"] .process-interface{opacity:1;transform:translateY(0)}
.phase-1[data-stage="3"] .process-focus-ring{opacity:.7;transform:scale(1.05);border-radius:22px}
/* Refine: separate surfaces align, then a single polished face resolves. */
.phase-2 .process-object-rig>i{overflow:hidden;transform:translateZ(calc(var(--layer,0)*6px))}
.phase-2 .process-object-rig>b{transform:translateZ(18px) scale(.24)}
.phase-2[data-stage="1"] .process-object-rig{transform:rotateX(32deg) rotateY(12deg) rotateZ(-10deg)}
.phase-2[data-stage="1"] .process-object-rig>i:nth-child(1){transform:translate3d(-16px,10px,-14px) rotateZ(-10deg)}
.phase-2[data-stage="1"] .process-object-rig>i:nth-child(3){transform:translate3d(16px,-10px,14px) rotateZ(10deg)}
.phase-2[data-stage="2"] .process-object-rig,.phase-2[data-stage="3"] .process-object-rig{transform:rotateX(0deg) rotateY(-6deg) rotateZ(0deg) scale(.92)}
.phase-2[data-stage="2"] .process-object-rig>i,.phase-2[data-stage="3"] .process-object-rig>i{transform:translateZ(calc(var(--layer,0)*2px));border-radius:25px}
.phase-2[data-stage="2"] .process-object-rig>b,.phase-2[data-stage="3"] .process-object-rig>b{opacity:0;transform:translateZ(15px) scale(.08)}
.phase-2[data-stage="3"] .process-finish{opacity:1;transform:translateZ(40px) scale(1)}
.phase-2 .process-object-rig>i:last-of-type:after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;background:linear-gradient(115deg,transparent 20%,#f1fcff88 50%,transparent 75%);transform:translateX(-60%);transition:transform 1.9s,opacity 1.2s}
.phase-2[data-stage="3"] .process-object-rig>i:last-of-type:after{transform:translateX(20%);opacity:.5}
@media(hover:hover){.process-object:hover .process-action{color:#1e597e}.process-object:hover .process-action .ui-arrow{transform:translate(2px,-2px)}}
@media(max-width:700px){.process-grid .process-step{grid-template-columns:minmax(0,1fr) 116px;gap:0 14px}.approach .process-object{height:150px;margin:0;grid-row:1/4;grid-column:2;align-self:center}.process-object .process-object-rig{width:76px;height:76px;top:22px;left:calc(50% - 38px)}.process-object .process-motion{perspective:500px}.process-focus-ring{width:100px;height:100px;left:calc(50% - 50px);top:10px}.process-finish{top:40px}.process-action{font-size:7px;line-height:1.4;gap:5px;bottom:0;min-height:28px}.process-action .ui-arrow{width:9px;height:9px;flex-shrink:0}.process-interface{inset:10px;gap:5px}.process-interface>span:nth-child(2){height:22px}.process-grid .process-step p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.process-object *,.process-object *:before,.process-object *:after{transition:none!important}}
body.motion-paused .process-object *,body.motion-paused .process-object *:before,body.motion-paused .process-object *:after{transition:none!important}