/* Salt Lake City location page.

   Same rule as services.css and hosting.css: a page-scoped class that could have
   been a sitewide one is the bug this build keeps hitting, so what follows is
   only the things that exist nowhere else. The hero, cards, numbers row, FAQ
   and CTA band are all sitewide components used as-is.

   Genuinely new: the featured Utah result, and the service-area columns, which
   need to read as a tight list of place names rather than as body copy. */

/* The featured Utah result. Two halves: the number on the left, the quote from
   the same client on the right, so the claim and the person making it are one
   object rather than two things near each other. */
.slc-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 8px;
  padding: 38px 40px;
}
.slc-feature__main { min-width: 0; }   /* grid child: keep long words from forcing overflow */
.slc-feature__client { font-size: 20px; margin: 10px 0 6px; }
.slc-feature__n {
  font: 800 clamp(56px, 7vw, 104px)/0.95 var(--font-display, var(--font-body));
  letter-spacing: -0.02em;
  color: var(--accent, #C98B5E);
}
.slc-feature__sub { margin-top: 10px; max-width: 34ch; }
.slc-feature__quote { margin: 0; }

.slc-leads { margin-top: 48px; }
.slc-quote2 { margin-top: 32px; max-width: 760px; margin-inline: auto; }
.slc-proof__more { margin-top: 32px; text-align: center; }

/* The columns are cards so they hold their own on the mid panel, but the list
   inside wants to be denser than a normal .list-square in body copy. */
.slc-area__grid { margin-top: 8px; }
.slc-area__col { padding-block: 26px; }
.slc-area__h {
  font: 700 15px/1.3 var(--font-display, var(--font-body));
  letter-spacing: .02em;
  text-transform: uppercase;
  /* Inherited, not var(--ink). These cards sit on a dark panel, where --ink is
     still #1a1a1a and the card background is #1a1a1a too: the heading rendered
     black on black. Same class on a cream panel would have been fine, which is
     exactly why hardcoding it was the wrong call. */
  color: inherit;
  opacity: .62;
  margin-bottom: 14px;
}
.slc-area__list { display: grid; gap: 7px; }
.slc-area__list li { font-size: 15px; line-height: 1.35; }
.slc-area__note { margin-top: 32px; max-width: 70ch; }

.slc-nap__title { font-size: 20px; margin-bottom: 12px; }
.slc-nap__text { font-style: normal; line-height: 1.8; }
.slc-nap__hours {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid currentColor;   /* follows the panel, light or dark */
  border-top-color: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 14px;
  opacity: .75;
}

@media (max-width: 900px) {
  /* The number and the quote stop sitting side by side before the quote gets
     too narrow to read as a sentence. */
  .slc-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 26px; }
}

@media (max-width: 620px) {
  .slc-area__col { padding-block: 22px; }
}