:root{--accent:#047857;--ink:#0f1b2d;--muted:#41566b;}
    *{box-sizing:border-box}
    body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);margin:0;background:#f7faf8;line-height:1.6}
    a{color:var(--accent)}
    .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
    header.top{background:#0a1628;color:#fff;padding:16px 0}
    header.top .wrap{display:flex;align-items:center;gap:10px}
    header.top .logo{font-family:'Syne';font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none}
    nav.crumb{font-size:.9rem;color:var(--muted);padding:14px 0}
    nav.crumb a{text-decoration:underline}
    .hero{padding:26px 0 8px}
    .hero h1{font-family:'Syne';font-size:2rem;margin:0 0 8px}
    .hero p{color:var(--muted);margin:0;max-width:720px}
    .city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:24px 0}
    .city-card{background:#fff;border:1px solid #e2ece6;border-radius:16px;padding:22px;text-decoration:none;color:var(--ink);transition:box-shadow .2s}
    .city-card:hover{box-shadow:0 4px 16px rgba(4, 120, 87,.15)}
    .city-card h2{font-family:'Syne';margin:0 0 4px;font-size:1.2rem}
    .city-card .count{color:var(--muted);font-size:.85rem;margin:0 0 10px}
    .city-card .btn{display:inline-block;background:var(--accent);color:#fff;padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:600}
    .svc{background:#fff;border:1px solid #e2ece6;border-radius:14px;padding:18px 22px;margin:18px 0}
    .svc h2{font-family:'Syne';font-size:1.2rem;margin:0 0 12px}
    ul.svc-links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
    ul.svc-links li{margin:0}
    ul.svc-links a{background:#f0f7f3;border-radius:999px;padding:5px 12px;font-size:.85rem;text-decoration:none;white-space:nowrap}
    footer{background:#0a1628;color:#c7d3de;padding:24px 0;margin-top:30px;text-align:center;font-size:.9rem}
    footer a{color:#7fe0a6}
  
/* mobile safety: prevent horizontal scroll */
html, body { overflow-x: clip; }
.blog-table, main table, table { max-width: 100%; }
@media (max-width: 768px) { .blog-table, main table, table { display: block; overflow-x: auto; } }
header a, header button, nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }