/* Crisp drawn arrows, with a masked two-glyph rollover inspired by Framer. */
.staport-icon-window {
    --staport-icon-turn: 0deg;
    display: inline-block;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    overflow: hidden;
    vertical-align: middle;
    transform: rotate(var(--staport-icon-turn));
}
.staport-icon-ne { --staport-icon-turn: -45deg; }
.staport-icon-west { --staport-icon-turn: 180deg; }
.staport-icon-south { --staport-icon-turn: 90deg; }
.staport-icon-window svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.staport-icon-window path {
    fill: none;
    stroke: currentColor;
    transition: transform .48s cubic-bezier(.22,1,.36,1);
}
.staport-icon-primary { transform: translateX(0); }
.staport-icon-secondary { transform: translateX(-38px); }
:is(.sp-project-link,.sp-category-nav a,.ui-e-readmore,.ui-e-carousel-button):is(:hover,:focus-visible) .staport-icon-primary,
#realisations article:hover .ui-e-readmore .staport-icon-primary { transform: translateX(38px); }
:is(.sp-project-link,.sp-category-nav a,.ui-e-readmore,.ui-e-carousel-button):is(:hover,:focus-visible) .staport-icon-secondary,
#realisations article:hover .ui-e-readmore .staport-icon-secondary { transform: translateX(0); }

.staport-realisations .sp-project-arrow,
#realisations .staport-project-slider .ui-e-readmore {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,245,255,.88));
    color: #0b4e9c;
    box-shadow: inset 0 1px 0 #fff, 0 6px 22px rgba(3,15,33,.12);
    backdrop-filter: blur(12px);
    transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .3s, color .3s, box-shadow .3s;
}
#realisations .staport-project-slider .ui-e-readmore::after { content: none; }
.staport-realisations .sp-project-link:is(:hover,:focus-visible) .sp-project-arrow,
#realisations .staport-project-slider article:hover .ui-e-readmore,
#realisations .staport-project-slider .ui-e-readmore:focus-visible {
    background: #0b4e9c;
    border-color: rgba(255,255,255,.32);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(3,15,33,.22);
    transform: translateY(-2px);
}
.staport-realisations .sp-project-discover {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.staport-realisations .sp-project-discover > .staport-icon-window { width: 17px; height: 17px; margin: 0; }
.staport-realisations .sp-nav-arrow { display: inline-flex; }
.staport-realisations .sp-nav-arrow .staport-icon-window { width: 17px; height: 17px; }
.staport-realisations .sp-video-symbol { font-size: inherit; }
.staport-play-icon { width: 80px; height: 80px; stroke: #c3ddfa; stroke-width: 1; }
.staport-play-icon circle:first-child { opacity: .3; }
.staport-play-icon path { stroke-width: 1.5; fill: rgba(255,255,255,.12); }

#realisations .staport-project-slider .ui-e-carousel-button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 15px;
    background: #0b4e9c;
    box-shadow: 0 4px 18px rgba(3,15,33,.15), inset 0 1px 0 rgba(255,255,255,.16);
}
#realisations .staport-project-slider .ui-e-carousel-button .staport-icon-window { width: 25px; height: 25px; }
#realisations .staport-project-slider .ui-e-carousel-button .staport-icon-window svg { width: 100%; height: 100%; }
#realisations .staport-project-slider .ui-e-carousel-button svg,
#realisations .staport-project-slider .ui-e-carousel-button svg path { fill: none; stroke: currentColor; }
#realisations .staport-project-slider .ui-e-carousel-button:hover { background: #071d3b; }
.staport-realisations .sp-project-link:focus-visible { outline: 3px solid #68a5ec; outline-offset: 5px; }

@media (max-width:767px) {
    .staport-realisations .sp-project-arrow,
    #realisations .staport-project-slider .ui-e-readmore { width: 42px; height: 42px; border-radius: 12px; }
    #realisations .staport-project-slider .ui-e-readmore { inset: 18px 18px auto auto; }
    #realisations .staport-project-slider { margin-bottom: 60px; }
    #realisations .staport-project-slider article { aspect-ratio: 4 / 3; }
    #realisations .staport-project-slider .ui-e-carousel-button { width: 38px; height: 38px; border-radius: 12px; }
    #realisations .staport-project-slider .ui-e-carousel-button { top: auto; bottom: -54px; transform: none; }
    #realisations .staport-project-slider .ui-e-previous { left: calc(50% - 45px); right: auto; }
    #realisations .staport-project-slider .ui-e-next { right: calc(50% - 45px); left: auto; }
    .staport-icon-window { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
    .staport-icon-window path,
    .staport-realisations .sp-project-arrow,
    #realisations .staport-project-slider .ui-e-readmore { transition: none; }
}