/* V99 — clean services polish
   Scope: only #services section.
   Principle: light outer shell + black central 3x2 grid.
   Grid dividers are not card borders; they come from the grid background + 1px gap,
   like the Why all4it benefit row, but using a real dark tone so it does not turn white on the light shell.
*/

:root {
  --services-shell-v99: #e6e2db;
  --services-shell-line-v99: rgba(16,16,16,.10);
  --services-divider-v99: #13161b;
  --services-card-v99: #07090c;
  --services-card-hover-v99: #0d1015;
}

/* Light outer background for the whole Services section */
#services,
#services.section,
#services .container,
#servicesStage,
.services-stage {
  background: var(--services-shell-v99) !important;
}

#services {
  color: #111111 !important;
  border-top: 1px solid var(--services-shell-line-v99) !important;
  border-bottom: 1px solid var(--services-shell-line-v99) !important;
}

#services .section-kicker {
  color: #e31e24 !important;
}

#services .section-title {
  color: #0f1012 !important;
}

#services .section-copy {
  color: #5e636b !important;
}

/* Central services grid:
   no white borders on cards; the 1px separation comes from this dark grid background. */
#services .service-grid {
  background: var(--services-divider-v99) !important;
  border: 1px solid var(--services-divider-v99) !important;
  gap: 1px !important;
  overflow: hidden !important;
}

#services .service-card {
  background: var(--services-card-v99) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#services .service-card:hover {
  background: var(--services-card-hover-v99) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 0 1px rgba(227,30,36,.16) !important;
}

#services .service-card h3 {
  color: #ffffff !important;
}

#services .service-number {
  color: #ff3338 !important;
}

#services .service-motto {
  color: #ffffff !important;
}

#services .service-card p {
  color: rgba(255,255,255,.72) !important;
}

#services .service-open {
  color: rgba(255,255,255,.58) !important;
}

/* Opened service detail keeps the same black/premium divider logic */
#services .service-detail {
  background: var(--services-divider-v99) !important;
  border: 1px solid var(--services-divider-v99) !important;
  overflow: hidden !important;
}

#services .service-detail-frame {
  background: var(--services-divider-v99) !important;
  gap: 1px !important;
}

#services .service-detail-content,
#services .service-detail-visual,
#services .service-point,
#services .service-diagram {
  background: var(--services-card-v99) !important;
}

#services .service-detail-points {
  border-color: var(--services-divider-v99) !important;
  background: var(--services-divider-v99) !important;
}

#services .service-diagram,
#services .diagram-node {
  border-color: rgba(255,255,255,.10) !important;
}