/**
* Proffys — вёрстка темы.
*
* Источник: _work/maket-blok-1-v4.html. Служебное из макета сюда не переносится:
* плашка .note, кнопки .acfbtn, подсветка body.show-acf и заглушки .stub.
*
* Mobile First: базовые правила — телефон, дальше три брейкпоинта 480/720/1000.
* Порог 1000px разделяет два режима шапки: до него бургер и липкая панель
* телефона, от него — меню офферов в строку и панель не нужна.
*/
:root{
--ink:#10233d; --ink-soft:#4a5b72; --line:#d3dde8;
--page:#e6ebf1; /* фон страницы */
--bg:#f7f9fc; /* фон блоков и карточек */
--bg-soft:#eaeff6; /* подложки внутри блоков */
--hair:#e2e8f0; /* тонкие разделители */
--brand:#0f4c8a; --brand-deep:#0a2b4d;
--accent:#ff6a13; --ok:#12855a;
--pad:16px; --sticky-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--ink);background:var(--page);line-height:1.5;-webkit-font-smoothing:antialiased;
padding-bottom:calc(var(--sticky-h) + 8px)}
body.locked{overflow:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
/* ---------- шапка ---------- */
.hdr{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:30}
/* На телефоне верхняя строка шапки — сетка в две строки: кнопка меню слева
на обе строки, справа логотип с названием, под ними телефон. Колонка текста
забирает остаток ширины, а название при нехватке места переносится, поэтому
раскладка не опирается на его длину. От 480px — одна строка, телефон справа. */
.hdr__top{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;
gap:2px 10px;padding-top:9px;padding-bottom:9px}
.hdr__top .burger{grid-column:1;grid-row:1 / 3}
.hdr__top .brand{grid-column:2 / 4;grid-row:1;align-self:end}
.hdr__top .brandname{white-space:normal;overflow-wrap:break-word}
.hdr__tel{grid-column:2 / 4;grid-row:2;align-self:start}
.burger{flex:none;width:36px;height:36px;border:1px solid var(--line);
border-radius:9px;display:grid;place-items:center;cursor:pointer;padding:0;background:var(--bg)}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;
background:var(--ink);border-radius:2px}
.burger span::before{top:-5px}.burger span::after{top:5px}
/* Логотип и название — одна ссылка. Размер картинки задан здесь обоими
измерениями: атрибуты width и height в разметке — презентационная подсказка,
то есть фактически жёсткая высота, и без явного правила картинка вышла бы
в натуральные 520 точек. */
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.mark{flex:none;display:block;width:30px;height:30px;object-fit:contain}
.brandname{font-size:15.5px;font-weight:800;color:var(--brand);letter-spacing:-.01em;
line-height:1.1;white-space:nowrap}
.hdr__tel a{display:block;font-weight:800;font-size:16.5px;color:var(--ink);text-decoration:none;
white-space:nowrap;letter-spacing:-.02em}
.hdr__bottom{display:flex;align-items:flex-start;gap:10px;padding-bottom:9px;font-size:12.5px;
color:var(--ink-soft)}
.citybtn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
font:inherit;color:var(--brand);cursor:pointer;border-bottom:1px dashed rgba(15,76,138,.45);
align-self:flex-start}
/* Город без переключения — на страницах авторов. Тот же блок, но не кнопка:
ни пунктира, ни курсора-руки. Страницы авторов удалены 16.09, и сейчас
класс не выводится. */
.citybtn--plain{color:var(--ink-soft);border-bottom:0;cursor:auto}
.hours{margin-left:auto;text-align:right;line-height:1.4}
.hours i{font-style:normal}
.hours b{font-weight:700;color:var(--ink)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
box-shadow:0 0 0 3px rgba(18,133,90,.16);margin-right:4px;vertical-align:middle}
.nav{display:none}
/* Выпадающий список «Ещё» в меню шапки. Открывается без JS: :hover для мыши,
:focus-within для клавиатуры — кнопка внутри получает фокус табом.
Само меню показывается только от 1000px, поэтому на телефоне списка нет. */
.nav__more{position:relative}
.nav__more-btn{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;
background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;white-space:nowrap}
.nav__more-btn svg{transition:transform .2s}
.nav__more:hover .nav__more-btn svg,
.nav__more:focus-within .nav__more-btn svg{transform:rotate(180deg)}
.nav__drop{position:absolute;top:100%;left:-12px;min-width:250px;padding:6px;
background:var(--bg);border:1px solid var(--line);border-radius:11px;
box-shadow:0 12px 30px rgba(16,35,61,.14);z-index:31;
opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s}
.nav__more:hover .nav__drop,
.nav__more:focus-within .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop a{display:block;padding:8px 10px;border-radius:8px;font-size:14.5px;
color:var(--ink);text-decoration:none;white-space:nowrap}
.nav__drop a:hover{background:var(--bg-soft);color:var(--brand)}
/* ---------- первый экран ---------- */
.hero{background:linear-gradient(150deg,#0a2b4d 0%,#123f6b 55%,#0f4c8a 100%);color:#fff;
position:relative;overflow:hidden;padding:22px 0 26px}
.hero__art{position:absolute;right:-36px;bottom:-20px;width:172px;opacity:.16;pointer-events:none}
.hero__grid{position:relative}
/* Логотип марки, брендовый шаблон. Ширина в половину экрана телефона —
ориентир, а не привязка: с полями страницы фактическая ширина выходит
180-200px, и это лучше по резкости — исходники у владельца 300px шириной,
и чем уже вывод, тем меньше растягивание.
height:auto обязателен: у ![]()
стоят атрибуты width/height, а они
презентационные подсказки, то есть фактически height:200px. Без auto
логотип вывелся бы в натуральную высоту. */
.hero__logo{margin:0 0 12px}
.hero__logo img{display:block;width:52%;max-width:220px;height:auto;
padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.93)}
.hero h1{font-size:26px;line-height:1.18;letter-spacing:-.02em;margin:0 0 9px;font-weight:800}
.hero__motiv{font-size:15.5px;color:#c6d8ea;margin:0;max-width:44em}
.facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.facts li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18)}
.facts .ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.facts b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.facts em{display:block;font-style:normal;font-size:12.5px;color:#b9cee3;line-height:1.3}
.hero__cta{display:none;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
font-weight:700;text-decoration:none;padding:14px 22px;font-size:16px;border:1px solid transparent;
cursor:pointer;font-family:inherit}
.btn--call{background:var(--accent);color:#fff}
.btn--form{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
/* ---------- шаги ---------- */
.sect{padding:26px 0 4px}
.sect h2{font-size:20px;margin:0 0 4px;font-weight:800;letter-spacing:-.01em}
.sect__lead{margin:0 0 14px;color:var(--ink-soft);font-size:14.5px}
.steps__grid{display:grid;gap:10px}
.step{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);
border-radius:11px;background:var(--bg)}
.step__ic{flex:none;position:relative;width:38px;height:38px;border-radius:50%;
background:var(--brand);display:grid;place-items:center}
.step__ic i{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;
background:#fff;border:1px solid var(--line);color:var(--brand);font-style:normal;
font-size:10.5px;font-weight:800;line-height:1;display:grid;place-items:center}
.step b{display:block;font-size:14.5px;line-height:1.25}
.step em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-soft);line-height:1.35}
/* ---------- витрина неисправностей ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{display:flex;flex-direction:column;gap:8px;padding:14px 12px 12px;border:1px solid var(--line);
border-radius:12px;background:var(--bg);text-decoration:none;color:inherit;transition:.15s}
.card:hover{border-color:#b9cfe6;box-shadow:0 6px 18px rgba(16,35,61,.07);transform:translateY(-1px)}
.card__ic{width:46px;height:46px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line);
display:grid;place-items:center}
.card__t{font-size:14.5px;font-weight:700;line-height:1.22;letter-spacing:-.01em}
.card__p{margin-top:auto;font-size:15px;font-weight:800;color:var(--brand)}
.card__p small{font-weight:600;color:var(--ink-soft);font-size:12px}
/* Пояснение под заголовком карточки — там, где карточка не ведёт на страницу
и объяснить тезис больше негде. Прижато к низу, как цена в витрине:
в ряду карточек заголовки тогда стоят на одной линии. */
.card__note{margin-top:auto;font-size:13px;color:var(--ink-soft);line-height:1.4}
/* Карточка без ссылки — витрина на виртуальной странице. Подсветка наведения
там обещала бы переход, которого нет; курсор остаётся обычным сам,
потому что это , а не
. */
.card--static:hover{border-color:var(--line);box-shadow:none;transform:none}
/* полный прайс-лист в спойлере */
.price{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.price>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
gap:9px;padding:14px;font-weight:700;font-size:15px;color:var(--brand);background:var(--bg)}
.price>summary::-webkit-details-marker{display:none}
.price>summary svg{transition:transform .2s}
.price[open]>summary{border-bottom:1px solid var(--line)}
.price[open]>summary svg{transform:rotate(180deg)}
.price__note{padding:11px 14px 0;font-size:12.5px;color:var(--ink-soft)}
.ptab{width:100%;border-collapse:collapse;font-size:14px}
.ptab caption{caption-side:top;text-align:left;padding:12px 14px 8px;font-weight:800;font-size:15px}
.ptab th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-soft);font-weight:600;padding:6px 14px;background:var(--bg-soft);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ptab th:last-child{text-align:right}
.ptab td{padding:9px 14px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.35}
.ptab td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--ink)}
.ptab tr:last-child td{border-bottom:0}
.ptab tr.sec td{background:#e1e8f1;font-weight:800;padding-top:11px;padding-bottom:11px;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ptab tr.sec td:last-child{color:var(--brand)}
.ptab tr.sub td:first-child{padding-left:26px;color:var(--ink-soft)}
/* ---------- баннер скидки ---------- */
.promo{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;
background:linear-gradient(150deg,#0a2b4d 0%,#123f6b 70%);color:#fff}
.promo__val{font-size:34px;font-weight:800;letter-spacing:-.03em;color:#ffb27a;line-height:1}
.promo__txt b{display:block;font-size:16px;font-weight:800;line-height:1.25}
.promo__txt em{display:block;font-style:normal;font-size:13px;color:#bcd2e8;margin-top:3px;line-height:1.35}
.promo__btn{align-self:flex-start}
/* ---------- бренды ---------- */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
/* display:block, а не grid с place-items:center, как было в макете: центровка
там держала текстовый , которого больше нет. У блочного потомка
height:100% разрешается от фиксированной высоты ячейки; у элемента грида
с авто-строкой — нет, и картинка вылезала из ячейки на 33px. Замерено. */
.logos .logo{display:block;height:56px;padding:6px;border:1px solid var(--line);
border-radius:10px;background:var(--bg);text-decoration:none;transition:.15s}
.logos .logo:hover{border-color:#b9cfe6}
/* Ячейка 56px минус padding 6 — 44px под логотип; contain вписывает файл
500×200 без искажения. */
.logos .logo img{display:block;width:100%;height:100%;object-fit:contain}
.abc{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.abc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
gap:9px;padding:13px;font-weight:700;font-size:14.5px;color:var(--brand)}
.abc>summary::-webkit-details-marker{display:none}
.abc>summary svg{transition:transform .2s}
.abc[open]>summary{border-bottom:1px solid var(--line)}
.abc[open]>summary svg{transform:rotate(180deg)}
.abc__body{padding:14px;columns:2;column-gap:18px}
.abc__grp{break-inside:avoid;margin:0 0 12px}
.abc__ch{display:block;font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.08em;
padding:0 0 4px;border-bottom:1px solid var(--hair);margin-bottom:5px}
.abc__grp ul{list-style:none;margin:0;padding:0}
.abc__grp li{margin:0 0 2px}
.abc__grp a{color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.45}
.abc__grp a:hover{color:var(--brand)}
/* ---------- марка на виртуальной странице ---------- */
/* На телефоне колонка, от 720px строка — тот же приём, что у .promo:
логотип в 150px и текст рядом на узком экране не помещаются.
height:auto обязателен: у ![]()
стоят атрибуты width/height, а они
презентационные подсказки, то есть фактически height:200px. Без auto
логотип вывелся бы в натуральную высоту (ловушка в CLAUDE.md). */
.brandcard{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:14px 16px;
border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.brandcard__logo{flex:none;width:150px;padding:9px 11px;border-radius:9px;
border:1px solid var(--hair);background:var(--page)}
.brandcard__logo img{display:block;width:100%;height:auto}
.brandcard__txt b{display:block;font-size:16px;font-weight:800;line-height:1.25}
.brandcard__txt em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-soft);
margin-top:4px;line-height:1.4}
.brandcard__txt a{display:inline-block;margin-top:7px;font-size:13.5px;font-weight:600;
color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(15,76,138,.3)}
/* ---------- цена работы на виртуальной странице ---------- */
/* Сумма и рамка разнесены: сумма может не выводиться вовсе — позиции нет
в прайсе, и печатать нечего. Рамка при этом остаётся, поэтому она не
опирается на соседа ни отступом, ни рамкой. */
.vprice{margin-top:14px;border:1px solid var(--line);border-radius:12px;
background:var(--bg);overflow:hidden}
.vprice__sum{padding:14px 16px;border-bottom:1px solid var(--hair);background:var(--bg-soft);
font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--brand);line-height:1}
.vprice__sum small{font-size:14px;font-weight:600;color:var(--ink-soft);letter-spacing:0}
.vprice__body{padding:13px 16px 15px}
.vprice__body b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-soft);font-weight:700;margin-bottom:3px}
.vprice__body p{margin:0 0 11px;font-size:14px;line-height:1.5}
.vprice__body p:last-child{margin-bottom:0}
/* ---------- мастера ---------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.team figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
/* Пропорция 3/4, а не 4/3 как у прежней заглушки: файлы портретные, и обрезка
до альбомной срезала бы у третьего и четвёртого кадра половину раскладки.
height:auto обязателен. Атрибут height="800" в разметке — презентационная
подсказка, равная height:800px, а aspect-ratio работает только когда
размер по этой оси auto. Без сброса снимки выводятся в натуральные 800px
высоты и ломают сетку. Замерено в браузере. */
.team img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.team figcaption{padding:9px 11px;font-size:12.5px;color:var(--ink-soft);line-height:1.35}
/* ---------- статья ---------- */
.article{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.article h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.article p{margin:0 0 9px;font-size:14.5px;line-height:1.6}
.article p:last-child{margin-bottom:0}
/* ---------- текст обычной страницы ---------- */
/* Содержимое приходит из админки готовой разметкой, поэтому оформление
вешается на теги внутри .doc, а не на классы: своих классов у этого текста
нет и не будет.
Ширина колонки задана в em, то есть считается от размера шрифта: мерка
читаемости — число знаков в строке, а не точки. На всю ширину .wrap
(1180px) строка политики конфиденциальности выходит вдвое длиннее того,
что глаз держит без потери строки.
Замер в браузере: 42em давали 94 знака в строке, 36em дают 80 — верхняя
граница того, что глаз держит, не теряя начала следующей строки.
Размеры базовые, телефонные; крупнее они становятся в медиа от 720px. */
.doc{max-width:36em}
.doc>:first-child{margin-top:0}
.doc>:last-child{margin-bottom:0}
.doc h2{margin:22px 0 8px;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.doc h3{margin:18px 0 7px;font-size:16.5px;font-weight:800;line-height:1.3}
.doc p{margin:0 0 12px;font-size:15px;line-height:1.65}
.doc ul,.doc ol{margin:0 0 12px;padding-left:20px}
.doc li{margin:0 0 6px;font-size:15px;line-height:1.6}
.doc li:last-child{margin-bottom:0}
.doc a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(15,76,138,.3)}
.doc a:hover{border-bottom-color:var(--brand)}
.doc strong,.doc b{font-weight:700}
.doc blockquote{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--brand);
border-radius:0 10px 10px 0;background:var(--bg);color:var(--ink-soft)}
/* Картинке из содержимого нужен height:auto: у вставленных редактором ![]()
стоят атрибуты width и height, а они презентационные подсказки, то есть
фактически жёсткая высота. Без auto картинка выводится в натуральный
размер и вылезает из колонки. */
.doc img{max-width:100%;height:auto}
.doc table{width:100%;margin:0 0 12px;border-collapse:collapse;font-size:14px}
.doc th,.doc td{padding:9px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.doc th{background:var(--bg-soft);font-weight:700}
/* Телефон вместо формы — там, где направления ServiceLead нет. */
.leadform__call{margin:14px 0 0}
/* ---------- районы выезда ---------- */
.geo{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.geo__row{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid var(--hair);
font-size:14px}
.geo__row:last-child{border-bottom:0}
.geo__row b{font-weight:600}
.geo__row span{margin-left:auto;white-space:nowrap;font-weight:700;color:var(--ok);font-size:13.5px}
.geo__row span.pay{color:var(--ink-soft)}
.geo__map{border-bottom:1px solid var(--hair);padding:12px 14px}
/* Картинка зон приходит из шорткодера; в макете на её месте стоял SVG. */
.geo__map img{width:100%;height:auto;display:block;border-radius:9px;border:1px solid var(--hair)}
.geo__grp{padding:11px 14px;border-bottom:1px solid var(--hair)}
.geo__grp b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-soft);font-weight:700;margin:0 0 4px}
.geo__grp p{margin:0;font-size:13.5px;line-height:1.5}
.geo__note{padding:11px 14px;font-size:12.5px;color:var(--ink-soft);background:var(--bg-soft);
border-top:1px solid var(--hair)}
/* ---------- форма в теле ---------- */
.leadform{display:none;margin-top:14px;padding:20px 24px;border:1px solid var(--line);
border-radius:14px;background:var(--bg)}
.leadform__grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.leadform .field{margin:0}
/* Пока ответа нет, абзац пуст и раздвигает блок формы на 6 точек. */
.leadform__result:empty{display:none}
/* ---------- перелинковки ---------- */
.links{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:14px}
.links h3{margin:0 0 10px;font-size:15px;font-weight:800}
.links__grid{display:flex;flex-wrap:wrap;gap:6px}
.links__grid a{display:inline-block;padding:6px 10px;border:1px solid var(--hair);border-radius:8px;
font-size:13px;color:var(--ink);text-decoration:none;line-height:1.3;background:var(--page)}
.links__grid a:hover{border-color:#b9cfe6;color:var(--brand)}
.links__grid--price a{padding:8px 11px;line-height:1.3}
.links__grid--price b{display:block;font-weight:600;font-size:13px}
.links__grid--price span{display:block;font-size:12px;font-weight:700;color:var(--brand);margin-top:2px}
/* ---------- галерея работ ---------- */
/* Снимков семь — простое число, ровной сетки из них не выходит ни при двух
колонках, ни при трёх. На узком экране это лента с прокруткой вбок и
прилипанием, от 720px — ряд из семи, который заполняется целиком. */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:10px;margin-top:14px;
overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
padding-bottom:4px}
.gallery__item{display:block;scroll-snap-align:start;border:1px solid var(--line);
border-radius:11px;overflow:hidden;background:var(--bg);line-height:0;transition:.15s}
.gallery__item:hover{border-color:#b9cfe6;box-shadow:0 6px 18px rgba(16,35,61,.07)}
.gallery__item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* ---------- лайтбокс ---------- */
.lightbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
z-index:50;opacity:0;visibility:hidden;transition:.2s;width:min(94vw,1100px);
display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.lightbox__img{max-width:100%;max-height:78vh;border-radius:12px;display:block;
background:var(--bg);box-shadow:0 18px 50px rgba(10,35,61,.45)}
.lightbox__caption{color:#e6eef7;font-size:13.5px;text-align:center;line-height:1.4}
.lightbox__close{position:absolute;top:-38px;right:0;width:32px;height:32px;padding:0;
border:1px solid rgba(255,255,255,.35);border-radius:8px;background:transparent;
color:#fff;font-size:20px;line-height:1;cursor:pointer;font-family:inherit}
/* ---------- подвал ---------- */
.foot{margin-top:26px;background:var(--brand-deep);color:#c6d8ea;padding:22px 0 26px}
.foot__grid{display:grid;gap:18px}
.foot h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#8fb0d0;font-weight:700}
.foot h4 a{display:inline;color:inherit;font-size:inherit;margin:0}
.foot h4 a:hover{color:#fff}
.foot a{color:#e6eef7;text-decoration:none;font-size:14px;display:block;margin:0 0 5px}
.foot a:hover{color:#fff}
.foot__tel{font-size:22px;font-weight:800;color:#fff!important;margin-bottom:4px!important}
.foot__small{font-size:12.5px;line-height:1.5;color:#8fb0d0}
.foot__copy{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.13);
font-size:12.5px;color:#7fa0c2}
/* нижняя часть подвала: ссылки, cookie, дисклеймер */
.foot__links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:20px;padding-top:16px;
border-top:1px solid rgba(255,255,255,.13)}
.foot__links a{margin:0;font-size:13.5px}
.foot__cookie{margin-top:16px;display:grid;gap:14px}
.foot__cookie-text{margin:0;font-size:12px;line-height:1.55;color:#8fb0d0}
.foot__adress{font-size:13px;line-height:1.7;color:#c6d8ea}
.foot__adress span{color:#8fb0d0}
.foot__adress a{display:inline;color:#e6eef7;margin:0;font-size:13px}
.foot__legal{margin-top:16px}
.foot__legal p{margin:0;font-size:11.5px;line-height:1.55;color:#7fa0c2}
/* ---------- распространённые проблемы ---------- */
.faqs{display:grid;gap:8px;margin-top:14px}
.faq{border:1px solid var(--line);border-radius:11px;background:var(--bg);overflow:hidden}
.faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
padding:13px 14px;font-weight:700;font-size:15px;line-height:1.25}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary svg{margin-left:auto;flex:none;color:var(--brand);transition:transform .2s}
.faq[open]>summary{border-bottom:1px solid var(--hair)}
.faq[open]>summary svg{transform:rotate(180deg)}
.faq__body{padding:12px 14px 14px}
.faq__body p{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.faq__body p b{color:var(--ink)}
.faq__no b{color:#a8442f}
.faq__link{display:inline-block;margin-top:2px;font-size:14px;font-weight:600;color:var(--brand);
text-decoration:none;border-bottom:1px solid rgba(15,76,138,.3)}
/* ---------- блок «Что чиним» ---------- */
/* До 720px плитки переносятся по строкам: в строку встаёт столько, сколько помещается
при ширине от 140px, но плитка не сжимается уже своего самого длинного слова.
Длинная подпись («Полуавтоматические») забирает строку целиком вместо того,
чтобы выталкивать колонки за край. От 720px — прежняя сетка в четыре колонки. */
.tiles{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tiles li{flex:1 1 140px}
.tiles a{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);
border-radius:10px;background:var(--bg);color:var(--ink);text-decoration:none;font-size:14px;
font-weight:600;line-height:1.25;transition:.15s;height:100%}
.tiles a:hover{border-color:#b9cfe6;color:var(--brand)}
.tiles svg{flex:none;opacity:.55}
.cross{margin:14px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.cross a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(15,76,138,.28)}
.cross a:hover{border-bottom-color:var(--brand)}
/* ---------- липкая панель ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(243,246,250,.96);
backdrop-filter:blur(6px);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(16,35,61,.07);
height:var(--sticky-h);display:flex;align-items:center;gap:10px;padding:0 var(--pad)}
.sticky__call{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:17px;
height:46px;border-radius:9px}
.sticky__form{flex:none;display:flex;align-items:center;justify-content:center;height:46px;
padding:0 16px;border-radius:9px;border:1px solid var(--brand);color:var(--brand);
text-decoration:none;font-weight:600;font-size:15px;background:var(--bg);cursor:pointer;font-family:inherit}
/* ---------- кнопка «наверх» ---------- */
/* Низ считается от высоты липкой панели, а не подбирается на глаз: панель
держит кнопку звонка, телефон — основной канал (правило 4), и перекрывать
её нельзя ни одним пикселем. Слой ниже оверлея (40), чтобы не торчать
поверх открытой модалки. Скрытие тем же приёмом, что у .ov. */
.totop{position:fixed;right:var(--pad);bottom:calc(var(--sticky-h) + 12px);z-index:24;
width:48px;height:48px;padding:0;border:0;border-radius:50%;
background:var(--brand);cursor:pointer;display:grid;place-items:center;
box-shadow:0 4px 14px rgba(16,35,61,.18);opacity:0;visibility:hidden;transition:.2s}
.totop.on{opacity:1;visibility:visible}
/* ---------- меню и модалки ---------- */
.ov{position:fixed;inset:0;background:rgba(10,35,61,.55);z-index:40;opacity:0;visibility:hidden;transition:.2s}
.ov.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(84vw,330px);background:var(--bg);z-index:50;
transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer__top{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.xbtn{margin-left:auto;width:32px;height:32px;border:1px solid var(--line);background:var(--bg);
border-radius:8px;cursor:pointer;font-size:17px;line-height:1;color:var(--ink-soft);padding:0}
.drawer nav{overflow:auto;padding:6px 0}
.drawer nav a{display:block;padding:11px 14px;text-decoration:none;color:var(--ink);font-size:15px;
border-bottom:1px solid var(--hair)}
.drawer__foot{margin-top:auto;padding:14px;border-top:1px solid var(--line)}
.drawer__foot a{font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;display:block}
.drawer__foot span{font-size:12.5px;color:var(--ink-soft)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);width:min(94vw,620px);
max-height:84vh;overflow:auto;background:var(--bg);border-radius:14px;z-index:50;opacity:0;visibility:hidden;
transition:.2s;box-shadow:0 18px 50px rgba(10,35,61,.3)}
.modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.modal__top{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal__top b{font-size:16px}
.modal__body{padding:14px 16px 18px}
.cities{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;list-style:none;margin:0;padding:0}
.cities a{display:block;padding:7px 0;color:var(--ink);text-decoration:none;font-size:14.5px;
border-bottom:1px solid var(--hair)}
.cities a.is-current{color:var(--brand);font-weight:700}
.field{display:block;margin:0 0 10px}
.field span{display:block;font-size:13px;color:var(--ink-soft);margin:0 0 4px}
.field input{width:100%;height:46px;border:1px solid var(--line);border-radius:9px;padding:0 12px;background:#fcfdfe;
font-size:16px;font-family:inherit;color:var(--ink)}
.modal .btn--call{width:100%;margin-top:4px}
.consent{font-size:12px;color:var(--ink-soft);margin:10px 0 0}
/* ---------- адаптив ---------- */
@media (min-width:480px){
.hdr__top{display:flex;gap:10px}
.hdr__tel{margin-left:auto;text-align:right}
.hero h1{font-size:30px}
.facts{grid-template-columns:1fr 1fr}
.facts li:first-child{grid-column:1 / -1}
.steps__grid{grid-template-columns:1fr 1fr}
.cities{grid-template-columns:repeat(3,1fr)}
.cards{grid-template-columns:repeat(3,1fr)}
.logos{grid-template-columns:repeat(4,1fr)}
.abc__body{columns:3}
}
@media (min-width:720px){
:root{--pad:28px}
.doc h2{font-size:22px;margin-top:26px}
.doc h3{font-size:18px;margin-top:20px}
.doc p,.doc li{font-size:15.5px}
.brandname{font-size:19px}
.mark{width:36px;height:36px}
.hdr__tel a{font-size:22px}
.hero{padding:30px 0 34px}
.hero h1{font-size:35px}
.hero__motiv{font-size:17px}
.facts{grid-template-columns:repeat(3,1fr)}
.facts li:first-child{grid-column:auto}
.steps__grid{grid-template-columns:repeat(4,1fr)}
.step{flex-direction:column}
.cities{grid-template-columns:repeat(4,1fr)}
.sect h2{font-size:23px}
.card__ic{width:52px;height:52px}
.card__t{font-size:15.5px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.logos{grid-template-columns:repeat(5,1fr)}
.hero__logo img{max-width:260px}
.brandcard{flex-direction:row;align-items:center;gap:18px;padding:16px 20px}
.promo{flex-direction:row;align-items:center;gap:20px;padding:20px 24px}
.promo__val{font-size:44px}
.promo__txt{flex:1}
.promo__btn{align-self:auto}
.abc__body{columns:4;padding:18px}
.faqs{grid-template-columns:1fr 1fr;align-items:start}
.team{grid-template-columns:repeat(4,1fr)}
.gallery{grid-auto-flow:row;grid-template-columns:repeat(7,1fr);overflow:visible;
scroll-snap-type:none;padding-bottom:0}
/* Колонок столько, сколько разделов плюс контакты: первая задана явно и шире,
остальные достраиваются сеткой по фактическому числу. */
.foot__grid{grid-template-columns:1.2fr;grid-auto-columns:1fr;grid-auto-flow:column}
.foot__cookie{grid-template-columns:2fr 1fr;gap:28px}
.article{padding:24px 28px}
.article h3{font-size:20px}
.article p{font-size:15.5px}
}
@media (min-width:1000px){
body{padding-bottom:0}
.sticky{display:none}
/* Панели здесь нет, и кнопке «наверх» не над чем подниматься. */
.totop{bottom:20px}
/* Форма в теле показывается там, где липкой панели уже нет:
два способа оставить заявку на одном экране не нужны. */
.leadform{display:block}
.burger{display:none}
.hdr__top{padding-top:14px;padding-bottom:14px}
.nav{display:flex;gap:20px;margin-left:26px}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap}
.hero{padding:46px 0 50px}
.hero h1{font-size:41px;line-height:1.1}
.hero__grid{max-width:64%}
.hero__art{width:300px;right:2%;bottom:-30px;opacity:.2}
.hero__cta{display:flex}
.cards{grid-template-columns:repeat(3,1fr);gap:14px}
.card{padding:18px 16px 16px}
}