.digital-stage{perspective:1100px}.hero-line{display:inline-block}.agency-copy h1>em{display:inline-block}
.js[data-motion="on"] .hero-line{animation:fp-line-in .8s cubic-bezier(.2,.7,.2,1) both}
.js[data-motion="on"] .agency-copy h1>em{animation:fp-line-in .9s cubic-bezier(.2,.7,.2,1) .12s both}
.js[data-motion="on"] .agency-intro{animation:fp-line-in .8s cubic-bezier(.2,.7,.2,1) .23s both}
.js[data-motion="on"] .agency-actions{animation:fp-line-in .8s cubic-bezier(.2,.7,.2,1) .34s both}
.js[data-motion="on"] .digital-stage .studio-browser{animation:fp-browser-float 6.4s ease-in-out infinite;transform:rotate(-4deg) rotateX(var(--pointer-rot-x,0deg)) rotateY(var(--pointer-rot-y,0deg));transition:transform .35s var(--ease);will-change:translate}
.js[data-motion="on"] .digital-stage:hover .studio-browser{transform:rotate(-2deg) rotateX(var(--pointer-rot-x,0deg)) rotateY(var(--pointer-rot-y,0deg))}
.js[data-motion="on"] .digital-mobile{animation:fp-phone-float 5.6s ease-in-out -1.8s infinite;will-change:translate}
.js[data-motion="on"] .build-card{animation:fp-card-float 7.3s ease-in-out -.9s infinite;will-change:translate}
.js[data-motion="on"] .canvas-graphic>span{animation:fp-star-turn 28s linear infinite}
.js[data-motion="on"] .designer-cursor{animation:fp-cursor-drift 8.5s ease-in-out -2s infinite}
.agency-primary>span:last-child,.contact-button>span:last-child{display:inline-block;transition:transform .3s var(--ease)}.agency-primary:hover>span:last-child,.contact-button:hover>span:last-child{transform:translate(3px,-3px)}
.motion-marquee{background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}.motion-marquee-inner{display:flex;align-items:center;gap:32px;padding-block:22px}.marquee-window{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 96%,transparent)}.marquee-track{display:flex;width:max-content;transform:translateX(0);color:var(--ink)}.marquee-group{display:flex;align-items:center;gap:31px;flex-shrink:0;padding-right:31px}.marquee-word{font:500 clamp(23px,2.6vw,37px)/1.15 var(--sans);letter-spacing:-1.2px;white-space:nowrap}.marquee-word:nth-child(4n+3){font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.7px}.marquee-symbol{color:var(--em);font-size:25px;line-height:1}.js[data-motion="on"] .marquee-track{animation:fp-marquee 32s linear infinite;will-change:transform}.marquee-window:hover .marquee-track{animation-play-state:paused}
.motion-toggle{display:none;flex-shrink:0;align-items:center;gap:9px;justify-content:center;padding:10px 13px;min-height:42px;border:1px solid var(--line);color:var(--muted);font-size:9px;white-space:nowrap;background:var(--paper);transition:color .2s,border-color .2s}.js .motion-toggle{display:flex}.motion-toggle[hidden]{display:none!important}.motion-toggle:hover{border-color:var(--ink);color:var(--ink)}.motion-icon{display:flex;align-items:center;justify-content:center;width:15px;height:15px}.motion-icon-play{display:none}[data-motion="off"] .motion-icon-pause{display:none}[data-motion="off"] .motion-icon-play{display:block}
.work-grid{perspective:1300px}.project-art{transition:transform .35s var(--ease),box-shadow .35s var(--ease);transform:perspective(1000px) rotateX(0) rotateY(0)}.project-art::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(350px circle at var(--spot-x,50%) var(--spot-y,50%),#ffffff24,transparent 65%);opacity:0;transition:opacity .3s}.js[data-motion="on"] .work-card:hover .project-art{transform:perspective(1000px) rotateX(var(--pointer-rot-x,0deg)) rotateY(var(--pointer-rot-y,0deg));box-shadow:0 14px 26px #14213b12}.js[data-motion="on"] .work-card:hover .project-art::after{opacity:1}.work-card:focus-visible .project-art{box-shadow:0 10px 25px #14213b15}.work-card:hover .project-open{background:var(--accent);color:var(--accent-ink);border-color:transparent;transform:translate(3px,-3px) rotate(3deg)}.js[data-motion="on"] .work-card:hover .barber-site{translate:0 -4px;transition:transform .6s var(--ease),translate .6s var(--ease)}
.js[data-motion="on"] .work-card:nth-child(2){transition-delay:.1s}.js[data-motion="on"] .process-step:nth-child(2){transition-delay:.1s}.js[data-motion="on"] .process-step:nth-child(3){transition-delay:.2s}
.js[data-motion="off"] .reveal{opacity:1!important;transform:none!important;transition:none!important}
@keyframes fp-line-in{from{opacity:0;translate:0 17px}to{opacity:1;translate:0 0}}
@keyframes fp-browser-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes fp-phone-float{0%,100%{translate:0 2px}50%{translate:2px -8px}}
@keyframes fp-card-float{0%,100%{translate:0 0}50%{translate:-2px 7px}}
@keyframes fp-star-turn{from{transform:rotate(15deg)}to{transform:rotate(375deg)}}
@keyframes fp-cursor-drift{0%,100%{translate:0 0}45%{translate:6px -5px}70%{translate:2px 2px}}
@keyframes fp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:800px){.motion-marquee-inner{gap:20px;padding-block:18px}.marquee-group{gap:23px;padding-right:23px}.marquee-word{font-size:27px}.marquee-symbol{font-size:22px}}
@media(max-width:580px){.motion-marquee-inner{gap:15px;padding-block:15px}.marquee-group{gap:19px;padding-right:19px}.marquee-word{font-size:25px;letter-spacing:-.9px}.marquee-symbol{font-size:20px}.motion-toggle{height:40px;width:40px;min-height:40px;padding:0}.motion-toggle>span:last-child{display:none}.motion-icon{width:14px;height:14px}.js[data-motion="on"] .digital-stage .studio-browser{animation-duration:7s}.js[data-motion="on"] .digital-mobile{animation-duration:6.5s}}
@media(hover:none),(pointer:coarse){.project-art::after{display:none}.js[data-motion="on"] .work-card:hover .project-art{transform:none}.js[data-motion="on"] .digital-stage:hover .studio-browser{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.hero-line,.agency-copy h1>em,.agency-intro,.agency-actions{opacity:1!important;translate:none!important}.marquee-track{animation:none!important;transform:none!important}.digital-stage .studio-browser,.digital-stage:hover .studio-browser{translate:none!important;transform:rotate(-4deg)!important}.digital-mobile,.build-card,.designer-cursor{translate:none!important}.canvas-graphic>span{transform:rotate(15deg)!important}.project-art,.js[data-motion="on"] .work-card:hover .project-art{transform:none!important}.project-art::after{display:none}.agency-primary:hover>span:last-child,.contact-button:hover>span:last-child{transform:none}.js[data-motion="on"] .work-card:hover .barber-site{translate:none!important}}