.service-areas-section{
  padding-top:54px!important;
  padding-bottom:54px!important;
  background:var(--cream-2,#f7f4ee);
}

.service-areas-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:24px;
}

.service-areas-heading h2{
  max-width:680px;
  margin:8px 0 0;
  font-size:clamp(1.75rem,3vw,2.55rem);
}

.service-areas-heading > p{
  max-width:500px;
  margin:0;
  color:var(--muted,#5f6872);
}

.service-city-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.service-city-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:82px;
  padding:13px 14px;
  overflow:hidden;
  border:1px solid var(--line,#d9dde2);
  border-radius:12px;
  background:#fff;
  color:var(--navy,#0b1f3a);
  text-decoration:none;
  box-shadow:0 5px 18px rgba(11,31,58,.05);
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.service-city-card strong{
  min-width:0;
  font-size:.91rem;
  line-height:1.2;
}

.service-city-pin{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--yellow,#ffd21c);
  color:var(--navy,#0b1f3a);
  transition:background-color .22s ease,color .22s ease,transform .22s ease;
}

.service-city-pin svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-city-arrow{
  color:#a87500;
  font-size:1.05rem;
  transition:color .22s ease,transform .22s ease;
}

.service-city-card:hover,
.service-city-card:focus-visible{
  border-color:var(--navy,#0b1f3a);
  background:var(--navy,#0b1f3a);
  color:#fff;
  box-shadow:0 12px 26px rgba(11,31,58,.18);
  transform:translateY(-4px);
}

.service-city-card:hover .service-city-pin,
.service-city-card:focus-visible .service-city-pin{
  background:var(--yellow,#ffd21c);
  color:var(--navy,#0b1f3a);
  transform:scale(1.06);
}

.service-city-card:hover .service-city-arrow,
.service-city-card:focus-visible .service-city-arrow{
  color:var(--yellow,#ffd21c);
  transform:translateX(3px);
}

.service-city-card:focus-visible{
  outline:3px solid var(--yellow,#ffd21c);
  outline-offset:3px;
}

@media (max-width:1080px){
  .service-city-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:700px){
  .service-areas-heading{display:block}
  .service-areas-heading > p{margin-top:12px}
}

@media (max-width:560px){
  .service-areas-section{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  .service-city-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .service-city-card{
    grid-template-columns:31px minmax(0,1fr) 16px;
    min-height:74px;
    padding:11px;
  }
  .service-city-pin{
    width:31px;
    height:31px;
  }
  .service-city-card strong{font-size:.84rem}
}

@media (max-width:360px){
  .service-city-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .service-city-card,
  .service-city-pin,
  .service-city-arrow{transition:none}
}