.about-hero { border: 1px solid var(--border); border-radius: 12px; padding: 18px; background: var(--bg); }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values { grid-template-columns: 1fr; } }
.value-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg); }
.people { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }
.avatar { width: 100%; border: 1px solid var(--border); border-radius: 12px; min-height: 220px; object-fit: cover; display: block; }
.person-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--hero-start); color: var(--primary); }