/* Small, composable motion. Nothing is hidden without successful JS setup. */
.motion-toggle{position:fixed;right:18px;bottom:16px;z-index:45;min-height:44px;padding:10px 15px;border:1px solid #4b5870;border-radius:30px;background:#111827ed;backdrop-filter:blur(12px);color:#d0def3;font-size:10px;letter-spacing:.02em;box-shadow:0 5px 24px #0003}
.motion-toggle:before{content:'Ⅱ';font-size:12px;margin-right:8px;color:#8eb9ff}.motion-toggle[aria-pressed=true]:before{content:'▷'}.motion-toggle:disabled{opacity:1;cursor:default}.motion-toggle:disabled:before{content:'—'}.site-footer{padding-bottom:58px}
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#8d82ff,#348dff,#6ad9df);transform-origin:left;pointer-events:none}.site-header{transition:background .35s,box-shadow .35s}.site-header.has-scrolled{background:#0b0e16f5;box-shadow:0 12px 36px #0002}
.motion-on .motion-pending{opacity:0}.motion-on .hero{background:radial-gradient(ellipse at 72% 38%,#19376a85,transparent 55%)}
.motion-on .hero .art-orbit:before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:#699eec8a;border-right-color:#6f80ce26;animation:ut-orbit 18s linear infinite}
.motion-on .hero .art-orbit:after{background:radial-gradient(circle at 17% 16%,#acd0ff 0 2px,transparent 4px);animation:ut-orbit 26s linear infinite reverse}
.motion-on .hero-browser{animation:ut-float 7s ease-in-out infinite;transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-4deg);transition:transform .55s cubic-bezier(.2,.75,.2,1);will-change:transform}
.motion-on .hero-secondary{animation:ut-float-small 8.5s ease-in-out infinite;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(6deg);transition:transform .65s cubic-bezier(.2,.75,.2,1)}
.motion-on .hero-art.pointer-active .hero-browser{transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-2deg)}
.motion-on .hero-art.pointer-active .hero-secondary{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(3deg)}
@media(min-width:701px){.hero-art-note{bottom:-65px}}
.motion-on .gradient-text{background-size:180% 100%;animation:ut-gradient 9s ease-in-out infinite alternate}
.motion-on .live-dot,.motion-on .hero-copy .eyebrow:before{animation:ut-glow 3s ease-in-out infinite}
.motion-on .project-image{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s ease,border-color .3s,box-shadow .3s}
.motion-on .project-image.pointer-active{box-shadow:0 20px 55px #0004}
.motion-on .project-image:after,.motion-on .service-card:after,.motion-on .studio-mark:after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),#8ab5ff22,transparent 65%);opacity:0;pointer-events:none;transition:opacity .35s}
.motion-on .pointer-active:after{opacity:1}.service-card{position:relative;overflow:hidden}.motion-on .service-card:after{background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%),#3c80e91a,transparent 65%)}
.motion-on .service-card:hover .service-icon svg{transform:rotate(-9deg) scale(1.12)}.service-icon svg{transition:transform .4s}
.motion-on .button-primary{transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .3s cubic-bezier(.2,.75,.2,1),background .2s,box-shadow .2s}.motion-on .button-primary:hover{box-shadow:0 9px 38px #267bff45}
.motion-on .button-primary svg{transition:transform .3s}.motion-on .button-primary:hover svg{transform:translate(2px,-2px)}
.process-grid{gap:16px;border-top:0;padding-top:0;align-items:start}.process-grid .process-step{padding:24px 20px;border:1px solid #313b4d;border-radius:12px;background:#111722;transition:border-color .3s,background .3s}.process-step summary{list-style:none;cursor:pointer;min-height:130px;position:relative}.process-step summary::-webkit-details-marker{display:none}.process-step summary:after{content:'+';position:absolute;top:0;right:0;color:#9ebbe6;font-size:20px}.process-step[open] summary:after{content:'−'}.process-step[open]{border-color:#5b87c7;background:linear-gradient(135deg,#1c304e,#111722)}.process-step[open] .step-number{color:#afcfff}.process-step summary:focus-visible{outline-offset:8px}.process-grid .process-step p{margin-top:0;padding-top:17px;border-top:1px solid #415474;color:#b4c4dc}
.workflow li{transition:background .3s,border-color .3s,box-shadow .3s}.workflow li.step-running{background:#254879;border-color:#87b8ff;box-shadow:0 0 30px #357ff329}.workflow li.step-complete{background:#193a35;border-color:#598f83;color:#c1eddb}.motion-on .workflow li.step-running:after{color:#b6d4ff}.workflow-controls{display:flex;align-items:center;gap:25px;margin-top:26px}.workflow-status{font-size:12px;max-width:490px;margin:0;color:#b5d3ca}
.motion-background *,.motion-background *:before,.motion-background *:after{animation-play-state:paused!important}
.motion-away *,.motion-away *:before,.motion-away *:after{animation-play-state:paused!important}
@keyframes ut-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes ut-float-small{0%,100%{translate:0 0}50%{translate:0 9px}}
@keyframes ut-orbit{to{rotate:360deg}}
@keyframes ut-gradient{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes ut-glow{0%,100%{box-shadow:0 0 0 0 #5b9fff00}50%{box-shadow:0 0 0 5px #5b9fff18,0 0 18px #5b9fff77}}
@media(max-width:1000px){.process-grid{grid-template-columns:1fr 1fr}.process-step summary{min-height:110px}}
@media(max-width:700px){.motion-toggle{right:12px;bottom:12px;font-size:9px;min-height:44px}.process-grid{gap:12px}.process-grid .process-step{padding:21px 16px}.process-step summary{min-height:98px}.process-step summary h3{font-size:18px}.process-step summary:after{font-size:18px}.workflow-controls{flex-direction:column;align-items:flex-start;gap:16px}.motion-on .hero-browser{animation:ut-float 9s ease-in-out infinite;transform:rotate(-3deg)}.motion-on .hero-secondary{animation:ut-float-small 10s ease-in-out infinite;transform:rotate(5deg)}}
@media(max-width:370px){.process-grid{grid-template-columns:1fr}.process-step summary{min-height:85px}}
@media(prefers-reduced-motion:reduce){.reading-progress{display:none}.motion-pending{opacity:1!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.motion-toggle,.reading-progress,.workflow-controls{display:none}.motion-pending{opacity:1!important}.process-step p{display:block}}