:root{--motion-feedback:180ms;--motion-enter:500ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
.js .reveal{transition:opacity var(--motion-enter) var(--motion-ease),transform var(--motion-enter) var(--motion-ease);transform:translateY(12px)}
.js .reveal.is-visible{transform:none}
.button,.nav-links a::after,.rail-controls>span i{transition-duration:var(--motion-feedback);transition-timing-function:var(--motion-ease)}
.portfolio-card{transition:border-color var(--motion-feedback),box-shadow var(--motion-feedback)}
.portfolio-card:focus-within{outline:3px solid var(--color-purple);outline-offset:5px}
.hero-artwork img,.hero-card:hover .hero-artwork img{transform:none;transition:none}
.service-route-links{margin:32px auto 0;max-width:1260px;padding:0 24px}
.service-card h3 a{text-decoration:none}.service-card h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.case-outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;padding:72px 6vw;background:var(--color-ivory);color:var(--color-black)}
.case-outcomes h2{font:700 18px var(--font-sans);margin:0 0 18px}.case-outcomes p{font:16px/1.6 var(--font-sans);margin:0}
.browser-stage img{height:auto;object-fit:contain}
@media(max-width:900px){.case-outcomes{grid-template-columns:1fr 1fr}}
@media(max-width:550px){.case-outcomes{grid-template-columns:1fr;padding:48px 24px;gap:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none!important}}