/* Decorative marks: the surrounding link remains the only interactive control. */
:root{--arrow-surface:#ffffff38;--arrow-edge:#8198a044}
:is(.home-hero,.page-hero.dark,.section-dark,.london-band,.closing-cta,.path-dark,.architecture-core,.price-featured){--arrow-surface:#ffffff0d;--arrow-edge:#ffffff30}
.button-primary{--arrow-surface:#ffffff55;--arrow-edge:#637e8d33}
.button-submit,.pricing-grid .price-card .button{--arrow-surface:#ffffff10;--arrow-edge:#ffffff30}
.pricing-grid .price-featured .button{--arrow-surface:#ffffff60;--arrow-edge:#637e8d33}
span.ui-arrow{position:relative;display:inline-block;inline-size:30px;block-size:30px;flex:0 0 auto;vertical-align:middle;line-height:0;font-size:0;border:1px solid var(--arrow-edge);border-radius:50%;color:inherit;background:linear-gradient(145deg,#ffffff30,transparent 60%),var(--arrow-surface);box-shadow:inset 0 1px 0 #ffffff59,0 2px 5px #142c3d0b;overflow:hidden;pointer-events:none}
span.ui-arrow::after{content:"";position:absolute;inset:22%;background:currentColor;mask:url('/assets/direction-mark.svg?v=20261103-motion') center/contain no-repeat;-webkit-mask:url('/assets/direction-mark.svg?v=20261103-motion') center/contain no-repeat}
:is(.button,.text-link,.nav-cta)>span[aria-hidden="true"]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.button .ui-arrow{inline-size:36px;block-size:36px}.nav-cta .ui-arrow{inline-size:28px;block-size:28px}.footer-links .ui-arrow{inline-size:22px;block-size:22px}.country-city-domain .ui-arrow{inline-size:20px;block-size:20px}.city-preview .ui-arrow{inline-size:24px;block-size:24px}.hero-caption .ui-arrow{inline-size:28px;block-size:28px}
svg.ui-direction{display:inline-block;inline-size:1em;block-size:1em;vertical-align:-.12em;overflow:visible;pointer-events:none}
@media(max-width:520px){.button .ui-arrow{inline-size:34px;block-size:34px}.hero-caption .ui-arrow{inline-size:24px;block-size:24px}}
@media(prefers-reduced-motion:no-preference){
 span.ui-arrow{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s}
 :is(a,button):focus-visible .ui-arrow::after{animation:direction-flight .5s cubic-bezier(.25,.6,.25,1)}
 :is(a,button):active .ui-arrow{transform:scale(.93)}
 @keyframes direction-flight{0%,100%{transform:translate(0,0);opacity:1}40%{transform:translate(115%,-115%);opacity:0}41%{transform:translate(-115%,115%);opacity:0}70%{opacity:1}}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 :is(a,button):hover .ui-arrow{transform:scale(1.07);box-shadow:inset 0 1px 0 #ffffff80,0 4px 10px #142c3d15}
 :is(a,button):hover .ui-arrow::after{animation:direction-flight .5s cubic-bezier(.25,.6,.25,1)}
 :is(a,button):active .ui-arrow{transform:scale(.93)}
}
@media(forced-colors:active){span.ui-arrow{background:Canvas;border-color:CanvasText;box-shadow:none;color:CanvasText}span.ui-arrow::after{background:CanvasText;forced-color-adjust:none}}
