:root {--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-normal:280ms}
.button,.menu-toggle,.dialog-close,.city-toggle,.socials a,.socials button,.nav-links a,.mega-links a,.footer-grid a,.footer-bottom a,.service-link,.catalog-subservices a,.services-catalog summary,.faq-list summary,.post-author,.post-card h3 a,.article-toc a {
 transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,transform var(--motion-normal) var(--motion-ease);
}
/* Keep the original light/dark mark, exchanging its tones on interaction. */
.brand,.footer-grid .brand {transition:color 400ms ease}
.brand-mark {display:block;flex-shrink:0}
.brand-mark path {transition:opacity 400ms ease}
.brand:focus-visible {color:var(--color-primary)}
.brand:focus-visible .brand-mark path {opacity:.5}
.brand:focus-visible .brand-mark path[opacity="0.5"] {opacity:1}
@media(hover:hover) and (pointer:fine) {
 .brand:hover {color:var(--color-primary)}
 .brand:hover .brand-mark path {opacity:.5}
 .brand:hover .brand-mark path[opacity="0.5"] {opacity:1}
}
.menu-toggle span {transition:transform 240ms var(--motion-ease),opacity 160ms ease,background-color 180ms ease}
.menu-toggle[aria-expanded=true] span:first-child {transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child {transform:translateY(-5px) rotate(-45deg)}
@media(min-width:768px) {
 .menu-toggle[aria-expanded=true] span:first-child {transform:translateY(7px) rotate(45deg)}
 .menu-toggle[aria-expanded=true] span:last-child {transform:translateY(-7px) rotate(-45deg)}
}
.services-menu .chevron,.faq-list summary>span,.faq-list summary>span::after {transition:transform var(--motion-normal) var(--motion-ease),background-color var(--motion-fast) ease}
.services-menu>summary[aria-expanded=true] .chevron {transform:rotate(180deg)}
.lead-form input,.dialog input {transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease}
.lead-form input:focus-visible,.dialog input:focus-visible {outline:2px solid var(--color-primary);outline-offset:3px;box-shadow:0 0 0 5px #57aba622}
.card--teal .lead-form input:focus-visible,.cta .lead-form input:focus-visible,.mini-cta--teal input:focus-visible {outline-color:white;box-shadow:0 0 0 5px #ffffff25}
.post-image img,.review-image img {transition:transform 360ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine) {
 .button:hover {transform:translateY(-2px);box-shadow:0 6px 16px #315e5a20}
 .button:active {transform:translateY(0);box-shadow:none;transition-duration:90ms}
 .socials a:hover,.socials button:hover {transform:translateY(-2px)}
 .menu-toggle:hover,.dialog-close:hover {background-color:#57aba614}
 .service-link:hover,.catalog-subservices a:hover {background-color:#e6fbfa;border-color:var(--color-primary)}
 .mega-links a:hover,.footer-grid a:hover,.post-author:hover {color:var(--color-primary)}
 .post-image:hover img {transform:scale(1.035)}
 .review-image:hover img {transform:scale(1.02)}
 .faq-list summary:hover {color:var(--color-primary)}
}
.dialog.is-opening::backdrop {animation:backdrop-in 260ms ease both}
.dialog.is-closing::backdrop {animation:backdrop-out 180ms ease both}
@keyframes backdrop-in {from {opacity:0} to {opacity:1}}
@keyframes backdrop-out {from {opacity:1} to {opacity:0}}
/* A quiet pulse keeps the online status visible without shifting its label. */
.online::before {flex-shrink:0;animation:online-pulse 2.4s ease-out infinite}
@keyframes online-pulse {
 0% {transform:scale(1);box-shadow:0 0 0 0 #57aba655}
 45% {transform:scale(1.12);box-shadow:0 0 0 5px #57aba600}
 70%,100% {transform:scale(1);box-shadow:0 0 0 0 #57aba600}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .button:hover,.socials a:hover,.socials button:hover,.post-image:hover img,.review-image:hover img {transform:none}
}