.about-hero-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.about-portrait img { border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.principle { padding: 1.4rem; }
.principle code { display: inline-block; margin-bottom: 1rem; color: var(--green); font: 800 .77rem/1 var(--font-display); }
.timeline { position: relative; margin-top: 2rem; padding-left: 2rem; border-left: 2px solid #234254; }
.timeline article { position: relative; padding: 0 0 2rem 1.2rem; }
.timeline article::before { content: ""; position: absolute; left: -2.49rem; top: .25rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(255,191,71,.55); }
.timeline h3 { margin-bottom: .35rem; }

@media (max-width: 760px) { .about-hero-grid { grid-template-columns: 1fr; } .about-portrait { max-width: 520px; } }