/* ============================================================
   outcomes-section.css
   Styles the "Outcomes from active deployments" stats row
   that appears on all three vertical pages (Mining, Logistics,
   Food & Hospitality).
   ============================================================ */

/* --- Section wrapper --- */
.outcomes-section {
  background: var(--light);
  padding: 60px 32px;
}

/* --- Inner centring wrapper --- */
.outcomes-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.outcomes-inner h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 36px;
  color: var(--text);
}

/* --- Four-column outcomes grid --- */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #CDD3E0;
  border-radius: 10px;
  overflow: hidden;
}

/* --- Individual outcome item --- */
.outcome-item {
  background: var(--white);
  padding: 28px 24px;
}

/* --- Outcome value (large number) --- */
.outcome-value {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1.2px;
  margin-bottom: 6px;
}
.outcome-value--mining     { color: var(--res); }
.outcome-value--logistics  { color: var(--log); }
.outcome-value--hospitality { color: var(--hos); }

/* --- Outcome description --- */
.outcome-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}