/* АВТО-ПОЛИШ масс-сайт — дизайн-токены см. work/brand-mass.md
   Холст #F9FAFB (как на главной, см. --bg в scripts/tw-input.css), карточки #FFF,
   секции #F4F5F6, текст #131313, действие #D9232A (hover #C81E24),
   фирменная графика #EE292A, радиусы 24/16/12, кнопки-пилюли, тени лёгкие. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:#F9FAFB;color:#131313;line-height:1.6;font-size:var(--fs-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:#D9232A;text-decoration:none}
a:hover{color:#C81E24}
::selection{background:rgba(238,41,42,.16)}
/* один в один с .sc-wrap из chrome.css и с контейнером главной (max-w-7xl + px-6):
   было 1240/48 — контент внутренних оказывался на 88px уже собственной шапки */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}

/* ---------- кнопки ---------- */
.btn,a.button,a.button-4,.button-44 a,a.btn-form{display:inline-block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);background:#D9232A;color:#fff;padding:14px 30px;border-radius:100px;cursor:pointer;border:none;text-align:center}
.btn:hover,a.button:hover,a.button-4:hover{background:#C81E24;color:#fff}
.btn-ghost{display:inline-block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;border:1px solid #767A80;padding:13px 26px;border-radius:100px}
.btn-ghost:hover{border-color:#131313;color:#131313}
.btn-line{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#D9232A}

/* ---------- хлебные крошки ---------- */
.crumbs{background:#F4F5F6;border-bottom:1px solid #E7E8EA}
.crumbs .wrap{padding-top:11px;padding-bottom:11px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:var(--fs-small)}
.breadcrumb li{color:#5F6368}
.breadcrumb li+li:before{content:"/";margin-right:8px;color:#C4C6C9}
.breadcrumb a{color:#3C4043}
.breadcrumb a:hover{color:#D9232A}

/* ---------- контент (перенос со старого сайта) ---------- */
.page-main{min-height:40vh}
.content{padding-top:clamp(30px,4vw,48px);padding-bottom:clamp(40px,6vw,72px)}
.content h1{font-family:'Montserrat';font-weight:800;font-size:var(--fs-display);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
.content h2,.content .h2{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.01em;margin:34px 0 14px}
.content h3{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h3);margin:26px 0 10px}
.content h4,.content h5{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h3);margin:22px 0 8px}
.content .h3{font-size:var(--fs-body);color:#5F6368;margin:4px 0 14px}
.content p{font-size:var(--fs-body);color:#3C4043;margin:0 0 14px}
.content li{color:#3C4043}
.content ul:not([class]){padding-left:22px;margin:0 0 14px}
.ul-list{list-style:none;margin:0 0 16px;display:grid;gap:8px}
.ul-list li{position:relative;padding-left:22px;font-size:var(--fs-body)}
.ul-list li:before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;background:#EE292A}
.content img{border-radius:12px}

.content h1,.content h2,.content h3{scroll-margin-top:96px}   /* шапка sticky — якорь не должен уезжать под неё */

/* оглавление длинного прайса */
.price-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.price-nav a{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#3C4043;background:#F4F5F6;
  border:1px solid #E7E8EA;border-radius:100px;padding:8px 16px}
.price-nav a:hover{border-color:#D9232A;color:#D9232A}

/* таблицы цен */
/* Широкая таблица цен листается вбок — полосу видно всегда, как и у лент.
   Одно правило на оба места, чтобы прокрутка на сайте выглядела одинаково. */
.table-wrap{overflow-x:auto;margin:0 0 18px;
  scrollbar-width:thin;scrollbar-color:#C4C6C9 #F1F2F4}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-track{background:#F1F2F4;border-radius:100px}
.table-wrap::-webkit-scrollbar-thumb{background:#C4C6C9;border-radius:100px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:#8A8F94}
.content table{width:100%;min-width:420px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden;font-size:var(--fs-body)}
.content td,.content th{padding:12px 18px;border-bottom:1px solid #E7E8EA;text-align:left;color:#3C4043}
.content tr:last-child td{border-bottom:none}
.content tr:first-child td,.content th{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;background:#F4F5F6}
.content td:last-child{font-family:'Montserrat';font-weight:600;color:#131313;white-space:nowrap}
/* колонка «Стоимость»: одинаковая ширина во всех двухколоночных таблицах,
   иначе ширину задаёт самый длинный заголовок услуги и цены гуляют от таблицы к таблице.
   :has() отсекает таблицы с 3+ колонками — у них своя разметка. */
.content table:not(:has(tr>*:nth-child(3))){table-layout:fixed}
.content table:not(:has(tr>*:nth-child(3))) th:last-child,
.content table:not(:has(tr>*:nth-child(3))) td:last-child{width:200px}
/* объединённая ячейка — это подзаголовок внутри таблицы, а не цена: не сжимать в строку */
.content td[colspan]{white-space:normal;text-align:center;background:#F4F5F6}
.content td h4{margin:0;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body)}

/* ---------- шапка блока «Примеры работ» ----------
   Фраза слева, ссылка прижата к правому краю. Раньше ссылка была красной
   кнопкой-таблеткой, вклеенной прямо в середину фразы: «Смотрите больше работ
   в нашем удобном [Портфолио]». Кнопка-действие тут не по адресу — это переход
   «посмотреть ещё», а не то, ради чего человек пришёл на страницу.

   Приём тот же, что на главной у пары «Наши услуги / Весь прайс».
   Специфичность .content .more-head .h3 — чтобы перебить .content .h3, у
   которого свои отступы. */
.more-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 20px;margin:0 0 16px}
.content .more-head .h3{margin:0;font-size:var(--fs-body);color:#5F6368}
.more-link{flex:none;font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption);
  letter-spacing:.14em;text-transform:uppercase;color:#D9232A;position:relative}
/* тап-зона до ~40px, не сдвигая соседей (см. .tap в scripts/tw-input.css) */
.more-link::after{content:'';position:absolute;inset:-10px -8px}
.more-link:hover{color:#C81E24;text-decoration:underline}

/* слайдеры (бывший owl-carousel) -> полоса со скроллом */
/* Лента листается вбок, и это должно быть видно без касания. Системная полоса
   прокрутки на macOS и iOS прячется до первого движения, и лента выглядит
   просто обрезанной картинкой — посетитель не догадывается, что там ещё есть.
   Держим тонкую полосу видимой всегда.

   Цвет серый, не фирменный: полоса — это орган управления, а не содержимое.
   Красной она перетягивала бы внимание с самих фотографий.

   Второй подсказкой работает сама раскладка: карточка шириной 82% ширины
   экрана, поэтому следующая всегда выглядывает краем. Этого и полосы хватает,
   стрелки-кнопки сверху не нужны. */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(400px,82%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 10px;margin:0 0 14px;
  scrollbar-width:thin;scrollbar-color:#C4C6C9 #F1F2F4}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-track{background:#F1F2F4;border-radius:100px}
.strip::-webkit-scrollbar-thumb{background:#C4C6C9;border-radius:100px}
.strip::-webkit-scrollbar-thumb:hover{background:#8A8F94}
.strip>div{scroll-snap-align:start;background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden}
.strip img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:0}
.owl-item-text{padding:10px 14px;font-size:var(--fs-small);color:#3C4043}

/* ---------- пара «до / после» ----------
   В зеркале это были две отдельные карточки подряд с подписями «"ДО" Капот
   Audi Q3» и «"ПОСЛЕ" Капот Audi Q3». Что к чему относится, приходилось
   догадываться, а кавычки вокруг слова — след старого редактора.

   Теперь пара — одна карточка: два кадра встык, между ними шов в два пикселя.
   Шов и есть то место, где видна разница, поэтому он единственное украшение
   здесь. Подпись одна на оба кадра — она и так была одинаковой.

   Метки «До» и «После» повторяют слайдер первого экрана главной: тёмная и
   красная #D9232A. Один язык на весь сайт, придумывать второй незачем.

   Перетаскиваемый слайдер, как на главной, сюда не годится: лента листается
   вбок, и жест перетаскивания дрался бы с её прокруткой. */
.ba-pair-shots{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#E7E8EA}
/* кадр без пары: тот же значок, но во всю ширину карточки */
.ba-pair-shots.ba-solo{grid-template-columns:1fr}
.strip .ba-solo .ba-half img{aspect-ratio:2/1}
.ba-half{position:relative;display:block;cursor:zoom-in}
.strip .ba-half img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0;display:block}
.ba-tag{position:absolute;left:8px;bottom:8px;
  font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:4px 10px;border-radius:100px;pointer-events:none}
.ba-tag-before{background:rgba(19,19,19,.78)}
.ba-tag-after{background:#D9232A}
/* на узком экране кадры мельчают вдвое — даём им больше высоты, чем 1:1 */
@media (max-width:520px){
  .strip .ba-half img{aspect-ratio:3/4}
  .ba-tag{left:6px;bottom:6px;padding:3px 8px;letter-spacing:.08em}
}

/* видео */
.video-embed{aspect-ratio:16/9;max-width:820px;border-radius:16px;overflow:hidden;background:#131313;margin:0 0 16px}
.video-embed iframe{width:100%;height:100%;border:0}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:0 0 18px}
.video-grid .video-embed{margin:0;max-width:none}

/* листинги портфолио и видео */
.block-portfolio,.block-photo{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:10px 0 22px}
.block-portfolio .item,.photo-item{background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(19,19,19,.05),0 14px 30px -22px rgba(19,19,19,.2)}
.block-portfolio .item img,.photo-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.block-portfolio .item a,.photo-item a{display:block;padding:12px 15px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;line-height:1.35}
.block-portfolio .item .img a,.photo-item .img a{padding:0}
/* Фотография заполняет карточку целиком, как в галерее на главной.
   Общее правило .item a{padding:12px 15px} нужно подписи, но доставалось и
   ссылке вокруг снимка: картинка оказывалась в белой рамке в 15 пикселей, и
   сетка портфолио выглядела рыхлой рядом с плотной сеткой главной.
   Сбрасываем у прямого потомка — подпись лежит глубже, в .block-text. */
.block-portfolio .item>a{padding:0}
.block-portfolio .item>a>span{display:block}
.block-portfolio .item a:hover,.photo-item a:hover{color:#D9232A}
.mse2_pagination{grid-column:1/-1}

/* ---------- кейс портфолио (334 стр.) ----------
   «слайдер» owl без JS был простынёй: N фото во всю ширину, страница до 30 000 px.
   aspect-ratio обязателен — в 88 кейсах портрет и ландшафт вперемешку. */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0 0 26px}
.items .item{margin:0}
.items .item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.portfolio-item-1{background:#F4F5F6;border:1px solid #E7E8EA;border-radius:16px;padding:22px clamp(18px,3vw,26px);margin:0 0 26px}
.portfolio-item-1 .content-title{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h3);margin:0 0 14px}
.portfolio-item-1 .content-title h2,.portfolio-item-1 .content-title h3{margin:0;font-size:inherit}
.list-number:not(.ul-list){list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px}
.list-number:not(.ul-list) li{display:flex;gap:11px;align-items:baseline;font-size:var(--fs-body);color:#3C4043}
.list-number .icon{flex:0 0 24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;background:#EE292A;color:#fff;font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption)}
.actual{font-size:var(--fs-body);color:#3C4043;margin:0 0 10px}
.actual:last-child{margin-bottom:0}
.justifyright{text-align:right;font-size:var(--fs-small);color:#5F6368}
.justifyfull{text-align:justify}
.portfolio-item-1+br,.block-portfolio-1>br{display:none}

/* листинги портфолио: подпись карточки лежит в .block-text, а не в самой ссылке */
/* Подпись идёт сразу за фотографией, а не прижимается к низу карточки.
   Было margin-top:auto — подписи в ряду выстраивались по одной линии, но
   ценой провала между снимком и его же подписью. По закону близости это
   читается как «подпись не отсюда»: расстояние до своей фотографии выходило
   больше, чем до края карточки. Выравнивать внизу нечего — ни цены, ни
   кнопки там нет, а границу ряда держит рамка, а не последняя строка. */
.block-portfolio .item .block-text{margin-top:0}
.block-portfolio .item .item-title a{padding:12px 15px 4px}
.block-portfolio .item .item-text{padding:0 15px 12px;font-size:var(--fs-small);color:#5F6368}
.block-portfolio .item .item-text:empty{display:none}

/* страница видео: плеер + подпись + «назад к списку» */
.video-wrap{margin:0 0 18px}
.block-news-detail .text>br{display:none}
.button-6{margin:22px 0 0}
.button-6 a{display:inline-block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);
  color:#131313;border:1px solid #767A80;padding:13px 26px;border-radius:100px}
.button-6 a:hover{border-color:#131313}
.photo-item{position:relative}
.photo-item .img a:after{content:"";position:absolute;inset:0}
.photo-text{padding:12px 15px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;line-height:1.35}
.photo-item:hover .photo-text{color:#D9232A}

/* FAQ -> details */
.faq-item{background:#fff;border:1px solid #E7E8EA;border-radius:14px;margin:0 0 10px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 20px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";font-size:var(--fs-h3);color:#D9232A;line-height:1;flex-shrink:0}
.faq-item[open] summary:after{content:"−"}
.faq-a{padding:0 20px 16px;font-size:var(--fs-body);color:#3C4043;line-height:1.6}

/* отзывы */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:14px 0 20px}
/* та же сетка, что у портфолио и каталога услуг: auto-fill без потолка колонки.
   Был auto-fit с максимумом 360px и центрированием — чтобы неполный последний ряд
   не растягивался; но тогда вся сетка стояла уже страницы и /reviews выбивалась
   из остальных разделов. auto-fill держит ширину колонки постоянной, поэтому
   хвост последнего ряда просто оставляет место справа, а карточки не разъезжаются. */
.block-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;margin:14px 0 20px}
/* карточки одного размера: высота фиксированная, текст подрезан до 8 строк,
   «Читать полностью» вешает reviews-more.js только там, где текст не поместился */

/* Шапка /reviews: заголовок слева, плашка с оценкой справа.
   Плашку собирает build-reviews.php, цифра считается по опубликованным отзывам.

   Плашка повторяет ту, что стоит в секции отзывов на главной, — не «похоже», а
   теми же величинами: 56 / 14 / 11 px, отступы 16×24, радиус 24, зазор 16 и её
   же тень. Переменные внутренних страниц дают ровно те же пиксели, что утилиты
   Tailwind на главной (--fs-display = 56px, --fs-small = 14px,
   --fs-caption = 11px), поэтому пишем через них: на узком экране плашка ужмётся
   вместе со всей типографикой, а не останется одна крупная.

   Шрифт числа — Manrope 800, чёрным и без трекинга. Пробовали набрать его
   Montserrat'ом с трекингом −0.04em и красным, как крупные числа главной
   (.stat-num, «11 лет», «3 точки»): вышло тяжелее и крикливее — оценка стала
   спорить с заголовком, вместо того чтобы его дополнять. Вернули как было
   (23.08.2026). Менять — только вместе с плашкой на главной.

   Звёзды в плашке красные — тоже как на главной. Ниже в карточках отзывов они
   янтарные (см. комментарий у .reviews-stars): там это шкала оценки, которую
   человек сравнивает от карточки к карточке, а здесь — итоговая цифра. */
.reviews-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.reviews-head .content-title{margin:0}
.reviews-badge{display:flex;align-items:center;gap:16px;flex:none;
  background:#fff;border:1px solid #E7E8EA;border-radius:24px;padding:16px 24px;margin:0 0 18px;
  box-shadow:0 1px 2px rgba(18,18,18,.03),0 4px 6px -1px rgba(18,18,18,.02)}
.reviews-badge-n{font-family:'Manrope';font-weight:800;font-size:var(--fs-display);line-height:1;color:#131313;
  font-variant-numeric:tabular-nums}
.reviews-badge .reviews-stars{font-size:var(--fs-small);line-height:1.45;letter-spacing:2px;gap:0;color:#EE292A}
.reviews-badge .reviews-stars i.on{color:#EE292A}
.reviews-badge-note{font-size:var(--fs-caption);line-height:1.3;color:#5F6368;margin-top:2px}

/* Ссылки на площадки: «мы их не выдумали, вот где они лежат». Стоят до списка —
   доверие нужно раньше чтения, а не после. Сама сетка точек — .review-points,
   общая со страницей /review (ap_review_points в build-lib.php). */
.reviews-sources{margin:0 0 26px}
.reviews-sources-h{font-size:var(--fs-small);color:#5F6368;margin:0 0 12px}


/* ---------- фотографии из отзыва (Яндекс.Карты) ----------
   Полоса миниатюр внизу карточки — так же, как их показывают на самих Картах:
   текст остаётся главным, снимки читаются приложением к нему.

   Четыре по 56px с зазором 6 — ровно ширина карточки в 280px, самой узкой в
   сетке. Пятый и дальше билдер прячет за счётчиком (RV_PHOTO_MAX), иначе ряд
   пришлось бы либо переносить, либо резать по краю.

   margin-top:auto прижимает полосу к низу — там же, где стоит «Читать
   полностью», поэтому у карточек с фотографиями кнопки нет: текст под них
   подрезан заранее (правило ниже). */
/* ссылки на Яндекс.Карты вставлены отзывами целиком — длинный URL без пробелов
   распирал карточку; ломаем его по любому символу и подрезаем визуально */

/* ---------- карточные сетки старого сайта ----------
   .box встречается в трёх раскладках, и только одна из них была покрыта:
   .service_page              — хабы категорий + «похожие работы» в кейсе (338 стр.)
   .service_page.more_port > .gallery — «примеры работ» на услугах (46 стр.)
   .service_page.more_port > .col-sm-4 — карточки напрямую (3 стр.)
   Поэтому сетка вешается на .service_page целиком, а карточка — на .box. */
w{display:contents}                          /* тег-обёртка из MODX, в HTML не существует */
.gallery,.cover_12,.service_page{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:14px 0 22px}
.gallery>*,.service_page>*{min-width:0}
/* .more-head тоже во всю ширину: без этого шапка блока «Примеры работ»
   вставала отдельной ячейкой сетки шириной в одну карточку (234px), и
   фраза со ссылкой складывались в столбик вместо строки. */
.service_page>.h2,.service_page>h2,.service_page>h3,.service_page>.h3,.service_page>p,.service_page>.gallery,.service_page>.more-head,.service_page>.block-img-2{grid-column:1/-1;margin:0}
.service_page>.more-head{margin:0 0 16px}
.service_page>h3{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h2);line-height:1.15}
.service_page.more_port{margin-top:30px}
.service_page.more_port>p{display:none}
/* Карточка «примеров работ» на страницах услуг — тот же вид, что у карточки
   в листинге портфолио: та же рамка, тот же радиус, та же лёгкая тень.
   До этого тень была только у листинга, и одни и те же работы выглядели
   по-разному в зависимости от того, с какой страницы на них смотришь. */
.box{display:flex;flex-direction:column;background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden;height:100%;
  box-shadow:0 1px 2px rgba(19,19,19,.05),0 14px 30px -22px rgba(19,19,19,.2)}
.box .img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
/* карточка, для которой снимка нет вообще (услуга без контента в зеркале):
   не растягиваем на высоту соседей — пустая рамка в 4/3 выглядит как дыра */
.box-noimg{align-self:start;justify-content:center;min-height:96px}
/* Подпись идёт сразу под фотографией, а не прижимается к низу — то же
   решение, что и в листинге портфолио. Карточки без фото не трогаем: там
   подпись и должна стоять по центру, ей не к чему прижиматься. */
.box>a{display:block;margin-top:auto}
.box:has(.img)>a{margin-top:0}
.box .item-title{padding:12px 15px}
.box:not(:has(.img)){justify-content:center;text-align:center}   /* карточка без фото — подпись по центру */
.box .item-title p{margin:0;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;line-height:1.35}
.box>a:hover .item-title p,.box .name a:hover{color:#D9232A}
/* хабы разделов услуг (/service/kuzov, /salon, /stekla, /prochie-uslugi) несут из MODX
   класс .block-contacts — а это грид на 3 колонки (он под карточки-адресов на /contacts).
   .service_page попадал в одну его колонку, ширины хватало на один столбец — карточки
   вставали в вертикаль. Растягиваем на всю ширину и раскладываем как в портфолио,
   но flex'ом: неполный последний ряд встаёт по центру, а не липнет к левому краю. */
.block-contacts>*:not(.item){grid-column:1/-1}   /* и текст раздела — тоже во всю ширину, а не колонкой */
.block-contacts>.service_page{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.block-contacts>.service_page>.col-sm-4{flex:1 1 250px;max-width:calc(25% - 12px)}
.block-contacts>.service_page .box{text-align:center}
.service_page.more_port>.col-sm-4{background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden}
.service_page.more_port>.col-sm-4 a{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;padding:12px 14px}
.service_page.more_port>.col-sm-4 img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.a_mark img{width:auto;height:50px;aspect-ratio:auto;object-fit:contain;margin:0 auto} /* лого марок не растягивать */
.cell_level_12{background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:18px 20px;font-size:var(--fs-small);color:#3C4043}
.cell_level_12 b,.cell_level_12 strong{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313;margin-bottom:6px}
.popular_port{background:#F4F5F6;border:1px solid #E7E8EA;border-radius:16px;padding:20px 22px;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.popular_port .title{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body)}
.popular_port .h3{margin:0;font-size:var(--fs-small);color:#5F6368;flex:1}

/* фото-галереи внутри текста услуги (55 стр.) — были стопкой во всю ширину */
.block-img-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0 20px}
.block-img-2 .item img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Галерея из одной фотографии (32 страницы услуг). auto-fill режет полосу на
   шесть колонок и ставит единственное фото в первую: 195px картинки и 1037px
   пустоты под заголовком «Наши работы» — читается как недогрузившийся блок.
   Фотографий не потеряно, на старом сайте там ровно одна и была. */
.block-img-2:has(> .item:only-child){grid-template-columns:min(100%,420px)}

/* полный список услуг раздела на хабе категории + карта сайта */
.svc-all{padding-top:0}
.svc-all h2{margin-top:0}
.svc-all-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 20px}
.svc-all-grid a{font-size:var(--fs-body);color:#3C4043;padding:7px 0;border-bottom:1px solid #E7E8EA}
.svc-all-grid a:hover{color:#D9232A}
.mail-grid a{display:block;padding:9px 0}
.mail-grid b{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313}
.sitemap-list{list-style:none;padding:0;margin:0 0 30px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 24px}
.sitemap-list a{font-size:var(--fs-small);color:#3C4043;line-height:1.45}
.sitemap-list a:hover{color:#D9232A}
.content h2 small{font-family:'Manrope';font-weight:400;font-size:var(--fs-body);color:#5F6368}

/* карточки партнёров */
.block-news-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:16px 0 22px}
.block-news-page>.item{display:flex;flex-direction:column;background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden}
.block-news-page>.item img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#F4F5F6;padding:16px}
.block-news-page .block-text{margin-top:auto;padding:12px 15px}
.block-news-page .item-title{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;line-height:1.35}
.block-news-page .item-text:empty{display:none}

/* плитка услуг на /service — карточка «фото работы · услуга · описание · цена»
   (разметку собирает rebuild_service_index() в build.py).
   Родитель .block-news-page — сам грид на 230px-колонки, и плитка попадала в одну
   его колонку, а .row внутри требовал 280px: карточки вылезали за края подложки.
   Отсюда grid-column:1/-1 и фиксированное число колонок. */
.block-news-page>.service_index{grid-column:1/-1}
.service_index{display:block;margin:16px 0 26px}
.service_index .container{min-width:0}
.service_index .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc-tile{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #E7E8EA;
  border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(19,19,19,.05),0 14px 30px -22px rgba(19,19,19,.2)}
.svc-tile:hover{border-color:#D9232A}
.svc-tile img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.svc-tile-b{display:flex;flex-direction:column;flex:1;padding:15px 18px 17px}
.svc-tile-n{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);line-height:1.25;color:#131313}
.svc-tile:hover .svc-tile-n{color:#D9232A}
.svc-tile-d{font-size:var(--fs-small);line-height:1.45;color:#5F6368;margin-top:7px}
.svc-tile-p{margin-top:auto;padding-top:12px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#D9232A}

/* /service: лид под H1 и шапки блоков — связка «мелкий красный кикер + крупный H2
   + серое уточнение», та же, что в секциях главной. Оба блока лежат внутри
   .block-news-page (это грид), поэтому им, как и плитке, нужна вся ширина. */
.block-news-page>.svc-head,.block-news-page>.svc-cats-sec{grid-column:1/-1}
/* .content p — селектор из двух частей, поэтому лид и подпись бьём таким же */
.content .svc-lead{font-size:var(--fs-h3);color:#3C4043;margin:0 0 4px}
.svc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 28px;margin:22px 0 18px}
.content .svc-head h2{margin:11px 0 0}
.content .svc-head-note{font-size:var(--fs-body);line-height:1.45;color:#5F6368;margin:0;padding-bottom:3px;max-width:46ch}
.svc-cats-sec{margin:6px 0 4px}

/* карточки разделов — повтор каталога главной (index.html, const catalog):
   фото с затемнением к низу, название и «от …» поверх него, список услуг под ним */
.svc-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc-cat{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #E7E8EA;
  border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(19,19,19,.05),0 14px 30px -22px rgba(19,19,19,.2)}
.svc-cat:hover{border-color:#D9232A}
.svc-cat-ph{position:relative;display:block}
.svc-cat-ph img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.svc-cat-ph:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,19,19,0) 40%,rgba(19,19,19,.82) 100%)}
.svc-cat-bar{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:14px 16px}
.svc-cat-t{display:inline-flex;align-items:center;gap:6px;min-width:0;
  font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);letter-spacing:.01em;color:#fff}
.svc-cat-t i{font-style:normal;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.svc-cat:hover .svc-cat-t i{transform:translateX(4px)}
.svc-cat-p{font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption);color:#fff;
  background:#D9232A;border-radius:100px;padding:4px 12px;white-space:nowrap}
.svc-cat-l{display:block;flex:1;padding:15px 18px 17px}
.svc-cat-l span{display:block;position:relative;padding:6px 0 6px 17px;font-size:var(--fs-small);line-height:1.35;color:#3C4043}
.svc-cat-l span:before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:#EE292A}

/* контакты: соцсети — полосой над сеткой, три точки — одинаковыми карточками в ряд,
   реквизиты — блоком под ними (раньше и то и другое лежало внутри карточек-адресов) */
.contact-social{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 2px}
.contact-social-t{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313}
.social{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.social a{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#3C4043;border:1px solid #E7E8EA;border-radius:100px;padding:7px 16px}
.social a:hover{border-color:#D9232A;color:#D9232A}
.social .fa-label{font:inherit;color:inherit;border:0;padding:0}   /* «кружок в кружке» у старой разметки */

.block-contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 22px}
.block-contacts>.item{display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:22px 24px}
.block-contacts .item img{display:none}                 /* один и тот же логотип в каждой карточке */
.block-contacts .h4{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);line-height:1.25;margin:0 0 12px;min-height:2.5em}
/* станция метро над адресом: кружок в цвет ветки + название.
   Класс .metro-l* ставит build.py, сами цвета линий — в chrome.css (он общий) */
.contact-metro{display:flex;align-items:center;gap:8px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;margin-bottom:5px}
.contact-metro:before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--metro,#EE292A)}
.contact-adres{font-size:var(--fs-body);color:#3C4043;margin-bottom:10px}
.contact-time{display:inline-block;font-size:var(--fs-small);color:#5F6368;background:#F4F5F6;border-radius:100px;padding:3px 12px;margin-bottom:12px}
.contact-phone a{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313;margin-bottom:4px}
.contact-phone a:hover,.contact-email a:hover{color:#D9232A}
.contact-email a{font-size:var(--fs-small);color:#5F6368}
/* «Схема проезда» прижата к низу карточки — во всех трёх на одной линии */
.contact-map-link{display:inline-block;margin-top:auto;padding-top:14px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#D9232A}

.contact-legal-box{background:#F4F5F6;border-radius:16px;padding:20px 24px;margin:0 0 22px}
.contact-legal-t{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313;margin-bottom:10px}
.legal-name{font-size:var(--fs-small);color:#3C4043;line-height:1.5;margin-bottom:12px}
/* одна колонка: подписи и значения идут от левого края блока, значения — общей линией */
.legal-grid{display:grid;grid-template-columns:1fr;gap:6px;text-align:left}
.legal-row{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:var(--fs-small);line-height:1.55}
.legal-k{flex:0 0 240px;font-weight:400;color:#5F6368}
.legal-v{font-family:'Montserrat';font-weight:600;color:#131313;overflow-wrap:anywhere}

/* пагинация */
.pagination,.pagination ul,ul.pageList{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0}
.pagination li a,.pagination li span,ul.pageList li a,ul.pageList li span{display:block;min-width:38px;text-align:center;padding:8px 13px;border:1px solid #E7E8EA;border-radius:100px;font-family:'Montserrat';font-size:var(--fs-small);font-weight:600;color:#3C4043;background:#fff}
.pagination li.active span,.pagination li.active a,.pagination li span.current,ul.pageList .active a{background:#D9232A;border-color:#D9232A;color:#fff}
.pagination li a:hover{border-color:#131313;color:#131313}

/* ---------- секции главной ---------- */
.hero{background:radial-gradient(120% 90% at 88% 0%,#F4F5F6 0%,#fff 55%)}
.hero .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(44px,6vw,76px);display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,56px);align-items:center}
.label{display:inline-flex;align-items:center;gap:12px;font-family:'Montserrat';font-size:var(--fs-caption);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#D9232A}
.label i{width:28px;height:2px;background:#EE292A}
.hero h1{font-family:'Montserrat';font-weight:800;font-size:var(--fs-display);line-height:1.04;letter-spacing:-.026em;margin:20px 0 18px}
.hero h1 em,.sec h2 em{font-style:normal;color:#D9232A}
.hero p{font-size:var(--fs-h3);color:#3C4043;margin-bottom:24px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-offers{display:flex;flex-direction:column;gap:14px}
.offer-card{background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:20px 24px;box-shadow:0 1px 2px rgba(19,19,19,.05),0 16px 34px -24px rgba(19,19,19,.25)}
.offer-card h2,.offer-card h3{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);line-height:1.3;margin:0 0 6px;letter-spacing:0}
.offer-card p{font-size:var(--fs-small);color:#3C4043;margin-bottom:10px}
/* ---------- акции: плашки на /akczii ----------
   Направление «красный акцент», выбрано заказчиком 30.08.2026 из трёх.
   Скидка вынесена угловым ярлыком: в прежней вёрстке она стояла последней в
   строке после длинного перечня услуг и не читалась вовсе.

   Сетка и карточка — готовые .svc-grid и .offer-card: подъём под курсором для
   .offer-card уже описан в chrome.css, вторая такая карточка означала бы две
   разные тени на одном сайте. Своего здесь только ярлык, тёмная плашка
   сертификата и её штриховка. */
.akc-lead{font-size:var(--fs-h3);color:#3C4043;max-width:62ch;margin:0 0 clamp(22px,3vw,30px)}
/* Ровно две колонки на десктопе — заданы явно, а не выведены из auto-fill:
   ширина колонки тогда зависит от арифметики контейнера и минимума, и стоит
   поменять одно из двух, как в ряд встаёт третья карточка. Текст в ней
   комкается: заголовок «Полный комплекс "Превосходство"» делит строку с
   угловым ярлыком скидки. */
/* Селектор из двух классов не для красоты: .svc-grid объявлен НИЖЕ в этом
   же файле, специфичность у них была одинаковая, и он побеждал порядком —
   на странице вставало четыре колонки вместо двух, а «Превосходство»
   переносилось посреди слова. */
.svc-grid.akc-grid{grid-template-columns:minmax(0,1fr);gap:16px;
  margin:0 0 clamp(26px,4vw,36px)}
@media (min-width:900px){
  .svc-grid.akc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.akc-card{position:relative;overflow:hidden;padding:24px 26px 22px}

/* Ярлык вписан в угол карточки: радиус повторяет её собственный, поэтому
   читается как срезанный угол, а не как наклейка поверх. */
.akc-badge{position:absolute;top:0;right:0;background:#EE292A;color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:var(--fs-h3);line-height:1;
  letter-spacing:-.02em;padding:11px 16px;border-radius:0 16px 0 16px}
.akc-card h2,.akc-card h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;
  margin:0 96px 8px 0}
.akc-card p{font-size:var(--fs-small);color:#3C4043;line-height:1.5;margin:0}
.akc-note{display:block;margin-top:10px;font-size:var(--fs-caption);color:#5F6368}

/* Сертификат — тёмная плашка во всю сетку: он не «ещё один комплекс», а
   отдельное предложение без срока. Штриховка — диагональ из логотипа. */
.akc-cert{grid-column:1/-1;position:relative;overflow:hidden;background:#131313;
  border-color:#131313;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  padding:24px 28px}
.akc-cert::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(238,41,42,.16) 0 3px,transparent 3px 26px)}
.akc-cert>*{position:relative}
.akc-cert .akc-badge{position:static;background:none;color:#EE292A;padding:0;
  font-size:var(--fs-h2);border-radius:0}
.akc-cert div{flex:1;min-width:min(100%,280px)}
.akc-cert h2,.akc-cert h3{color:#fff;margin:0 0 6px}
.akc-cert p{color:#C5C8CC}
/* Строка над формой заявки: с чем именно пришёл посетитель. Ставит её
   скрипт на /akczii по параметру ?tema — см. комментарий там. */
.cta-topic{display:inline-flex;align-items:center;margin:0 0 14px;
  padding:8px 14px;border-radius:100px;background:rgba(238,41,42,.10);
  font-family:'Montserrat',sans-serif;font-weight:var(--fw-mid);
  font-size:var(--fs-small);color:#D9232A}

.akc-till{font-family:'Manrope',sans-serif;font-weight:400;font-size:var(--fs-small);color:#8A8F94}

@media (max-width:520px){
  .akc-badge{font-size:var(--fs-body);padding:9px 13px}
  .akc-card h2,.akc-card h3{margin-right:80px}
}

.sec .wrap{padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,80px)}
.sec h2{font-family:'Montserrat';font-weight:800;font-size:var(--fs-display);line-height:1.1;letter-spacing:-.015em;margin:14px 0 26px}
.sec-alt{background:#F4F5F6;border-top:1px solid #E7E8EA;border-bottom:1px solid #E7E8EA}
.sec-alt .content{padding-top:0;padding-bottom:0}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.svc-card{background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(19,19,19,.05),0 16px 34px -24px rgba(19,19,19,.22)}
.svc-card:hover{border-color:#767A80}
.svc-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.svc-name{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313;padding:14px 16px 4px;line-height:1.35}
.svc-price{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#131313;padding:0 16px 16px;margin-top:auto}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.work-card{background:#fff;border:1px solid #E7E8EA;border-radius:16px;overflow:hidden}
.work-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-card span{display:block;padding:12px 15px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;line-height:1.35}
.sec-dark{background:#131313}
.sec-dark .label{color:#EE292A}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,52px);align-items:start}
.content-dark h2{font-family:'Montserrat';font-weight:800;font-size:var(--fs-display);line-height:1.12;color:#fff;margin-bottom:16px;letter-spacing:-.01em}
.content-dark p{font-size:var(--fs-body);color:#B0B4B9;margin-bottom:12px}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adv-card{background:#1C1C22;border:1px solid #2A2A30;border-radius:16px;padding:20px}
.adv-card b{display:block;font-family:'Montserrat';font-weight:600;font-size:var(--fs-body);color:#fff;margin-bottom:7px}
.adv-card p{font-size:var(--fs-small);color:#9AA0A6;margin:0}

/* ---------- CTA-полоса ----------
   Была чёрной и на две колонки: слева телефон, справа акция и три адреса.
   Адреса и акция дублировали подвал — убраны.
   Сейчас — как блок «FAQ + заявка» на главной: серый холст, на нём две белые
   карточки. Слева телефон и способы связи, справа форма Битрикс24. */
.cta-band{background:#F4F5F6;border-top:1px solid #E7E8EA;border-bottom:1px solid #E7E8EA}
.cta-band .wrap{padding-top:clamp(30px,4vw,44px);padding-bottom:clamp(30px,4vw,44px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.cta-card{background:#fff;border:1px solid #E7E8EA;border-radius:24px;
  padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;justify-content:center}
/* форма грузится асинхронно: до её появления карточка не должна схлопываться */
.cta-form{min-height:320px}
/* карта в левой карточке: занимает всю высоту под телефоном и графиком.
   iframe без pointer-events — колесо мыши над картой скроллит страницу,
   а не зумит карту; интерактив живёт по ссылке «Открыть в Яндекс Картах». */
.cta-map{position:relative;flex:1;min-height:240px;margin-top:22px;
  border:1px solid #E7E8EA;border-radius:18px;overflow:hidden;background:#F4F5F6}
.cta-map iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.cta-map-cta{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:inline-flex;align-items:center;white-space:nowrap;background:#fff;
  font-family:'Montserrat';font-weight:600;font-size:var(--fs-caption);letter-spacing:.06em;
  text-transform:uppercase;color:#131313;border:1px solid #E7E8EA;
  padding:11px 20px;border-radius:100px;transition:background .2s,color .2s}
.cta-map-cta:hover{background:#D9232A;color:#fff;border-color:#D9232A}
.cta-title{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h3);color:#131313;margin-bottom:8px}
.cta-phone{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h2);color:#131313;line-height:1.1}
.cta-phone:hover{color:#D9232A}
.cta-sub{font-size:var(--fs-small);color:#5F6368;margin-top:6px}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .block-contacts>.service_page>.col-sm-4{max-width:calc(33.333% - 11px)}
  .svc-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cta-band .wrap{grid-template-columns:1fr}
  .block-contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .block-contacts>.service_page>.col-sm-4{max-width:calc(50% - 8px)}
  .service_index .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-head{align-items:flex-start;gap:4px}
  .content .svc-head-note{padding-bottom:0}
}
@media (max-width:700px){
  .adv-grid{grid-template-columns:1fr}
  .block-contacts{grid-template-columns:1fr}
  .block-contacts>.service_page{gap:12px}
  .block-contacts>.service_page>.col-sm-4{max-width:100%}
  .block-contacts .h4{min-height:0}
  .contact-map-link{margin-top:0}
  .legal-k{flex:1 1 100%}
  .service_index .row{gap:12px}
  .svc-tile-b{padding:13px 14px 15px}
  .svc-tile-n{font-size:var(--fs-body)}
  .svc-tile-d{font-size:var(--fs-small);margin-top:5px}
  .svc-tile-p{font-size:var(--fs-small);padding-top:10px}
  .svc-cats{grid-template-columns:1fr;gap:12px}
  .content .svc-lead{font-size:var(--fs-body)}
  .content table{min-width:340px}
  .content table:not(:has(tr>*:nth-child(3))) th:last-child,
  .content table:not(:has(tr>*:nth-child(3))) td:last-child{width:120px}
}

/* ---------- хвост страницы видео ----------
   Со старого сайта тут была приписка с «!» и голые URL абзацами. Теперь строка
   кнопок и перелинковка на соседние видео — та же сетка, что в списке /video. */
.vid-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.vid-more{margin:34px 0 0}
.vid-more .eyebrow{margin-bottom:14px}
.vid-more .block-photo{margin-top:0}

/* ---------- цена · срок · гарантия под заголовком страницы услуги ---------- */
/* Собирает build-price.php между метками price:service. Три плитки в ряд, на
   телефоне — в столбик. Цена ведёт в свой раздел прайса, гарантия — в
   гарантийные обязательства: обе цифры проверяемы, а не написаны для красоты. */
.svc-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.svc-meta-i{flex:1 1 190px;display:block;padding:13px 16px;border:1px solid #E7E8EA;border-radius:14px;
  background:#fff;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
a.svc-meta-i:hover{border-color:#131313;box-shadow:0 1px 3px rgba(19,19,19,.08)}
.svc-meta-i b{display:block;font-family:'Montserrat';font-weight:800;font-size:var(--fs-h3);
  line-height:1.2;color:#131313;white-space:nowrap}
.svc-meta-i i{display:block;margin-top:3px;font-style:normal;font-size:var(--fs-caption);
  line-height:1.35;color:#5F6368}
a.svc-meta-i b{color:#D9232A}
@media (max-width:600px){
  .svc-meta{gap:8px}
  .svc-meta-i{flex:1 1 100%;padding:11px 14px}
}

/* ---------- юридические страницы (/offer, /warranty, /memo, /review) ---------- */
/* Заголовки, списки и таблицы берут общие правила .content — здесь только то,
   чего в них нет. Разбор задачи: docs/dop-stranicy-i-dokumenty.md */
.legal-meta{font-size:var(--fs-small);color:#5F6368;margin:-6px 0 26px}
.legal-lead{font-size:var(--fs-h3);color:#131313}
.legal-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 18px}
.legal-req{background:#F4F5F6;border:1px solid #E7E8EA;border-radius:16px;padding:20px 24px;margin:28px 0 0}
.legal-req p:last-child{margin-bottom:0}
/* В общих правилах последняя ячейка не переносится — там цены. Здесь в ней
   условия гарантии в две строки, перенос обязателен. */
.legal td:last-child{white-space:normal;font-family:inherit;font-weight:400;color:#3C4043}

/* Печать документных страниц: их распечатывают и подшивают к заказ-наряду.
   Убираем всё, что на бумаге бесполезно, и раскрываем адреса ссылок. */
@media print{
  .sc-top,.sc-hdr,.sc-foot,.crumbs,.cta-band,.legal-actions{display:none}
  .content{padding:0}
  .content p,.content li{max-width:none;color:#000}
  .content table{border-color:#999}
  .legal-req{background:none;border:1px solid #999}
  .legal a[href^="http"]:after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .legal a[href^="mailto:"]:after,.legal a[href^="tel:"]:after{content:""}
  .table-wrap{overflow:visible}
  h2,h3{break-after:avoid}
  table,ul{break-inside:avoid}
}
/* Согласие под формой заявки — требование 152-ФЗ, стоит на всех страницах */
/* мелкая пояснительная строка под кнопками на /review */
.legal-hint{font-size:var(--fs-small);color:#5F6368;margin:-6px 0 18px}
/* выбор точки на /review: у каждой свои карточки на картах */
.review-points{display:grid;gap:12px;margin:0 0 22px}
.review-point{border:1px solid #E7E8EA;border-radius:12px;padding:16px 20px;background:#fff;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.review-point-h{display:flex;flex-direction:column;gap:2px}
.review-point-h b{font-family:'Montserrat';font-weight:700;font-size:var(--fs-body);color:#131313;
  display:flex;align-items:center;gap:8px}
/* Кружок — цвета ветки метро, как в шапке: переменную --metro задаёт класс
   .metro-l* из chrome.css, серый остаётся запасным цветом для незнакомой ветки.
   До этого цвет был жёстко серым, и метка ветки на карточке ничего не значила. */
.review-point-h b:before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--metro,#5F6368);flex:none}
.review-point-h span{font-size:var(--fs-small);color:#5F6368}
.review-point .legal-actions{margin:0}

/* цена «от N ₽» в тексте — подставляет build-price.php из прайса (data-code) */
.ap-p{font-weight:700;white-space:nowrap;color:#131313}

/* ---------- вакансии ---------- */
/* Раздел собирает build-vacancies.php; классы свои, без утилит Tailwind —
   эти страницы подключают style.css, а не home.css. Ни одного nowrap: на 390px
   в карточке живут «Мастер по пошиву и перетяжке салона» и вилка оклада, и
   запрет переноса вытолкнул бы их за край документа — так уже вытекала плашка
   классов кузова на /price. */
/* ---------- ритм страницы ----------
   Между крупными блоками списка вакансий один и тот же отступ. Своего у них
   не было: «Куда мы ищем мастеров», «Почему выбирают нас» и «Наша команда»
   вставали на 34px от .content h2 — отступе заголовка ВНУТРИ текста, — а после
   «Нашей команды» шёл её собственный clamp(48…80). Стык блоков выходил вдвое
   теснее следующего, и разнобой было видно на глаз (приёмка 08.09.2026).

   Значение взято у .team в chrome.css, чтобы не заводить вторую шкалу: на
   телефоне 48px, дальше 7vw до 80px. Нижние поля не считаем — соседние
   вертикальные margin схлопываются в больший, и его задаёт верх следующего
   блока. Поэтому у .vac-why-s низ обнулён: 8px там только мешали читать
   правило, на расстояние они не влияли.

   Селектор с прямым потомком — чтобы не задеть h2 ВНУТРИ блоков (у «Почему
   выбирают нас» и «Наша команда» свои нулевые отступы) и страницу самой
   вакансии: там .block-vacancy, и 34px у заголовков в тексте — как раз то,
   что нужно. */
.block-vacancies{--vac-sec:clamp(48px,7vw,80px)}
.block-vacancies>h2{margin-top:var(--vac-sec)}
.content .block-vacancies .team{margin-top:var(--vac-sec)}
/* Бровь встала перед H2 списка и стала первым элементом блока — отступ раздела
   переезжает на неё, иначе к нему добавился бы ещё и margin самого заголовка.
   display:flex вместо inline-flex — у строчного бокса вертикальный margin уходит
   в высоту строки и с отступом соседа не схлопывается; вид не меняется. */
.block-vacancies>.eyebrow{display:flex;margin-top:var(--vac-sec)}
.block-vacancies>.eyebrow+h2{margin-top:0}

/* Полоса-герой списка: подзаголовок и два действия. Фото цеха переехало отсюда
   в блок «О компании» — первый экран отдан самому списку. */
.vac-lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px;margin:0 0 10px}
.vac-lead-t{font-size:var(--fs-h3);color:#3C4043;margin:0;max-width:640px}
.vac-lead-b{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- плитки направлений ----------
   Приём взят с главной, у карточек «11 лет» и «3 точки» (.stat-card/.stat-mark
   в scripts/tw-input.css): крупная лигатура Material Symbols водяным знаком в
   углу, поверх неё число и подпись капителью. Классы свои — home.css сюда не
   подключён, а один в один повторять чужие имена значило бы завести вторую
   копию правил, которая разъедется при первой же правке главной.

   Шрифт значков — локальный subset (public/_m/fonts/), в нём только те глифы,
   что нашлись в разметке. Новое имя значка в билдере — прогнать
   scripts/fetch-icons.sh, иначе на месте знака будет пусто. */
.vac-count{font-size:var(--fs-small);color:#5F6368}
.content p.vac-count{font-size:var(--fs-small);color:#5F6368;margin:-4px 0 16px}
.vac-dirs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:0 0 14px}

/* Плитки направлений — одного размера. Ряд грид равняется по самой высокой
   карточке, а РЯДЫ между собой — нет: контактная плитка растила нижний ряд,
   и верхний рядом с ним выглядел обрезанным. `1fr` у неявных рядов делает их
   равными по самому высокому; минимум у гибкого ряда остаётся auto, поэтому
   содержимое не обрежется. В одну колонку (телефон) не включаем: там каждая
   плитка сама себе ряд, и все вытянулись бы по высоте контактной. */
@media (min-width:641px){
  .vac-dirs{grid-auto-rows:1fr}
}
.vac-dir{position:relative;overflow:hidden;background:#fff;border:1px solid #E7E8EA;border-radius:24px;
  padding:26px 28px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 2px rgba(19,19,19,.03),0 4px 6px -1px rgba(19,19,19,.02)}
.vac-dir-mark{position:absolute;right:-18px;bottom:-30px;font-size:172px;line-height:1;
  color:#131313;opacity:.09;pointer-events:none}
/* Свой значок направления — картинка вместо глифа шрифта. Размер тот же, что у
   глифа (172px по кегли), и та же прозрачность: это водяной знак под текстом
   плитки, а не иллюстрация. Пропорции не ломаем — height:auto. */
.vac-dir-mark--img{width:172px;height:auto;font-size:0}
/* На тёмной плитке глиф перекрашивается в белый через color, картинке так
   нельзя — выворачиваем её фильтром. Без этого свой значок на тёмном фоне
   просто исчезает: чёрное по чёрному. */
.vac-dir--dark .vac-dir-mark--img{filter:invert(1)}
.vac-dir-n{position:relative;z-index:2;font-family:'Montserrat';font-weight:800;
  font-size:var(--fs-number);line-height:1;letter-spacing:-.04em;color:#D9232A}
.vac-dir-n span{font-size:.36em;font-weight:600;letter-spacing:-.01em;margin-left:6px;color:#5F6368}
.content .vac-dir-l{position:relative;z-index:2;margin:0;font-family:'Montserrat';font-weight:600;
  font-size:var(--fs-caption);letter-spacing:.22em;text-transform:uppercase;color:#5F6368}
.vac-dir-list{position:relative;z-index:2;display:grid;gap:11px;margin-top:2px}
.vac-dir-i{font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#131313;
  line-height:1.3;overflow-wrap:break-word}
.vac-dir-i span{display:block;font-family:'Manrope';font-weight:500;font-size:13px;
  color:#5F6368;margin-top:3px}
.vac-dir-i:hover{color:#D9232A}

/* «ещё N позиций» — нативный <details>: работает без скрипта, а спрятанные
   позиции остаются в разметке и достаются поисковику. Порог — VC_TILE_MAX в
   билдере: без него направление с девятью вакансиями растит плитку под 780px,
   а ряд равняется по самой высокой. */
.vac-dir-rest>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:6px;font-family:'Montserrat';font-weight:600;font-size:var(--fs-small);color:#D9232A}
.vac-dir-rest>summary::-webkit-details-marker{display:none}
.vac-dir-rest>summary:hover{color:#C81E24}
.vac-dir-rest>summary .material-symbols-outlined{font-size:18px;transition:transform .2s}
.vac-dir-rest[open]>summary .material-symbols-outlined{transform:rotate(180deg)}
.vac-dir-rest .vac-dir-list{margin-top:11px}
@media (prefers-reduced-motion:reduce){
  .vac-dir-rest>summary .material-symbols-outlined{transition:none}
}

/* Пустое направление: ноль приглушён — это не предложение, а место под
   будущую вакансию. #5F6368, а не светло-серый: цифра крупная, но остаётся
   текстом, и контраст 5,9 держит доступность на ста. */
.vac-dir--none .vac-dir-n{color:#5F6368}
.vac-dir--none .vac-dir-mark{opacity:.06}
.vac-dir-none{margin:0;font-size:var(--fs-small);color:#5F6368;line-height:1.45}
.vac-dir-none a{font-family:'Montserrat';font-weight:600;color:#D9232A}
.vac-dir-none a:hover{color:#C81E24}

/* Тёмная плитка — там, где не нужен опыт: самое заметное предложение для тех,
   кто ещё не мастер. Вторичный текст #8A8F94, как в подвале: #5F6368 на чёрном
   даёт контраст ниже нормы. */
.vac-dir--dark{background:#131313;border-color:#131313}
.vac-dir--dark .vac-dir-mark{color:#fff;opacity:.16}
.vac-dir--dark .vac-dir-n{color:#fff}
.vac-dir--dark .vac-dir-n span,.content .vac-dir--dark .vac-dir-l{color:#8A8F94}
.vac-dir--dark .vac-dir-i{color:#fff}
.vac-dir--dark .vac-dir-i span{color:#8A8F94}
.vac-dir--dark .vac-dir-i:hover{color:#FF5A5B}
.vac-dir--dark .vac-dir-rest>summary{color:#FF5A5B}
.vac-dir--dark .vac-dir-rest>summary:hover{color:#fff}

/* Последняя плитка ряда: «не нашли своё» и контакты отдела кадров */
.vac-dir--more{background:#F4F5F6;border-style:dashed;border-color:#C4C6C9;box-shadow:none;
  justify-content:center;gap:14px}
.vac-dir-more-t{font-family:'Montserrat';font-weight:700;font-size:var(--fs-body);line-height:1.35}
.vac-dir-b{align-self:flex-start}
.vac-dir-hr{display:grid;gap:4px;font-size:var(--fs-small);color:#5F6368;
  padding-top:14px;border-top:1px solid #E7E8EA}
.vac-dir-hr b{font-family:'Montserrat';font-weight:700;font-size:var(--fs-small);color:#131313}
.vac-dir-hr a{font-family:'Montserrat';font-weight:600}

/* Закрытые позиции: не в плитках (плитка обещает работу), но со страницы не
   исчезают — их адреса уже в индексе и в объявлениях Директа. */
.vac-closed-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  font-size:var(--fs-small);color:#5F6368;margin:0 0 14px}
.vac-closed-list b{font-family:'Montserrat';font-weight:600;color:#3C4043}
.vac-closed-list ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0}
.vac-closed-list a{color:#5F6368;text-decoration:underline}
.vac-closed-list a:hover{color:#D9232A}

/* ---------- «Почему выбирают нас»: светлые плитки-бенто ----------
   Шапка блока — столбец: бровь, заголовок, под ним подводка. Подводка
   продолжает саму фразу заголовка («Почему выбирают нас» → «Шесть вещей, о
   которых обычно спрашивают на собеседовании»), и колонкой справа читалась
   отдельным текстом, а не подписью к нему.

   Плитки светлые: белая карточка с тёплым отсветом в нижнем правом углу и
   тонкой линией по краю. От белой колонки вокруг их отделяет не заливка, а
   рамка, тень и сетка — на светлом это работает так же, как тёмный фон, но
   не спорит с остальной страницей.

   Номер — не текст, а счёт (aria-hidden в разметке), поэтому он призрак в
   углу: цвет выбран под фон, а не под норму контраста. Заголовок плитки
   держит 16,5:1, текст — 5,9:1. */
.vac-why-s{margin:var(--vac-sec,34px) 0 0}
.vac-why-h{margin:0 0 18px}
.vac-why-h h2{margin:0}
/* Подпись под H2: .content p (0,1,1) перебивал класс (0,1,0), и она шла 16px
   против 14px у «2 позиции в трёх цехах» — под соседним заголовком. Ширину
   не ограничиваем: фраза должна лечь в одну строку. */
.vac-why-lead,.content p.vac-why-lead{font-size:var(--fs-small);color:#5F6368;margin:10px 0 0}
.vac-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0}
/* Под курсором плитка чуть подрастает, и по ней проходит блик — тот же приём,
   что у карточек-цифр «11 лет» и «3 точки» на главной (.stat-card
   в scripts/tw-input.css). Блик — слой в фоне самой плитки, а не блок сверху:
   у блока свои края, и при наклоне 107° они срезали бы угол карточки. На белом
   он не белый, а красноватый: белым по белому блика не видно.

   Три слоя фона идут списком, и списки size/position обязаны совпадать по
   порядку: первый — блик (растянут на 260%, ездит справа налево), второй —
   тёплый отсвет угла, третий — сама подложка; последние два стоят на месте. */
.vac-why-i{position:relative;overflow:hidden;
  border-radius:20px;padding:24px 28px;border:1px solid #E7E8EA;
  background-image:linear-gradient(107deg,rgba(238,41,42,0) 34%,rgba(238,41,42,.07) 50%,rgba(238,41,42,0) 66%),
                   radial-gradient(120% 130% at 100% 108%,rgba(238,41,42,.10),rgba(238,41,42,0) 60%),
                   linear-gradient(#fff,#fff);
  background-size:260% 100%,100% 100%,100% 100%;background-position:88% 0,0 0,0 0;
  background-repeat:no-repeat;
  transition:background-position 1.2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),
             box-shadow .3s cubic-bezier(.4,0,.2,1)}
.vac-why-i:hover{background-position:12% 0,0 0,0 0;transform:scale(1.015);
  box-shadow:0 12px 28px rgba(19,19,19,.08)}
@media(prefers-reduced-motion:reduce){.vac-why-i{transition:none}}
/* Номер живёт вне потока: иначе он раздвинул бы текст плитки, а он тут — фон.
   Нижний край срезан рамкой карточки, так и задумано. */
.vac-why-n{position:absolute;right:14px;bottom:-14px;pointer-events:none;
  font-family:'Montserrat';font-weight:800;font-size:96px;line-height:1;color:#131313;opacity:.05}
.vac-why-i b{display:block;font-family:'Montserrat';font-weight:700;font-size:var(--fs-body);
  color:#131313;margin:0 0 10px;position:relative}
.vac-why-t{display:block;font-size:var(--fs-small);color:#5F6368;position:relative}
@media (max-width:980px){
  .vac-why{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .vac-why{grid-template-columns:1fr;gap:14px}
  .vac-why-i{padding:20px}
  .vac-why-n{font-size:76px;right:12px}
}

/* Факты «опыт / график / занятость» одним списком: подпись слева серым */
.vac-facts{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.vac-facts li{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:var(--fs-small);color:#131313}
.vac-facts li span{flex:0 0 130px;color:#5F6368}
/* Значение факта («от 2 лет») стало отдельным span, чтобы на нём держалась
   метка правки на месте (data-cf). Без этого правила оно получило бы вид
   подписи слева — серую колонку в 130px. */
.vac-facts li .vac-fv{flex:1 1 auto;color:#131313}

/* Пара «оклад + фото» на странице позиции — по тому же правилу, что «О компании»
   в списке: фото режется по высоте карточки. Сегодня они почти сходятся (287 и
   298), но фотографию к вакансии выбирает заказчик, и первый же вертикальный
   кадр растянул бы строку вдвое. */
.vac-top{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin:0 0 10px}
.vac-top-i{background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:24px;
  display:grid;gap:16px;justify-items:start;align-content:start}
.vac-top-p{position:relative;overflow:hidden;border-radius:16px;min-height:260px}
.vac-top-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.vac-salary{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h2);color:#131313}
.vac-closed{background:#F4F5F6;border:1px solid #E7E8EA;border-radius:12px;padding:14px 18px;
  font-size:var(--fs-small);color:#3C4043}

.vac-other{list-style:none;display:grid;gap:10px;margin:0 0 18px;padding:0}
.vac-other li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  border-bottom:1px solid #E7E8EA;padding:0 0 10px}
.vac-other li a{font-family:'Montserrat';font-weight:600;font-size:var(--fs-body)}
.vac-other li span{font-size:var(--fs-small);color:#5F6368}
.vac-other-c{color:#8A8F94}

.vac-form{background:#fff;border:1px solid #E7E8EA;border-radius:16px;padding:24px;margin:0 0 18px}
.vac-form--soon p{margin:0 0 14px}

/* ---------- окно отклика ----------
   Форма стоит в <dialog>, потому что тег Битрикса рендерит её на месте, и два
   вхождения на странице дали бы две формы с одинаковыми полями. Разметка и
   оформление — свои, чтобы окно выглядело страницей сайта, а не системным
   диалогом: те же радиусы 24, тот же #131313 и кнопки-пилюли. */
.vac-apply{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.vac-ways{background:#F4F5F6;border-radius:16px;padding:20px 22px;margin:0 0 18px;
  display:grid;gap:12px}
.content .vac-ways-t{margin:0;font-size:var(--fs-body);color:#3C4043}
.vac-ways-b{display:flex;flex-wrap:wrap;gap:10px}
/* значок и подпись в одной строке: у .btn по умолчанию inline-block */
.vac-way{display:inline-flex;align-items:center;gap:8px}
.vac-way .material-symbols-outlined{font-size:20px}

/* margin:auto — это и есть центрирование окна: браузер ставит его так сам, но
   в самом верху файла стоит сброс *{margin:0}, и окно уезжало в левый верхний
   угол. Проверка «окно стоит по центру экрана» в selftest-vacancies-modal.mjs
   держит именно этот случай: сброс легко вернуть, не заметив последствий. */
.vac-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);margin:auto;
  border:none;border-radius:24px;padding:32px;background:#fff;color:#131313;
  box-shadow:0 24px 48px -12px rgba(19,19,19,.28);overflow:hidden}
/* Прокручивается ТЕЛО окна, а не сам диалог. Крестик стоит absolute внутри
   диалога, и пока прокрутка жила на нём, длинная форма уносила кнопку за
   верхний край — окно опять становилось нечем закрыть. На десктопе выручали
   Esc и клик по подложке, но на телефоне окно раскрыто во весь экран, и
   подложки там нет вовсе.
   display задаём только открытому окну: голое `display:flex` перебило бы
   встроенное `display:none` у закрытого <dialog>, и форма висела бы на
   странице всегда. min-height:0 — чтобы тело в колонке сжалось до высоты
   окна, а не растянуло его под свой контент. */
.vac-modal[open]{display:flex;flex-direction:column}
.vac-modal-body{overflow:auto;min-height:0}
.vac-modal::backdrop{background:rgba(19,19,19,.55)}
.content .vac-modal-h{font-family:'Montserrat';font-weight:800;font-size:var(--fs-h3);
  line-height:1.2;margin:0 0 6px;padding-right:36px}
.content .vac-modal-t{font-size:var(--fs-small);color:#5F6368;margin:0 0 18px}
/* Согласие под формой в окне — мельче обычного: над ним стоит такой же текст
   от самого Битрикса, и два абзаца одного кегля читаются как повтор ошибки.
   Точечно, только внутри окна: в полосе заявки на всех страницах этот же класс
   набран крупнее и трогать его нельзя.

   Сейчас в окне этой подписи НЕТ: 09.09.2026 заказчик убрал её, потому что у
   формы Битрикса есть своя. Убрана не кодом, а пустым полем «Текст согласия
   под формой» в разделе «Вакансии — общие блоки»: билдер печатает абзац,
   только когда поле заполнено (vc_form). Поэтому правило остаётся — впишут
   текст обратно, и он сразу встанет нужным кеглем.

   ⚠️ Смените идентификатор формы на такую, где своей подписки нет, — впишите
   текст обратно: иначе страница собирает телефоны без единого слова про
   обработку данных. Форма меняется из студии, кода эта смена не касается. */
.vac-modal .cta-consent{font-size:12px;line-height:1.4;margin-top:10px}
.vac-modal-body>*:last-child{margin-bottom:0}
/* внутри окна врезка уже не нужна: фон и так свой */
.vac-modal .vac-ways{background:none;padding:0;margin:0}
.vac-modal .vac-form{border:none;padding:0;margin:0}
/* Кнопка закрытия — 44×44: меньше на телефоне не попасть пальцем.
   z-index обязателен. Форма Битрикса приезжает в окно ПОСЛЕ крестика и
   оборачивается своим .b24-form-wrapper с position:relative. Два
   позиционированных соседа без z-index рисуются в порядке документа —
   и форма ложится поверх крестика: окно нечем закрыть, а человек пришёл
   по платному клику. Пока верх окна занимал наш заголовок, форма начиналась
   ниже и до крестика не доставала; заголовок убрали 09.09.2026 (у формы свой),
   и порядок наложения стал виден. Сторож — проверка «форма Битрикса не
   накрывает крестик» в selftest-vacancies-modal.mjs. */
.vac-modal-x{position:absolute;top:18px;right:18px;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center;border:none;border-radius:100px;
  background:#F4F5F6;color:#3C4043;cursor:pointer;z-index:1}
.vac-modal-x:hover{background:#E7E8EA;color:#131313}
.vac-modal-x svg{width:22px;height:22px;display:block}
/* Пока окно открыто, страница под ним не прокручивается: иначе на телефоне
   палец листает не форму, а список вакансий за ней. */
.vac-modal-on{overflow:hidden}

/* На телефоне окно раскрывалось во весь экран — во всю ширину и всю высоту, с
   прямыми углами. Форма отклика короткая, поэтому под ней оставалась пустая
   белая простыня, а крестик уезжал в самый верх экрана, к строке браузера.
   Заказчик увидел это на iPhone 16 Pro Max. Окно осталось карточкой: высота
   по содержимому, поля по краям, браузер центрирует её сам (margin:auto).
   Форма вырастет — карточка упрётся в max-height и начнёт прокручиваться
   телом, крестик при этом остаётся на месте. */
@media (max-width:560px){
  .vac-modal{width:calc(100vw - 24px);max-width:none;max-height:calc(100vh - 32px);
    border-radius:20px;padding:24px 18px}
  .vac-modal-x{top:12px;right:12px}
}

@media (max-width:860px){
  .vac-top{grid-template-columns:1fr}
  .vac-facts li span{flex:0 0 100px}
}

/* На телефоне колонка узкая, и длинное значение («сменный 2/2 или 5/2,
   10:00–21:00») в остаток строки не влезает — уезжает под подпись и
   начинается от левого края. Часть фактов тогда стоит в одну строку, часть в
   две, а выглядит это не как перенос, а как сбитая вёрстка. Ставим подпись
   над значением у всех сразу: одинаково и читается быстрее. */
@media (max-width:560px){
  .vac-facts{gap:12px}
  .vac-facts li{flex-direction:column;gap:0}
  .vac-facts li span{flex:none}

  /* Плитка на телефоне: знак поменьше, иначе он перетягивает на себя всю
     карточку — на 390px её ширина всего 358px, а знак нарисован под 300+. */
  .vac-dir{padding:22px 20px}
  .vac-dir-mark{font-size:132px;right:-14px;bottom:-24px}
  .vac-dir-mark--img{width:132px}

  /* В одну колонку фото уже не с чем равнять по высоте: держим его полосой в
     200px, иначе минимум от десктопа (280) съедает пол-экрана телефона. */
  .vac-top-p{min-height:200px}
}