.motion-scene{position:relative;isolation:isolate;margin-top:65px;padding:18px 0 32px;perspective:1400px}.scene-halo{position:absolute;z-index:-1;inset:10% -5% -12%;background:radial-gradient(ellipse at 50% 75%,#ffffff1c,transparent 63%);filter:blur(30px);pointer-events:none}.live-demo{--progress:0;margin:0;max-width:none;padding:0;background:linear-gradient(120deg,#ffffff0b,#ffffff02 55%),color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(24px);border:1px solid #ffffff1c;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff12,0 24px 80px #0005,0 2px 5px #0003;position:relative;overflow:hidden}.live-demo .demo-head{padding:16px 22px;border-bottom:1px solid var(--line);background:#ffffff03;font-size:12px;letter-spacing:0}.live-workspace{display:grid;grid-template-columns:.9fr 1.3fr;min-height:325px}.source-pane{padding:30px;border-right:1px solid var(--line);background:#ffffff02}.source-pane h3{margin:22px 0 14px;font-size:19px}.source-quote{font-size:18px;line-height:1.6;max-width:300px;color:var(--ink)}.source-quote mark{color:inherit;background:#ffffff10;padding:3px 5px;border-radius:3px;transition:background 700ms}.live-demo[data-step="1"] mark{background:#ffffff28}.source-reference{font-size:12px;color:var(--muted)}.source-line{width:34px;height:1px;background:var(--line);margin:24px 0 15px}.source-note{font-size:13px;color:var(--muted);max-width:280px;line-height:1.6}.output-pane{padding:26px 32px;overflow:hidden}.phase-controls{display:flex;gap:5px;padding:3px;width:max-content;background:#0002;border:1px solid var(--line);border-radius:7px}.phase-controls button{font-size:12px;border:0;border-radius:4px;background:transparent;color:var(--muted);padding:5px 12px;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}.phase-controls button[aria-pressed=true]{background:#ffffff13;color:var(--ink);box-shadow:0 1px 4px #0003,inset 0 1px 0 #ffffff0d}.phase-content{margin-top:32px;min-height:221px}.phase-kicker{font-size:11px;letter-spacing:1px;color:var(--muted);margin:0 0 15px}.phase-title{font-size:24px;letter-spacing:-.6px;font-weight:500;margin:0 0 12px}.phase-description{font-size:15px;line-height:1.6;color:var(--muted);max-width:410px;min-height:48px;margin:0 0 23px}.result-row{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--muted);padding:3px 0 3px 14px}.result-label{font-size:12px;color:var(--muted)}.result-value{font-size:14px;color:var(--ink)}.phase-note{font-size:12px;color:var(--muted);margin-top:18px}.live-demo .demo-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--line);text-align:left;background:#ffffff02;font-size:12px}.motion-control{background:none;border:0;padding:6px 8px;color:var(--muted);font-size:12px;cursor:pointer;border-radius:4px}.motion-control:hover{background:#ffffff0c;color:var(--ink)}.timeline-track{height:2px;background:var(--line)}.timeline-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#666,#eee);transform:scaleX(var(--progress));transform-origin:left}.work-visual{position:relative;background:linear-gradient(125deg,#ffffff08,transparent 70%),var(--panel);border:1px solid #ffffff0b;box-shadow:inset 0 1px 0 #ffffff05}.work-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff06 48%,transparent 75%);transform:translateX(-100%);opacity:0}.columns article:hover .work-visual:after{transform:translateX(100%);opacity:1;transition:transform 1.1s,opacity .3s}.columns article:hover .work-visual{border-color:#ffffff24;transition:border-color .4s}.hero h1{background:linear-gradient(170deg,var(--ink) 35%,var(--muted));background-clip:text;-webkit-background-clip:text;color:transparent}.reveal-pending{filter:blur(4px)}.section-heading,.columns article,.approach-heading,.approach-copy,.contact{transition-property:opacity,transform,filter;transition-duration:900ms;transition-timing-function:cubic-bezier(.16,1,.3,1)}header.wrap{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(24px) saturate(0);box-shadow:0 1px 0 #ffffff04}.live-demo.reveal-pending{transform:translateY(45px) rotateX(5deg) scale(.98);filter:blur(3px)}.live-demo{transition:opacity 1s,transform 1.2s cubic-bezier(.16,1,.3,1),filter 1s}.live-demo.revealed{filter:blur(0)}
[data-theme=light] .live-demo{border-color:#0002;background:linear-gradient(120deg,#fff9,#fff3),var(--panel);box-shadow:inset 0 1px 0 #fff,0 24px 80px #0001}[data-theme=light] .phase-controls button[aria-pressed=true]{background:#fff}[data-theme=light] .source-quote mark{background:#0001}[data-theme=light] .work-visual{border-color:#0001}[data-theme=light] .scene-halo{background:radial-gradient(ellipse,#0000000c,transparent 65%)}
@media(max-width:650px){.motion-scene{margin-top:38px;padding-top:10px}.live-workspace{grid-template-columns:1fr}.source-pane{padding:20px;border-right:0;border-bottom:1px solid var(--line)}.source-pane h3{margin-top:14px}.source-quote{max-width:none;font-size:16px}.source-note,.source-line{display:none}.source-reference{margin-bottom:0}.output-pane{padding:20px}.phase-content{min-height:240px;margin-top:24px}.phase-title{font-size:22px}.live-demo .demo-head{padding:13px 16px;font-size:11px}.live-demo .demo-foot{align-items:start;padding:10px 14px}.demo-foot>span{max-width:200px}.demo-foot>div{display:flex}.motion-control{padding:5px}.phase-description{min-height:72px}.scene-halo{inset:15% 0 0}}
.brand-suffix{font-size:12px;font-weight:450;letter-spacing:.7px;margin:3px 0 0 3px;color:var(--muted)}.hero h1{font-size:clamp(40px,5.1vw,66px);max-width:1040px}.work-visual{transition:transform 600ms cubic-bezier(.16,1,.3,1),border-color 400ms,box-shadow 600ms;transform-origin:50% 100%}#work .columns article.reveal-pending{transform:translateY(44px);opacity:0;filter:blur(5px)}#work .columns article.revealed .work-visual{animation:service-rise 1s cubic-bezier(.16,1,.3,1) both}#work .columns article:nth-child(2) .work-visual{animation-delay:90ms}#work .columns article:nth-child(3) .work-visual{animation-delay:180ms}@keyframes service-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}@media(hover:hover){#work .columns article:hover .work-visual{transform:translateY(-7px);border-color:#ffffff30;box-shadow:0 14px 35px #0003,inset 0 1px 0 #ffffff12}#work .columns article:hover h3{color:var(--ink)}#work .columns article:hover .work-visual strong{transform:translateX(3px)}.work-visual strong{transition:transform .5s cubic-bezier(.16,1,.3,1)}}
@media(max-width:650px){.hero h1{font-size:clamp(36px,9vw,48px)}.live-demo .demo-head span:last-child{display:none}.phase-title{font-size:20px}.phase-content{min-height:270px}.result-value{line-height:1.5}}
@media(prefers-reduced-motion:reduce){.reveal-pending{filter:none}.live-demo.reveal-pending{transform:none}.timeline-track{display:none}.work-visual:after{display:none}#motion-toggle{display:none}#work .columns article.reveal-pending{opacity:1;filter:none;transform:none}#work .columns article:hover .work-visual{transform:none}}