/* City page service map */
.cmap { padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.cmap__svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.cmap__dots { fill: url(#cmDots); opacity: 0; animation: cm-fade .8s ease forwards; }
.cmap__region { fill: #6e6e76; font-size: 12px; letter-spacing: .04em; opacity: .7; }
.cmap__ocean { fill: #3d6f8a; font-size: 12px; font-style: italic; }
.cmap__route { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cm-draw 1.4s cubic-bezier(.6,0,.2,1) .9s forwards; }
.cmap__route--ghost { stroke: rgba(69,232,255,.18); stroke-dasharray: 4 6; stroke-dashoffset: 0; animation: none; stroke-width: 1.5; }
.cpin__in { opacity: 0; animation: cm-pop .4s ease-out forwards; animation-delay: var(--d, .3s); }
.cpin circle { fill: #2a2a30; stroke: #6e6e76; stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.cpin text { fill: #a9a9b0; font-size: 12.5px; font-weight: 500; paint-order: stroke; stroke: #1b1b1e; stroke-width: 4px; stroke-linejoin: round; }
a.cpin-link:hover .cpin circle, a.cpin-link:focus .cpin circle { fill: #10262b; stroke: var(--accent); }
a.cpin-link:hover .cpin text, a.cpin-link:focus .cpin text { fill: #fff; }
a.cpin-link:focus { outline: none; }
a.cpin-link:focus-visible .cpin circle { stroke-width: 3; }
.cpin--shop circle { fill: #241a2b; stroke: var(--violet); stroke-width: 2; }
.cpin--shop text { fill: #fff; }
.cpin--here circle.cpin__dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.cpin--here text { fill: #fff; font-size: 14px; }
.cpin__pulse { fill: none !important; stroke: var(--accent) !important; stroke-width: 2 !important; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cmap.is-arrived .cpin__pulse { animation: cm-ping 1.2s ease-out; }
.cvan { opacity: 0; transition: opacity .3s; }
.cvan.is-on { opacity: 1; }
.cvan rect { fill: var(--accent); }
.cvan circle { fill: #0f0f0f; }
.cmap__drive { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 .8rem; }
.cmap__time { font: 500 1.35rem/1.2 var(--font-head); }
.cmap__from { color: var(--ink-2); font-size: .95rem; }
.cmap__ways { list-style: none; margin: 0; padding: .85rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cmap__ways li { font-size: .85rem; color: var(--ink-2); line-height: 1.35; }
.cmap__ways strong { display: block; color: var(--ink); font-weight: 500; font-size: .9rem; margin-bottom: .1rem; }
@media (max-width: 560px) { .cmap__ways { grid-template-columns: 1fr; } .cpin text { font-size: 16px; } .cpin--here text { font-size: 18px; } }
@keyframes cm-fade { to { opacity: 1; } }
@keyframes cm-draw { to { stroke-dashoffset: 0; } }
@keyframes cm-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cm-ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
@media (prefers-reduced-motion: reduce) {
  .cmap__dots, .cmap__route, .cpin__in { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .cmap.is-arrived .cpin__pulse { animation: none; }
}
.city-checks { display: grid; gap: .25rem 2.5rem; margin-top: 1rem; }
@media (min-width: 800px) { .city-checks { grid-template-columns: 1fr 1fr; } }