/* ─── ABOUT PAGE ─── */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6); margin-top: var(--sp-10);
}
.value-item {
  background: var(--clr-white); border-radius: var(--radius-lg);
  padding: var(--sp-7); border: 1px solid rgba(26,107,58,0.09);
  box-shadow: var(--shadow-sm); text-align: center;
  transition: var(--transition-base);
}
.value-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(242,193,46,0.25); }
.value-item__icon { font-size: 2rem; margin-bottom: var(--sp-4); color: var(--clr-gold); }
.value-item__icon .lucide-icon { width: 36px; height: 36px; }
.value-item__title { font-size: var(--fs-base); font-weight: 700; color: var(--clr-green); margin-bottom: var(--sp-2); }
.value-item__text  { font-size: var(--fs-sm); color: var(--clr-text-muted-dark); line-height: 1.65; }

/* Timeline */
.timeline {
  display: flex; flex-direction: column; gap: 0;
  position: relative; max-width: 680px; margin-inline: auto;
}
.timeline::before {
  content: ''; position: absolute; left: 24px; top: 0; bottom: 0;
  width: 2px; background: var(--grad-gold); opacity: 0.30;
}
.timeline-item { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-5); padding-bottom: var(--sp-8); }
.timeline-dot {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-gold); color: var(--clr-bg-darkest);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1; box-shadow: var(--shadow-gold);
}
.timeline-dot .lucide-icon { width: 22px; height: 22px; }
.timeline-year {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--clr-gold); margin-bottom: var(--sp-1);
}
.timeline-title { font-size: var(--fs-lg); font-weight: 700; color: var(--clr-green); margin-bottom: var(--sp-2); }
.timeline-text  { font-size: var(--fs-sm); color: var(--clr-text-muted-dark); line-height: 1.65; }

@media (max-width: 768px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .values-grid { grid-template-columns: 1fr; } }