/* «Про нас» — redesign-2026-10/about/build.py. Згенеровано docs/plans/about-port.py — правити макет і перезбирати. */
/* «Про нас» у стилі «Послуг» A «Вітрина»: герой із фірмовою ниткою, факти, текст + «липка» картка «Зв’язатися» */
.a-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.75rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem) 0 0; }
.a-hero img { width: 100%; height: auto; border-radius: 1.75rem; }
main > .facts { margin-top: clamp(1.75rem, 4vw, 3rem); }
.a-body { display: grid; grid-template-columns: minmax(0, 47.5rem) minmax(21.25rem, 1fr); gap: clamp(1.875rem, 4vw, 4rem); align-items: start; }
.a-body .text { max-width: none; }
.a-aside { position: sticky; top: 6rem; display: grid; gap: 0.875rem; padding: clamp(1.375rem, 2.4vw, 2rem); border-radius: 1.75rem; background: var(--paper); }
.a-aside h2 { margin: 0; font: 800 1.375rem/1.2 var(--display); }
.a-aside .btn { width: 100%; min-height: 3.25rem; font-size: 1rem; }
.reach { display: grid; gap: 0.625rem; margin: 0; }
.reach div { display: grid; gap: 0.125rem; padding: 0.875rem 1.125rem; border-radius: 1.125rem; background: var(--bg); }
.reach dt { font-size: 0.8125rem; color: var(--muted); } .reach dd { margin: 0; font: 700 1.1875rem/1.25 var(--display); overflow-wrap: anywhere; }
.reach a { text-decoration: none; } .reach a:hover { color: var(--accent); }
/* «Що друкуємо»: 5 послуг — горизонтальні картки в один стовпчик (у вузькій колонці сітка давала б 3 + 2 з порожнім місцем) */
.what { display: grid; gap: 0.625rem; margin: 0 0 0.375rem; padding: 0; list-style: none; }
.what li { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.25rem 1.25rem; align-items: start; padding: 0.625rem; border-radius: 1.375rem; background: var(--paper); }
.what img { grid-row: 1 / 3; width: 10.5rem; height: 6.5625rem; object-fit: cover; border-radius: 0.875rem; }
.what b { margin-top: 0.625rem; font: 800 1.25rem/1.15 var(--display); }
.what span { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.what li::before { display: none; }
.gear { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.75rem; margin: 1rem 0 0; padding: 1.25rem 1.5rem; border-radius: 1.5rem; background: var(--paper); }
.gear div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.gear dt { color: var(--muted); font-size: 0.9375rem; } .gear dd { margin: 0; font-weight: 700; text-align: right; }
.steps4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps4 li { counter-increment: s; padding: 1.125rem; border-radius: 1.25rem; border: 1.5px solid var(--line); font-size: 0.9375rem; line-height: 1.5; }
.steps4 li::before { content: counter(s); position: static; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; margin-bottom: 0.625rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 1rem var(--display); }
.steps4 li { padding-left: 1.125rem; }
@media (max-width: 1100px) { .a-body { grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 23.75rem); } }
@media (max-width: 900px) { .a-hero, .a-body, .gear { grid-template-columns: minmax(0, 1fr); } .a-aside { position: relative; top: 0; } }
@media (max-width: 520px) { .what li { grid-template-columns: 6rem minmax(0, 1fr); gap: 0.125rem 0.875rem; } .what img { width: 6rem; height: 3.75rem; } .what b { margin-top: 0.25rem; font-size: 1.125rem; } }
.lead-h { margin: 0 0 0.5rem; font: 800 1.25rem/1.2 var(--display); } .lead p { margin: 0; color: var(--muted); font-size: 1.1875rem; line-height: 1.6; }