/*
Theme Name: MGS
Description: Theme skeleton for the migration from the site builder. No design yet — just the page structure, so the site opens and there is somewhere to put the markup.
Version: 3.38
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mgs
*/

/*
 * Nunito Sans — the face of the source site, now served by the theme itself:
 * the visitor's browser makes no request to an outside host. One variable file
 * per subset covers the whole weight axis, 200 to 1000, and unicode-range keeps
 * a browser from fetching an alphabet the page does not use.
 *
 * The range matters: the cover heading is set in 900, and the first take of the
 * files carried 400 to 800 only, so the browser had to fake the weight and the
 * heading came out lighter than on the source. Checked on 07.09.
 * Source: the Google Fonts release of the family, files copied into the theme.
 */

/* latin */
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:200 1000;
  font-stretch:100%;
  font-display:swap;
  src:url(assets/fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:200 1000;
  font-stretch:100%;
  font-display:swap;
  src:url(assets/fonts/nunito-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* cyrillic */
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:200 1000;
  font-stretch:100%;
  font-display:swap;
  src:url(assets/fonts/nunito-sans-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* cyrillic-ext */
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:200 1000;
  font-stretch:100%;
  font-display:swap;
  src:url(assets/fonts/nunito-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* Nothing beyond the minimum needed to read the page. Real markup comes in its own stage. */
*{box-sizing:border-box}
/* Серая вспышка под пальцем на касании — заводская подсветка мобильных
   браузеров. Гасим на всём документе: свои состояния нажатия мы рисуем
   сами, а её прямоугольник вылезает поверх и по форме ссылки, не кнопки. */
html{-webkit-tap-highlight-color:transparent;
  /* Переход по якорю не должен прятать цель под шапкой, снятой с потока. */
  scroll-padding-top:var(--header-h);
  /* Плавная прокрутка к якорю (слово клиента 08.09). Признак стоит на всём
     документе, поэтому берёт ВСЕ якоря сайта разом — и ссылки в разметке, и
     переход по адресу с решёткой на той же странице. Приход на страницу по
     чужому адресу с якорем остаётся мгновенным, как и положено. */
  scroll-behavior:smooth}
/* Values measured on the source site, not picked by eye: brand blue, text and
   title colours of its theme, the light strip of the top bar, the dark navy of
   the footer and the greys its footer links use. */
:root{
  --brand:#3057a7;
  --title:#111;
  --text:#757575;
  --line:#e4e7ec;
  --top-bar:#f7f7f7;
  --footer-bg:#0f2f60;
  --footer-link:#999;
  --footer-contact:#bbb;
  --menu-link:#b5b5b5;
  /* Замер стенда со своим шрифтом: 144,5 пока полоса контактов идёт в две
     строки, и 123,7 когда помещается в одну. Округлено вверх. */
  --header-h:145px;
}
body{margin:0;font:16px/1.6 "Nunito Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#1d2733;background:#fff}
a{color:#2b4e9b}
/* The container of the source does not grow smoothly: it steps 540 / 720 / 960
   / 1140 and runs edge to edge below 576. Measured on the live pages. */
.wrap{width:100%;margin:0 auto;padding:0 15px}
/* ---- Header: the top strip with the contacts, then the logo, menu and social
   links. Narrow widths collapse the menu behind the button, the way the source
   does. ---- */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:100;background:#fff;padding:8px 16px}

/* Шапка снята с потока (fixed), а место под неё держит отступ у содержимого.
   Со sticky выходил дребезг: полоса контактов складывалась, страница на эту
   же высоту укорачивалась, прокрутка возвращалась к нулю, полоса
   раскрывалась — и так по кругу при медленном движении. Отступ считается по
   той же переменной, что и первый экран, и НЕ меняется при складывании. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;transition:box-shadow .3s}
#content{padding-top:var(--header-h)}
.site-header.is-scrolled{box-shadow:0 1px 3px rgba(17,17,17,.08)}
.header-top{max-height:60px;overflow:hidden;background:var(--top-bar);padding:10px 0;font-size:12px;font-weight:700;text-transform:uppercase;transition:max-height .3s,padding .3s}
/* From the first move of the scroll the strip folds away; it opens again only
   when the page is back at the very top. */
.site-header.is-scrolled .header-top{max-height:0;padding-top:0;padding-bottom:0}
.header-top-inner{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px 30px}
.header-contact-label{color:var(--text)}
.header-top a{color:var(--brand);text-decoration:none}

.header-main{padding:10px 0}
/* Отступ между рядами обнулён: на узких ширинах закрытое меню переносится
   на второй ряд и, даже при нулевой высоте, добавляло шапке лишние 16.
   Своё расстояние открытое меню держит само (отступ сверху у списка). */
.header-main-inner{display:flex;align-items:center;flex-wrap:wrap;gap:0 16px}
.site-logo{display:block;line-height:0}
.site-logo img{width:180px;height:auto;max-width:100%}

.nav-toggle{margin-left:auto;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:24px;height:2px;background:var(--menu-link);content:"";transition:transform .3s,opacity .2s}
.nav-toggle-bars{position:relative;margin:0 auto}
.nav-toggle-bars::before{position:absolute;top:-7px}
.nav-toggle-bars::after{position:absolute;top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;transition:background .1s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

.site-nav{width:100%;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .25s ease,visibility 0s linear .35s}
.site-nav.is-open{max-height:420px;opacity:1;visibility:visible;transition:max-height .35s ease,opacity .25s ease,visibility 0s}
.site-menu{list-style:none;margin:0;padding:16px 0 0;display:flex;flex-direction:column;gap:7px;text-transform:uppercase;font-size:14px;font-weight:800}
.site-menu a{color:var(--menu-link);text-decoration:none}
.site-menu .current-menu-item>a{color:var(--brand)}
.site-social{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:6px}
.site-social a{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;background:hsla(0,0%,95%,1);color:var(--brand);transition:background .3s,color .3s}

/* ---- Footer: four columns, dark navy. The subscribe button keeps its place;
   the form behind it belongs to the forms stage. ---- */
/* overflow:hidden keeps the travel of the appearing columns inside the page —
   without it their starting offset adds a sideways scrollbar. */
.site-footer{overflow:hidden;margin-top:60px;padding:60px 0;background:var(--footer-bg);color:var(--footer-link)}
.footer-cols{display:grid;gap:25px}
.footer-col{min-width:0}
.footer-title{margin:0 0 20px;color:#fff;font-size:16px;font-weight:700;text-transform:uppercase}
.footer-subscribe{display:inline-block;margin:10px 0;padding:10px 35px;line-height:20px;border-radius:1px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;text-decoration:none;transition:background .3s}
.footer-address{margin:10px 0 20px;display:grid;gap:7px;font-style:normal;font-size:14px;color:var(--footer-contact)}
.footer-contact-label{padding-right:5px}
.footer-address a{color:var(--footer-contact);font-weight:700;text-decoration:none}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-list a{color:var(--footer-link);font-size:14px;text-decoration:none}
/* The footer columns come in as they reach the screen: the contact column from
   the left, the three link columns from the right, one after another. A viewer
   who asked the system for less motion gets the finished state at once. */
.footer-col{opacity:0;transform:translateX(40px);transition:opacity .6s ease,transform .6s ease}
.footer-col-contact{transform:translateX(-40px)}
.footer-cols.is-visible .footer-col{opacity:1;transform:none}
.footer-cols.is-visible .footer-col:nth-child(2){transition-delay:.1s}
.footer-cols.is-visible .footer-col:nth-child(3){transition-delay:.2s}
.footer-cols.is-visible .footer-col:nth-child(4){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  /* Кому движение мешает, тому прокрутка остаётся мгновенной. */
  html{scroll-behavior:auto}
  .footer-col{opacity:1;transform:none;transition:none}
  .site-nav{transition:none}
}

/* Крошки в источнике набраны как надзаголовок: 12/16,8, вес 700, прописные,
   брендовым цветом, отступ снизу 20. Замер страницы статьи. */
.breadcrumbs{padding:20px 15px 0;margin:0 auto;font-size:12px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--brand)}
.breadcrumbs a{color:var(--brand);text-decoration:none}
/* Текущая страница — серым: замер источника даёт #9e9e9e при брендовых ссылках. */
.breadcrumbs .is-current{color:#9e9e9e}
.cards{list-style:none;margin:24px 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cards li{border:1px solid #e4e7ec;padding:16px}
main{min-height:50vh;padding-bottom:40px}

/* Черновые правила переключателя газа убраны: их вес (`.gas-switch a`) был выше
   нового класса и перебивал отбивку кнопок — та самая ловушка веса, что уже
   ломала слайдер. Вид кнопок теперь только в правилах карточки товара. */
table{border-collapse:collapse;margin:16px 0;width:100%}
th,td{border:1px solid #e4e7ec;padding:8px 12px;text-align:left;vertical-align:top}
th{width:220px;background:#f5f6f8;font-weight:600}

/* Catalog listing: a row per product, the way the source lists them. */
.sections{list-style:none;margin:16px 0;padding:0}
.sections li{display:inline-block;margin:0 16px 8px 0}
/* Статья раздела идёт под списком товаров, как в источнике. */
.section-text{margin:40px 0 0}

/* Шапка уровня каталога. Замеры источника на 1400: заголовок 40/52 прописными,
   ссылки на другие уровни 24/33,6 прописными серым 9e9e9e с отбивкой сверху 14
   и снизу 7, под ними брендовая черта 70×10. Место под ряд фильтра газа
   остаётся свободным — фильтры отложены (слово клиента 08.09). */
.catalog-head{padding-top:20px}
.catalog-head h1{margin:0;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--title)}
.catalog-levels{list-style:none;margin:0;padding:0}
/* Отбивка сверху стоит только у первой ссылки: у источника между строками
   ссылок 41, а не 55 — замер по снимку списка. */
.catalog-levels li{margin:0 0 7px;padding-top:14px}
.catalog-levels li + li{padding-top:0}
.catalog-levels a{font-size:24px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#9e9e9e;text-decoration:none}
.catalog-head::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 0}

/* Ряд выбора газа под чертой. Замер по источнику на 1400: подпись 20/28 весом
   700 цвета 111, кнопки 13/18,2 весом 500 прописными, отбивка 10/20, рамка 1,
   между подписью и кнопками и между кнопками — 7. Ряд 80 в высоту: по 20 над и
   под кнопками. Текущий газ ЗАЛИТ брендовым и остаётся в ряду. */
.catalog-gases{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:20px 15px}
.catalog-gases-label{margin:0;font-size:20px;line-height:28px;font-weight:700;color:#111}
.gas-row{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.gas-btn{display:inline-block;padding:10px 20px;border:1px solid var(--brand);font-size:13px;line-height:1.4;font-weight:500;text-transform:uppercase;text-decoration:none;color:var(--brand);background:transparent;transition:background .2s,color .2s}
.gas-btn.is-current{background:var(--brand);color:#fff}

/* Полоса фильтра над списком. Раскрытие делает сам браузер (свой узел
   раскрывающегося блока), скрипта на странице нет: выбор уезжает в адрес и
   применяется на сервере — так отфильтрованный список открывается по ссылке.
   Вид собран из уже принятых величин: кнопка как у выбора газа (13/18,2, вес
   500, прописные, отбивка 10/20, рамка 1 брендовая). */
.catalog-filter{padding:0 15px 20px}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.filter-drop{position:relative}
.filter-drop summary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--brand);background:#fff;color:var(--brand);font-size:13px;line-height:1.4;font-weight:500;text-transform:uppercase;cursor:pointer;list-style:none;transition:background .2s,color .2s}
.filter-drop summary::-webkit-details-marker{display:none}
.filter-drop summary::after{content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.filter-drop[open] summary,.filter-drop.is-set summary{background:var(--brand);color:#fff}
.filter-drop[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.filter-badge{display:inline-block;min-width:18px;padding:0 5px;background:#fff;color:var(--brand);font-size:12px;line-height:18px;text-align:center}
.filter-list{list-style:none;margin:6px 0 0;padding:6px 0;background:#fff;border:1px solid #e4e7ec}
.filter-pick{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--title);font-size:14px;line-height:1.4;text-decoration:none}
.filter-mark{flex:0 0 14px;width:14px;height:14px;box-sizing:border-box;border:1px solid #959595;background:#fff}
.filter-pick.is-on .filter-mark{border-color:var(--brand);background:var(--brand)}
.filter-name{flex:1 1 auto;min-width:0}
.filter-count{color:#9e9e9e;font-size:13px}
.filter-total{margin:0;color:#9e9e9e;font-size:14px;line-height:1.4}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:12px 0 0;padding:0}
.filter-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:hsla(220,55%,42%,.06);color:var(--brand);font-size:13px;line-height:1.4;text-decoration:none}
.filter-chip-x{font-size:15px;line-height:1}
.filter-clear{display:inline-flex;align-items:center;padding:6px 4px;color:#9e9e9e;font-size:13px;line-height:1.4;text-decoration:underline}


/* Обычная страница блоками. Замеры сняты с источника 08.09 на окне 1400:
   заголовок страницы и раздела 40/52 вес 700 прописными чёрный; вводный текст
   20/32 вес 500 цвета 757575 выключкой по формату, отбивка абзаца 14, колонка
   8 из 12, справа знак 350 и синяя кнопка; текст разделов 15/24 тем же весом и
   цветом, тоже выключкой; снимок раздела 540×440 справа; сетка снимков 370×246
   слева, текст справа колонкой 350. Плитка: колонка в четверть, рамка 1 цвета
   eee, значок 40 брендовый с отбивкой 15, подпись 17,5/24,5 вес 900 прописными
   по центру, отбивка 10, черта 40×2 брендовая с отбивками 15, у блока снизу 50. */
.page-part{padding-top:20px;overflow-x:hidden}
.page-part h1,.page-part h2{margin:0;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--title)}
.page-part h1::after,.page-part h2::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 0}
.page-lead-inner,.page-cols{display:flex;flex-direction:column;gap:24px;margin-top:24px}
.page-lead-text p{margin:0 0 14px;font-size:20px;line-height:1.6;font-weight:500;color:var(--text);text-align:justify}
.page-lead-side{text-align:center}
.page-lead-side img{width:350px;max-width:100%;height:auto}
.page-lead-side p{margin:10px 0 0}
.page-cols-text p{margin:0 0 14px;font-size:15px;line-height:1.6;font-weight:500;color:var(--text);text-align:justify}
.page-cols-pic img,.page-grid img{display:block;width:100%;height:auto}
.page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.page-tiles{padding:0 0 50px}
.tiles-list{display:flex;flex-wrap:wrap;list-style:none;margin:30px 0 0;padding:0}
.tile{flex:0 0 100%;box-sizing:border-box;padding:40px 10px;border:1px solid #eee;text-align:center}
.tile + .tile{border-top:0}
.tile-icon{display:block;margin:0 0 15px;color:var(--brand)}
.tile-icon svg{width:40px;height:40px}
.tile h3{margin:0 0 10px;font-size:17.5px;line-height:1.4;font-weight:900;text-transform:uppercase;color:var(--title)}
.tile h3::after{content:"";display:block;width:40px;border-top:2px solid var(--brand);margin:15px auto 0}

/* Страница без разделов (поддержка, политика): заголовок с брендовой чертой,
   подзаголовок и текст одним потоком. Замеры источника 08.09: заголовок 40/52
   прописными, подзаголовок 28/39,2 весом 700 с отбивкой 20, текст 16/25,6
   цвета 757575. */
.page-plain{padding-top:20px}
.page-plain h1{margin:0;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--title)}
.page-plain h1::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 30px}
.page-plain h2{margin:0 0 20px;font-size:28px;line-height:39.2px;font-weight:700;color:var(--title)}
.page-plain p{margin:0 0 20px;font-size:16px;line-height:25.6px;font-weight:500;color:var(--text)}

/* Полоса-промо: три карточки во всю ширину экрана, у каждой свой снимок фоном.
   Замеры источника 08.09: карточка 461,7×350 при 1385 (треть ширины), поля 40,
   подпись 17,5/24,5 прописными белая с отбивкой 20, текст 14/22,4 белый семь
   десятых по центру, кнопка контурная белая 13-м с полями 10 и 20.
   Затемнение 60 процентов и укрупнение при наведении — ИЗ ИСТОЧНИКА, не своё
   ([[feedback-images-from-macket-no-invention]]). */
.promo-band{display:flex;flex-direction:column}
.promo-card{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:350px;padding:40px;overflow:hidden;background-color:#333;background-position:50% 50%;background-size:cover;color:#fff;text-align:center;text-decoration:none}
.promo-card::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.promo-card-in{position:relative;z-index:1;display:block}
.promo-card-title{display:block;margin:0 0 20px;font-size:17.5px;line-height:24.5px;font-weight:700;text-transform:uppercase}
.promo-card-text{display:block;font-size:14px;line-height:22.4px;font-weight:500;color:rgba(255,255,255,.7)}
.promo-card-btn{display:inline-block;margin:20px 0 0;padding:10px 20px;border:1px solid #fff;font-size:13px;line-height:18.2px;color:#fff;transition:background-color .3s,color .3s}
/* Наведение живёт на САМОЙ кнопке, как у источника: контурная белая
   заливается белым, надпись становится чёрной. Укрупнения карточки нет —
   снято по слову клиента 08.09, хотя у источника оно есть. */
.promo-card-btn:hover{background-color:#fff;color:#000}

/* Офис на странице контактов: половина под текст, половина под карту, стороны
   чередуются — так у источника. Замеры 08.09: блок во всю ширину, высота 430,
   половины по 692,5 при 1385; поле текста 50; заголовок 28/39,2 прописными вес
   700, отбивка 7; текст 14/22,4 цвета 757575; ссылки брендовые. */
.office{display:flex;flex-direction:column;overflow-x:hidden}
.office-text{box-sizing:border-box;padding:40px 15px}
.office h2{margin:0 0 7px;font-size:28px;line-height:39.2px;font-weight:700;text-transform:uppercase;color:var(--title)}
.office-text p{margin:0 0 14px;font-size:14px;line-height:22.4px;font-weight:500;color:var(--text)}
.office-text a{color:var(--brand);text-decoration:none}
.office-text a:hover{text-decoration:underline}
.office-map{min-height:300px;background:#eef1f5}
.office-map iframe{display:block;width:100%;height:100%;min-height:300px;border:0}

/* Представители: ряд из двух половин, текст слева, знак справа. Замеры 08.09:
   половины по 570 внутри 1140, знак 383×121, имя 28/39,2 прописными с отбивкой
   20, заголовок раздела 40/52 прописными с брендовой чертой. */
.reps-block{padding:40px 0;overflow-x:hidden}
.reps-block>.wrap>h2{margin:0;font-size:40px;line-height:52px;font-weight:700;text-transform:uppercase;color:var(--title)}
.reps-block>.wrap>h2::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 30px}
.reps{list-style:none;margin:0;padding:0}
.rep{display:flex;flex-direction:column;gap:20px;padding:0 0 40px}
.rep h3{margin:0 0 20px;font-size:28px;line-height:39.2px;font-weight:700;text-transform:uppercase;color:var(--title)}
/* Правое поле 15, как гуттер колонки у источника: текст 540 при половине 570. */
.rep-text{box-sizing:border-box;padding-right:15px}
.rep-text p{margin:0 0 14px;font-size:14px;line-height:22.4px;font-weight:500;color:var(--text)}
.rep-text a{color:var(--brand);text-decoration:none}
.rep-text a:hover{text-decoration:underline}
.rep-logo img{display:block;max-width:383px;width:100%;height:auto}

/* Раздел вопросов на обычной странице. Поведение то же, что в статье, а размеры
   свои: замеры источника 08.09 — отбивки блока 60, заголовок 30/42, вопрос
   21/29,4 весом 700 цвета 111 с брендовой чертой под ним, ответ 14/22,4 с
   полями 25, между пунктами черта 1 цвета dbdbdb. */
.page-faq{padding:60px 0}
.page-faq h2{margin:0 0 7px;font-size:30px;line-height:42px;font-weight:700;color:var(--title)}
.page-faq .faq-item{padding:10px;border-bottom:1px solid #dbdbdb}
/* Поле снизу 22, а не 15: у источника внутри вопроса своя отбивка 7, и высота
   полосы вопроса выходит 67,4, а не 60,4. Черты под вопросом нет — снята по
   слову клиента 08.09, у источника она там есть. */
.page-faq .faq-q{position:relative;margin:0;padding:15px 34px 22px 0;font-size:21px;line-height:29.4px;font-weight:700;color:var(--title);cursor:pointer;-webkit-tap-highlight-color:transparent}
.page-faq .faq-q:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.page-faq .faq-q::before{content:"";position:absolute;right:0;top:50%;width:22px;height:22px;margin-top:-11px;border:1px solid currentColor;border-radius:50%}
.page-faq .faq-q::after{content:"";position:absolute;right:0;top:50%;width:23px;height:23px;margin-top:-11px;background:linear-gradient(currentColor,currentColor) center/10px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 10px no-repeat;transition:background-size .3s}
.page-faq .faq-item.open>.faq-q::after{background-size:10px 2px,2px 0}
.page-faq .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.page-faq .faq-item.open>.faq-a{grid-template-rows:1fr}
.page-faq .faq-a-in{overflow:hidden;min-height:0}
.page-faq .faq-a-in>*{margin:25px 0;font-size:14px;line-height:22.4px;font-weight:500;color:var(--text)}
.page-faq .faq-a-in ul{padding-left:20px}
.page-faq .faq-a-in li{margin:0}
/* Без сценария ответы остаются открытыми: пустой список вопросов хуже списка
   без сворачивания. */
.page-faq .faq:not([data-ready]) .faq-a{grid-template-rows:1fr}
.page-faq .faq:not([data-ready]) .faq-q{cursor:auto}
.page-faq .faq:not([data-ready]) .faq-q::before,.page-faq .faq:not([data-ready]) .faq-q::after{display:none}

/* Нижний блок «свяжитесь с нами»: слева вводная строка и четыре плитки
   контактов, справа форма заявки — её половина пока пустая, форма переносится
   на шаге форм. Замеры источника (08.09): отбивки блока 30 сверху и 40 снизу;
   вводная строка 14/21 цвета 999 с полем 40 снизу; плитка 25 по вертикали и 15
   по горизонтали, черта 1 цвета eee слева и снизу, содержимое по центру;
   значок 50 брендовый с полем 30 снизу; подпись 16/25,6 прописными цвета 999;
   значение 14/22,4 весом 700 брендовым. */
.page-contact{padding:30px 0 40px}
.page-contact-inner{display:flex;flex-direction:column}
.page-contact-intro{margin:0 0 40px;font-size:14px;line-height:21px;font-weight:500;color:#999}
.contact-tiles{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.contact-tile{flex:0 0 100%;box-sizing:border-box}
.contact-tile>a,.contact-tile-body{display:block;padding:25px 15px;text-align:center;text-decoration:none}
/* Черты идут ТОЛЬКО МЕЖДУ плитками: наружных слева и снизу у источника нет
   (слово клиента 08.09). В один столбец это черта под каждой, кроме последней.
   Черта висит на самой плитке, а не на её содержимом: плитки ряда тянутся до
   общей высоты, а содержимое — нет, и черта обрывалась бы на короткой. */
.contact-tile:not(:last-child){border-bottom:1px solid #eee}
.contact-tile-icon{display:block;margin:0 0 30px;line-height:1;color:var(--brand)}
.contact-tile-label{display:block;font-size:16px;line-height:25.6px;color:#999;text-transform:uppercase}
.contact-tile-value{display:block;font-size:14px;line-height:22.4px;font-weight:700;color:var(--brand)}
/* Между строками адреса у источника стоит ПУСТАЯ строка: Белград и Даугавпилс
   разделены, а не идут подряд. Отсюда и высота плитки адреса — на строку
   больше соседней (замер 08.09: 268,5 против 179). */
.contact-tile-value + .contact-tile-value{margin-top:22.4px}
/* Нижняя черта под формой приходит из настроек САМОЙ формы (в её оформлении
   нижняя граница включена). У источника её не видно во встроенной форме потому,
   что конструктор передаёт форме своё переопределение оформления — все четыре
   границы выключены. У нашего способа вставки такой ручки нет, поэтому снимаем
   черту правилом: три части селектора против их двух, вес выше — порядок
   подключения роли не играет ([[feedback-css-specificity-over-base]]).
   Правило общее — и для встроенной формы, и для выезжающей панели подписки:
   у источника в панели черта есть, но она даёт лишнюю полосу прокрутки, и
   клиент просил снять её и там (08.09). Саму форму в кабинете не трогаем. */
body .b24-form-wrapper.b24-form-border-bottom{border-bottom:0}
/* Выезжающая панель формы: их собственное правило
   `.b24-window-panel .b24-form-wrapper{…min-height:100%}` живёт в их же файле
   оформления (проверено живьём 08.09: app.bundle.min.css портала, БЕЗ
   important). Их файл подключается их скриптом ПОЗЖЕ нашего, поэтому равный по
   весу селектор проиграл бы по порядку — берём вес: три части против их двух
   ([[feedback-css-specificity-over-base]]). Слово клиента 08.09: 99%. */
body .b24-window-panel .b24-form-wrapper{min-height:99%}
.contact-tile>a:hover .contact-tile-value{text-decoration:underline}

/* Bottom slider: series, one card at a time, the way the source shows them.
   The card takes the whole container there and the dots below count the series,
   which is why the cards fade into each other instead of sliding in a row. */
.series-slider{padding:50px 0 20px;background:#fff}
.series-swiper{position:relative;padding-bottom:44px}
/* Стиль библиотеки ставит слайду display:block и грузится ПОСЛЕ темы,
   поэтому свой вес поднят предком: иначе колонка карточки не собирается. */
.series-swiper .series-card{display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center;height:auto}
.series-pic img{max-width:100%;height:auto;display:block;margin:0 auto}
.series-body{flex:1 1 auto;min-width:0;text-align:center}
.series-label{margin:0 0 15px;color:var(--brand);font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
/* Полоса под плашкой: у источника это черта 70×10 брендового цвета по центру,
   тем же приёмом, что и белая черта под заголовком новостей. */
.series-card h3::before{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:0 auto 30px}
.series-card h3{margin:0 0 14px;font-size:28px;line-height:1.2;font-weight:700;color:#031230}
.series-card p{color:#031230}
.series-body .btn{margin-top:10px}
.series-swiper .swiper-pagination-bullet-active{background:var(--brand)}

/* Compatibility lists on the product page. */
.fits{list-style:none;margin:12px 0;padding:0}
.fits li{display:inline-block;border:1px solid #e4e7ec;padding:6px 14px;margin:0 8px 8px 0}
.sections b{display:inline-block;border-bottom:2px solid #2b4e9b}

/* Structural parts of an ordinary page: tiles, offices, representatives. */
/* Прежняя общая сетка осталась только у плиток: представители получили свою
   раскладку рядами (текст слева, знак справа), и общая сетка ставила их
   четырьмя узкими колонками в рамках. */
.tiles{list-style:none;margin:24px 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tiles li{border:1px solid #e4e7ec;padding:16px}
.tile-label{margin:0 0 4px;color:#757575;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.office-map{color:#757575;font-size:13px}
.cards-block{margin-top:24px}
.cards-grid{list-style:none;margin:16px 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cards-grid li{border:1px solid #e4e7ec;padding:16px}
.cards-grid img{max-width:100%;height:auto}

/* ── Buttons: two of them on the site, the green one only on the cover ────── */
.btn{display:inline-block;padding:10px 35px;border:0;font-size:13px;font-weight:700;line-height:1.55;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background .2s}
.btn-blue{background:var(--brand)}
.btn-green{background:#7fa630}

/* ── Главная: обложка ────────────────────────────────────────────────────── */
/* Первый экран занимает то, что осталось от окна под шапкой, а не жёсткие
   720. svh вместо vh: на телефоне vh считается по окну БЕЗ адресной строки,
   и обложка вылезает за экран; строка с vh оставлена для старых браузеров.
   Высота шапки — в переменной: значения по ветвям ниже, точное значение
   ставит сценарий замером РАЗВЁРНУТОЙ шапки (полоса контактов переносится не
   на границе ветки, а там, где перестаёт помещаться телефон с почтой — около
   445). Замер идёт при загрузке, после подхвата шрифта и при смене ширины;
   прокрутка на него не влияет, иначе страница дёргалась бы. */
.home-cover{position:relative;display:flex;align-items:center;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));background:#0b1b33 center/cover no-repeat;color:#fff;text-align:center}
/* Затемнение снимка: у источника это слой rgba(3,18,48,.65) поверх картинки.
   Без него белый заголовок тонет в светлых местах снимка. */
.home-cover::before{content:"";position:absolute;inset:0;background:rgba(3,18,48,.65)}
.home-cover-inner{position:relative;padding:60px 15px}
/* Размер заголовка на узких ширинах источник НЕ уменьшает: он всюду 60/84,
   а высота обложки набегает переносами строк. Замерено на 375, 768, 992, 1440. */
.home-cover h1{margin:0 0 25px;font-size:60px;line-height:1.4;font-weight:900;color:#fff}
.home-cover-sub{margin:0 0 35px;font-size:26px;line-height:1.2;font-weight:700;text-transform:uppercase}

/* ── Главная: четыре преимущества ────────────────────────────────────────── */
/* Сверху 80: у источника над карточками стоит пустой держатель заголовка
   с отступом снизу 80 — замерено на живой главной (низ обложки 1024,
   верх первой карточки 1104). Снизу 50 — отступ самой секции. */
.home-features{padding:80px 0 50px}
/* minmax(0,1fr) вместо 1fr: иначе длинное слово в одной карточке
   раздвигает её колонку и ряд перестаёт быть равным. */
.features-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* Отступы и рамка сняты с источника: 40 сверху и снизу, 30 по бокам, рамка
   1px #eee ВОКРУГ каждой карточки (у источника g-brd-around + gray-light-v4),
   а не только по сторонам: соседние рамки и дают сетку, крайние — контур блока. */
.feature{padding:40px 30px;text-align:center;border:1px solid #eee}
.feature-icon-holder{display:block;margin-bottom:15px;color:var(--brand)}
.feature h2{margin:0;font-size:17.5px;line-height:1.4;font-weight:900;text-transform:uppercase;color:#000}
/* Черта под заголовком: у источника отдельный элемент 40×2 брендового цвета
   с отступами 15 сверху и снизу (g-width-40 g-brd-bottom g-brd-2 g-my-15).
   Замер источника: 15 от текста до черты и 15 от черты до нижнего отступа 40. */
.feature h2::after{content:"";display:block;width:40px;height:0;margin:15px auto;border-bottom:2px solid var(--brand)}

/* ── Главная: знаки тех, кто нам доверяет ────────────────────────────────── */
.home-trust{padding:0 0 30px;text-align:center}
.home-trust h2{margin:0 0 30px;font-size:28px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
/* Знаки стоят в колонках и занимают их целиком: у источника это 322-350 точек
   ширины, а не мелкие значки. На узких — по два в ряд. */
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:30px;align-items:center;justify-items:center}
.trust-list img{max-width:100%;height:auto}

/* ── Главная: о компании ─────────────────────────────────────────────────── */
/* Появление сбоку начинается за краем экрана: до отработки колонка стоит
   на 40 левее или правее места. На узких это давало боковую прокрутку
   всей страницы, которая пропадала, как только блок появлялся. Обрезаем
   вылет по горизонтали ЗДЕСЬ, у самих секций, а не у страницы целиком. */
.home-about{padding:60px 0;overflow-x:hidden}
.home-about-inner{display:flex;flex-direction:column;align-items:center;gap:30px}
.home-about-text{flex:1 1 auto;min-width:0;max-width:760px}
.home-about-text p{font-size:20px;line-height:1.6;color:var(--text)}
/* Правая колонка: знак компании, под ним кнопка — так стоит в источнике. */
.home-about-side{flex:0 0 auto;text-align:center}
.home-about-side p{margin:16px 0 0}
.home-about-pic img{max-width:350px;height:auto}

/* ── Главная: новости и анонсы ───────────────────────────────────────────── */
/* Тёмная полоса источника накрывает заголовок и первый анонс, дальше белое. */
.journal-head{background:var(--footer-bg);padding:30px 0}
.journal-head h2{margin:0;font-size:35px;line-height:1.1;font-weight:700;text-transform:uppercase;color:#fff}
/* Белая черта 70×10 под заголовком — она есть в источнике. */
.journal-head h2::after{content:"";display:block;width:70px;border-top:10px solid #fff;margin:30px 0 0}
.journal-announce{padding:30px 0;overflow-x:hidden}
.journal-announce.is-dark{background:var(--footer-bg);padding:0 0 30px}
.journal-announce.is-dark .announce-body h3 a{color:#fff}
.journal-announce.is-dark .announce-body p{color:#dbdbdb}
.announce-row{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.announce-pic{max-width:100%}
.announce-pic img{max-width:100%;height:auto;display:block}
.announce-body{flex:1 1 auto;min-width:0}
.announce-body h3{margin:0 0 12px;font-size:28px;line-height:1.3;font-weight:700;text-transform:uppercase}
.announce-body h3 a{color:var(--title);text-decoration:none}
/* Плашка места и даты события: первой строкой у анонса, как в источнике. */
.announce-place{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--footer-bg)}
.journal-announce.is-dark .announce-place{color:#fff}
.journal-news{padding:50px 0 0}
.news-list{list-style:none;margin:0;padding:0;display:grid;gap:30px;grid-template-columns:1fr}
/* Карточка — колонка, поэтому кнопка прижимается к низу и ряд выглядит ровным
   при текстах разной длины. Размер заголовка снят с источника: 17,5/24,5. */
.news-list li{display:flex;flex-direction:column}
/* Порядок карточки: картинка, под ней заголовок (слово владельца 07.09).
   Правило общее для обычных карточек новостей — и на главной, и в журнале;
   анонсов на главной оно НЕ касается, у них своя разметка. */
.news-list h3{margin:0 0 12px;font-size:17.5px;line-height:1.4;font-weight:700;text-transform:uppercase}
.news-list h3 a{color:#000;text-decoration:none}
/* Все карточки в ряду с одинаковой картинкой: доля 16 к 9 — та же, что в
   источнике (замер живой главной: 350×197, файлы 540×304). Долю держит
   САМА ссылка, а картинка заполняет её целиком с обрезкой по центру.
   Почему не доля на самой картинке: движок проставляет ей в разметке
   ширину и высоту, и при заданных обеих сторонах доля не работает —
   именно это дало разновысокие обрезанные кадры. */
.news-pic{display:block;margin-bottom:20px;aspect-ratio:16/9;overflow:hidden}
.news-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.news-more{margin-top:auto;padding-top:12px}
.journal-all{padding:20px 0;text-align:center}

/* ── Главная: нижние тексты ──────────────────────────────────────────────── */
.home-text{padding:30px 0}
.home-text h2{margin:0 0 20px;font-size:28px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#000}
.home-text h3{margin:0 0 20px;font-size:24.5px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#000}
.home-text p,.home-text li{font-size:14px;line-height:1.6;color:#000}

/* ── Появление блоков при прокрутке ──────────────────────────────────────── */
/* Прячем только тогда, когда наблюдатель работает: иначе при выключенном
   скрипте блок остался бы невидимым навсегда. Метку ставит сам скрипт. */
.has-reveal [data-reveal]{opacity:0;transition:opacity .7s ease,transform .7s ease}
.has-reveal [data-reveal="up"]{transform:translateY(24px)}
.has-reveal [data-reveal="left"]{transform:translateX(-40px)}
.has-reveal [data-reveal="right"]{transform:translateX(40px)}
.has-reveal [data-reveal].is-revealed{opacity:1;transform:none}

/* ── Страница «не найдено» ───────────────────────────────────────────────── */
/* Замеры сняты с живой страницы источника 08.09 на 1440: у блока поля 30
   сверху и снизу, колонка 1110; число 150/195 весом 700 ЧЁРНЫМ (не брендовым)
   прописными с отбивкой 20; заголовок 28/39,2 весом 900; текст 14/22,4 весом
   500 цвета 757575 с отбивкой 14; кнопки 81,4×40,2, шрифт 13 прописными. */
.page-404{padding:30px 0}
.page-404-code{margin:0 0 20px;font-size:90px;line-height:117px;font-weight:700;text-transform:uppercase;color:#000}
/* Под числом брендовая черта, как у источника: 70 на 10 с отбивкой 30
   сверху (замер 08.09 — полоса числа 235 при строке 195, разница ровно на
   черту с отбивкой). Отбивка 30, а не 20 как у заголовков разделов. */
.page-404-code::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:30px 0 0}
.page-404 h1{margin:0 0 7px;font-size:28px;line-height:39.2px;font-weight:900;color:var(--title)}
.page-404-text{margin:0 0 14px;font-size:14px;line-height:22.4px;font-weight:500;color:var(--text)}
/* Кнопки у источника лежат ОТДЕЛЬНЫМ блоком ниже, и между текстом и ними
   64 (замер 08.09: текст кончается на 477,3, кнопки начинаются на 541,3).
   Пишем всю 64, а не «добавку»: соседние отбивки схлопываются в бо́льшую, и
   14 у текста в сумму не войдут. */
.page-404-actions{margin:64px 0 0;display:flex;flex-wrap:wrap;gap:14px}
/* У источника кнопки этой страницы уже наших обычных: поле 20 против 35
   (замер 08.09: 81,4 и 113,9 на 40,2). Сужаем ТОЛЬКО здесь — остальные
   кнопки сайта клиент уже принял. Контурной поле на пиксель меньше:
   рамка добавляет свой. */
.page-404-actions .btn{padding:10px 20px}
.page-404-actions .btn-line{padding:9px 19px}

/* ── Журнал: список публикаций ────────────────────────────────────────────
   Замер живого списка источника: секция 50 сверху и 100 снизу, контейнер 1140,
   три колонки по 380 (внутри 350), отступ снизу карточки 60, заголовок
   страницы 40/52 прописными. Сами карточки — общий блок .news-list, тот же,
   что на главной: картинка сверху, заголовок под ней (слово владельца 07.09;
   в источнике на этой странице заголовок стоит НАД картинкой). */
.journal-list{padding:50px 0 100px}
.journal-list h1{margin:0 0 30px;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:#000}
/* Черта под заголовком страницы — общий мотив сайта 70×10 брендового цвета,
   отступ от текста 20 (в источнике заголовок с отступом -10 и черта с 30). */
.journal-list h1::after,.article h1::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 0}
.journal-list .news-list{gap:60px 30px}
.journal-list .news-list p{font-size:14px;line-height:1.8;color:#031230}

/* ── Журнал: страница статьи ──────────────────────────────────────────────
   Замер живой статьи: заголовок 40/52 прописными чёрным, обложка во всю
   ширину контейнера долей 3 к 2, текст 16/25,6 цвета #757575 с отступом 14,
   подзаголовки разделов 24/33,6 прописными #111 (14 сверху, 7 снизу). */
.article{padding:20px 0 60px}
.article h1{margin:0 0 30px;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:#000}
/* Отдельной обложки у статьи нет: снимок стоит внутри текста, как в
   источнике. Картинка тела занимает всю ширину, доля 3 к 2 — замер
   источника (1110×740 при 1440). */
.article-body figure img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
.article-body{font-size:16px;line-height:1.6;color:var(--text)}
.article-body p{margin:0 0 14px}
.article-body h2{margin:0 0 7px;padding-top:24px;font-size:24px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
.article-body h3{margin:0 0 7px;padding-top:14px;font-size:20px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
/* Перечни в статьях источника лежат прямо внутри абзацного блока; разбор
   теперь их сохраняет. Отступы по тексту статьи: 14 снизу у перечня, 7 у пункта. */
.article-body ul,.article-body ol{margin:0 0 14px;padding-left:20px}
.article-body li{margin:0 0 7px}
.article-body figure{margin:20px 0}
.article-body img{display:block;max-width:100%;height:auto}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 20px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;font-size:14px}
/* Широкая таблица прокручивается САМА, а не тянет страницу вбок: у сравнений
   до семи столбцов иначе появлялась горизонтальная прокрутка всей страницы на
   узком экране. Так же сделано в источнике (landing-table-container). */
.article-body .table-scroll{margin:0 0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body .table-scroll table{min-width:560px;margin:0}

/* Карточка товара. Замеры сняты с живой карточки второй серии по метану на
   1440: заголовок 40/52 прописными с чертой 70×10, кнопки газа 15/21 с
   отбивкой 8 и 20, герой на брендовом синем с фото 540 и подзаголовком
   23/32,2, «Features» полосами 635 с чередованием 1a3d84 и 3057a7 и снимком
   445 в колонке 475, документы двумя колонками 380 и 760. */
.product-head{padding-top:20px}
.product h1{margin:0 0 30px;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--title)}
.product h1::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 0}
.gas-switch{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.gas-switch-item{display:inline-block;padding:8px 20px;border:1px solid var(--brand);font-size:15px;line-height:1.4;font-weight:500;text-transform:uppercase;text-decoration:none;color:var(--brand);transition:background .2s,color .2s}
.gas-switch-item.is-current{background:var(--brand);color:#fff}

/* Отбивка симметричная, 50 сверху и снизу на всех ширинах — слово владельца
   08.09. У источника низ держало фото, но у карточек без фото полоса
   схлопывалась. */
.product-hero{padding:50px 0;background:var(--brand);color:#fff}
.product-hero-inner{display:flex;flex-direction:column;gap:30px}
.product-hero-pic img{display:block;width:100%;max-width:540px;height:auto;margin:0 auto}
/* Плашка состояния над подзаголовком. Цвета названы владельцем 08.09:
   «в разработке» 124,179,66, «полевые испытания» 127,166,48. */
.product-label{margin:0 0 15px;font-size:16px;line-height:1.6;font-weight:700;text-transform:uppercase;color:#7cb342}
.product-label.is-field{color:#7fa630}
.product-subtitle{margin:0 0 7px;font-size:23px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#fff}
.product-lead{padding-top:14px;font-size:14px;line-height:1.6}
.product-lead p{margin:0 0 14px}
.product-lead p:last-child{margin-bottom:0}
.product-doc{margin:20px 0 0;font-size:16px;line-height:1.6;font-weight:700;text-transform:uppercase}
/* Значок листа и отбивка 10 до текста — как в источнике. Подчёркивание
   появляется при наведении, ветка наведения стоит в конце файла. */
.product-doc a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.product-doc .file-icon{flex:0 0 auto}
/* На узких ширинах кнопки во всю ширину, каждая своей строкой — слово
   владельца 08.09; от 768 они снова по содержимому, ветка в конце файла. */
.product-actions{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 0}
.product-actions .btn{width:100%;text-align:center}
.btn-dark{background:#0c285f}
/* Контурная брендовая: у источника ею стоит «Home» на странице «не найдено».
   Наведение — по правилам источника: заливается брендовым, надпись белеет. */
.btn-line{background:transparent;border:1px solid var(--brand);color:var(--brand);padding:9px 19px;transition:background .3s,color .3s}

.product-features{padding:50px 0 30px}
.product-features-inner{display:flex;flex-direction:column;gap:30px}
.product-features-text h2{margin:0 0 20px;font-size:35px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--title)}
.product-intro{margin:0 0 65px;font-size:16px;line-height:1.6;color:#4a4a4a}
.product-intro p{margin:0 0 14px}
.product-intro p:last-child{margin-bottom:0}
.product-cards{list-style:none;margin:0;padding:0}
/* Полосы чередуются, как в источнике: тёмная, светлее, тёмная… */
.product-card{background:#1a3d84;color:#fff}
.product-card:nth-child(even){background:var(--brand)}
.product-card h3{margin:0;padding:20px;font-size:17.5px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#fff}
.product-card-text{padding:0 20px 20px;font-size:15px;line-height:1.6}
.product-card-text p{margin:0 0 8px}
.product-card-text p:last-child{margin-bottom:0}
/* На узких ширинах снимок идёт первым, над заголовком раздела — слово
   владельца 08.09. В разметке он после текста, потому что от 992 стоит справа;
   порядок возвращается в широкой ветке. */
.product-features-pic{order:-1}
.product-features-pic img{display:block;width:100%;max-width:445px;height:auto;margin:0 auto}

.product-section{padding:30px 0}
.product-section h2{margin:0 0 20px;font-size:35px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
.product-shots{display:grid;gap:20px}
.product-shots img{display:block;width:100%;height:auto}

/* Блок «для каких датчиков». Замеры источника на 1440: полоса 0f2f60 с
   отбивкой 30, надпись 14/19,6, заголовок 35/38,5 и черта под ним; строки —
   каталожные карточки: плашка модели 110×32,4 (14/22,4 белым на 111), черта до
   снимка, круглый снимок 170 (на узких 120), подпись состояния 14/19,6,
   название 24,5/34,3 прописными, текст 14/22,4. */
.product-fits{padding:30px 0;background:var(--footer-bg);color:#fff}
.product-fits-label{margin:0 0 20px;font-size:14px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#fff}
.product-fits h2{margin:0 0 7px;font-size:35px;line-height:1.1;font-weight:700;text-transform:uppercase;color:#fff}
.product-fits h2::after{content:"";display:block;width:70px;border-top:10px solid #fff;margin:20px 0 0}

.product-fits-rows{padding:20px 0 30px}
.fits-rows{list-style:none;margin:0;padding:0}
/* Зазор 24 между текстом, снимком и плашкой — только на узких ширинах (слово
   владельца 08.09); от 768 строка идёт в ряд и зазор снимается. */
.fits-row{display:flex;flex-direction:column;align-items:center;gap:24px;padding:25px 10px;text-align:center}
.fits-body{order:1}
.fits-left{order:2;display:flex;flex-direction:column;align-items:center;width:100%}
/* Снимок ВПИСЫВАЕМ в круг, а не обрезаем по нему: у источника для этих карточек
   лежит файл с вырезанным фоном, вокруг товара в кадре и так свободное поле.
   Своей отбивки у снимка нет — по слову клиента 08.09. Круг залит голубым в
   пять процентов и белеет при наведении на строку (переход 0,2 с). */
.fits-pic{order:1;display:block;width:120px;height:120px;margin:0 0 20px;border-radius:50%;overflow:hidden;background:hsla(220,55%,42%,.05);transition:background .2s ease-in}
.fits-pic img{display:block;width:100%;height:100%;object-fit:contain}
/* Плашка модели стоит НА черте: у источника черта проходит через ряд. */
.fits-tagbox{order:2;position:relative;display:flex;justify-content:center;width:100%}
.fits-tagbox::before{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid #ccc}
.fits-tag{position:relative;width:110px;margin:0;padding:5px 10px;box-sizing:border-box;background:#111;font-size:14px;line-height:1.6;font-weight:700;text-align:center;color:#fff;transition:background .2s ease-in}
.fits-label{margin:0 0 5px;font-size:14px;line-height:1.4;font-weight:700;text-transform:uppercase;color:#3949a0}
.fits-label.is-development{color:#7cb342}
.fits-label.is-field{color:#7fa630}
.fits-row h3{margin:0 0 10px;font-size:24.5px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
.fits-row h3 a{color:var(--title);text-decoration:none}
.fits-text{margin:0;font-size:14px;line-height:1.6;color:var(--text)}

.product-docs{padding:30px 0}
.product-docs-inner{display:flex;flex-direction:column;gap:20px}
.product-docs-title h2{margin:0 0 7px;font-size:35px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
.product-docs-list{display:grid;gap:20px}
/* Значок листа слева от названия группы: в источнике он из платного набора
   значков, цвет 3949a0, кегль 24 и отбивка 10 до текста. */
.product-docs-group h3{display:flex;align-items:center;gap:10px;margin:0 0 7px;font-size:20px;line-height:1.6;font-weight:700;color:var(--title)}
.product-docs-group h3 .file-icon{flex:0 0 auto;color:#3949a0}
.product-docs-group ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.6}
.product-docs-group li{margin:0 0 4px}
/* Подчёркивание у ссылок на файлы — только при наведении (слово владельца
   08.09); ветка наведения в конце файла. */
.product-docs-group a{text-decoration:none}
.product-docs-note{color:var(--text)}

/* Набор: синей полосы у источника нет — общая фотка по центру (ширина блока
   источника 860) и под ней кнопка запроса с отбивкой 28. */
.product-set{padding:24px 0 30px}
.product-set-pic{max-width:860px;margin:0 auto}
.product-set-pic img{display:block;width:100%;height:auto}
.product-set-action{margin:28px 0 0;text-align:center}

/* Характеристики: у источника текст слева, таблица справа, по половине
   контейнера; заголовок раздела 30/42. */
.product-specs{padding:30px 0}
.product-specs-inner{display:flex;flex-direction:column;gap:20px}
.product-specs-text h2{margin:0 0 20px;font-size:30px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--title)}
.product-specs-table{min-width:0}
/* Таблица характеристик снята с источника: ячейки высотой 34 с отбивкой 0/11 и
   рамкой 1 цвета 959595, шапка БЕЗ заливки — только полужирным, кегль 14/22,4
   цвет 333. Первая строка таблицы источника — служебная полоса редактора, её
   мы не повторяем. */
.product-specs-table table{border-collapse:collapse;width:100%;margin:0}
.product-specs-table th,.product-specs-table td{border:1px solid #959595;padding:5px 11px;font-size:14px;line-height:1.6;color:#333;text-align:left;vertical-align:middle;background:#fff}
.product-specs-table th{width:auto;font-weight:700}

/* Призыв над кнопками внизу карточки: у источника по центру, ширина 820,
   кегль 18/1,5 цвет 3c4136, отбивка 26 до кнопок. */
.product-closing{padding:50px 0}
.product-closing-text{max-width:820px;margin:0 auto 26px;font-size:18px;line-height:1.5;text-align:center;color:#3c4136}
.product-actions.is-centered{justify-content:center}

.product-slider-head h2{margin:30px 0 0;font-size:40px;line-height:1.3;font-weight:700;text-transform:uppercase;color:var(--title)}
.product-slider-head h2::after{content:"";display:block;width:70px;border-top:10px solid var(--brand);margin:20px 0 0}

/* Раздел вопросов и ответов. Вид снят с источника (block-68-2-faq): пункты
   разделены чертой снизу, отбивка 20 сверху и снизу, вопрос прописными 700,
   серый и чернеющий при наведении, отступ 10 до ответа, а сам ответ свёрнут
   через max-height с переходом .5s (открытый — 1.5s, как там же).
   Переключателя на источнике НЕТ (класс active никто не ставит, ответы там не
   раскрываются вовсе) — поведение по клику наше, вид его. */
.article-body .faq{margin:0 0 14px}
.article-body .faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.article-body .faq-q{position:relative;margin:0 0 10px;padding:0 34px 0 0;font-size:18px;line-height:1.4;font-weight:700;text-transform:uppercase;color:var(--text);cursor:pointer;transition:color .2s;-webkit-tap-highlight-color:transparent}
.article-body .faq-item.open>.faq-q{color:var(--title)}
.article-body .faq-q:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Знак «плюс» из двух полос: при раскрытии вертикальная полоса сжимается до
   нуля и остаётся минус. Так же, как у соседнего варианта блока в источнике. */
.article-body .faq-q::before{content:"";position:absolute;right:0;top:50%;width:22px;height:22px;margin-top:-11px;border:1px solid currentColor;border-radius:50%}
.article-body .faq-q::after{content:"";position:absolute;right:0;top:50%;width:23px;height:23px;margin-top:-11px;background:linear-gradient(currentColor,currentColor) center/10px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 10px no-repeat;transition:background-size .3s}
.article-body .faq-item.open>.faq-q::after{background-size:10px 2px,2px 0}
/* Высоту ответа ведёт сетка: 0fr → 1fr. У источника здесь max-height 10000, и
   на таком запасе видимое движение умещается в последние проценты времени —
   раскрытие выглядит рывком, а закрытие вообще незаметно. Точную высоту не
   надо ни считать скриптом, ни держать в разметке. */
.article-body .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.article-body .faq-item.open>.faq-a{grid-template-rows:1fr}
.article-body .faq-a-in{overflow:hidden;min-height:0}
.article-body .faq-a-in>:last-child{margin-bottom:0}
/* Пока разметка не размечена скриптом, ответы открыты: без него читатель
   должен видеть текст, а не пустой список вопросов. */
.article-body .faq:not([data-ready]) .faq-a{grid-template-rows:1fr}
.article-body .faq:not([data-ready]) .faq-q{cursor:auto}
.article-body .faq:not([data-ready]) .faq-q::before,.article-body .faq:not([data-ready]) .faq-q::after{display:none}

/* ---- Width branches. They stay at the end of the file on purpose: a later
   branch wins over an earlier one of the same weight. ---- */

/* Полоса контактов складывается в одну строку раньше первой ветки сетки —
   около 445 при нынешних телефоне и почте. Ветку ставлю по замеру. */
@media (min-width:480px){
  :root{--header-h:124px}
}

@media (min-width:576px){
  .wrap{max-width:540px}
  /* Плитки контактов от этой ширины идут по две в ряд, как у источника.
     Черта слева — только у правого столбца, черта снизу — у всех, кроме
     нижнего ряда: наружных черт у блока нет. */
  .contact-tile{flex:0 0 50%}
  .contact-tile:not(:last-child){border-bottom:0}
  .contact-tile:not(:nth-last-child(-n+2)){border-bottom:1px solid #eee}
  .contact-tile:nth-child(even){border-left:1px solid #eee}
}

@media (min-width:768px){
  .wrap{max-width:720px}
  /* The source keeps the contact strip on the left once the row fits, and it
     lays the footer out in four columns from this width up. */
  .header-top-inner{justify-content:flex-start;text-align:left}
  /* Six twelfths and three times two twelfths, with the 15px the source keeps
     inside every column — so the text lines up with the header above it. */
  .footer-cols{grid-template-columns:50% 16.6667% 16.6667% 16.6667%;gap:0;margin:0 -15px}
  .footer-col{padding:0 15px}
}

/* Pointer widths only: on touch a hover rule sticks after the tap. */
@media (min-width:769px){
  /* Число страницы «не найдено»: 150/195 у источника — это его размер на
     широком экране. На телефоне такое число вылезает за край (у источника
     вылезает тоже, но это его недоделка), поэтому в общей части стоит 90. */
  .page-404-code{font-size:150px;line-height:195px}
  .header-top a:hover{color:var(--title)}
  .footer-list a:hover,.footer-address a:hover{color:#fff}
  .site-menu a:hover{color:var(--brand)}
  .site-social a:hover{background:var(--brand);color:#fff}
  /* Наведение на синие кнопки — цвет назван владельцем 08.09. Держим его
     только на десктопных ширинах: на касании наведение залипает. */
  .btn-blue:hover,.footer-subscribe:hover{background:hsla(220,42%,60%,1)}
  /* Контурная брендовая заливается брендовым, надпись белеет — правила
     источника. Тоже только на десктопе. */
  .btn-line:hover{background:var(--brand);color:#fff}
}

/* The menu opens out at the width the source opens it: the button goes away. */
@media (min-width:992px){
  .wrap{max-width:960px}
  .nav-toggle{display:none}
  /* 14px after the logo, then 20px of the item's own margin: this puts the first
     item exactly where the source puts it. */
  .header-main-inner{gap:14px}
  .site-nav{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;width:auto;gap:14px;max-height:none;overflow:visible;opacity:1;visibility:visible;transition:none}
  .site-menu{flex-direction:row;padding:0 0 0 20px;gap:40px}
  .site-social{margin:0 3px 0 0}
}

@media (min-width:1200px){
  .wrap{max-width:1140px}
}

/* Полоса-промо становится рядом из трёх с той же ширины, что у источника. */
@media (min-width:992px){
  .promo-band{flex-direction:row}
  .promo-card{flex:1 1 0;min-width:0}
  /* Офис: половина текста и половина карты, у чётного стороны меняются. */
  .office{flex-direction:row;min-height:430px}
  .office.is-flipped{flex-direction:row-reverse}
  .office-text,.office-map{flex:0 0 50%;max-width:50%}
  .office-text{display:flex;flex-direction:column;justify-content:center;padding:50px}
  /* Представитель: текст слева, знак справа, обе половины по половине ряда. */
  .rep{flex-direction:row;align-items:center;gap:0}
  .rep-text,.rep-logo{flex:0 0 50%;max-width:50%;box-sizing:border-box}
  .rep-logo{padding-left:15px}
}

/* ---- Ширины главной. Стоят в самом конце файла: одинаковые по весу ветки
   решаются порядком, и поздняя выигрывает у ранней. ---- */

/* Точки взяты у источника замером: 768 — два преимущества и три новости в ряд,
   картинка встаёт рядом с текстом; 992 — четыре преимущества и знаки в ряд. */
@media (min-width:768px){
  .features-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-list{grid-template-columns:repeat(3,1fr);gap:24px}
  /* У списка журнала зазор свой: у источника 30 между колонками и 60 между рядами. */
  .journal-list .news-list{gap:60px 30px}
  .announce-row{flex-direction:row;align-items:center}
  /* Вес тот же, что у основного правила карточки (там предок нужен, чтобы
     перебить стиль библиотеки): иначе основное правило с бОльшим весом
     оставляет карточку колонкой и на широких. */
  .series-swiper .series-card{flex-direction:row;text-align:left;gap:30px}
  .home-about-inner{flex-direction:row}
  /* Картинка занимает ПОЛОВИНУ контейнера, а не жёсткие 540: у источника это
     доля, и на 992 она сама становится 450, на 1440 — 540. */
  .announce-pic,.series-pic{flex:0 0 50%;max-width:50%}
  .trust-list{grid-template-columns:repeat(3,1fr);gap:40px}
  .home-about-text{padding-right:30px}
}

@media (min-width:992px){
  .features-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .series-card h3{font-size:35px;line-height:1.2}
}

/* Наведение — только на указательных ширинах: на касании оно залипает и
   дерётся с нажатием (правило проекта). Ветка стоит в конце файла: одинаковых
   ветвей в файле несколько, и ранняя проигрывает более широкой. */
@media (min-width:769px){
  .article-body .faq-q:hover{color:var(--title)}
}

/* Карточка товара шире 992: герой и «Features» в две колонки, документы 380 и
   760 — так же, как в источнике. Ветка в конце файла: одинаковых ветвей в
   файле несколько, и ранняя проигрывает более широкой. */
@media (min-width:992px){
  .product-hero-inner{flex-direction:row;align-items:center;gap:30px}
  .product-hero-pic,.product-hero-text{flex:0 0 calc(50% - 15px);max-width:calc(50% - 15px)}
  .product-features-inner{flex-direction:row;align-items:center;gap:0}
  .product-features-text{flex:0 0 57.5%;max-width:57.5%}
  .product-features-pic{flex:0 0 42.5%;max-width:42.5%;padding:0 15px;order:0}
  .product-docs-inner{flex-direction:row;gap:0}
  .product-docs-title{flex:0 0 33.33%;max-width:33.33%;padding-right:15px;padding-left:15px}
  .product-docs-list{flex:0 0 66.67%;max-width:66.67%;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 15px}
  .product-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Кнопки героя карточки от 768 — снова по содержимому: во всю ширину они нужны
   только на мобильной (слово владельца 08.09). Ветка в конце файла: одинаковых
   ветвей в файле несколько, и ранняя проигрывает более широкой. */
@media (min-width:768px){
  .product-actions .btn{width:auto}
}

/* Наведение на карточке товара — только на указательных ширинах: на касании
   оно залипает. Цвета наведения сняты с источника: у синей кнопки светлее на
   десять процентов светлоты, у зелёной так же. */
@media (min-width:769px){
  .btn-dark:hover{background:hsla(220,78%,31%,1)}
  .btn-green:hover{background:hsla(80,55%,52%,1)}
  .product-doc a:hover span{text-decoration:underline}
  .product-docs-group a:hover{text-decoration:underline}
}

/* Блок подходящих датчиков от 768: строка встаёт в ряд — слева колонка со
   снимком и плашкой, справа текст. Доли колонок как у источника: 41,667 и
   58,333 процента.

   ВАЖНО (замер источника 08.09 на окне 950): до 992 у источника снимок стоит
   СТОЛБИКОМ НАД плашкой и по центру своей колонки — левый и правый просветы
   по 54,6 — а вертикальной черты с точкой на этих ширинах НЕТ вовсе. Снимок
   рядом с плашкой, отбивка 30 и черта с точкой включаются только от 992.
   Пока это стояло с 768, снимок на 992 и ниже упирался и в черту, и в текст. */
@media (min-width:768px){
  .fits-row{position:relative;flex-direction:row;align-items:center;gap:0;text-align:left}
  .fits-left{order:1;flex:0 0 41.667%;max-width:41.667%;flex-direction:column;align-items:center;width:auto}
  .fits-pic{order:1;flex:0 0 170px;width:170px;height:170px;margin:0 auto 20px}
  .fits-tagbox{order:2;flex:0 0 auto;width:100%;justify-content:center}
  .fits-tag{flex:0 0 110px}
  .fits-body{order:2;flex:0 0 58.333%;max-width:58.333%}
  .product-specs-inner{flex-direction:row;gap:0}
  .product-specs-text,.product-specs-table{flex:0 0 50%;max-width:50%;padding:0 15px}
}

/* От 992 — вид источника на широких: плашка слева на черте, снимок правее с
   отбивкой 30, вертикальная черта с точкой на 18 процентах ширины строки. */
@media (min-width:992px){
  .fits-rows{position:relative}
  .fits-rows::before{content:"";position:absolute;top:0;bottom:0;left:18%;border-left:1px solid #eee}
  .fits-row::before{content:"";position:absolute;left:18%;margin-left:-8px;top:50%;width:16px;height:16px;margin-top:-8px;box-sizing:border-box;border:5px solid #eee;border-radius:50%;background:#fff;z-index:1}
  .fits-left{flex-direction:row;align-items:center}
  .fits-pic{order:2;margin:0 30px 0 0}
  .fits-tagbox{order:1;flex:1 1 auto;width:auto;justify-content:flex-start}
  .fits-tagbox::before{left:110px}
}

/* Наведение на крошки — подчёркивание, кроме текущей страницы (она не ссылка).
   Ветка указательных ширин, слово владельца 08.09. */
@media (min-width:769px){
  .breadcrumbs a:hover{text-decoration:underline}
  /* Наведение на каталожную карточку: плашка модели синеет брендовым 3949a0,
     круг под снимком белеет — это снято с источника. Подчёркивание названия
     добавлено ПО СЛОВУ владельца 08.09: у источника на ссылках этих карточек
     стоит запрет, но он попросил подчёркивание. Подпись состояния не трогаем. */
  .fits-row:hover .fits-tag{background:#3949a0}
  .fits-row:hover .fits-pic{background:#fff}
  .fits-row h3 a:hover{text-decoration:underline}
}

/* Наведение на кнопки газа — тот же синий, что владелец назвал для синих кнопок
   08.09; только указательные ширины, на касании наведение залипает. */
@media (min-width:769px){
  .gas-btn:hover{background:hsla(220,42%,60%,1);border-color:hsla(220,42%,60%,1);color:#fff}
  /* Подчёркивание ссылок уровня при наведении — слово владельца 08.09. */
  .catalog-levels a:hover{text-decoration:underline}
}

/* Фильтр на узких: полосы во всю ширину, раскрытие идёт столбиком и раздвигает
   страницу. Выезжающая шторка потребовала бы скрипта, а у нас его на странице
   нет — принято сознательно, владельцу сказано. */
@media (max-width:767px){
  .filter-drop{width:100%}
  .filter-drop summary{width:100%;justify-content:space-between}
  .filter-total{width:100%}
}

/* От 768 список раскрывается ПОВЕРХ страницы, как обычный выпадающий. */
@media (min-width:768px){
  .filter-list{position:absolute;z-index:5;top:100%;left:0;min-width:230px;box-shadow:0 6px 24px hsla(220,55%,20%,.14)}
}

@media (min-width:769px){
  .filter-drop summary:hover{background:hsla(220,42%,60%,1);border-color:hsla(220,42%,60%,1);color:#fff}
  .filter-pick:hover{background:hsla(220,55%,42%,.06)}
  .filter-chip:hover{background:hsla(220,55%,42%,.12)}
}

/* Обычная страница от 768: блоки становятся в две колонки, как у источника —
   вводный текст 8 из 12 со знаком справа, раздел со снимком пополам, сетка
   снимков слева и текст справа колонкой в треть. Плитки идут в ряд по четыре. */
@media (min-width:768px){
  .page-lead-inner{flex-direction:row;align-items:center;gap:0}
  /* Колонки вводного блока разделены полем 15 с каждой стороны — ровно как у
     источника. Прежнее поле 30 слева было лечением не той причины: знак
     вставал вплотную и уезжал влево от кнопки потому, что бралось полотно
     знака ШАПКИ, где рисунок прижат к левому краю. Теперь у вводного блока
     свой файл источника, поле лежит в самом файле. */
  .page-lead-text{flex:0 0 66.667%;max-width:66.667%;padding-right:15px;box-sizing:border-box}
  .page-lead-side{flex:1 1 auto;min-width:0;padding-left:15px;box-sizing:border-box}
  .page-cols{flex-direction:row;align-items:center;gap:30px}
  .page-cols-text,.page-cols-pic{flex:0 0 calc(50% - 15px);max-width:calc(50% - 15px)}
  .page-cols.is-grid .page-grid{flex:0 0 66.667%;max-width:66.667%}
  .page-cols.is-grid .page-cols-text{flex:1 1 auto;max-width:none}
  .tile{flex:0 0 25%}
  .tile + .tile{border-top:1px solid #eee;border-left:0}
  /* Нижний блок контактов: половина под плитки, половина под форму. */
  .page-contact-inner{flex-direction:row;align-items:flex-start}
  .page-contact-left,.page-contact-form{flex:0 0 50%;max-width:50%;box-sizing:border-box}
  .page-contact-left{padding-right:15px}
  .page-contact-form{padding-left:15px}
}

/* Раздел применения на промежуточных ширинах: сетка снимков ужимается до
   половины, остальное отходит тексту (слово клиента 08.09). Причина замером:
   на 768 сетка занимала 460, а текстовой колонке оставалось 200 — текст сыпался
   в столбик по два-три слова. Настольная ширина от 1200 НЕ меняется: там сетка
   две трети и снимок 365, как у источника. */
@media (min-width:768px) and (max-width:1199.98px){
  .page-cols.is-grid .page-grid{flex:0 0 50%;max-width:50%}
}