/* Full service scope, using the approved shared type and spacing scale. */
#services.services-overview {
  --services-overlay-color: color-mix(in srgb, var(--blue) 55%, #000);
  --services-copy: color-mix(in srgb, var(--white) 85%, var(--blue));
  --services-surface: color-mix(in srgb, var(--blue) 78%, transparent);
  position: relative;
  isolation: isolate;
  background-color: var(--blue);
  background-image: url("assets/services-protective-structure.jpg");
  background-size: cover;
  background-position: center;
  color: var(--white);
}

#services.services-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--services-overlay-color) 85%, transparent);
  pointer-events: none;
}

#services.services-overview > .wrap {
  position: relative;
  z-index: 1;
}

#services h2,
#services h3 {
  color: var(--white);
}

#services .section-intro .eyebrow {
  margin-bottom: 12px;
}

#services .section-lead {
  max-width: 740px;
  margin-top: 12px;
  color: var(--services-copy);
}

.services-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-content) var(--space-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-work-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 1;
  padding: var(--space-card);
  border-top: 4px solid var(--orange);
  border-radius: 6px;
  background: var(--services-surface);
}

.service-work-number {
  display: block;
  margin-bottom: var(--space-text);
  color: var(--orange);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}

.service-work-step h3 {
  margin: 0;
}

#services .service-work-description {
  font-size: var(--font-size-card);
  line-height: var(--line-height-body);
  color: var(--services-copy);
}

#services .service-work-description {
  flex: 1;
  margin-top: var(--space-text);
}


.services-complete-note {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: var(--space-section-heading);
  padding: 12px var(--space-card);
  border: 2px solid var(--orange);
  border-radius: 14px;
  background: var(--services-surface);
  text-align: center;
}

#services .services-complete-note p {
  color: var(--services-copy);
  line-height: 1.4;
}

.services-complete-note .button {
  color: var(--ink);
  max-width: 100%;
  min-height: 48px;
  padding-block: 10px;
}

@media (min-width: 650px) {
  .services-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-work-step h3 {
    min-height: calc(var(--font-size-h3) * var(--line-height-h3) * 2);
  }
}

@media (min-width: 1150px) {
  .services-work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Subtle feedback for pointer devices without changing card layout. */
@media (hover: hover) and (pointer: fine) {
  .service-work-step {
    transition: transform 300ms cubic-bezier(0.2, 0.65, 0.3, 1),
      box-shadow 300ms ease, border-color 300ms ease;
  }

  .service-work-step:hover {
    transform: translateY(-4px) scale(1.02);
    border-top-color: color-mix(in srgb, var(--orange) 80%, var(--white));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 45%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-work-step,
  .service-work-step:hover {
    transform: none;
    transition: none;
  }
}

@media (max-width: 680px) {
  #services.services-overview {
    background-image: url("assets/services-protective-structure-mobile.jpg");
  }
}