/* 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: -0.125em;
  translate: 0 0;
  transition: translate 0.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: 0.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;
  }
}