section.content {
  background: var(--color-gray-100);
  padding: var(--spacing-6) 0;
}

/* Services hub grid now reuses .services-container/.services-grid/
   .service-card from site/elements.css (same component as the homepage
   and location pages). Just the heading size, since elements.css only
   styles .service-card h3 and this hub page's cards use h2. */
.service-card h2.service-heading {
	font-size: var(--text-xl);
	margin-top: 0;
	margin-bottom: var(--spacing-2);
	color: var(--color-text);
}

/* Contact section (section.contact / .contact-grid / .contact-map etc.) is
   the shared component in assets/css/site/contact-section.css, loaded
   globally via index.css before this file. The identical block that used
   to be duplicated here had no effect (same values, loaded second) and is
   removed as dead weight, not a visual change. */

.prose p {
  max-width: 100%;
}
.service-locations-list {
}
.service-locations {
  margin: var(--spacing-12) auto;
}
.service-location:before {
  content: "📍";
}
.service-location h3 {
  display: inline-block;
  padding-left: var(--spacing-4);
}
.service-location h3 a {
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  text-decoration-thickness: 2px;
}
.service-location:after {
  content: "→";
  color: var(--color-gray);
  font-weight: var(--font-line);
}
.service-location h3 a:hover {
  margin-right: 2px;
  transition: 0.05s;
  text-decoration-color: var(--color-link-hover);
}

@media all and (max-width: 48em) {

  .service-locations-list {
/*    display: block;
    max-width: 100%;*/
  }
}