/* Top menu: small "View service areas" button, lighter than the main tabs but still in the site's blue. */
.navlinks{align-items:center}
.nav a.sa-nav,a.sa-nav{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(43,179,230,.55);border-radius:999px;background:rgba(43,179,230,.08);color:#2BB3E6;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.nav a.sa-nav:hover,a.sa-nav:hover{background:rgba(43,179,230,.18);border-color:#2BB3E6;color:#7FD3F2}
a.sa-nav:focus-visible{outline:2px solid #2BB3E6;outline-offset:2px}
a.sa-nav svg{flex-shrink:0}
/* Phone menu: same idea, a smaller blue row under the main links. */
.mobile-menu a.sa-nav-m{min-height:44px;color:#2BB3E6;font-size:13px;border-bottom:0}
/* Jumping to the map leaves room for the top bar. */
#service-areas{scroll-margin-top:110px}
/* Hero: a smaller "Service areas" button beside See service plans; jumps down to the map. */
a.btn-sa{align-self:center;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border:1px solid rgba(43,179,230,.55);border-radius:999px;background:rgba(43,179,230,.08);color:#2BB3E6;font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;box-sizing:border-box;transition:background .15s,border-color .15s,color .15s}
a.btn-sa:hover{background:rgba(43,179,230,.18);border-color:#2BB3E6;color:#7FD3F2}
a.btn-sa:focus-visible{outline:2px solid #2BB3E6;outline-offset:2px}
a.btn-sa svg{flex-shrink:0}