/* ===== SERVICES ===== */
#services { background: var(--off); }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }

.svc-card {
  background: white; border-radius: 20px; padding: 2.25rem 1.875rem;
  border: 1px solid rgba(34,197,94,0.1);
  position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.svc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--green), var(--green-mid));
  transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.svc-card:hover { transform:translateY(-6px); box-shadow:0 20px 56px rgba(22,101,52,0.1); border-color:rgba(34,197,94,0.25); }
.svc-card:hover::before { transform:scaleX(1); }

.svc-icon {
  width: 48px; height: 48px; background: var(--green-pale);
  border-radius: 12px; display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.35rem; transition: background .3s;
}
.svc-card:hover .svc-icon { background: var(--green); }
.svc-icon svg { transition: stroke .3s; stroke: #22C55E; }
.svc-card:hover .svc-icon svg { stroke: #fff; }

.svc-card h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.svc-card p { font-size: .875rem; color: var(--muted); line-height: 1.7; }
.svc-num {
  position: absolute; bottom: 1.25rem; right: 1.75rem;
  font-family: 'Fraunces', serif; font-size: 3rem; font-weight: 900;
  color: rgba(22,101,52,0.05); line-height: 1;
}