/* Motion is progressive enhancement: content stays visible without JavaScript. */
.headline-line{display:inline-block;transform-origin:center bottom}
h1>.headline-ink{color:#101010;-webkit-text-fill-color:#101010}
@media(prefers-reduced-motion:no-preference){
 .button,.button.primary,.button.small{transition:background .2s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
 .button span,.text-link span,.circle-button{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .2s ease}
 .button:active,.button.primary:active{transform:scale(.97)}
 .button:hover span,.text-link:hover span{transform:translate(2px,-2px)}
 .text-link span{display:inline-block}
 .header .brand-symbol,.footer .brand-symbol{transition:rotate .65s cubic-bezier(.16,1,.3,1)}
 .hero-sticker,.collage-star,.team-emblem{transition:rotate .6s cubic-bezier(.16,1,.3,1),scale .6s cubic-bezier(.16,1,.3,1)}
 .discipline-strip i{transition:rotate .7s cubic-bezier(.16,1,.3,1)}
 .collage-scene .hero-laptop{translate:calc(var(--scene-x,0px) * .6) calc(var(--scene-y,0px) * .6 + var(--scene-scroll,0px));transition:translate .65s cubic-bezier(.2,.7,.2,1)}
 .collage-scene .collage-star{translate:calc(var(--scene-x,0px) * -.5) calc(var(--scene-y,0px) * -.5);transition:translate .8s ease,rotate .6s ease,scale .6s ease}
 .collage-scene .collage-caption{translate:calc(var(--scene-x,0px) * -.25) calc(var(--scene-y,0px) * -.25);transition:translate .9s ease}
 .project{transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
 .project-art .mini-phone,.project-art .erp-card{transition:translate .7s cubic-bezier(.2,.7,.2,1),rotate .7s cubic-bezier(.2,.7,.2,1)}
 .product-scene .browser-mock{translate:calc(var(--scene-x,0px) * -.45) calc(var(--scene-y,0px) * -.45);transition:translate .8s cubic-bezier(.2,.7,.2,1)}
 .product-scene .phone-mock{translate:var(--scene-x,0px) var(--scene-y,0px);transition:translate .8s cubic-bezier(.2,.7,.2,1)}
 .product-scene .floating-note{translate:calc(var(--scene-x,0px) * .55) calc(var(--scene-y,0px) * .55);transition:translate 1s cubic-bezier(.2,.7,.2,1)}
 .service summary,.faq-list summary{transition:color .2s ease}
 .service summary:hover,.faq-list summary:hover{color:#0066cc}
 .toggle,.faq-list summary span{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s ease,color .2s ease}
 input:not([type=checkbox]),textarea{transition:border-color .25s ease,box-shadow .25s ease}
 input:not([type=checkbox]):focus,textarea:focus{border-bottom-color:#0071e3;box-shadow:0 1px 0 #0071e3}
 .choice-list span{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
 .choice-list label:active span{transform:scale(.97)}
 dialog[open]::backdrop{animation:backdrop-in .3s ease both}
 @keyframes backdrop-in{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
 .button:hover,.button.primary:hover{transform:translateY(-2px);box-shadow:0 7px 18px #00000012}
 .project:hover{translate:0 -5px;box-shadow:0 15px 35px #00000008}
 .project:hover .mini-phone,.project:hover .erp-card{translate:0 -7px}
 .circle-button:hover{transform:rotate(8deg)}
 .brand:hover .brand-symbol{rotate:78deg}
 .hero-sticker:hover,.team-emblem:hover{rotate:-6deg;scale:1.06}
 .collage-scene:hover .collage-star{rotate:65deg}
 .discipline-strip:hover i{rotate:90deg}
 .project:hover .mini-phone{rotate:-3deg}
 .project:hover .erp-card{rotate:1deg}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .product-scene .browser-mock,.product-scene .phone-mock,.product-scene .floating-note{translate:none}
 .collage-scene .hero-laptop,.collage-scene .collage-star,.collage-scene .collage-caption{translate:none}
}