/* Motion is progressive enhancement; content and links stay usable without it. */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--red);z-index:110;transform:scaleX(0);transform-origin:left;pointer-events:none}
.reveal{opacity:1;transform:none}
section[id]{scroll-margin-top:100px}
.motion-toggle{position:absolute;left:max(28px,calc((100% - var(--max))/2 + 28px));bottom:22px;z-index:4;background:rgba(0,0,0,.75);color:#fff;border:1px solid #aaa;padding:8px 12px;font:inherit;font-size:.875rem;cursor:pointer}
.motion-toggle[hidden]{display:none}
.motion-toggle:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:5px}
.site-header{transition:box-shadow .3s,background .3s}
.site-header.scrolled{box-shadow:0 6px 26px #0002}
.button,.nav-call{transition:transform .25s,box-shadow .25s,background .25s}
.button span,.text-link span,.service-card a span{display:inline-block;transition:transform .3s}
.button:hover span,.text-link:hover span,.service-card:focus-within a span{transform:translateX(6px)}
.service-card{isolation:isolate;transition:background .35s,box-shadow .35s;overflow:hidden}
.service-card:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.service-card:hover:after,.service-card:focus-within:after{transform:scaleX(1)}
.service-card .service-icon{transition:transform .45s,color .3s}
.service-card:hover .service-icon,.service-card:focus-within .service-icon{transform:translateY(-8px) rotate(-8deg);color:#fff}
.service-card:hover a span{transform:translateX(7px)}
.contact-form label:focus-within{color:var(--red)}
.contact-form input,.contact-form textarea,.contact-form select{transition:border-color .25s,background .25s}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{background:#fff8f8}
.value-list span{transition:transform .3s,background .3s}
.value-list span:hover{transform:translateY(-5px);background:#ffffff20}
.motion-enabled .hero-media{inset:-35px;transform:translateY(var(--hero-y,0px));will-change:transform;animation:hero-drift 20s ease-in-out infinite alternate}
.motion-enabled .hero-badge{animation:badge-float 5s ease-in-out infinite}
.motion-enabled .values-mark{transform:translateY(var(--mark-y,0px)) rotate(var(--mark-angle,-5deg));transition:transform .15s linear}
.motion-enabled .hero-content h1{animation:title-arrive .9s cubic-bezier(.2,.7,.2,1) both}
.motion-enabled .hero-copy{animation:title-arrive .9s .15s both}
.motion-enabled .hero-actions{animation:title-arrive .9s .3s both}
.motion-enabled .reveal{transition-duration:.85s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.motion-enabled .reveal.motion-pending{opacity:0;transform:translateY(42px)}
.motion-enabled .service-card.motion-pending{transform:translateY(55px)}
.motion-enabled .service-card:nth-child(2){transition-delay:.10s}
.motion-enabled .service-card:nth-child(3){transition-delay:.20s}
@keyframes hero-drift{from{scale:1.02}to{scale:1.09}}
@keyframes badge-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes title-arrive{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes mobile-title-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-7px,0)}}
@media(hover:hover) and (pointer:fine){.motion-enabled .button:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0003}.motion-enabled .service-card:hover{box-shadow:inset 0 0 60px #ffffff08}}
@media(max-width:850px){.motion-enabled .hero-media{animation-duration:26s;inset:0;transform:none}.motion-enabled .hero-content h1{animation:title-arrive .9s cubic-bezier(.2,.7,.2,1) both,mobile-title-float 4.8s 1.05s ease-in-out infinite alternate;will-change:transform}.motion-enabled .values-mark{transform:rotate(-5deg)}.motion-enabled .service-card:nth-child(n){transition-delay:0s}.hero-content{padding-bottom:95px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-enabled .hero-media,.motion-enabled .values-mark,.motion-enabled .reveal.motion-pending{transform:none;opacity:1}.motion-toggle{display:none}}
html.motion-paused{scroll-behavior:auto}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation:none!important;transition:none!important}
.motion-paused .reveal{opacity:1;transform:none}
