/* um-cases-port.css — ported Mercedes layout family for Genesis (03.09.2026).
   Source: BMW's copy of the same extraction. Mercedes keeps these rules inside custom.css;
   Genesis custom.css does not have them, so they live here, as on BMW and Hyundai.
   Brand values swapped at port time: #1c69d4 -> #a36b4f (CP_SITE_ACCENT),
   'BMW Type Next TT'/'BMW Type Next'/'MBCorpoS' -> 'Raleway' (the face this theme ships).
   The #3366cc left in place is the internal /acc-showcase/ blue, brand-neutral by design. */
/* um-cases-port.css — cases/UTP/H1 render-layer styles ported from Mercedes (10.07.2026, BMW panel port Ф6). v1.0.7
   Sections extracted verbatim from MB main.css (.wc-block family) + MB custom.css (.akpp-note, .um-sec rhythm,
   .wc-compact, .wc-tight, .mobile-hide). Colors ride on var(--main-color) so the site brand blue applies. */

/* ── Шаг между блоками: один на весь сайт (владелец, 03.09.2026: «нужны
   глобальные и одинаковые интервалы между блоками, после hero слишком мало») ──
   Значение живёт в одном месте. Было 15px, как на Mercedes: на светлой странице
   Genesis блоки читались склеенными. Все правила ритма ниже берут эту запись,
   поэтому шаг меняется правкой двух строк и сразу на ПК и на телефоне. */
:root { --um-gap: 40px; }
@media only screen and (max-width: 768px) { :root { --um-gap: 24px; } }

/* ========== Why Choose Block (.wc-block) ========== */
.wc-block {
    font-family: "Raleway", Arial, sans-serif;
    color: #262626;
}
.wc-heading {
    margin: 18px 0 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: #262626;
}
.wc-callout {
    margin: 8px 0;
    padding: 8px 10px;
    background: #f7f7f7;
    border-left: 6px solid var(--main-color);
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: #262626;
}
.wc-list {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #262626;
}
.wc-item {
    margin-bottom: 10px;
    padding-left: 0;
}
.wc-item:last-child {
    margin-bottom: 4px;
}
.wc-dot {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}
.wc-item-content strong {
    font-weight: 600;
}
.wc-cta {
    margin: 16px 0 12px;
    padding: 12px 8px;
    background: #f7f7f7;
    text-align: center;
    border-radius: 8px;
}
.wc-cta-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #262626;
}
.wc-cta-sub {
    margin: 0;
    font-size: 14px;
    color: #555;
}
.wc-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: nowrap;
}
.wc-btn {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700 !important;
    padding: 12px 6px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}
.wc-btn-phone {
    background: var(--main-color) !important;
    color: #fff !important;
}
.wc-btn-phone svg {
    flex-shrink: 0;
}
.wc-btn-tg {
    border: 2px dashed var(--main-color) !important;
    background: transparent;
    color: var(--main-color) !important;
    padding: 12px 10px;
}
.wc-btn-tg svg {
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .wc-heading {
        font-size: 20px;
    }
    .wc-btn {
        font-size: 14px;
        padding: 12px 25px;
    }
}

/* --- accent plaque + section rhythm (from MB custom.css) --- */
  .akpp-note{
    margin:12px 0 10px; padding:10px 12px;
    background:#f7f7f7; border-left:6px solid var(--main-color);
    border-radius:8px;
  }
  .akpp-lead{ margin:0; font-weight:800; }
  /* 04.06.2026 — unified accent section heading: reuses the shared .akpp-note card
     (same component as #STANDARD_BLOCK(strong) and the homepage). Landing pages
     /atf/, /atf/dct/, /transfer-case/ use <h2 class="akpp-note">.
     Typography matched 1:1 to the strong block's .akpp-lead/<strong> (Raleway sans,
     16px, 700, #262626) so the heading looks identical to the homepage card —
     NOT the big serif heading default. Override the theme h2 serif font explicitly. */
  h2.akpp-note{
    font-family:"Raleway", Arial, sans-serif !important;
    font-size:16px; line-height:1.5; font-weight:700; color:#262626; text-align:left;
  }

  /* 04.06.2026 — uniform 15px vertical rhythm between landing sections.
     Wrap each top-level section in <div class="um-sec">. flow-root contains the
     section's internal margins; first/last child margins reset so the section box
     hugs its content; exactly --um-gap between consecutive sections (no margin collapse,
     no spacer blocks needed). Reusable across landings for a uniform structure. */
  .um-sec{ display:flow-root; }
  .um-sec + .um-sec{ margin-top:var(--um-gap); }
  /* !important to beat inline margins inside std-blocks (e.g. otz CTA margin:12px 0) */
  .um-sec > :first-child{ margin-top:0 !important; }
  .um-sec > :last-child{ margin-bottom:0 !important; }
  /* zero the standard blocks' own inner edge margins so the visible content sits exactly
     15px from the neighbour section: priv box (#spec inline margin:8px 0),
     corp heading (#corps inline margin-top:20px). */
  .um-sec > #spec{ margin-top:0; margin-bottom:0; }
  .um-sec #corps{ margin-top:0 !important; }

/* ===== 14.06.2026 — homepage УТП (why_choose 46613) mobile compaction — ported from test2 ===== */
/* why_choose УТП — compact mobile + semantic headings.
   Final locked values (validated test2 13.06.2026, top→buttons 554–568px).
   Append to custom.css. Scoped to .wc-compact = homepage block 46613 ONLY
   (post 90525 /ac/ /engine-bay/ stays plain .wc-block, untouched).
   Prod: bump custom.css 1.1.12 -> 1.1.13. */
/* 🔴 03.08.2026 — «Raleway» ships a SINGLE Regular face (usWeightClass 400,
   no bold file anywhere on the server), so font-weight:700 was a no-op: the УТП
   subheads measured EXACTLY the same width at 400 and at 700 (207.46px both) and
   read as plain body text (owner: «выделение жирным подзаголовков малозаметно»).
   Bold now comes from Inter, which the theme already self-hosts in Regular+Bold
   (main.css @font-face, assets/fonts/Inter/) and already uses in the desktop header.
   Raleway stays as the fallback for anything Inter lacks. */
.wc-compact .wc-item-title{font-family:Inter,"Raleway",Arial,sans-serif;font-size:16px;line-height:1.3;font-weight:700;color:#111;margin:0 0 2px}
.wc-compact .wc-item-text{color:#262626;font-weight:400;margin:0}
.wc-compact h2.akpp-note{margin:0 0 12px;line-height:1.3}
/* same dead-bold story as .wc-item-title above — the plate heading and the CTA line
   would otherwise look LIGHTER than the subheads under them. !important because the
   global h2.akpp-note font-family rule carries !important. */
.wc-compact h2.akpp-note{font-family:Inter,"Raleway",Arial,sans-serif !important;font-weight:700}
.wc-compact .wc-cta-title{font-family:Inter,"Raleway",Arial,sans-serif;font-weight:700;margin:0;text-align:center}
@media (max-width:699px){
 .wc-compact .wc-item-text{font-size:15px;line-height:1.35}
 .wc-compact .wc-item{margin-bottom:6px}
 .wc-compact .wc-item:last-child{margin-bottom:0}
 .wc-compact .wc-list{margin:0}
 .wc-compact .wc-cta-title{font-size:12.5px;line-height:1.3}
 .wc-compact .wc-cta{margin:8px 0 6px;padding:8px 12px}
 .wc-compact .wc-buttons{margin:8px 0 0}
 .wc-compact h2.akpp-note{margin:0 0 10px;padding:10px 12px;line-height:1.25}
}

/* mobile-hide hero banner: hide the desktop H1 hero on phones (global; replaces fragile per-page inline <style> that kept getting stripped). 2026-06-14 */
@media (max-width:768px){.mobile-hide{display:none !important}}

/* wc-tight: extra-compact УТП (opt-in via .wc-tight on .wc-block) — ~30-45% tighter vertical gaps than .wc-compact, to fit УТП+CTA+buttons closer to one mobile screen. Overrides .wc-compact (same specificity, later source). 2026-06-14 */
@media (max-width:699px){
 .wc-tight h2.akpp-note{margin:0 0 6px;padding:7px 12px;line-height:1.2}
 .wc-tight .wc-item{margin-bottom:3px}
 .wc-tight .wc-item-title{line-height:1.18;margin-bottom:1px}
 .wc-tight .wc-item-text{line-height:1.22}
 .wc-tight .wc-cta{margin:6px 0 3px;padding:6px 12px}
 .wc-tight .wc-cta-title{line-height:1.2}
 .wc-tight .wc-buttons{margin:5px 0 0}
}

/* 26.06.2026 — um («галочки») УТП: vertical gap between checkmark items so they don't
   glue together (parity with .wc-compact .wc-item ≈10px). Targets ONLY the direct <p>
   bullets that follow the akpp-note heading inside an um-sec. wc-compact uses .wc-list
   (no direct <p> siblings of akpp-note) and ТО uses .uo-to-utp — neither is matched.
   The note plaque (.um-plate > p) is nested, not a sibling, so it is untouched. */
.um-sec > h2.akpp-note ~ p { margin: 0 0 10px; }


/* ── Cases-block section headings — mirror MB .editor h2 proportions (10.07.2026,
   owner: «интервалы как у мерседеса»). BMW main.css has no .editor h2 rules, so
   «Примеры работ» rendered 24px with no bottom margin and looked glued to the
   28px case title. Scoped to the cases headings only — BMW global h2 untouched. ── */
h2.cs-heading{font-size:50px;line-height:60px;text-align:left;margin:0 0 20px;letter-spacing:0}
h2.cs-case-heading{margin-bottom:20px}
@media (max-width:699px){
  h2.cs-heading{font-size:26px;line-height:40px;margin-bottom:18px}
}

/* ── House menu item: hidden in the BURGER only (10.07.2026, owner 16:29: MB's
   horizontal ribbon DOES show the house — earlier «no house on mobile» call was
   burger-only). Ribbon item (.scroll-menu-list-item--um-home-item) stays visible.
   display:none avoids the hidden-item phantom-margin trap. ── */
@media (max-width:768px){
  .nav-item--um-home-item{display:none!important}
}

/* ── Hero title ACF↔template swap (= MB custom.css 18.06 rules; needed by the
   custom_test2.php hero-H1 port, 10.07.2026): wide desktop shows the ACF <h2>,
   narrow desktop windows swap to the template-H1 div; on mobile UA PHP renders
   a real <h1> server-side instead (neither of these two is output). ── */
.um-hero-tpl{display:none}
@media (max-width:768px){.um-hero-acf{display:none}.um-hero-tpl{display:block}}

/* ── Burger dropdown sub-items (10.07.2026, owner: «услуги серым цветом»). BMW burger
   is DARK (MB's is white md-white-header): BMW main.css whitens top-level items via
   .header.open …, but the desktop-dropdown rule (…dropdown-item .nav-menu .nav-item a
   → var(--text-main-color) #262626) is more specific and left sub-items near-invisible
   on black. Whiten them only in the OPEN burger; desktop hover dropdown (white panel,
   dark text) untouched. Second rule = MB custom.css submenu-caps parity (06.07). ── */
.header.open .nav-wrap .nav .nav-item.dropdown-item .nav-menu .nav-item a{color:#fff}
.nav-wrap .nav .nav-item.dropdown-item .nav-menu .nav-item a{text-transform:uppercase}

/* ── Dropdown head hover contrast (11.07.2026). BMW ribbon/burger are DARK (MB's are
   white), so two main.css collisions surface only here:
   1) Desktop sticky ribbon: .header.md-white-header .header__nav.fixed … .nav-item a
      {color:#fff} (0,7,1) outguns the theme hover recolors (0,6,1/0,7,1) — hovering
      «Популярные услуги» opens the light #F5F8F9 panel but the head label stays
      white-on-white. Recolor the head to var(--text-main-color) like the sub-items.
   2) Burger: top-level .dropdown-item:hover{background:#F5F8F9} is not width-scoped —
      tap paints a light plate inside the dark burger while the label stays white
      (same .fixed chain). Kill the plate and pin label/chevron to burger colors. ── */
@media (min-width:769px){
  .header.md-white-header .header__nav .nav-wrap .nav .nav-item.dropdown-item:hover > a,
  .header.md-white-header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item:hover > a{color:var(--text-main-color)}
}
@media (max-width:768px){
  .header .nav-wrap .nav .nav-item.dropdown-item:hover{background-color:transparent}
  .header.md-white-header .header__nav .nav-wrap .nav > .nav-item.dropdown-item:hover > a,
  .header.md-white-header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item:hover > a{color:#fff}
  .header.md-white-header .header__nav .nav-wrap .nav > .nav-item.dropdown-item:hover::after{border-color:#a36b4f}
}

/* ===== Блок «Посмотрите, где будет обслуживаться ваш BMW» (.um-tcv) — порт с MB, 24.07.2026 =====
   Живая обложка-петля (4.9с, без звука) + play → полный ролик hero-full-v2 (38.6с, 07.08.2026). Бокс = геометрия
   бывшего hero: 21:9 на ПК (ширина = контент-колонка), 16:9 на мобиле; чёрной подложки нет —
   фон бокса = webp-обложка. Обе петли preload=none, JS (footer.php, гейт .um-tcv-box) играет
   ТОЛЬКО видимую и только при приближении блока к вьюпорту (IntersectionObserver 1200px).
   Обёртка um-sec = ритм 15px (.um-sec + .um-sec); своя база margin нужна, т.к. у ТО-лендингов
   УТП не обёрнут в um-sec. Ховер play-кнопки = медный Genesis #a36b4f (НЕ var(--main-color): в этой
   теме переменная всё ещё зелёная #31B939 из донорской темы). */
.um-tcv { margin: var(--um-gap) 0; }
.um-home .um-tcv { margin: var(--um-gap) 0; }
.um-tcv-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 21 / 9;
    /* 03.09.2026: тут стоял кадр с сайта BMW и мигал перед стартом видео.
       Своего кадра 21:9 нет, берём кадр 16:9 — background-size:cover обрежет. */
    background-image: url('/wp-content/uploads/2026/09/hero-desktop-v2_16x9.webp');
    background-size: cover;
    background-position: center;
}
.um-tcv-loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease;
}
.um-tcv-loop-m { display: none; }
.um-tcv-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 2;
}
.um-tcv-box.um-full-on .um-tcv-video { opacity: 1; pointer-events: auto; cursor: pointer; }
.um-tcv-box.um-full-on .um-tcv-loop { opacity: 0; }
.um-tcv-box.um-full-on { background-image: none; background-color: #000; }
.um-tcv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .25s ease, transform .25s ease, opacity .25s ease;
}
/* Play-треугольник: Material-глиф, центрирован по ЦЕНТРОИДУ — без margin-наджей */
.um-tcv-play svg { width: 34px; height: 34px; display: block; }
.um-tcv-play:hover { background: #a36b4f; transform: translate(-50%, -50%) scale(1.06); }
.um-tcv-box.um-playing .um-tcv-play { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
    .um-home .um-tcv { margin: var(--um-gap) 0; }
    .um-tcv-box {
        border-radius: 8px;
        aspect-ratio: 16 / 9; /* как моб. hero — выше, чем 21:9 */
        background-image: url('/wp-content/uploads/2026/09/hero-desktop-v2_16x9.webp');
    }
    .um-tcv-loop-d { display: none; }
    .um-tcv-loop-m { display: block; }
    .um-tcv-video { object-position: center; } /* бокс сам 16:9 — кропа нет */
    .um-tcv-play { width: 60px; height: 60px; }
    .um-tcv-play svg { width: 24px; height: 24px; }
}
/* Подзаголовок блока техцентра (.um-tcv-sub) = обычный <p> темы, без своей типографики */

/* ── Ритм секций: 15px даже через чужеродного соседа (24.07.2026) ──
   `.um-sec + .um-sec` работает только для СМЕЖНЫХ секций. Блок отзывов (SmartWidgets
   `.sw-app`) вставляется скриптом МЕЖДУ секциями и разрывает цепочку — следующий за ним
   .um-sec (кейсы) прилипал к отзывам в 0px. Правило ниже задаёт тот же 15px любому
   .um-sec в контентной колонке, кроме первого; margin не суммируется с `.um-sec + .um-sec`
   (одно и то же свойство), поэтому существующие 15px не задваиваются. ── */
.editor .wrapper > .um-sec:not(:first-child) { margin-top: var(--um-gap); }
/* Пустая секция (например #CASES# на лендинге, у которого ещё нет кейсов) не должна
   съедать 15px пустоты — сама секция схлопывается, а как только кейсы появятся,
   она отрисуется снова без правок контента. */
.editor .wrapper > .um-sec:empty { display: none; }

@media (max-width: 768px) {
  /* Мобильный первый экран (.section-main — фото/видео шапки) стыковался с контентом
     в 0px: .editor не является .um-sec, поэтому ритм 15px на этот стык не распространялся.
     На ПК стыка нет (.section-main не рендерится), поэтому правило только для мобилы.
     Соседний селектор `+` не годится: между секциями тема печатает <style>, поэтому
     берём общий соседний `~` (на странице ровно один .editor). */
  .section-main ~ .editor { margin-top: var(--um-gap); }
}

/* Блок «Мы проверим» на главной — не .um-sec (живёт в post_content со своим padding),
   поэтому в ритм 15px не попадал и стыковался с кейсами в 0px. Свой верхний padding
   обнуляем, чтобы внешний отступ был ровно 15px, как между остальными секциями. */
.editor .wrapper > .checklist-section { margin-top: var(--um-gap); padding-top: 0; }

/* ── Галочка (стрелка) пункта «Популярные услуги» = фирменный синий BMW (24.07.2026) ──
   В донорской теме цвет стрелки задан пятью правилами и ни одно не подходит BMW:
   на светлой шапке `.header.md-white-header … ::after{border-color:#fff}` — белая стрелка
   на белом фоне, то есть невидимая (шапка BMW белая, у донора она лежала поверх тёмного
   первого экрана); в закрепе и на ховере — `#3366cc`, синий МЕРСЕДЕСА; на мобиле в
   открытом бургере — снова `#3366cc`, а в `.header.fixed` — серый `--text-main-color`.
   `var(--main-color)` использовать нельзя: в этой теме он всё ещё зелёный `#31B939`.
   Перекрываем все состояния одним цветом — `#a36b4f` (= CP_SITE_ACCENT, цвет плашки H1).
   Селекторы повторены 1:1 с темой: специфичность равная, побеждает порядок загрузки
   (этот файл подключается после main.css). */
.nav-wrap .nav .nav-item.dropdown-item::after,
.header.md-white-header .nav-wrap .nav .nav-item.dropdown-item::after,
.header.md-white-header .nav-wrap .nav .nav-item.dropdown-item:hover::after,
.header.md-white-header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item::after,
.header.md-white-header .header__nav .nav-wrap .nav > .nav-item.dropdown-item:hover::after,
.header.fixed .nav-wrap .nav .nav-item.dropdown-item::after,
.header.open .nav-wrap .nav .nav-item.dropdown-item::after,
.header.open .nav-wrap .nav .nav-item.dropdown-item:hover::after { border-color: #a36b4f; }

/* ============================================================
   UM hero row (24.07.2026, MB parity): «видео 2/3 + отзывы 1/3» под шапкой,
   все custom_test2-страницы, только ПК. Разметка: um_hero2_html() (utp-macro.php),
   вызов после </header> в custom_test2.php. Бокс переиспользует .um-tcv-* ⇒ тот же
   плеер (footer.php); переопределяем только кадр 16:9 и центр-кроп.
   Отличие от Mercedes: полоса СВЕТЛАЯ (у BMW светлый hero, решение владельца),
   поэтому колонка идёт без skin=dark. С 31.08.2026 в колонке стоит свой блок отзывов
   в узкой раскладке (umr_render view=col), тот же, что полосой ниже по странице.
   Шрифт и акцент пишем явно: --main-color в этой теме — донорский зелёный,
   а Raleway здесь нет (см. заметки выше). ============================================================ */
.um-hero2 { margin: var(--um-gap) 0; }
.um-hero2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 33.3333%, 500px);
    gap: 24px;
    align-items: start;
}
/* отзывов для колонки не нашлось — видео во всю ширину */
.um-hero2-solo .um-hero2-grid { grid-template-columns: minmax(0, 1fr); }
.um-hero2-box {
    aspect-ratio: 16 / 9;
    background-image: url('/wp-content/uploads/2026/09/hero-desktop-v2_16x9.webp');
}
.um-hero2-box .um-tcv-video { object-position: center; }
.um-hero2-rev { min-width: 0; }
/* Колонка тянется на высоту ряда, а ряд задаёт видео 16:9: свой блок отзывов в узкой
   раскладке (.umr--col, um-reviews.css) собран короче кадра, разницу забирает его рамка
   с карточкой. Скелетона нет: блок приходит с сервера вместе со страницей.
   31.08.2026: своя карточка .um-h2c-* и её скелетон удалены — колонка рисует тот же
   блок отзывов, что полоса ниже по странице. */
.um-hero2-rev { align-self: stretch; }
.um-hero2-rev > .umr { height: 100%; }
@media (max-width: 900px) {
    .um-hero2-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .um-hero2 { display: none; } /* страховка: на моб. UA секция и так не рендерится */
}


/* Старый первый экран BMW (слайдер с фото мастера, section.slider-wrapper) на ПК
   уступает место hero-строке «видео + отзывы» (владелец, 24.07.2026): картинка под
   видео и отзывами не нужна. Скоуп через соседний селектор: прячем ТОЛЬКО когда на
   странице отрендерена .um-hero2 — на мобиле и на страницах без hero-строки
   (contacts, free_check) слайдер живёт как раньше. */
.um-hero2 ~ .slider-wrapper { display: none; }

/* Единый ритм 15px между блоками на телефоне (владелец, 25.07.2026: «эталон
   отступов — везде одинаковые, чтобы не было где-то больше, а где-то меньше»).
   Ленточные секции темы (.team, .contacts) несут собственные вертикальные
   паддинги и внутренние margin'ы слайдера, из-за которых воздух перед «Наша
   команда» был ~50px, а перед «Схема проезда» ~72px — при 15px между .um-sec.
   Обнуляем их и задаём один и тот же межблочный margin. Только ≤768px: на ПК
   ритм секций у темы свой, его не трогаем. */
@media only screen and (max-width: 768px) {
  section.team { padding-top: 0; }
  section.team > .wrapper { padding-top: 0; }
  section.team .team__title { margin-top: 0; }
  section.breadcrumbs { margin-bottom: 0; }
  #cont { padding-bottom: 0; }
  section.team, section.questions, section.contacts, footer.footer { margin-top: var(--um-gap); }
}

/* «Корпоративным клиентам» под картой: карточка сотрудника несёт margin-bottom 30px,
   он выходит наружу секции (схлопывание полей) и превращает 15px до подвала в 30px. */
.um-corp-after-map .employee-block { margin-bottom: 0; }

/* Единый ритм 15px между ВСЕМИ блоками контента, на всех страницах и обеих ширинах
   (владелец, 25.07.2026: «проверь все страницы, отступы надо настроить глобально»).
   До этого зазор задавала пара `.um-sec + .um-sec`, а всё, что попадало между ними
   голым (заголовок «Отзывы» из стандартного блока, абзацы и блоки старых страниц),
   несло собственные margin'ы: 0, 2, 18, 20 — отсюда «приклеен к кнопкам выше».
   Теперь низ у всех прямых детей редактора обнулён, а зазор задаёт только верх. */
.editor > .wrapper > * { margin-bottom: 0 !important; }
.editor > .wrapper > * + * { margin-top: var(--um-gap) !important; }
/* Спейсеры Гутенберга на старых страницах ломают ритм собственной высотой. */
.editor > .wrapper > .wp-block-spacer { display: none; }

/* Тот же ритм 15px на компьютере (владелец, 25.07.2026: «глобально»). До этого
   между строкой видео и контентом было 50px (margin-top первого блока), между
   контентом и «Наша команда» 0, перед «Схема проезда» 75px, у страницы контактов
   34px и вплотную к подвалу. Карточка сотрудника здесь свисает ниже слайдера
   всего на 4px — резерв под неё оставлен паддингом секции, см. мобильный блок. */
@media only screen and (min-width: 769px) {
  .editor > .wrapper > :first-child { margin-top: 0 !important; }
  section.breadcrumbs { margin-bottom: 0; }
  #cont { padding-bottom: 0; }
  section.team .team__slider { margin-bottom: 0; }
  section.team { padding-bottom: 4px; }
  section.editor, section.team, section.questions, section.contacts, footer.footer { margin-top: var(--um-gap); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Отдельные страницы кейсов (ТЗ 27.07.2026)
   Тизер на сводных страницах + сама страница кейса + список на /cases/.
   Кейс без опубликованной страницы ни одного из этих классов не получает, поэтому
   вся существующая вёрстка кейсов не затронута.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Тизер ──
   🔴 30.07.2026, владелец (по своему макету): титульное фото слева РОВНО такого же
   размера, как у обычного кейса на главной, а направо уходит всё остальное —
   заголовок, цена с датой, анонс, ссылка и ряд миниатюр. Это ОТМЕНЯЕТ вариант
   29.07.2026 (узкая колонка фото 280px, заголовок над карточкой), который сам
   отменял утренний вариант с одной статичной фотографией 190px.
   Телефон = поведение по умолчанию (заголовок, цена, фото, миниатюры, текст,
   ссылка — порядок как был), ПК = @media 601px (брейкпоинт слайдера).
   Текстовый блок называется .cs-tbody, а НЕ .cs-content: cases-slider-v18.js
   инлайном равняет высоту .cs-content по высоте фото и сплющил бы описание. */
.cs-teaser .cs-tcard { display: block; }
/* Колонка-флекс: ряд миниатюр печатается в конце разметки, а стоять должен внизу
   правой колонки — это делает auto-отступ в десктопном блоке ниже.
   На ТЕЛЕФОНЕ ряда миниатюр нет вовсе: тема гасит .cs-bottom-row правилом
   `display:none` в @media(max-width:600px), и это поведение кейсов не менялось —
   поэтому переносить его тут некуда и незачем. */
.cs-teaser .cs-tbody { display: flex; flex-direction: column; margin-top: 10px; }
/* Ссылка внутри флекс-колонки становится блоком: без этого кликабельной была бы
   вся ширина колонки, а не сама строка. */
.cs-teaser .cs-tbody .cs-readmore { align-self: flex-start; }
.cs-teaser .cs-text--teaser > *:first-child { margin-top: 0; }
.cs-teaser .cs-text--teaser > *:last-child { margin-bottom: 0; }
/* Анонс в двух вариантах (владелец 30.07.2026): короткий для телефона, длинный для
   компьютера. Печатаются оба, показывается один. Когда длинный не заполнен,
   case-single.php печатает ОДИН блок без этих классов — он виден везде. */
.cs-teaser .cs-text--tea-d { display: none; }

/* Заголовок тизера — ссылка на страницу кейса. Цвет наследуется: марочным синим
   он спорил бы с ценой, которая стоит тут же под ним и уже синяя. */
.cs-case-heading--teaser a { color: inherit; text-decoration: none; }
.cs-case-heading--teaser a:hover { color: #a36b4f; }

@media (min-width: 601px) {
  /* Сетка, а не флекс: справа ДВА блока друг под другом (заголовок с ценой и всё
     остальное), а слева одно фото на всю их высоту — флексом такое пришлось бы
     собирать лишней обёрткой.
     Колонка фото 50% при промежутке 24px — это ровно геометрия обычного кейса
     (`.cs-media{flex:0 0 50%}` + `gap:24px` у .cs-card в cases-slider-v42.css),
     поэтому фото в тизере и фото в кейсе на главной одного размера. Владелец
     30.07.2026: «картинку титульную такого же размера оставить большого, как в
     кейсах на главной». */
  .cs-teaser .cs-tcard {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
  }
  /* max-width снимаем: общее правило .cs-media{max-width:50%} считает проценты от
     всей карточки, а не от своей колонки, и урезало бы фото ещё раз. */
  .cs-teaser .cs-media { grid-column: 1; grid-row: 1 / span 2; align-self: start; max-width: none; }
  .cs-teaser .cs-thead { grid-column: 2; grid-row: 1; min-width: 0; }
  /* 🔴 Правая колонка кончается на нижней кромке САМОГО СНИМКА, а не подписи под
     ним (владелец 31.07.2026: «нижний край титульной картинки совпадает с нижним
     краем минифоток справа»). Раньше колонка тянулась до низа всей медиа-колонки,
     и ряд миниатюр висел на 47px ниже снимка — ровно на высоту подписи.
     height:0 + min-height:100% — колонка не участвует в расчёте высоты строк грида
     (иначе длинный анонс растягивал бы карточку), а получает готовую высоту строки;
     нижний отступ = блок подписи: 8px отступа сверху + 2.8em при кегле 14px.
     Пол в max() держит две строки анонса: если снимок ниже, чем нужно этим строкам
     (узкое окно), карточка растёт вниз, как было до правки, а не режет текст.
     Первый min-height — запасной для браузеров без max(): без него колонка осталась
     бы нулевой высоты и спрятала миниатюры совсем. */
  .cs-teaser .cs-tbody {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    height: 0;
    min-height: 231px;
    min-height: max(100%, 231px);
    padding-bottom: calc(14px * 2.8 + 8px);
    overflow: hidden;
  }
  /* Миниатюры возвращаются в конец правой колонки и прижимаются к её низу:
     auto-отступ сверху сажает ряд на нижнюю кромку снимка. Ссылка и ряд миниатюр
     не сжимаются — место под них освобождает только анонс. */
  .cs-teaser .cs-tbody .cs-readmore { flex: none; }
  .cs-teaser .cs-tbody > .cs-bottom-row { order: 0; flex: none; margin-top: auto; margin-bottom: 0; padding-top: 10px; }
  /* Анонс режется по целым строкам (счётчик --tea-lines ниже), а flex-shrink —
     страховка: если места оказалось меньше расчётного, колонка всё равно не
     вылезет за кромку снимка. */
  .cs-teaser .cs-tbody .cs-text--teaser { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  .cs-teaser .cs-tbody .cs-text--teaser > * {
    display: -webkit-box;
    -webkit-line-clamp: var(--tea-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Заголовок тизера — не длиннее двух строк: третья строка съедала бы анонс и
     опускала ряд миниатюр ниже снимка. Полное название — на странице кейса. */
  .cs-teaser .cs-case-heading--teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Подпись к фото на компьютере снова ВИДНА (правила `display:none` больше нет):
     в макете владельца она стоит под большой фотографией. Прятали её только из-за
     узкой колонки 280px, которой больше нет.
     Анонс: на компьютере длинный вместо короткого. */
  .cs-teaser .cs-text--tea-m { display: none; }
  .cs-teaser .cs-text--tea-d { display: block; }
  /* 🔴 Подпись к фото — РОВНО две строки (владелец 30.07.2026: «при листании лента
     слайдов дёргается вниз/вверх»). У каждого слайда своя подпись, и её высота
     гуляла 20/39/59px (одна, две, три строки) — вместе с ней прыгала вся карточка
     375/395/415px, а с ней и ряд миниатюр, прижатый к низу правой колонки. У
     обычного кейса этой болезни нет: там скрипт после каждого слайда пересчитывает
     высоту текстовой колонки, а у тизера пересчитывать нечего.
     Высота ЖЁСТКАЯ, а не min-height: минимум чинит только короткие подписи, а
     дёргалось и на длинных. 2.8em = две строки при line-height 1.4, поэтому правило
     переживёт смену кегля. align-items:flex-start — иначе одна строка повисла бы по
     центру двухстрочной коробки, с зазором под фотографией.
     Текст не теряется: подпись остаётся в разметке целиком (её читают поиск и
     озвучка), обрезается только показ, полная версия — на странице кейса. */
  .cs-teaser .cs-title { height: 2.8em; align-items: flex-start; overflow: hidden; }
  .cs-teaser .cs-cap-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Сколько строк анонса помещается над нижней кромкой снимка. Высота снимка = 9/16
   от половины ширины карточки, то есть растёт вместе с окном; из неё вычтены
   заголовок в две строки, цена, ссылка и ряд миниатюр. Пороги подняты с запасом:
   лишняя строка опустила бы миниатюры ниже снимка, а недостающая — нет, пустоту
   забирает auto-отступ над рядом. Замеры на 1311/1440/1600/1920. */
@media (min-width: 1440px) { .cs-teaser { --tea-lines: 3; } }
@media (min-width: 1550px) { .cs-teaser { --tea-lines: 4; } }
@media (min-width: 1655px) { .cs-teaser { --tea-lines: 5; } }
@media (min-width: 1760px) { .cs-teaser { --tea-lines: 6; } }

/* «Читать полностью →» — ссылка, а не кнопка: это переход на страницу, и он должен
   читаться как ссылка (и в поиске, и вспомогательными технологиями).
   display НЕ flex: во флекс-контейнере текст и стрелка становятся отдельными
   элементами и пробел между ними схлопывается — стрелка приклеивалась к слову.
   Подчёркивание ровно одно: тема уже подчёркивает ссылки, а собственная нижняя
   граница давала вторую, более длинную полосу под текстом (владелец, 27.07.2026). */
.cs-readmore {
  display: inline;
  margin-top: 12px;
  font-weight: 600;
  font-size: 15px;
  /* 2.3 — владелец 29.07.2026: отбивает ссылку от последней строки описания. */
  line-height: 2.3;
  color: #a36b4f;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: 0;
  transition: color .15s ease;
}
.cs-readmore:hover { color: #0f4fa8; }
.cs-readmore:focus-visible { outline: 2px solid #a36b4f; outline-offset: 3px; }

/* ── Аккордеон под слайдером тизера (ТЗ 18.08.2026) ──
   Задача — не растить высоту ленты тизеров на телефоне: в закрытом виде от анонса
   и ссылки остаётся ОДНА строка с подписью и треугольником. Подпись выбирает
   редактор в карточке кейса из справочника «Заголовки аккордеона».
   🔴 На КОМПЬЮТЕРЕ аккордеона нет (решение владельца 18.08.2026): правая колонка
   тизера жёсткой высоты и всё равно кончается на нижней кромке снимка, поэтому
   спрятанный анонс оставил бы там пустоту. Разметка при этом ОДНА на все ширины:
   строку-кнопку гасим, а тело печатаем display:contents — анонс и ссылка остаются
   теми же элементами колонки .cs-tbody, что и до правки, поэтому вся десктопная
   геометрия (обрезка анонса по строкам, прижатый к низу ряд миниатюр) не меняется.
   По этой же причине правила десктопного блока обращаются к анонсу и ссылке
   ПОТОМКАМИ, а не прямыми детьми .cs-tbody. */
.cs-tacc-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; margin: 0; padding: 10px 0;
  background: none; border: 0; border-top: 1px solid #ececec;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  color: #1a1a1a; text-align: left; cursor: pointer;
}
.cs-tacc-head:focus-visible { outline: 2px solid #a36b4f; outline-offset: 2px; }
/* Треугольник ровно тот же, что у подписи к фото (.cs-cap-tri): у всех раскрывашек
   кейса один язык. */
.cs-tacc-tri {
  flex: 0 0 auto; display: inline-block; width: 0; height: 0;
  border-top: 6px solid #a36b4f; border-left: 5px solid transparent; border-right: 5px solid transparent;
  transition: transform .2s ease;
}
.cs-tacc-head.open .cs-tacc-tri { transform: rotate(180deg); }
.cs-tacc-body { margin-top: 6px; }
.cs-tacc-body[hidden] { display: none; }

@media (min-width: 601px) {
  .cs-teaser .cs-tacc-head { display: none; }
  .cs-teaser .cs-tacc-body,
  .cs-teaser .cs-tacc-body[hidden] { display: contents; }
}


/* ── Страница кейса ──
   Текстовой колонки .cs-content в этом виде нет вовсе (case-single.php), поэтому
   .cs-card остаётся с одним ребёнком. Возвращаем блочный поток и снимаем
   десктопное ограничение .cs-media{flex:0 0 50%;max-width:50%} — иначе слайдер
   занимал бы половину ширины, а справа была бы пустота. Кейс идёт во всю ширину
   контейнера (владелец, 27.07.2026: «на ПК делать всё-таки на всю ширину кейс»);
   прежний собственный потолок 820px снят. */
.cs-page .cs-card { display: block; }
.cs-page .cs-media { max-width: 100%; }

.cpage-desc { max-width: 100%; }
.cpage-desc .cs-text { margin-top: 0; }
.cpage-desc .cs-text + .cs-text { margin-top: 14px; }
/* На компьютере длинный текст обычного кейса живёт в .cs-long-wrap (grid-свёртка);
   здесь он выводится напрямую, без обёртки, поэтому свёртку глушить не нужно. */

/* Специфичность нарочно 0,2,0: в main.css есть `.editor h1{font-size:4vw}` (0,1,1),
   и одиночный класс её не перебивает — порядок подключения тут не помогает. */
.cpage .cpage-h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0;
  color: #1c1c1c;
}
@media only screen and (max-width: 768px) {
  .cpage .cpage-h1 { font-size: 24px; }
  .cs-page .cs-media { max-width: 100%; }
}

/* ── Блок «что дальше» под кейсом ──
   Страница кейса ничего не продаёт и никуда не ведёт: ленты разделов на ней нет.
   Три выхода обратно в воронку — запись, соседние работы по этому же кузову,
   страница услуги (доска 29.07.2026). */
.cnext { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(28, 28, 28, .1); }
.cnext-cta { margin: 0 0 26px; }
/* Класс кнопки темы красит фон через --main-color, а он в этой теме достался от
   донора ЗЕЛЁНЫМ (main.css) — марочный синий пишем явно, не через переменную. */
.cnext .cnext-btn {
  background: #a36b4f;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 14px 28px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 2px;
  transition: background .15s ease;
}
/* Класс темы `md-main-color-btn` рассчитан на кнопку из ДВУХ детей — текст и
   стрелка: `display:flex; justify-content:space-between` + жёсткая ширина
   `28.65vw` (main.css). Здесь ребёнок один, поэтому кнопка была вчетверо шире
   надписи (замер 433px на текст ~250px), а надпись прижата к левому краю
   (замер отступов 28/156). Ширину отдаём содержимому (inline-flex, иначе
   flex-контейнер блочный и всё равно тянется на всю строку), надпись по центру.
   На телефоне ширина остаётся 100% — там кнопка во всю строку задумана.
   Правка одна на два сайта (владелец, 30.07.2026, Мерседес + БМВ). */
.cnext .cnext-btn { display: inline-flex; width: auto; justify-content: center; }
.cnext .cnext-btn:hover { background: #0f4fa8; }
.cnext .cnext-btn:focus-visible { outline: 2px solid #a36b4f; outline-offset: 3px; }

/* 21.08.2026, владелец: «заголовок "Другие работы" очень мелкий, сопоставим с
   заголовками кейсов, давай как обычные заголовки у нас идут». Было 22px узким
   фирменным начертанием — при 17px Arial у названий кейсов это читалось как один
   уровень. Теперь ровно спецификация обычного заголовка раздела сайта
   (h2.cs-heading / .editor h2): 50px/60px на ПК, 26px/40px ниже 700px. */
.cnext-h {
  font-size: 50px !important;
  font-weight: 600 !important;
  line-height: 60px !important;
  margin: 0 0 20px !important;
  color: #1c1c1c;
}
.cnext-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cnext-card { min-width: 0; }
.cnext-ph { display: block; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.cnext-ph img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cnext-t { font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
.cnext-t a { color: #1c1c1c; text-decoration: none; }
.cnext-t a:hover { color: #a36b4f; }
.cnext-price {
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 17px;
  color: #a36b4f;
  margin: 0;
  line-height: 1.1;
}
/* С 10.08.2026 плиток до шести (было три), то есть на ПК два ряда по три. На
   планшете три колонки дают карточку уже 200px — заголовок работы туда не влезает,
   поэтому промежуточный шаг в две колонки. */
@media only screen and (max-width: 900px) {
  .cnext-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 768px) {
  .cnext-grid { grid-template-columns: 1fr; gap: 18px; }
  .cnext .cnext-btn { width: 100%; }
}
@media only screen and (max-width: 699px) {
  .cnext-h {
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    margin-bottom: 18px !important;
  }
}

/* ── Страница кейса: только хлебные крошки, без строки меню ──
   Владелец, 27.07.2026: «меню скрывать, там нечего смотреть и листать, оставить
   хлебные крошки только». Заодно снимает горизонтальную прокрутку 18px: её давало
   выпадающее подменю «Популярные услуги», уходившее за правый край окна.
   Высота шапки в теме фиксированная (main.css `.header{height:11.77vw}`) и включает
   резерв под эту строку, поэтому высота здесь становится по содержимому — иначе на
   месте меню осталась бы пустая полоса. */
/* 🔴 30.07.2026 владелец сняла исключение для телефона («и на мобильном остался
   бургер»): убираем и кнопку бургера, и саму выезжающую панель. Прежнее
   возражение («без бургера страница кейса — тупик», принято 29.07.2026) ОТМЕНЕНО
   решением владельца; выход со страницы дают хлебные крошки, ссылки внутри кейса,
   блок «что дальше» и подвал. Паритет с Mercedes (`cases-slider-v42.css`).
   Панель и кнопка — РАЗНЫЕ элементы: `nav.header__nav` на ПК это строка меню, а
   на телефоне полноэкранная шторка (main.css: position:fixed + `.header.open`);
   кнопка — `.header__btn-wrap`. Прячем обе и на всех ширинах. */
body.cpage-body nav.header__nav,
body.cpage-body .header__btn-wrap { display: none; }
body.cpage-body header.header { height: auto; padding-bottom: 14px; }

/* Разделитель крошек — шеврон (владелец 10.08.2026), с 19.08.2026 рисуем его
   двумя рамками, а не глифом «›»: владелец «расположите стрелки по центру
   строки». Почему глиф не годился: `.breadcrumbs__item` центрует ФЛЕКС-БОКСЫ
   (align-items:center), а внутри своего бокса «›» стоит там, где его поставил
   рисовальщик шрифта, — и шрифт крошкам достаётся по наследству от body
   («Helvetica Neue», Helvetica, Arial), то есть он не фиксирован: на маке
   чернила глифа уходили на ~1px ниже оптического центра строки, на машине без
   Helvetica Neue (Arial) — на ~2.3px. Геометрический шеврон симметричен по
   вертикали, поэтому тот же align-items:center ставит его точно по центру
   строки на любом шрифте. Замерено: центр чернил шеврона == центр капитальной
   полосы текста (расхождение 0.5px = квантование пикселя) на 1920 и 390.
   Все размеры в em от собственного font-size ⇒ мобильная ветка ниже меняет
   только его. width/height = сторона квадрата, после поворота видимая высота =
   сторона × √2 ≈ 5.9px при 1920 — как у прежнего глифа (6px).
   translateX компенсирует то, что повёрнутая галка лежит в правой половине
   бокса; в margin добавлена разница ширин старого глифа (0.26em) и нового
   бокса (0.23em), чтобы ритм полосы остался прежним — замерено, ширина цепочки
   крошек не изменилась ни на 1920, ни на 390.
   flex:0 0 auto — у пустого бокса min-content = 0, без этого он схлопнулся бы
   в горизонтальной прокрутке крошек на телефоне.
   :first-child::before в теме погашен display:none — первую крошку не заденет.
   Правило точечное (body.cpage-body): крошки лендингов остаются как были. */
body.cpage-body .breadcrumbs__item::before {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 0.23em;
  height: 0.23em;
  border: 0 solid #8C8C8C;
  border-top-width: 0.075em;
  border-right-width: 0.075em;
  background-color: transparent;
  -webkit-transform: translateX(-0.08em) rotate(45deg);
      -ms-transform: translateX(-0.08em) rotate(45deg);
          transform: translateX(-0.08em) rotate(45deg);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 calc(0.78125vw + 0.015em);
  font-size: 0.9479166667vw;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  body.cpage-body .breadcrumbs__item::before {
    margin: 0 calc(2.1875vw + 0.015em);
    font-size: 4.0625vw;
  }
}


/* ── Компактный УТП на странице кейса (владелец 10.08.2026) ──
   Блок живёт ВНУТРИ текста кейса (после «Полезной информации», перед списками
   ссылок), а не в ритме секций .um-sec, который на странице кейса не работает —
   поэтому отступы задаёт своя обёртка. Само наполнение (.wc-block/.wc-compact,
   плашка .akpp-note, кнопки .wc-buttons) — та же семья правил, что на лендинге:
   один и тот же вид блока на обеих поверхностях, без второго набора стилей. */
.cs-utp { margin: 28px 0 4px; }
.cs-utp .wc-block { margin: 0 !important; }
@media only screen and (max-width: 768px) {
  .cs-utp { margin: 22px 0 4px; }
}

/* Пункты — маркированный список (владелец 19.08.2026: «и всё сплошным текстом,
   может, сделать здесь маркированный список лучше»). Точка нарисована ::before,
   а не list-style: пункт это <div>, и переводить его в <li> пришлось бы сразу в
   трёх местах вывода .wc-block (лендинг, главная, кейс). Жирность внутри пункта
   ставит оператор кнопкой «Ж» в панели — автоматической больше нет. */
.cs-utp .wc-list { margin: 0; }
.cs-utp .wc-item { position: relative; padding-left: 16px; margin-bottom: 6px; }
.cs-utp .wc-item:last-child { margin-bottom: 0; }
.cs-utp .wc-item::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: #262626; }

/* ── Видео о техцентре + отзывы на странице кейса (владелец 31.08.2026) ──
   Порт с Mercedes. Стоит сразу за блоком преимуществ. Состав тот же, что в первом
   экране (.um-hero2): слева ролик, справа колонка отзывов. Два отличия по решению
   владельца: блок живёт в колонке текста кейса, а не полосой во всю ширину, и на
   телефоне сетка складывается — сначала видео, потом отзывы.
   Разметка: um_case_tcv_html() в inc/function-modules/utp-macro.php.
   Бокс переиспользует .um-tcv-* выше в этом файле ⇒ тот же плеер в footer.php,
   здесь только кадр, сетка и колонка отзывов. */
.cs-tcv { margin: 28px 0 4px; }
.cs-tcv-h { margin: 0 0 6px; }
.cs-tcv-sub { margin: 0 0 14px; color: #595959; }
.cs-tcv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 33.3333%, 500px);
  gap: 20px;
  align-items: start;
}
/* Подборки отзывов нет ⇒ видео во всю ширину блока, а не пустая колонка. */
.cs-tcv-solo .cs-tcv-grid { grid-template-columns: minmax(0, 1fr); }
/* Кадр 16:9 на ОБЕИХ ширинах. Базовый .um-tcv-box это 21:9, а его мобильное правило
   меняет ещё и фон-обложку — поэтому обложку сервер пишет инлайном на элементе:
   правило из таблицы перебило бы наш класс на узком экране. */
.cs-tcv-box { aspect-ratio: 16 / 9; }
.cs-tcv-box .um-tcv-video { object-position: center; } /* бокс сам 16:9 — кропа нет */
/* Свой ролик кейса: живой обложки-петли у него нет, поэтому кадр виден сразу, а не
   только после нажатия play. */
.cs-tcv-box.cs-tcv-own .um-tcv-video { opacity: 1; pointer-events: auto; cursor: pointer; }
/* Колонка тянется на высоту ряда, а высоту ряда задаёт видео 16:9: свой блок отзывов
   в узкой раскладке (.umr--col, um-reviews.css) собран короче кадра, разницу забирает
   его рамка с карточкой. Скелетона нет: блок приходит с сервера вместе со страницей. */
.cs-tcv-rev { min-width: 0; align-self: stretch; }
.cs-tcv-rev > .umr { height: 100%; }

/* Узкое окно и телефон: колонки не ужимаем, а складываем — сначала видео, потом
   отзывы (ТЗ владельца). 900px = тот же порог, что у ряда на главной. */
@media only screen and (max-width: 900px) {
  .cs-tcv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 768px) {
  .cs-tcv { margin: 22px 0 4px; }
}

/* ── ЗАГОЛОВКИ РАЗДЕЛОВ СТРАНИЦЫ КЕЙСА — НИЖЕ H1 (владелец, 31.08.2026) ──
   Секция кейса это .editor, поэтому её h2 наследовали общесайтовые 50px/60px из
   main.css и печатались КРУПНЕЕ H1 (34px на ПК, 24px на телефоне). Держим шкалу
   самой страницы кейса: H1 34 → раздел 30 → карточка 17. На телефоне: H1 24 → 22. */
.cpage .cs-tcv-h,
.cpage .cs-corp-h,
.cpage .cnext-h,
.cpage .umr__title,
.cpage h2:not([class]) {
  font-size: 30px !important;
  line-height: 36px !important;
}
@media only screen and (max-width: 768px) {
  .cpage .cs-tcv-h,
  .cpage .cs-corp-h,
  .cpage .cnext-h,
  .cpage .umr__title,
  .cpage h2:not([class]) {
    font-size: 22px !important;
    line-height: 30px !important;
  }
}

/* ── Подвал прижат к низу окна ──
   На короткой странице (список из одного кейса) подвал висел посередине экрана.
   В потоке у body ровно четыре ребёнка: шапка, крошки, контент, подвал — всё
   остальное (попапы, виджеты, скрипты) вне потока, поэтому колонку можно растянуть
   на высоту окна и отдать остаток контенту. */
body.cpage-body { display: flex; flex-direction: column; min-height: 100vh; }
body.cpage-body > footer.footer { margin-top: auto; }

/* Воздух перед подвалом. Блок «что дальше» упирался в тёмную полосу подвала
   вплотную (владелец 10.08.2026): у шаблона страницы кейса нет нижнего отступа,
   а на лендингах его даёт последняя секция. Берём тот же зазор, что и там, — 48px,
   чтобы страница кейса не выбивалась из ритма сайта. */
body.cpage-body section.editor.cpage { padding-bottom: 48px; }
@media only screen and (max-width: 768px) {
  body.cpage-body section.editor.cpage { padding-bottom: 32px; }
}

/* ── Прыжки при скролле: лента-меню внутри шапки ──
   Тема при скролле разворачивает мобильную ленту-меню (`#sticky-menu`) ВНУТРИ
   <header>. Пока высота шапки фиксированная (main.css `.header{height:11.77vw}`),
   это незаметно — лента укладывается в резерв. Здесь высота шапки по содержимому,
   поэтому шапка вырастала на 95px посреди скролла: документ становился выше, потом
   ниже, и страница прыгала вверх-вниз. На странице кейса эта лента и не нужна —
   в ней те же ссылки-якоря, которых на странице кейса нет (владелец 27.07.2026:
   «нечего смотреть и листать»). Прячем вместе со стрелками её прокрутки.
   Селектор с id перебивает `.mobile-scroll-menu.visible` без !important. */
body.cpage-body #sticky-menu,
body.cpage-body .scroll-arrow { display: none; }

/* ── Моб. страница кейса: высота шапки без ленты-меню ──
   🔴 Бургера здесь больше нет (решение владельца 30.07.2026, отменяет решение от
   29.07 — см. правило выше). Этот блок про другое: про пустую полосу, которую
   давала мобильная высота внутренней шапки (main.css `.header-v2
   {height:17vw}` в @media 768px) — резерв под ленту-меню и под логотип, который
   выше своего контейнера (`.logo-container-v2{height:8vw}` против картинки 11.8vw).
   Поэтому не просто auto у `.header-v2`, а ещё и контейнер логотипа по картинке —
   иначе логотип вылезал бы из шапки на крошки. Всё в vw, как и сам логотип, так
   что пропорция держится на любой ширине телефона. */
@media (max-width: 768px) {
  body.cpage-body .header-v2 { height: auto; }
  /* 🔴 10.08.2026: контейнер логотипа снова по содержимому. Раньше он был жёстко
     11.8vw (по картинке), потому что текст в две строки (26px + 14px = 44.8px)
     всегда был НИЖЕ картинки, а `margin-bottom:8vw` у текстового логотипа при
     auto наливал в шапку 31px пустоты. Теперь строк три (добавлена подпись
     «Сервис BMW в Москве») — текст 61.8px, и на узких телефонах он ВЫШЕ картинки
     (46px на 390px), то есть при жёстких 11.8vw он вылезал бы из шапки на крошки.
     Пустой margin гасим отдельным правилом ниже. */
  body.cpage-body .logo-container-v2 { height: auto; }
  body.cpage-body .logo-text-v2 { margin-bottom: 0; }
  /* Воздух снизу равен верхнему (2vw отступ шапки + 2vw отступ .header-v2 = 4vw):
     с тремя строками текст стал ниже картинки, и прежние 1vw+6px читались как
     «строка отзывов упирается в край» (та же правка, что на Мерседесе). */
  body.cpage-body .header-v2 { padding-bottom: 0; }
  body.cpage-body header.header { padding-bottom: 4vw; }
  /* На телефоне шапка темы `position:fixed`, а место под неё держит отступ сверху
     у body (main.css `body{padding-top:25vw}` в @media 768px), поэтому резерв
     обязан повторять высоту шапки. Сумма по частям: 1.9875vw её собственный
     отступ сверху + 2vw отступ .header-v2 + 4vw отступ снизу = 7.9875vw, плюс
     САМОЕ ВЫСОКОЕ содержимое ряда. И картинка (11.8vw), и текст (61.8px, три
     строки в px) претендуют на это место, а перевес меняется около 525px ширины —
     чистого vw-выражения тут не существует, поэтому max(). Меняешь размер строк
     или картинки — пересчитай 62px. */
  body.cpage-body { padding-top: calc(7.9875vw + max(11.8vw, 62px)); }
  /* Крошки слева, по краю заголовка. Тема на телефоне центрует ряд
     (`main.css @media(max-width:768px) .breadcrumbs .wrapper{justify-content:center}`):
     пока цепочка была длиннее строки, центрирование ничего не двигало, а 10.08.2026
     из неё убрали название кейса — и короткий ряд уехал в середину. Правило точечное:
     на лендингах BMW крошки остаются как были. */
  body.cpage-body section.breadcrumbs .wrapper { justify-content: flex-start; }
}

/* ── Подпись «Сервис BMW в Москве» под названием компании (владелец, 10.08.2026) ──
   Страница кейса — самостоятельная точка входа из поиска и рекламы, шапка должна
   сразу отвечать «куда я попал». Разметку печатает header2.php по переменной
   $um_hd_tagline, её задаёт только template-case.php.
   Строка вторичная: 13px против 26px у названия и серая на белом фоне шапки BMW
   (на Мерседесе шапка чёрная, там серый светлее). Только телефон — на ПК тема
   прячет и строку отзывов `.main-v1`, шапка там из одного названия. */
body.cpage-body .um-hd-tagline { display: none; }
@media (max-width: 768px) {
  body.cpage-body .um-hd-tagline {
    display: block;
    font-family: "Raleway", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15;
    color: #6b6b6b;
    white-space: nowrap;
    margin-bottom: 2px;
  }
}

/* 29.07.2026 — фото шильдика модели (.cs-model-badge): паритет с Mercedes.
   Рендер (cl_model_photo_html/cl_inject_model_photo) приехал на BMW вместе с
   cases-library, а ограничивающего правила не было ни в custom.css, ни тут —
   figure рисовалась в натуральную величину картинки (2560x1440).
   Правило взято дословно из MB custom.css:3391 (порт на прод MB 18.06.2026),
   spec — ДОКУМЕНТАЦИЯ/cases-model-photo.md: на компьютере шильдика НЕТ вовсе,
   на телефоне он во всю ширину колонки и не выше 200px. Владелец 29.07.2026
   сначала попросил показать его и на ПК, затем вернул решение к варианту MB. */
.cs-model-badge{display:none}
@media (max-width:768px){
  .cs-model-badge{display:block;margin:12px 0;border-radius:12px;overflow:hidden;line-height:0}
  .cs-model-badge img{display:block;width:100%;height:auto;max-height:200px;object-fit:contain;border-radius:12px}
}

/* 30.07.2026 — «Наша команда»: карточка сотрудника как на Mercedes.
   Было: квадрат 19.27vw, внутри круглое фото (круг вырезан в самих файлах
   452x452, углы белые), имя и должность чёрным по белому ниже круга — на
   вертикальной фотографии так уже не работает. Стало (как MB main.css:12473):
   вертикаль 3:4 во всю карточку, скруглённые углы, имя и должность белым по
   затемнению снизу. Слайдер (.team__slider) уже 26.04vw — под квадратной
   карточкой там оставалась пустая полоса.
   🔴 Радиус пишем числом: --brad-regular в этой теме сломан (значение «vw»),
   var() дал бы 0. Число — то же, что даёт MB: 0.8229166667vw = 12.44px @1512. */
.team__slide { height: 26.0416666667vw; overflow: hidden; border-radius: 0.8229166667vw; }
.team__slider .swiper-slide { border-radius: 0.8229166667vw; overflow: hidden; }
.team__slide .slide-info {
  top: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.07) 23.2%, #000000 124.7%);
}
@media only screen and (max-width: 768px) {
  /* Радиус карточки на телефоне у темы свой (7.8125vw = 30.5px, как на MB), но
     правило выше стоит вне медиа-запроса и перебивало его 12px — повторяем. */
  .team__slide { height: 103.125vw; border-radius: 7.8125vw; }
}
/* 🔴 Нижние паддинги секции .team (блок «Единый ритм 15px» выше) НЕ трогаем.
   Пробовал обнулить, раз подпись больше не свисает ниже карточки: точки листалки
   лежат ниже слайдера на ~50px, и без паддинга секции они наезжают на «Схему
   проезда» (замер на 390px: перекрытие 23px). Резерв нужен именно под точки. */

/* ── Unified section headings (30.07.2026, owner: «все заголовки чёрные и одного
   размера, эталон — какой-нибудь чёрный»). The donor theme painted most section
   titles with var(--main-color) (#a36b4f) at 24px, while h2.cs-heading rendered
   50px/#1a1a1a — so every landing mixed blue 24px and black 50px titles. This
   levels every SECTION-level heading to the .cs-heading spec (50px/60px desktop,
   26px/40px below 700px, weight 600, #1a1a1a).
   🔴 !important on colour is mandatory: «Отзывы» carries an inline
   style="color:var(--main-color)" and the CORP_CLIENTS block sets the colour on its
   own wrapper <div> — both come from standard_blocks HTML injected by JS, not CSS,
   so a plain declaration loses to the inline style.
   Selectors are an explicit list built from a full h1-h6 inventory of all 20 BMW
   pages (30.07.2026) — deliberately NOT a blanket `.editor h2`, which would also
   swallow card/lead titles. NOT touched: .akpp-note (16px lead line), .wc-item-title
   and .csl__title (card titles), .cs-case-heading (28px case title), hero h1 /
   .first__title, .download-price__title (white on dark popup), politika popup,
   .contacts__info-social h2 (sub-heading inside the contacts column).
   NB: .cs-heading keeps its own rule above — it IS the reference, left untouched. ── */
html { --um-h2-fs: 50px; --um-h2-lh: 60px; }
@media (max-width: 699px) { html { --um-h2-fs: 26px; --um-h2-lh: 40px; } }

.editor > .wrapper > h2,
.editor > .wrapper > div > h2:not(.akpp-note),
.editor > .wrapper > .section-container .text-block > h2,
.editor > .wrapper > .hyundai-two-columns > .column > h2,
.editor > .wrapper > .hyundai-service .service-content > h2,
.editor > .wrapper > .checklist-section > .wrapper > h2,
section.team > .wrapper > h2.team__title,
section.questions > .wrapper > h2.questions__title,
section.contacts .contacts__address > h2,
section.contacts .contacts__info > h2.contacts__info-title,
section.contacts .contacts__map-title > h2 {
  color: #1a1a1a !important;
  font-size: var(--um-h2-fs);
  line-height: var(--um-h2-lh);
  font-weight: 600;
}


/* ── 03.08.2026 — лента-меню и её стрелки появляются ТОЛЬКО после скролла ──
   Порт механики Mercedes (main.css `.show-scroll-elements`, main.js scrollY>200).
   До этого дня `#sticky-menu` на BMW был виден сразу при открытии страницы: тема
   держит ленту внутри фиксированной шапки, класс `.visible` от main.js ничего не
   переключал (в main.css у `#sticky-menu` и `display:none`, и `opacity:0` закомменти-
   рованы ещё донором). Владелец 03.08.2026: «верхнее горизонтальное меню появляется
   сразу, а не после скрола, в результате на первом экране не помещается CTA».
   Лента лежит в потоке внутри position:fixed шапки, поэтому прячем прозрачностью со
   сдвигом (как на Mercedes), а не display:none — высота шапки не меняется, страница
   не прыгает в момент появления.
   Стрелки: у темы поворот зашит прямо в `transform` (.scroll-arrow-left/right), а
   он же нужен нам для сдвига — поэтому угол выносим в переменную --arrow-rotate и
   собираем оба преобразования в одном свойстве. Иначе стрелки либо не едут, либо
   разворачиваются. Порядок в transform важен: сдвиг, потом поворот.
   `body.cpage-body` (страница кейса) прячет ленту через display:none выше — там эти
   правила просто не на что применить. */
#sticky-menu,
.scroll-arrow{
  opacity:0;
  -webkit-transform:translateY(20px);
  transform:translateY(20px);
  -webkit-transition:opacity .4s ease,-webkit-transform .4s ease;
  transition:opacity .4s ease,transform .4s ease;
  pointer-events:none;
}
.scroll-arrow-left { left:0;  --arrow-rotate:-90deg; }
.scroll-arrow-right{ right:0; --arrow-rotate:90deg; }
.show-scroll-elements #sticky-menu{
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.show-scroll-elements .scroll-arrow{
  -webkit-transform:translateY(0) rotate(var(--arrow-rotate));
  transform:translateY(0) rotate(var(--arrow-rotate));
  opacity:1;
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  #sticky-menu,.scroll-arrow{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}
}

/* ── 03.08.2026 — главная: контент начинается сразу под шапкой ──
   `body{padding-top:25vw}` (main.css, ≤768px) резервировал место и под шапку
   (`.header{height:20vw}`), и под ленту-меню. Лента теперь до скролла невидима, а
   после — накрывает контент собой (та же схема, что на Mercedes), поэтому резерв
   под неё на первом экране больше не нужен: 5vw ≈ 19px возвращаются первому экрану.
   Только главная (`body.um-front`), лендинги не трогаем.
   🔴 Класс называется um-front, а НЕ um-home: `.um-home` в этом же файле уже занят
   спящим правилом `.um-home .um-tcv{margin:30px 0}` (20px на телефоне) — остаток порта
   с Mercedes, который на BMW никогда не срабатывал, потому что такого класса на теле
   страницы не было. Повесить на главную um-home = разбудить его и сломать ритм 15px
   вокруг видеоблока: `.um-home .um-tcv` идёт по файлу ПОЗЖЕ, чем `.um-sec + .um-sec`,
   и при равной специфичности выигрывает. */
@media only screen and (max-width:768px){
  body.um-front{ padding-top:20vw; }
}

/* ── 03.08.2026 — главная: пустой хвост под подзаголовком первого экрана ──
   `.first__text` тянет за собой margin-bottom 7.8vw (≈30px на телефоне). В обычной
   шапке он не мешает — там ниже идут «булиты» и кнопки. В фото-шапке (`.um-hero-m`)
   текст и снимок лежат в одной ячейке сетки, поэтому эти 30px становятся невидимой
   подушкой, которая не даёт первому экрану стать короче и в какой-то момент начинает
   сама задавать его высоту. Убираем только на главной; лендинги не трогаем. */
@media only screen and (max-width:768px){
  body.um-front .um-hm-text .first__text{ margin-bottom:0; }
  /* Тот же счёт сверху: тема отбивает содержимое первого экрана от края секции ещё
     раз (`.first__content{padding-top:5.6vw}`) поверх собственного отступа секции.
     На главной эти два отступа складывались в 41px до заголовка при том, что до
     строки логотипа сверху остаётся всего 82px. Оставляем 2vw — H1 отходит от шапки
     примерно на столько же, на сколько отходил раньше, а первый экран становится
     короче на ~14px. */
  body.um-front .first.um-hero-m .first__content{ padding-top:2vw; }
}

/* ── 03.08.2026 — главная: нижняя обрезка первого экрана больше не режет подпись ──
   🔴 Ползунок «Отступ снизу шапки» в панели укорачивает первый экран не тем, что
   сжимает его, а тем, что ПРЯЧЕТ его низ: он пишет и отрицательный margin-bottom,
   и `clip-path:inset(0 0 Nvw 0)` — оба из одного значения. Пока снимок был большой,
   в срезаемую полосу попадал только пустой белый низ фотографии. После того как
   03.08 снимок уменьшили (69%→50%), низ секции поднялся, а срез остался прежним по
   величине — и строка «М. Коломенская» под заголовком стала обрезаться на 15px
   (жалоба владельца со скриншота телефона: «h1 залез под блок»).
   Убираем срез ТОЛЬКО на главной: отрицательный отступ снизу остаётся, поэтому блок
   преимуществ не съезжает, а показанная обратно полоса — это белый низ фотографии на
   белой же секции, визуально там ничего нет.
   🔴 На будущее: уменьшая фото первого экрана, ВСЕГДА проверяй, не попала ли подпись
   под заголовком в срез. Страницы со своим значением ползунка на 03.08.2026: главная,
   /atf/ (15vw) и /maintenance/ (13vw); у двух последних запас 101 и 83px, их не трогаем. */
@media only screen and (max-width:768px){
  body.um-front .first.um-hero-m{ -webkit-clip-path:none !important; clip-path:none !important; }
}


/* ── 03.08.2026 — шапка и первый экран встают на ту же сетку, что и остальной сайт ──
   Владелец (скриншот 376px): «h1 и хедер шире чем контент сайта». Так и есть — в теме
   два правила тянут свои блоки на 3vw ЛЕВЕЕ контентной колонки:
     main.css  .first__content{margin-left:-3vw}                    (без медиазапроса)
     main.css  @media(max-width:768px){ .logo-container-v2{margin-left:-3vw} }
   Контентная колонка = `.wrapper{width:86.25vw}` по центру, то есть на 376px её левый
   край на 25.9px, а логотип и заголовок начинались на 14.6px. Правый край при этом
   совпадал, поэтому казалось, что шапка и H1 «шире».
   Логотипу отступ обнуляем. У первого экрана НЕ трогаем сам `.first__content`: в нём
   лежит и фотография, сдвиг контейнера увёл бы вправо и её, сломав подобранный
   владельцем вылет за край. Двигаем только текстовую ячейку `.um-hm-text` — снимок
   остаётся ровно там же. Только ≤768px: на ПК первый экран этой темой скрыт, а
   `.first__content` там ещё обслуживает страницы формы/ошибки/спасибо. */
@media only screen and (max-width:768px){
  .logo-container-v2{ margin-left:0; }
  .first.um-hero-m .um-hm-text{ margin-left:3vw; }
}

/* ------------------------------------------- CTA pair on desktop (18.08.2026, MB parity)
   `main.css` gives `.wc-btn` `flex: 1 1 0%`, so the «Позвонить» / «Написать в WhatsApp»
   pair stretched across the whole container (≈580px each at 1440 for labels ~120 and
   ~220px wide). Owner, 17.08.2026 on Mercedes: the buttons must be as wide as their text
   and stand centred. `.wc-buttons` already carries `justify-content: center`, so dropping
   the stretch is enough. Side padding 28px — at content width the old 6/10px pressed the
   label against the edge; `max-width: 100%` and `flex-wrap: wrap` keep a narrow container
   (popup) from overflowing. Phones (≤768px) keep the full-width stretch on purpose: there
   a button has to be thumb-sized. */
@media only screen and (min-width: 769px) {
  .wc-buttons { flex-wrap: wrap; }
  .wc-btn { flex: 0 0 auto; max-width: 100%; padding: 12px 28px; }
}

/* === Слайдер «Наша команда» на телефоне: карточка целиком на экране =========
   Порт правки Mercedes от 19.08.2026 (полное описание: changelog/mercedes/2026-08.md).
   Владелец: «сейчас слишком большие по высоте фото для телефона» — карточка не
   помещалась на экран, приходилось скроллить внутри блока, а фиксированная
   полоса «Позвонить/WhatsApp» перекрывала низ фотографии с именем и должностью.
   Было: main.css (<=768px) даёт .team__slide{width:76.5625vw; height:76.5625vw},
   а блок «Card shape» выше в ЭТОМ файле поднимает высоту до 103.125vw —
   пропорция ~3:4,05, привязанная только к ШИРИНЕ экрана. На 375x667 карточка
   287x387 при видимой высоте окна ~559px и полосе контактов 48px.
   Стало: пропорция 4:5 плюс потолок 52% высоты экрана.
   height:auto обязателен — иначе жёсткая высота бьёт пропорцию. Фото и так
   object-fit:cover, поэтому кадрируется, а не сжимается. Ширину не трогаем:
   от неё зависит шаг перелистывания (Swiper, slidesPerView:1).
   Нижняя граница потолка — ширина карточки (76.5625vw): без неё на планшете
   768px потолок в 52svh давал 588x532, то есть карточка становилась ШИРЕ, чем
   выше, и cover срезал портретное фото сверху и снизу по лицу. С max() потолок
   никогда не опускается ниже квадрата.
   Строка 52vh стоит первой как запасная для браузеров без svh/max(); svh
   (малый вьюпорт) — чтобы на iOS высоту считали при ПОКАЗАННОЙ адресной строке.
   Правило идёт последним в файле: блок «Card shape» выше задаёт height внутри
   такого же @media, побеждаем порядком следования. */
@media only screen and (max-width: 768px){
  .team__slide{
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 52vh;
    max-height: max(76.5625vw, 52svh);
  }
}

/* === «Наша команда»: ряд кнопок и отступы точек — как на Mercedes ============
   Владелец, 19.08.2026: «кнопки надо чтобы были идентичны и пагинация отступы
   имела тоже идентичные». Пара «Позвонить / Написать в WhatsApp» под слайдером
   добавлена в template-parts/members.php (порт разметки Mercedes), здесь —
   геометрия полосы между слайдером и этим рядом.
   Было: точки жили по общему для темы правилу .md-standart-slider
   .slider-pagination — bottom -15.25vw на телефоне (у Mercedes -6.25vw) и
   -4.1666666667vw на ПК. На телефоне точки уезжали на 57px вниз, на ПК —
   на 12px ВНУТРЬ следующей секции, потому что ритм 15px обнулил margin-bottom
   слайдера. Стало: полоса ровно как у Mercedes — на ПК 32px до точек и 32px
   после них, на телефоне 14px и 12px.
   Скоуп строго section.team: класс .md-standart-slider висит ещё на десятке
   слайдеров темы, их отступы не трогаем.
   Нижний паддинг секции обнулён: комментарий выше («резерв под свисающую
   карточку сотрудника») устарел после переделки карточки 30.07.2026 — .slide-info
   лежит внутри карточки (top:0) и ниже слайдера ничего не выступает, проверено
   замером. Зазор до следующего блока теперь задаёт только межблочные 15px. */
@media only screen and (max-width: 768px){
  section.team .team__slider .slider-pagination{ bottom: -6.25vw; }
  section.team{ padding-bottom: 0; }
  section.team + *{ margin-top: var(--um-gap); }
}
@media only screen and (min-width: 769px){
  section.team .team__slider{ margin-bottom: 5.2083333333vw; }
  section.team .team__slider .slider-pagination{ bottom: -2.9947916667vw; }
  section.team{ padding-bottom: 0; }
}

/* === «Наша команда»: боковые поля кнопок на телефоне ==========================
   Владелец, 19.08.2026: «кнопки надо чтобы были идентичны». При одинаковой
   разметке высота ряда расходилась: Mercedes и BMW 78px, Hyundai 62px.
   Причина не в шрифте как таковом, а в переносе: «Написать в&nbsp;WhatsApp»
   склеен неразрывным пробелом в один токен, и при боковых полях 25px текстовое
   поле кнопки (160 − 50 − 20 иконка − 8 зазор = 82px) оказывалось УЖЕ этого
   токена. Браузер тогда рвёт слово посреди: «Написать / в WhatsAp / p» — три
   строки. У Hyundai шрифт уже, токен влезал, выходило две строки.
   На 320px было ещё хуже: четыре строки и высота 95px.
   Поля 10px дают запас на всех трёх шрифтах: подпись всегда в две строки,
   ряд 62px на 320 и на 375. Скоуп section.team — семья .wc-* стоит ещё в
   десятке блоков сайта, их поля не трогаем. */
@media only screen and (max-width: 768px){
  section.team .wc-btn{ padding-left: 10px; padding-right: 10px; }
}

/* ── Шапка: белый фон, как на BMW, шрифты Genesis (владелец, 03.09.2026) ─────
   Сначала этот блок был вырезан целиком: перенесённый с BMW, он красил шапку
   белым, а текст в теме остаётся белым, и надписи пропадали. Владелец уточнил,
   что белая шапка нужна. Поэтому блок вернули и дополнили тем, чего у BMW нет:
   разметкой .um-hd-wordmark / .um-hd-actions в header2.php и тёмным знаком
   марки. Шрифты и цвет — Genesis. */


/* ── Genesis, 03.09.2026 ───────────────────────────────────────────────────────
   Uniform 15px between top-level sections. Measured 75px between «Наша команда»
   and «Схема проезда»: `.team__slider` carries margin-bottom 5.20833vw from
   main.css, this file re-declares the same value BELOW its own `0` rule, and the
   margin escapes the section (nothing establishes a block formatting context on
   it), so it lands between the two sections instead of inside the first.
   The margin is load-bearing: it clears the slider's absolutely-positioned
   pagination dots, which sit 32-43px below the slider box. So it is contained,
   not removed. */
section.team { display: flow-root; }
section.team .team__slider { margin-bottom: 48px; }

/* ── Genesis brand tokens for the reviews block (03.09.2026) ───────────────────
   um-reviews.css ships Mercedes values and loads AFTER this file, so the doubled
   attribute selector raises specificity instead of relying on order:
     --umr-accent      #3366cc  → #a36b4f  (site --main-color)
     --umr-accent-dark #274f9e  → #7d5039  (darker step for :hover)
     --umr-font        MBCorpoS → the face this site actually ships. «MBCorpoS» has
                       no @font-face here, so every card was rendering in Arial.
   Tab radius: the block drew 999px pills; the site's own buttons (.wc-btn,
   .catalog__btn) are 8px, so the tabs follow the site. */
.umr[data-umr][data-umr]{
  --umr-accent: #a36b4f;
  --umr-accent-dark: #7d5039;
  --umr-font: genesissansheadregular-arial-sans-serif;
  --umr-font-h: genesissansheadregular-arial-sans-serif;
}
.umr[data-umr][data-umr] .umr__tab{ border-radius: 8px; }
.umr[data-umr][data-umr].umr--dark .umr__bar{ background: #a36b4f; }
/* Ритм: у блока отзывов своя полоса с полями 96px сверху и снизу — это макет
   Mercedes, где полоса цветная и читается как отдельная лента. Здесь фон полосы
   белый, такой же, как у страницы, поэтому это не лента, а пустота. Поля сняты
   совсем: расстояние до соседей задаёт только межблочный шаг --um-gap, иначе у
   отзывов он складывался бы из шага и собственного поля и был бы больше, чем у
   остальных блоков. 03.09.2026: было по 15px. */
.umr[data-umr][data-umr]{ padding-top: 0; padding-bottom: 0; }

/* ============================================================
   UM header redesign — порт с BMW на Genesis (03.09.2026)
   Исходник: mercedes assets/css/custom.css, блок «UM header redesign» 13.07.2026,
   Figma «ЮМ» (ESKcl2UooxNHd72cjBEJzb), узлы 0:30 (top), 0:55 (top scroll),
   0:80 (UI kit). Только ПК >= 769px; <= 768px мобильная шапка не тронута.
   Геометрия, типографика и поведение при скролле повторены 1:1: высота 160px на
   канвасе 1440, логотип 69px, надпись 287x56, ряд меню 40px с двумя волосяными
   линиями, размеры тянутся во vw ниже 1440 и упираются в макетные px через clamp().
   🔴 От Mercedes берём ТОЛЬКО ГЕОМЕТРИЮ (владелец, 28.08.2026). Шрифт и цвет свои.
   Шрифт: везде фирменный шрифт Genesis, как на всём сайте, а не Manrope из
   макета ЮМ. У этой гарнитуры на BMW одно начертание: font-weight:700 не даёт
   ничего (замерено: одна и та же строка в 400 и в 700 шириной 524px), поэтому
   жирность нигде не заявляем, а текущий пункт меню отличаем подчёркиванием.
   Цвет: у Mercedes шапка чёрная, у BMW белая. Инвертируем палитру, размеры те же:
     фон #fff, текст и рамка кнопки var(--text-main-color) (это #262626, цвет текста
     всего сайта; НЕ --main-color, тот в теме BMW до сих пор зелёный),
     линии rgba(28,28,28,.2),
     закреплённая полоса меню rgba(255,255,255,.95) + нижняя линия,
     заливка кнопки при наведении #a36b4f (это CP_SITE_ACCENT: `--main-color` в теме
     BMW до сих пор донорский зелёный #a36b4f, var() дал бы зелёную кнопку).
   Отсюда же второе отличие: логотип-надпись берём в тёмном файле
   um-logo-wordmark-dark.svg (у Mercedes белый um-logo-wordmark.svg). Цвет надписи
   в файле #262626 — тот же, что у текста шапки, как на Mercedes логотип цвета
   текста (белый). Правишь цвет текста — перерисуй и файл.
   Разметка: header2.php (.um-hd-wordmark + .um-hd-actions; ряд .top-info-v2 и обе
   кнопки .btn-v2 оттуда удалены). Строка отзывов под названием на BMW называется
   .main-v1, а не .sub-v2 — так её ищет своя копия скрипта в main.js.
   ============================================================ */
@media (min-width: 769px) {
  /* шапка целиком: белый блок по содержимому; уезжает вместе со страницей —
     закрепляется только полоса меню (.header__nav.fixed, штатный порог main.js) */
  .header.md-bg-transparent {
    height: auto;
    padding-top: 0;
    margin-bottom: 0;
    background-color: #fff;
  }
  .header.md-bg-transparent .header-v2 {
    border-bottom: none;
    padding-bottom: 0;
  }
  /* --- верхний ряд: логотип слева, телефон + кнопка справа --- */
  .header.md-bg-transparent .main-header-v2 {
    margin-top: clamp(24px, 2.2917vw, 33px);
    align-items: center;
  }
  /* Высота слота логотипа = 69px макета. У Mercedes и BMW её задаёт сам знак
     марки (кругляш 69x69), у Genesis знак широкий и низкий (128x26), поэтому
     высоту держит контейнер, а знак стоит в нём по центру. Ряд шапки от этого
     остаётся ровно тем же: 33 + 69 + 18 + 40 = 160px на канвасе 1440. */
  .header.md-bg-transparent .logo-container-v2 {
    gap: 0;
    height: clamp(50px, 4.7986vw, 69px);
    align-items: center;
  }
  /* :not(.um-hd-wordmark) — правило размера знака в main.css (6vw x 2vw) попадает
     и в надпись. 🔴 Знак Genesis это крылья 128x26: в квадрат 69x69 он вписывался
     с полями сверху и снизу и читался как маленький логотип в пустоте. Держим его
     собственную пропорцию, ширина тянется во vw и упирается в 128px файла. */
  .header.md-bg-transparent .logo-container-v2 > a:not(.um-hd-wordmark) > img {
    /* display:block обязателен: ссылка знака марки на ПК переведена в block (см.
       переключатель светлый/тёмный ниже), и строчная картинка добавляла к ней 5px
       на нижний выносной элемент строки. Знак вставал в слоте на 2.5px выше центра. */
    display: block;
    width: clamp(96px, 8.8889vw, 128px);
    height: auto;
    aspect-ratio: 128 / 26;
  }
  .header.md-bg-transparent .logo-text-v2 { display: none; }
  .um-hd-wordmark { display: block; margin-left: clamp(16px, 1.5278vw, 22px); }
  /* 🔴 aspect-ratio, которого нет у Mercedes: на BMW работает ленивая загрузка
     картинок (Smush) — она подменяет src заглушкой 1x1, и до подгрузки надписи
     бокс становился квадратом 287x287, шапка мерилась в 378px вместо 160px.
     В разметке картинка помечена no-lazyload/skip-lazy, это правило — страховка:
     пропорция задана явно, любая заглушка держит тот же кадр 287x56. */
  .um-hd-wordmark img {
    display: block;
    width: clamp(208px, 19.9462vw, 287px);
    height: auto;
    aspect-ratio: 287 / 56;
  }
  .header.md-bg-transparent .header__btn-wrap { display: none; }
  .um-hd-actions {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.1111vw, 16px);
  }
  .um-hd-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main-color);
    font-family: genesissansheadregular-arial-sans-serif;
    font-size: clamp(17px, 1.6667vw, 24px);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .3s;
  }
  .um-hd-phone:hover { opacity: .7; color: var(--text-main-color); }
  .um-hd-phone svg { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
  .um-hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(160px, 15.2778vw, 220px);
    padding: clamp(13px, 1.25vw, 18px) clamp(18px, 1.6667vw, 24px);
    /* Рамка, текст и скругление свои: медный #a36b4f = CP_SITE_ACCENT, радиус 8px
       как у остальных кнопок сайта (.wc-btn, вкладки отзывов). Размеры, поля и
       положение в ряду — макетные, от Mercedes и BMW. */
    border: 1px solid #a36b4f;
    border-radius: 8px;
    background: transparent;
    color: #a36b4f;
    font-family: genesissansheadregular-arial-sans-serif;
    font-size: clamp(12px, 1.1111vw, 16px);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .3s, border-color .3s, color .3s;
  }
  .um-hd-btn:hover {
    background: #a36b4f;
    border-color: #a36b4f;
    color: #fff;
  }
  /* --- ряд меню: 40px, волосяные линии сверху и снизу, фирменный шрифт капителью --- */
  .header.md-bg-transparent .header__nav { margin-top: clamp(13px, 1.25vw, 18px); }
  .header.md-bg-transparent .nav-wrap {
    border-top: 1px solid rgba(28, 28, 28, .2);
    border-bottom: 1px solid rgba(28, 28, 28, .2);
  }
  .header.md-bg-transparent .nav-wrap .nav {
    height: 38px;
    align-items: center;
  }
  .header.md-bg-transparent .nav-wrap .nav > .nav-item {
    height: 100%;
    padding: 11px 0;
  }
  .header.md-bg-transparent .nav-wrap .nav > .nav-item:first-child img,
  .header.md-bg-transparent .nav-wrap .nav > .nav-item:first-child svg {
    width: 18px;
    height: 18px;
  }
  /* Размер: макетные 16px рассчитаны на 6 пунктов Figma, живое меню держит больше —
     на 16px строка не влезала в 1200px контента, флекс переносил последний пункт на
     вторую строку. 14px + nowrap держат ряд в одну строку на всех ПК-ширинах. */
  .header.md-bg-transparent .nav-wrap .nav > .nav-item > a {
    font-family: genesissansheadregular-arial-sans-serif;
    font-size: clamp(11px, 0.9722vw, 14px);
    font-weight: 400;
    line-height: 1;
    color: var(--text-main-color);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .header.md-bg-transparent .nav-wrap .nav > .nav-item > a:hover {
    color: var(--text-main-color);
    text-decoration: underline;
  }
  /* Тема при наведении на пункт с выпадашкой красит его фон в #F5F8F9. По макету
     наведение = только подчёркивание, фон не меняем. */
  .header.md-bg-transparent .nav-wrap .nav > .nav-item.dropdown-item:hover {
    background-color: transparent;
  }
  .header.md-bg-transparent .nav-wrap .nav > .nav-item.dropdown-item:hover > a {
    color: var(--text-main-color);
    text-decoration: underline;
  }
  /* Текущий пункт: в UI kit это полужирный + подчёркивание, но у фирменного шрифта
     одно начертание — font-weight:700 не даёт ничего. Оставляем подчёркивание. */
  .header.md-bg-transparent .nav-wrap .nav > .nav-item > a.active {
    text-decoration: underline;
  }
  /* галочка выпадашки: 16px, тёмная (Figma oui:arrow, развёрнута вниз) */
  .header.md-bg-transparent .nav-wrap .nav > .nav-item.dropdown-item::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: 2px;
    margin-bottom: 0;
    border: none !important;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23262626' d='M2.93 5.16a.55.55 0 0 1 .77 0L8 9.45l4.3-4.29a.55.55 0 0 1 .77.78l-4.6 4.6a.66.66 0 0 1-.94 0l-4.6-4.6a.55.55 0 0 1 0-.78z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s;
  }
  .header.md-bg-transparent .nav-wrap .nav > .nav-item.dropdown-item:hover::after {
    transform: rotate(180deg);
  }
  /* закреплённая полоса меню (main.js вешает .fixed): у Mercedes тёмная полупрозрачная,
     здесь светлая. Селектор из семи классов обязан перебить main.css .md-white-header
     .fixed, который красит ссылки в белый. Нижняя линия отделяет полосу от контента —
     на белом без неё полоса сливается со страницей (у Mercedes её роль играет тёмный фон). */
  .header.md-bg-transparent .header__nav.fixed {
    margin-top: 0;
    padding: 6px 0;
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 0 rgba(28, 28, 28, .12);
  }
  .header.md-bg-transparent .header__nav.fixed .nav-wrap {
    border-top: none;
    border-bottom: none;
  }
  .header.md-bg-transparent .header__nav.fixed .nav-wrap .nav .nav-item > a { color: var(--text-main-color); }
  /* мобильная лента-меню и её стрелки лежат внутри <header> — на ПК их не показываем */
  #sticky-menu, .scroll-arrow { display: none !important; }
}
@media (max-width: 768px) {
  .um-hd-wordmark, .um-hd-actions { display: none !important; }
}

/* Мобильный ряд «Позвонить / Написать в WhatsApp» живёт внутри бургера —
   на ПК бургера нет, ряд прячем (то же правило, что на Mercedes). */
@media (min-width: 768px) {
  .header-cta-mobile-only { display: none !important; }
}

/* ── Genesis: чего нет у BMW ──────────────────────────────────────────────────
   Знак марки в двух вариантах: белый для чёрной шапки телефона, тёмный для
   белой шапки компьютера. Тёмный собран из того же файла перекраской заливки.
   🔴 03.09.2026, вечер: отсюда убраны правила верхней строки .top-info-v2 и обеих
   кнопок .btn-v2 — сама разметка удалена из header2.php (владелец: «на ПК этого
   не было на мб и бмв»). Ни один из этих классов больше не встречается в теме. */
@media (min-width: 769px) {
  .header.md-bg-transparent .um-hd-logo-light { display: none; }
  .header.md-bg-transparent .um-hd-logo-dark { display: block; }
}
@media (max-width: 768px) {
  .um-hd-logo-dark { display: none !important; }
}

/* ── Синие остатки Mercedes в блоках (владелец, 03.09.2026) ───────────────────
   Ссылка «Показать еще» в блоке корпоративным клиентам приходит из custom.css
   этого сайта с цветом #1A73E8. Файл custom.css отдаётся без версии в адресе и
   кэшируется на годы, поэтому правим не его, а здесь: этот файл версионируется
   именем. Цену и дату на карточке кейса и стрелки слайдера перекрасили в самом
   cases-slider (v46), блок масел берёт цвет из CP_SITE_ACCENT. */
.corp-toggle-text{ color: #a36b4f; }
.corp-toggle-text:hover{ color: #7d5039; }

/* Подсказка «Листайте влево/вправо» рисует стрелки SVG с зелёной заливкой из
   донорской темы (#31B939 в атрибуте fill). Остальные такие же значки тема
   перекрашивает через CSS, а этот пропустила. */
.slider-hint svg path,
.slider-hint path{ fill: #a36b4f; }

/* ── v10, 03.09.2026 ──────────────────────────────────────────────────────────
   Правки по списку владельца. Четыре темы: закрытая фигурная скобка (в v8 её
   потеряли, и всё, что ниже строки 1556, лежало внутри `@media(min-width:768px)`
   — отсюда два знака марки на телефоне и синяя ссылка «Показать еще»),
   отступ верхней строки шапки, донорский синий, мобильная шапка с фото.
   🔴 Почему здесь, а не в main.css/custom.css: те два файла отдаются без версии
   в адресе, Clearfy срезает `?ver`, nginx ставит max-age на 10 лет. Правка в них
   не дойдёт до того, кто уже открывал сайт. Этот файл версионируется именем. */

/* 1. SUPERSEDED 03.09.2026 (вечер): воздух сверху `padding-top:clamp(12px,1.1111vw,16px)`
   держал верхнюю строку с часами и адресами. Строку убрали, шапка вернулась к
   макету Mercedes/BMW: сверху 0, первые 33px даёт `margin-top` у .main-header-v2. */

/* 2. Донорский синий Mercedes (#3366cc, #1A73E8, rgba(51,102,204,…)) в теме.
   Владелец 03.09.2026: «синий цвет на кнопках почему-то при наведении».
   Цвет пришёл из донорской темы Mercedes и остался в main.css и custom.css.
   Перекрываем теми же селекторами: этот файл грузится последним, специфичность
   равная, поэтому побеждает он. Медный #a36b4f = CP_SITE_ACCENT, тёмный шаг
   #7d5039 для наведения. */
.call-btn { background-color: #a36b4f; }
.blue-number { color: #a36b4f; }
.contacts__address p,
.contacts__address p b { color: #a36b4f; }
.contacts__container .contacts__images-item p,
.contacts__container.md-container-with-form .contacts__images-item p { color: #a36b4f; }
.nav-link span,
.scroll-menu-list-link span { background-color: #a36b4f; }
.services__all-btn a { background-color: #a36b4f; }
.services__all-btn a:hover { background-color: #7d5039; }
.team__slide .video { background-color: #a36b4f; }
.team__slide .video::after { background-color: #a36b4f; }
.highlighted-text::before,
.highlighted-text::after { background-color: #a36b4f; }
.more-info-toggle { color: #a36b4f; }
.more-info-toggle:hover { color: #7d5039; }
.more-info-toggle.underline { border-bottom-color: #a36b4f; }
.custom-dot-unique4.active { background-color: #a36b4f; }
.extremelyUnique-oil-info-block h4 { color: #a36b4f; }
.extremelyUnique-play-wrap { background: #a36b4f; box-shadow: -23px -23px 71px 0 rgba(163, 107, 79, .29); }
.extremelyUnique-play-wrap:before,
.extremelyUnique-play-wrap:after { border-color: #a36b4f; }
.extremelyUnique-play-wrap:before { border-left-color: transparent; border-right-color: transparent; }
.extremelyUnique-play-wrap:after { border-top-color: transparent; border-bottom-color: transparent; }
/* Галочка выпадающего пункта меню: на ПК её рисует SVG (см. блок шапки выше),
   на телефоне остаётся уголок из рамок, он был синим. */
.nav-wrap .nav .nav-item.dropdown-item::after,
.header.open .nav-wrap .nav .nav-item.dropdown-item::after,
.header.md-white-header .header__nav.fixed .nav-wrap .nav .nav-item.dropdown-item::after { border-color: #a36b4f; }
/* Пульсация круглой кнопки «Позвонить». */
.pulse-phone::after { background-color: rgba(163, 107, 79, .8); }

/* 3. Мобильная шапка с фото (.um-hero-m), порт с Mercedes/BMW.
   Владелец 03.09.2026: «мобильный hero не как у бмв/mb, там должно быть так,
   чтобы через панель фон настраивать». Разметку печатает custom_test2.php,
   геометрию задают постметы _um_hm_w/x/t/r/b из панели «Фон лендинга».
   Фото стоит В ПОТОКЕ внутри сетки 1x1: его высота задаёт высоту сцены,
   заголовок и подзаголовок лежат поверх, булиты и кнопка идут ниже фото.
   Полоса БЕЛАЯ, вариант BMW, а не чёрный Mercedes: снимки Genesis лежат на
   прозрачном фоне и до этой правки рисовались прямо на белой странице. На чёрной
   полосе тот же файл читался бы как светлое пятно. Раз полоса белая, заголовок и
   подзаголовок перекрашиваем в тёмный: тема красит их белым.
   🔴 main.css рисует за мобильным заголовком чёрную плашку во всю ширину
   (.first__title::before, 150vw). На чёрной полосе её не видно, на белой это
   полоса поперёк экрана, поэтому в этом режиме её убираем. */
@media only screen and (max-width: 768px) {
  .first.um-hero-m { background: #fff; padding-top: 6vw; padding-bottom: 2.6vw; margin-bottom: var(--um-gap); }
  .first.um-hero-m .first__content { padding-top: 5.605vw; padding-bottom: 0; }
  .first.um-hero-m .first__title { padding-top: 0; padding-bottom: 2vw; color: #262626; }
  .first.um-hero-m .first__text p { color: #262626; }
  .first.um-hero-m .first__title::before { display: none; }
  .um-hm-stage { display: grid; }
  /* 88% ширины колонки, по правому краю: высота блока = 88% ширины колонки,
     умноженные на пропорцию файла. Размер файла в пикселях влияет только на
     резкость. */
  .um-hm-stage .um-hm-img { grid-area: 1/1; justify-self: end; align-self: end; display: block; width: 88%; height: auto; }
  .um-hm-stage .um-hm-text { grid-area: 1/1; position: relative; z-index: 1; }
}

/* ── Лента-меню на телефоне примыкает к шапке (владелец, 03.09.2026) ───────────
   «Горизонтальное меню сильно оторвано от хедера, между ними странное простран-
   ство». Две причины, обе от порта.
   1) Порт с BMW принёс пару правил «лента появляется после скролла»: до скролла
      она прозрачна и сдвинута вниз на 20px, сдвиг снимает класс body.show-scroll-
      elements. Класс вешает main.js на Mercedes и BMW, в этой копии его нет, и
      лента навсегда оставалась на 20px ниже. Скрипт добавлен в footer.php.
   2) Остаток: тема считает положение ленты от НИЗА СОДЕРЖИМОГО шапки
      (.header-v2 кончается на 20.9875vw), а фон рисует по её высоте (16vw). Между
      ними всегда есть разрыв, который растёт с шириной экрана: при margin-top 4vw
      это 8.9875vw − 35px, то есть 0 на 390px и уже 4px на 430px. У BMW шапка выше
      (20vw) и отступ 5vw, поэтому лента там всегда заходит НА шапку. Здесь шапку
      не трогаем (её высоту держит вся мобильная раскладка), уменьшаем отступ:
      6.9875vw − 35px отрицательно на всех телефонах до 500px, лента ложится на
      чёрный фон шапки и просвета нет ни на одной ширине. */
@media only screen and (max-width: 768px) {
  /* 🔴 Правка 03.09.2026, вторая итерация. Первая (margin-top: 2vw) убрала просвет,
     но подняла ленту на строку «12 000 отзывов 5★ на Яндексе»: у Mercedes и BMW этой
     строки в шапке нет (.main-v1 у них display:none), поэтому лента там может заходить
     на шапку сколько угодно, а здесь она резала текст (владелец: «фраза обрезается
     хедером, когда скроллю вниз»).
     Схема вместо подгонки отступа: фон шапки заканчивается ровно там, где кончается её
     содержимое (height:auto вместо жёстких 16vw, которые были короче содержимого на
     20px), а лента выносится из потока и вешается ПОД шапку (position:absolute; top:100%).
     Тогда ни просвета, ни наложения на текст нет ни на одной ширине, и арифметика
     «vw против фиксированных −35px» больше не участвует.
     🔴 Резерв body (main.css `body{padding-top:25vw}`) НЕ трогаем. Он на 15px больше
     высоты шапки, и это место занимает лента, когда появляется. Уменьшение резерва
     поднимает первый экран, а его геометрию владелец уже настроил ручками панели
     под текущую высоту: пересчитывать её сдвигом страницы нельзя. */
  .header { height: auto; padding-bottom: 0; }
  #sticky-menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   Единый стиль заголовков (владелец, 03.09.2026: «нужен единый стиль брендбука
   для Genesis, сейчас заголовки отличаются друг от друга и на ПК и на телефоне»)

   1. Шрифты Mercedes без файлов. Тема объявляет MBCorpoA и MBCorpoS, но
      @font-face для них нет нигде на сервере, поэтому браузер брал следующий в
      стеке: MBCorpoA → Georgia (ЗАСЕЧКИ), MBCorpoS → Arial. Замер главной на
      телефоне: «Отзывы наших клиентов» и «Получите предложение от Юнион Моторс»
      рисовались Georgia, остальные 18 заголовков — фирменным Genesis Sans.
      На ПК те же заголовки шли фирменным шрифтом: отсюда «на ПК и МОБ по-разному».
      Правим классом, а не двумя местами: заводим оба имени как псевдонимы
      фирменного файла, и любое старое правило темы печатает Genesis Sans.
      Файл тот же, что подключает плагин шрифтов для genesissansheadregular.
   2. Кегль и разрядка. Заголовки разделов на ПК = 50px, на телефоне = 26px,
      без разрядки. Из этого ряда выпадали три: «Наша команда» (разрядка 2px),
      «Получите предложение» (плавающий кегль от ширины окна: 47.25px на 1440 и
      37.5px на 1200, разрядка 1.89px), «Корпоративным клиентам» (24px на ПК и
      26px на телефоне, то есть на телефоне КРУПНЕЕ, чем на ПК).
   Уровнем ниже (карточки УТП 16px, заголовки кейсов 28/20px) не трогаем: это
   свой уровень вёрстки, а не заголовок раздела.
   3. Насыщенность. 🔴 Genesis Sans на сервере одного начертания (в загрузках
      лежит только genesissanstextkrregular.ttf), но это НЕ значит, что
      font-weight ничего не делает: браузер подделывает жир сам, утолщая
      обводку. Замер краской на канве, строка «Примеры работ» 100px:
      300/400/500 дают 19859 закрашенных пикселей, 600/700/800 — 25412, то есть
      на 28% больше. Ширина строки при этом одна и та же (774.5px на всех
      шести), поэтому проверка шириной этот случай НЕ ловит.
      Отсюда и разнобой, который видно на ПК: «Отзывы наших клиентов» стояли
      на 500 (подделки нет), «Примеры работ» и большинство остальных на 600
      (подделка есть). На телефоне тонкими были ещё «Корпоративным клиентам»
      и «Получите предложение». Ставим всей группе 600.
      Настоящего Genesis Sans Bold на сервере нет: как только файл появится,
      его надо подключить вторым @font-face с font-weight:700, и подделка
      сменится настоящим начертанием сама. ═══════════════════════════════════ */
@font-face {
    font-family: MBCorpoA;
    src: url('/wp-content/uploads/2025/03/genesissanstextkrregular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: MBCorpoS;
    src: url('/wp-content/uploads/2025/03/genesissanstextkrregular.ttf') format('truetype');
    font-display: swap;
}
/* Насыщенность одна на всю группу заголовков разделов, на обеих ширинах. */
.umr[data-umr][data-umr] .umr__title,
.cs-heading,
.uol .uol-title,
.uol .uol-sub,
section.team .team__title.md-main-title,
#cont h2,
.editor .wrapper #corps h2,
.download-price__title.md-main-title {
    font-weight: 600;
}
/* Кегль и разрядка: три заголовка выпадали из ряда 50/26. */
section.team .team__title.md-main-title,
.download-price__title.md-main-title,
.editor .wrapper #corps h2 {
    font-size: 50px;
    line-height: 1.2;
    letter-spacing: normal;
}
@media only screen and (max-width: 768px) {
    section.team .team__title.md-main-title,
    .download-price__title.md-main-title,
    .editor .wrapper #corps h2 {
        font-size: 26px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Страница 404 (макет 03.09.2026, разметка в 404.php)
   Шапка та же, что на главной (header2.php), но БЕЗ строки меню на компьютере
   и БЕЗ ленты разделов на телефоне: живая страница на сайте одна, вести отсюда
   некуда, кроме главной, и об этом говорят кнопки (владелец, 03.09.2026:
   «на пк и моб не надо дублировать меню, на моб не надо меню ленту делать»).
   Плашка заголовка это тот же компонент, что H1 главной: медный фон, белый
   текст, по центру, 57.6px. Шаг между блоками и кегли берутся из общих правил
   файла, поэтому 404 живёт в том же ритме, что остальные страницы. ═════════ */
.um-404 .um-404-body { margin-top: var(--um-gap); }
.um-404 .um-404-band {
    background: #a36b4f;
    color: #fff;
    text-align: center;
    padding: 28px 10px;
}
.um-404 .um-404-band h1 {
    margin: 0;
    font-family: genesissansheadregular-arial-sans-serif, Arial, sans-serif;
    font-size: 57.6px;
    line-height: 1.15;
    font-weight: 600;
    color: #fff;
}
.um-404 .um-404-band p {
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}
.um-404 .um-404-lead > p {
    margin: 0 auto;
    max-width: 660px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #262626;
}
.um-404 .um-404-acts {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 16px;
}
/* Кнопки те же, что в шапке: 220 на 18/24, рамка медная, скругление 8. */
.um-404 .um-404-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    padding: 18px 24px;
    border: 1px solid #a36b4f;
    border-radius: 8px;
    font-family: genesissansheadregular-arial-sans-serif, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s, border-color .3s, color .3s;
}
.um-404 .um-404-btn svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.um-404 .um-404-btn-fill { background: #a36b4f; color: #fff; }
.um-404 .um-404-btn-fill:hover { background: #8b5b43; border-color: #8b5b43; color: #fff; }
.um-404 .um-404-btn-ghost { background: transparent; color: #a36b4f; }
.um-404 .um-404-btn-ghost:hover { background: #a36b4f; color: #fff; }

@media (min-width: 769px) {
    /* Шапка остаётся из одной логотипной строки: 33 + 69 = 102px. */
    .um-404 .header__nav { display: none; }
}
@media (max-width: 768px) {
    /* 🔴 Скрываем ЛЕНТУ разделов, а не .header__nav: на телефоне .header__nav
       это выпадающее меню бургера, спрятать его значит убить бургер. */
    .um-404 .mobile-scroll-menu { display: none; }
    /* Шапка на телефоне: только знак и название (владелец, 03.09.2026:
       «убери бургер, сделай высоту нормальную, листать нельзя, поэтому
       12 000 отзывов 5★ на Яндексе там не надо»). Бургер убран вместе с
       выпадающим меню: вести отсюда некуда, кроме главной, и об этом говорят
       кнопки. Высота 62px = 16 сверху + знак 30 + 16 снизу; тем же числом
       задан резерв body под фиксированную шапку, иначе под ней осталась бы
       щель от прежних 25vw. */
    .um-404 .header__btn-wrap,
    .um-404 .header__nav,
    .um-404 .logo-text-v2 .main-v1 { display: none; }
    .um-404 .header { height: 62px; }
    body.um-404 { padding-top: 62px; }
    .um-404 .um-404-band { padding: 20px 14px; }
    .um-404 .um-404-band h1 { font-size: 26px; line-height: 1.2; }
    .um-404 .um-404-band p { margin-top: 8px; font-size: 14px; }
    .um-404 .um-404-lead > p { font-size: 16px; }
    .um-404 .um-404-acts { margin-top: 20px; flex-direction: column; gap: 12px; }
    .um-404 .um-404-btn { width: 100%; min-width: 0; padding: 16px 20px; }
}

/* Подвал стоит внизу окна, а не сразу под текстом (владелец, 03.09.2026:
   «футер на пк и моб должен быть на своём месте, а не узко по высоте»).
   Страница 404 короче экрана, поэтому ниже подвала оставалось пустое поле:
   на 1512x900 это 281px. Делаем колонку во всю высоту окна и прижимаем подвал.
   В поток на этой странице попадают ровно три блока: шапка, контент и подвал,
   всё остальное (попапы, кнопка наверх, виджеты) лежит фиксировано или скрыто,
   поэтому колонка их не трогает. box-sizing нужен из-за верхнего отступа body
   на телефоне (резерв под фиксированную шапку): без него окно переполнялось бы
   на величину этого отступа. */
body.um-404 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}
/* Контент занимает всё, что осталось между шапкой и подвалом, и стоит в этом
   поле по центру по вертикали (владелец, 03.09.2026: «контент отцентрировать,
   а то он поднят ближе к хедеру, а между футером большое расстояние»).
   Отступ сверху и снизу задан паддингом, а не margin: с margin центр съезжал
   бы вниз на его величину. Подвалу auto больше не нужен, его вниз уводит
   растущий контент. */
body.um-404 > .um-404-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    padding: var(--um-gap) 0;
}
/* Общее правило сайта даёт подвалу верхний отступ в один шаг. На 404 этот шаг
   уже отдан паддингом контента, и лишний отступ сдвигал центр вниз: замер на
   390x844 показал 124px сверху и 148px снизу. Снимаем. */
body.um-404 > footer.footer { margin-top: 0; }
