.royal-business-network {
    --business-network-surface: #f7f8f9;
    --business-network-ink: #272d33;
    --business-network-muted: #89919a;
    --business-network-line: rgba(39, 45, 51, 0.14);
    --business-network-route-active: rgba(77, 143, 94, 0.52);
    --business-network-hub: #ef8a3a;
    --business-network-signal: #de7cab;
    position: relative;
    width: 100vw;
    height: clamp(660px, calc(100svh - 96px), 880px);
    margin-inline: calc(50% - 50vw);
    margin-block-end: 90px;
    overflow: hidden;
    scroll-margin-top: 170px;
    color: var(--business-network-ink);
    background-color: var(--business-network-surface);
    background-image: radial-gradient(circle, rgba(39, 45, 51, 0.1) 0.65px, transparent 0.75px);
    background-size: 18px 18px;
}

.royal-business-network__fallback {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 24px calc(3rem + 1.25rem) 24px 24px;
    overflow: auto;
    color: var(--business-network-ink);
}

.royal-business-network__stage {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.royal-business-network__stage[hidden] {
    display: none;
}

.royal-business-network[data-business-network-ready="true"] .royal-business-network__stage:not([hidden]) {
    display: block;
}

.royal-business-network[data-business-network-ready="true"] .royal-business-network__fallback {
    display: none;
}

.royal-business-network__svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.royal-business-network__map-layer {
    transform-origin: 0 0;
}

.royal-business-network__route {
    fill: none;
    stroke: var(--business-network-line);
    stroke-width: 0.8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.royal-business-network__route.is-active {
    stroke: var(--business-network-route-active);
    stroke-width: 1.15;
}

.royal-business-network__route-overlay {
    fill: none;
    stroke: var(--business-network-signal);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 18 1600;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 3px rgba(222, 124, 171, 0.28));
    animation: royal-business-network-flight 2100ms linear 1 both;
}

.royal-business-network__hub-dot {
    fill: var(--business-network-hub);
    stroke: #ffffff;
    stroke-width: 1.25;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(45deg);
    vector-effect: non-scaling-stroke;
}

.royal-business-network__hub-dot.is-active-hub {
    filter: drop-shadow(0 0 4px rgba(239, 138, 58, 0.34));
}

.royal-business-network__city-dot {
    fill: #aeb6bd;
    stroke: #ffffff;
    stroke-width: 1.05;
    vector-effect: non-scaling-stroke;
}

.royal-business-network__city-dot.is-active-route {
    fill: #8eb69a;
    stroke: #4e7258;
}

.royal-business-network__hub-label,
.royal-business-network__city-label {
    fill: var(--business-network-ink);
    font-family: inherit;
    paint-order: stroke;
    stroke: var(--business-network-surface);
    stroke-linejoin: round;
    pointer-events: none;
}

.royal-business-network__hub-label {
    font-size: 13px;
    font-weight: 650;
    line-height: 20px;
    stroke-width: 2.5px;
}

.royal-business-network__city-label {
    fill: #66707a;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    stroke-width: 2px;
}

.royal-business-network__city-label.is-active-route {
    fill: var(--business-network-ink);
    font-weight: 650;
}

@keyframes royal-business-network-flight {
    0% {
        opacity: 0;
        stroke-dashoffset: 0;
    }

    10% {
        opacity: 0.82;
    }

    76% {
        opacity: 0.74;
        stroke-dashoffset: -100;
    }

    92%,
    100% {
        opacity: 0;
        stroke-dashoffset: -100;
    }
}

@media (max-width: 920px) {
    .royal-business-network {
        height: clamp(700px, calc(100svh - 72px), 760px);
    }
}

@media (max-width: 560px) {
    .royal-business-network__city-label:not(.is-active-route) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .royal-business-network__route-overlay {
        animation: none;
    }
}