:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-flow:cubic-bezier(.22,.68,0,1)}
.motion-preference{background:none;padding:0;font-size:9px;color:inherit}
.footer-links{flex-wrap:wrap}
.hero-line{display:block;overflow:clip;padding-bottom:.13em;margin-bottom:-.13em}
.hero-line-inner{display:inline-block;transform-origin:0 100%}
.hero-composition{position:absolute;inset:0;transform:perspective(1100px) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg));transform-style:preserve-3d}
.hero-composition .brand-sculpture{transform:translateZ(20px) rotate(-13deg)}
.hero-composition .code-label{transform:translateZ(38px) rotate(-3deg)}
.hero-composition .design-label{transform:translateZ(45px) rotate(8deg)}
.hero-composition .art-caption{transform:translateZ(9px) rotate(-9deg)}
.hero-composition .orbit{transform:translateZ(-12px)}
.reveal-wait{opacity:0;translate:0 26px}
.reveal-wait:focus,.reveal-wait:focus-within{opacity:1;translate:none}
.hero-art.motion-live .brand-sculpture{animation:sculpture-breathe 8s ease-in-out 1.3s infinite}
.hero-art.motion-live .code-label{animation:label-breathe 9s ease-in-out 1.6s infinite}
.hero-art.motion-live .design-label{animation:label-breathe 10s ease-in-out 2s infinite reverse}
@keyframes sculpture-breathe{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes label-breathe{0%,100%{translate:0 0}50%{translate:0 5px}}
/* The line draws with the typography instead of flashing behind it. */
.motion-ready .highlight:after{transform-origin:0 50%;animation:ink-stroke 1.05s var(--ease-out) .45s both}
@keyframes ink-stroke{from{scale:0 1}to{scale:1 1}}
.desktop-nav a:after{width:100%;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease-out)}
.desktop-nav a:hover:after,.desktop-nav a.is-current:after{transform:scaleX(1);transform-origin:0 50%}
.button,.header-contact{transition:transform .5s var(--ease-out),background .3s ease;isolation:isolate}
.button>span,.header-contact>span{transition:transform .5s var(--ease-out)}
.button:hover>span,.header-contact:hover>span{transform:translate(3px,-3px)}
.solution-panel{transition:box-shadow .65s var(--ease-out)}
.solution-panel:before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:scaleX(.25);opacity:0;transition:opacity .5s ease,transform .8s var(--ease-out)}
.solution-panel:hover:before{opacity:1;transform:scaleX(1)}
.service-icon{transition:rotate .7s var(--ease-out),border-color .4s ease}
.solution-panel:hover .service-icon{rotate:-8deg}
.panel-decor{transition:rotate 1.2s var(--ease-out)}
.solution-panel:hover .star-decor{rotate:14deg}
.solution-panel:hover .code-decor{rotate:-3deg}
.project-visual img{transition:transform 1.05s var(--ease-out)}
.project-card:hover .project-visual img{transform:translateY(-5px) scale(1.025)}
.project-open{transition:transform .6s var(--ease-out),background .35s ease}
.project-card:hover .project-open{transform:translate(2px,-2px)}
.project-number{transition:translate .6s var(--ease-out)}
.project-card:hover .project-number{translate:0 -2px}
.filter{transition:background .35s ease,color .35s ease,border-color .35s ease}
.faq-list summary>span{transition:transform .55s var(--ease-out)}
.contact-orb{transition:transform .7s var(--ease-out)}
.contact-orb>span{transition:transform .7s var(--ease-out)}
.contact-orb:hover>span{transform:translate(4px,-4px)}
.theme-toggle{transition:background .35s ease,border-color .35s ease,rotate .7s var(--ease-out)}
.theme-toggle:hover{rotate:12deg}
.theme-switching body,.theme-switching .site-header,.theme-switching .partners,.theme-switching .work-section,.theme-switching .solution-panel,.theme-switching dialog,.theme-switching .floating-label,.theme-switching footer{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.is-scrolled.site-header{box-shadow:0 10px 35px #0000000b}
[data-theme="dark"] .is-scrolled.site-header{box-shadow:0 10px 35px #0002}
@media(hover:none),(pointer:coarse){.hero-composition{transform:none}.hero-art.motion-live .brand-sculpture,.hero-art.motion-live .code-label,.hero-art.motion-live .design-label{animation:none}.solution-panel:hover .service-icon,.solution-panel:hover .star-decor,.solution-panel:hover .code-decor{rotate:none}}
[data-motion="reduced"] .reveal-wait{opacity:1;translate:none}
[data-motion="reduced"] .hero-composition{transform:none}
[data-motion="reduced"] .hero-art.motion-live .brand-sculpture,[data-motion="reduced"] .hero-art.motion-live .code-label,[data-motion="reduced"] .hero-art.motion-live .design-label{animation:none}
[data-motion="reduced"] *,[data-motion="reduced"] *:before,[data-motion="reduced"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .reveal-wait{opacity:1;translate:none}html:not([data-motion="full"]) .hero-composition{transform:none}html:not([data-motion="full"]) *,html:not([data-motion="full"]) *:before,html:not([data-motion="full"]) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}