.route-intro{
    width:min(860px, 100%);
    margin:0 auto 28px;
    padding:28px clamp(22px, 5vw, 42px);
    border:1px solid rgba(139, 233, 255, .18);
    border-radius:var(--radius-large);
    background:linear-gradient(145deg, rgba(8, 26, 44, .88), rgba(2, 11, 22, .74));
    box-shadow:var(--shadow-soft);
    text-align:center;
    backdrop-filter:blur(12px);
}

.route-intro--dismissing{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:
        opacity .35s ease,
        visibility 0s linear .35s,
        transform .35s ease;
}

.route-intro--compact.route-intro--settled{
    top:auto;
    bottom:18px;
    width:min(540px, calc(100% - 36px));
    padding:12px 16px;
    background:linear-gradient(145deg, rgba(8, 26, 44, .9), rgba(2, 11, 22, .82));
    opacity:.94;
    transform:translateY(0);
    transition:top .35s ease, bottom .35s ease, width .35s ease, padding .35s ease;
}

.route-intro--settled .route-intro-kicker{
    display:none;
}

.route-intro--settled h1{
    font-size:clamp(1.25rem, 3vw, 1.65rem);
}

.route-intro--settled > p:not(.route-intro-kicker){
    margin-top:4px;
    font-size:.76rem;
    line-height:1.35;
}

.route-intro--settled nav{
    gap:6px;
    margin-top:7px;
}

.route-intro--settled nav a{
    padding:5px 9px;
    font-size:.72rem;
}

@media (prefers-reduced-motion:reduce){
    .route-intro--dismissing{
        transform:none;
        transition:none;
    }
}

.route-intro-kicker{
    margin:0 0 7px;
    color:var(--secondary);
    font-size:.75rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.route-intro h1{
    margin:0;
    font-size:clamp(2rem, 6vw, 3.7rem);
}

.route-intro > p:not(.route-intro-kicker){
    max-width:700px;
    margin:12px auto 0;
    color:var(--text-muted);
    line-height:1.7;
}

.route-intro nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px;
    margin-top:20px;
}

.route-intro nav a{
    padding:9px 14px;
    border:1px solid rgba(139, 233, 255, .24);
    border-radius:999px;
    color:var(--secondary);
    text-decoration:none;
}

.route-intro nav a:hover,
.route-intro nav a:focus-visible{
    background:rgba(139, 233, 255, .1);
}

.route-intro--compact{
    position:absolute;
    z-index:4;
    top:clamp(82px, 11vh, 118px);
    left:clamp(18px, 4vw, 58px);
    width:min(420px, calc(100% - 36px));
    margin:0;
    padding:20px 24px;
    text-align:left;
}

.route-intro--compact h1{
    font-size:clamp(1.7rem, 4vw, 2.7rem);
}

.route-intro--compact > p:not(.route-intro-kicker){
    margin-top:8px;
    font-size:.92rem;
    line-height:1.55;
}

.route-intro--compact nav{
    justify-content:flex-start;
    margin-top:13px;
}

@media (max-width:700px){
    .route-intro{
        margin-bottom:18px;
        padding:23px 18px;
        border-radius:var(--radius-medium);
    }

    .route-intro--compact{
        top:88px;
        left:14px;
        width:calc(100% - 28px);
        padding:15px 17px;
    }

    .route-intro--compact.route-intro--settled{
        bottom:10px;
        left:10px;
        width:calc(100% - 20px);
        padding:10px 12px;
    }

    .route-intro--settled > p:nth-of-type(3),
    .route-intro--settled nav{
        display:flex;
    }

    .route-intro--compact > p:nth-of-type(3),
    .route-intro--compact nav{
        display:none;
    }
}