/* city-v3.css — service-area pages (hub + city pages + locations/) (2026-09-29).
   Metro map (hero), best-route timeline, city card grid. On top of v3-kit + device-v3. */

/* ─── Metro map ───────────────────────────────────────────────────────── */
.ca-art { width: min(100%, 470px); }
.ca-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ca-disc { fill: rgba(5, 32, 13, .72); stroke: rgba(185, 242, 74, .25); stroke-width: 1.5; }
.ca-ring { fill: none; stroke: rgba(185, 242, 74, .14); stroke-width: 1; stroke-dasharray: 3 6; }
.ca-ring--edge { stroke: rgba(185, 242, 74, .45); stroke-width: 1.5; stroke-dasharray: 6 6; }
.ca-ring-t { font: 700 10.5px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; fill: rgba(185, 242, 74, .75); text-anchor: middle; }
.ca-ring-t--s { text-anchor: start; fill: rgba(255, 255, 255, .4); }
.ca-axis { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.ca-n { font: 800 11px/1 'Outfit', system-ui, sans-serif; fill: rgba(255, 255, 255, .45); text-anchor: middle; }
.ca-town circle { fill: rgba(255, 255, 255, .55); }
.ca-town text { font: 600 11px/1 'DM Sans', system-ui, sans-serif; fill: rgba(255, 255, 255, .62); }
.ca-town.is-on circle { fill: var(--lime); stroke: #05200d; stroke-width: 2.5; }
.ca-town.is-on text { font: 800 14px/1 'Outfit', system-ui, sans-serif; fill: #fff; }
.ca-home-dot { fill: var(--lime); stroke: #05200d; stroke-width: 3; }
.ca-home-pulse { fill: rgba(185, 242, 74, .35); transform-box: fill-box; transform-origin: center; }
.ca-home text { font: 800 12px/1 'Outfit', system-ui, sans-serif; fill: var(--lime); letter-spacing: .02em; }
.ca-route { fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 7 7; }
.ca-route-glow { fill: none; stroke: rgba(185, 242, 74, .25); stroke-width: 12; stroke-linecap: round; }
.ca-car { fill: #fff; stroke: var(--lime); stroke-width: 3; }
.ca-spoke { stroke: rgba(185, 242, 74, .28); stroke-width: 1.5; stroke-dasharray: 3 5; transition: stroke .3s, stroke-width .3s; }
html.sv-js .ca-home-pulse { animation: caPulse 2.2s ease-out infinite; }
html.sv-js .ca-route { animation: caDash 1.2s linear infinite; }
html.sv-js .ca-spoke { animation: caDash 2.4s linear infinite; }
@keyframes caPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes caDash { to { stroke-dashoffset: -28; } }
.ca-art .sv-chip--1 { left: -10%; top: 15%; } .ca-art .sv-chip--2 { right: -6%; top: 40%; } .ca-art .sv-chip--3 { left: -2%; bottom: 4%; }
@media (prefers-reduced-motion: reduce) { .ca-car { display: none; } }

/* ─── Best-route timeline ─────────────────────────────────────────────── */
.ca-route { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ca-legs-wrap { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(185, 242, 74, .18); }
.ca-legs-wrap h3 { color: #fff !important; margin-bottom: 20px !important; }
.ca-legs { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; counter-reset: leg; }
.ca-legs::before { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--lime) 0 8px, transparent 8px 14px); }
.ca-legs li { position: relative; padding: 10px 0; color: rgba(255, 255, 255, .88); font: 700 16.5px/1.3 var(--body); }
.ca-legs li::before { content: ""; position: absolute; left: -30px; top: 13px; width: 15px; height: 15px; border-radius: 50%; background: #0c2a16; border: 3px solid var(--lime); }
.ca-legs li.is-start::before, .ca-legs li.is-end::before { width: 21px; height: 21px; left: -33px; top: 9px; background: var(--lime); border-color: #05200d; box-shadow: 0 0 0 4px rgba(185, 242, 74, .25); }
.ca-legs li b { color: #fff; font-family: var(--display); font-size: 18px; }
.ca-legs li.is-end { color: var(--lime); }
.ca-route-copy p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
.ca-route-copy strong { color: #fff; }
.ca-route-copy a { color: var(--lime) !important; font-weight: 700; }
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.ca-chips span { padding: 9px 14px; border-radius: 999px; background: rgba(185, 242, 74, .12); border: 1px solid rgba(185, 242, 74, .3); color: #eaffc8; font: 700 14px/1 var(--body); }
.ca-hours { padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .15); font-size: 15.5px !important; }

/* ─── Card grids (accept / why) ───────────────────────────────────────── */
.ca-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ca-card p { margin-top: 8px !important; font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.ca-card .sv-tile-ic svg { width: 26px; height: 26px; }

/* ─── Hub (service-areas.html) ────────────────────────────────────────── */
.sa-map-wrap { width: min(100%, 520px); }
.sa-cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sa-city { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); color: var(--fg) !important; text-decoration: none !important; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.sa-city:hover, .sa-city.is-hot { transform: translateY(-5px); border-color: rgba(15, 162, 74, .5); box-shadow: 0 28px 50px -30px rgba(7, 19, 11, .45); }
.sa-city-flag { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--green-dk); font: 700 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
[data-theme="dark"] .sa-city-flag { background: rgba(185, 242, 74, .1); color: var(--lime); }
.sa-city--home { background: var(--forest); color: #fff !important; border-color: transparent; }
.sa-city--home .sa-city-flag { background: var(--lime); color: var(--forest); }
.sa-city h3 { margin-top: 8px !important; }
.sa-city-meta { display: flex; gap: 14px; font: 600 14.5px/1.3 var(--body); color: var(--fg-2); }
.sa-city--home .sa-city-meta { color: rgba(255, 255, 255, .75); }
.sa-city-meta b { font-family: var(--display); font-size: 22px; letter-spacing: -.03em; color: var(--fg); }
.sa-city--home .sa-city-meta b { color: var(--lime); }
.sa-city-go { margin-top: auto; padding-top: 12px; font: 700 14.5px/1 var(--body); color: var(--green-dk); }
[data-theme="dark"] .sa-city-go, .sa-city--home .sa-city-go { color: var(--lime); }
.sa-state { margin: 34px 0 14px !important; display: flex; align-items: center; gap: 12px; font: 800 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--green-dk); }
.sa-state::after { content: ""; flex: 1; height: 1px; background: var(--line); }
[data-theme="dark"] .sa-state { color: var(--lime); }
.sa-more { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: center; margin-top: 34px; padding: clamp(24px, 3.4vw, 40px); border-radius: 30px; background: var(--forest); color: #fff; }
.sa-more p { margin-top: 12px !important; color: rgba(255, 255, 255, .8); font-size: 16.5px; line-height: 1.65; }
.sa-more a:not(.sv-btn) { color: var(--lime) !important; font-weight: 700; }
.sa-more-towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sa-more-towns span { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font: 600 14px/1 var(--body); color: rgba(255, 255, 255, .88); }
.sa-more-henry img { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; border-radius: 22px; }
.ca-town.is-hot circle { fill: var(--lime); r: 7; }
.ca-town.is-hot text { fill: #fff; font-weight: 800; }
.ca-spoke.is-hot { stroke: var(--lime); stroke-width: 3; }

@media (max-width: 980px) {
  .ca-route, .sa-more { grid-template-columns: 1fr; }
  .ca-cards, .sa-cities { grid-template-columns: 1fr 1fr; }
  .ca-art, .sa-map-wrap { width: min(100%, 380px); }
}
@media (max-width: 600px) {
  .ca-cards, .sa-cities { grid-template-columns: 1fr; }
  .ca-town text { font-size: 10px; }
}