/* Quiet, legible presentation layer: content leads, decoration stays secondary. */
.system-spine {
  min-height: auto;
  gap: clamp(28px, 4vw, 56px);
  background: #102b31 !important;
}
.system-spine-visual {
  min-height: 500px;
  background: #102b31;
}
.system-spine-visual::before,
.system-spine-visual::after,
.system-spine-poster,
.system-spine-canvas,
.system-spine-fallback { display: none !important; }
.system-spine-project-deck {
  position: relative;
  inset: auto;
  min-height: 500px;
  justify-content: flex-start;
  padding: 112px 28px 28px;
  background: #102b31;
}
.system-spine-readout { color: #d3e3df; }
.system-spine-project-deck-head { border-bottom-color: #4b7778; }
.system-spine-project-cards { gap: 12px; margin: 22px 0 26px; }
.system-project-card {
  min-height: 82px;
  border-color: #47787a;
  background: #173b40;
  box-shadow: none;
}
.system-project-card span { color: #c1d6d4; }
.system-project-card small { color: #b9d2d5; }
.system-spine-project-deck-foot { color: #b6d0d2; }

.journey .section-heading > p:last-child,
.solutions .section-heading > p:last-child,
.proof .section-heading > p:last-child { color: #496568; }
.solution-list { display: grid; gap: 10px; border-top: 0; }
.solution {
  min-height: 88px;
  padding: 18px 20px;
  border: 1px solid #d5e5e0;
  border-left: 3px solid #8acfc0;
  background: #fff;
}
.solution:hover,
.solution.active { padding-inline: 20px; transform: translateY(-2px); }
.solution strong { color: #10272d; }
.solution p { color: #496568; line-height: 1.5; }

@media (max-width: 980px) {
  .system-spine-visual,
  .system-spine-project-deck { min-height: 420px; }
  .system-spine-project-deck { padding-top: 110px; }
}
@media (max-width: 640px) {
  .system-spine-visual,
  .system-spine-project-deck { min-height: 350px; }
  .system-spine-project-deck { padding: 106px 14px 20px; }
  .system-project-card { min-height: 72px; }
  .solution { min-height: 0; padding: 16px; }
  .solution:hover,
  .solution.active { padding-inline: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .solution:hover,
  .solution.active { transform: none; }
}