/* ============================================================
   Демонстрационный пример: сайт-визитка оконной компании.
   Веб-студия Ириночи. Все изображения нарисованы кодом.

   НАЗВАНИЕ ФИРМЫ.
   В задании было «Тёплый контур». Проверка показала живую фирму:
   ТПК «Тёплый контур», пластиковые окна, Саяногорск (карточка в 2ГИС).
   Запасной вариант «Контур Окна» тоже занят — ООО «Контур», kontur-okna.ru,
   Тула, производитель светопрозрачных конструкций. Вариант «Светлый Контур»
   остаётся в том же семействе «Контур», поэтому от слова отказались совсем.

   Первым выбором был «Тёплый створ», но его забраковали: «створ» в живой речи
   — гидротехника и геодезия (створ реки, створ плотины), оконное слово —
   «створка». На вывеске капслоком читается как опечатка.

   Выбрано «ТЁПЛЫЙ ПРОФИЛЬ». Слово настоящее оконное, произносится без запинки,
   к чертёжному мотиву подходит напрямую: профиль — это то, что нарисовано
   в разрезе на странице «Окна и балконы». Поиском по «Тёплый профиль» +
   окна / компания / Екатеринбург / 2ГИС действующей оконной фирмы с таким
   именем не нашлось — выдача даёт только сам термин (тёплый подставочный
   профиль, тёплый алюминиевый профиль).

   ДИЗАЙН-ИДЕЯ.
   Сквозной мотив — чертёж окна, каким его рисует замерщик: тонкая обводка,
   размерные линии со стрелками, штриховая «галочка» открывания створки.
   Поэтому фотографий нет не по необходимости, а по замыслу: чертёж честнее
   стоковой фотографии чужого окна. Разрезы профилей на странице «Окна»
   нарисованы в реальном соотношении 58 : 70 : 86 мм — читатель видит разницу
   толщины глазами, а не только в цифрах.
   ============================================================ */

/* ЗНАК РУБЛЯ. «₽» (U+20BD) рисуется своим шрифтом: в общем shrifty.css есть
   отдельные подмножества manrope-*-rubl.woff2 под этот символ.
   Приглушённым и мельче числа (.cena__znak) он сделан не поэтому, а по
   типографике: «от» в .cena__ot получает ровно ту же обработку, и вместе они
   образуют симметричную пару серых приставок вокруг чёрного числа — читается
   сама цифра, а не служебные знаки. Плюс ₽ в Manrope 800 — широкий плотный
   глиф, в полный кегль и цвет он перевешивает саму цену. */

:root {
  /* Плашка «демонстрационный пример» — общий слой. */
  --demo-fon: #16202B;
  --demo-tekst: #FFFFFF;
  --demo-knopka-fon: #1F6FEB;
  --demo-knopka-tekst: #FFFFFF;

  /* Палитра. */
  --fon: #FFFFFF;
  --podlozhka: #F4F7FA;
  --tekst: #16202B;
  /* Приглушённый затемнён с #66768A: на подложке #F4F7FA тот давал 4,32 : 1
     при норме 4,5, а этим цветом набрано много основного текста.
     Затемнён второй раз, с #607086: в прайс-таблице у краёв прокрутки лежит
     тень-подсказка rgba(22, 32, 43, .13), и под ней фон строки становится
     #E1E2E3 — там прежний цвет давал 3,89 : 1. Теперь норма взята на всех
     трёх фонах: 5,85 : 1 на белом, 5,45 : 1 на подложке, 4,51 : 1 под тенью.
     Пропорция каналов сохранена, на глаз цвет остался тем же приглушённым. */
  --priglushonnyy: #57667A;
  --liniya: #E2E8F0;
  /* Акцент затемнён с #1F6FEB: ссылкой в тексте он ложится на подложку
     #F4F7FA и давал там 4,31 : 1 при норме 4,5. Теперь 4,79 : 1 на подложке
     и 5,15 : 1 на белом; белый текст на кнопке этого цвета — тоже 5,15 : 1
     вместо 4,63. Наведение (--akcent-temnyy) осталось заметно темнее. */
  --akcent: #1D68DD;
  --ten: 0 6px 24px rgba(22, 32, 43, .07);

  /* Производные. */
  --akcent-temnyy: #1857C0;
  --liniya-navedenie: #C3D2E4;
  --steklo: rgba(31, 111, 235, .055);
  --steklo-kray: rgba(31, 111, 235, .22);
  --blik: rgba(255, 255, 255, .75);

  --radius: 14px;
  --radius-s: 10px;
  --otstup-razdela: 96px;

  --shrift: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Сброс ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 400 17px/1.65 var(--shrift);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:is(a, button, summary):focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
}

::selection { background: rgba(31, 111, 235, .16); }

/* ---------- Сетка ---------- */

.obolochka {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.razdel {
  padding: var(--otstup-razdela) 0;
  scroll-margin-top: 88px;
}

.razdel--podlozhka {
  background: var(--podlozhka);
  border-top: 1px solid var(--liniya);
  border-bottom: 1px solid var(--liniya);
}

.razdel--tonkiy { padding: 72px 0; }

/* ---------- Типографика ---------- */

.metka {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

/* Мини-размерная линия вместо декоративной точки. */
.metka::before {
  content: '';
  flex: none;
  width: 30px;
  height: 8px;
  border-left: 1px solid var(--akcent);
  border-right: 1px solid var(--liniya);
  background: linear-gradient(var(--liniya), var(--liniya)) center / 100% 1px no-repeat;
}

.zagolovok-glavnyy {
  margin: 0 0 20px;
  font-size: clamp(31px, 5.4vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
}

.zagolovok-razdela {
  margin: 0 0 14px;
  font-size: clamp(25px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
}

.lid {
  max-width: 620px;
  margin: 0 0 34px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--priglushonnyy);
}

.lid--bez-otstupa { margin-bottom: 0; }

.primechanie {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--priglushonnyy);
}

.cena {
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -.01em;
}

.cena__ot {
  margin-right: .32em;
  font-size: .74em;
  font-weight: 600;
  color: var(--priglushonnyy);
}

.cena__znak {
  margin-left: .24em;
  font-size: .82em;
  font-weight: 600;
  color: var(--priglushonnyy);
}

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

.knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}

.knopka--glavnaya {
  background: var(--akcent);
  color: #fff;
}

.knopka--glavnaya:hover { background: var(--akcent-temnyy); }

.knopka--obvodka {
  background: var(--fon);
  border-color: var(--liniya);
  color: var(--tekst);
}

.knopka--obvodka:hover {
  border-color: var(--liniya-navedenie);
  background: var(--podlozhka);
}

.knopka--malaya {
  padding: 10px 18px;
  border-radius: var(--radius-s);
  font-size: 14px;
}

.knopki {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ssylka-dalshe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--akcent);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 4px;
}

.ssylka-dalshe:hover { text-decoration: underline; }

.ssylka-dalshe::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s;
}

.ssylka-dalshe:hover::after { transform: translateX(3px) rotate(45deg); }

/* Ссылка внутри абзаца: подчёркнута и акцентная, иначе в сером тексте
   примечания её не видно как ссылку. */
.ssylka-v-tekste {
  color: var(--akcent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ssylka-v-tekste:hover { color: var(--akcent-temnyy); }

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

.shapka {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--liniya);
}

.shapka__vnutri {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 76px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logotip {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.logotip__znak {
  flex: none;
  width: 26px;
  height: 26px;
}

.logotip__imya {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .045em;
}

.logotip__podpis {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .06em;
  color: var(--priglushonnyy);
}

/* Меню — этот же элемент общий скрипт открывает классом menyu--otkryto. */
.menyu {
  display: flex;
  align-items: center;
  gap: 26px;
}

.menyu__spisok {
  display: flex;
  align-items: center;
  gap: 26px;
}

.menyu__ssylka {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s;
}

.menyu__ssylka:hover { color: var(--akcent); }

.menyu__punkt--tekushchiy .menyu__ssylka { color: var(--akcent); }

.menyu__punkt--tekushchiy .menyu__ssylka::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--akcent);
}

.menyu__knopka { flex: none; }

.telefon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--liniya);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s;
}

.telefon:hover { border-color: var(--liniya-navedenie); }

.telefon__znak {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--akcent);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--liniya);
  border-radius: var(--radius-s);
  background: var(--fon);
  cursor: pointer;
}

.burger__polosy {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--tekst);
}

.burger__polosy::before,
.burger__polosy::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--tekst);
}

.burger__polosy::before { top: -6px; }
.burger__polosy::after { top: 6px; }

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

.pervyy-ekran { padding: 76px 0 88px; }

.pervyy-ekran__setka {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
}

.pervyy-ekran__zamechanie {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--liniya);
  font-size: 14px;
  line-height: 1.55;
  color: var(--priglushonnyy);
  max-width: 460px;
}

.pervyy-ekran__tochka {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--akcent);
}

.chertezh-ramka { position: relative; }

/* Ценник на выноске — как в смете замерщика. */
.cennik {
  position: absolute;
  right: 0;
  bottom: 8px;
  padding: 13px 18px;
  border: 1px solid var(--liniya);
  border-radius: 12px;
  background: var(--fon);
  box-shadow: var(--ten);
}

.cennik::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -34px;
  width: 34px;
  height: 1px;
  background: var(--liniya-navedenie);
}

.cennik::after {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  left: -37px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akcent);
}

.cennik__imya {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.cennik__cena { font-size: 21px; }

/* ---------- Чертежи ---------- */

.chertezh {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chertezh text {
  font-family: var(--shrift);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.ch-ramka { fill: var(--fon); stroke: var(--tekst); stroke-width: 2; }
.ch-stvorka { fill: var(--fon); stroke: var(--tekst); stroke-width: 1.5; }
/* Импост на мелких схемах: обводка тоньше, иначе две линии сливаются в чёрный брусок. */
.ch-impost { fill: var(--fon); stroke: var(--tekst); stroke-width: 1; }
.ch-korobka { fill: none; stroke: var(--liniya); stroke-width: 1; }
.ch-steklo { fill: var(--steklo); stroke: var(--steklo-kray); stroke-width: 1; }
.ch-blik { fill: var(--blik); }
.ch-podlozhka { fill: var(--podlozhka); stroke: var(--liniya); stroke-width: 1; }
.ch-liniya { fill: none; stroke: var(--liniya); stroke-width: 1; }
.ch-razmer { fill: none; stroke: var(--priglushonnyy); stroke-width: 1; }
.ch-razmer-tekst { fill: var(--priglushonnyy); }
.ch-otkryvanie { fill: none; stroke: var(--akcent); stroke-width: 1; stroke-dasharray: 5 4; opacity: .75; }
.ch-akcent { fill: var(--akcent); }
.ch-akcent-liniya { fill: none; stroke: var(--akcent); stroke-width: 1.5; }
.ch-detal { fill: var(--tekst); }
.ch-krug { fill: var(--fon); stroke: var(--akcent); stroke-width: 1.5; }
.ch-galka { fill: none; stroke: var(--akcent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-strelka { fill: none; stroke: var(--akcent); stroke-width: 1.5; stroke-linecap: round; }
.ch-setka { fill: none; stroke: var(--liniya); stroke-width: 1; }
.ch-ulica { fill: var(--fon); stroke: var(--liniya); stroke-width: 1; }
.ch-kvartal { fill: var(--podlozhka); }
.ch-dom { fill: #E9EFF6; }
.ch-marshrut { fill: none; stroke: var(--akcent); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }
.ch-skver { fill: rgba(31, 111, 235, .07); }
.ch-metka-fon { fill: var(--fon); stroke: var(--liniya); stroke-width: 1; }
.ch-metka-tekst { fill: var(--tekst); font-size: 16px; font-weight: 800; }
.ch-podpis-ulicy { fill: var(--priglushonnyy); font-size: 13px; letter-spacing: .06em; }

.vizualno-skryto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Сборка чертежа при загрузке: рама, стёкла, фурнитура, потом размеры. */
.ch-shag {
  opacity: 0;
  animation: ch-poyavlenie .5s ease forwards;
}

.ch-shag--1 { animation-delay: .05s; }
.ch-shag--2 { animation-delay: .22s; }
.ch-shag--3 { animation-delay: .38s; }
.ch-shag--4 { animation-delay: .52s; }
.ch-shag--5 { animation-delay: .66s; }

@keyframes ch-poyavlenie {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ch-shag {
  transform-box: fill-box;
  transform-origin: center;
}

.cennik {
  opacity: 0;
  animation: cennik-poyavlenie .45s ease .8s forwards;
}

@keyframes cennik-poyavlenie {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-shag,
  .cennik {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* ---------- Карточки услуг ---------- */

.karty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.karta {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background: var(--fon);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.karta:hover {
  border-color: var(--liniya-navedenie);
  box-shadow: var(--ten);
  transform: translateY(-2px);
}

.karta__risunok {
  margin-bottom: 18px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--liniya);
}

.karta__risunok .chertezh {
  max-width: 200px;
  margin: 0 auto;
}

.karta__imya {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.karta__opisanie {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--priglushonnyy);
}

.karta__niz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--liniya);
}

.karta__cena { font-size: 18px; }

.karta__strelka {
  font-size: 13px;
  font-weight: 600;
  color: var(--akcent);
}

/* ---------- Почему мы ---------- */

.pochemu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 30px;
}

.pochemu__ikonka {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
}

.pochemu__imya {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.pochemu__tekst {
  font-size: 15px;
  line-height: 1.6;
  color: var(--priglushonnyy);
}

/* ---------- Таблицы ---------- */

/* Кромка у краёв: две «местные» заливки едут вместе с содержимым и закрывают
   тени, пока прокручивать некуда. Поэтому затемнение появляется ровно тогда,
   когда таблица правда уезжает за край, и гаснет, когда доехали до конца.
   Скрипта для этого не нужно. */
.tablica-obolochka {
  overflow-x: auto;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--fon), rgba(255, 255, 255, 0)) 0 0 / 34px 100% no-repeat local,
    linear-gradient(to left, var(--fon), rgba(255, 255, 255, 0)) 100% 0 / 34px 100% no-repeat local,
    linear-gradient(to right, rgba(22, 32, 43, .13), rgba(22, 32, 43, 0)) 0 0 / 20px 100% no-repeat scroll,
    linear-gradient(to left, rgba(22, 32, 43, .13), rgba(22, 32, 43, 0)) 100% 0 / 20px 100% no-repeat scroll,
    var(--fon);
}

.tablica {
  width: 100%;
  min-width: 620px;
}

.tablica--profili { min-width: 1010px; }

.tablica th {
  padding: 15px 22px;
  border-bottom: 1px solid var(--liniya);
  background: var(--podlozhka);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--priglushonnyy);
  white-space: nowrap;
}

.tablica td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--liniya);
  vertical-align: middle;
  font-size: 16px;
}

.tablica tbody tr:last-child td { border-bottom: 0; }

.tablica tbody tr { transition: background-color .16s; }
.tablica tbody tr:hover { background: var(--podlozhka); }

.tablica__imya { font-weight: 600; }

.tablica__poyasnenie {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--priglushonnyy);
}

/* Специфичность 0,2,0 — иначе «.tablica th { text-align: left }» уводит
   заголовок колонки влево от выключенных вправо цен. */
.tablica .tablica__cena {
  text-align: right;
  white-space: nowrap;
}

.tablica__cena .cena { font-size: 17px; }

/* Специфичность выше, чем у «.tablica td», иначе отступ ячейки съедает схему. */
.tablica .tablica__risunok {
  width: 110px;
  padding-right: 0;
}

.tablica__risunok .razrez {
  width: 66px;
  height: 57px;
  max-width: none;
}

/* min-width: max-content поднимает минимальную ширину ячейки до реальной ширины
   строки «разрез + название». Без него самый широкий разрез (86 мм) вылезал
   из колонки и название печаталось поверх соседней ячейки. */
.tablica__profil {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: max-content;
}

.tablica__profil .tablica__imya { white-space: nowrap; }

/* Высота одна на все три, ширина считается из viewBox — так масштаб 58 : 70 : 86 не врёт. */
.tablica__razrez {
  flex: none;
  width: auto;
  height: 86px;
}

/* Подсказка про боковую прокрутку. Пороги посчитаны от min-width самих таблиц
   и отступов контейнера, чтобы надпись не висела там, где прокрутки нет:
   обычная таблица — min-width 620, отступы контейнера 48 и рамка обёртки 2 →
   прокрутка ниже 670 px; таблица профилей — min-width 1010 → ниже 1060 px.
   Показ включён ниже, в медиазапросах в конце файла. */
.tablica-podskazka {
  display: none;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--priglushonnyy);
}

.tablica-podskazka::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--akcent);
  border-right: 1.5px solid var(--akcent);
  transform: rotate(45deg);
}

.pod-tablicey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

/* ---------- Шаги ---------- */

.shagi {
  --shagi-zazor: 30px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--shagi-zazor);
}

/* Линия идёт от центра первого кружка до центра последнего, а не до края сетки:
   до правого края от центра последнего кружка ровно «ширина колонки минус 20». */
.shagi::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: calc((100% - 3 * var(--shagi-zazor)) / 4 - 20px);
  height: 1px;
  background: var(--liniya);
}

.shag__nomer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border: 1px solid var(--liniya);
  border-radius: 50%;
  background: var(--fon);
  font-size: 15px;
  font-weight: 800;
  color: var(--akcent);
}

.shag__srok {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.shag__imya {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.shag__tekst {
  font-size: 15px;
  line-height: 1.6;
  color: var(--priglushonnyy);
}

/* ---------- Список монтажа ---------- */

.spisok-vhodit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}

.spisok-vhodit__punkt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--liniya);
  font-size: 16px;
}

.spisok-vhodit__punkt::before {
  content: '';
  flex: none;
  width: 11px;
  height: 6px;
  margin-top: 8px;
  border-left: 2px solid var(--akcent);
  border-bottom: 2px solid var(--akcent);
  transform: rotate(-45deg);
}

.spisok-vhodit__poyasnenie {
  display: block;
  font-size: 14px;
  color: var(--priglushonnyy);
}

/* ---------- Балконы ---------- */

.dve-karty {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.bolshaya-karta {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background: var(--fon);
}

.bolshaya-karta__risunok {
  margin-bottom: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--liniya);
}

.bolshaya-karta__imya {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.bolshaya-karta__lid {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--priglushonnyy);
}

.bolshaya-karta__spisok {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 15px;
}

.bolshaya-karta__spisok li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.bolshaya-karta__spisok li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--liniya-navedenie);
}

.bolshaya-karta__niz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--liniya);
}

.bolshaya-karta__cena { font-size: 22px; }

/* ---------- От чего зависит цена ---------- */

.zavisit { display: grid; }

.zavisit__stroka {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--liniya);
}

.zavisit__stroka:first-child { border-top: 1px solid var(--liniya); }

.zavisit__imya {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.zavisit__tekst {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--priglushonnyy);
}

/* ---------- Полоса «точная стоимость» ---------- */

.polosa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 46px;
  padding: 28px 32px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background: var(--podlozhka);
}

.polosa__tekst {
  max-width: 620px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.polosa__poyasnenie {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  color: var(--priglushonnyy);
}

/* ---------- Форма ---------- */

.forma-blok {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.forma {
  padding: 30px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background: var(--fon);
  box-shadow: var(--ten);
}

.forma__setka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.pole--vsya-shirina { grid-column: 1 / -1; }

.pole__nazvanie {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.pole__vvod {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius-s);
  background: var(--fon);
  color: var(--tekst);
  font: 400 16px/1.4 var(--shrift);
  transition: border-color .16s, box-shadow .16s;
}

.pole__vvod::placeholder { color: #9AA8B8; }

.pole__vvod:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .14);
}

textarea.pole__vvod {
  min-height: 104px;
  resize: vertical;
}

.pole__vvod--vybor {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--priglushonnyy) 50%),
    linear-gradient(135deg, var(--priglushonnyy) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% - 1px), calc(100% - 15px) calc(50% - 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.forma__knopka {
  width: 100%;
  margin-top: 20px;
}

.forma__soglasie {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--priglushonnyy);
}

.forma-sboku__spisok {
  display: grid;
  gap: 16px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--liniya);
}

.forma-sboku__punkt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--priglushonnyy);
}

.forma-sboku__nomer {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--liniya);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: var(--akcent);
  background: var(--fon);
}

/* ---------- Контакты ---------- */

.kontakt-karty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.kontakt {
  padding: 24px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background: var(--fon);
}

.kontakt__znak {
  width: 26px;
  height: 26px;
  margin-bottom: 16px;
  color: var(--akcent);
}

.kontakt__imya {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.kontakt__znachenie {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tekst);
  text-decoration: none;
}

a.kontakt__znachenie:hover { color: var(--akcent); }

.kontakt__dopolnenie {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--priglushonnyy);
}

/* ---------- Схема проезда ---------- */

.shema {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  background: var(--podlozhka);
}

.shema__plan {
  display: block;
  width: 100%;
  aspect-ratio: 2.35;
}

.shema__plan text { font-family: var(--shrift); font-weight: 600; }

.shema__podpis {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border: 1px solid var(--liniya);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.shema__masshtab {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 8px 14px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .94);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--priglushonnyy);
}

.shema__masshtab::before {
  content: '';
  display: block;
  width: 56px;
  height: 6px;
  margin-bottom: 6px;
  border-left: 1px solid var(--priglushonnyy);
  border-right: 1px solid var(--priglushonnyy);
  background: linear-gradient(var(--priglushonnyy), var(--priglushonnyy)) center / 100% 1px no-repeat;
}

.kak-doehat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.kak-doehat__punkt {
  padding: 20px 22px;
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
}

.kak-doehat__imya {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 800;
}

.kak-doehat__tekst {
  font-size: 15px;
  line-height: 1.6;
  color: var(--priglushonnyy);
}

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

.podval {
  padding: 64px 0 28px;
  border-top: 1px solid var(--liniya);
  background: var(--podlozhka);
}

.podval__setka {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
}

.podval__imya {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.podval__tekst {
  max-width: 280px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--priglushonnyy);
}

.podval__spisok {
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.podval__ssylka {
  color: var(--tekst);
  text-decoration: none;
  transition: color .16s;
}

.podval__ssylka:hover { color: var(--akcent); }

.podval__strochka { color: var(--priglushonnyy); }

.podval__niz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--liniya);
  font-size: 13px;
  color: var(--priglushonnyy);
}

/* ---------- Шапка внутренней страницы и «штамп» чертежа ---------- */

.shapka-stranicy {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 52px;
  align-items: end;
}

.razdel--liniya-vnizu { border-bottom: 1px solid var(--liniya); }

.shtamp {
  border: 1px solid var(--liniya);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fon);
}

.shtamp__zagolovok {
  padding: 12px 20px;
  border-bottom: 1px solid var(--liniya);
  background: var(--podlozhka);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.shtamp__stroka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--liniya);
}

.shtamp__stroka:last-child { border-bottom: 0; }

.shtamp__imya {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--priglushonnyy);
}

.shtamp__znachenie {
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

/* ---------- Разрез профиля: масштаб настоящий, 58 : 70 : 86 мм ---------- */

.razrez { display: block; }

.ch-profil { fill: #E7EEF6; stroke: var(--tekst); stroke-width: 1.5; }
.ch-kamera { fill: var(--fon); stroke: rgba(22, 32, 43, .28); stroke-width: .8; }

/* ---------- Медиазапросы ---------- */

@media (max-width: 900px) {
  :root { --otstup-razdela: 64px; }

  .razdel--tonkiy { padding: 52px 0; }

  .shapka__vnutri { gap: 14px; }

  .menyu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 22px;
    background: var(--fon);
    border-bottom: 1px solid var(--liniya);
    box-shadow: var(--ten);
  }

  .menyu--otkryto { display: flex; }

  .menyu__spisok {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .menyu__ssylka {
    padding: 14px 0 14px 16px;
    border-bottom: 1px solid var(--liniya);
    font-size: 17px;
  }

  /* На узком экране текущий пункт помечен вертикальной чертой слева,
     подчёркивание тут читалось бы как зачёркивание. */
  .menyu__punkt--tekushchiy .menyu__ssylka::after {
    left: 0;
    right: auto;
    top: 12px;
    bottom: 12px;
    width: 3px;
    height: auto;
    transform: none;
  }

  .menyu__knopka { margin-top: 16px; }

  .burger { display: block; }

  .pervyy-ekran { padding: 48px 0 60px; }

  .pervyy-ekran__setka {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .karty { grid-template-columns: repeat(2, 1fr); }
  .pochemu { grid-template-columns: repeat(2, 1fr); }
  .shagi { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .shagi::before { display: none; }
  .dve-karty { grid-template-columns: 1fr; }
  .kontakt-karty { grid-template-columns: repeat(2, 1fr); }

  .forma-blok {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .zavisit__stroka { grid-template-columns: 200px 1fr; gap: 18px; }

  .shapka-stranicy {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .podval__setka {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }

  .shema__plan { aspect-ratio: 1.7; }
}

@media (max-width: 600px) {
  :root { --otstup-razdela: 48px; }

  body { font-size: 16px; }

  .obolochka { padding: 0 16px; }

  .menyu { padding: 8px 16px 20px; }

  .razdel--tonkiy { padding: 40px 0; }

  .shapka__vnutri { min-height: 64px; gap: 10px; }

  .logotip__imya { font-size: 15px; }
  .logotip__podpis { display: none; }

  .telefon { padding: 9px; }
  .telefon__tekst { display: none; }

  .pervyy-ekran { padding: 36px 0 48px; }

  .knopki .knopka { flex: 1 1 100%; }

  .cennik {
    position: static;
    margin-top: 18px;
    box-shadow: none;
  }

  .cennik::before,
  .cennik::after { display: none; }

  .karty { grid-template-columns: 1fr; }
  .pochemu { grid-template-columns: 1fr; gap: 28px; }
  .shagi { grid-template-columns: 1fr; gap: 26px; }
  .kontakt-karty { grid-template-columns: 1fr; }
  .spisok-vhodit { grid-template-columns: 1fr; gap: 0; }
  .kak-doehat { grid-template-columns: 1fr; }

  .shag__nomer { margin-bottom: 14px; }

  .forma { padding: 22px 18px; }
  .forma__setka { grid-template-columns: 1fr; }

  .zavisit__stroka { grid-template-columns: 1fr; gap: 6px; }

  .polosa { padding: 22px 20px; }
  .polosa__tekst { font-size: 17px; }

  .tablica th { padding: 13px 16px; }
  .tablica td { padding: 15px 16px; font-size: 15px; }
  /* min-width обычных таблиц намеренно не снижаем: при 620 px они не влезают
     на любом экране до 668 px, и порог показа подсказки совпадает с порогом
     появления прокрутки без «мёртвой зоны» 552–600 px. */
  .tablica--profili { min-width: 700px; }
  .tablica .tablica__risunok { width: 74px; }
  .tablica__risunok .razrez { width: 48px; height: 41px; }
  .tablica__razrez { height: 64px; }

  /* Разрез встаёт над названием: колонке нужна ширина не «разрез + слово»,
     а ширина большего из двух — прокрутки вбок остаётся меньше. */
  .tablica__profil {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .podval { padding: 48px 0 24px; }
  .podval__setka { grid-template-columns: 1fr; gap: 28px; }
  .podval__tekst { max-width: none; }

  .shema__plan { aspect-ratio: 1.25; }
  .shema__podpis { top: 12px; left: 12px; padding: 7px 12px; font-size: 11px; }
  .shema__masshtab { right: 12px; bottom: 12px; }

  /* План на телефоне показан крупнее и обрезан по краям, поэтому подписи
     задраны в кегле: иначе на 360 px они уходят в 8 px и не читаются. */
  .shema__plan .ch-podpis-ulicy { font-size: 19px; }
  .shema__plan .ch-metka-tekst { font-size: 23px; }
}

/* Пороги показа подсказки о прокрутке. Считаны от min-width таблиц: обычная
    */
@media (max-width: 1059px) {
  .tablica-podskazka--shirokaya { display: flex; }
}

@media (max-width: 669px) {
  .tablica-podskazka { display: flex; }
}