/* ---------- Hero image ---------- */
/* Same navy tint as the shared .hero; path is relative to css/pages/ */
.hero--services {
  background-image:
    linear-gradient(135deg, rgba(24, 53, 83, 0.82) 0%, rgba(16, 37, 59, 0.7) 55%, rgba(11, 26, 42, 0.85) 100%),
    url("../../assets/images/services-hero.webp");
  /* Keep the suspension bridge in view when the wide image is cropped */
  background-position: 30% center;
}

/* ---------- Service detail list ---------- */
.service-list {
  display: grid;
  gap: var(--space-lg);
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.service-detail {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--color-white);
  border-left: 4px solid var(--color-orange);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-icon);
  /* Keep anchored panels clear of the sticky header */
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

.service-detail:target {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
}

.service-detail .service-icon {
  flex-shrink: 0;
}

.service-detail-title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-lg);
}

.service-detail-text {
  display: grid;
  gap: var(--space-sm);
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .service-detail {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
    text-align: left;
  }
}

/* ---------- Scope & limits ---------- */
.limits {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.9);
}

.limits .section-title {
  color: var(--color-white);
}

.limits-grid {
  display: grid;
  gap: var(--space-xl);
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .limits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.limits-title {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-md);
  color: var(--color-orange);
}

.limits-text {
  font-size: var(--fs-sm);
}