/* ── SERVICES GRID (12 cards) ── */
#services{background:var(--bg-2);}
#services::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

.services-grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}

.service-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 24px;
  overflow:hidden;
  transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
  transform-style:preserve-3d;
  will-change:transform;
}
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
  opacity:0; transition:opacity .3s;
}
/* specular highlight driven by pointer (set via --mx/--my in JS) */
.service-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(217,168,76,0.08), transparent 45%);
  opacity:0; transition:opacity .3s;
}
.service-card:hover{background:var(--card-hover); border-color:rgba(217,168,76,0.25); box-shadow:var(--shadow);}
.service-card:hover::before,
.service-card:hover::after{opacity:1;}

.service-icon{
  width:40px; height:40px; margin-bottom:20px;
  border:1px solid var(--gold-line); border-radius:9px;
  background:var(--gold-tint);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.service-icon svg{width:19px; height:19px;}

.service-index{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.service-name{
  font-family:var(--display); font-size:19px; font-weight:600;
  color:var(--ink); line-height:1.25; margin-bottom:12px;
}
.service-desc{font-size:13.5px; line-height:1.6; color:var(--slate);}

.service-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;}
.tag{
  font-family:var(--mono); font-size:10px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:100px; padding:4px 10px;
  background:rgba(255,255,255,0.02);
}

@media (max-width: 1100px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px){ .services-grid{grid-template-columns:1fr;} }