/* A moving label, an ink wipe and the route's square-to-circle motif. No idle loops. */
:root { --hover-ease: cubic-bezier(.23,1,.32,1); }
/* Navigation labels travel like a short conveyor; presentation copies are hidden from assistive tech. */
.roll-link { position: relative; text-decoration: none; }
.roll-label { display: block; position: relative; overflow: clip; line-height: 1.35; }
.roll-face { display: block; transition: transform 160ms var(--hover-ease); }
.roll-copy { position: absolute; inset: 0; transform: translateY(125%); }
.roll-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--color-link-blue); transform: scaleX(0); transform-origin: right; transition: transform 160ms var(--hover-ease); }
.site-footer .roll-link::after { background: var(--color-sky-blue); }
/* Each ink face carries its own contrasting label, so the moving wipe never obscures text. */
.motion-link { --hover-fill: var(--color-ink-black); --hover-ink: var(--color-cream-canvas); position: relative; display: inline-flex; isolation: isolate; overflow: clip; padding: 0; gap: 0; max-width: 100%; text-decoration: none; vertical-align: middle; }
.motion-link-face { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 56px; padding: 10px 12px; }
.motion-link-label { min-width: 0; text-decoration: underline; text-decoration-color: var(--color-link-blue); text-underline-offset: 6px; }
.motion-link-hover { position: absolute; inset: 0; color: var(--hover-ink); background: var(--hover-fill); clip-path: inset(0 100% 0 0); pointer-events: none; transition: clip-path 160ms var(--hover-ease); }
.motion-link-hover .motion-link-label { text-decoration-color: var(--color-sky-blue); }
.motion-arrow { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 0; transition: transform 160ms var(--hover-ease), border-radius 160ms var(--hover-ease), background-color 160ms var(--hover-ease), color 160ms var(--hover-ease), border-color 160ms var(--hover-ease); }
.motion-arrow-turn { display: grid; place-items: center; transition: transform 160ms var(--hover-ease); }
.motion-link svg { display: block; width: 22px; height: 22px; color: inherit; }
.site-menu .nav-plan.motion-link { padding: 0; border-left: 0; }
.site-menu .nav-plan .motion-link-face { min-height: 44px; padding-block: 4px; }
.advantages-link.motion-link, .site-footer .motion-link { --hover-fill: var(--color-cream-canvas); --hover-ink: var(--color-ink-black); }
.footer-links .footer-plan.motion-link { gap: 0; padding-top: 0; border-top: 0; }
/* A warm sweep makes the full disclosure row feel actionable. */
.service-detail summary { position: relative; isolation: isolate; }
.service-detail summary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb,var(--color-honey) 30%,var(--color-cream-canvas)); clip-path: inset(0 100% 0 0); transition: clip-path 160ms var(--hover-ease); }
.service-detail summary h3 { position: relative; transition: transform 160ms var(--hover-ease); }
.service-toggle-shell { position: relative; display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--color-stone-border); border-radius: 0; transition: transform 160ms var(--hover-ease), border-radius 160ms var(--hover-ease), color 160ms var(--hover-ease), background-color 160ms var(--hover-ease), border-color 160ms var(--hover-ease); }
.service-toggle-shell > .service-toggle { width: 20px; height: 20px; flex: 0 0 20px; }
.menu-toggle, .menu-close { border-radius: 0; transition: background-color 160ms var(--hover-ease), color 160ms var(--hover-ease), border-radius 160ms var(--hover-ease); }
.swiper-button-prev, .swiper-button-next { transition: background-color 160ms var(--hover-ease), border-radius 160ms var(--hover-ease); }
.swiper-button-prev .arrow_img, .swiper-button-next .arrow_img { transition: transform 160ms var(--hover-ease), filter 160ms var(--hover-ease); }
@media (hover: hover) and (pointer: fine) {
 .roll-link:hover .roll-face:not(.roll-copy) { transform: translateY(-125%); transition-duration: 220ms; }
 .roll-link:hover .roll-copy { transform: translateY(0); transition-duration: 220ms; }
 .roll-link:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: 220ms; }
 .motion-link:hover > .motion-link-hover { clip-path: inset(0); transition-duration: 280ms; }
 .motion-link:hover .motion-arrow { border-radius: 50%; background: var(--color-sky-blue); color: var(--color-ink-black); border-color: var(--color-sky-blue); transform: rotate(90deg); transition-duration: 260ms; }
 .motion-link:hover .motion-arrow-turn { transform: rotate(-90deg); transition-duration: 260ms; }
 .service-detail summary:hover::before { clip-path: inset(0); transition-duration: 240ms; }
 .service-detail summary:hover h3 { transform: translateX(10px); transition-duration: 240ms; }
 .service-detail summary:hover .service-toggle-shell { border-radius: 50%; background: var(--color-ink-black); color: var(--color-cream-canvas); border-color: var(--color-ink-black); transform: rotate(90deg); transition-duration: 240ms; }
 .menu-toggle:hover, .menu-close:hover { color: var(--color-cream-canvas); background: var(--color-ink-black); border-radius: 50%; }
 .swiper-button-prev:not([aria-disabled="true"]):hover, .swiper-button-next:not([aria-disabled="true"]):hover { background: var(--color-ink-black); border-radius: 50%; }
 .swiper-button-prev:not([aria-disabled="true"]):hover .arrow_img { transform: translateX(-4px); filter: brightness(0) invert(1); }
 .swiper-button-next:not([aria-disabled="true"]):hover .arrow_img { transform: translateX(4px); filter: brightness(0) invert(1); }
}
/* Keyboard focus keeps the strong visual state without moving the labels. */
.roll-link:focus-visible::after { transform: scaleX(1); transition: none; }
.motion-link:focus-visible > .motion-link-hover { clip-path: inset(0); transition: none; }
.motion-link:focus-visible .motion-arrow { border-radius: 50%; background: var(--color-sky-blue); border-color: var(--color-sky-blue); color: var(--color-ink-black); transition: none; }
.service-detail summary:focus-visible::before { clip-path: inset(0); transition: none; }
.service-detail summary:focus-visible .service-toggle-shell { border-radius: 50%; background: var(--color-ink-black); color: var(--color-cream-canvas); border-color: var(--color-ink-black); transition: none; }
@media (hover: none) {
 .motion-link:active > .motion-link-hover { clip-path: inset(0); transition: none; }
 .service-detail summary:active::before { clip-path: inset(0); transition: none; }
}
/* Both the OS preference and the local static preview retain colour feedback without travel. */
@media (prefers-reduced-motion: reduce) {
 .roll-link .roll-face:not(.roll-copy), .motion-link .motion-arrow, .motion-link .motion-arrow-turn, .service-detail summary h3, .service-detail .service-toggle-shell, .swiper-button-prev .arrow_img, .swiper-button-next .arrow_img { transform: none !important; transition: none !important; }
 .roll-copy { visibility: hidden; }
 .motion-link-hover, .roll-link::after, .service-detail summary::before { transition: none !important; }
}
.reduced-motion .roll-link .roll-face:not(.roll-copy), .reduced-motion .motion-link .motion-arrow, .reduced-motion .motion-link .motion-arrow-turn, .reduced-motion .service-detail summary h3, .reduced-motion .service-toggle-shell, .reduced-motion .swiper-button-prev .arrow_img, .reduced-motion .swiper-button-next .arrow_img { transform: none !important; }
.reduced-motion .roll-copy { visibility: hidden; }