/* BRAWIN HQ — about page */
.about-hero { padding-top: clamp(120px, 16vw, 170px); }
.about-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .about-hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.about-portrait { position: relative; }
.portrait-slot {
  display: block; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--border-2);
  border-radius: 22px; overflow: hidden; background: var(--surface);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8);
}
.portrait-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.portrait-badge { position: absolute; left: 18px; bottom: 18px; }
@media (max-width: 860px) { .portrait-slot { max-width: 420px; margin-inline: auto; } .about-portrait { display: flex; flex-direction: column; } }

.narrow { max-width: 820px; }

.facts .fact { display: flex; flex-direction: column; gap: 6px; }
.fact-k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.fact-v { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.fact-sub { font-size: 13.5px; color: var(--text-2); }

.prose p { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--text-2); line-height: 1.7; margin-bottom: 22px; max-width: 68ch; text-wrap: pretty; }
.prose strong { color: var(--text); font-weight: 600; }
.prose strong.accent { color: var(--accent); }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--border-2), transparent); }
.tl-item { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 22px 0; }
.tl-dot { position: absolute; left: -30px; top: 28px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); }
.tl-active .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.tl-year { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.tl-body h3 { font-size: 1.3rem; }
.tl-body p { margin-top: 8px; max-width: 56ch; }
@media (max-width: 620px) { .tl-item { grid-template-columns: 1fr; gap: 8px; } .tl-year { padding-top: 0; } }

.belief { min-height: 200px; display: flex; flex-direction: column; }
.belief h3 { font-size: 1.3rem; }
.belief p { margin-top: 14px; }