/* Shared SVG arrows for the separate orange site, at every viewport width. */
svg.ui-arrow {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
.ui-arrow-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.text-link > .ui-arrow-slot { width: 24px; height: 24px; }
.row-arrow.ui-arrow-slot { display: grid; place-items: center; }
.related-bottom > .ui-arrow-slot { height: 1.6em; }
[data-ui-arrow="ne"] { --ui-arrow-x: 2px; --ui-arrow-y: -2px; }
[data-ui-arrow="down"] { --ui-arrow-x: 0px; --ui-arrow-y: 3px; }
[data-ui-arrow="up"] { --ui-arrow-x: 0px; --ui-arrow-y: -3px; }
[data-ui-arrow="right"] { --ui-arrow-x: 3px; --ui-arrow-y: 0px; }
[data-ui-arrow="left"] { --ui-arrow-x: -3px; --ui-arrow-y: 0px; }
a:hover > .ui-arrow-slot,
button:hover > .ui-arrow-slot,
.situation:hover .row-arrow.ui-arrow-slot,
.related-service:hover .related-bottom > .ui-arrow-slot { transform: none; }
.ui-arrow.ui-arrow-pressed { animation: ui-arrow-tap 380ms ease; }
@keyframes ui-arrow-tap {
  50% { transform: translate(var(--ui-arrow-x), var(--ui-arrow-y)); }
}
@media (hover: hover) and (pointer: fine) {
  :is(a,button):hover .ui-arrow { transform: translate(var(--ui-arrow-x), var(--ui-arrow-y)); }
}
@media (prefers-reduced-motion: reduce) {
  svg.ui-arrow { transition: none; animation: none; }
  :is(a,button):hover .ui-arrow { transform: none; }
}