/* ==========================================================================
   Lilo Socials — Services page
   ========================================================================== */

.services-hero {
  padding-top: clamp(8rem, 6.5rem + 5vw, 11rem);
  padding-bottom: var(--space-5);
}

.services-hero h1 {
  margin-top: var(--content-gap);
}

.services-hero .text-lead {
  margin-top: var(--space-4);
  max-width: 56ch;
}

/* ---------------------------------- Service cards (image + label + copy) ---------------------------------- */
.services-detail {
  padding-block: var(--space-5);
}

/* Wider columns than the homepage's 5-up teaser — this grid needs to hold
   an actual description under each label, not just link off elsewhere. */
.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
}

.service-card-copy {
  margin-top: var(--space-2);
  color: var(--text-muted);
  max-width: 42ch;
}

.service-card-list {
  list-style: none;
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 42ch;
}

.service-card-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.service-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-primary-soft);
}

@media (max-width: 1024px) {
  .service-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .service-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------- Closing CTA ---------------------------------- */
.services-cta {
  padding-block: var(--space-8);
}

.services-cta .section-head h2 {
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
}