/* Podstrona O nas (o_nas.py, Adrian 2026-11-03): zdjęcie, osoba, dane firmy. Kolory wyłącznie tokenami. */
.on-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .on-grid { grid-template-columns: 380px minmax(0, 1fr); column-gap: 64px; row-gap: 48px; }
  .on-data { grid-column: 2; } }
.on-photo { margin: 0; max-width: 380px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-light); background: var(--white); }
.on-photo img { display: block; width: 100%; height: auto; }
.on-name { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; color: var(--navy); text-wrap: balance; }
.on-role { margin: 8px 0 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--blue); }
.on-text { margin-top: 24px; }
.on-text p { margin: 0 0 16px; font-size: 18px; line-height: 28px; color: var(--ink, var(--navy)); max-width: 60ch; text-wrap: pretty; }
.on-act { margin-top: 24px; }
.on-data { padding: clamp(20px, 2.4vw, 32px); background: var(--white); border: 1px solid var(--line-light); border-radius: 20px; }
.on-h { margin: 0 0 16px; font-size: 18px; line-height: 28px; color: var(--navy); }
.on-dl { display: grid; gap: 12px; margin: 0; }
.on-dl div { display: grid; gap: 2px; }
@media (min-width: 600px) { .on-dl div { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; } }
.on-dl dt { color: var(--muted); font-size: 16px; line-height: 24px; }
.on-dl dd { margin: 0; color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.on-dl a { color: inherit; }
.on-dl a:hover { color: var(--blue); }