:root { --motion-disclosure: 240ms; --motion-image: 480ms; --motion-reveal: 900ms; }
:root {
    --scroll-entry-distance: 48px;
    --scroll-entry-opacity: .35;
}
.service-item[data-expanded="true"] summary { color: var(--gold-light); }
.service-item[data-expanded="true"] summary .icon,
.faq-item[data-expanded="true"] .faq-toggle .icon { transform: rotate(45deg); }
.service-item[data-expanded="false"] summary .icon,
.faq-item[data-expanded="false"] .faq-toggle .icon { transform: rotate(0); }
.service-item[data-expanded="false"] summary { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
    .button > .icon:last-child { transition: transform 200ms var(--ease-out); }
    .button:hover > .icon:last-child { transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
    .button:hover > .icon:last-child { transform: none; }
}