.road-section {
    --road-page-bg: #13131300;
    --road-color: #ffffff;
    --road-about-icon-stroke: #ffffff;
    position: relative;
    height: 300vh;
    background-color: var(--road-page-bg);
}

.road-stage {
    position: sticky;
    top: 0;
    display: grid;
    min-height: 100vh;
    padding: 240px 24px 0;
    overflow: hidden;
    isolation: isolate;
}

.road-frame {
    position: relative;
    z-index: 2;
    width: min(568px, 100%);
    aspect-ratio: 568 / 608;
    will-change: transform;
}

.road-frame .js-road-container {
    box-sizing: border-box;
    width: calc(100% + 64px);
    margin: -64px 0 0 -64px;
    padding: 64px 0 0 64px;
    overflow: visible;
}

.road-frame svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.road-frame path {
    stroke: var(--road-color) !important;
    stroke-linecap: butt;
    stroke-linejoin: round;
    transition: none;
}

.road-marker,
.road-end-label {
    pointer-events: none;
}

.road-marker__dot {
    fill: var(--road-color);
    transform-box: fill-box;
    transform-origin: center center;
    animation: road-marker-pulse 2.1s ease-in-out infinite;
    r: 5;
}

.road-marker__text {
    fill: var(--road-color);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.04em;
    dominant-baseline: middle;
    transform-box: fill-box;
    transform-origin: center center;
    animation: road-marker-text-float 2.8s ease-in-out infinite;
}

.road-section .about-agency {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin-top: -100vh;
    padding: 120px 0;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    color: #111111;
}

.road-section .about-agency-inner {
    flex-wrap: nowrap;
}

.road-section .about-agency .animImg,
.road-section .about-agency__title h2,
.road-section .about_description,
.road-section .about_location__text,
.road-section .about_location svg {
    opacity: 0;
    visibility: hidden;
}

.road-section .animImg::after {
    display: none;
}

.road-section .section-heading-secondary {
    top: 0;
}

.road-section .section-heading-secondary::after {
    display: none;
}

.road-section .about_location svg path {
    stroke: var(--road-about-icon-stroke) !important;
    transition: stroke 0.28s ease;
}

@keyframes road-marker-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }
}

@keyframes road-marker-text-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@media (max-width: 767px) {
    .road-stage {
        padding-left: 16px;
        padding-right: 16px;
    }

    .road-frame {
        width: calc(100vw - 64px);
        margin: 0 auto;
        aspect-ratio: 306 / 231;
    }

    .road-marker__dot {
        r: 4;
    }

    .road-marker__text {
        font-size: 16px;
    }

    .road-section .about-agency {
        padding: 80px 0 0;
    }
}