/* ===== Our Services (neumorphic) ===== */

#services{ position:relative; 
              background: url('../assets/services_bg.png') center center / cover no-repeat;

}

.svc-head{ margin-bottom: 18px;   background: var(--bg); }

.svc-title{
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
  margin: 0 0 6px; 
}

.svc-sub{
  color: #7c8696;
  max-width: 60ch;
  line-height: 1.7;
  margin: 0;
}

.svc-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 22px;
  
}
@media (max-width: 1100px){ .svc-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){  .svc-grid{ grid-template-columns: repeat(2, 1fr); } }

.service-card{
  background: var(--shadow-dark);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  box-shadow:
    var(--offset) var(--offset) calc(var(--offset)*2) var(--shadow-dark),
    calc(var(--offset)*-1) calc(var(--offset)*-1) calc(var(--offset)*2) var(--shadow-light);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset var(--offset) var(--offset) calc(var(--offset)*2) var(--shadow-dark),
    inset calc(var(--offset)*-1) calc(var(--offset)*-1) calc(var(--offset)*2) var(--shadow-light);
}

.service-card h3{
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted);
}
.service-card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Icon holder with soft inner relief */
.svc-icon{
  width: 86px; height: 86px; margin: 0 auto;
  border-radius: 16px;
  display: grid; place-items: center;
  box-shadow:
    inset 6px 6px 14px var(--shadow-dark),
    inset -6px -6px 14px var(--shadow-light);
}
.svc-icon .i{
  width: 40px; height: 40px;
  stroke: #4b5870; stroke-width: 1.8; fill: none;
}

/* A subtle accent variation for one or two tiles */
.svc-icon.accent .i{ stroke: #ef6b57; }