/* site-5.css — общие дополнения ко всем страницам.

   Подключается после atp3-138.css. Цвета и шрифты — переменные :root
   из atp3.css, поэтому новые элементы выглядят частью того же сайта.
   Номер в имени меняется при каждой правке: хостинг кэширует CSS
   на неделю, и под старым именем браузер показал бы старые стили.

   1. Кнопка звонка в мобильной шапке
   2. Нижняя панель связи на телефоне
   3. Ссылки на технику в подвале
   4. Мелочи: список в одну колонку, таблица моделей
   5. Переход между страницами
   6. Окно с формой заявки
   7. Ссылки-«таблетки» вместо сеток карточек
   8. Ссылка «Все услуги» на главной
   9. Типографика: шрифты, размеры, интервалы, выравнивание
   10. Роли шрифтов: заголовки и цифры, текст, подписи и кнопки, данные */

/* ── 1. Кнопка звонка в мобильной шапке ─────────────────────────
   На телефоне в шапке был только бургер: номер находился у нижнего
   края первого экрана, следующий — через пять тысяч пикселей. */
.hdr-mob { display: flex; align-items: center; gap: .375rem; }
.hdr-call {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 9999px;
}
.hdr-call svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) {
    .hdr-mob { display: none; }
}

/* ── 2. Нижняя панель связи ─────────────────────────────────────
   Только на телефоне и планшете: позвонить, написать в MAX, оставить
   заявку — одним касанием с любого места страницы. */
.mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: .5rem;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--ink);
    box-shadow: 0 -8px 24px -12px rgba(var(--shadow-rgb), .5);
}
.mbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.875rem;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: .875rem;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
}
.mbar a:active { transform: translateY(1px); }
.mbar a:focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; }
.mbar svg { width: 1.125rem; height: 1.125rem; flex: none; }
.mbar .mbar-call {
    background: linear-gradient(155deg, var(--o-400) 0, var(--o-btn) 55%, var(--o-600) 100%);
}
/* Место под панель: подвал и кнопка «наверх» не уходят под неё */
@media (max-width: 1023px) {
    body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
    #to-top { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
    .mbar { display: none; }
}
@media print {
    .mbar, .hdr-call { display: none; }
}

/* ── 3. Ссылки на технику в подвале ───────────────────────────── */
.ft-tech {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .875rem;
    line-height: 1.5;
}
.ft-tech b { color: #fff; font-weight: 700; }
.ft-tech a { color: inherit; text-decoration: none; padding: .25rem 0; }
.ft-tech a:hover { color: #fff; }

/* ── 4. Мелочи ───────────────────────────────────────────────── */
/* Список с галочками в одну колонку — внутри половины .sp-split */
.sp-checks.sp-checks--1 { grid-template-columns: minmax(0, 1fr); }
.sp-checks b { color: var(--text-strong); font-weight: 700; }

/* Таблица моделей: масса не переносится, на телефоне таблица прокручивается */
.sp-table--models td:nth-child(3) { white-space: nowrap; }

/* Таблицы моделей на телефоне: строка складывается в карточку, у каждой
   ячейки — подпись из data-label. Четыре колонки в 375 px не помещаются. */
@media (max-width: 640px) {
    .sp-table.sp-table--stack thead { display: none; }
    .sp-table.sp-table--stack,
    .sp-table.sp-table--stack tbody,
    .sp-table.sp-table--stack tr,
    .sp-table.sp-table--stack td { display: block; width: 100%; }
    .sp-table.sp-table--stack tr { padding: .875rem 0; border-bottom: 1px solid var(--line-2); }
    .sp-table.sp-table--stack tr:first-child { padding-top: 0; }
    .sp-table.sp-table--stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
    .sp-table.sp-table--stack td { padding: .125rem 0; border: 0; white-space: normal; }
    .sp-table.sp-table--stack td + td { padding-left: 0; }
    .sp-table.sp-table--stack td::before {
        content: attr(data-label) ": ";
        font-size: .8125rem;
        font-weight: 600;
        color: var(--text-mut);
    }
    .sp-table.sp-table--stack td:first-child { margin-bottom: .25rem; font-size: 1rem; }
    .sp-table.sp-table--stack td:first-child::before { content: none; }
}

/* ── 5. Переход между страницами ─────────────────────────────
   Встроенный в браузер View Transitions API для обычных переходов по
   ссылкам: старая страница коротко уходит вверх и гаснет, новая
   проявляется снизу. Без JavaScript и без задержки загрузки.
   Шапка и нижняя панель в анимации не участвуют: на всех страницах они
   одинаковые и остаются на месте, а оранжевая «таблетка» в меню
   доезжает до нового раздела своей анимацией (boot.js + atp3.css).
   Работает в Chrome, Edge, Яндекс Браузере, Opera и Safari 18.2+;
   остальные браузеры переходят как обычно. */
@view-transition { navigation: auto; }

#site-header { view-transition-name: site-header; }
.mbar { view-transition-name: site-mbar; }

::view-transition-group(site-header),
::view-transition-group(site-mbar),
::view-transition-new(site-header),
::view-transition-new(site-mbar) { animation: none; }
::view-transition-old(site-header),
::view-transition-old(site-mbar) { display: none; }

/* Без типа (браузер не знает типов переходов) — прежний мягкий переход */
::view-transition-old(root) { animation: atp3-page-out .16s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: atp3-page-in .42s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes atp3-page-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes atp3-page-in {
    from { opacity: 0; transform: translateY(18px); }
}

/* Типы переходов ставит nav-1.js. Длительности — по NN/g (смена экрана
   200–300 мс), рисунок движения — система Material:
   top — между лицевыми страницами: «проявление» (fade through): старая
         гаснет за 90 мс, новая проявляется с 97 до 100 % — направления
         у разделов одного уровня нет;
   forward / back — между лицевой и вторичной: общий сдвиг по оси X на
         30 px, старая гаснет в первой трети, новая проявляется в остальных;
   peer — между вторичными: короткое проявление без сдвига. */
html:active-view-transition-type(top)::view-transition-old(root) { animation: vt-fade-out 90ms cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(top)::view-transition-new(root) { animation: vt-fade-through-in 210ms 90ms cubic-bezier(0, 0, .2, 1) both; }

html:active-view-transition-type(forward)::view-transition-old(root) { animation: vt-out-left 300ms cubic-bezier(.4, 0, .2, 1) both; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: vt-in-right 300ms cubic-bezier(.4, 0, .2, 1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-out-right 300ms cubic-bezier(.4, 0, .2, 1) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-in-left 300ms cubic-bezier(.4, 0, .2, 1) both; }

html:active-view-transition-type(peer)::view-transition-old(root) { animation: vt-fade-out 120ms cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(peer)::view-transition-new(root) { animation: vt-fade-in 180ms 60ms cubic-bezier(0, 0, .2, 1) both; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-through-in { from { opacity: 0; transform: scale(.97); } }
@keyframes vt-out-left { 35% { opacity: 0; } to { opacity: 0; transform: translateX(-30px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(30px); } 35% { opacity: 0; } to { opacity: 1; transform: none; } }
@keyframes vt-out-right { 35% { opacity: 0; } to { opacity: 0; transform: translateX(30px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-30px); } 35% { opacity: 0; } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── 6. Окно с формой заявки ─────────────────────────────────
   Форма живёт в окне (.svc-modal из atp3.css) на всех страницах,
   кроме главной. Место справа под кнопку «Закрыть». */
.lead-modal-body .form-head { padding-right: 2.75rem; }

/* ── 7. Ссылки-«таблетки» ───────────────────────────────────────
   Компактный список вместо сетки из восьми карточек: «Другая техника»
   на страницах техники и виды техники в блоке «Что мы возим» на
   «Услугах». Читается одной строкой и не спорит с основными блоками. */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}
.pills a,
.cargo-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line-2);
    border-radius: 9999px;
    background: #fff;
    color: var(--text-strong);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .2s, background-color .2s, color .2s;
}
.pills a:hover { border-color: var(--o-300); background: var(--o-50); color: var(--o-700); }
.pills a:focus-visible,
.cargo-pills a:focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; }

/* На тёмной панели «Что мы возим» */
.cargo-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.cargo-pills span {
    width: 100%;
    margin-bottom: .25rem;
    font-size: .875rem;
    color: #94A3B8;
}
.cargo-pills a {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.cargo-pills a:hover { border-color: var(--o-300); background: rgba(255, 255, 255, .1); color: var(--o-300); }

/* Шесть направлений на «Услугах» на телефоне: значок слева, текст справа.
   В столбик карточки занимали полтора экрана; «Подробнее» не нужен —
   нажимается вся карточка. */
@media (max-width: 640px) {
    .svc-card.p-6 {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
        padding: 1.125rem 1.25rem;
    }
    .svc-card .svc-icon { grid-row: span 2; }
    .svc-card h3.mt-5 { margin-top: 0; }
    .svc-card p.mt-2 { margin-top: .25rem; grid-column: 2; }
    .svc-card .svc-link { display: none; }
}

/* Вторая подпись в строке подвала («В аренду») — отступ от первой группы */
.ft-tech b:not(:first-child) { margin-left: .75rem; }

/* ── 8. Ссылка «Все услуги» под тремя машинами на главной ──────── */
.modes-all {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .875rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--o-700);
    text-decoration: none;
}
.modes-all svg { width: 1rem; height: 1rem; flex: none; transition: transform .2s; }
.modes-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.modes-all:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .modes-all svg { transition: none; } }

/* ── 9. Типографика ───────────────────────────────────────────────
   Правила взяты из руководств, а не на глаз:
   - Apple HIG, Typography: основной текст 17 pt, минимум гарнитур,
     иерархия размером, весом и цветом, тонкие начертания не брать;
   - Apple HIG, Layout и NN/g: важное — сверху и слева, текст и
     заголовки по левому краю, центровка только для 1–3 строк;
   - WCAG 1.4.8: строка не длиннее 80 знаков, межстрочный около 1,5;
   - Practical Typography: 15–25 px на экране, межстрочный 120–145 %,
     капс только для коротких надписей и с разрядкой;
   - Контур.Гайды: неразрывные пробелы после предлогов, перед тире,
     между числом и единицей (расставлены в разметке).
   Шрифты: заголовки и цифры — Sofia Sans Condensed (Lettersoup), текст —
   Golos Text (ParaType). Обе под OFL, кириллица в них основная. Роли — в разделе 10.
   Вместо Manrope + Inter + IBM Plex Mono: Inter — шрифт по умолчанию
   почти в любом сгенерированном интерфейсе, моноширинные подписи —
   тоже типичный признак шаблона. Цифры в таблицах и «таблетках» —
   табличные цифры основного шрифта. */
@font-face {
    font-family: 'Sofia Sans Condensed';
    src: url('../fonts/sofia-condensed-cyrillic.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Sofia Sans Condensed';
    src: url('../fonts/sofia-condensed-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Golos Text';
    src: url('../fonts/golos-cyrillic.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    src: url('../fonts/golos-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-head: 'Sofia Sans Condensed', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Основной текст и элементы форм */
body,
form button, form input, form textarea,
.cselect-btn,
.tel-num { font-family: var(--font-text); }

/* Крупные заголовки и крупные цифры — Sofia Sans Condensed */
.font-display, .sec-title, .hd-title, h1, h2,
.step-num, .hero-facts dt, .hero-nums dt, .hero-badge .badge-num, .about-badge .badge-year,
#stats .font-display, .brand-logo-txt, .sp-facts dt, .sp-steps li::before, .sp-links-title {
    font-family: var(--font-head);
}
/* Заголовки карточек и пунктов — текстовым шрифтом: узкий шрифт хорош
   в крупном кегле, а заголовок карточки — это ещё не дисплей (Material 3:
   для title выразительные шрифты — с осторожностью) */
h3, h4, .sp-more b {
    font-family: var(--font-text);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.3;
}

/* Бывшие моноширинные подписи */
.font-mono, .route-label, .duty-list li > span:first-child, .legal h2 > span, .num {
    font-family: var(--font-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Межстрочный и разрядка заголовков — в разделе 10 */
/* Одно слово в заголовке другим цветом — типичный признак шаблона */
.hd-title span { color: inherit; }

/* Ширина абзацев: до 65–70 знаков (размеры текста — в разделе 10) */
.sec-lead { max-width: 65ch; }
main p { max-width: 70ch; }
.sp-note, .sp-block > p { max-width: 70ch; }

/* Финальные призывы: по левому краю, без градиентной подсветки */
.cta-plain h2 { max-width: 28ch; }
.cta-plain p { max-width: 60ch; }

/* Блоки не «выплывают» при прокрутке: такая анимация на каждой секции
   ничего не сообщает. Переход между страницами (раздел 5) остаётся —
   он отвечает на действие человека */
.js .reveal, .js .reveal-up { opacity: 1; transform: none; transition: none; }

/* Классы Tailwind (.text-lg и т. п.) задают свой межстрочный — у заголовков
   карточек он был 1,5–1,56. Атрибутный селектор поднимает специфичность */
h3[class], h4[class] { line-height: 1.3; }

/* Капс и разрядка остались только в логотипе и названиях марок
   (Practical Typography: капс — только для коротких надписей).
   Размеры подписей — в разделе 10 */
.hero-facts dd, .hero-nums dd { text-transform: none; letter-spacing: 0; }

/* Цифры в карточках теперь слева — и чёрточка над ними тоже */
#stats .stat-rule { margin-left: 0; margin-right: auto; }

/* Длинные слова в узких карточках переносятся по слогам, а не рвутся
   посередине («грузоподъё / мность»). Русские переносы Chrome, Safari и
   Firefox знают, язык страницы — ru */
main p, main li, main dd { hyphens: auto; -webkit-hyphens: auto; }
main h1, main h2, main h3 { hyphens: manual; }

/* ── 10. Типографская шкала ────────────────────────────────────────
   Аудит 7 страниц нашёл 75 разных сочетаний «шрифт × кегль × насыщенность
   × интерлиньяж»: заголовки карточек — в шести вариантах (15–18 px, 700),
   H1 — 52, 60 и 62 px, H2 — 40 и 46, крупные цифры — семь размеров.
   Отсюда ощущение, что жирное расставлено как попало.
   Шкала ниже — по Material 3 (роли display/headline/title/body/label),
   Apple HIG (Headline 17 semibold над Body 17 regular, Footnote 13) и
   Learn UI Design (немного размеров, второстепенный текст на 2 px мельче,
   поля ввода не меньше 16 px — иначе iOS увеличивает страницу).

   Sofia Sans Condensed — крупное и данные:
     d1  H1 всех страниц ........................ 40→62 / 1.02 / 800
     h2  заголовки разделов и призывов .......... 32→46 / 1.06 / 700
     h3  заголовок карточки-призыва, формы ...... 24→28 / 1.1  / 700
     n1  крупные цифры (= h2 по размеру) ........ 40→46 / 1    / 800
     n2  цифры-характеристики (= h3) ............ 24→28 / 1.1  / 700
   Golos Text — текст и интерфейс, только 400 и 600:
     lead   вводный абзац ....................... 17→18 / 1.55 / 400
     t1     заголовок карточки, пункта .......... 18    / 1.3  / 600
     body   основной текст ...................... 16    / 1.6  / 400
     t2     вопрос, значение в контактах ........ 16    / 1.4  / 600
     small  подписи, примечания, подвал ......... 14    / 1.5  / 400
     label  кнопки, меню, «таблетки», подписи полей 14 / 1.3  / 600
     micro  верхняя строка, реквизиты ........... 12    / 1.45 / 400
   Жирность 700 в тексте не используется: рядом с узкими заголовками
   800 полужирный 600 отличим и не спорит с ними. */
:root {
    --fs-d1: clamp(2.5rem, 1.8rem + 2.4vw, 3.875rem);
    --fs-h2: clamp(2rem, 1.55rem + 1.5vw, 2.875rem);
    --fs-h3: clamp(1.5rem, 1.3rem + .6vw, 1.75rem);
    --fs-lead: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
    --fs-t1: 1.125rem;
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-micro: .75rem;
}

/* d1 — H1 на всех страницах одного размера */
.hd-title,
main h1.sec-title,
.hero-panel--about h1.sec-title, .hero-panel--fleet h1.sec-title, .hero-panel--services h1.sec-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-d1);
    line-height: 1.02;
    letter-spacing: -.005em;
}

/* h2 — заголовки разделов, тёмных панелей и финальных призывов */
.sec-title, h2.font-display, .sp-block h2.font-display {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.06;
    letter-spacing: 0;
}

/* h3 — заголовок формы, карточки-призыва, модальных окон */
h3.font-display, .lp-aside-title, .sp-links-title,
.svc-modal-body .sec-title, .lead-modal-body .sec-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: 0;
}

/* n1 — крупные цифры */
#stats .font-display, .hero-badge .badge-num, .about-badge .badge-year {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: 0;
}
#stats .font-display span, .hero-badge .badge-num span { font-size: inherit; }
.step-num { font-weight: 800; letter-spacing: 0; }      /* декоративные, светлые — размер свой */

/* n2 — цифры-характеристики */
.hero-nums dt, .hero-facts dt, .sp-facts dt, .lp-fit-num, .lp-fit-num.num, p.font-display.text-2xl {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: 0;
}

/* данные в таблицах: узкий шрифт с табличными цифрами; узкому нужен кегль
   на ступень крупнее соседнего текста, иначе он выглядит слабее */
.num, main table td.num {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: .005em;
}

/* Golos: только 400 и 600 */
b, strong, .font-bold, .font-semibold { font-weight: 600; }

/* lead */
.sec-lead, .hd-lead, .hd p.hd-lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
}

/* t1 — заголовки карточек и пунктов */
main h3:not(.font-display):not(.acc-q),
.lp-incl dt, .lp-steps b, .sp-more b, .sp-steps b {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: var(--fs-t1);
    line-height: 1.3;
    letter-spacing: -.005em;
}

/* body */
main p.text-sm, main li.text-sm, .modal-body p.text-sm,
.sp-checks li, .lp-fit-machine, .lp-incl dd, .lp-steps span,
.acc-body, .acc-body p, .acc-body div, details .text-sm,
main table td {
    font-size: var(--fs-body);
    line-height: 1.6;
}
main table td { line-height: 1.45; }
.sp-contacts dd { font-size: var(--fs-body); line-height: 1.5; }
#contact p.text-\[15px\] { font-size: var(--fs-body); }
#contact span.text-xs { font-weight: 400; }
.req { font-weight: 600; }

/* t2 — вопросы, значения в контактах, подпись на карте */
.acc-q,
#contact a.font-bold, #contact p.font-bold, .sp-contacts dd a, .map-embed-text {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1.4;
}

/* small — подписи и примечания */
.brands-note, .sp-note, main small, .lp-aside-note, .sp-more span,
.card-foot p, .duty-list li span, .sp-crumbs, .ck-note p,
.hero-facts dd, .hero-nums dd, .sp-facts dd, .consent-text,
footer p.text-sm, footer .text-sm {
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* label — кнопки, меню, «таблетки», подписи полей, заголовки колонок */
.btn, .btn-compact, .tab-btn,
main .rounded-full.px-3, main .text-\[11px\],
section:has(> .marquee) > p.brands-caption,
main table th, main .card table thead th, .sp-table th,
form label:not(.consent), form .text-xs.font-semibold,
.modes-all, .sp-more-link,
footer h4, .ft-tech b {
    font-family: var(--font-text);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}
main .rounded-full.px-3 { font-variant-numeric: tabular-nums; }
/* Подпись над лентой марок стояла не по центру: общее ограничение ширины
   абзацев (70 знаков) сузило блок, а боковых полей не было */
section:has(> .marquee) > p.brands-caption { margin-inline: auto; text-align: center; }

/* micro — верхняя строка, реквизиты, служебные подписи */
.text-\[11px\], .consent-note, .consent-note a, .form-badge, .map-embed-attr, .map-embed-hint {
    font-size: var(--fs-micro);
    line-height: 1.45;
}
.form-badge { font-weight: 600; }

/* Остальные места по той же шкале: подписи к фото «Наших перевозок»,
   примечания в контактах, жирное в списках, юридические страницы */
.sp-checks b { font-weight: 600; }
.sp-contacts small { font-size: var(--fs-small); }
.sp-gallery figcaption { font-size: var(--fs-body); font-weight: 600; }
.sp-gallery figcaption span { font-size: var(--fs-small); }
.cta-strip-text .sec-title { font-size: var(--fs-h3); line-height: 1.1; }
.legal p, .legal li { font-size: var(--fs-body); line-height: 1.65; }
.legal strong { font-weight: 600; }
.legal h2 {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: var(--fs-t1);
    line-height: 1.35;
    letter-spacing: 0;
}
.legal h2 > span { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0; }

/* «Санкт-Петербург» не рвётся по дефису в конце строки (typo2.py) */
.nw { white-space: nowrap; }

/* Поля ввода — 16 px: при меньшем iOS увеличивает страницу при фокусе */
form input, form textarea, form select, .cselect-btn, .cselect-val { font-size: 1rem; }

/* label: надзаголовок первого экрана — подпись, а не второй заголовок */
.hd .hd-eyebrow {
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
}
#stats p.text-sm { font-weight: 400; font-size: var(--fs-small); color: var(--text-mut); }

/* Строка «Перевозим / В аренду» в подвале: выравнивание по базовой линии.
   Было по верху — жирные подписи стояли выше ссылок, у которых есть
   внутренний отступ для пальца (MDN: align-items: baseline) */
.ft-tech { align-items: baseline; }
.ft-tech b { color: #fff; }

/* ── 11. Страницы аренды и эвакуатора ─────────────────────────────
   Вторая переработка: «парк» (класс → цифра → модели → работы, как в
   каталогах United Rentals, Sunbelt, Herc), условия «пункт → пояснение»
   (NN/g: ключевое слово первым), фото-подтверждение доставки, все машины
   списком, вопросы на всю ширину. Размеры — из шкалы раздела 10. */
.sp-illu { margin: 0; align-self: end; justify-self: center; width: 100%; max-width: 32rem; }
.sp-illu .sp-machine { display: block; width: 100%; height: auto; }

/* Парк */
.lp-park {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.lp-park-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem 1.375rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
}
.lp-park-card::before {                       /* та же чёрточка, что над цифрами на главной */
    content: "";
    width: 1.5rem;
    height: 2px;
    margin-bottom: 1rem;
    background: var(--o-600);
}
.lp-park-big {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--text-strong);
    font-variant-numeric: lining-nums;
}
.lp-park-card h3 { margin-top: .375rem; color: var(--text-strong); }
.lp-park-models { margin-top: .25rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-mut); }
.lp-park-jobs { margin-top: .75rem; font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); }

/* Условия: пункт → пояснение */
.lp-terms-wrap { margin-top: 2rem; }
.lp-terms { margin: 0; border-bottom: 1px solid var(--line-2); }
.lp-terms > div {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: .875rem 0;
    border-top: 1px solid var(--line-2);
}
.lp-terms dt { font-weight: 600; font-size: var(--fs-body); line-height: 1.5; color: var(--text-strong); }
.lp-terms dd { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); }
.lp-proof { margin: 0; }
.lp-proof img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.lp-proof figcaption { margin-top: .625rem; font-size: var(--fs-small); line-height: 1.5; color: var(--text-mut); }
@media (min-width: 1024px) {
    .lp-terms-wrap--side { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
}

/* Шаги заказа */
.lp-steps {
    counter-reset: lp;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}
.lp-steps li { counter-increment: lp; display: flex; flex-direction: column; gap: .375rem; }
.lp-steps li::before {
    content: counter(lp, decimal-leading-zero);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1;
    color: var(--o-600);
    margin-bottom: .375rem;
}
.lp-steps b { color: var(--text-strong); }
.lp-steps span { color: var(--text-body); }

/* Все машины списком: модель → что возит */
.lp-models {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 2rem 0 0;
}
.lp-models > div { padding: .875rem 0; border-top: 1px solid var(--line-2); }
.lp-models dt { font-weight: 600; font-size: var(--fs-body); line-height: 1.4; color: var(--text-strong); }
.lp-models dd { margin: .25rem 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-mut); }

/* Вопросы на всю ширину, строка не длиннее ~75 знаков */
.lp-faq { max-width: 52rem; margin-top: 2rem; }

@media (max-width: 1023px) {
    .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .lp-steps, .lp-models { grid-template-columns: 1fr; }
    .lp-terms > div { grid-template-columns: 1fr; gap: .25rem; }
}

/* ── 12. Вторичные страницы ────────────────────────────────────────
   Лицевые страницы (главная, услуги, автопарк, о компании) — с большим
   первым блоком. Вторичные (body.pg-2) — с короткой шапкой прямо на
   странице: крошки, заголовок, абзац, кнопки; без карточки, сетки, тени,
   строки цифр и картинки — внутренним страницам нужна дорога к сути,
   а не витрина. Заголовок страницы — на ступень ниже, чем у лицевых
   (Material: display — для витрин, headline — для заголовков страниц),
   заголовки разделов — ещё на ступень. В конце — одна светлая полоса
   с призывом и ссылками: тёмный подвал идёт сразу за ней, и два тёмных
   блока подряд больше не стоят. */
:root { --fs-h2s: clamp(1.75rem, 1.5rem + .9vw, 2.125rem); }

.pg-head { padding: 3rem 2rem 0; max-width: 52rem; }
.pg-head .sp-crumbs { margin-bottom: 1.25rem; }
.pg-title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: var(--fs-h2);
    line-height: 1.04;
    letter-spacing: -.005em;
    color: var(--text-strong);
}
.pg-lead { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-body); max-width: 62ch; }
.pg-lead + .pg-lead { margin-top: .625rem; }
.pg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.pg-head--legal { margin-inline: auto; max-width: 52rem; }

.pg-2 .sp-head .sec-title { font-size: var(--fs-h2s); line-height: 1.08; }
.pg-2 .sp-block, .pg-2 .page-sheet > .band.sp-block { margin-top: 3.5rem; }

/* Фото рядом с текстом раздела */
.pg-with-photo { display: grid; gap: 2rem; }
.pg-with-photo .sp-photo { margin: 0; }
@media (min-width: 1024px) {
    .pg-with-photo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
    .pg-with-photo .sp-steps { grid-template-columns: 1fr; gap: 0; }
    .pg-with-photo .sp-checks { grid-template-columns: 1fr; }
    .pg-with-photo .sp-photo { margin-top: .5rem; }
}

/* Завершение: светлая полоса с призывом и ссылками */
.pg-end { margin: 4rem 0 0; padding: 0 2rem 2.5rem; }
.pg-end-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    padding: 2rem 2.25rem;
    background: var(--band);
    border-radius: var(--r-lg);
}
.pg-end-text { flex: 1 1 22rem; }
.pg-end-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--text-strong);
}
.pg-end-text p { margin-top: .5rem; font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); max-width: 56ch; }
.pg-end .pg-actions { margin-top: 0; }
.pg-end-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;                        /* подпись и ссылки — на одной линии */
    gap: .25rem 1.25rem;
    margin-top: 1.25rem;
    padding-inline: .25rem;
    font-size: var(--fs-small);
    line-height: 1.5;
}
.pg-end-links span { color: var(--text-mut); }
.pg-end-links a {
    padding-block: .375rem;                       /* цель для пальца ≥ 24 px */
    color: var(--text-body);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: .25em;
}
.pg-end-links a:hover { color: var(--o-600); text-decoration-color: currentColor; }

@media (max-width: 640px) {
    .pg-head { padding: 2rem 1.25rem 0; }
    .pg-2 .sp-block, .pg-2 .page-sheet > .band.sp-block { margin-top: 2.75rem; }
    .pg-end { margin-top: 3rem; padding: 0 1.25rem 2rem; }
    .pg-end-box { padding: 1.5rem 1.25rem; }
    .pg-end .pg-actions .btn { flex: 1 1 100%; }
}

/* Шаги «Как везём»: текст — 16 px, как основной; номер — узким шрифтом
   (в pages-1.css он был набран Manrope, которого на сайте больше нет) */
.sp-steps li { font-size: var(--fs-body); line-height: 1.55; }
.sp-steps li::before { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1; color: var(--o-600); }

/* Шаги рядом с фото — плотным списком: номер слева от названия, а не над ним */
.pg-with-photo .sp-steps li { position: relative; padding: .875rem 0 .875rem 2.25rem; }
.pg-with-photo .sp-steps li::before { position: absolute; left: 0; top: .875rem; margin: 0; }
.pg-with-photo .sp-steps li { border-top-width: 1px; }

/* «Вакансии»: все вакансии открыты сразу. Слева — название, о работе и
   кнопка, справа — «Требуем» и «Предлагаем». Между вакансиями — линия,
   без карточек и теней */
.vac-list { margin-top: 1.5rem; border-bottom: 1px solid var(--line-2); }
.vac {
    display: grid;
    gap: 1rem 3rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--line-2);
}
@media (min-width: 1024px) { .vac { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
main h3.vac-title { color: var(--text-strong); }    /* роль t1: Golos 18/600, как заголовки карточек */
.vac-about { margin-top: .625rem; font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); }
.vac-btn { margin-top: 1rem; }
.vac-terms { margin: 0; display: grid; gap: 1rem; }
.vac-terms dt { font-weight: 600; font-size: var(--fs-small); line-height: 1.4; color: var(--text-mut); }
.vac-terms dd { margin: .25rem 0 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); }

/* ── 13. Плитки-ссылки с пиктограммами ─────────────────────────────
   Baymard: подразделы голым текстом мешают пробегать глазами — нужны
   плитки с узнаваемой картинкой и подписью; NN/g: значок без подписи
   понимают в 60 % случаев, с подписью — в 88 %. Пиктограммы — одна
   краска (currentColor), стёкла и ступицы — «вырезы» цветом плитки
   (--picto-cut). При наведении машина становится оранжевой. */
.picto { display: block; width: 6rem; height: 3rem; color: #2B3137; transition: color .18s ease; }
.picto .c { fill: var(--picto-cut, #fff); transition: fill .18s ease; }

.tiles { margin-top: 1.5rem; }
.tiles-label { font-size: var(--fs-small); font-weight: 600; line-height: 1.4; color: var(--text-mut); }
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.tiles-grid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-grid--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1023px) { .tiles-grid--c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
    --picto-cut: #fff;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1rem 1.125rem;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    color: var(--text-strong);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}
.tile:hover { --picto-cut: var(--o-50); background: var(--o-50); border-color: var(--o-300); }
.tile:hover .picto { color: var(--o-600); }
.tile:focus-visible { outline: 2px solid var(--o-600); outline-offset: 2px; }

/* На тёмном «Что мы возим» (Услуги) */
.cargo-tiles { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.cargo-tiles .tiles-label { color: #A9B4B8; }
.cargo-tiles .tile { --picto-cut: #0C1D24; background: #0C1D24; border-color: rgba(255, 255, 255, .12); color: #fff; }
.cargo-tiles .tile .picto { color: #E9E3D6; }
.cargo-tiles .tile:hover { --picto-cut: #14272F; background: #14272F; border-color: var(--o-400); }
.cargo-tiles .tile:hover .picto { color: var(--o-400); }

/* Карточки со ссылками на технику: пиктограмма над названием */
.sp-more a { --picto-cut: var(--sheet); }
.sp-more a:hover { --picto-cut: var(--o-50); }
.sp-more a .picto { margin-bottom: .875rem; }
.sp-more a:hover .picto { color: var(--o-600); }

@media (max-width: 640px) {
    .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .tile { padding: .875rem .875rem 1rem; }
    .tiles-grid--c3, .tiles-grid--c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .picto { width: 5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .picto, .picto .c, .tile { transition: none; } }