/* Motion enhances the layout without hiding content when scripts are unavailable. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .2s ease-in both}
::view-transition-new(root){animation:page-in .4s cubic-bezier(.16,.7,.2,1) both}
@keyframes page-out{to{opacity:0;translate:0 -8px}}
@keyframes page-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.motion-card{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .22s,box-shadow .25s,translate .25s}.motion-card:hover{translate:0 -5px;box-shadow:0 18px 35px #06284d14}}
.button{position:relative;overflow:hidden}.button:after{content:'';position:absolute;top:-20%;bottom:-20%;width:35%;left:-65%;background:linear-gradient(90deg,transparent,#ffffff26,transparent);transform:skewX(-20deg);pointer-events:none;transition:left .65s}.button:hover:after{left:125%}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none;z-index:2}
.button{transition:background .2s,transform .25s,box-shadow .25s}.button:hover{box-shadow:0 8px 22px #df263825}.button span,.text-link span,.service-bottom b,.project-copy h3 span,.directory-grid b{transition:translate .25s}.button:hover span,.text-link:hover span,.service:hover .service-bottom b,.project-card:hover .project-copy h3 span{translate:3px -3px}.directory-grid>a:hover b{translate:4px 0}.service svg{transition:translate .3s}.service:hover svg{translate:0 -4px}.project-art .commerce-window,.project-art .life-phone{transition:translate .4s}.project-card:hover .commerce-window,.project-card:hover .life-phone{translate:0 -5px}.faq-list summary>span{transition:transform .25s}.menu-toggle span{transition:transform .25s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(prefers-reduced-motion:no-preference){
 .hero-visual .dashboard{animation:dashboard-drift 8s ease-in-out infinite}.hero-visual .phone{animation:phone-drift 7s ease-in-out infinite}.hero-visual .label-top{animation:label-drift 6s ease-in-out infinite}.hero-visual .label-bottom{animation:label-drift 7s ease-in-out 1s infinite}.hero-visual .status-dot{animation:status-glow 4s ease-in-out infinite}.hero-visual .chart svg>path[stroke]{stroke-dasharray:600;stroke-dashoffset:600;animation:chart-draw 2s ease-out .45s forwards}.about-mark:hover .about-k{translate:5px 0}.about-k{transition:translate .5s}
 @keyframes dashboard-drift{0%,100%{translate:0 0}50%{translate:0 -10px}}
 @keyframes phone-drift{0%,100%{translate:0 0}50%{translate:0 11px}}
 @keyframes label-drift{0%,100%{translate:0 0}50%{translate:0 -5px}}
 @keyframes status-glow{0%,100%{box-shadow:0 0 0 0 #299b7910}50%{box-shadow:0 0 0 4px #299b7915}}
 @keyframes chart-draw{to{stroke-dashoffset:0}}
}
@media(max-width:650px){.scroll-progress{height:2px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.scroll-progress{display:none}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-visual .chart svg>path[stroke]{stroke-dashoffset:0!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}.motion-card{transform:none!important;translate:0 0!important}}