/* ==========================================================================
   Service-area map section. Sits between the reviews and the FAQ.

   Own classes on purpose: the framework's .drc-section / .drc-container carry
   flex centring, padding and margins from several places, and inheriting them
   made the section's spacing depend on rules written for other blocks.

   Two images. The 1200px card is the desktop/tablet one. On phones a 1600px
   design squeezed to 375px leaves the place labels ~8px tall, so a separate
   render at a lower zoom with larger type is served instead; its labels land
   at ~14px on a 375px screen. Both carry width/height so the space is
   reserved before the JPEG arrives - no layout shift - and both are lazy:
   the section is far below the fold and must not compete with the hero.
   ========================================================================== */

.drc-map {
  padding: 84px 20px 40px;          /* 84 top: clear air between the grey badges band and the map */
  background: #ffffff;
  font-family: Montserrat, Arial, sans-serif;
}

.drc-map__inner {
  /* 900, not the full 1200 content width: at 1200 the card ran ~1090px tall
     on desktop and read as a wall. The 1200px image stays as the source so it
     is still sharp on retina screens at this size. */
  max-width: 900px;
  margin: 0 auto;
}

.drc-map__eyebrow {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #045EA8;
}

.drc-map__title {
  margin: 0 auto 16px;
  max-width: 760px;
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #111111;
}

.drc-map__lead {
  margin: 0 auto 28px;
  max-width: 760px;
  text-align: center;
  font-size: 17px;
  line-height: 1.55;
  color: #575757;
}

/* the 15 areas, three columns of five (two columns on phones) */
.drc-map__list {
  list-style: none;
  margin: 0 auto 32px;
  padding: 0;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 24px;
}

.drc-map__list li {
  position: relative;
  padding-left: 17px;
  font-size: 16px;
  line-height: 1.35;
  color: #242424;
}

.drc-map__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #045EA8;
}

.drc-map__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 40px;
}

.drc-map__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
}

/* #1F75FE is the page's own CTA blue; #045EA8 (the logo blue) is kept for
   the map, bullets and eyebrow so the buttons match the other buttons. */
.drc-map__btn--primary {
  background: #1F75FE;
  color: #ffffff;
}

.drc-map__btn--call {
  background: #ffffff;
  color: #111111;
  border: 1px solid #d5d9de;
}

.drc-map__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 763px) {
  .drc-map { padding: 56px 14px 28px; }
  .drc-map__title { font-size: 28px; }
  .drc-map__lead { font-size: 15px; margin-bottom: 22px; }
  .drc-map__list { grid-template-columns: repeat(2, 1fr); gap: 9px 16px; max-width: 340px; margin-bottom: 26px; }
  .drc-map__list li { font-size: 15px; }
  .drc-map__actions { flex-direction: column; gap: 10px; margin-bottom: 30px; }
  .drc-map__btn { width: 100%; }
  .drc-map__img { border-radius: 6px; }
}

/* The trust-badges row sits directly above this section and, like the reviews
   above it and the map below, was white - three white blocks in a row. A
   light grey band (#f4f4f4, the site's own section grey) makes it read as
   its own strip and gives the map a clean edge to start from. ID selector,
   so it beats the framework's white on the same element. */
#i4odpju {
  background-color: #f4f4f4;
  padding-top: 44px;
  padding-bottom: 44px;
}

@media (max-width: 763px) {
  #i4odpju { padding-top: 32px; padding-bottom: 32px; }
}