/* ============================================================
   about.css — Brand story + timeline
   ============================================================ */

.about-intro__grid { display: grid; gap: 2.4rem; align-items: center; }
.about-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-gold-line); box-shadow: var(--shadow-2); }
.about-figure img { width: 100%; display: block; }

.mission-grid { display: grid; gap: 1.2rem; }
.mission-card { padding: 1.6rem; border-radius: var(--radius); background: var(--grad-surface); border: 1px solid var(--border); }
.mission-card__icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: rgba(20,122,124,0.16); border: 1px solid var(--border-strong); color: var(--color-emerald-bright); margin-bottom: 1rem; }
.mission-card__icon svg { width: 25px; height: 25px; }
.mission-card h3 { font-size: var(--fs-h4); color: var(--text-primary); margin-bottom: 0.5rem; }

/* timeline */
.timeline { position: relative; margin-top: 1rem; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--color-gold), var(--color-gold-line), transparent); }
.tl-item { position: relative; padding-left: 3.4rem; padding-bottom: 2rem; }
.tl-item::before {
  content: ""; position: absolute; left: 7px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-bg); border: 2px solid var(--color-gold); box-shadow: var(--glow-gold);
}
.tl-item__year { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-gold-bright); margin-bottom: 0.2rem; }
.tl-item h3 { font-size: 1.08rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.tl-item p { font-size: 0.94rem; margin: 0; }

/* value stats strip */
.value-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.value-strip__item { padding: 1.4rem; border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--border); text-align: center; }
.value-strip__num { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--color-gold-bright); line-height: 1; }
.value-strip__label { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.4rem; }

@media (min-width: 768px) { .value-strip { grid-template-columns: repeat(4, 1fr); } .mission-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .about-intro__grid { grid-template-columns: 1fr 1fr; } }