/* ---------------------------------------------------------------------------
 * about.css — only what is unique to the About template (Figma page 670:703).
 * Everything reusable lives in interior.css.
 * ------------------------------------------------------------------------- */

/* --- Service areas + map + HQ (686:829) ---------------------------------- */
.service-map {
  background: var(--bg, #ffffff);
}

.service-map-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 105px;
  /* Figma 686:829 centres 753px of content in a 1018px frame → 133px each side. */
  padding-block: 133px;
  max-width: calc(1664px + var(--gutter) * 2);
}

.service-map h2 {
  /* Figma keeps this on two lines in a 1070px text node. */
  max-width: 1070px;
  margin: 0;
  font-size: clamp(34px, 4.17vw, 80px);
  line-height: 1.2125; /* 97/80 */
  text-align: center;
}

.service-map .columns {
  display: grid;
  /* 263 + 672 + 545 + two 92px gutters = 1664, the Figma row width (Frame 152).
     The HQ column used to be 445px, which wrapped the directions text one line
     wider than the design and pushed the whole section out of rhythm. */
  grid-template-columns: minmax(0, 263px) minmax(0, 672px) minmax(0, 545px);
  align-items: start;
  justify-content: center;
  gap: clamp(40px, 4.8vw, 92px);
  width: 100%;
}

.service-map h3 {
  margin: 0 0 15px;
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.222;
  color: var(--muted, #909091);
}

.service-map .areas ul,
.service-map .contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-map .areas li,
.service-map .contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

.service-map .cnm-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--brand, #008AF7);
}

.service-map .contact a {
  color: inherit;
}

.service-map .contact a:hover,
.service-map .contact a:focus-visible {
  color: var(--brand, #008AF7);
}

.service-map .map {
  width: 100%;
  height: auto;
}

.service-map .hq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21px;
}

.service-map .contact {
  gap: 12px;
}

.service-map .directions p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

.service-map .directions p:last-child {
  margin-bottom: 0;
}

.service-map .directions strong {
  font-weight: 700;
}

@media (max-width: 1399px) {
  .service-map .columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.2fr);
    gap: 48px;
  }
}

@media (max-width: 991px) {
  .service-map-inner {
    gap: 56px;
    padding-block: 64px;
  }

  .service-map .columns {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
    text-align: center;
  }

  .service-map .areas,
  .service-map .hq {
    width: 100%;
    max-width: 520px;
    text-align: left;
  }

  .service-map .map {
    max-width: 560px;
  }
}