/*
 * Services — Commercial (lead) + Residential.
 * Two grouped, uniform tile grids. Mobile: 1 col. ≥560: 2 cols. ≥1024: 3 cols.
 */

.services {
  /* Off-white cushion: creates editorial rhythm charcoal(marquee) -> off-white
     -> white(projects) -> charcoal(stats) -> ... */
  background: #F7F7F5;
  padding-block: var(--space-section);
  color: var(--color-black);
}

.services__header {
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.services__header-copy { max-width: 60ch; }

.services__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-3);
}

.services__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-4);
}

.services__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.7);
  max-width: 60ch;
}

/* ── Group (Commercial / Residential) ── */
.services__group { margin-top: var(--space-8); }

.services__group-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}
.services__group-num { color: var(--color-red); }
.services__group-tag {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin-left: auto;
}

/* ── Tile grid ── */
.services__grid {
  display: grid;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Service tile ── */
.service-tile {
  background: var(--color-white);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius-btn);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color var(--transition-base);
}
.service-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-btn);
  background: rgba(185, 51, 56, 0.08);
  color: var(--color-red);
  transition: background var(--transition-base), color var(--transition-base);
}
.service-tile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
  color: var(--color-charcoal);
  margin: 0;
}
.service-tile__desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.68);
  margin: 0;
}

/* Hover (desktop pointer): lift + red accent. */
.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
  border-color: var(--color-red);
}
.service-tile:hover .service-tile__icon { background: var(--color-red); color: var(--color-white); }

/* Touch (no hover): a resting shadow so the tiles don't read flat. */
@media (hover: none) {
  .service-tile { box-shadow: 0 6px 18px rgba(17, 17, 17, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .service-tile { transition: border-color var(--transition-base); }
  .service-tile:hover { transform: none; box-shadow: none; }
}