:root {
  --m-in: 140ms;
  --m-out: 200ms;
  --m-press: 90ms;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
}

.btn {
  transition: background-color var(--m-out) var(--m-ease), border-color var(--m-out) var(--m-ease), transform var(--m-out) var(--m-ease);
}
.btn:active { transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }
.link, .nav__link { transition: text-decoration-color var(--m-out), color var(--m-out); }
.m-arrow { transition: transform var(--m-out) var(--m-ease); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); transition-duration: var(--m-in); }
  .btn--primary:hover { background: color-mix(in oklab, var(--p-action) 86%, var(--p-ink)); }
  .btn--secondary:hover { background: var(--p-surface); border-color: var(--p-muted); }
  .link:hover, .nav__link:hover, .service-path:hover, .service-row:hover h3 {
    color: var(--p-accent);
    text-decoration: underline;
  }
  :is(.btn, .link-arrow, .service-path, .service-row):hover .m-arrow {
    transform: translateX(3px);
    transition-duration: var(--m-in);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .link, .nav__link, .m-arrow { transition: none; }
  .btn:hover, .btn:active, :is(.btn, .link-arrow, .service-path, .service-row):hover .m-arrow { transform: none; }
}