/* ── BANNER ── */
#services-banner {
  background: var(--bg-secondary);
  padding: 80px var(--container-pad) 60px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
#services-banner h1 { font-family:var(--font-serif); font-size:clamp(24px,4vw,42px); font-weight:400; color:var(--text-primary); margin:0 0 12px; }
#services-banner p  { color:var(--text-muted); font-size: 15px; margin:0; }

/* ── SERVICE GROUPS ── */
.service-group { padding: var(--space-xl) 0; }
.service-group + .service-group { padding-top: 0; }
.service-group-alt { background: var(--bg-secondary); padding: var(--space-xl) 0; }

.service-group-label {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
  margin-bottom: var(--space-md);
}

/* ── SERVICE CARD ── */
.service-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.service-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.service-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

@media (max-width: 900px) {
  .service-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .service-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .service-grid-3, .service-grid-2, .service-grid-4 { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  display: block;
  text-decoration: none;
}
.service-card:hover { border-color: var(--border-gold); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.service-card:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}
.service-card img {
  width: 100%;
  aspect-ratio: 211 / 180;
  object-fit: contain;
  display: block;
  background: var(--bg-primary);
  transition: transform .4s;
}
.service-card:hover img { transform: none; }
.service-card .sc-img-wrap { overflow: hidden; }
.service-card .sc-body { padding: 14px; }
.service-card .sc-name { font-size: 16px; font-weight:600; color:var(--text-primary); margin:0 0 6px; }
.service-card .sc-desc { font-size: 14px; color:var(--text-muted); margin:0 0 10px; line-height:1.5; }
.service-card .sc-btn  { font-size: 14px; padding: 5px 14px; }

/* ── COMPARISON TABLE ── */
.compare-section { padding: var(--space-xl) 0; }
.compare-wrap { overflow-x: auto; }
.compare-table { width:100%; border-collapse: collapse; min-width: 500px; }
.compare-table th { background: var(--bg-card); color: var(--text-primary); font-size: 15px; font-weight:600; padding: 14px 16px; border-bottom: 2px solid var(--accent-gold); text-align: left; }
.compare-table th:first-child { width: 40%; }
.compare-table td { padding: 12px 16px; font-size: 14px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.compare-table tr:hover td { background: var(--bg-card); }
.compare-table .check { color: var(--accent-gold); font-size: 17px; }
.compare-table .cross { color: var(--text-muted); font-size: 17px; }
.compare-table .cat-row td { color: var(--text-muted); font-size: 14px; text-transform:uppercase; letter-spacing:.1em; padding-top:20px; padding-bottom:4px; }

/* ── CONTACT CTA ── */
.services-cta { padding: var(--space-xl) 0; background: var(--bg-secondary); text-align: center; }
.services-cta h2 { font-family:var(--font-serif); font-size:clamp(20px,3vw,28px); color:var(--text-primary); font-weight:400; margin:0 0 var(--space-sm); }
.services-cta p  { color:var(--text-muted); margin:0 0 var(--space-md); }
.contact-row { display:flex; gap:var(--space-lg); justify-content:center; align-items:center; flex-wrap:wrap; margin-top:var(--space-md); }
.contact-row .info-item { text-align:center; }
.contact-row .info-item .icon { font-size: 20px; margin-bottom:6px; }
.contact-row .info-item p { font-size: 14px; color:var(--text-secondary); margin:2px 0; }
.contact-row .info-item .val { font-size: 15px; color:var(--text-primary); font-weight:500; }