/* services.html — 6-card service grid with hover reveal */
.svc-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:48px;
}
@media (min-width:640px){ .svc-grid { grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (min-width:1024px){ .svc-grid { grid-template-columns:repeat(3,1fr); gap:24px; } }

/* ---- Card shell ---- */
.svc-card {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:340px;
  background-color:#1a2a20;
  background-size:cover;
  background-position:center;
  cursor:pointer;
}

/* Permanent dark gradient so title is always legible */
.svc-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.1) 100%);
  transition:opacity .25s ease;
  z-index:1;
}
.svc-card:hover::before { opacity:0; }

/* ---- Front face: title at bottom ---- */
.svc-card-front {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:28px 26px;
  z-index:2;
  transition:opacity .25s ease;
}
.svc-card-front h3 {
  font-family:var(--font-display,inherit);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:22px;
  color:#fff;
  line-height:1.15;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  margin:0;
}
.svc-card:hover .svc-card-front { opacity:0; pointer-events:none; }

/* ---- Back face: hover reveal ---- */
.svc-card-back {
  position:absolute;
  inset:0;
  background:rgba(6,28,18,.93);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:3;
  overflow-y:auto;
}
.svc-card:hover .svc-card-back { opacity:1; visibility:visible; }

/* Back title — green, acts as link when card has a primary page */
.back-title {
  font-family:var(--font-display,inherit);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:17px;
  color:#1CBE72;
  text-decoration:none;
  display:block;
  margin-bottom:18px;
  line-height:1.1;
  border-bottom:1px solid rgba(28,190,114,.3);
  padding-bottom:14px;
}
a.back-title:hover { text-decoration:underline; }

/* Sub-service list */
.svc-links {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.svc-links li {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.82);
  line-height:1.35;
}
.svc-links li::before {
  content:'›';
  color:#1CBE72;
  font-size:20px;
  line-height:1;
  flex-shrink:0;
  margin-top:-1px;
}
.svc-links a {
  color:rgba(255,255,255,.9);
  text-decoration:none;
  transition:color .15s ease;
}
.svc-links a:hover { color:#1CBE72; }
.svc-links li:not(:has(a)) { color:rgba(255,255,255,.6); }

/* ---- Mobile: no hover → always show the expanded back face ---- */
@media (hover:none) {
  .svc-card-front { display:none; }
  .svc-card::before { opacity:0; }
  .svc-card-back { opacity:1; visibility:visible; }
}