/* About us (page-about-us.php), from the mockup about.html: one photo, the company story, four numbers, the business rows, history and company details. */
.sub { margin-top: 10px; }
.photo { aspect-ratio: 16 / 7; border-radius: var(--r-lg); overflow: hidden; background: var(--stage); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.about-profile { margin-top: clamp(48px, 7vw, 88px); }
.about-profile p.first { margin-top: 0; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
.facts div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.facts b { display: block; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; }
.facts span { font-size: 12.5px; color: var(--ink-3); }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); font-size: 15px; }
.list li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.list em { font-style: normal; font-family: "IBM Plex Sans", sans-serif; font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .list li { grid-template-columns: 96px 1fr; } .photo { aspect-ratio: 4 / 3; } }