/* ==========================================================================
   Simitri HR — Solutions overview (template: solutions). Wave 3G.
   Composes shared classes from site.css/tokens.css; page-specific treatment only.
   Mobile-first; no horizontal scroll at 390px; reduced-motion inherits the
   global kill-switch in tokens.css.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.solutions-hero { padding-bottom: clamp(var(--sp-6), 5vw, var(--sp-8)); }
.solutions-hero__title { max-width: 20ch; }
.solutions-hero__intro { max-width: 60ch; margin-top: var(--sp-5); color: var(--text-2); }

/* --- Solution cards -------------------------------------------------------- */
.solutions-cards { list-style: none; margin: 0; padding: 0; }
.solution-card { padding: 0; }
.solution-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  text-decoration: none;
  color: var(--text);
}
.solution-card__index { color: var(--accent-deep); margin-bottom: var(--sp-4); }
.solution-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
  max-width: 22ch;
}
.solution-card__line { color: var(--text-2); margin-bottom: var(--sp-5); }
.solution-card__cta {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-deep);
  transition: gap var(--dur-hover) ease-out;
}
.solution-card__link:hover .solution-card__cta { color: var(--accent-deep-hover); }

/* --- How We Engage timeline ------------------------------------------------ */
.solutions-engage__timeline { list-style: none; margin: 0; padding: 0; }
.solutions-engage__step-title { font-size: var(--fs-h3); margin: var(--sp-2) 0 var(--sp-3); }
.solutions-engage__timeline p { color: var(--text-2); max-width: 34ch; }

/* --- CTA band -------------------------------------------------------------- */
.solutions-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
}
.solutions-cta__inner > div { max-width: 46rem; }
.solutions-cta__inner h2 { max-width: 24ch; }
.solutions-cta__inner .lede { color: var(--text-2-on-dark); }
.solutions-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
@media (max-width: 720px) {
  .solutions-cta__actions { width: 100%; }
  .solutions-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
}