.ctco03-map-section,
.ctco03-map-section *{box-sizing:border-box}

.ctco03-map-section{
    width:100%;
    overflow:hidden;
    padding:var(--ctco03-pad) 0;
    background:
        radial-gradient(circle at 18% 15%,rgba(65,182,230,.14),transparent 30%),
        radial-gradient(circle at 82% 65%,rgba(67,224,161,.12),transparent 32%),
        linear-gradient(145deg,var(--ctco03-bg1),var(--ctco03-bg2));
    color:var(--ctco03-title);
    font-family:Arial,Helvetica,sans-serif;
}

.ctco03-shell{
    width:min(var(--ctco03-container),calc(100% - 60px));
    margin:0 auto;
}

.ctco03-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--ctco03-green);
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.ctco03-map-head{
    display:grid;
    grid-template-columns:1fr .72fr;
    gap:80px;
    align-items:end;
    margin-bottom:42px;
}

.ctco03-map-head h2{
    margin:14px 0 0;
    color:#fff;
    font-size:var(--ctco03-title-size);
    line-height:1.08;
    font-weight:600;
    letter-spacing:-.04em;
}

.ctco03-map-head>p{
    margin:0;
    color:var(--ctco03-text);
    font-size:var(--ctco03-body);
    line-height:1.8;
}

.ctco03-map-layout{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);
    gap:var(--ctco03-gap);
    align-items:stretch;
}

.ctco03-map-card,
.ctco03-city-box{
    border:1px solid rgba(127,224,209,.18);
    background:rgba(5,27,41,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.ctco03-map-card{
    position:relative;
    min-height:var(--ctco03-map-h);
    overflow:hidden;
    isolation:isolate;
}

.ctco03-map-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.74;
    filter:
        grayscale(.12)
        sepia(.05)
        hue-rotate(145deg)
        saturate(1.4)
        contrast(1.15)
        brightness(.68);
    z-index:1;
}

.ctco03-map-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(180deg,rgba(2,20,31,.08),rgba(2,20,31,.30)),
        linear-gradient(90deg,rgba(8,38,55,.18),rgba(4,55,51,.16));
    pointer-events:none;
}

.ctco03-map-grid{
    position:absolute;
    inset:0;
    z-index:3;
    opacity:.12;
    background-image:
        linear-gradient(rgba(134,224,216,.45) 1px,transparent 1px),
        linear-gradient(90deg,rgba(134,224,216,.45) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,transparent,black 14%,black 86%,transparent);
    pointer-events:none;
}

.ctco03-map-glow{
    position:absolute;
    z-index:4;
    border-radius:50%;
    filter:blur(18px);
    pointer-events:none;
}

.ctco03-map-glow--one{
    width:220px;
    height:220px;
    left:16%;
    top:18%;
    background:rgba(65,182,230,.12);
}

.ctco03-map-glow--two{
    width:260px;
    height:260px;
    right:12%;
    bottom:10%;
    background:rgba(67,224,161,.10);
}

.ctco03-route-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:5;
    pointer-events:none;
}

.ctco03-route{
    stroke:var(--ctco03-route);
    stroke-width:.20;
    stroke-dasharray:1.15 1;
    opacity:.34;
    vector-effect:non-scaling-stroke;
    transition:opacity .3s ease,stroke-width .3s ease;
    animation:ctco03RouteMove 9s linear infinite;
}

.ctco03-route.is-active{
    opacity:1;
    stroke-width:.42;
}

@keyframes ctco03RouteMove{
    to{stroke-dashoffset:-28}
}

.ctco03-pin{
    position:absolute;
    z-index:7;
    width:1px;
    height:1px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
}

.ctco03-pin-dot{
    position:absolute;
    left:-5px;
    top:-5px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--ctco03-point);
    border:2px solid #0b3141;
    box-shadow:0 0 0 4px rgba(65,182,230,.18);
    transition:.28s ease;
}

.ctco03-pin strong{
    position:absolute;
    white-space:nowrap;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:700;
    text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 7px rgba(0,0,0,.72);
    transition:color .25s ease;
}

.ctco03-pin:hover .ctco03-pin-dot,
.ctco03-pin.is-active .ctco03-pin-dot{
    background:var(--ctco03-green);
    border-color:#fff;
    box-shadow:
        0 0 0 6px rgba(67,224,161,.20),
        0 0 22px rgba(67,224,161,.42);
    transform:scale(1.15);
}

.ctco03-pin.is-active strong{
    color:var(--ctco03-green);
}

.ctco03-pin--main .ctco03-pin-dot{
    width:13px;
    height:13px;
    left:-6.5px;
    top:-6.5px;
}

.ctco03-map-badge{
    position:absolute;
    z-index:8;
    left:22px;
    bottom:20px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border:1px solid rgba(67,224,161,.22);
    background:rgba(5,32,43,.78);
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.ctco03-live-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--ctco03-green);
    box-shadow:0 0 0 5px rgba(67,224,161,.12);
}

.ctco03-city-box{
    position:relative;
    padding:36px 32px;
    background:
        linear-gradient(180deg,rgba(8,37,54,.96),rgba(5,27,41,.94));
}

.ctco03-city-box::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(65,182,230,.06),transparent 35%,rgba(67,224,161,.05));
}

.ctco03-city-box__eyebrow{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ctco03-green);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ctco03-city-box h3{
    position:relative;
    margin:16px 0 16px;
    color:#fff;
    font-size:var(--ctco03-panel-title);
    line-height:1.16;
    font-weight:500;
    letter-spacing:-.03em;
}

.ctco03-city-box>p{
    position:relative;
    margin:0;
    color:var(--ctco03-text);
    font-size:var(--ctco03-body);
    line-height:1.78;
}

.ctco03-city-actions{
    position:relative;
    margin-top:24px;
}

.ctco03-city-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid rgba(135,224,212,.32);
    color:#fff!important;
    font-size:14px;
    font-weight:600;
    text-decoration:none!important;
}

.ctco03-city-link:hover{
    border-color:var(--ctco03-green);
}

.ctco03-city-selector{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:28px;
}

.ctco03-city-selector button{
    appearance:none;
    min-height:38px;
    padding:8px 10px;
    border:1px solid rgba(157,216,226,.14);
    background:rgba(255,255,255,.025);
    color:#dbe9ec;
    font:600 11px/1.1 Arial,Helvetica,sans-serif;
    cursor:pointer;
    transition:.25s ease;
}

.ctco03-city-selector button:hover,
.ctco03-city-selector button.is-active{
    border-color:rgba(67,224,161,.58);
    background:linear-gradient(135deg,rgba(65,182,230,.16),rgba(67,224,161,.12));
    color:#fff;
    transform:translateY(-1px);
}


@media(max-width:1024px){
    .ctco03-map-layout{
        grid-template-columns:1fr;
    }

    .ctco03-city-selector{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:767px){
    .ctco03-shell{
        width:min(var(--ctco03-container),calc(100% - 30px));
    }

    .ctco03-map-section{
        padding:75px 0;
    }

    .ctco03-map-head{
        grid-template-columns:1fr;
        gap:22px;
    }

    .ctco03-map-head h2{
        font-size:clamp(30px,9vw,var(--ctco03-title-size));
    }

    .ctco03-map-card{
        min-height:520px;
    }

    .ctco03-pin strong{
        font-size:9px;
    }

    .ctco03-city-box{
        padding:28px 22px;
    }

    .ctco03-city-selector{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(prefers-reduced-motion:reduce){
    .ctco03-route{
        animation:none!important;
    }
}