/* ==========================================================================
   Ремэкспосервис — система оформления
   Цвета измерены по концепту, приёмы сняты с образца vs-epple.de.
   Всё настраивается здесь, в разделе «Переменные».
   ========================================================================== */

/* --- Шрифты ------------------------------------------------------------- */
/* Onest — заголовки и интерфейс. Inter — основной текст.
   Файлы лежат рядом: внешние адреса в России отваливаются.             */

@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('../fonts/onest-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2191-2193;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2191-2193;
}

/* --- Переменные --------------------------------------------------------- */

:root {
  /* Цвет. Измерено по концепту пиксель в пиксель.
     ВНИМАНИЕ: логотип написан #A30116 — светлее и малиновее сайта.
     Решить с заказчиком, какой красный фирменный.                      */
  /* Единственный красный сайта. Логотип тоже берёт его: в файле заказчика
     знак написан #A40619 — тон тот же (расхождение 6°), но светлее на 40 %.
     Решено свести к цвету макета, чтобы в шапке не стояли рядом два красных.
     Знак в собственном цвете лежит в материалах, для печати и документов. */
  --red:        #901D2F;   /* кнопки, акценты, номера блоков, логотип */
  --red-hover:  #9F2335;
  --red-dark:   #781C2A;   /* тёмная секция «Почему нам доверяют» */
  --red-foot:   #871D2C;   /* подвал */
  /* 11 октября 2026 по просьбе владельца проекта бордовый осветлён («светлее, но чтобы не уходил в красный», выбран вариант 3 из пяти):
     было #75090B / #8A0C0E / #5D0909 / #6D090A / #4A0709 (яркость Lab 24, оттенок 359°), стало яркость 32 при той же насыщенности, оттенок 351°, то есть светлее в сторону вина, а не красного.
     Семейство строится от основного тона: наведение +4 к яркости HSL, тёмный −5, подвал −2, заливка кнопки −9 (HSL 351°, 66 %, 34 %). Белый на основном тоне 8,7 : 1.
     Цвет в других местах (менять вместе): `images/logo.svg`, `images/favicon.svg`, значки и og-image в `images/`, `theme-color` в `tools/build_seo.py`, `admin/admin.css`, rgba ниже по файлу. */

  --bg:         #FBFBFB;
  --beige:      #F3ECE2;   /* фон части секций: беж и белый чередуются */
  --surface:    #FFFFFF;
  --text:       #1A1A1A;
  --text-mute:  #707070;
  --text-on-red:#FFFFFF;
  --text-on-red-mute: #E8D5D5;
  --line:       #E4E4E4;
  --line-on-red: rgba(255,255,255,.18);

  /* Стекло — с образца: белый 30 %, размытие 50 px.
     Слабый вариант для плашек с растворяющимся краем — 10 %.           */
  --glass:       rgba(255,255,255,.30);
  --glass-soft:  rgba(255,255,255,.10);
  --glass-blur:  50px;
  --glass-blur-mobile: 24px;   /* на телефоне дешевле, разница на глаз мала */

  /* Шрифт */
  --font-head: 'Onest', 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'Inter',  'Onest',      system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Шкала кегля — тянется по ширине окна */
  --t-hero:  clamp(34px, 5.6vw, 58px);
  --t-h2:    clamp(27px, 4.2vw, 42px);
  --t-h3:    clamp(19px, 2.4vw, 24px);
  --t-body:  clamp(15px, 1.2vw, 16px);
  --t-small: 13px;
  --t-micro: 12px;

  --lh-tight: 1.14;   /* заголовки */
  --lh-text:  1.68;   /* текст: кириллице нужен запас против латиницы */

  /* Ритм. Всё кратно четырём. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --radius:       20px;   /* карточки, как на образце vs-epple.de; на телефоне 12 px, см. ниже */
  --radius-glass: 10px;
  --radius-hover: 80px;   /* с образца: край модуля при наведении */
  --radius-card-hover: 80px;   /* образец: ссылка-карточка при наведении 20 → 80 px */
  --dur-radius:  .6s;          /* образец: border-radius .6s cubic-bezier(.4,0,.2,1) */
  --ease-radius: cubic-bezier(.4, 0, .2, 1);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);

  /* Движение. Кривые сняты с образца. */
  --ease-out:    cubic-bezier(.25, .46, .45, .94);   /* power2.out */
  --ease-spring: cubic-bezier(.34, 1.2, .64, 1);     /* с перелётом: карточки */
  --dur-reveal: 1.1s;
  --dur-ui:     .3s;
  --dur-card:   .75s;

  --header-h: 92px;
  /* Логотип одним размером в шапке и подвале. Знак 68 px, название 20 px (11 октября 2026 по просьбе владельца проекта: «лого больше»); в шапке остаётся по 12 px сверху и снизу.
     Больше на десктопе не выйдет: рабочая ширина шапки 1144 px (обёртка 1240 минус поля по 48), а логотип, меню из шести пунктов и блок «Аварийная служба + Заявка» должны уместиться в неё вместе. */
  --logo-mark: 68px;
  --logo-name: 20px;
}

/* --- Основание ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Lenis ведёт прокрутку сам; нативное плавное поведение отключаем,
     иначе два механизма дерутся за одно и то же.                      */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-text);
  font-synthesis-weight: none;   /* не подделывать жирность, если файл не доехал */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: var(--lh-tight);
  margin: 0;
  letter-spacing: -0.015em;   /* крупный кегль кириллицы просит лёгкого поджатия */
}
p { margin: 0; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
/* Синяя подсветка по касанию — чужая в этой палитре; свой отклик у нас есть */
a, button { -webkit-tap-highlight-color: transparent; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Надзаголовок прописными. Кириллице обязателен трекинг,
   иначе буквы слипаются в неразборчивую полосу.                        */
.eyebrow {
  font-family: var(--font-head);
  font-size: 12px;                /* не ниже 12: на телефоне 11 px прописными не читаются */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}

.lead  { color: var(--text-mute); max-width: 34em; }
.muted { color: var(--text-mute); }

/* --- Стекло ------------------------------------------------------------- */
/* Главное с образца: край не обрывается, а тает градиентной маской.
   Без маски получается дешёвый прямоугольник с размытием.              */

.glass {
  position: relative;
  border-radius: var(--radius-glass);
  isolation: isolate;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  z-index: -1;
}
/* Вариант с растворяющимся краем */
.glass--fade::before {
  background: var(--glass-soft);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
          mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}

/* Safari до 18 не умеет backdrop-filter внутри элемента со своим слоем
   без этой подпорки — без неё стекло становится просто заливкой.       */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass::before { background: rgba(255,255,255,.82); }
}

/* --- Кнопки ------------------------------------------------------------- */

/* Кнопка. Заливка идёт слева направо за 0,6 с по кривой образца vs-epple.de: псевдоэлемент
   растёт от 0 до 100 % ширины под текстом (z-index -1 внутри isolation). Радиус при этом
   мягчеет с 2 до 26 px. Цвет текста у светлых кнопок меняется с задержкой 0,15 с, когда заливка
   доходит до букв. Цвет заливки задаётся переменной --btn-fill.                           */
.btn {
  --btn-fill: #681824;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 15px var(--s-6);
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  border-radius: 2px;
  transition: border-radius var(--dur-radius) var(--ease-radius), color .1s ease;
}
.btn::after {
  content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 0;
  background: var(--btn-fill);
  transition: width var(--dur-radius) var(--ease-radius);
}
.btn:focus-visible::after, .btn:active::after { width: 100%; }
@media (hover: hover) {
  .btn:hover::after { width: 100%; }
  .btn:hover { border-radius: 26px; }
}
.btn__arrow { transition: transform var(--dur-ui) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Контурная кнопка: на тёмном фоне заливка светлая прозрачная, на светлом (см. .hero__actions) — бордовая */
.btn--ghost { --btn-fill: rgba(255,255,255,.16); background: transparent; border: 1px solid currentColor; }

/* --- Шапка -------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-ui) var(--ease-out);
}
/* Поверх фото первого экрана шапка стеклянная — это и есть приём образца */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  opacity: 1;
  transition: opacity var(--menu-out) var(--ease-menu), background var(--dur-ui) var(--ease-out);   /* гаснет и возвращается в такт шторке */
  z-index: -1;
}
/* Плотность стекла одна на всю страницу. Раньше после первого экрана оно
   уплотнялось до 86 % белого — на прокрутке шапка на глазах из прозрачной
   становилась белой, и это читалось как поломка. Ни линии, ни тени, ни
   растушёвки у нижнего края нет: градиентная маска гасила размытие и тинт,
   а под ними проступало резкое тёмное фото — между светлым стеклом и фото
   получалась полоса, которую заказчик читал как тень. Край стекла ровный. */
/* Меню открыто — своё стекло шапка гасит, иначе на стыке с панелью полоса */
.header.is-menu-open::before { opacity: 0; transition-duration: var(--menu-in), var(--dur-ui); }

/* Шапка над тёмным блоком. Стекло прозрачное на всю страницу, поэтому под
   шапкой может оказаться бордовая секция или подвал — тёмный текст на них
   даёт 3,1 : 1 при норме 4,5. Над такими блоками шапка переодевается
   в светлое, а стекло из белого становится дымчатым.                    */
.header.is-over-dark { color: #fff; }
.header.is-over-dark::before { background: rgba(0,0,0,.20); }
.header.is-over-dark .logo__mark { color: #fff; }
.header.is-over-dark .ads__label { color: var(--text-on-red-mute); }
.header.is-over-dark .nav a::after { background: #fff; }
.header.is-over-dark .burger__lines i { background: #fff; }
/* Над красным подвалом (и другими тёмными блоками) кнопка шапки с белой заливкой (11 октября 2026 по слову владельца): бордовая на бордовом пропадала.
   Текст бордовый; при наведении заливка уходит в бежевый, текст остаётся читаемым. */
.header.is-over-dark .btn { --btn-fill: var(--beige); background: #fff; color: var(--red); box-shadow: none; }
.header .btn { transition: border-radius var(--dur-radius) var(--ease-radius), color .3s ease, background-color .3s ease; }   /* фон и цвет текста меняются вместе: иначе на миг белый текст на белом */
.header.is-over-dark .btn:hover, .header.is-over-dark .btn:focus-visible, .header.is-over-dark .btn:active { color: var(--red); }

.header__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.header .btn { white-space: nowrap; }   /* иначе «Получить расчёт» ломается на две строки */
.logo { display: flex; align-items: center; gap: var(--s-3); }
/* Размеры знака и названия — переменные `--logo-mark` и `--logo-name` (на :root, меняются по ширине экрана ниже). История: 40 px по макету,
   52 px 8 октября 2026, 68 px 11 октября 2026 по просьбе владельца проекта. Логотип подробный: три куба с буквами, мельче 36 px буквы не читаются. */
.logo__mark { width: var(--logo-mark); height: var(--logo-mark); flex: none; color: var(--red); }
.logo__name { font-family: var(--font-head); font-weight: 700; font-size: var(--logo-name); letter-spacing: .05em; white-space: nowrap; }

/* Промежутки в меню 20 px (были 24): освобождают место под крупный логотип, на десктопе шапка уже на пределе ширины */
.nav { display: flex; gap: 18px; }
.nav a { font-size: 16px; position: relative; padding-block: 6px; }   /* было 14 px: пункты меню мелковаты рядом с логотипом и кнопкой (замечание владельца 12 октября 2026) */
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }

.header__contact { display: flex; align-items: center; gap: 16px; }
/* Десктоп: логотип, пункты меню, телефон и кнопка — отдельные элементы одной строки, свободное место делится между ними поровну
   (раньше меню и контакты были двумя плотными группами, а справа шапка собиралась в кучу; владелец 12 октября 2026: «растяни равномерно по всей ширине»).
   Подпись «Аварийно-диспетчерская» над телефоном убрана, смысл сохранён в aria-label у ссылки. */
@media (min-width: 1240px) {
  .nav, .header__contact { display: contents; }
}
/* Подпись «Аварийно-диспетчерская» (11 октября 2026 название везде такое) в одну строку; разрядка .04em и промежуток 16 px освобождают место, шапка на 1240 px и так на пределе */
.ads__label { white-space: nowrap; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.ads__num { font-family: var(--font-head); font-size: 17px; font-weight: 600; white-space: nowrap; }

/* --- Мобильное меню ----------------------------------------------------- */
/* Панель лежит под шапкой во всю высоту окна и размывает страницу под собой.
   Пока она открыта, стекло самой шапки гасится: два размытия друг над другом
   дают на стыке полосу другого оттенка.                                  */

.burger {
  display: none;              /* включается в адаптиве, ниже 1100 px */
  flex: none;
  width: 44px; height: 44px;  /* тач-цель целиком, без подпорок полями */
  align-items: center; justify-content: center;
  margin-right: -10px;        /* визуально к краю; площадь при этом сохраняется */
}
.burger__lines { position: relative; display: block; width: 22px; height: 12px; }
.burger__lines i {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform var(--dur-ui) var(--ease-spring),
              width     var(--dur-ui) var(--ease-out);
}
.burger__lines i:first-child { top: 0; }
.burger__lines i:last-child  { bottom: 0; width: 68%; }   /* короче — так живее */
.burger[aria-expanded="true"] .burger__lines i:first-child { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child  { transform: translateY(-5px) rotate(-45deg); width: 100%; }

/* Шторка меню. Сама панель не гаснет и не едет: слой с размытием на весь экран пересчитывается целиком на каждом кадре, и на телефоне это шло
   «ступеньками». Теперь размытие и подложка растут от нуля, а от курсора и таба панель прячут pointer-events и visibility (их ведёт скрипт:
   .is-visible ставится до открытия, .is-open на следующем кадре). Кривая мягкая с обеих сторон, чтобы начало и конец не читались как рывок. */
:root { --ease-menu: cubic-bezier(.4, 0, .15, 1); --menu-in: 1s; --menu-out: .6s; }
.mobmenu {
  position: fixed;
  inset: 0;
  z-index: 90;                /* под шапкой: логотип и крест остаются сверху */
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s-7);
  padding: calc(var(--header-h) + var(--s-5)) var(--gutter)
           calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;   /* докрутив панель, не тянем за ней страницу */
  background-color: rgba(251,251,251,0);
  -webkit-backdrop-filter: blur(0px) saturate(1);
          backdrop-filter: blur(0px) saturate(1);
  visibility: hidden;         /* убирает панель из обхода табом во всех браузерах */
  pointer-events: none;
  transition: background-color var(--menu-out) var(--ease-menu),
              -webkit-backdrop-filter var(--menu-out) var(--ease-menu),
              backdrop-filter var(--menu-out) var(--ease-menu);
}
.mobmenu.is-visible { visibility: visible; }
.mobmenu.is-open {
  pointer-events: auto;
  background-color: rgba(251,251,251,.74);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
          backdrop-filter: blur(24px) saturate(1.5);
  transition-duration: var(--menu-in);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobmenu.is-open { background-color: var(--bg); }
}

.mobmenu__nav { display: flex; flex-direction: column; }
.mobmenu__nav a {
  display: flex; align-items: baseline; gap: var(--s-4);
  min-height: 44px; padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: clamp(25px, 7vw, 34px); font-weight: 600;
  letter-spacing: -0.02em;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s var(--ease-menu), transform .35s var(--ease-menu),
              padding-left var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
/* Наведение: пункт сдвигается вправо, краснеет, справа появляется стрелка.
   Сдвиг через padding-left: transform занят каскадом появления. */
.mobmenu__nav a::after {
  content: "→"; margin-left: auto; align-self: center;
  font-size: .7em; font-weight: 500; color: var(--red);
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.mobmenu__nav a:active, .mobmenu__nav a:focus-visible { padding-left: var(--s-3); color: var(--red); }
.mobmenu__nav a:active::after, .mobmenu__nav a:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .mobmenu__nav a:hover { padding-left: var(--s-4); color: var(--red); }
  .mobmenu__nav a:hover::after { opacity: 1; transform: none; }
}
.mobmenu__nav a:first-child { border-top: 1px solid var(--line); }

/* Каскад. Шаг 60 мс: панель уже открыта, пункты догоняют её по одному. */
/* Появление: всё содержимое шторки (пункты меню и контакты) проявляется одновременно, без задержек и очерёдности, на той же кривой и за то же время, что размытие */
.mobmenu.is-open .mobmenu__nav a { opacity: 1; transform: none;
  transition: opacity var(--menu-in) var(--ease-menu), transform var(--menu-in) var(--ease-menu),
              padding-left var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }

.mobmenu__foot {
  display: flex; flex-direction: column; gap: var(--s-5);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s var(--ease-menu), transform .35s var(--ease-menu);
}
.mobmenu.is-open .mobmenu__foot { opacity: 1; transform: none;
  transition: opacity var(--menu-in) var(--ease-menu), transform var(--menu-in) var(--ease-menu); }
.mobmenu__cta { align-self: flex-start; }
.mobmenu__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--s-1);
  font-family: var(--font-head); font-size: 26px; font-weight: 600; color: var(--red);
  white-space: nowrap;
}
/* Блок контактов в шторке лежит на светлом размытом стекле: мелкий серый текст (13 px, #707070) читался плохо (замечание владельца 12 октября 2026).
   Чуть крупнее (15 и 16 px, это ещё заметно меньше пунктов меню 21–30 px) и темнее; подпись службы всегда в одну строку. */
.mobmenu__office { font-size: 16px; color: #4A4A4A; line-height: 1.5; }
.mobmenu .ads__label { white-space: nowrap; font-size: clamp(11px, 3.5vw, 13px); letter-spacing: .02em; line-height: 1.35; }   /* одна строка вместе с «24/7» от 320 px, размер плавает по ширине */
.mobmenu__office a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }

/* Планшет: в одну колонку широкая панель выглядит пустой — пункты уходят
   влево, контакты становятся правой колонкой у нижнего края.            */
@media (min-width: 700px) {
  .mobmenu { flex-direction: row; gap: clamp(32px, 8vw, 96px); }
  .mobmenu__nav  { flex: 1 1 auto; max-width: 560px; }
  /* Колонка контактов начинается на одной линии с пунктами, а не прижата вниз:
     иначе меню читается как два несвязанных куска. */
  .mobmenu__foot { flex: 0 0 clamp(240px, 28vw, 320px); justify-content: flex-start; padding-top: var(--s-4); }
}
/* От 761 px кнопка расчёта уже стоит в шапке рядом с крестом — второй такой же в панели не нужно. */
@media (min-width: 761px) {
  .mobmenu__cta { display: none; }
}
.mobmenu:focus { outline: none; }

/* Панель поджимается, когда места в высоту мало: на телефоне это почти всегда,
   а в одной колонке (уже 700 px) запас нужен больше — на 560×900 меню без
   этого требовало прокрутки. На широком планшете колонок две, там просторно. */
@media (max-height: 860px), (max-width: 699px) and (max-height: 940px) {
  .mobmenu { gap: var(--s-5); padding-top: calc(var(--header-h) + var(--s-4)); }
  .mobmenu__nav a { padding-block: var(--s-3); font-size: clamp(22px, 6.2vw, 30px); }
  .mobmenu__tel { font-size: 23px; }
  .mobmenu__foot { gap: var(--s-4); }
}

/* Ниже 700 px в высоту (iPhone SE и подобные) меню не помещается целиком,
   и прокручивать его за пунктами — плохо. Убираем секретаря и почту: это
   дубль, они есть в подвале и будут на странице контактов. Аварийный
   телефон и кнопка расчёта остаются — за ними сюда и заходят.          */
@media (max-height: 700px) {
  .mobmenu__office { display: none; }
  .mobmenu__nav a { padding-block: var(--s-2); }
  .mobmenu {
    gap: var(--s-4);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  }
}
/* Шторка на телефоне: содержимое должно помещаться на экране вместе с почтой внизу (iPhone видит 700–850 px высоты без панелей Safari).
   Пункты плотнее, строки почты без лишней высоты; раньше при 740 px содержимое занимало 815 px, и почта уходила под нижнюю панель. */
@media (max-width: 699px) {
  .mobmenu { gap: clamp(16px, 2.5vh, 24px); justify-content: flex-start; padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
  .mobmenu__nav a { padding-block: clamp(6px, 1.5vh, 14px); font-size: clamp(21px, 5.9vw, 29px); line-height: 1.15; }
  /* Блок контактов (слово владельца 13 октября 2026: «слишком снизу, неравномерно, акцент не слишком крупный», затем «ниже, но равномерно»): стоит посередине
     свободного места под пунктами (авто-поля сверху и снизу), а не прижат к нижнему краю; три группы (кнопка, аварийная служба, секретарь и почта) через равные 20 px; внутри групп строки через равные 3 px. Раньше у номеров и
     почты стояла высота строки 44 px ради нажатия, и текст внутри неё центрировался: зазоры между строками выходили 12, 20, 38 и 45 px. Теперь нажимаемая
     зона (44 px и выше) вынесена в padding без влияния на раскладку, номер 20 px вместо 23–26. */
  .mobmenu__foot { gap: 20px; margin-block: auto; }   /* свободное место под пунктами делится поровну над блоком контактов и под ним (слово владельца: «ниже, но равномерно относительно всего бургера») */
  .mobmenu__foot > div { display: grid; gap: 3px; }
  .mobmenu__tel { display: block; justify-self: start; min-height: 0; margin: -9px 0; padding: 9px 0; font-size: 20px; line-height: 1.3; }
  .mobmenu__office { margin-top: -8px; font-size: 15px; line-height: 1.7; }   /* поле над первой строкой (полуинтерлиньяж) убрано: промежутки между группами на глаз одинаковые */
  .mobmenu__office a { display: inline; min-height: 0; padding-block: 11px; }
  .mobmenu__office a:last-child { display: inline; }
}
}

/* Страница под открытой панелью не должна ехать: нативную прокрутку глушим
   классом, инерционную — остановкой Lenis в скрипте. Запрет намеренно
   ограничен шириной мобильного меню: если скрипт почему-то не узнает о
   расширении окна, прокрутка всё равно вернётся сама, а не запрётся
   насовсем под уже невидимой панелью.                                    */
@media (max-width: 1239px) {
  html.is-menu-open, html.is-menu-open body { overflow: hidden; }
}

/* --- Первый экран ------------------------------------------------------- */

.hero { position: relative; min-height: 640px; display: grid; grid-template-columns: 1fr 1fr; }
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + var(--s-7)) var(--gutter) var(--s-9);
  padding-left: max(var(--gutter), calc((var(--vw, 100vw) - var(--wrap)) / 2 + var(--gutter)));   /* --vw задаёт main.js: ширина без полосы прокрутки Windows */
}
.hero__title { font-size: var(--t-hero); font-weight: 700; }
.hero__lead { margin-top: var(--s-5); font-size: var(--t-body); }
.hero__cta { margin-top: var(--s-6); align-self: flex-start; }

/* Фон держится, пока картинка не доехала: без него на долю секунды
   светится белое пятно в половину экрана.                              */
.hero__media { position: relative; overflow: hidden; background: #2A2A2E; }
/* Фото начинается под шапкой, как в макете. Стекло шапки полупрозрачное, и
   пока граница фото лежала под ним, она просвечивала вертикальным швом:
   слева светлое стекло, справа тёмное. Пусть стекло остаётся прозрачным,
   а шва нет — над белым первым экраном фон под ним один. Фото уходит под
   шапку только при прокрутке, и это уже обычная работа стекла.         */
/* Десктоп: фото — карточка внутри сетки страницы, а не полоса до края экрана. Правый край карточки совпадает с правым краем шапки
   (кнопка), левый встаёт по третьей колонке из четырёх — так же, как «Аварийная служба 24/7» в блоке «За что вы платите».
   Раньше половина экрана была залита фото до края, шапка и всё остальное жили в сетке 1240 px, и фото выпадало из неё. */
@media (min-width: 901px) {
  .hero {
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
    grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5);
    padding-bottom: var(--s-8); min-height: 0;
  }
  .hero__text { grid-column: 1 / 3; grid-row: 1; position: relative; z-index: 1; padding: calc(var(--header-h) + var(--s-8)) var(--s-6) var(--s-5) 0; }
  /* 19 октября 2026: фото горизонтальное (3 : 2, целиком, без обрезки), на три колонки из четырёх; левый край растворяется в фон страницы,
     чёткой линии рядом с текстом нет. Было: вертикальная карточка на две колонки. Скругление остаётся только у правых углов (левые растворены). */
  .hero__media {
    grid-column: 2 / 5; grid-row: 1; min-height: 620px; background: transparent;
    margin-top: calc(var(--header-h) + var(--s-5)); border-radius: 0 var(--radius) var(--radius) 0;
  }
  .hero__media img {
    object-position: 64% 50%;   /* человек в кадре справа (≈65 % ширины), его не обрезать */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.02) 10%, rgba(0,0,0,.08) 18%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.82) 42%, #000 50%);
            mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.02) 10%, rgba(0,0,0,.08) 18%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.82) 42%, #000 50%);
  }
}
.hero__media picture, .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Затемнение правого нижнего угла фото убрано 19 октября 2026 вместе со стеклянной плашкой аварийной службы (оно держало контраст белого текста плашки). */


/* Стеклянная панель аварийной службы поверх фотографии.
   Стекло работает только над изображением — на белом фоне эффекта нет. */
.hero__ads::before {
  background: rgba(255,255,255,.23);                                                     /* было .20: стекла на 15 % больше (12 октября 2026) */
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.15));                          /* было 50 px, стало 57,5 px (на телефоне 24 → 27,6 px) */
          backdrop-filter: blur(calc(var(--glass-blur) * 1.15));
}
.hero__ads {
  position: absolute; z-index: 3;
  right: var(--s-7); bottom: var(--s-7);
  width: min(320px, calc(100% - 2 * var(--s-6)));
  padding: var(--s-5) var(--s-6);
  color: #fff;
  border-radius: var(--radius);
}
.hero__ads-label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75); font-weight: 600; font-family: var(--font-head);
}
.hero__ads-num {
  /* inline-flex с min-height, а не block: иначе строка 39 px и палец мажет */
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--s-1);
  font-family: var(--font-head); font-size: 23px; font-weight: 600;
  white-space: nowrap;
}
.hero__ads-note { margin-top: var(--s-3); font-size: var(--t-micro); color: rgba(255,255,255,.8); line-height: 1.55; }

/* --- Заголовок раздела --------------------------------------------------- */

.sec-head { max-width: 640px; }
.sec-head__title { margin-top: var(--s-3); font-size: var(--t-h2); font-weight: 700; text-wrap: balance; }
.sec-head__lead { margin-top: var(--s-4); font-size: var(--t-small); max-width: 30em; }

/* --- Направления работ -------------------------------------------------- */
/* Пять колонок на одной линии. Узел стоит там, где колонка начинается,
   линия идёт к следующему узлу. Последняя линия уходит за край — как в макете. */

.dirs { padding-block: 28px var(--s-9); }   /* сверху 28 px (было 96 → 64 → 40): ещё выше на 12 px, то есть на 10 % от исходного расстояния до метки; владелец 12 октября 2026 */
.dirs__list {
  --node: 11px;
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--s-5);
}
.dir { position: relative; padding-top: calc(var(--node) + var(--s-6)); }
/* Линия от узла этой колонки до узла следующей */
.dir::before {
  content: '';
  position: absolute; top: calc(var(--node) / 2); left: var(--node);
  width: calc(100% + var(--s-5) - var(--node));
  height: 1px; background: var(--red); opacity: .55;
}
.dir:last-child::before { width: calc(100% - var(--node)); }
.dir::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: var(--node); height: var(--node);
  border: 1px solid var(--red); border-radius: 50%;
  background: var(--bg);
  transition: background var(--dur-ui) var(--ease-out);
}
.dir:hover::after { background: var(--red); }

.dir__icon { width: 44px; height: 44px; color: var(--red); }
.dir__title { margin-top: var(--s-3); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.dir__text { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.6; color: var(--text-mute); text-wrap: pretty; }

/* --- Объекты под управлением -------------------------------------------- */
/* Фотографий пока нет, вместо них схема дома: высота и ширина фасада
   пропорциональны этажности и числу подъездов, линия земли у всех общая.
   Когда придут снимки, схема уходит, остальная вёрстка карточки остаётся. */

/* Беж и белый чередуются: карточки белые, секция бежевая. Серый текст #707070
   на беже даёт 4,2 : 1 при норме 4,5, поэтому внутри секции он темнее.     */
.houses { padding-block: var(--s-9); background: var(--beige); --text-mute: #5C5C5C; --line: #E3DACC; }
.houses__list {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.house {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.house__art { width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: var(--s-5); }
/* Рендер вместо схемы: тот же размер поля, чтобы карточки не разъехались */
.house__art--3d {
  object-fit: contain;
  /* Рендер на прозрачном фоне. Тень под участком — здесь, а не в сцене: теневой
     улавливатель Blender заливал фон дымкой и бросал тени деревьев за край плиты. */
  filter: drop-shadow(0 14px 14px rgba(70, 45, 30, .16));
}

/* Рендеры домов крупнее (11 октября 2026, по просьбе владельца): картинка выходит к краям карточки,
   кадр в самих файлах подрезан плотнее (поле 1,5 % вместо 3,2 %). Карточка режет лишнее через overflow: hidden. */
.house__art--3d { width: calc(100% + 2 * var(--s-5)); max-width: none; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-3); }
.house-hero__art img { width: calc(100% + 2 * var(--s-5)); max-width: none; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; }

.house__title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.house__link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; transition: color var(--dur-ui) var(--ease-out); }   /* зона касания 44 px без роста карточки */
.house__link:hover { color: var(--red); }
/* Вся карточка — ссылка: растянутая область от заголовка. Раньше кликалась только строка
   названия, на картинку и цифры нажимали, и ничего не происходило. */
.house { position: relative; isolation: isolate; }   /* свой слой: в Safari скругление с overflow:hidden и тенью-фильтром у рендера иногда не перерисовывалось при возврате радиуса */
.house__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.house:has(.house__link) { cursor: pointer; }
.house:has(.house__link:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
.house:has(.house__link:hover) .house__title { color: var(--red); }
.house__sub   { margin-top: var(--s-1); font-size: var(--t-small); color: var(--text-mute); }
/* Цифры прижаты вниз через margin-top: auto, а не идут сразу за названием:
   у Пулковского название в две строки, и цифры в ряду съезжали на строку. */
.house__stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: auto 0 0; padding-top: var(--s-5); }
/* Подпись стоит в разметке первой, число — выше неё на экране: читалка
   озвучивает «квартир — 315», а глаз видит крупное число над подписью.   */
.house__stats > div { display: flex; flex-direction: column-reverse; }
.house__stats dt { font-size: 12px; line-height: 1.4; color: var(--text-mute); }
.house__stats dd {
  margin: 0; white-space: nowrap;
  font-family: var(--font-head); font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--red);
}
.house__meta { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }
.houses__note { margin-top: var(--s-5); font-size: 12px; color: var(--text-mute); }

/* --- Внутренние страницы ------------------------------------------------ */
/* Шаблон страницы дома. Беж и белый чередуются по блокам; серый текст на беже
   темнее (#5C5C5C), иначе контраст 4,2 : 1 при норме 4,5.                   */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-head { padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-6); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1) 0; font-size: 13px; color: var(--text-mute); }
.crumbs li + li::before { content: '/'; margin: 0 var(--s-2); color: var(--text-muted, #A0A0A0); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding-inline: 6px; margin-inline: -6px; }   /* короткие слова («Дома») шире 44 px по зоне нажатия, вид тот же */
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--text); }
.page-head .eyebrow { margin-top: var(--s-5); }
.page-head__title { margin-top: var(--s-3); font-size: min(var(--t-hero), calc((var(--vw, 100vw) - 2 * var(--gutter)) / 10.6)); font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }
/* «Контакты»: один большой заголовок заглавными буквами (11 октября 2026, по слову владельца; без «Как с нами связаться» и строки под ним) */
.page-head__title--caps { text-transform: uppercase; letter-spacing: .03em; }
/* Заголовок страницы дома — полный адрес («ул., д. N, литера А») в одну строку от 700 px; на телефоне переносится (владелец 11 октября 2026) */
.page-head__title--addr { font-size: min(var(--t-hero), calc((var(--vw, 100vw) - 2 * var(--gutter)) / 27)); }
@media (max-width: 700px) { .page-head__title--addr { font-size: clamp(26px, 7.4vw, 36px); } }
/* min(): на ширинах до ~390 px кегль сжимается ровно настолько, чтобы слово «конфиденциальности» (≈10,6 em) входило в поле;
   на 320 px было на 50 px шире экрана и давало горизонтальную прокрутку. Выше 390 px ничего не меняется. */
.page-head__sub { margin-top: var(--s-4); max-width: 38em; color: var(--text-mute); }

.house-hero { background: var(--beige); padding-block: var(--s-7); --text-mute: #5C5C5C; --line: #E3DACC; }
.house-hero__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
.house-hero__art { margin: 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); }
.house-hero__art figcaption { min-width: 0; }
.house-hero__art img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(70, 45, 30, .16)); }
/* Настоящие фото дома — секция после .house-hero, когда фото появятся (см. CLAUDE.md).
   Первое фото крупно на всю ширину, остальные в сетку по два. */
.house-photos { padding-block: var(--s-7) 0; }
.house-photos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.house-photos__item { margin: 0; }
.house-photos__item:first-child { grid-column: 1 / -1; }
.house-photos__item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--beige); }
.house-photos__item figcaption { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-mute); }
@media (max-width: 640px) { .house-photos__grid { grid-template-columns: 1fr; } }
.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
.facts > div { display: flex; flex-direction: column-reverse; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.facts dd { margin: 0; font-family: var(--font-head); font-size: clamp(34px, 4vw, 48px); font-weight: 700; line-height: 1.05; color: var(--red); }
.facts dt { margin-top: var(--s-1); font-size: var(--t-small); color: var(--text-mute); }
/* Слова при цифре («с 2001 года»): цифра остаётся крупной красной, «с» и «года» мельче и серым, на одной базовой линии */
.facts dd .facts__aux { font-size: 0.4em; font-weight: 500; color: var(--text-mute); }
/* Цифры дома внутри карточки с рендером: одна строка из четырёх, крупнее текста, но тише, чем отдельный блок */
/* Одна линия над рядом и равные промежутки между цифрами (space-between): у всех домов расстояния одинаковые по логике,
   а длинное «11 257,8» не упирается в соседнюю цифру, как было при четырёх равных колонках. */
.facts--card { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.facts--card > div { border-top: 0; padding-top: 0; min-width: 0; }
.facts--card dd { font-size: clamp(24px, 2.4vw, 32px); white-space: nowrap; }
.facts--card dt { font-size: 13px; line-height: 1.3; white-space: nowrap; }
/* Карта дома справа от рендера (tools/build_house_maps.py, js/map.js): растягивается на высоту карточки */
.house-hero__map { display: flex; min-width: 0; }
.house-hero__map .map { margin-top: 0; flex: 1; width: 100%; aspect-ratio: auto; min-height: 360px; background: #F7F2E9; }

.block { padding-block: var(--s-9); }
/* Воздух (владелец проекта 8 октября 2026: «перегружен, не хватает воздуха»): у разделов был отступ 64 px, а у первых двух блоков главной 96 px,
   чем ниже по странице, тем теснее. Теперь одинаково 96 px, на планшете 64, на телефоне 56. */
@media (max-width: 900px) { .block { padding-block: var(--s-8); } }
@media (max-width: 560px) { .block { padding-block: 56px; } }
/* Чередование белого и бежевого на главной. Блок «Новости» показывает скрипт только когда новости есть (на хостинге; из папки file:// и пока
   новостей нет он скрыт), поэтому цвет «Для организаций» и «Заявки» зависит от него: новости видны — раздел белый, заявка бежевая;
   новости скрыты — раздел бежевый, заявка белая. Так одинаковые цвета никогда не стоят рядом. */
.news-home[hidden] ~ #remont { background: var(--beige); --text-mute: #5C5C5C; --line: #E3DACC; }
.news-home[hidden] ~ #zayavka { background: var(--bg); --text-mute: #707070; --line: #E4E4E4; }
@media (min-width: 768px) {
  .has-trunk > .news-home[hidden] ~ #remont:not(.hero) { --node-bg: var(--beige); }
  .has-trunk > .news-home[hidden] ~ #zayavka:not(.hero) { --node-bg: var(--bg); }
}
.block--beige { background: var(--beige); --text-mute: #5C5C5C; --line: #E3DACC; }
.block__title { font-size: var(--t-h2); font-weight: 700; text-wrap: balance; }
.block__lead { margin-top: var(--s-3); max-width: 38em; color: var(--text-mute); }

.spec { margin: var(--s-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }   /* подпись и значение на одной базовой линии первой строки */
.spec dt { font-size: var(--t-small); color: var(--text-mute); }
.spec dd { margin: 0; overflow-wrap: anywhere; }   /* длинный адрес ссылки не должен вылезать за колонку */
/* Страницы домов: «О доме» и «Управление домом» крупнее (владелец 12 октября 2026: «крупнее, но не слишком относительно всего сайта»):
   значения 16–18 px вместо 15–16, подписи 14–15 px вместо 13; размер плавно растёт с шириной окна, как остальная шкала. */
.spec--house dt { font-size: clamp(14px, 1.05vw, 15px); }
.spec--house dd { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; }
/* Список в две колонки с нечётным числом строк: последняя строка во всю ширину, значение начинается там же, где у строк левой колонки
   (ширина подписи считается так же, как у остальных строк: (колонка − зазор) / 2,4). Раньше последняя строка оставалась одна слева с пустым местом справа
   (владелец 12 октября 2026: «гармонично и симметрично»). Касается и списков «Управление домом» (у трёх домов нечётное число строк). */
@media (min-width: 901px) {
  :not(.about__body) > .spec > div:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: calc(((100% - var(--s-8)) / 2 - var(--s-4)) / 2.4) minmax(0, 1fr); }
}

/* Страница «Компания»: слева заголовок раздела, справа содержание. На телефоне друг под другом. */
.facts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: var(--s-5) var(--s-9); align-items: start; }
.about > .block__title { text-wrap: balance; }
.about__body > * + * { margin-top: var(--s-4); }
.about__body .spec { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.about__body .prose { font-size: 17px; }
.about__lead { color: var(--text-mute); max-width: 38em; }
.about-houses { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.about-houses li { border-bottom: 1px solid var(--line); }
.about-houses__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: baseline; padding-block: var(--s-4); transition: color var(--dur-ui) var(--ease-out); }
.about-houses__row:hover { color: var(--red); }
.about-houses__name { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.about-houses__meta { font-size: var(--t-small); color: var(--text-mute); }
@media (max-width: 1040px) {
  .about-houses__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
@media (max-width: 800px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .facts--row { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .about-houses__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

.docs { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.doc { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.doc__title { font-weight: 500; }
.doc__meta { margin-top: var(--s-1); font-size: 12px; color: var(--text-mute); }
.doc__actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }   /* «Смотреть» и «Скачать» рядом; «Смотреть» только у файлов, которые браузер умеет показать (PDF, JPG, PNG) */
.doc__get, .doc__view {
  position: relative; isolation: isolate; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-5);
  border: 1px solid var(--red); border-radius: 2px; color: var(--red);
  font-family: var(--font-head); font-size: 14px; font-weight: 500;
  transition: border-radius var(--dur-radius) var(--ease-radius), color .1s ease;
}
.doc__get::after, .doc__view::after {
  content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 0; background: var(--red);
  transition: width var(--dur-radius) var(--ease-radius);
}
.doc__get:focus-visible::after, .doc__get:active::after, .doc__view:focus-visible::after, .doc__view:active::after { width: 100%; }
.doc__get:focus-visible, .doc__get:active, .doc__view:focus-visible, .doc__view:active { color: #fff; transition-delay: .15s; }
@media (hover: hover) {
  .doc__get:hover::after, .doc__view:hover::after { width: 100%; }
  .doc__get:hover, .doc__view:hover { color: #fff; border-radius: 26px; transition: border-radius var(--dur-radius) var(--ease-radius), color .1s ease .15s; }
}

.loc-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-bottom: 1px solid var(--line); }   /* «Как нас найти»: офис и службы по строкам, одна под другой (11 октября 2026) */
.loc-list li { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: var(--s-1) var(--s-5); padding-block: var(--s-3); border-top: 1px solid var(--line); line-height: 1.5; }
.loc-list strong { font-family: var(--font-head); font-weight: 600; }
.loc-list span { color: var(--text-mute); }
@media (max-width: 700px) { .loc-list li { grid-template-columns: 1fr; } }
.contacts { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
/* «Контакты»: телефоны сразу под заголовком страницы (11 октября 2026). Пять карточек: три в первой строке по шесть колонок и две шире во второй, без пустого места справа;
   отступ сверху меньше обычного, потому что бежевый блок продолжает шапку страницы. */
.block.contacts-first { padding-top: var(--s-7); }
/* заливка под заголовком белая (владелец 11 октября 2026), карточки на ней бежевые; чередование: белый блок телефонов, бежевая карта, белые реквизиты */
.contacts-first .contact { background: var(--beige); border-color: transparent; }   /* красная рамка только при наведении, постоянной нет ни у одной карточки (слово владельца 12 октября 2026) */
.contacts--five { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
.contacts--five .contact { grid-column: span 2; }
.contacts--five .contact:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 900px) { .contacts--five { grid-template-columns: 1fr; } .contacts--five .contact, .contacts--five .contact:nth-child(n+4) { grid-column: auto; } .block.contacts-first { padding-top: var(--s-6); } }
.contacts:has(> .contact:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* две карточки (страницы домов, «Документы») делят строку поровну, без пустой колонки */
.contact { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.contact__label { font-size: var(--t-small); color: var(--text-mute); }
.contact__num { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-1); font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--red); white-space: nowrap; }
.contact__note { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-mute); line-height: 1.55; }

@media (max-width: 900px) {
  .house-hero__in { grid-template-columns: 1fr; gap: var(--s-6); }
  .house-hero__map .map { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .spec { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contacts:has(> .contact:nth-child(2):last-child) { grid-template-columns: 1fr; }   /* правило про две карточки сильнее общего `.contacts` выше: без этого на телефоне номер в 24 px не помещался в половинку строки и страница прокручивалась вбок */
  .spec > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .doc { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .facts dd { font-size: 34px; }
  .facts--card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); border-top: 0; padding-top: 0; }
  .facts--card > div { border-top: 1px solid var(--line); padding-top: var(--s-3); }
  .facts--card dd { font-size: 30px; }
}

/* --- Новости -------------------------------------------------------------- */
/* Страницы раздела собирает админка (admin/lib.php) и кладёт в /novosti/ готовым HTML. */

.news-page { padding-top: var(--s-6); }
.filters { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.chips__label { min-width: 72px; font-size: 13px; color: var(--text-mute); }
.chips ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-4);
  border: 1px solid var(--line); border-radius: 99px; font-size: 14px; background: var(--surface);
  transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.chip:hover { border-color: var(--red); color: var(--red); }
/* Кнопка-фильтр (страница «Документы»): тот же вид, что у ссылки-фильтра новостей */
button.chip { font: inherit; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.chip__n { margin-left: 4px; font-size: 12px; opacity: .65; }

/* Страница «Документы» */
.docs-page .filters { display: grid; gap: var(--s-3); }
.docs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.docs-search { flex: 1 1 280px; max-width: 460px; }
.docs-search input {
  width: 100%; min-height: 48px; padding: 0 var(--s-4);
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.docs-search input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.docs-count { font-size: var(--t-small); color: var(--text-mute); }
.docs-reset { min-height: 44px; padding: 0 var(--s-4); font: inherit; font-size: var(--t-small); color: var(--red); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.doc-group { margin-top: var(--s-7); }
.doc-group[hidden], .doc[hidden], .docs-empty[hidden], .docs-reset[hidden] { display: none; }
.docs-empty { margin-top: var(--s-7); padding: var(--s-5); background: var(--beige); border-radius: var(--radius); --text-mute: #5C5C5C; }
.docs-note { margin-top: var(--s-8); max-width: 44em; font-size: var(--t-small); color: var(--text-mute); }
.chip[aria-current] { background: var(--red); border-color: var(--red); color: #fff; }

.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-item { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.news-item--img { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.news-item__thumb { display: block; border-radius: var(--radius); overflow: hidden; background: var(--beige); }
.news-item__thumb img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.news-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: 13px; color: var(--text-mute); }
.news-item__title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.news-item__title a { transition: color var(--dur-ui) var(--ease-out); }
.news-item__title a:hover { color: var(--red); }
.news-item__text { color: var(--text-mute); max-width: 52em; text-wrap: pretty; }
.news-empty { padding-block: var(--s-8); color: var(--text-mute); }

.tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-3);
  font-size: 12px; font-weight: 500; border-radius: 99px; background: var(--beige); color: var(--text);
}
a.tag:hover { color: var(--red); }
.tag--house { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.tag--pin { background: var(--red); color: #fff; }

.pagination { margin-top: var(--s-7); }
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pagination__num, .pagination__step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--s-3);
  border: 1px solid var(--line); border-radius: 2px; font-size: 14px; background: var(--surface);
}
.pagination__step { padding-inline: var(--s-5); }
a.pagination__num:hover, a.pagination__step:hover { border-color: var(--red); color: var(--red); }
.pagination__num[aria-current] { background: var(--red); border-color: var(--red); color: #fff; }
.pagination__gap { padding-inline: var(--s-1); color: var(--text-mute); }

/* страница новости */
.article__meta { margin-top: var(--s-5); }
.article__title { margin-top: var(--s-3); font-size: var(--t-h2); }
.article__wrap { max-width: 800px; }
.article__img { margin: 0 0 var(--s-6); border-radius: var(--radius); overflow: hidden; background: var(--beige); }
.article__img img { width: 100%; height: auto; }
.article__back { margin-top: var(--s-7); }
.prose { font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2, .prose h3 { margin-top: var(--s-6); font-size: 21px; font-weight: 600; }
.prose ul { padding-left: var(--s-5); list-style: disc; }
.prose li + li { margin-top: var(--s-2); }
/* 19 октября 2026: длинный список (клиенты на «О компании») в две колонки; на телефоне одна */
.prose ul.prose-cols { columns: 2; column-gap: var(--s-7); }
.prose ul.prose-cols li { break-inside: avoid; margin: 0 0 var(--s-2); }   /* отступ снизу: у первого пункта второй колонки верхний отступ не обрезается и сдвигал колонку вниз */
.prose ul.prose-cols li + li { margin-top: 0; }
@media (max-width: 760px) { .prose ul.prose-cols { columns: 1; } }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.block__title--sm { margin-top: var(--s-7); font-size: 22px; }
.link-back, .link-more {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--red);
  font-family: var(--font-head); font-size: 15px; font-weight: 500;
}
.link-back::before { content: '←'; margin-right: var(--s-2); }
.link-more::after { content: '→'; margin-left: var(--s-2); transition: transform var(--dur-ui) var(--ease-out); }
.link-more:hover::after { transform: translateX(4px); }

/* блок «Последние новости» на главной и странице дома */
.news-home { background: var(--beige); --text-mute: #5C5C5C; --line: #E3DACC; }
.news-home[hidden] { display: none; }
.news-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.news-home .news-list { margin-top: var(--s-6); }
.news-list--cols { border-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.news-list--cols .news-item { align-content: start; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.news-list--cols .news-item--img { grid-template-columns: 1fr; gap: var(--s-4); }
/* карточки новостей в три колонки: заголовок мельче общего (иначе 3–4 строки крупного текста) и выписка в две строки */
.news-list--cols .news-item__title { font-size: clamp(18px, 1.5vw, 21px); }
.news-list--cols .news-item__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* срочное объявление: полоса над сайтом. Шапка сдвигается вниз на её высоту. */
:root { --bar-h: 0px; }
html.has-bar { --bar-h: 48px; }
body { padding-top: var(--bar-h); }
.header { top: var(--bar-h); }
.mobmenu { top: var(--bar-h); }
@supports (height: 100dvh) { .mobmenu { bottom: auto; height: calc(100dvh - var(--bar-h)); } }   /* iPhone: нижняя панель Safari не должна закрывать низ шторки */
.alert-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 110; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--gutter);
  background: var(--red); color: #fff; font-size: 14px;
}
.alert-bar__tag { flex: none; padding: 2px var(--s-3); border: 1px solid rgba(255,255,255,.55); border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.alert-bar__link { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.alert-bar__close { flex: none; width: 44px; height: 44px; margin-right: -10px; font-size: 22px; line-height: 1; color: #fff; }
.alert-bar :focus-visible { outline-color: #fff; }

@media (max-width: 1000px) {
  .news-list--cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .news-list--cols { grid-template-columns: 1fr; }
  .news-item--img { grid-template-columns: 1fr; gap: var(--s-3); }
  .news-item__thumb { max-width: 420px; }
  .chips__label { width: 100%; }
  .alert-bar { font-size: 13px; }
  .alert-bar__tag { display: none; }
}

/* --- Подвал ------------------------------------------------------------- */

/* Шрифт подвала крупнее общей шкалы (--t-small 13 px): светлый текст на тёмно-красном читается хуже, владелец проекта просил крупнее. */
.footer { --f-body: 15px; --f-head: 16px; --f-legal: 14px; --f-bottom: 13px; }
.footer { background: var(--red-foot); color: var(--text-on-red); padding-block: var(--s-8) var(--s-6); }
.footer a:hover { opacity: .72; }
.footer__cols {
  display: grid; gap: var(--s-7);
  /* бренд | контакты | разделы | дома (колонку «Аварийная служба» владелец велел убрать 10 октября 2026). Колонки по ширине содержимого (fit-content / max-content), свободное место
     делится между ними поровну (space-between): раньше колонки растягивались долями 1.6 : 1.1 : 1.2 : .8 : 1, текст занимал разную
     часть каждой, и промежутки между столбцами выходили 48 / 72 / 65 / 97 px. Верхние границы подобраны так, чтобы строки
     переносились как раньше (бренд, аварийная, дома), а адрес и «Интернет-приёмная» больше не ломались. */
  grid-template-columns: min-content max-content max-content max-content;   /* бренд — по ширине строки с логотипом, текст под ним переносится */
  justify-content: space-between;
}
/* Safari считал минимальную ширину колонки бренда без знака логотипа (SVG без своей ширины): колонка сужалась до ширины названия,
   и логотип наезжал на «Контакты». Явный минимум = ширина логотипа в Chrome (292 px); ниже 1240 px бренд занимает всю строку. */
@media (min-width: 1240px) { .footer__brand { min-width: 292px; } }
.footer__brand .logo__name { color: #fff; }
.footer .logo__mark { color: #fff; }
/* Логотип в подвале ровно такой же, как в шапке (знак 52 px, название 17 px, тот же зазор): владелец проекта 8 октября 2026 — «по размеру и размещению одинаковы».
   Колонке бренда дано место под него, поэтому она шире остальных. */
.footer__about { font-size: var(--f-body); color: var(--text-on-red-mute); margin-top: var(--s-4); line-height: 1.6; }
.footer__slogan { font-size: var(--f-body); margin-top: var(--s-3); font-weight: 500; }
.footer h2 { font-family: var(--font-head); font-size: var(--f-head); font-weight: 600; margin-bottom: var(--s-4); }
.footer li + li { margin-top: var(--s-2); }
.footer li, .footer p { font-size: var(--f-body); color: var(--text-on-red-mute); line-height: 1.6; }
.nw { white-space: nowrap; }
.footer__legal { margin-top: var(--s-7); max-width: 72em; font-size: var(--f-legal); line-height: 1.65; color: var(--text-on-red-mute); text-wrap: pretty; }
.footer__legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer__legal + .footer__bottom { margin-top: var(--s-5); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line-on-red);
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.footer__bottom, .footer__bottom a { font-size: var(--f-bottom); color: var(--text-on-red-mute); }

/* --- Появление при прокрутке -------------------------------------------- */
/* Параметры с образца: сдвиг 24 px, 1.1 с, power2.out, один раз.       */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
/* Радиус и цвет рамки в списке переходов нужны панелям, которые одновременно появляются и
   меняют углы при наведении (карточки домов, стеклянная плашка): правило .reveal.is-in весомее
   общего правила панелей и без них отключало бы анимацию углов. Задержка каскада — только у
   появления (первые два значения), у наведения её нет.                                            */
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out),
              border-radius var(--dur-radius) var(--ease-radius),
              border-color var(--dur-ui) var(--ease-out),
              background var(--dur-ui) var(--ease-out);
}
.reveal.is-in { will-change: auto; }
.reveal--d1.is-in { transition-delay: .08s, .08s, 0s, 0s, 0s; }
.reveal--d2.is-in { transition-delay: .16s, .16s, 0s, 0s, 0s; }
.reveal--d3.is-in { transition-delay: .24s, .24s, 0s, 0s, 0s; }
.reveal--d4.is-in { transition-delay: .32s, .32s, 0s, 0s, 0s; }

/* Стеклянная плашка на первом экране появляется плавно, без рывка в конце.
   Раньше плашка целиком шла от opacity 0 к 1: пока прозрачность меньше единицы, элемент становится «корнем фона»,
   и размытие стекла (backdrop-filter у ::before) не видит фотографию под плашкой; в самом конце, когда opacity достигала 1,
   матовое стекло включалось сразу (замечание владельца 12 октября 2026). Теперь сама плашка не гасится (только сдвиг), текст проявляется
   по отдельности, а размытие и подложка стекла проявляются собственной прозрачностью ::before: она не меняет корень фона. */
.hero__ads.reveal { opacity: 1; }
.hero__ads.reveal > * { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out) .35s; }
.hero__ads.reveal.is-in > * { opacity: 1; }
.hero__ads.reveal::before { opacity: 0; }
.hero__ads.reveal.is-in::before { opacity: 1; transition: opacity 1.8s var(--ease-out) .15s; }

/* --- Адаптив ------------------------------------------------------------ */

@media (min-width: 1240px) {
  .mobmenu { display: none; }     /* на десктопе панели нет вообще */
}
@media (max-width: 1239px) {
  .nav, .header__contact .ads__label { display: none; }
  .burger { display: inline-flex; }
  /* Телефон прижимается к кнопке меню, а не висит в середине шапки */
  .header__contact { margin-left: auto; }
  /* Тач-цель телефона в шапке: 44 px независимо от типа указателя —
     на эмуляции мыши правило для pointer: coarse не применялось.      */
  .ads__num { display: inline-flex; align-items: center; min-height: 44px; }
}
/* На узких экранах кнопка расчёта уходит из шапки в меню: телефон аварийной
   службы важнее, а вдвоём они не помещаются и телефон обрезается.       */
@media (max-width: 760px) {
  .header__contact .btn { display: none; }
  .header__in { gap: var(--s-3); }   /* 32 px между тремя блоками шапка не тянет */
  .ads__num { font-size: 16px; }
}
/* Название рядом со знаком снимается рано и с запасом: логотип, телефон
   аварийной службы и кнопка меню в одну строку на узком экране не встают, и
   лишним оказывается не название, а кнопка меню — она уезжала за край
   экрана на 390 px, то есть на iPhone 14 и 15. Порог теперь 560 px (см. ниже). */
/* Телефон: логотип крупнее прежнего (знак 64 px вместо 44, название 18 вместо 14), шапка 84 px; от 601 px те же 68 / 20 / 92, что на компьютере (владелец 11 октября 2026: «во всех размерах»).
   Название в шапке скрыто ниже 561 px: рядом со знаком 64 px не помещается телефон аварийной службы; в подвале строка свободна, там название остаётся. */
@media (max-width: 600px) {
  :root { --header-h: 84px; --logo-mark: 64px; --logo-name: 18px; }
}
@media (max-width: 560px) {
  /* Название «РЕМЭКСПОСЕРВИС» рядом со знаком снова показано на телефоне (слово владельца 13 октября 2026: «где виден бургер, добавь название»).
     Раньше оно скрывалось ниже 561 px ради телефона аварийной службы, которого в шапке больше нет. На узких экранах кегль уменьшается,
     чтобы знак, название и кнопка меню помещались в строку (на 320 px название 15 px). */
  .header .logo__name { font-size: clamp(14px, calc(6.7vw - 5px), 21px); }   /* 16 px на 320, 19 на 360, 21 с 390 */
}

/* Тач-цели: по правилам доступности ссылка под палец не меньше 44 px.
   Разворачиваем площадь отрицательными полями, чтобы вёрстка не поехала. */
@media (pointer: coarse) {
  .footer li a, .footer__bottom a, .nav a, .ads__num {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    margin-block: -12px;
  }
  .footer li a { line-height: 1.6; padding-block: 12px; min-height: 0; }
  .logo { min-height: 44px; min-width: 44px; }
  .footer li a { min-width: 44px; }
  /* Ссылки в строке текста: площадь нажатия растёт отступами, вёрстка не меняется (у строчного элемента вертикальные
     отступы не сдвигают соседние строки). Подчёркивание рисуется text-decoration и от отступов не уезжает. */
  .text-link, .prose a, .request__alert a, .article__back a, .mobmenu__note a, .map__credit a, .news-item__title a, main p a:not([class]), .footer__legal a { padding-block: 15px; margin-block: -15px; }
  .contact__num { display: inline-flex; align-items: center; min-height: 44px; }
  .form__consent { padding-block: 11px; margin-block: -11px; }
  /* Теги рубрик остаются компактными; нажимаемая зона шире за счёт невидимого слоя */
  a.tag { position: relative; }
  a.tag::after { content: ''; position: absolute; inset: -10px 0; }
  .ads__num { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.2; margin-block: 0; }
  .header__contact > div { display: flex; flex-direction: column; justify-content: center; }
}
/* Направления: до 1000 px пять колонок не дышат — текст ломается по слову.
   Ряд становится вертикальным списком вдоль одной линии слева.            */
@media (max-width: 1000px) {
  .dirs { padding-block: 28px var(--s-8); }
  .dirs__list { grid-template-columns: 1fr; gap: 0; margin-top: var(--s-7); }
  .dir {
    padding: 0 0 var(--s-6) calc(var(--node) + var(--s-6));
    display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-4);
  }
  .dir:last-child { padding-bottom: 0; }
  .dir::before, .dir:last-child::before {
    top: var(--node); left: calc(var(--node) / 2);
    width: 1px; height: calc(100% - var(--node));
  }
  .dir:last-child::before { display: none; }
  .dir__icon { grid-row: 1 / span 3; }
  .dir__title, .dir__text { grid-column: 2; }
}
/* Дома: две карточки в ряд, чтобы рендер был крупным; на телефоне одна */
@media (max-width: 700px) {
  .houses { padding-block: var(--s-8); }
  .houses__list { grid-template-columns: 1fr; }
}
/* Пять колонок подвала с крупным шрифтом помещаются только от 1240 px (как и меню шапки); ниже — бренд строкой и две колонки */
@media (max-width: 1239px) {
  /* колонки по ширине текста, свободное место делится между ними поровну (раньше три равные доли: промежутки между текстами выходили разными, 81 и 179 px);
     третья колонка может сжаться и перенести адрес, чтобы на 901 px ничего не вылезло */
  .footer__cols { grid-template-columns: max-content max-content minmax(0, max-content); justify-content: space-between; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --glass-blur: var(--glass-blur-mobile); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__text { padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-7); }
  /* 19 октября 2026: фото горизонтальное 3 : 2; верхний край растворяется в страницу (граница с текстом без линии) */
  .hero__media { min-height: 0; aspect-ratio: 3 / 2; background: transparent; }
  .hero__media img {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.2) 8%, rgba(0,0,0,.6) 17%, #000 28%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.2) 8%, rgba(0,0,0,.6) 17%, #000 28%);
  }
  .hero__ads { right: var(--gutter); bottom: var(--gutter); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__cols { grid-template-columns: 1fr; }
  /* Блок под фото на телефоне чуть выше (4 : 3 вместо 3 : 2), чтобы стеклянная плашка аварийной службы не закрывала кадр;
     фото остаётся горизонтальным, человек в кадре держится слева (object-position). */
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__media img { object-position: 30% 50%; }
}

/* --- Уважение к системной настройке ------------------------------------- */
/* У кого включено «уменьшить движение» — ни появлений, ни инерции.      */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__ads.reveal > *, .hero__ads.reveal::before { opacity: 1; }
}

/* Доступность: видимая рамка фокуса для тех, кто ходит с клавиатуры */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.footer :focus-visible, .header.is-over-dark :focus-visible { outline-color: #fff; }


/* --- Первый экран: кнопки и «Найдите свой дом» --------------------------- */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__actions .btn { min-height: 48px; }
/* Вторая кнопка на белом: обводка бордо, а не currentColor от родителя */
.hero__actions .btn--ghost { --btn-fill: var(--red); color: var(--red); border-color: var(--red); }
@media (hover: hover) { .hero__actions .btn--ghost:hover { color: #fff; transition: border-radius var(--dur-radius) var(--ease-radius), color .1s ease .15s; } }

/* Ссылка в тексте */
.text-link { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* Кнопки в карточке дома лежат над растянутой ссылкой карточки */
.house__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip-link {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-4);
  border: 1px solid var(--line); border-radius: 99px; font-size: 14px; background: var(--surface);
  transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.chip-link:hover { border-color: var(--red); color: var(--red); }

/* Документы на главной: плитки разделов */
.docs-home { background: var(--bg); }
.doc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-7); }
.doc-tiles li { display: flex; }
.doc-tile {
  flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  min-height: 72px; padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.doc-tile__title { font-weight: 500; line-height: 1.35; text-wrap: balance; }
.doc-tile__n { flex: none; font-family: var(--font-head); font-size: 24px; font-weight: 600; color: var(--red); }
.docs-home__all { margin-top: var(--s-6); }
@media (max-width: 900px) { .doc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .doc-tiles { grid-template-columns: 1fr; } }

/* Ремонт и отделка */
.repair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.repair__list { border-top: 1px solid var(--line); }
.repair__list li { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
@media (max-width: 800px) {
  .repair { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Заявка */
.request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "intro form" "aside form"; grid-template-rows: auto 1fr; gap: 0 var(--s-8); align-items: start; }
.request__intro { grid-area: intro; }
.request > .form { grid-area: form; }
.request__aside { grid-area: aside; }
.request__aside .request__alert { margin-top: var(--s-6); }
.request__alert { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius); }
.request__alert a { color: var(--red); font-weight: 600; white-space: nowrap; }
.form { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form__row { display: grid; gap: var(--s-2); }
.form label { font-size: var(--t-small); font-weight: 500; }
.form__opt { font-weight: 400; color: var(--text-mute); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 12px var(--s-4); font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
/* Safari игнорирует высоту и отступы у стандартного select и рисует его низким, системным (24 px против 48 у соседних полей).
   Системный вид выключаем и рисуем свою стрелку; в остальных браузерах поле выглядит так же, как раньше. */
.form select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
}
.form textarea { resize: vertical; min-height: 96px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: var(--red); }
/* у полей ввода специфичность выше (.form input[type=…]), поэтому красная рамка при ошибке для них задаётся отдельно */
.form input[aria-invalid="true"], .form select[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
/* счётчик знаков «12/100» в строке подписи темы и текста: справа, вёрстку не двигает */
.form__count { float: right; font-size: var(--t-small); font-weight: 400; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* ввод отклонён (не русская буква, лишний знак): поле на полсекунды краснеет, вёрстка не двигается */
.form input.is-reject { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__consent { display: flex; align-items: flex-start; gap: var(--s-3); font-weight: 400 !important; color: var(--text-mute); }
.form__consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--red); }
.form .btn { justify-self: start; min-height: 48px; cursor: pointer; border: 0; }
.form__status { min-height: 1.5em; font-size: var(--t-small); }
.form__status[data-state="error"] { color: var(--red); }
.form__status[data-state="ok"] { color: #2F6B3A; font-weight: 500; }
/* Формы «Интернет-приёмная» и «Заключить договор» (9 октября 2026) */
.form__row[hidden] { display: none; }
.form__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__fieldset legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-small); font-weight: 500; }
.kinds { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kind { position: relative; }
.kind input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kind span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-small); font-weight: 500; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.kind:hover span { border-color: var(--red); color: var(--red); }
.kind input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.kind input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.request__note a[href^="tel"] { white-space: nowrap; }
.request__note { margin-top: var(--s-5); font-size: var(--t-small); line-height: 1.65; color: var(--text-mute); max-width: 36em; }
.request__alt { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.request__alt-title { font-weight: 600; }
.request__alt-text { margin-top: var(--s-1); font-size: var(--t-small); color: var(--text-mute); }
.request__alt-link { display: inline-block; margin-top: var(--s-3); font-weight: 500; }
/* Номера шагов рисуем сами, а не маркером списка: маркер list-style висел левее края колонки на несколько пикселей, и строка «Позвонить» под списком
   (она стоит у края колонки) выглядела съехавшей (замечание владельца 12 октября 2026). Теперь номер ровно по левому краю, как и всё остальное в колонке. */
.request__steps { display: grid; gap: var(--s-3); padding-left: 0; list-style: none; counter-reset: step; }
.request__steps li { position: relative; padding-left: 1.7em; line-height: 1.6; counter-increment: step; }
.request__steps li::before { content: counter(step) "."; position: absolute; left: 0; color: var(--red); font-weight: 600; }
@media (max-width: 560px) { .form__cols { grid-template-columns: 1fr; } }
/* Вопросы и ответы: раскрывающиеся пункты без скрипта */
.faq { max-width: 52em; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: var(--s-4) 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; flex: none; width: 32px; height: 32px; font-family: var(--font-text); font-weight: 400; font-size: 26px; line-height: 30px; text-align: center; color: var(--red); border: 1px solid var(--line); border-radius: 50%; }
.faq__item[open] summary::after { content: '\2212'; }
.faq__item summary:hover { color: var(--red); }
.faq__item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.faq__answer { max-width: 44em; padding: 0 var(--s-8) var(--s-5) 0; line-height: 1.7; }
@media (max-width: 560px) { .faq__answer { padding-right: 0; } }

/* Темы документов на странице дома: раскрывающиеся пункты (`<details>`, без скрипта) в стиле «Вопросов и ответов» — линии, шрифт заголовков, красный плюс в кружке;
   справа число документов или «пока нет». Пустые темы показываются тоже (владелец 12 октября 2026). Разметку пишут tools/build_documents.py и admin/docs.php. */
.doc-topics { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.doc-topic { border-bottom: 1px solid var(--line); }
.doc-topic > summary { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-4) 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; cursor: pointer; list-style: none; transition: color var(--dur-ui) var(--ease-out); }
.doc-topic > summary::-webkit-details-marker { display: none; }
.doc-topic > summary::after { content: '+'; flex: none; width: 32px; height: 32px; font-family: var(--font-text); font-weight: 400; font-size: 26px; line-height: 30px; text-align: center; color: var(--red); border: 1px solid var(--line); border-radius: 50%; }
.doc-topic[open] > summary::after { content: '\2212'; }
.doc-topic > summary:hover { color: var(--red); }
.doc-topic > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.doc-topic__name { flex: 1; min-width: 0; }
.doc-topic__n { flex: none; font-family: var(--font-text); font-weight: 500; font-size: var(--t-small); color: var(--text-mute); }
.doc-topic__body { padding-bottom: var(--s-5); }
.doc-topic__body .docs { margin-top: 0; border-top: 0; }
.doc-topic__body > .docs:last-child > .doc:last-child { border-bottom: 0; }
.doc-topic__empty { max-width: 44em; padding: var(--s-2) 0; color: var(--text-mute); }
.doc-topic[open] > .doc-topic__body { animation: doc-topic-in .4s var(--ease-out) both; }
@keyframes doc-topic-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) { .request { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "aside"; grid-template-rows: auto; gap: var(--s-6); } .form { padding: var(--s-5); } }

/* Карта сайта */
.sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.sitemap__list { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.sitemap__list li { border-bottom: 1px solid var(--line); }
.sitemap__list a { display: flex; align-items: center; min-height: 48px; transition: color var(--dur-ui) var(--ease-out); }
.sitemap__list a:hover { color: var(--red); }
@media (max-width: 800px) { .sitemap { grid-template-columns: 1fr; gap: var(--s-6); } }


/* --- Красная линия через страницу ----------------------------------------- */
/* Сигнатура макета: тонкая линия слева, узел у каждого раздела. Каждый раздел рисует свой кусок,
   куски стыкуются без зазоров. Для УК это схема магистрали, а разделы — её узлы.
   Только от 768 px: на телефоне слева нет места, а линия отнимет ширину у текста. */
@media (min-width: 768px) {
  .has-trunk > section:not(.hero) { position: relative; --node: 11px; --node-bg: var(--bg); --node-y: calc(var(--s-8) + 4px); }
  /* Селекторы с :not(.hero) выше весомее простых, поэтому здесь тоже section.класс:not(.hero) */
  .has-trunk > section.houses:not(.hero) { --node-y: calc(var(--s-9) + 4px); }
  .has-trunk > section.dirs:not(.hero) { --node-y: calc(28px + 4px); }   /* узел на уровне метки: отступ сверху 28 px */
  .has-trunk > section.houses:not(.hero), .has-trunk > section.block--beige:not(.hero), .has-trunk > section.news-home:not(.hero) { --node-bg: var(--beige); }
  .has-trunk > section:not(.hero)::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: calc(max(0px, (100% - var(--wrap)) / 2) + 12px);
    width: 1px; background: var(--red); opacity: .5;
  }
  .has-trunk > section:not(.hero)::after {
    content: ''; position: absolute; top: var(--node-y);
    left: calc(max(0px, (100% - var(--wrap)) / 2) + 12px - var(--node) / 2 + .5px);
    width: var(--node); height: var(--node); box-sizing: border-box;
    border: 1px solid var(--red); border-radius: 50%; background: var(--node-bg);
  }
}

/* Лента направлений выходит из магистрали ответвлением: линия от вертикали к первому узлу и точка на стыке.
   Раньше вертикаль слева и горизонталь с узлами были двумя отдельными линиями и не читались как одна схема.
   Магистраль есть только от 768 px, поэтому и ответвление там же. Расстояние до магистрали — gutter − 12 px. */
@media (min-width: 768px) {
  .has-trunk .dirs__list { position: relative; }
  .has-trunk .dirs__list::before {
    content: ''; position: absolute; top: calc(var(--node) / 2);
    left: calc(12px - var(--gutter)); width: calc(var(--gutter) - 12px);
    height: 1px; background: var(--red); opacity: .55;
  }
  .has-trunk .dirs__list::after {
    content: ''; position: absolute; top: calc(var(--node) / 2 - 2px);
    left: calc(12px - var(--gutter) - 2px);
    width: 5px; height: 5px; border-radius: 50%; background: var(--red);
  }
}

/* Кнопка вызова в подвале */
/* --- Одна анимация для всех «окон» ----------------------------------------
   Снято с vs-epple.de: карточка-ссылка при наведении мягчеет по углам с 20 до 80 px за 0,6 с,
   кривая cubic-bezier(.4,0,.2,1). Работает только там, где есть ссылка (и при фокусе клавиатурой);
   на телефоне и без мыши углы не меняются. Панели без ссылки (форма, пояснения) остаются
   неподвижными: у них углы под курсором с содержимым выглядели бы как ошибка.
   Список один: новые карточки-ссылки добавлять сюда.                                            */
.house, .doc-tile, .contact, .hero__ads, .house-hero__art, .news-list--cols .news-item,
.house-photos__item img, .news-item__thumb {
  transition: border-radius var(--dur-radius) var(--ease-radius),
              border-color var(--dur-ui) var(--ease-out),
              background var(--dur-ui) var(--ease-out);
}
.house, .house-hero__art, .news-item__thumb, .house-photos__item img { overflow: hidden; }
@media (min-width: 768px) {
  /* Скругление от клавиатурного фокуса (:focus-visible), а не от любого фокуса внутри карточки (:focus-within): после щелчка мышью по ссылке внутри карточки
     фокус оставался в ней, и карточка (замечание владельца про Московский пр., 207) не возвращала углы, пока фокус не уйдёт. */
  .house:has(:focus-visible), .doc-tile:focus-visible, .news-list--cols .news-item:has(:focus-visible) { border-radius: var(--radius-card-hover); }
}
@media (hover: hover) and (min-width: 768px) {
  .house:hover, .doc-tile:hover, .contact:hover, .hero__ads:hover, .house-hero__art:hover,
  .news-list--cols .news-item:hover, .house-photos__item img:hover, .news-item__thumb:hover { border-radius: var(--radius-card-hover); }
  /* Красная рамка при наведении у ВСЕХ карточек этого списка (раньше только у плиток документов; у остальных менялись одни углы, а красная рамка
     была у одной карточки «Аварийно-диспетчерская служба» постоянно: владелец 12 октября 2026 принял это за ошибку наведения). Новая карточка-ссылка: добавлять и сюда. */
  .doc-tile:hover, .contact:hover, .house:hover, .house-hero__art:hover, .news-list--cols .news-item:hover { border-color: var(--red); }
}
@media (max-width: 767px) { :root { --radius: 12px; } }


/* --- Карта на странице «Контакты» ------------------------------------------
   Рисуется своим скриптом (tools/build_map.py) из данных OpenStreetMap в цветах сайта: без чужих карт,
   рекламы и сторонних скриптов. Точки — как в Яндекс Картах. Метки — обычные ссылки поверх рисунка. */
.map { cursor: grab; touch-action: pan-y; position: relative; margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #F7F2E9; aspect-ratio: 1000 / 560; }
.map__svg { display: block; width: 100%; height: 100%; }
.map__land path { fill: #F1E9DC; }
.map__land .l-industrial { fill: #ECE2D2; }
.map__green path { fill: #E4E7D2; }
.map__water path { fill: #D7E3E6; }
.map__bld path { fill: #E7DAC7; stroke: #D3C3AA; stroke-width: .8; }
.map__hot path { fill: #EBC9C6; stroke: var(--red); stroke-width: 1.2; }
.map__svg [class^="r-"], .map__svg .casing, .map__svg .fill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.r-footway { stroke: #D6C7AF; stroke-width: 1.2; stroke-dasharray: 3 3; }
.r-service .casing { stroke: #DCCFBA; stroke-width: 6.5; } .r-service .fill { stroke: #fff; stroke-width: 4.5; }
.r-minor .casing { stroke: #DCCFBA; stroke-width: 11; } .r-minor .fill { stroke: #fff; stroke-width: 9; }
.r-tertiary .casing { stroke: #D6C7AF; stroke-width: 15; } .r-tertiary .fill { stroke: #fff; stroke-width: 13; }
.r-secondary .casing { stroke: #D6C7AF; stroke-width: 19; } .r-secondary .fill { stroke: #fff; stroke-width: 17; }
.r-primary .casing { stroke: #CDBDA4; stroke-width: 23; } .r-primary .fill { stroke: #fff; stroke-width: 21; }
.map__names text { font: 600 var(--fs, 11px)/1 var(--font-text); letter-spacing: .05em; fill: #8D7C66; stroke: #fff; stroke-width: calc(var(--fs, 11px) * .27); paint-order: stroke; }
.pin { position: absolute; z-index: 2; width: 44px; height: 44px; transform: translate(-50%, -50%); display: block; }
.pin__dot { position: absolute; inset: 11px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(104, 24, 36, .35); transition: transform var(--dur-radius) var(--ease-radius); }
.pin__dot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--red); opacity: .35; }
.pin:hover .pin__dot, .pin:focus-visible .pin__dot { transform: scale(1.25); }
.pin__card {
  position: absolute; left: 38px; top: 50%; transform: translateY(-50%); width: max-content; max-width: 220px; padding: var(--s-3) var(--s-4);
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(70, 45, 30, .14);
  font-size: var(--t-small); line-height: 1.35; transition: border-radius var(--dur-radius) var(--ease-radius), border-color var(--dur-ui) var(--ease-out);
}
.pin--office .pin__card, .pin--ads .pin__card, .pin--its .pin__card { max-width: 270px; }
/* три метки на «Контактах»: подписи офиса (над меткой) и аварийно-диспетчерской (под меткой) слева, друг под другом, инженерно-технической справа на уровне метки; проверено, что подписи не пересекаются
   друг с другом и не накрывают чужие метки на 800–1440 px */
.pin--office .pin__card { left: auto; right: 38px; top: auto; bottom: 8px; transform: none; }
.pin--ads .pin__card { left: auto; right: 38px; top: 8px; transform: none; }
.pin--its .pin__card { top: 50%; transform: translateY(-50%); }
.pin--ads .pin__card { left: auto; right: 38px; }
/* три метки рядом на «Контактах»: подпись офиса над меткой, аварийно-диспетчерской слева, инженерно-технической под меткой, чтобы не наезжали */
.pin--office .pin__card { top: auto; bottom: 30px; transform: none; }
.pin--its .pin__card { top: 50%; transform: translateY(-50%); }   /* метка в первом подъезде дома 120 (северная секция): подпись справа на уровне метки */   /* метки офиса и аварийно-диспетчерской службы рядом в одном доме: подписи в разные стороны */
.pin__card strong { display: block; font-family: var(--font-head); font-size: 15px; }
.pin__card small { display: block; margin-top: 2px; color: var(--text-mute); font-size: 12px; }
.pin:hover .pin__card, .pin:focus-visible .pin__card { border-color: var(--red); border-radius: 24px; }
.map__credit { position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; padding: 3px 8px; font-size: 12px; color: var(--text-mute); background: rgba(255,255,255,.85); border-top-left-radius: 8px; }
.map__credit a { text-decoration: underline; }
@media (max-width: 640px) {
  .pin__card { display: none; }   /* на телефоне подписи есть ниже, в блоках «Телефоны» и «Реквизиты» */
  .map { aspect-ratio: 4 / 3; }               /* выше, чтобы кнопки масштаба не закрывали карту */
}
.map-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.route-list { margin-top: var(--s-5); display: grid; gap: var(--s-2); color: var(--text-mute); font-size: var(--t-small); }
.route-list strong { color: var(--text); font-weight: 600; }

/* Управление масштабом карты (появляется, когда загрузился скрипт js/map.js) */
.map.is-drag { cursor: grabbing; }
.map:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.map__svg { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.map__ctrl { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; gap: 8px; }
.map__ctrl[hidden], .map__scale[hidden] { display: none; }
.map__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  font: 500 22px/1 var(--font-head); color: var(--text); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 14px rgba(70, 45, 30, .12);
  transition: border-radius var(--dur-radius) var(--ease-radius), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.map__btn:hover, .map__btn:focus-visible { border-color: var(--red); color: var(--red); border-radius: 22px; }
.map__btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.map__btn--reset { font-size: 20px; }
.map__scale { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: grid; gap: 2px; font-size: 12px; color: #6B5B45; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.map__scale-line { display: block; height: 6px; border: 1.5px solid #6B5B45; border-top: 0; }
.map--far .pin__card { display: none; }
.pin--house .pin__card { left: 50%; top: auto; bottom: 48px; transform: translateX(-50%); text-align: center; max-width: 230px; }
@media (max-width: 640px) { .map--house .pin__card { display: block; } }
.map--house.map--far .pin__card { display: none; }


/* Поля ввода на сенсорных экранах и на узких: не меньше 16 px. Если шрифт поля меньше 16 px, iPhone при фокусе приближает страницу
   и сам обратно не отдаляет (проверка 12 октября 2026: поля заявки и поиск по документам были 15 px). Остальное оформление полей прежнее. */
@media (pointer: coarse), (max-width: 760px) {
  .form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea, .docs-search input { font-size: 16px; }
}

/* Телефон: шапка снова стеклянная, как на компьютере (слово владельца 13 октября 2026: «с телефона шапка не имеет такого жидкого стекла, нужно вернуть»).
   Сплошная шапка на телефонах (до 760 px) была сделана тем же днём ради белой полосы над шапкой в iPhone Safari: страница там начинается ниже строки
   статуса, полосу красит сам Safari, у сплошной фиксированной шапки он берёт её цвет, у стеклянной цвет `html` на момент загрузки. Владелец выбрал стекло,
   поэтому на iPhone эта полоса может снова проступать между верхом экрана и шапкой при прокрутке (в движках Chrome и в Safari на Mac её нет). Прежний
   вариант (сплошная шапка до 760 px) лежал здесь в CSS: `.header { background-color: var(--bg); } .header::before { display: none; }
   .header.is-over-dark { background-color: var(--red-foot); } .header.is-menu-open { background-color: transparent; }` внутри `@media (max-width: 760px)`. */

/* Меню открыто, пока шапка над подвалом: шторка светлая (стекло над бордовым даёт розовый), поэтому логотип, надпись и крестик возвращаются к тёмному
   и бордовому, как над светлым блоком. Иначе белое на розовом едва читается (замечено в симуляторе iPhone 13 октября 2026). */
.header.is-over-dark.is-menu-open { color: var(--text); }
.header.is-over-dark.is-menu-open .logo__mark { color: var(--red); }
.header.is-over-dark.is-menu-open .burger__lines i { background: var(--text); }

/* --- «С кем мы сотрудничаем» (13 октября 2026) ---------------------------- */
/* Логотипы партнёров, подача «A»: в одном графитовом тоне, при наведении проявляется родной цвет. В каждой ячейке две картинки
   (серая и цветная, обе векторные SVG одного размера), цветная прозрачна. Оптический размер: высота = --partners-h × --k
   (--k задан у каждого логотипа в разметке), ширина = высота × --ar (ширина/высота). Только логотипы, без заголовка (слово владельца
   проекта 13 октября); красная линия-магистраль с узлом заходит в блок, как в остальные. Размеры увеличены на 20 % (тоже по слову
   владельца): пять логотипов в одну строку при этом шире сетки в 1144 px, поэтому ряд начинается у левого края сетки (правее
   магистрали, она стоит на 12 px от левого края обёртки) и выходит вправо до 100 px, пока есть поля (при 1440 px и шире ровно +100;
   у 1240 px выхода нет). Внутри ряд растянут (`space-between`), а если места мало, логотипы равномерно сжимаются, строка не переносится
   (при 1280 px около 94 %). До 900 px сетка 3 + 2, до 560 px — 2 + 2 + 1, одинокий последний (Russ Outdoor) занимает ряд целиком.
   Цвет фона по той же логике, что у «Для организаций» и «Заявки»: новости видны — заявка бежевая, а этот блок белый;
   новости скрыты — заявка белая, а этот блок бежевый. */
.news-home[hidden] ~ #partnery { background: var(--beige); --text-mute: #5C5C5C; --line: #E3DACC; }
@media (min-width: 768px) {
  .has-trunk > .news-home[hidden] ~ #partnery:not(.hero) { --node-bg: var(--beige); }
}
.partners__list {
  --partners-h: 125px; --partners-gap: 24px;
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;
  gap: 32px var(--partners-gap);
  margin-right: calc(-1 * min(100px, max(0px, (var(--vw, 100vw) - 1240px) / 2)));
}
.partner {
  flex: 0 1 calc(var(--partners-h) * var(--k) * var(--ar)); min-width: 0;
  display: grid; place-items: center; min-height: 158px;
}
.partner img {
  grid-area: 1 / 1; width: 100%; height: auto;
  transition: opacity .45s var(--ease-out);
}
.partner__mono { opacity: .82; }
.partner__color { opacity: 0; }
@media (hover: hover) {
  .partner:hover .partner__mono { opacity: 0; }
  .partner:hover .partner__color { opacity: 1; }
}
/* Сенсорные экраны: родной цвет проявляется, пока палец на логотипе, и ещё чуть-чуть после (класс ставит js/main.js, раздел 9). */
.partner.is-touch .partner__mono { opacity: 0; }
.partner.is-touch .partner__color { opacity: 1; }
@media (max-width: 900px) {
  .partners__list { --partners-h: 110px; --partners-gap: 32px; flex-wrap: wrap; justify-content: center; margin-right: 0; }
  .partner { flex: 0 0 calc((100% - 2 * var(--partners-gap)) / 3); }
  .partner img { width: min(100%, calc(var(--partners-h) * var(--k) * var(--ar))); }
}
@media (max-width: 560px) {
  .partners__list { --partners-h: 94px; --partners-gap: 16px; gap: 16px var(--partners-gap); }
  .partner { flex-basis: calc((100% - var(--partners-gap)) / 2); min-height: 125px; }
  .partner:last-child:nth-child(odd) { flex-basis: 100%; }   /* одинокий последний в ряду (Russ Outdoor) получает всю ширину и читается крупнее */
}

/* Шапка с бургером (до 1239 px): знак на 10 % меньше, название крупнее (слово владельца 13 октября 2026: «сделай больше надпись и на 10 процентов меньше лого»).
   Только в шапке: в подвале и в шапке на компьютере (от 1240 px) размеры прежние (--logo-mark, --logo-name). До 560 px кегль названия задан выше по ширине экрана. */
@media (max-width: 1239px) {
  .header .logo__mark { width: calc(var(--logo-mark) * .9); height: calc(var(--logo-mark) * .9); }
}
@media (min-width: 561px) and (max-width: 1239px) {
  .header .logo__name { font-size: calc(var(--logo-name) * 1.1); }
}

/* --- «Интернет-приёмная»: форма ниже и короче (13 октября 2026, слово владельца «делать не такой длинной»; затем «да» и для страницы) -------
   Касается только формы приёмной (`data-form="priemnaya"`): блок «Напишите нам» на главной (#zayavka) и страница /priemnaya/; форма
   «Заключить договор» (/dogovor/) не затронута. Поля, правила проверки и тексты прежние. Что сделано: отступ блока с формой 64 px вместо 96
   (от 901 px; узел красной линии встаёт на уровень надписи), форма плотнее (поля 44 px вместо 48, зазоры 12 вместо 16, внутренние поля 24
   вместо 32, поле текста 84 px вместо 160, растягивается вручную), согласие и кнопка «Отправить» в одной строке от 561 px (на телефоне друг
   под другом). Высота блока на 1440 px примерно 1098 → 859 px. Отступ блока ищется через :has() (Safari 15.4+, Chrome 105+); где :has() нет,
   прежние 96 px, остальное работает. */
@media (min-width: 901px) { #zayavka, .block:has(.form[data-form="priemnaya"]) { padding-block: var(--s-8); } }
.form[data-form="priemnaya"] { gap: var(--s-3); padding: var(--s-5); }
.form[data-form="priemnaya"] .form__row { gap: 6px; }
.form[data-form="priemnaya"] .form__cols { gap: var(--s-3); }
.form[data-form="priemnaya"] input[type="text"], .form[data-form="priemnaya"] input[type="tel"], .form[data-form="priemnaya"] input[type="email"], .form[data-form="priemnaya"] select, .form[data-form="priemnaya"] textarea { min-height: 44px; padding-block: 10px; }
.form[data-form="priemnaya"] textarea { height: 84px; min-height: 84px; }
.form[data-form="priemnaya"] .form__fieldset legend { margin-bottom: 6px; }
@media (min-width: 561px) {
  .form[data-form="priemnaya"] { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); }
  .form[data-form="priemnaya"] > * { grid-column: 1 / -1; }
  .form[data-form="priemnaya"] > .form__consent { grid-column: 1; align-self: center; }
  .form[data-form="priemnaya"] > .btn { grid-column: 2; justify-self: end; align-self: center; }
}

/* «Контакты для жителей» (две карточки на страницах домов и «Документов»): всё по центру. Слово владельца 22 октября 2026
   («центруй лучше»): текст в карточке по центру, содержимое по вертикали тоже по центру. Где есть subgrid, подпись, номер и
   примечание двух карточек стоят на общих строках, поэтому номера на одной линии, а пустое место не копится внизу одной из них.
   Пять карточек на «Контактах» не затронуты (селектор только про ровно две). */
.contacts:has(> .contact:nth-child(2):last-child) .contact { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
@supports (grid-template-rows: subgrid) {
  .contacts:has(> .contact:nth-child(2):last-child) .contact { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; justify-items: center; align-items: center; }
}

/* ==========================================================================
   Страница «О компании»: липкие заголовки и движение (22 октября 2026)

   Слово владельца: «изучи анимацию раздела „Почему выбирают“ и перенеси точно так же в раздел о компании по такому же
   принципу», затем «заливку убери, как раньше, цвет верни» и «для всего раздела анимации, где много отступов в о
   компании». Источник приёмов: plitprof.ru, секция «Почему выбирают нас» (css/pl-home.css, js/pl-motion.js).
   Слева липкая колонка, справа содержание, которое выезжает по одному элементу; линейка над строкой прочерчивается слева
   направо (трансформом, а не шириной, чтобы кадр не пересчитывал раскладку). Размеры и время как у источника: сдвиг 26 px,
   прозрачность 0,5 с, сдвиг 0,7 с, ступенька 70 мс, линейка 1 с с задержкой 0,1 с, кривая cubic-bezier(.22, 1, .36, 1).

   Где применено: цифры вверху (`.facts--row`), заголовки и содержание разделов `.about` («Чем мы занимаемся», «Дома под
   управлением», «Заключить договор»), раздел «Лицензии и реквизиты» (`.pause`). Заголовок раздела `.about` липкий от 801 px:
   под ним раньше оставалась пустая колонка высотой в весь раздел. Тёмная заливка (#3A1218) для «Лицензий и реквизитов» была
   сделана и отменена: секция бежевая (`.block--beige`), цвета прежние. Строки списка реквизитов остаются обычным
   <dl class="spec"> без вложенной разметки: «Тексты сайта» в админке правят их как раньше.
   Классы `rise` и `is-in` ставит js/about-motion.js (без скрипта всё видно сразу).
   ========================================================================== */

:root { --rise-ease: cubic-bezier(.22, 1, .36, 1); }

.pause__grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

/* Заголовок с кнопками держится у края экрана (под шапкой), пока справа идут строки.
   align-self: start обязателен: иначе колонка растянется на всю строку сетки и липкости негде сработать. */
.pause__aside {
  position: sticky;
  top: calc(var(--header-h) + clamp(24px, 4vh, 48px));
  align-self: start;
}

.pause__lead { max-width: 42ch; margin-top: var(--s-3); color: var(--text-mute); }
.pause__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 32px); }
.pause .btn--ghost { --btn-fill: var(--red); color: var(--red); border-color: var(--red); }   /* как у кнопки «Контакты» в блоке «Заключить договор» */
@media (hover: hover) { .pause .btn--ghost:hover { color: #fff; transition: border-radius var(--dur-radius) var(--ease-radius), color .1s ease .15s; } }

/* Строки: подпись слева (мелкие разрежённые прописные), значение справа. Перебиваем общий .spec (две колонки,
   нижняя линия, последняя нечётная строка во всю ширину). Колонка подписи не уже 172 px: «на управление МКД» в подписи
   нерасторжимо и в узкой колонке вылезало на значение. */
.pause .spec.pause__rows { display: block; margin: 0; }
.pause .pause__rows > div {
  position: relative;
  grid-template-columns: clamp(172px, 13vw, 184px) minmax(0, 1fr);
  gap: 0 clamp(16px, 2.2vw, 36px);
  padding-block: clamp(17px, 2.1vw, 27px);
  border-bottom: 0;
}
.pause .pause__rows > div:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: clamp(172px, 13vw, 184px) minmax(0, 1fr); }
.pause .pause__rows > div:first-child { padding-top: 0; }

.pause .pause__rows dt {
  padding-top: .42em;                       /* оптически к первой строке значения */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pause .pause__rows dd {
  font-family: var(--font-head);
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--text);
}

/* Линейка над строкой (у первой её нет). */
.pause .pause__rows > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
}
.pause .pause__rows > div:first-child::before { content: none; }

/* Движение. Скрыто и сдвинуто только то, что пометил скрипт (`rise`), поэтому без скрипта текст на месте. */
.rise {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .5s var(--rise-ease) calc(var(--rise-i, 0) * 70ms),
    transform .7s var(--rise-ease) calc(var(--rise-i, 0) * 70ms);
}
.rise.is-in { opacity: 1; transform: none; }
.pause .pause__rows > div.rise::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--rise-ease) .1s;
}
.pause .pause__rows > div.rise.is-in::before { transform: scaleX(1); }

/* Линейки на странице вне «Лицензий и реквизитов»: цифры вверху (верхняя линия) и строки домов (линия над каждой и под
   последней). Статичные границы заменены такими же по виду линиями, которые прочерчиваются. */
.facts--row > div { position: relative; border-top: 0; }
.facts--row > div::before,
.about-houses > li::before,
.about-houses > li:last-child::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
}
.about-houses { border-top: 0; }
.about-houses > li { position: relative; border-bottom: 0; }
.about-houses > li:last-child::after { inset: auto 0 0 0; }
.facts--row > div.rise::before,
.about-houses > li.rise::before,
.about-houses > li.rise:last-child::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--rise-ease) .1s;
}
.facts--row > div.rise.is-in::before,
.about-houses > li.rise.is-in::before,
.about-houses > li.rise.is-in:last-child::after { transform: scaleX(1); }

/* Заголовок раздела держится под шапкой, пока справа идёт содержание (раньше под ним пустела колонка в высоту раздела). */
@media (min-width: 801px) {
  .about > .block__title {
    position: sticky;
    top: calc(var(--header-h) + clamp(24px, 4vh, 48px));
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .pause .pause__rows > div.rise::before,
  .facts--row > div.rise::before,
  .about-houses > li.rise::before,
  .about-houses > li.rise:last-child::after { transform: scaleX(1); transition: none; }
}

/* Узкие экраны: колонки друг под другом, заголовок уже не липнет; на телефоне подпись над значением. */
@media (max-width: 900px) {
  .pause__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 36px); }
  .pause__aside { position: static; }
}
@media (max-width: 620px) {
  .pause .pause__rows > div,
  .pause .pause__rows > div:last-child:nth-child(odd) { grid-template-columns: 1fr; gap: 6px; padding-block: 17px; }
  .pause .pause__rows dt { padding-top: 0; }
  .pause__actions { width: 100%; }
  .pause__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Слоган первого экрана: кистевая надпись картинкой (28 октября 2026) ---------------------------------------------
   SVG бордо сайта, нарисован по обложке «Этапы большого пути» (dev-docs/font-proposal/brush-script/cover-trace/slogan-final).
   Набранный текст остаётся в h1 скрытым для глаз. У картинки поле 2,6 % с каждой стороны: сдвиг влево ставит край «В» по левому краю текста ниже. */
.hero__title--lettering { width: min(100%, 540px); }
.hero__slogan { width: 100%; height: auto; margin-left: -2.6%; }
@media (min-width: 561px) and (max-width: 900px) { .hero__title--lettering { width: min(100%, 520px); } }

/* --- Телефон: правки по разбору дизайнера (30 октября 2026) ------------------------------------
   1) блоки появляются раньше (js/main.js: наблюдатель срабатывает за 12 % до края экрана) и короче:
      при быстром свайпе экран не остаётся пустым;
   2) виды обращения в форме сеткой 2×2, а не «три и один на второй строке»;
   3) запас под плавающую панель Safari внизу страницы, чтобы она не перекрывала подвал.            */
@media (max-width: 900px) {
  :root { --dur-reveal: .7s; }
  .reveal { transform: translateY(16px); }
  html { scroll-padding-bottom: 72px; }
  .footer { padding-bottom: calc(var(--s-6) + 64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kind span { width: 100%; justify-content: center; text-align: center; }
}