.service-area {
  padding: 90px 20px;
  background: #f7f3ee;
}

.two-col {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

#service-area h2 {
  margin: 0 0 18px;
  color: #1f1d1d;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
}

#service-area h2 span {
  color: #d53f34;
}

.service-area p {
  color: #444;
  font-size: 18px;
  line-height: 1.7;
}

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

.city-item {
  padding: 13px 15px;
  background: #fff;
  border-left: 4px solid #d53f34;
  border-radius: 6px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  color: #fff;
  background: #d53f34;
  border-radius: 6px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

#service-map {
  width: 100%;
  min-height: 520px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
/* Fix Leaflet map tiles inside service area */
.service-area .leaflet-tile,
.service-area .leaflet-marker-icon,
.service-area .leaflet-marker-shadow {
  display: block !important;
  position: absolute !important;
  bottom: auto !important;
  max-width: none !important;
}
.map-caption {
  margin-top: 12px;
  color: #555;
  font-size: 14px;
  text-align: center;
}

.service-map-marker {
  width: 26px !important;
  height: 26px !important;
  background: #d53f34;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.service-map-marker.office {
  width: 38px !important;
  height: 38px !important;
  background: #111;
  border: 4px solid #d53f34;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .service-area h2 {
    font-size: 36px;
  }

  #service-map {
    min-height: 430px;
  }
}

@media (max-width: 575px) {
  .city-grid {
    grid-template-columns: 1fr;
  }
} 
 
 
  /* CRITICAL: the map div MUST have an explicit pixel height */
    #service-map {
      width: 100%;
      height: 420px;
      border: 3px solid #1470ae;
    }

    /* Section layout */
   #service-area {
      padding: 60px 20px;
      background: #f4f8fb;
      background-image: linear-gradient(100deg, #1470ae 0%, hsl(204.16deg 79.38% 38.04% / 85%) 42%, #1470aeb0 100%),  url(/wp-content/uploads/2026/06/service-area-map.jpg)!important;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #service-area h2 {
      color: #ffffff;
      margin-bottom: 12px;
    }
#service-area h2{
  font-size: 3em;
  text-shadow: none;
}
#service-area .btn-primary{
background-color:#d53f34;
  color:#fff;
  text-align:center;
}
#service-area .btn-primary:hover{
background-color:#ffffff;
  color:#000;
}

    #service-area h2 span {color: #d53f34;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
    .service-area p {color: #ffffff!important;line-height: 1.7;margin-bottom: 20px;}
#service-area h2 span:before {
    content: "";
    position: absolute;
    width: 4.3em;
    height: 5px;
    background: #ffffff;
    bottom: -10px;
    left: 0;
    filter: drop-shadow(2px 2px 0px #d53f34);
}
    .city-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }
    .city-item {
      padding: 10px 14px;
      background: #fff;
      border-left: 4px solid #1470ae;
      color: #0a2a41;
      font-weight: bold;
    }

    .btn-primary {
      display: inline-block;
      background: #d53f34;
      color: #fff;
      padding: 12px 28px;
      text-decoration: none;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 32px;
    }
    .btn-primary:hover { background: #b83028; }

    .map-caption {
      font-size: 0.8rem;
      color: #888;
      margin-top: 6px;
      text-align: center;
    }

    @media (min-width: 768px) {
      .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
        max-width: 1200px;
        margin: 0 auto;
      }
    }