/* ============================================================
   services.css — Services page styles
   ============================================================ */

/* ── SERVICES GRID ───────────────────────────────────────── */
.svc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; margin-top: 56px;
}
.svc-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--rl); overflow: hidden;
  box-shadow: var(--sh-sm); transition: all 280ms ease;
  display: flex; flex-direction: column;
}
.svc-card:hover {
  border-color: rgba(26,86,219,.25);
  box-shadow: var(--sh-lg);
  transform: translateY(-4px);
}
.svc-card__img { height: 220px; overflow: hidden; position: relative; }
.svc-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.svc-card:hover .svc-card__img img { transform: scale(1.04); }
.svc-card__img::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 60px; background: linear-gradient(transparent, rgba(15,23,42,.2));
}
.svc-card__body {
  padding: 28px; flex: 1; display: flex; flex-direction: column;
}
.svc-card__num {
  font-family: var(--font-m); font-size: 10px;
  color: var(--muted); letter-spacing: .12em; margin-bottom: 10px;
}
.svc-card h3 {
  font-family: var(--font-h); font-size: 22px; font-weight: 700;
  color: var(--navy); margin-bottom: 6px; letter-spacing: -.01em;
}
.svc-brief {
  font-family: var(--font-m); font-size: 12px;
  color: var(--blue); margin-bottom: 12px; letter-spacing: .04em;
}
.svc-card p {
  font-family: var(--font-b); font-size: 14.5px;
  color: var(--muted); line-height: 1.75; margin-bottom: 16px;
}
.svc-bullets { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.svc-bullets li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-b); font-size: 14px; color: var(--slate);
}
.svc-bullets .fa-check-circle { color: var(--green-mid); font-size: 14px; flex-shrink: 0; }
.svc-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-m); font-size: 12px;
  color: var(--blue); font-weight: 500; margin-top: auto;
  transition: gap 200ms ease;
}
.svc-card:hover .svc-cta { gap: 12px; }

/* ── CTA BAND ────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(135deg, var(--blue) 0%, var(--green-dk) 100%);
  padding: 72px 0; text-align: center;
}
.cta-band h2 {
  font-family: var(--font-h); font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; color: #fff;
  letter-spacing: -.02em; margin-bottom: 14px;
}
.cta-band p { font-size: 17px; color: rgba(255,255,255,.75); margin-bottom: 32px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }