/* ============================================================
   Aanbod (h2g/diensten) — 3 cards met beeld, tag, link, hover-zoom
   ============================================================ */

.services { background: linear-gradient(180deg, var(--nile-900), var(--navy)); }

.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.sv-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.015);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .4s;
}
.sv-card:hover { transform: translateY(-8px); border-color: rgba(212,160,23,.5); }

.sv-img { aspect-ratio: 16/11; overflow: hidden; }
.sv-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) brightness(.78) contrast(1.05);
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .6s;
}
.sv-card:hover .sv-img img { transform: scale(1.07); filter: grayscale(0) brightness(.9); }

.sv-body { padding: 28px 26px 32px; }
.sv-tag {
  font-family: var(--font-h); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); margin: 0;
}
.sv-body h3 { font-size: 22px; margin: 16px 0 12px; line-height: 1.18; }
.sv-body p  { color: var(--nile-300); font-size: 15px; font-weight: 300; margin: 0; }

.sv-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-family: var(--font-h); font-weight: 600; font-size: 14px; color: var(--teal-300);
  border-bottom: 1px solid transparent; padding-bottom: 3px; transition: .3s;
}
.sv-card:hover .sv-link { border-color: var(--teal-300); }
.sv-link .arr { transition: transform .3s; }
.sv-card:hover .sv-link .arr { transform: translateX(5px); }

@media (max-width: 820px) { .sv-grid { grid-template-columns: 1fr; } }