/* Exact shared page and chrome styling from the supplied reference. */
.pg{--ink:#1a3365;--red:#ca9e66;--red-d:#b88a5a;--text:#4a5568;--line:#d8dfea;
--tint:#eaeef5;--page:#f2f5f9;--brand:#023e84;--ok:#1c6b46;
font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
color:var(--ink);-webkit-font-smoothing:antialiased;background:var(--page)}
.pg *{box-sizing:border-box}
/* Две гарнитуры: плотный гротеск на заголовки — он даёт странице характер
дилерской вывески, и техничный шрифт на текст. Один универсальный шрифт
на всё — самый быстрый способ получить вид типовой заготовки. */
.pg{--font-display:'Archivo','Arial Narrow',Helvetica,sans-serif}
.pg h1,.pg h2,.pg h3,.pg__h1,.pg__h2,.pg__h3,
.pg__tile b,.pg__step b,.pg__num b,.pg__cta h2,.pg__band h2,
.pg__qa summary,.pg__submit,.pg__btn{font-family:var(--font-display);
font-weight:800;letter-spacing:-.02em}
.pg__btn,.pg__submit{letter-spacing:.02em}
.pg__wrap{max-width:1320px;margin:0 auto;padding:0}
/* Три интервала вместо одного: обычная секция, тесная и просторная —
иначе всё на странице получает равный вес. */
/* Секция — белая плоскость с полями поверх подложки страницы, а не контент,
прилипший к краю. Между плоскостями видно фон, отсюда ощущение слоёв. */
.pg__sec{background:#fff;padding:30px 16px;margin:0;border-top:1px solid var(--line)}
.pg__sec--tight{padding:22px 16px}
.pg__sec--wide{padding:36px 16px}
.pg__sec--tint{background:var(--tint)}
/* заголовки */
.pg__eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.pg__eyebrow:before{content:"";width:28px;height:3px;background:var(--red)}
.pg__h1{font-size:31px;line-height:1.1;font-weight:900;letter-spacing:-.02em;margin:0 0 12px}
.pg__h2{font-size:26px;line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.pg__h3{font-size:19px;line-height:1.25;font-weight:800;margin:0 0 6px}
.pg__lead{font-size:17px;line-height:1.55;color:var(--text);margin:0 0 18px}
.pg__p{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 14px}
.pg__note{font-size:15px;line-height:1.5;color:var(--text);margin:12px 0 0}
/* плитки фактов */
.pg__tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.pg__tiles + *{margin-top:22px}
.pg__tile{background:var(--tint);padding:18px 17px}
.pg__tile b{display:block;font-size:22px;font-weight:900;letter-spacing:-.01em;margin:0 0 3px}
.pg__tile span{font-size:15px;line-height:1.45;color:var(--text)}
/* нумерованные шаги */
.pg__steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);counter-reset:step}
.pg__step{background:var(--tint);padding:18px 17px;display:flex;gap:14px}
.pg__step:before{counter-increment:step;content:counter(step,decimal-leading-zero);
flex:0 0 auto;font-size:15px;font-weight:900;color:#8a6528;letter-spacing:.06em;padding-top:2px}
.pg__step b{display:block;font-size:17px;font-weight:800;margin:0 0 4px}
.pg__step span{font-size:15px;line-height:1.5;color:var(--text)}
/* карточки в ряд */
.pg__cards{display:grid;gap:14px}
.pg__card{border:1px solid var(--line);background:var(--tint);padding:20px 18px}
/* Карточка объявляет глубину один раз — рамкой. Цветная полоса слева
в 4px была декорацией поверх той же рамки. */
.pg__card--mark{border-top:2px solid var(--ink)}
.pg__list{margin:10px 0 0;padding:0 0 0 18px}
.pg__list li{font-size:15px;line-height:1.55;color:var(--text);margin:0 0 6px}
/* строки «слева-справа» */
.pg__rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.pg__row{background:var(--tint);padding:14px 16px;display:flex;justify-content:space-between;gap:12px}
.pg__row span{font-size:15px;color:var(--text)}
.pg__row b{font-size:16px;font-weight:800;white-space:nowrap;text-align:right}
/* выделенный блок */
.pg__callout{background:var(--tint);padding:20px 20px 20px 22px;
box-shadow:inset 2px 0 0 var(--ink)}
.pg__callout p{margin:0 0 10px;font-size:16px;line-height:1.55}
.pg__callout p:last-child{margin:0}
.pg__callout b{font-weight:800}
/* вопросы */
.pg__qa details{border-bottom:1px solid var(--line)}
.pg__qa summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;position:relative;
font-size:17px;font-weight:800;line-height:1.4}
.pg__qa summary::-webkit-details-marker{display:none}
.pg__qa summary:after{content:"+";position:absolute;right:4px;top:13px;font-size:24px;
font-weight:400;color:#8a6528;line-height:1}
.pg__qa details[open] summary:after{content:"\2212"}
.pg__qa p{margin:0 0 15px;font-size:16px;line-height:1.6;color:var(--text)}
/* призыв к действию */
/* Финальный призыв: кадр слева, действие справа. Прежде это был тёмный
прямоугольник с заголовком у левого края и пустым полем справа. */
.pg__cta{background:var(--ink);color:#fff;display:grid;overflow:hidden}
.pg__ctapic{overflow:hidden;background:#0d1728;min-height:220px}
.pg__ctapic img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/10}
.pg__ctatx{padding:26px 20px 28px}
.pg__cta h2{font-size:25px;font-weight:900;margin:0 0 10px;letter-spacing:-.02em;max-width:18ch}
.pg__cta p{font-size:16px;line-height:1.55;color:#c8d4e6;margin:0 0 18px;max-width:44ch}
.pg__ctalist{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.pg__ctalist li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:#c8d4e6}
.pg__ctalist li:before{content:"";flex:0 0 auto;width:9px;height:5px;margin-top:7px;
border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.pg__btns{display:grid;gap:10px}
.pg__btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 22px;
font-size:17px;font-weight:900;text-decoration:none;border-radius:10px;letter-spacing:.03em}
.pg__btn--line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.pg__btn--line:hover{background:var(--ink);color:#fff}
.pg__btn--call{background:var(--red);color:#1a3365}
.pg__btn--call [data-phone]{margin-left:.25em}
.pg__btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.pg__btn--dark{background:var(--ink);color:#fff}
/* формы */
.pg__form{border:1px solid var(--line);background:var(--tint);padding:20px 18px}
.pg__field{display:block;margin:0 0 14px}
.pg__field em{font-style:normal;text-transform:none;font-size:13px;font-weight:500;
letter-spacing:0;color:#8a6528;margin-left:9px}
.pg__field span{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;color:#6a6a6a;margin:0 0 6px}
.pg__field input,.pg__field textarea,.pg__field select{width:100%;font:inherit;font-size:16px;
padding:14px;border:2px solid var(--line);background:#fff;color:var(--ink);min-height:56px}
.pg__field textarea{min-height:110px;resize:vertical}
.pg__field input:focus,.pg__field textarea:focus,.pg__field select:focus{outline:none;border-color:var(--ink)}
.pg__field input[aria-invalid="true"],.pg__field textarea[aria-invalid="true"]{border-color:#c0392b}
.pg__submit{width:100%;min-height:58px;border:0;background:var(--red);color:#1a3365;
font:inherit;font-size:17px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
cursor:pointer;border-radius:10px}
.pg__submit:hover{background:var(--red-d)}
.pg__msg{margin:14px 0 0;padding:13px 15px;background:var(--tint);box-shadow:inset 2px 0 0 var(--ink);
font-size:15px;line-height:1.55;color:var(--text)}
/* фотографии */
.pg__shot{margin:0 0 14px;border:1px solid var(--line);background:var(--tint)}
.pg__shot img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.pg__gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg__gal-link{display:block;color:inherit;text-decoration:none;outline-offset:4px}
.pg__gal-link:focus-visible{outline:3px solid var(--red)}
.pg__gal figure{margin:0;position:relative;overflow:hidden;background:var(--tint)}
.pg__gal img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pg__gal .pg__photo-empty{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;padding:20px;background:#e9edf3;color:#5d6675;font-size:13px;font-weight:800;letter-spacing:.1em;text-align:center;text-transform:uppercase}
.pg__heropic,.pg__ctapic,.pg__split figure,.pg__bandpic{position:relative}
.pg__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 14px 10px;
background:linear-gradient(180deg,rgba(10,18,38,0) 0%,rgba(10,18,38,.85) 62%);
color:#fff;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.02em}
@media (min-width:768px){ .pg__cap{padding:30px 18px 12px;font-size:14px} }
.pg__gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
background:linear-gradient(180deg,rgba(10,18,38,0) 0%,rgba(10,18,38,.86) 60%);
color:#fff;font-size:13px;font-weight:700;line-height:1.3}
/* Белое на белом. Плитки, карточки и шаги стоят на светлой подложке, и их
видно как отдельные плоскости, а не по тонкой линии. Внутри уже тонированной
секции всё переворачивается: там блок белый, иначе он сливается с фоном. */
.pg__sec--tint .pg__tile,
.pg__sec--tint .pg__step,
.pg__sec--tint .pg__card,
.pg__sec--tint .pg__row,
.pg__sec--tint .pg__form,
.pg__sec--tint .pg__callout{background:#fff}
.pg__sec--tint .pg__callout{box-shadow:inset 2px 0 0 var(--ink)}
/* поля ввода всегда белые: их белизна означает «сюда можно писать» */
.pg__field input,.pg__field textarea,.pg__field select{background:#fff}
/* ── отклик интерфейса ─────────────────────────────────────
Карточка товара приподнимает кадр и подсвечивает рамку, кнопки отвечают
цветом, ссылки — подчёркиванием, которое растёт из левого края. */
.pg__car{overflow:hidden}
.pg__car img{transition:transform .55s cubic-bezier(.16,.84,.44,1)}
.pg__car:hover{border-color:var(--ink)}
.pg__car:hover img{transform:scale(1.04)}
.pg__cargo{position:relative}
.pg__car:hover .pg__cargo{color:var(--ink)}
.pg__btn--call:hover{background:var(--red-d)}
.pg__btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.pg__btn--line:hover{background:var(--ink);color:#fff}
/* ссылка в тексте: подчёркивание вырастает под курсором */
.pg__p a,.pg__qa p a,.pg__note a{color:var(--brand);text-decoration:none;
background-image:linear-gradient(var(--red),var(--red));
background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
transition:background-size .25s ease}
.pg__p a:hover,.pg__qa p a:hover,.pg__note a:hover{background-size:100% 2px}
/* вопрос отзывается на курсор до раскрытия */
.pg__qa summary{transition:color .16s ease}
.pg__qa summary:hover{color:var(--brand)}
.pg__qa details[open] summary{color:var(--ink)}
/* поле формы подсвечивается рамкой и лёгким кольцом */
.pg__field input:focus,.pg__field textarea:focus,.pg__field select:focus{
border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,51,101,.12)}
/* фокус с клавиатуры виден везде */
.pg a:focus-visible,.pg button:focus-visible,.pg summary:focus-visible{
outline:3px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.pg__car img,.pg__p a,.pg__qa summary{transition:none}
.pg__car:hover img{transform:none}
}
/* Длина строки. На широком экране абзац растягивался на весь контейнер и
доходил до 140 знаков — глаз теряет начало следующей строки. Держим прозу
в разумной колонке, а плитки, сетки и таблицы пусть занимают всю ширину. */
.pg__lead{max-width:52ch}
.pg__p,.pg__note{max-width:60ch}
.pg__qa p{max-width:62ch}
.pg__callout p{max-width:62ch}
.pg__h1{max-width:22ch}
.pg__h2{max-width:30ch}
.pg__card .pg__p{max-width:none}
/* ============================================================
ГЕРОЙ СТРАНИЦЫ.
Фотография показана в полную силу, без пелены и градиента
поверх — текст живёт на своей плотной панели рядом. Кадр
машины не должен работать блёклым фоном.
============================================================ */
.pg__hero{background:#12203a;color:#fff}
.pg__heroin{display:grid}
.pg__herotx{padding:30px 20px 32px;order:2}
.pg__heropic{position:relative;order:1;overflow:hidden;background:#0d1728}
.pg__heropic img{width:100%;height:100%;display:block;object-fit:cover;
object-position:42% 55%;aspect-ratio:16/10}
/* На тёмном фоне надзаголовок наследовал кегль абзаца карточки, а цвет
чернил там не читался: держим свой размер и золото, как в герое. */
.pg__hero .pg__eyebrow,.pg__band .pg__eyebrow,
.pg__cta .pg__eyebrow{font-size:14px;line-height:1.3}
.pg__cta .pg__eyebrow{color:#d9ad6e}
.pg__cta .pg__eyebrow:before{background:#d9ad6e}
.pg__hero .pg__eyebrow{color:#d9ad6e}
.pg__hero .pg__eyebrow:before{background:#d9ad6e}
.pg__hero h1{font-size:32px;line-height:1.04;font-weight:900;letter-spacing:-.025em;
margin:0 0 14px;max-width:16ch}
.pg__hero p{font-size:17px;line-height:1.55;color:#c3cee0;margin:0;max-width:46ch}
.pg__herorule{width:64px;height:4px;background:#d9ad6e;margin:0 0 18px}
/* ============================================================
ТЕКСТ И ФОТОГРАФИЯ РЯДОМ — основной приём против пустоты
на широком экране. На телефоне складывается в одну колонку.
============================================================ */
.pg__split{display:grid;gap:20px;align-items:center}
.pg__split figure{margin:0;overflow:hidden;background:var(--tint)}
.pg__split img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pg__split--flip figure{order:-1}
/* ============================================================
ТЁМНАЯ ПОЛОСА. Кадр слева в полную силу, текст справа на
сплошном цвете — контраст строится плоскостями, а не
прозрачностью.
============================================================ */
.pg__band{background:#12203a;color:#fff}
.pg__bandin{display:grid;padding:0}
.pg__bandpic{overflow:hidden;background:#0d1728;min-height:100%}
.pg__bandpic img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:4/3}
.pg__bandtx{padding:30px 20px}
.pg__band h2{font-size:27px;font-weight:900;letter-spacing:-.02em;margin:0 0 12px;max-width:20ch;line-height:1.08}
.pg__band p{font-size:17px;line-height:1.55;color:#c3cee0;margin:0 0 18px;max-width:52ch}
.pg__band .pg__eyebrow{color:#d9ad6e}
.pg__band .pg__eyebrow:before{background:#d9ad6e}
/* цифры на тёмном */
.pg__nums{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;margin:24px 0 0}
.pg__num b{display:block;font-size:32px;font-weight:900;color:#d9ad6e;letter-spacing:-.03em;
line-height:1;margin:0 0 5px;font-variant-numeric:tabular-nums}
.pg__num span{font-size:14px;line-height:1.35;color:#a9b6cc}
/* ============================================================
ДВИЖЕНИЕ. Блоки проявляются при подходе к экрану — страница
перестаёт быть неподвижной простынёй. Всё выключается, если
человек просил уменьшить анимацию в системе.
============================================================ */
/* Одно движение на страницу, а не одинаковый въезд у каждого блока:
карточки товара проявляются по очереди, короткой волной. Остальное
стоит на месте — повторяющаяся анимация читается как шаблон. */
.pg__rise > *{opacity:0;transform:translateY(14px);
transition:opacity .55s cubic-bezier(.16,.84,.44,1),transform .55s cubic-bezier(.16,.84,.44,1)}
.pg__rise.is-in > *{opacity:1;transform:none}
.pg__rise.is-in > *:nth-child(2){transition-delay:.07s}
.pg__rise.is-in > *:nth-child(3){transition-delay:.14s}
.pg__rise.is-in > *:nth-child(4){transition-delay:.21s}
.pg__rise.is-in > *:nth-child(5){transition-delay:.28s}
.pg__rise.is-in > *:nth-child(6){transition-delay:.35s}
/* Ховер меняет линию и цвет, а не подбрасывает блок: прыгающие
карточки с мягкой тенью — первый признак шаблона. */
.pg__card,.pg__tile,.pg__btn,.pg__more{transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.pg__card:hover{border-color:var(--ink)}
.pg__btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
.pg__rise > *{opacity:1;transform:none;transition:none}
.pg__split img,.pg__card,.pg__tile,.pg__btn{transition:none}
}
/* Подсвеченный блок и список вопросов на широком экране растягивались
на всю секцию, тогда как строка внутри них вдвое короче: справа
оставалось пустое поле, и текст выглядел брошенным у левого края. */
@media (min-width:768px){
/* Форма во всю ширину секции выглядит анкетой из присутственного места:
поле под имя длиной в метр. Держим её на ширину чтения, а имя, почту и
телефон ставим по два в ряд. */
.pg__form{max-width:760px;padding:26px 24px;
display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-content:start}
.pg__form > *{grid-column:1 / -1}
.pg__submit{width:auto;min-width:210px;padding:0 42px;justify-self:start}
.pg__form .pg__field--half{grid-column:auto}
.pg__split img{aspect-ratio:3/2}
.pg__callout{max-width:840px}
.pg__qa{max-width:660px}
.pg__sec--qa{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
gap:0 48px;align-items:start}
.pg__sec--qa > .pg__eyebrow{grid-column:1;grid-row:1;margin:0 0 10px}
.pg__sec--qa > .pg__h2{grid-column:1;grid-row:2;margin:0}
.pg__sec--qa > .pg__qa{grid-column:2;grid-row:1 / span 3;max-width:640px}
.pg__sec--qa > .pg__lead{grid-column:1;grid-row:3;margin:14px 0 0}
}
@media (min-width:768px){
.pg__heroin{grid-template-columns:1.02fr 1fr;align-items:stretch;max-height:560px}
/* текст выровнен по общей сетке страницы, фотография уходит в край экрана */
.pg__herotx{order:1;align-self:center;
padding:66px 48px 66px max(40px, calc((100vw - 1280px)/2 + 40px))}
.pg__heropic{order:2}
.pg__heropic img{height:100%;aspect-ratio:auto;min-height:430px;max-height:560px}
.pg__hero h1{font-size:52px}
.pg__hero p{font-size:19px}
.pg__bandin{grid-template-columns:1.05fr 1fr;align-items:stretch}
/* кадр держит высоту секции, а не висит картинкой в углу */
/* Высоту полосы задаём мы, а не пропорции кадра: вертикальный снимок
растягивал секцию на тысячу пикселей, и текст висел в пустоте. */
.pg__bandpic{height:100%}
.pg__bandpic img{height:480px;aspect-ratio:auto;object-position:center}
.pg__bandtx{align-self:center;
padding:56px max(40px, calc((100vw - 1280px)/2 + 40px)) 56px 48px}
.pg__band h2{font-size:36px}
.pg__nums{grid-template-columns:repeat(4,1fr);gap:26px}
.pg__split{grid-template-columns:1fr 1fr;gap:40px}
.pg__split--wide{grid-template-columns:1.15fr .85fr}
}
@media (min-width:768px){
.pg__wrap{padding:26px 20px}
/* на широком экране секция снова становится плоскостью с полями:
между ними виден фон страницы, отсюда ощущение слоёв */
.pg__sec{padding:46px 44px;margin:0 0 20px;border:1px solid var(--line)}
.pg__sec--tight{padding:30px 44px}
.pg__sec--wide{padding:64px 44px}
.pg__h1{font-size:44px;max-width:24ch}
.pg__h2{font-size:30px;max-width:34ch}
.pg__tiles{grid-template-columns:repeat(3,1fr)}
.pg__steps{grid-template-columns:1fr 1fr}
.pg__cards{grid-template-columns:1fr 1fr;gap:20px}
.pg__cards--three{grid-template-columns:repeat(3,1fr)}
.pg__cta{grid-template-columns:1fr 1.05fr;align-items:stretch}
.pg__ctapic img{height:100%;aspect-ratio:auto;min-height:330px}
.pg__ctatx{padding:44px 44px 46px;align-self:center}
.pg__cta h2{font-size:32px}
.pg__btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.pg__btns > *{flex:0 0 auto}
.pg__btn{padding:0 30px}
.pg__gal{grid-template-columns:repeat(4,1fr)}
}
#rec3166406503{display:none !important;}#rec3166406703{display:none !important;}#rec3166406803{display:none !important;}#rec3166406603{display:none !important;}#rec3166407103{display:none !important;}
html{overflow-x:clip}
.jfx{font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif}
/* ── шапка ─────────────────────────────────────────────── */
/* Шапка всегда на экране, на всех страницах. sticky здесь не работал:
у тильдовской обёртки свой overflow, и шапка уезжала вместе со страницей.
Поэтому крепим намертво, а телу отдаём ровно её высоту, чтобы первый
экран не оказался под ней. */
:root{--jfh-h:87px}
.jfh{position:fixed;top:0;left:0;right:0;z-index:9000;background:#1a3365;
border-bottom:3px solid #ca9e66}
body{padding-top:var(--jfh-h)}
@media screen and (min-width:1121px){
:root{--jfh-h:89px}
}
/* max-width без учёта полей давал перелив на экране ровно 1280: контейнер
занимал всю ширину, а padding добавлялся сверху. */
.jfh__bar{max-width:1280px;margin:0 auto;padding:0 40px;height:86px;display:flex;
align-items:center;gap:34px;box-sizing:border-box}
.jfh__logo{display:flex;align-items:center;gap:16px;text-decoration:none;flex:0 0 auto}
.jfh__logo img{display:block;height:58px;width:auto}
.jfh__word{color:#fff;font-family:'Archivo','Arial Narrow',Helvetica,sans-serif;
font-size:24px;font-weight:900;letter-spacing:-.005em;line-height:1;white-space:nowrap}
.jfh__word span{display:block;font-family:'IBM Plex Sans',-apple-system,'Segoe UI',Arial,sans-serif;
font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
color:#d9ad6e;margin:5px 0 0}
/* Если защищённый CRM URL логотипа временно битый, ui.js скрывает только img.
Более специфичное состояние не даёт responsive-правилам убрать вместе с
ним и текстовый wordmark. */
.jfh__logo.is-image-missing .jfh__word{display:block}
.jfh__nav{display:flex;align-items:center;gap:28px;margin:0 auto}
.jfh__nav a{font-size:16px;font-weight:600;color:#e8e8e8;text-decoration:none;padding:10px 0;
border-bottom:2px solid transparent;transition:.15s}
.jfh__nav a:hover{color:#fff;border-bottom-color:#ca9e66}
.jfh__right{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.jfh__tel{display:flex;flex-direction:column;justify-content:center;min-height:46px;position:relative;padding-left:32px;
color:#fff;text-decoration:none;font-size:21px;font-weight:800;white-space:nowrap;letter-spacing:-.01em}
.jfh__tel:before{content:"";position:absolute;left:0;bottom:4px;
transform-origin:52% 82%;
width:22px;height:22px;background:#ca9e66;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.jfh__tel:hover{color:#ca9e66}
.jfh__tel.is-ring:before{animation:jfhRing .85s ease}
@keyframes jfhRing{
0%,100%{transform:rotate(0)}
8%{transform:rotate(-17deg)} 20%{transform:rotate(15deg)}
32%{transform:rotate(-12deg)} 44%{transform:rotate(9deg)}
56%{transform:rotate(-6deg)} 68%{transform:rotate(3deg)} 80%{transform:rotate(-1deg)}
}
@media (prefers-reduced-motion:reduce){
.jfh__tel.is-ring:before{animation:none}
}
.jfh__tel small{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#b8c0d0;margin:0 0 2px}
.jfh__btn{background:#ca9e66;color:#1a3365;font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
text-decoration:none;padding:16px 26px;white-space:nowrap;transition:.15s}
.jfh__btn:hover{background:#fff;color:#1a3365}
@media screen and (min-width:981px){
/* Номер — кнопка, а не строка: на равных с заявкой и по-прежнему читается
цифрами, что для покупателя постарше важнее безликого «Call us». */
.jfh__tel{flex-direction:row;align-items:center;gap:10px;background:#ca9e66;color:#1a3365;
padding:0 20px 0 18px;min-height:52px;border-radius:10px;font-size:19px;
font-family:'Archivo','Arial Narrow',Helvetica,sans-serif;font-weight:900;letter-spacing:0}
.jfh__tel small{display:none}
.jfh__tel:before{position:static;transform:none;width:19px;height:19px;background:#1a3365;flex:0 0 auto}
.jfh__tel:hover{background:#b88a5a;color:#1a3365}
a[href^="tel"].jfh__tel{color:#1a3365}
/* единственное действие шапки: делаем его крупнее и светлее — тёплая охра
даёт контраст 6.6 против 5.0 у прежнего золота и заметнее на синем */
.jfh__tel{background:#e0b878;min-height:56px;font-size:20px;padding:0 24px 0 20px;
box-shadow:0 2px 0 rgba(0,0,0,.18)}
.jfh__tel:hover{background:#fff;color:#1a3365}
.jfh__tel:hover:before{background:#1a3365}
.jfh__tel:focus-visible{outline:3px solid #fff;outline-offset:3px}
}
/* Текущий раздел подсвечен: человек должен видеть, где он находится. */
.jfh__nav a[aria-current="page"]{color:#fff;border-bottom-color:#ca9e66}
.jfh__burger{display:none;width:48px;height:48px;border:0;background:transparent;padding:0;cursor:pointer}
.jfh__burger i{display:block;width:26px;height:2px;background:#fff;margin:6px auto}
.jfh__drawer,.jfh__scrim{display:none}
@media screen and (max-width:980px){
/* Порядок на телефоне: бургер слева, логотип по центру, звонок справа.
Разметку не трогаем — .jfh__right раскрываем display:contents, и его дети
становятся прямыми элементами полосы, которым можно назначить порядок.
Полоса выше, чем была, и логотип в ней крупнее: он единственное, по чему
человек с рекламы понимает, куда попал. */
.jfh__bar{padding:0 12px;height:84px;gap:8px}
.jfh__logo img{height:62px}
.jfh__word{display:none}
.jfh__nav,.jfh__btn{display:none}
.jfh__right{display:contents}
.jfh__burger{order:1;flex:0 0 52px}
.jfh__logo{order:2;margin:0 auto}
.jfh__tel{order:3;flex:0 0 52px}
.jfh__tel{width:52px;height:52px;font-size:0;background:var(--gold,#ca9e66);color:#1a3365;
justify-content:center;align-items:center;border-radius:0;padding-left:0}
.jfh__tel:after{content:"";width:24px;height:24px;display:block;
background:#1a3365;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.jfh__tel small{display:none}
.jfh__tel:before{display:none}
.jfh__burger{display:block;width:52px;height:52px}
@media (min-width:560px){
/* планшет: номер читается словами, эмблема подписана */
.jfh__word{display:block;font-size:19px}
.jfh__word span{font-size:12px;letter-spacing:.18em}
.jfh__logo{order:2;margin:0 auto 0 12px}
.jfh__tel{width:auto;height:52px;flex:0 0 auto;flex-direction:row;gap:10px;
font-size:20px;padding:0 20px 0 18px;color:#1a3365}
.jfh__tel:after{margin:0}
}
.jfh__drawer{display:block;position:fixed;top:0;right:0;bottom:0;width:min(88vw,340px);background:#1a3365;
transform:translateX(101%);visibility:hidden;transition:transform .25s ease;z-index:9600;
padding:24px 26px;overflow-y:auto}
.jfh__drawer.is-open{transform:none;visibility:visible}
.jfh__drawer a{display:block;font-size:19px;font-weight:700;color:#fff;text-decoration:none;
padding:17px 0;border-bottom:1px solid #262626}
.jfh__drawer .jfh__dtel{color:#fff;font-size:24px;border:0;padding:24px 0 6px}
.jfh__drawer .jfh__dmail{color:#b8c0d0;font-size:15px;border:0;padding:10px 0;min-height:44px;
display:flex;align-items:center;word-break:break-all}
.jfh__scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;
opacity:0;pointer-events:none;transition:opacity .25s}
.jfh__scrim.is-open{opacity:1;pointer-events:auto}
.jfh__close{position:absolute;top:12px;right:14px;width:44px;height:44px;border:0;background:transparent;
color:#fff;font-size:32px;line-height:1;cursor:pointer}
}
/* Между мобильной раскладкой и просторным экраном есть полоса, где меню,
логотип и правая группа в сумме шире контейнера, а сжиматься им нечем —
правый край уезжал за экран на 16px. Уплотняем набор на этих ширинах. */
@media screen and (min-width:981px) and (max-width:1400px){
.jfh__bar{gap:20px;padding:0 24px}
.jfh__nav{gap:18px;min-width:0}
.jfh__nav a{font-size:15px}
.jfh__right{gap:12px}
.jfh__btn{padding:0 14px;font-size:14px}
.jfh__logo img{height:52px}
}
/* На ноутбуках 981-1180 семь пунктов меню, номер и кнопка в сумме шире полосы:
телефон наезжал на «Contact» и «FAQ». Убираем то, без чего смысл не теряется —
написание названия рядом с эмблемой и надстрочную подпись у номера. */
@media screen and (min-width:981px) and (max-width:1300px){
.jfh__bar{gap:14px;padding:0 18px}
.jfh__word{display:none}
.jfh__nav{gap:15px}
.jfh__nav a{font-size:14px}
.jfh__right{gap:10px}
.jfh__tel{font-size:18px;padding-left:28px}
.jfh__tel small{display:none}
.jfh__tel:before{bottom:auto;top:50%;margin-top:-11px}
.jfh__btn{padding:0 12px;font-size:13px;letter-spacing:.06em}
.jfh__logo img{height:48px}
.jfh__logo.is-image-missing .jfh__word{font-size:16px}
.jfh__logo.is-image-missing .jfh__word span{font-size:10px;letter-spacing:.12em}
}
@media screen and (max-width:559.98px){
.jfh__logo.is-image-missing .jfh__word{max-width:160px;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.jfh__logo.is-image-missing .jfh__word span{font-size:9px;letter-spacing:.12em}
}
/* ── подвал: содержательный, а не пустой ───────────────── */
.jff__facts{display:flex;gap:22px;margin:16px 0 0;padding:0;list-style:none}
.jff__facts b{display:block;font-size:20px;font-weight:800;color:#fff;line-height:1;
font-variant-numeric:tabular-nums}
.jff__facts span{display:block;font-size:12px;line-height:1.3;color:#a3adc2;margin:4px 0 0}
.jff__c a.jff__call{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px;
background:#ca9e66;color:#1a3365;font-size:19px;font-weight:800;text-decoration:none;
border-radius:10px;margin:0 0 12px}
.jff__c a.jff__call:hover{background:#dcb27c;color:#1a3365}
/* Один шаг для всех строк контакта: раньше адрес занимал 22px, а соседи 44-48,
и промежутки между ними читались как случайные дыры. */
.jff__c a.jff__line,.jff__c p.jff__line{display:flex;align-items:center;gap:10px;color:#cfcfcf;
font-size:15px;line-height:1.45;text-decoration:none;margin:0;min-height:44px}
.jff__c a.jff__line:hover{color:#fff}
.jff__line--plain{cursor:default}
.jff__c a.jff__line--plain{cursor:pointer}
.jff__ic{display:inline-block;flex:0 0 auto;width:17px;height:17px;background:#ca9e66;
-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
.jff__ic--tel{background:#1a3365;-webkit-mask-image:var(--ic-tel);mask-image:var(--ic-tel)}
.jff__ic--sms{-webkit-mask-image:var(--ic-sms);mask-image:var(--ic-sms)}
.jff__ic--mail{-webkit-mask-image:var(--ic-mail);mask-image:var(--ic-mail)}
.jff__ic--pin{-webkit-mask-image:var(--ic-pin);mask-image:var(--ic-pin)}
.jff__ic--clock{-webkit-mask-image:var(--ic-clock);mask-image:var(--ic-clock)}
.jff__now{display:inline-block;font-style:normal;font-size:12px;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;margin-left:8px;
background:#3a3f4a;color:#c9c9c9;border-radius:999px;vertical-align:2px}
.jff__now.is-open{background:#1c6b46;color:#fff}
:root{
--ic-tel:url("data:image/svg+xml;utf8,");
--ic-sms:url("data:image/svg+xml;utf8,");
--ic-mail:url("data:image/svg+xml;utf8,");
--ic-pin:url("data:image/svg+xml;utf8,");
--ic-clock:url("data:image/svg+xml;utf8,");
}
/* ── подвал ────────────────────────────────────────────── */
.jff{background:#1a3365;color:#cfcfcf;border-top:3px solid #ca9e66}
.jff__in{max-width:1280px;margin:0 auto;padding:52px 20px 30px;display:grid;grid-template-columns:1fr;gap:38px}
.jff__brand img{height:78px;width:auto;display:block;margin:0 0 14px}
.jff__brand p{font-size:16px;line-height:1.6;color:#b8c0d0;margin:0;max-width:44ch}
.jff__t{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.jff__t:after{content:"";display:block;width:30px;height:3px;background:#ca9e66;margin:10px 0 0}
.jff__nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.jff__nav a{font-size:16px;color:#cfcfcf;text-decoration:none;padding:11px 0;display:block}
.jff__nav a:hover{color:#fff}
.jff__c a,.jff__c p{display:block;font-size:16px;line-height:1.5;color:#cfcfcf;text-decoration:none;margin:0 0 14px}
.jff__c a.jff__big{font-size:24px;font-weight:800;color:#fff;margin:0 0 16px}
.jff__c a:hover{color:#fff}
.jff__bot{border-top:1px solid #232323}
.jff__bot-in{max-width:1280px;margin:0 auto;padding:20px;display:flex;flex-wrap:wrap;gap:14px 26px;
align-items:center;justify-content:space-between}
.jff__bot-in p{font-size:14px;color:#a8b0c0;margin:0}
.jff__legal{display:flex;gap:22px;flex-wrap:wrap}
.jff__legal a{font-size:14px;color:#a8b0c0;text-decoration:none;padding:6px 0}
.jff__legal a:hover{color:#fff}
/* Часы работы: две строки, чтобы день и время не сливались в одну кашу. */
.jff__hours{margin:0}
.jff__hours b{display:block;color:#fff;font-weight:700}
.jff__hours span{display:block;color:#b8c0d0}
/* Под липкой полосой карточки страница держала 72px пустоты, и между синим
футером и полосой светилась белая щель. Место под полосу отдаём футеру —
тогда низ экрана остаётся синим. */
body:has(.vdbar){padding-bottom:0}
@media screen and (max-width:899.98px){ body:has(.vdbar) .jff__bot{padding-bottom:72px} }
@media screen and (max-width:1120px){
/* Телефон: контакты первыми — это то, зачем сюда доскроллили. Остальное
компактно: футер занимал полтора экрана, из них половину — воздух. */
.jff__in{padding:26px 16px 18px;gap:22px}
.jff__c{order:1}
.jff__in > div:nth-child(2){order:2}
.jff__brand{order:3}
.jff__brand img{display:none} /* логотип уже стоит в шапке */
.jff__brand p{font-size:14px;line-height:1.5;color:#a3adc2;max-width:none}
.jff__t{font-size:12px;margin:0 0 10px}
.jff__t:after{width:24px;height:2px;margin:8px 0 0}
.jff__c a,.jff__c p{margin:0 0 4px;font-size:15px}
.jff__c a.jff__big{font-size:26px;margin:0 0 10px}
.jff__hours{margin:2px 0 0}
.jff__nav{grid-template-columns:1fr 1fr;gap:0 14px}
/* В футере не было border-box, и padding прибавлялся к минимальной высоте:
ссылка занимала 64px вместо 44, отсюда простыня из воздуха между строками. */
.jff,.jff *{box-sizing:border-box}
.jff__nav a{padding:0;min-height:44px;display:flex;align-items:center;font-size:15px;line-height:1.25}
.jff__c a{min-height:44px;padding:0;display:flex;align-items:center}
.jff__c p{min-height:0}
.jff__c a.jff__big{min-height:44px;margin:0 0 6px}
.jff__bot-in{padding:12px 16px;flex-direction:column;align-items:flex-start;gap:2px}
.jff__bot-in p{font-size:13px}
.jff__legal{gap:0 18px}
.jff__legal a{padding:10px 0;min-height:44px;display:flex;align-items:center;font-size:13px}
}
/* отступ под липкую панель уже даёт body{padding-bottom} — подвалу он не нужен */
@media screen and (min-width:760px){
/* Семь пунктов в один столбец задавали футеру высоту в полэкрана. */
.jff__in{grid-template-columns:1.25fr 1fr 1fr;gap:36px;padding:36px 40px 20px}
.jff__nav{grid-template-columns:1fr 1fr;gap:0 18px}
.jff__nav a{padding:7px 0;min-height:0;font-size:15px}
/* колонка контактов задавала футеру высоту: строки шли с запасом */
.jff__c a,.jff__c p{margin:0 0 4px;font-size:15px}
.jff__c a.jff__big{font-size:21px;margin:0 0 10px}
.jff__brand img{height:72px;margin:0 0 12px}
.jff__brand p{font-size:15px}
.jff__t{margin:0 0 12px}
.jff__bot-in{padding:14px 40px}
}
/* ===== СКРУГЛЕНИЯ ОБВЯЗКИ =====
Тот же принцип: мягкие углы только у того, что нажимают. */
.jfh__btn,.jfh__tel,.jfh__burger,.jfh__close{border-radius:10px}
@media screen and (max-width:1120px){
}
/* jf-contact-css */
.pg__big{display:flex;align-items:center;justify-content:center;min-height:70px;
background:var(--red);color:#1a3365;font-size:27px;font-weight:900;letter-spacing:-.01em;
text-decoration:none;border-radius:10px;margin:0 0 10px}
.pg__big:hover{background:var(--red-d)}
.pg__ways{display:grid;gap:10px;margin:0 0 22px}
.pg__way{display:flex;align-items:center;justify-content:center;min-height:56px;
border:2px solid var(--ink);color:var(--ink);text-decoration:none;
font-size:17px;font-weight:800;border-radius:10px}
.pg__way:hover{background:var(--tint)}
.pg__address-link{color:inherit;text-decoration:none;text-underline-offset:4px}
.pg__address-link:hover{color:var(--red-d)}
.pg__hours{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.pg__hour{background:#fff;padding:13px 15px;display:flex;justify-content:space-between;gap:12px}
.pg__hour span{font-size:15px;color:var(--text)}
.pg__hour b{font-size:16px;font-weight:800;white-space:nowrap}
.pg__hour--off b{color:#6a6a6a;font-weight:600}
@media (min-width:768px){
.pg__big{display:inline-flex;width:auto;padding:0 44px;font-size:31px;min-height:76px}
.pg__ways{grid-template-columns:repeat(2,minmax(0,auto));justify-content:start}
.pg__way{padding:0 26px}
.pg__card .pg__way{display:inline-flex;width:auto}
}
/* jf-faq-css */
.pg__group{margin:0 0 26px}
.pg__group:last-child{margin:0}
.pg__gt{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:900;
letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 4px}
.pg__gt:before{content:"";width:20px;height:3px;background:var(--red)}
@media (min-width:1000px){
.pg__group{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 44px;
align-items:start;margin:0 0 36px}
.pg__gt{margin:8px 0 0}
.pg__group .pg__qa{max-width:none}
}
/* jf-fin-css */
.pg__calc{border:1px solid var(--line);background:#fff;padding:18px 16px;margin:0 0 20px}
@media (min-width:900px){
/* Настройки слева, счёт справа: иначе подпись и цифра расходятся по краям
секции, и глазу нечем их связать. */
.pg__calc{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start;
padding:26px 26px 24px}
.pg__cout{border-left:1px solid var(--line);padding:0 0 0 30px;align-self:stretch}
.pg__crow:first-child{padding-top:0}
}
.pg__crow{padding:14px 0;border-bottom:1px solid var(--line)}
.pg__crow:last-of-type{border-bottom:0}
.pg__clab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.pg__clab span{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6a6a6a}
.pg__clab b{font-size:19px;font-weight:900}
/* высота ползунка — тач-мишень, а не декоративная полоска */
.pg__range{width:100%;height:44px;accent-color:#ca9e66;background:transparent;
display:block;cursor:pointer}
.pg__chint{font-size:14px;color:var(--text);margin:6px 0 0;min-height:18px}
.pg__sum{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:16px}
.pg__sum b{font-weight:800}
.pg__pay{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
border-top:2px solid var(--ink);margin:10px 0 0;padding:14px 0 0}
.pg__pay span{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6a6a6a}
.pg__pay b{font-size:34px;font-weight:900;color:#a87c33;letter-spacing:-.02em}
.pg__inp{display:flex;gap:10px;align-items:stretch}.pg__inp input{flex:1 1 auto;min-width:0;height:58px;padding:0 14px;border:2px solid var(--line);background:#fff;color:var(--ink);font:700 18px 'IBM Plex Sans',sans-serif}.pg__inp input:focus{outline:none;border-color:var(--ink)}.pg__inp .pg__btn{min-height:58px;border:0;cursor:pointer}
/* jf-ship-css */
/* Калькулятор: единственный блок этой страницы со своей механикой.
Облик берём у движка — те же рамки, шрифты и золото на итоговой сумме. */
.shp__calc{border:1px solid var(--line);background:#fff;padding:18px 16px}
.pg__sec--tint .shp__calc{background:#fff}
.shp__row{display:flex;gap:10px;align-items:stretch}
.shp__row input{flex:1 1 auto;min-width:0;height:58px;font:inherit;font-size:17px;padding:0 14px;
border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:0}
.shp__row input:focus{outline:none;border-color:var(--ink)}
.shp__row input::placeholder{color:#9aa4b4;opacity:1}
.shp__row button{flex:0 0 auto;min-height:58px;padding:0 22px;border:0;background:var(--red);
color:#1a3365;font:inherit;font-size:17px;font-weight:900;letter-spacing:.04em;
text-transform:uppercase;cursor:pointer;border-radius:10px;transition:background .15s}
.shp__row button:hover{background:var(--red-d)}
.shp__validation{min-height:20px;margin:10px 0 0}
.shp__validation:empty{display:none}
.shp__out{margin:16px 0 0;border-top:1px solid var(--line);padding:14px 0 0}
.shp__out[hidden]{display:none}
.shp__line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;
border-bottom:1px solid var(--line)}
.shp__line span{font-size:15px;color:var(--text)}
.shp__line b{font-size:17px;font-weight:800;text-align:right}
.shp__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 0 0}
.shp__total span{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6a6a6a}
.shp__total b{font-size:34px;font-weight:900;color:var(--red);letter-spacing:-.02em;line-height:1}
/* Три условия сделки крупно: цифра читается раньше, чем текст под ней. */
.shp__terms{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 22px}
.shp__term{background:var(--tint);padding:18px 17px}
.pg__sec--tint .shp__term{background:#fff}
.shp__term b{display:block;font-family:'Archivo','Arial Narrow',Helvetica,sans-serif;
font-size:27px;font-weight:900;letter-spacing:-.02em;margin:0 0 4px;line-height:1}
.shp__term span{font-size:15px;line-height:1.5;color:var(--text)}
/* Сравнение возов: наш выделен рамкой цвета чернил, чужой — обычный. */
.shp__tag{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;
text-transform:uppercase;padding:5px 9px;margin:0 0 12px}
.shp__tag--ours{background:var(--ink);color:#fff}
.shp__tag--other{background:var(--line);color:#4a5568}
.pg__card--ours{border:2px solid var(--ink)}
.shp__what{display:block;font-family:'Archivo','Arial Narrow',Helvetica,sans-serif;
font-size:21px;font-weight:900;letter-spacing:-.01em;margin:0 0 2px}
/* В тёмных блоках надзаголовок наследовал кегль абзаца и выходил крупнее,
чем такой же надзаголовок на светлой секции. Держим один размер. */
.pg__hero .pg__eyebrow,.pg__band .pg__eyebrow{font-size:14px;line-height:1.3}
/* Кадры внутри карточек и галерея слегка приближаются под курсором —
страница про перевозку должна ощущаться движущейся. */
.pg--shipping .pg__shot img,.pg--shipping .pg__gal img{transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.pg--shipping .pg__card:hover .pg__shot img,.pg--shipping .pg__gal figure:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
.pg--shipping .pg__shot img,.pg--shipping .pg__gal img{transition:none}
.pg--shipping .pg__card:hover .pg__shot img,.pg--shipping .pg__gal figure:hover img{transform:none}
}
/* Thank-you page: the reference uses a centered confirmation state. */
.pg__hero--plain .pg__heroin{grid-template-columns:1fr}
.pg__hero--plain .pg__herotx{padding-bottom:40px}
.tx__mark{width:74px;height:74px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.tx__mark:after{content:"";width:26px;height:14px;border-left:4px solid #1a3365;border-bottom:4px solid #1a3365;transform:rotate(-45deg);margin-top:-6px}
.tx__what,.tx__intro{text-align:center}
.tx__what{font-size:19px;line-height:1.55;color:var(--ink);margin:0 0 6px;font-weight:700}
.tx__intro{max-width:52ch;margin-left:auto;margin-right:auto}
.tx__note{font-size:15px;line-height:1.7;color:var(--text);margin:18px 0 0;max-width:60ch;text-align:center}
.tx__note a{display:inline-block;padding:5px 3px;font-weight:700}
@media (min-width:768px){
.pg__hero--plain .pg__herotx{padding:64px 44px 60px;max-width:760px;margin:0 auto;text-align:center}
.pg__hero--plain .pg__eyebrow{justify-content:center}
.pg__hero--plain .pg__herorule{margin-left:auto;margin-right:auto}
.pg__hero--plain h1{max-width:none}
.pg__hero--plain .pg__herotx p{margin-left:auto;margin-right:auto}
}
@media (min-width:900px){
.tx__mark{width:84px;height:84px}
.pg--thankyou .pg__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px){
.shp__terms{grid-template-columns:repeat(3,1fr)}
.shp__calc{padding:24px 22px}
/* Поле под пять цифр не должно быть шириной в сотню знаков: на большом
экране строка ввода держит свой размер, а не размер секции. */
.shp__row{max-width:430px}
/* Строки итога тоже держим собранными: растянутые через всю секцию, они
разводят подпись и значение так далеко, что глазу нечем их связать. */
.shp__out{max-width:680px}
.shp__row input{height:62px;font-size:18px}
.shp__row button{min-height:62px;padding:0 30px;font-size:18px}
.shp__total b{font-size:40px}
}
/* jf-legal-css */
.lg__num{display:flex;gap:14px;align-items:baseline;margin:0 0 8px}
.lg__num b{font-family:'Archivo','Arial Narrow',Helvetica,sans-serif;font-size:15px;font-weight:900;
color:#8a6528;letter-spacing:.06em;flex:0 0 auto}
.lg__block{padding:24px 0;border-top:1px solid var(--line)}
.lg__block:first-of-type{border-top:0;padding-top:0}
.lg__block ul{margin:12px 0 0;padding:0 0 0 20px}
.lg__block li{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 8px;max-width:62ch}
.field-error{display:block;margin:6px 0 0;color:#a52a2a;font-size:13px;font-weight:700;line-height:1.35;text-transform:none;letter-spacing:0}
.pg__field input.is-invalid,.pg__field textarea.is-invalid,.vd__form input.is-invalid,.vd__form textarea.is-invalid{border-color:#a52a2a!important;box-shadow:0 0 0 3px rgba(165,42,42,.12)}
.toast{position:fixed;z-index:9800;right:20px;bottom:20px;max-width:min(420px,calc(100vw - 40px));padding:15px 18px;background:#1a3365;color:#fff;border-left:4px solid #ca9e66;box-shadow:0 12px 32px rgba(10,18,38,.28);font:600 15px/1.45 'IBM Plex Sans',sans-serif;opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s ease}
.toast.is-visible{opacity:1;transform:none}
@media (min-width:900px){
.lg__block{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0 48px;
align-items:start;padding:28px 0}
.lg__block > .lg__num{grid-column:1;margin:0}
.lg__block > *:not(.lg__num){grid-column:2}
}