/* services-home.css — homepage services band (services-2.webp).
   Full-width background image + intro column (left) + service-card trio (right).
   Reuses .lh-service-card from services.css. Tokens only, mobile-first. */

.lh-shome {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-10);
}
.lh-shome__media { position: absolute; inset: 0; z-index: -1; }
.lh-shome__bg { width: 100%; height: 100%; object-fit: cover; }
.lh-shome__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 25, 23, .74), rgba(28, 25, 23, .60));
}

.lh-shome__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
.lh-shome__intro { max-width: 46ch; }
.lh-shome__eyebrow { display: block; margin-bottom: var(--space-2); color: var(--color-accent); }
.lh-shome__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-h2);
  line-height: var(--leading-display);
  color: #fff;
}
.lh-shome__lead {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--font-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, .9);
}
.lh-shome__cta { gap: 8px; }
.lh-shome__cta svg { flex-shrink: 0; }
.lh-shome__empty { color: rgba(255, 255, 255, .9); }

.lh-shome__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cards-gap-row) var(--cards-gap-col);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-shome__card-item { display: flex; }
/* Compact homepage cards: smaller title (the shared card title is --font-h4,
   which clamps up to ~22px on desktop; pin to h4's 18px floor here). */
.lh-shome .lh-service-card__title { font-size: var(--font-body-lg); }

@media screen and (min-width: 750px) {
  .lh-shome__cards { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 990px) {
  .lh-shome { padding-block: var(--space-12); }
  .lh-shome__inner { grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr); gap: var(--space-10); }
}