/* ================================================================
   services.css — Services page ONLY
   style.css must be loaded first.
   ================================================================ */

/* ── HERO  FILE: services-hero-bg.jpg ───────────────────────── */
.sv-hero {
  position: relative;
  height: clamp(220px, 28vw, 340px);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sv-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  z-index: 0;
}
.sv-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}
.sv-hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--font);
  font-size: var(--h1);
  font-weight: 700;
  color: var(--white);
  text-align: center;
}

/* ── OVERVIEW ────────────────────────────────────────────── */
.sv-overview { background: #fff; }
.sv-overview-inner {
  max-width: 1054px;
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.sv-overview-text {
  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--body-lh);
}
.sv-overview-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  max-width: 540px;
}
.sv-overview-img {
  aspect-ratio: 16/10;
  overflow: hidden; background: #f0f0f0;
}
.sv-overview-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-social-text {
  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--body-lh);
  font-weight: 700;
}

.sv-overview .section-title {
  margin-bottom: 0;
}

/* ── EXPANDED WE DO (15 services) ───────────────────────── */
.sv-we-do { background: #fff; }
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.sv-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.sv-icon { font-size: 2.25rem; line-height: 1; margin-bottom: 0.25rem; }
.sv-card h3 {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 1rem; font-weight: 700; color: #111; line-height: 1.3;
}
.sv-card p {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 0.92rem; color: #666; line-height: 1.55; max-width: 200px;
}
.sv-cta { text-align: center; margin-top: 2.5rem; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .sv-hero       { height: 200px; }
  .sv-grid       { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .sv-overview-imgs { grid-template-columns: 1fr; max-width: 320px; }
}