/* One vector and motion system for arrows on every page. */
.direction-arrow { --arrow-x:3px; --arrow-y:-3px; display:inline-block; width:1em; height:1em; flex-shrink:0; vertical-align:-.125em; translate:0 0; transition:translate .2s ease; pointer-events:none }
.direction-arrow[data-direction="sw"] { --arrow-x:-3px; --arrow-y:3px }
.direction-arrow[data-direction="e"] { --arrow-x:4px; --arrow-y:0px }
.direction-arrow[data-direction="w"] { --arrow-x:-4px; --arrow-y:0px }
.direction-arrow[data-direction="s"] { --arrow-x:0px; --arrow-y:4px }
.direction-arrow[data-direction="n"] { --arrow-x:0px; --arrow-y:-4px }
.direction-arrow[data-direction="se"] { --arrow-x:3px; --arrow-y:3px }
.direction-arrow[data-direction="nw"] { --arrow-x:-3px; --arrow-y:-3px }
:is(a,button,summary):not(:disabled):is(:focus-visible,:active) .direction-arrow { translate:var(--arrow-x) var(--arrow-y) }
@media(hover:hover) {
 :is(a,button,summary):not(:disabled):hover .direction-arrow,
 :is(.case-flow li,.case-journey li,.case-hero-foot):hover .direction-arrow { translate:var(--arrow-x) var(--arrow-y) }
}
.case-topline a { display:inline-flex; align-items:center; gap:.5em }
.hero-scroll b .direction-arrow { display:block; width:100%; height:1em }
:is(.case-flow,.case-journey) li > .direction-arrow { position:absolute; width:16px; height:16px }
@media(max-width:620px) {
 :is(.case-flow,.case-journey) li > .direction-arrow { rotate:90deg; --arrow-x:0px; --arrow-y:4px }
}
@media(prefers-reduced-motion:reduce) {
 .direction-arrow { transition:none!important; translate:0 0!important }
}