/* ═══════════════════════════════════════════════════════════════════════
   Блоки, специфичные для сайта окон.
   Дизайн-система (токены, кнопки, .section, .usp-grid, .steps, .faq)
   живёт в style.css из proffremont — этот файл её только дополняет.
   ═══════════════════════════════════════════════════════════════════════ */

/* Скрытая ловушка для ботов в формах */
.is-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════ HERO: сетка 55/45, оффер в H1, факты строкой ═══════════ */
/* Маршрут взгляда по аудиту §10: заголовок → выгода (срок) → снятие страха
   (цена в договоре) → CTA → факты → визуал. */
.hero__inner--split {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 48px;
  align-items: center;
}

/* Оффер — визуально вторая строка H1, но отдельный тег (см. hero.php).
   Типографику повторяем вручную, потому что от <h1> она уже не наследуется.
   Главный визуальный вес отдан сроку, а не цене: это единственное реальное
   отличие от конкурентов. */
.hero__offer {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* Тон оффера задаётся раздельно по подложкам hero — в блоке фирменного
   оранжевого в конце файла (на тёмном фоне чистый accent тонет). */

.hero__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 4px;
  flex-wrap: wrap;
}
.hero__price strong {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero__price span { color: rgba(255, 255, 255, .7); font-size: 15px; }

.hero__actions { align-items: center; }
.hero__call {
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
}
.hero__call b { font-weight: 800; color: #fff; white-space: nowrap; }
.hero__call:hover b { text-decoration: underline; }

/* Правая половина тёмного режима: SVG-заглушка окна (пока нет фото) */
.hero__media { display: grid; justify-items: center; }
.hero__mock {
  width: min(100%, 400px);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .4));
  border-radius: 14px;
}

/* ═══════════ HERO: светлый режим с фото-фоном во всю ширину ═══════════
   Включается классом .hero--light, когда есть assets/img/hero.jpg.
   Кадр скомпонован под текст: левая часть — пустая светлая стена. Поверх —
   белая растяжка для гарантии контраста, текст перекрашен в тёмный. */
.hero--light { background: #efe9e2; color: var(--text); }

/* Дизайн-система притемняет фото под белый текст — здесь наоборот */
.hero--light .hero__bg img { filter: none; }
.hero--light .hero__bg picture {
  position: absolute;
  inset: 0;
}
.hero--light .hero__bg::after {
  background: linear-gradient(90deg,
    rgba(255, 251, 246, .92) 0%,
    rgba(255, 251, 246, .66) 42%,
    rgba(255, 251, 246, .04) 72%);
}

.hero--light .hero__badge {
  background: rgba(13, 27, 42, .08);
  color: var(--text);
  backdrop-filter: none;
}
.hero--light .hero__sub { color: var(--text-soft); }
.hero--light .hero__price span { color: var(--text-soft); }
.hero--light .hero__call { color: var(--text-soft); }
.hero--light .hero__call b { color: var(--text); }

/* Хлебные крошки в первом экране. База (.crumbs в style.css) рассчитана на
   тёмный hero — белый текст на затемнённой плашке; на светлом фото такая
   плашка выглядит инородной, поэтому здесь она светлая, а текст тёмный. */
.hero .crumbs { margin-bottom: 14px; }
.hero--light .crumbs ol {
  background: rgba(13, 27, 42, .07);
  backdrop-filter: none;
}
.hero--light .crumbs li { color: var(--text-soft); }
.hero--light .crumbs a { color: var(--text-soft); }
.hero--light .crumbs a:hover { color: var(--text); }
.hero--light .crumbs li[aria-current] { color: var(--text); }
.hero--light .crumbs li + li::before { color: rgba(13, 27, 42, .35); }

/* Цифры доверия внутри hero (флаг inline_stats) — ряд с разделителем сверху
   вместо белой полосы .truststrip. Крупные цифры акцентом, подписи приглушены.
   Дефолт под тёмный hero; для светлого — линия по бордеру и тёмные подписи. */
/* Один ряд из 4 цифр (короткие подписи short из meta). Колонки по содержимому,
   прижаты влево. На узком экране — 2×2. */
.hero__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  gap: 0 48px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero__stat strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.hero__stat span { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); }

.hero--light .hero__stats { border-top-color: var(--border); }
.hero--light .hero__stat span { color: var(--text-soft); }

@media (max-width: 560px) {
  .hero__stats {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
  }
  .hero__stat strong { font-size: 23px; }
  .hero__stat span { font-size: 12.5px; }
}

/* ═══════════ УСЛУГИ: плитка «от N ₽» ═══════════ */
/* Группы плиток (Окна и двери / Балконы / Ремонт / Дополнения):
   заголовок группы — h3, карточки внутри — h4 */
.svc-group + .svc-group { margin-top: 34px; }
.svc-group__title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.svc-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.svc-card__body h4 { font-size: 18px; margin-bottom: 6px; }
.svc-card__body p { font-size: 14px; color: var(--text-soft); line-height: 1.45; }
.svc-card__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.svc-card__price strong { font-size: 18px; font-weight: 800; color: var(--accent); }
.svc-card__arrow {
  font-size: 18px;
  color: var(--accent);
  transition: transform .2s;
}
.svc-card:hover .svc-card__arrow { transform: translateX(4px); }

/* ═══════════ УСЛУГИ: светлый вариант с фиксированным рядом ═══════════ */
/* Число колонок приходит из разметки (--cols = размер группы: 4 или 3).
   Карточки белые на тонированной подложке, поэтому у них не тень, а
   бордер — тень на f2f6fa читается грязным ореолом. */
.svcl-group + .svcl-group { margin-top: 40px; }
.svcl-group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 16px;
}
/* Хвост-линейка вместо подчёркивания: отделяет группы друг от друга,
   не утяжеляя сам заголовок */
.svcl-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.svcl-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 16px;
}
.svcl-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.svcl-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
/* h4 — карточки внутри группы (services-light, под h3 группы), h3 — блок
   соседних услуг (services-related, где шапка секции h2). Вид одинаковый,
   разный только уровень в структуре заголовков страницы. */
.svcl-card__body h4,
.svcl-card__body h3 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.svcl-card__body p { font-size: 14px; color: var(--text-soft); line-height: 1.45; }
.svcl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.svcl-card__price { font-size: 17px; font-weight: 800; color: var(--accent-ink); }
/* Кружок под стрелкой: на белой карточке одна голая стрелка теряется */
.svcl-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  transition: background .2s, color .2s, transform .2s;
}
.svcl-card:hover .svcl-card__arrow {
  background: var(--accent);
  color: #fff;
  transform: translateX(3px);
}
/* Ряд из четырёх на планшете становится уже 260 px — сходим к двум,
   а на телефоне к одной колонке независимо от размера группы */
@media (max-width: 1024px) {
  .svcl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svcl-grid { grid-template-columns: 1fr; }
}

/* ═══════════ УСЛУГИ: раскладка «бенто» ═══════════ */
/* Мозаика из плиток разного размера. Сетка 4 колонки, ряды равной высоты;
   крупная плитка занимает 2×2, широкая — 2 колонки, высокая — 2 ряда.
   Спаны расставлены так, что каждая группа (4/4/3/3) закрывает сетку 4×2
   без пустых ячеек. Размеры приходят из разметки (модификаторы карточек),
   auto-flow — обычный построчный, поэтому порядок в DOM = порядок в JSON. */
.svcb-group + .svcb-group { margin-top: 40px; }
.svcb-group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.svcb-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.svcb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(132px, 1fr);
  gap: 16px;
}
.svcb-card--feat { grid-column: span 2; grid-row: span 2; }
.svcb-card--wide { grid-column: span 2; }
.svcb-card--tall { grid-row: span 2; }

.svcb-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.svcb-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.svcb-card__body h4 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.svcb-card__body p { font-size: 14px; color: var(--text-soft); line-height: 1.45; }
.svcb-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.svcb-card__price { font-size: 17px; font-weight: 800; color: var(--accent-ink); }
.svcb-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  transition: background .2s, color .2s, transform .2s;
}
.svcb-card:hover .svcb-card__arrow {
  background: var(--accent);
  color: #fff;
  transform: translateX(3px);
}

/* Крупная плитка — акцент группы: тёплая подложка, кегль крупнее, цена
   ярче. Так глаз сразу цепляет главную услугу раздела. */
.svcb-card--feat {
  background:
    radial-gradient(120% 100% at 100% 0%, var(--accent-soft) 0%, rgba(255, 240, 235, 0) 60%),
    var(--surface);
  border-color: var(--accent-soft);
}
.svcb-card--feat .svcb-card__body h4 { font-size: 22px; }
.svcb-card--feat .svcb-card__body p { font-size: 15px; }
.svcb-card--feat .svcb-card__price { font-size: 22px; color: var(--accent); }
.svcb-card--feat .svcb-card__arrow {
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: #fff;
}
.svcb-card--feat:hover .svcb-card__arrow { background: var(--accent-hover); }

/* Планшет: спаны мешают на узком экране (крупная в 2 из 2 колонок — это
   уже весь ряд), поэтому сбрасываем всё к простой сетке 2×N. Крупная
   остаётся во всю ширину баннером. */
@media (max-width: 1024px) {
  .svcb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .svcb-card--feat { grid-column: 1 / -1; grid-row: auto; }
  .svcb-card--wide,
  .svcb-card--tall { grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
  .svcb-grid { grid-template-columns: 1fr; }
  .svcb-card--feat { grid-column: auto; }
}

/* ═══════════ ПРАЙС С ТАБАМИ ═══════════ */
.ptabs__nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ptabs__btn {
  padding: 11px 26px;
  border: none;
  border-radius: 100px;
  background: var(--bg-tint);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.ptabs__btn:hover { background: var(--accent-soft); }
.ptabs__btn.is-active { background: var(--accent); color: #fff; }

.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; }

.ptabs__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.ptabs__spec b { font-weight: 700; }

.ptabs__note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-soft);
}

.pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.pcard:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.pcard__img {
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bg-tint);
  min-height: 150px;
}
.pcard__img img { max-height: 130px; width: auto; }
.pcard__body { padding: 18px 20px 12px; flex: 1; }
.pcard__body h3 { font-size: 16px; margin-bottom: 8px; }
.pcard__specs { display: flex; flex-direction: column; gap: 3px; }
.pcard__specs li { font-size: 13.5px; color: var(--text-soft); }
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 18px;
  flex-wrap: wrap;
}
.pcard__price { display: flex; flex-direction: column; }
.pcard__price s { font-size: 13px; color: var(--text-soft); }
.pcard__price strong { font-size: 19px; font-weight: 800; }

/* ═══════════ СРАВНИТЕЛЬНАЯ ТАБЛИЦА ═══════════ */
/* Таблица шире мобильного вьюпорта — скроллится она, а не страница */
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cmp th,
.cmp td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.cmp thead th {
  background: var(--bg-dark);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 700;
}
.cmp tbody th { font-weight: 600; color: var(--text-soft); }
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: none; }

/* Свою колонку подсвечиваем — это точка сравнения */
.cmp thead th.cmp__us { background: var(--accent); }
.cmp td.cmp__us {
  background: var(--accent-soft);
  font-weight: 700;
}
.cmp__yes { color: #1d9e5f; font-weight: 800; }
.cmp__no  { color: #c2415a; font-weight: 800; }

/* ═══════════ ПРОФИЛИ ═══════════ */
.prof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.prof-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prof-card__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}
.prof-card h3 { margin-bottom: 8px; font-size: 19px; }
.prof-card p { font-size: 14px; color: var(--text-soft); line-height: 1.5; }

/* ═══════════ ПРАЙС РЕМОНТА ═══════════ */
.rprice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.rprice__title {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-size: 17px;
}
.rprice__list { display: flex; flex-direction: column; gap: 10px; }
.rprice__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
}
/* Точечный лидер между названием и ценой — прайс читается построчно */
.rprice__dots {
  flex: 1;
  border-bottom: 1px dotted var(--border);
  min-width: 12px;
}
.rprice__val { font-weight: 700; white-space: nowrap; }
.rprice__foot {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Плашка «черновик» над прайсом. Намеренно заметная и намеренно не в
   фирменном оранжевом: её задача — мозолить глаз, пока цены не согласованы,
   а не вписаться в дизайн. Уходит вместе с флагом prices_draft. */
.pdraft {
  display: flow-root;
  margin: 14px 0 4px;
  padding: 12px 16px;
  border-left: 4px solid #b7791f;
  border-radius: 8px;
  background: #fdf6e3;
  color: #5c4813;
  font-size: 14.5px;
  line-height: 1.5;
}
.pdraft b { color: #7a5a12; }

/* Служебная сводка прайсов /prices-review/ */
.prev { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; margin-top: 26px; }
.prev__card {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.prev__card--draft { border-color: #e3c778; background: #fffdf6; }
.prev__head { margin-bottom: 14px; }
.prev__head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 19px; }
.prev__head a:hover { color: var(--accent-ink); text-decoration: underline; }
.prev__meta { margin-top: 4px; font-size: 13px; color: var(--text-soft); }
.prev__badge {
  padding: 3px 10px;
  border-radius: 100px;
  background: #fdf6e3;
  color: #7a5a12;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.prev__badge--ok { background: #e7f6ec; color: #1c6b39; }
.prev__gtitle { margin: 16px 0 8px; font-size: 14px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.prev__list { display: flex; flex-direction: column; gap: 8px; }
.prev__list li { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; }
.prev__dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--border); }
.prev__list b { white-space: nowrap; }

/* ═══════════ ПОЛНЫЙ ПРАЙС РЕМОНТА: поиск + категории ═══════════ */
/* 47 позиций в 8 группах. Сплошной список такой длины не читается, поэтому
   сверху — панель фильтра, липнущая под шапкой сайта (её высоту site.js
   кладёт в --header-h: на мобильном шапка ниже, чем на десктопе). */
.fprice__tools {
  position: sticky;
  top: calc(var(--header-h, 122px) + 10px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(16, 32, 54, .08);
}

.fprice__search { position: relative; flex: 0 1 260px; min-width: 0; }
.fprice__search input {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 40px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg-tint);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}
.fprice__search input::-webkit-search-cancel-button { display: none; }
.fprice__search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fprice__ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}
.fprice__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.fprice__clear:hover { background: var(--accent); color: #fff; }

/* Чипы категорий. На узких экранах уезжают в горизонтальный скролл —
   перенос на 3 строки раздул бы липкую панель на пол-экрана. */
.fprice__chips {
  display: flex;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.fprice__chips::-webkit-scrollbar { display: none; }
.fprice__chip {
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.fprice__chip:hover { border-color: var(--accent); color: var(--accent); }
.fprice__chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Колонки, а не grid: группы от 1 до 12 позиций, auto-fit оставил бы
   дыры под короткими карточками. */
.fprice__grid { columns: 3; column-gap: 36px; }
.fprice__group {
  break-inside: avoid;
  margin-bottom: 30px;
}
.fprice__gtitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-size: 17px;
}
.fprice__gcount {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.fprice__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  font-size: 14.5px;
}
.fprice__row:hover { background: var(--accent-soft); }
/* display у строк и групп задан классом и перебил бы [hidden] из UA-стилей */
.fprice__row[hidden], .fprice__group[hidden], .fprice__clear[hidden] { display: none; }
.fprice__dots {
  flex: 1;
  min-width: 12px;
  border-bottom: 1px dotted var(--border);
}
.fprice__price { font-weight: 700; white-space: nowrap; }
.fprice__unit { font-weight: 600; font-size: 12.5px; color: var(--text-soft); }
.fprice mark { background: #ffef9c; color: inherit; border-radius: 3px; }

.fprice__empty {
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 15px;
}
.fprice__empty a { color: var(--accent); font-weight: 700; white-space: nowrap; }
.fprice__note {
  max-width: 780px;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
.fprice__foot { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .fprice__grid { columns: 2; column-gap: 28px; }
}
@media (max-width: 760px) {
  /* Поиск на всю ширину, чипы — строкой под ним */
  .fprice__tools { flex-wrap: wrap; gap: 10px; }
  .fprice__search { flex: 1 1 100%; }
  .fprice__chips { flex: 1 1 100%; }
  .fprice__grid { columns: 1; }
  .fprice__row { font-size: 14px; }
}

/* ═══════════ ЭТАПЫ: номер вместо иконки ═══════════ */
/* Все шаги в одну линию (по референсу detailing-services). auto-fit
   коллапсирует пустые треки — линия работает и с 4, и с 5, и с 6 шагами */
.steps--line { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 24px; }
.steps--line h3 { font-size: 16px; }
.steps--line p { font-size: 14px; }
@media (max-width: 1080px) {
  .steps--line { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .steps--line { grid-template-columns: 1fr; }
}

.step__n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

/* ═══════════ CTA С ФОРМОЙ ═══════════ */
.cta {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 400px);
  gap: 40px;
  align-items: start;
}
.cta__bullets { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cta__bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--text-inverse-soft);
}
.cta__bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.cta__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--surface);
  border-radius: var(--radius);
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.field input {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  transition: border-color .2s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
}
.field__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.4;
}
.field__consent input { margin-top: 2px; flex-shrink: 0; }
.field__consent a { color: var(--accent); text-decoration: underline; }

/* ═══════════ ПРЕИМУЩЕСТВА: правка контраста ═══════════ */
/* .usp-card в дизайн-системе залит --bg-tint — тем же цветом, что и фон
   .section--tinted. На тонированной подложке карточки становятся невидимыми,
   поэтому внутри неё делаем их белыми с рамкой. */
.section--tinted .usp-card {
  background: var(--surface);
  border: 1px solid var(--border);
}
.section--tinted .usp-card--dark {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
}

/* ═══════════ КВИЗ: дополнения к .quiz из дизайн-системы ═══════════ */
.quiz__estimate {
  margin: -6px 0 16px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
}
.quiz__estimate strong { font-size: 17px; font-weight: 800; }
.quiz__estimate small { color: var(--text-soft); font-size: 12.5px; }

/* ═══════════ ПРОМЕЖУТОЧНЫЙ CTA ═══════════ */
.cta-strip { padding: 36px 0; }
.cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-strip__text { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.cta-strip__text strong { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.cta-strip__text span { font-size: 14.5px; color: var(--text-inverse-soft); }
.cta-strip__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-strip__phone { font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.cta-strip__phone:hover { text-decoration: underline; }

/* ═══════════ НАШИ РАБОТЫ (каркас) ═══════════ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.work-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.work-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
}
.work-card figcaption strong { font-size: 15px; }
.work-card figcaption span { font-size: 13.5px; color: var(--text-soft); }
.works-foot { margin-top: 24px; text-align: center; }

/* ═══════════ ОТЗЫВЫ (каркас) ═══════════ */
/* Плашка рейтинга над отзывами: крупная цифра, звёзды, ссылка на источник.
   Ссылка обязательна — это она превращает цифру из обещания в проверяемый факт. */
.rating-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  width: fit-content;
  margin: 0 auto 28px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rating-badge__meta strong { display: block; font-size: 16px; }
.rating-badge__meta p { margin-top: 2px; font-size: 13.5px; color: var(--text-soft); }
.rating-badge__stars, .review-card__stars { display: flex; gap: 2px; font-size: 15px; color: var(--border); }
.rating-badge__stars--lg { font-size: 26px; gap: 3px; }
.rating-badge__stars .is-on, .review-card__stars .is-on { color: #ffb400; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.review-card__stars { margin-bottom: -6px; }
.review-card__text { font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.review-card__foot { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.review-card__foot strong { font-size: 14.5px; }
.review-card__foot span { color: var(--text-soft); }
.review-card__foot a { margin-top: 6px; color: var(--accent); font-weight: 600; }
.reviews-foot { display: flex; gap: 12px; margin-top: 24px; justify-content: center; flex-wrap: wrap; }

/* ═══════════ ЦИФРЫ ДОВЕРИЯ: плавающая полоса под hero ═══════════
   Белая карточка с тенью наезжает на нижний край фото hero — цифры видны
   сразу после оффера. Данные — trust_digits в meta.json. */
.truststrip {
  position: relative;
  z-index: 5;
  margin-top: -34px;
}
.trustbar--strip {
  margin: 0;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16, 32, 54, .12);
}
.trustbar--strip .trustbar__item { padding: 22px 28px; }
.trustbar--strip .trustbar__item strong { color: var(--accent); font-size: 27px; }

@media (max-width: 900px) {
  .truststrip { margin-top: -24px; }
  .trustbar--strip { grid-template-columns: 1fr 1fr; }
  .trustbar--strip .trustbar__item { padding: 16px 20px; }
  .trustbar--strip .trustbar__item:nth-child(odd) { border-left: none; }
  .trustbar--strip .trustbar__item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .trustbar--strip .trustbar__item strong { font-size: 22px; }
}

/* ═══════════ SEO-ТЕКСТ ═══════════ */
.seotext__block { margin-bottom: 30px; }
.seotext__block:last-child { margin-bottom: 0; }

/* Два столбца на главной: CSS-колонки, блок не рвётся между столбцами */
.seotext--cols .container { columns: 2; column-gap: 56px; }
.seotext--cols .seotext__block { break-inside: avoid; }
@media (max-width: 900px) {
  .seotext--cols .container { columns: 1; }
}

/* FAQ в два столбца: тот же приём — аккордеон раскрывается внутри
   своего столбца и не двигает соседний. База .faq — flex-колонка,
   для CSS-колонок возвращаем блочный поток */
.faq--cols { display: block; columns: 2; column-gap: 32px; }
.faq--cols .faq__item { break-inside: avoid; margin-bottom: 12px; }
@media (max-width: 900px) {
  .faq--cols { columns: 1; }
}

/* ═══════════ АКЦИИ: CTA-карточка в сетке .offers ═══════════ */
.offer--cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--text-inverse);
}
.offer--cta p { color: var(--text-inverse-soft); flex: 1; }
.offer--cta .btn { margin-top: 16px; }

/* ═══════════ СЛОВО ДИРЕКТОРА: режим без фото ═══════════ */
/* Пока клиент не прислал фото — текст на всю ширину, без пустой колонки */
.about--no-photo { grid-template-columns: 1fr; }
.about--no-photo .about__text { max-width: 860px; }
.seotext h2 { font-size: 21px; margin-bottom: 12px; }
.seotext p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
}
.seotext p:last-child { margin-bottom: 0; }
.seotext a { color: var(--accent); text-decoration: underline; }
.seotext a:hover { text-decoration: none; }

/* ═══════════ ВНУТРЕННИЕ СТРАНИЦЫ ═══════════ */
/* Интро в две колонки: рассказ слева, «что входит» — панель справа. Полный
   контейнер, поэтому левый край текста стоит вровень с ценами, полосой цифр и
   остальными блоками (раньше центрированная узкая колонка выбивалась вправо). */
.page-intro-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: start;
}
/* Без буллетов — одна колонка; ограничиваем длину строки для читаемости */
.page-intro-row--solo { display: block; }
.page-intro-row--solo .page-intro { max-width: 760px; }

.page-intro-aside {
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
  padding: 26px 28px;
}
.page-intro-aside h3 {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}
.page-intro-aside .page-bullets { margin-top: 0; }

/* Левая колонка липнет при прокрутке, правая (панель со списком) уезжает —
   приём с референса detailing-services.ru. Работает, пока правая колонка выше
   левой: панель со списком обычно длиннее текста, и текст «стоит», пока список
   прокручивается. Отступ top = высота липкой шапки (122px) + зазор. Только
   десктоп и только двухколоночный режим: в solo и на мобиле липнуть нечему. */
@media (min-width: 861px) {
  .page-intro-row:not(.page-intro-row--solo) .page-intro {
    position: sticky;
    top: 138px;
    align-self: start;
  }
}

@media (max-width: 860px) {
  .page-intro-row { grid-template-columns: 1fr; gap: 24px; }
}

.page-intro h1 { margin-bottom: 18px; }
.page-intro p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-soft);
}
.page-intro p:last-child { margin-bottom: 0; }
.page-intro p:first-of-type { font-size: 17px; color: var(--text); }

/* Список с галочками — и в интро, и внутри контентных блоков */
.page-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.page-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  font-weight: 600;
}
.page-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
}

.page-blocks { display: flex; flex-direction: column; gap: 44px; }
.page-block h2 { margin-bottom: 14px; }
.page-block p {
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.page-block p:last-child { margin-bottom: 0; }

/* ── Текстовый блок в две колонки: заголовок слева, текст справа ─────────
   Полный контейнер, левый край вровень с сеткой сайта. На широком экране
   заголовок липнет при прокрутке, пока проходит его текст (приём с интро
   и detailing-services.ru). Без заголовка блок остаётся обычной колонкой с
   ограниченной мерой строки. */
.page-block--split {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 56px;
  align-items: start;
}
.page-block--split .page-block__head h2 { margin: 0; }
.page-block--split .page-block__body p { font-size: 16px; line-height: 1.7; }
.page-block--split .page-block__body p:first-child { color: var(--text); }
.page-block:not(.page-block--split) .page-block__body { max-width: 68ch; }

@media (min-width: 861px) {
  .page-block--split .page-block__head { position: sticky; top: 138px; align-self: start; }
}
@media (max-width: 860px) {
  .page-block--split { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Блоки описания с фотографией (медиа-путь) ──────────────────────────
   Текст рядом с фото не должен тянуться во всю ширину: строка длиннее
   ~75 знаков читается тяжело. */
.page-blocks--media { gap: 56px; }

.page-block--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
/* Чередование стороны. Порядок меняем order'ом, а не сменой колонок в
   grid-template: так в DOM текст всегда идёт перед картинкой, и порядок
   чтения с клавиатуры и скринридером не зависит от чётности блока. */
.page-block--flip .page-block__text  { order: 2; }
.page-block--flip .page-block__media { order: 1; }

.page-block__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  /* Тень, а не рамка: кадры светлые, и на белой подложке без неё картинка
     сливается с фоном, а серый бордер спорит с бордерами карточек рядом. */
  box-shadow: var(--shadow);
}
.page-block__media img {
  width: 100%;
  /* Фиксированная пропорция вместо auto-высоты: у блоков разной длины текста
     картинки иначе выходят разного размера и колонка выглядит рваной.
     Значение — CLS: место под картинку занято до её загрузки. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Две колонки при узком экране дают картинку в ~200 px — бессмысленную.
   Порог совпадает с точкой, где контейнер перестаёт быть шире 720. */
@media (max-width: 780px) {
  .page-block--media { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .page-block--flip .page-block__text  { order: 0; }
  .page-block--flip .page-block__media { order: 0; }
  .page-block__media img { aspect-ratio: 16 / 10; }
}

/* Юридический текст (политика) — плотнее и мельче обычного контента */
.legal-text h1 { margin-bottom: 6px; }
.legal-text__date { margin-bottom: 24px; font-size: 13.5px; color: var(--text-soft); }
.legal-text h2 { margin: 26px 0 10px; font-size: 19px; }
.legal-text p { margin-bottom: 10px; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.legal-text ul { margin: 0 0 10px 20px; list-style: disc; }
.legal-text li { margin-bottom: 6px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.legal-text a { color: var(--accent); text-decoration: underline; }

/* ═══════════ КОНТАКТЫ ═══════════ */
.contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 28px;
}
.contacts__col { display: flex; flex-direction: column; gap: 24px; }
.contacts__item { display: flex; flex-direction: column; gap: 4px; }
.contacts__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.contacts__value { font-size: 17px; font-weight: 600; }
.contacts__value--lg { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
a.contacts__value:hover { color: var(--accent); }
.contacts__note { font-size: 14px; color: var(--text-soft); }
a.contacts__note { color: var(--accent); }
.contacts__msgrs { display: flex; gap: 10px; margin-top: 6px; }
.contacts__how {
  padding: 26px 28px;
  background: var(--bg-tint);
  border-radius: var(--radius);
}
.contacts__how h2 { font-size: 20px; margin-bottom: 12px; }
.contacts__how p { margin-bottom: 10px; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.contacts-map { margin-top: 34px; }
.contacts-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ═══════════ МОДАЛКА ЗАМЕРА ═══════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 16px;
}
/* display:grid выше перебивает UA-стиль [hidden] — возвращаем его явно,
   иначе модалка открыта с загрузки страницы */
.modal[hidden] { display: none; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 19, 32, .62);
  backdrop-filter: blur(2px);
}
.modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: modal-in .22s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal__box { animation: none; }
}
.modal__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--bg-tint);
  color: var(--text-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.modal__close:hover { background: var(--accent-soft); color: var(--accent); }
.modal__title { font-size: 20px; margin-bottom: 6px; padding-right: 36px; }
.modal__sub { font-size: 14px; color: var(--text-soft); margin-bottom: 18px; }
/* Форма в модалке уже лежит на белой карточке — убираем двойную подложку */
.modal__form { padding: 0; }
body.modal-open { overflow: hidden; }

/* ═══════════ СООБЩЕНИЯ ФОРМ ═══════════ */
.form-done { text-align: center; padding: 18px 0; }
.form-done strong { display: block; font-size: 18px; margin-bottom: 8px; }
.form-done p { font-size: 14.5px; color: var(--text-soft); }
.form-error {
  padding: 10px 14px;
  background: #fdecef;
  border-radius: var(--radius-sm);
  color: #c2415a;
  font-size: 13.5px;
  font-weight: 600;
}

/* ═══════════ ПЛАВАЮЩИЙ ВИДЖЕТ МЕССЕНДЖЕРОВ ═══════════
   Перенос со старого сайта (там #amw). Кнопка справа внизу, над ней
   карточка с MAX и Telegram. Заменил липкую панель «Позвонить | Написать |
   Замер» — разметка панели удалена из parts/footer.php. */
.cw {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cw[hidden] { display: none; }

.cw__fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 32, 54, .25);
  transition: transform .2s, background .2s;
}
.cw__fab:hover { transform: translateY(-2px); background: var(--accent-hover); }
.cw__fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.cw__label { white-space: nowrap; }

/* Пульс привлекает внимание к кнопке. Псевдоэлемент под кнопкой, чтобы
   тень расходилась, не задевая раскладку. */
.cw__fab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  animation: cw-pulse 2.6s ease-out infinite;
}
@keyframes cw-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(209, 68, 13, .5); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(209, 68, 13, 0); }
}

.cw__card {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 12px;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(16, 32, 54, .22);
  transform-origin: bottom right;
  animation: cw-in .2s ease;
}
.cw__card[hidden] { display: none; }
@keyframes cw-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.cw__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #9a9a9a;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.cw__close:hover { background: var(--accent); }

.cw__title {
  margin: 0 36px 6px 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}
.cw__sub {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-soft);
}
.cw__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .2s;
}
.cw__cta:hover { background: var(--accent-hover); }
.cw__cta + .cw__cta { margin-top: 10px; }
.cw__cta img { width: 24px; height: 24px; flex-shrink: 0; }

/* На телефоне кнопка сжимается в кружок: подпись съедала бы полэкрана */
@media (max-width: 1023px) {
  .cw { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .cw__fab { padding: 0; width: 58px; height: 58px; justify-content: center; }
  .cw__label { display: none; }
  .cw__fab svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cw__fab::before { animation: none; }
  .cw__card { animation: none; }
}

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width: 900px) {
  .cta { grid-template-columns: 1fr; gap: 28px; }
  .contacts { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  /* На планшете и телефоне визуал уходит под текст и ужимается —
     первый экран остаётся текстовым и лёгким */
  .hero__inner--split { grid-template-columns: 1fr; gap: 32px; }
  .hero__mock { width: min(70%, 320px); }
  /* Светлый режим: на узком экране окно из кадра оказывается за текстом —
     растяжку делаем сплошной вуалью по всей ширине */
  .hero--light .hero__bg::after { background: rgba(255, 251, 246, .84); }
}
@media (max-width: 600px) {
  .ptabs__btn { flex: 1; padding: 11px 16px; font-size: 14px; }
  .rprice { gap: 22px; }
  .cta__form { padding: 22px; }
}

/* ═══════════ ПОДВАЛ ═══════════
   footer.php свёрстан классами footer__top/__title/__list — дизайн-система
   proffremont знает только footer__inner/__col h4, поэтому стили колонок
   живут здесь. Фон и базовый цвет берутся из .footer в style.css. */
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1.15fr 1.05fr 0.85fr 1.15fr;
  gap: 40px 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer__col { min-width: 0; }
.footer__col--brand .logo { margin-bottom: 16px; }
.footer .logo__text { color: var(--text-inverse); }
.footer .logo__text small { color: var(--text-inverse-soft); }

.footer__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-inverse-soft);
}

.footer__title {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-inverse);
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}
.footer__list a { color: var(--text-inverse-soft); transition: color .2s; }
.footer__list a:hover { color: var(--text-inverse); }

.footer__list--contacts { gap: 10px; color: var(--text-inverse-soft); }
.footer__phone {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-inverse) !important;
  letter-spacing: -0.01em;
}
.footer__msgrs { display: flex; gap: 10px; margin-top: 16px; }

.footer__bottom { padding-top: 26px; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 13.5px;
  color: var(--text-inverse-soft);
}
.footer__links { margin-top: 10px; font-size: 13.5px; }
.footer__links a {
  color: var(--text-inverse-soft);
  text-decoration: underline;
  transition: color .2s;
}
.footer__links a:hover { color: var(--text-inverse); }
.footer__disclaimer {
  margin-top: 14px;
  max-width: 720px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(157, 176, 192, .75);
}

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .footer { padding: 44px 0 28px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ═══════════ НАШИ РАБОТЫ: карточки с деталями и заглушками ═══════════
   Пока клиент не прислал фото — карточка рендерит стилизованную заглушку
   (схема окна + подпись «фото готовится»). Файл появился → та же карточка
   показывает фото без правки вёрстки. */
.work-card { display: flex; flex-direction: column; transition: border-color .2s, transform .25s, box-shadow .25s; }
.work-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }

.work-card__media { position: relative; }
.work-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.work-card__ph {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 80% 0%, #eaf2fc 0%, rgba(234, 242, 252, 0) 60%),
    linear-gradient(160deg, #f4f8fd 0%, #e8eef7 100%);
}
.work-card__ph svg { width: 84px; height: 84px; opacity: .5; }
.work-card__ph-note {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
}

.work-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(13, 27, 42, .78);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.work-card figcaption { flex: 1; padding: 16px 18px 18px; }
.work-card__specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.work-card__specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-soft);
}
.work-card__specs li b { font-weight: 600; color: var(--text); text-align: right; }

/* Фильтры каталога работ (страница /nashi-rabotyi/) */
.works-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.works-filter__btn {
  padding: 9px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.works-filter__btn:hover { border-color: var(--accent); color: var(--accent); }
.works-filter__btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.work-card.is-filtered { display: none; }

/* ═══════════ ВИДЕО С ОБЪЕКТОВ: карточки-заглушки под будущие ролики ═══════
   src в data пустой → карточка со стилизованным постером и пометкой
   «снимаем». Появится ссылка на ролик — карточка станет кликабельной. */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .2s, transform .25s, box-shadow .25s;
}
.video-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }

.video-card__poster {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 120% at 20% 0%, rgba(26, 107, 224, .16) 0%, rgba(26, 107, 224, 0) 55%),
    linear-gradient(160deg, #10233a 0%, #0d1b2a 100%);
}
.video-card__play {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(3px);
  border: 1.5px solid rgba(255, 255, 255, .35);
  transition: transform .25s, background .25s;
}
.video-card:hover .video-card__play { transform: scale(1.08); background: var(--accent); border-color: var(--accent); }
.video-card__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.video-card__soon {
  position: absolute;
  top: 12px; right: 12px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .85);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.video-card__body { padding: 16px 18px 18px; }
.video-card__body strong { display: block; font-size: 15px; margin-bottom: 4px; }
.video-card__body span { font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }

/* ═══════════ АНИМАЦИИ ПОЯВЛЕНИЯ ═══════════
   Классы вешает site.js (IntersectionObserver): элементы прячутся только
   при работающем JS — без него и для поисковых ботов всё видно сразу.
   Стаггер: задержка через --anim-i, проставляется скриптом по индексу. */
.anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--anim-i, 0) * 70ms);
  will-change: opacity, transform;
}
.anim.is-inview { opacity: 1; transform: none; }

/* Первый экран: мягкий каскад при загрузке */
.hero__content > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-in .7s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .15s; }
.hero__content > *:nth-child(3) { animation-delay: .25s; }
.hero__content > *:nth-child(4) { animation-delay: .33s; }
.hero__content > *:nth-child(5) { animation-delay: .41s; }
.hero__content > *:nth-child(6) { animation-delay: .49s; }
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* Плавный зум фото hero при загрузке — «дорогой» кинематографичный вход */
.hero--light .hero__bg img {
  animation: hero-zoom 1.6s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1.045); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; transition: none; }
  .hero__content > * { opacity: 1; transform: none; animation: none; }
  .hero--light .hero__bg img { animation: none; }
}
/* Служебный режим скриншот-тестов (?noanim=1, класс вешает site.js) */
html.noanim .anim,
html.noanim .hero__content > * { opacity: 1; transform: none; transition: none; animation: none; }
html.noanim .hero--light .hero__bg img { animation: none; }

/* ═══════════ КОМПАКТНАЯ ВЫПАДАШКА МЕНЮ ═══════════
   Дизайн-система рисует двухпанельный каталог 640px: правые 350px
   зарезервированы под подуровни .fly. У нашего меню подуровней нет —
   правая половина пустовала. Сужаем панель до контента. */
@media (min-width: 1081px) {
  .dd {
    width: max-content;
    min-width: 264px;
    min-height: 0;
    padding: 8px;
    border-radius: 0 0 14px 14px;
    animation: dd-in .16s ease;
  }
  .dd > li > a {
    padding: 10px 16px;
    border-radius: 9px;
    transition: background .15s, color .15s;
  }
  .dd > li > a:hover { background: var(--accent-soft); }
}
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dd { animation: none; }
}
html.noanim .dd { animation: none; }

/* ═══════════ ВИЗУАЛЬНЫЙ КАЛЬКУЛЯТОР ОКНА ═══════════
   Перенос [win-calc] со старого сайта (секция parts/sections/win-calc.php).
   Иконки конструкций — спрайт со старого сайта assets/img/calc/
   type-selector.png: колонки — группы (1/2/3-створчатое, балконный блок),
   строки — варианты открывания. Позиции ниже 1:1 из scss старой темы. */

.wcalc { max-width: 1080px; margin: 0 auto; }

.wcalc__top {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

/* Комплектации */
.wcalc__tariffs { display: grid; gap: 10px; align-content: center; }
.wcalc__tariff {
  display: block;
  padding: 12px 16px;
  text-align: left;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wcalc__tariff:hover { border-color: var(--accent); }
.wcalc__tariff.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.wcalc__tariff-title { display: block; font-weight: 800; }
.wcalc__tariff.is-active .wcalc__tariff-title { color: var(--accent); }
.wcalc__tariff-price { display: block; font-size: 14px; color: var(--text-soft); }

/* Превью выбранной конструкции */
.wcalc__preview { text-align: center; }
.wcalc__preview img { max-width: 100%; height: auto; }

/* Выбор конструкции — как на старом сайте: группы в один ряд,
   варианты открывания раскрываются столбиком под выбранной группой */
.wcalc__groups { display: flex; gap: 6px; align-items: flex-start; }
.wcalc__gcol { display: flex; flex-direction: column; align-items: center; }
.wcalc__variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  margin-top: 14px;
}
.wcalc__variants[hidden] { display: none; }
/* Стрелка-связка от активной группы к её вариантам */
.wcalc__variants::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--accent);
}
.wcalc__group,
.wcalc__variant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.wcalc__group:hover,
.wcalc__variant:hover { border-color: var(--accent); }
.wcalc__group.is-active,
.wcalc__variant.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Спрайт иконок конструкций */
.wcalc__ico {
  display: block;
  background: url('/assets/img/calc/type-selector.png') no-repeat;
}
.wcalc__ico--type-1   { width: 28px; height: 44px; background-position: 0 0; }
.wcalc__ico--type-1-1 { width: 28px; height: 44px; background-position: 0 -45px; }
.wcalc__ico--type-1-2 { width: 28px; height: 44px; background-position: 0 -90px; }
.wcalc__ico--type-1-3 { width: 28px; height: 44px; background-position: 0 -135px; }
.wcalc__ico--type-2   { width: 47px; height: 44px; background-position: -29px 0; }
.wcalc__ico--type-2-1 { width: 47px; height: 44px; background-position: -29px -45px; }
.wcalc__ico--type-2-2 { width: 47px; height: 44px; background-position: -29px -90px; }
.wcalc__ico--type-3   { width: 57px; height: 44px; background-position: -77px 0; }
.wcalc__ico--type-3-1 { width: 57px; height: 44px; background-position: -77px -45px; }
.wcalc__ico--type-3-2 { width: 57px; height: 44px; background-position: -77px -90px; }
.wcalc__ico--type-3-3 { width: 57px; height: 44px; background-position: -77px -135px; }
.wcalc__ico--type-4   { width: 56px; height: 44px; background-position: -135px 0; }
.wcalc__ico--type-4-1 { width: 56px; height: 44px; background-position: -135px -45px; }
.wcalc__ico--type-4-2 { width: 56px; height: 44px; background-position: -135px -90px; }

/* Нижняя панель: шкалы + допы + итог */
.wcalc__bottom {
  display: grid;
  grid-template-columns: 1fr 220px 260px;
  gap: 28px;
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.wcalc__gauges { display: grid; gap: 14px; align-content: center; }
.wcalc__gauge { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.wcalc__gauge-label { font-size: 14px; color: var(--text-soft); }
.wcalc__gauge-track {
  display: block;
  height: 12px;
  background: var(--bg-tint);
  border-radius: 6px;
  overflow: hidden;
}
.wcalc__gauge-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width .3s ease;
}
html.noanim .wcalc__gauge-fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .wcalc__gauge-fill { transition: none; }
}

.wcalc__options { align-self: center; }
.wcalc__options-title { font-weight: 800; margin-bottom: 10px; }
.wcalc__opt {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 15px;
  cursor: pointer;
}
.wcalc__opt input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.wcalc__total {
  align-self: center;
  padding: 20px;
  text-align: center;
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
}
.wcalc__total-title { font-weight: 800; margin-bottom: 6px; }
.wcalc__sum { margin-top: 8px; line-height: 1.3; }
.wcalc__sum strong { display: block; font-size: 24px; font-weight: 800; }
.wcalc__sum span { font-size: 13px; color: var(--text-soft); }
.wcalc__sum--full strong { color: var(--accent); }
.wcalc__total .btn { width: 100%; margin-top: 14px; }
.wcalc__note { margin-top: 10px; font-size: 12px; color: var(--text-soft); }

/* Планшет: типы под превью, итоговая панель в столбец */
@media (max-width: 1080px) {
  .wcalc__top { grid-template-columns: 200px 1fr; }
  .wcalc__types { grid-column: 1 / -1; }
  .wcalc__groups { justify-content: center; }
  .wcalc__bottom { grid-template-columns: 1fr 1fr; }
  .wcalc__total { grid-column: 1 / -1; }
}

/* Мобильный: всё в столбец */
@media (max-width: 700px) {
  .wcalc__top { grid-template-columns: 1fr; }
  .wcalc__tariffs { grid-template-columns: 1fr; }
  /* Порядок как у старого сайта: тарифы → выбор конструкции → фото */
  .wcalc__preview { order: 1; }
  .wcalc__bottom { grid-template-columns: 1fr; padding: 20px; }
  .wcalc__gauge { grid-template-columns: 130px 1fr; }
}

/* ═══════════ ПРЕИМУЩЕСТВА: компактные карточки (вариант B) ═══════════
   Иконка в синей плашке слева, высота по контенту — прежние .usp-card
   дизайн-системы растягивались и оставляли пустой низ. */
.uspc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.uspc-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s, transform .25s, box-shadow .25s;
}
.uspc-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.uspc-card__icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 12px;
}
.uspc-card__icon svg { width: 24px; height: 24px; }
.uspc-card__body h3 { font-size: 16.5px; margin-bottom: 4px; }
.uspc-card__body p { font-size: 14px; color: var(--text-soft); line-height: 1.5; }

/* На тонированной секции карточки остаются белыми — контраст сохраняется */
@media (max-width: 1080px) {
  .uspc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .uspc-grid { grid-template-columns: 1fr; }
}

/* ═══════════ ЛОГОТИП ═══════════
   Фирменный знак со старого сайта вместо синего квадрата-заглушки
   дизайн-системы (.logo__mark в style.css больше не используется).
   Логотип «Гранд Окно» — SVG (assets/img/logo.svg), исходник
   и превью в logo/. Цвета: тёмно-синий #22344d и акцент сайта. */
.logo__img {
  display: block;
  width: auto;
  height: 48px;
}
.logo__tag {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-soft);
  max-width: 120px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.logo--footer .logo__tag {
  color: var(--text-inverse-soft);
  border-left-color: rgba(255, 255, 255, .18);
}

/* На узких экранах подпись съедает место под телефон и бургер — прячем,
   логотип остаётся читаемым сам по себе */
@media (max-width: 1080px) {
  .logo__img { height: 40px; }
  .logo__tag { display: none; }
}
@media (max-width: 700px) {
  .logo__img { height: 34px; }
}
/* В подвале места хватает всегда */
.logo--footer .logo__img { height: 44px; }
@media (max-width: 1080px) {
  .logo--footer .logo__tag { display: block; }
}

/* ═══════════ УСЛУГИ: вариант плиток с фото ═══════════ */
/* Карточка — ссылка целиком. Фото абсолютом на фоне, поверх градиент:
   без него белый текст ложится на непредсказуемый кадр (у нас в hero есть
   и светлое небо, и тёмные интерьеры) и местами пропадает. */
.svcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
/* Группа из 4 — одной строкой. Карточки уже (~270 px на контейнере 1200),
   поэтому и компактнее: ниже ростом и с меньшим заголовком. */
.svcp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svcp-grid--4 .svcp-card { min-height: 260px; padding: 22px; gap: 28px; }
.svcp-grid--4 .svcp-card__top h4 { font-size: 19px; }
.svcp-grid--4 .svcp-card__btn { padding: 10px 18px; font-size: 13px; }

/* Четыре колонки перестают быть читаемыми раньше, чем сетка auto-fill:
   на 1100 карточка ужимается до ~250 и заголовок ломается на три строки. */
@media (max-width: 1100px) {
  .svcp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svcp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 300px;
  padding: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  isolation: isolate;      /* чтобы z-index слоёв не протекал наружу */
  transition: transform .2s ease, box-shadow .2s ease;
}
.svcp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.svcp-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.svcp-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадры сняты под hero: слева пустая светлая стена, объект справа
     (см. .hero--light в этом же файле). По центру карточка показывала бы
     голую стену, поэтому кадрируем по правому краю. */
  object-position: right center;
  /* Затемняем САМО фото, а не вуалируем его скримом сверху. Кадры светлые
     и низкоконтрастные (белые интерьеры, засвеченные окна): полупрозрачная
     плашка поверх них даёт ровный серый прямоугольник, а brightness
     сохраняет фактуру. saturate компенсирует вымывание цвета. */
  filter: brightness(.62) saturate(1.2);
}
/* Поверх затемнённого фото — лёгкие скримы строго под текстом. Основную
   работу делает brightness на самой картинке, здесь только добор контраста
   в полосах с заголовком и ценой. */
.svcp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 27, 42, .55) 0%, rgba(13, 27, 42, 0) 40%),
    linear-gradient(0deg,   rgba(13, 27, 42, .65) 0%, rgba(13, 27, 42, 0) 40%);
}
/* Без фото — фирменная градиентная подложка вместо серого прямоугольника */
.svcp-card--nophoto::after {
  background: linear-gradient(160deg, #17304d 0%, var(--bg-dark) 100%);
}

.svcp-card__top h4 { font-size: 21px; line-height: 1.2; }
.svcp-card__top p {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
}

.svcp-card__bottom { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.svcp-card__price { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

/* Псевдокнопка: карточка уже <a>, поэтому это <span> со стилем .btn--ghost
   на тёмном. Заливка полупрозрачная, а не пустая рамка, — на пёстром фото
   контур читается хуже текста внутри него. */
.svcp-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
  backdrop-filter: blur(3px);
  font-size: 14px;
  font-weight: 700;
  transition: background .2s ease, box-shadow .2s ease;
}
.svcp-card:hover .svcp-card__btn {
  background: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

@media (max-width: 560px) {
  .svcp-grid { grid-template-columns: minmax(0, 1fr); }
  .svcp-card { min-height: 260px; gap: 28px; }
}

/* ═══════════ АКЦИИ: вариант с фото («бенто») ═══════════ */
/* Раскладка неравная намеренно — см. комментарий в parts/sections/promos-photo.php.
   Слева карточка в полную высоту, справа стопка из остальных акций и CTA;
   высоты правой колонки задаёт левая, поэтому она grid с 1fr-строками. */
.promo-bento {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}
.promo-bento__side {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 20px;
}

.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  min-height: 240px;
  padding: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
/* Крупная карточка: воздуха больше, заголовок крупнее. Минимальную высоту
   держит она — правая колонка подстраивается. */
.promo-card--lead { min-height: 480px; padding: 34px; }
.promo-card--lead .promo-card__body h3 { font-size: clamp(24px, 2.4vw, 30px); }
.promo-card--lead .promo-card__body p { font-size: 16px; max-width: 34ch; }

.promo-card__bg { position: absolute; inset: 0; z-index: -2; }
.promo-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Как в svcp-card: гасим яркость самого кадра, а не кладём серую плашку
     сверху — иначе светлые интерьеры превращаются в ровный прямоугольник. */
  filter: brightness(.6) saturate(1.15);
}
/* Добор контраста строго под текстом внизу карточки */
.promo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(13, 27, 42, .78) 0%, rgba(13, 27, 42, 0) 62%);
}
.promo-card--nophoto::after {
  background: linear-gradient(160deg, #17304d 0%, var(--bg-dark) 100%);
}

/* Метка акции — в противоположном от текста углу, чтобы не спорить с ним */
.promo-card__tag {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.promo-card__body h3 { font-size: 21px; line-height: 1.2; }
.promo-card__body p {
  margin-top: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .85);
}

/* Ссылка-стрелка вместо кнопки (приём с demo27): на фото сплошная плашка
   утяжеляет карточку, а подчёркнутый текст со стрелкой читается и не крадёт
   внимание у основного CTA справа. */
.promo-card__btn {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  transition: border-color .2s ease;
}
.promo-card__btn::after { content: ' →'; }
.promo-card__btn:hover { border-bottom-color: #fff; }

/* CTA: плоская акцентная заливка без фото — отличается от акций и читается
   как действие, а не как третье предложение. */
.promo-card--cta { justify-content: center; background: var(--accent); }
.promo-card--cta::after { content: none; }
.promo-card--cta .promo-card__body p { color: rgba(255, 255, 255, .9); }
.promo-card--cta .btn { margin-top: 18px; background: #fff; color: var(--accent); }
.promo-card--cta .btn:hover { background: rgba(255, 255, 255, .88); }

/* Две колонки держатся, пока крупная карточка шире ~420: ниже заголовок в
   ней ломается на четыре строки и преимущество размера пропадает. */
@media (max-width: 860px) {
  .promo-bento { grid-template-columns: minmax(0, 1fr); }
  .promo-card--lead { min-height: 320px; padding: 26px; }
}

/* ═══════════ АКЦИИ: вариант с крупными цифрами ═══════════ */
/* Приём с референсов: объект (цифра или вырезка) лежит на плоской заливке и
   ЧАСТИЧНО ОБРЕЗАН краем карточки. Обрезку даёт overflow: hidden на карточке,
   а вылет — отрицательные координаты объекта. Фона-фото здесь нет намеренно:
   обрезанный фрагмент сцены читается как брак, а не как приём. */
.promo-fig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.promo-fig {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 26px;
  border-radius: var(--radius);
  overflow: hidden;          /* именно он и режет объект по краю карточки */
  background: var(--bg-dark);
  color: #fff;
}
.promo-fig--brand { background: var(--accent); }

/* ── Объект-цифра ──────────────────────────────────────────────────────── */
/* Выходит за правый и верхний край: right/top отрицательные. Цифра прижата
   к базовой линии юнита, поэтому flex с align-items: baseline. */
/* Раскладка как на референсе: единица измерения сверху мелко и ЦЕЛИКОМ
   видна, под ней — гигантская цифра, уходящая за правый край карточки.
   z-index строго неотрицательный: при z-index:-1 элемент уходит в
   отрицательный слой стекинг-контекста, и поведение отсечения становится
   зависимым от isolation у родителя. Слои задаём явно: объект 0, текст 1. */
.promo-fig__num {
  position: absolute;
  top: 14px;
  right: -18px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: .78;
  font-weight: 800;
  letter-spacing: -0.04em;
  /* Полупрозрачный белый: цифра работает фоном, а не вторым заголовком.
     На brand-заливке и на тёмной читается одинаково. */
  color: rgba(255, 255, 255, .26);
  user-select: none;
  pointer-events: none;
}
.promo-fig__val { font-size: clamp(96px, 11vw, 148px); }
/* Кегль убывает с длиной числа — ставится из PHP по mb_strlen(figure) */
.promo-fig__num--md .promo-fig__val { font-size: clamp(72px, 8vw, 108px); }
.promo-fig__num--sm .promo-fig__val { font-size: clamp(54px, 6vw, 82px); }

/* Юнит целиком в видимой зоне: отступ справа компенсирует вылет цифры,
   иначе длинное слово («месяца») резалось бы посередине — это читается
   как обрезка текста, а не как приём. */
.promo-fig__unit {
  margin-right: 26px;
  margin-bottom: 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* ── Объект-вырезка (когда появится PNG с прозрачным фоном) ────────────── */
.promo-fig__cut {
  position: absolute;
  right: -10px;
  bottom: 0;
  z-index: 0;
  width: auto;
  height: 72%;
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}

/* ── Текст ─────────────────────────────────────────────────────────────── */
.promo-fig__body { position: relative; z-index: 1; }
.promo-fig__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.promo-fig__body h3 { font-size: 20px; line-height: 1.2; }
.promo-fig__body p {
  margin-top: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .85);
}

.promo-fig__btn {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  transition: border-color .2s ease;
}
.promo-fig__btn::after { content: ' →'; }
.promo-fig__btn:hover { border-bottom-color: #fff; }

@media (max-width: 980px) {
  .promo-fig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .promo-fig-grid { grid-template-columns: minmax(0, 1fr); }
  .promo-fig { min-height: 220px; padding: 22px; }
}

/* ═══════════ АКЦИИ: светлый вариант с крупными цифрами ═══════════ */
/* Инверсия promos-figures: белые карточки на тонированной подложке, первая —
   акцентной заливкой. Цифра на белом — бледный акцент, на акцентной
   карточке — белый. */
.promo-lt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.promo-lt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.promo-lt--brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Цифра ─────────────────────────────────────────────────────────────── */
/* Раскладка как в тёмном варианте: юнит сверху и целиком видим, цифра под ним
   уходит за правый край. z-index неотрицательный — иначе элемент уходит в
   отрицательный слой и перестаёт отсекаться overflow: hidden. */
.promo-lt__num {
  position: absolute;
  top: 14px;
  right: -18px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: .78;
  font-weight: 800;
  letter-spacing: -0.04em;
  /* Цвет — сам акцент с низкой непрозрачностью: так оттенок едет вместе с
     палитрой (синяя/оранжевая) и не требует второго набора значений. */
  color: var(--accent);
  opacity: .14;
  user-select: none;
  pointer-events: none;
}
/* На акцентной заливке бледный акцент слился бы с фоном — переводим в белый */
.promo-lt--brand .promo-lt__num { color: #fff; opacity: .26; }

.promo-lt__val { font-size: clamp(96px, 11vw, 148px); }
.promo-lt__num--md .promo-lt__val { font-size: clamp(72px, 8vw, 108px); }
.promo-lt__num--sm .promo-lt__val { font-size: clamp(54px, 6vw, 82px); }

/* Отступ справа компенсирует вылет цифры: длинный юнит («месяца») иначе
   резался бы посередине слова */
.promo-lt__unit {
  margin-right: 26px;
  margin-bottom: 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* ── Текст ─────────────────────────────────────────────────────────────── */
.promo-lt__body { position: relative; z-index: 1; }
.promo-lt__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
  font-size: 12px;
  font-weight: 700;
}
.promo-lt--brand .promo-lt__tag {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.promo-lt__body h3 { font-size: 20px; line-height: 1.2; max-width: 19ch; }
.promo-lt__body p {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--text-soft);
}
.promo-lt--brand .promo-lt__body p { color: rgba(255, 255, 255, .9); }

.promo-lt__btn {
  align-self: flex-start;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink, var(--accent));
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border-bottom: 2px solid currentColor;
  transition: opacity .2s ease;
}
.promo-lt__btn::after { content: ' →'; }
.promo-lt__btn:hover { opacity: .7; }
.promo-lt--brand .promo-lt__btn { color: #fff; }

@media (max-width: 980px) {
  .promo-lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .promo-lt-grid { grid-template-columns: minmax(0, 1fr); }
  .promo-lt { min-height: 220px; padding: 22px; }
}

/* ═══════════ АКЦИИ: вариант с кадром-сценой ═══════════ */
/* Кадр снят под карточку: тёмный интерьер, объект справа, левая треть пустая.
   Поэтому здесь НЕТ агрессивного затемнения — фото остаётся видно целиком,
   а градиент слева только страхует читаемость текста. */
.promo-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.promo-scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Высота как у promo-fig — блоки стоят на витрине рядом и должны
     сравниваться по одному росту, иначе разница читается как «этот вариант
     крупнее», а не как разница подачи картинки. */
  min-height: 260px;
  padding: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-dark);
  color: #fff;
  isolation: isolate;
}

.promo-scene__bg { position: absolute; inset: 0; z-index: 0; }
.promo-scene__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Объект в кадре у правого края — держим его в видимой зоне при любой
     ширине карточки, обрезая пустое поле слева, а не балкон. */
  object-position: right center;
}

/* Страховочный градиент слева-вниз. Мягкий: негативное пространство уже
   есть в самом кадре, задача — только гарантировать контраст, если карточка
   ужмётся и текст наедет на освещённую часть. */
.promo-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 16, 24, .92) 0%, rgba(10, 16, 24, .55) 45%, rgba(10, 16, 24, .15) 100%),
    linear-gradient(0deg,  rgba(10, 16, 24, .75) 0%, rgba(10, 16, 24, 0) 55%);
}
/* Без кадра — фирменная заливка: сразу видно, каким акциям ещё нужен свой снимок */
.promo-scene--nophoto::after {
  background: linear-gradient(160deg, #17304d 0%, var(--bg-dark) 100%);
}
/* Акцентная карточка: заливка брендом, градиента-страховки нет — под цифрой
   он только грязнил бы чистый цвет. */
.promo-scene--brand { background: var(--accent); }
.promo-scene--brand.promo-scene--nophoto::after { background: none; }

/* Цифра-подложка (разметка переиспользована из promos-figures) лежит между
   фоном карточки и текстом */
.promo-scene .promo-fig__num { z-index: 1; }

/* Текст по левому краю — под пустое поле кадра */
.promo-scene__body { position: relative; z-index: 2; max-width: 30ch; }
/* Заголовок ломаем раньше строки текста: так он читается «шапкой» в две
   короткие строки, а не тянется во всю ширину карточки вровень с описанием. */
.promo-scene__body h3 { max-width: 19ch; }
.promo-scene__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(3px);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.promo-scene__body h3 { font-size: 20px; line-height: 1.2; }
.promo-scene__body p {
  margin-top: 10px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .85);
}

.promo-scene__btn {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  transition: border-color .2s ease;
}
.promo-scene__btn::after { content: ' →'; }
.promo-scene__btn:hover { border-bottom-color: #fff; }

@media (max-width: 980px) {
  .promo-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .promo-scene-grid { grid-template-columns: minmax(0, 1fr); }
  .promo-scene { min-height: 220px; padding: 22px; }
}

/* ═══════════ /blocks/: витрина снятых блоков (служебная страница) ═══════ */
.blocks-intro { margin-top: 12px; max-width: 62ch; color: var(--text-soft); }
.blocks-note {
  max-width: 62ch;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--bg-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.blocks-note p { margin-top: 8px; color: var(--text-soft); }
.blocks-note__meta { font-size: 13px; font-weight: 700; }

/* ═══════════ ОБРАТНЫЙ ЗВОНОК: тёмная карточка + фото-вырезка ═══════════ */
/* Приём с alex-dein.ru: портрет менеджера выходит за верхнюю границу
   карточки. Механика — фото абсолютом, прижато к низу, высота больше
   карточки на --callback-out; карточка держит overflow: visible, а
   вертикальные отступы секции увеличены, чтобы «вылет» не наезжал на
   предыдущий блок. */
.callback {
  --callback-out: 56px;   /* насколько фото выступает над карточкой */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  padding: 36px 40px;
  /* Фото шире своей колонки и торчит вправо. clip-path ниже прячет его
     визуально, но НЕ убирает из расчёта прокрутки — на ~1080px это давало
     горизонтальный скролл всей страницы. overflow-x: clip режет по-настоящему
     и, в отличие от hidden, не трогает вертикаль: вылет головы над карточкой
     остаётся видимым. */
  overflow-x: clip;
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: var(--radius);
  /* Верхний отступ секции добираем «вылетом», иначе голова упрётся в блок выше */
  margin-top: var(--callback-out);
}
.callback--no-photo {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

/* 22ch держит заголовок в две строки — карточка не растёт, а вслед за ней
   не разрастается и вырезка (её высота считается от высоты карточки) */
.callback__title { max-width: 22ch; }
.callback__sub {
  margin-top: 12px;
  max-width: 52ch;
  color: var(--text-inverse-soft);
}

/* Форма в строку: имя, телефон, время — по трети, кнопка на всю ширину.
   Ниже 1180px строка ломается и поля встают в столбец. */
.callback__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.callback__form .field__label { color: var(--text-inverse-soft); }
.callback__form select {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  appearance: none;
  /* Стрелка — инлайновый svg, чтобы не тянуть файл ради 12×8 px */
  background-image: 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.5 6 6.5l5-5' stroke='%235f6e7e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.callback__form select:focus { outline: none; border-color: var(--accent); }

.callback__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.callback__consent {
  grid-column: 1 / -1;
  color: var(--text-inverse-soft);
}
.callback__consent a { color: #fff; }

.callback__alt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-inverse-soft);
}
.callback__alt a {
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Фото ──────────────────────────────────────────────────────────────── */
/* Фото масштабируется ПО ВЫСОТЕ (height: 100%), а не по ширине: только так
   вырезка гарантированно достаёт до верхнего края карточки и вылезает над
   ним при любой высоте блока. Кадр 626×742 при этом становится шире колонки
   и обрезается по бокам — как на референсе, где плечи уходят за край.

   Обрезать нужно только слева/справа/снизу, верх должен остаться открытым,
   поэтому не overflow: hidden (он режет по всем осям), а clip-path с
   отрицательным верхом — он расширяет область отсечения вверх. */
.callback__photo {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 372px;
  height: calc(100% + var(--callback-out));
  clip-path: inset(calc(var(--callback-out) * -1 - 40px) 0 0 0);
  pointer-events: none;
}
.callback__photo img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  /* Потолок роста. Высота вырезки завязана на высоту карточки, а та зависит
     от длины заголовка и ширины колонки: в узком контейнере карточка
     вырастает до 630px и портрет превращается в гигантский крупный план.
     С потолком фото просто перестаёт доставать до верхнего края — вылета
     нет, но блок остаётся вменяемым. */
  max-height: 520px;
  /* Тень «прижимает» вырезку к карточке, иначе она висит наклейкой */
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45));
}

/* Подпись поверх нижней части фото — как на референсе. Фон под текстом
   обязателен: вырезка светлая (белый пиджак), белый текст на ней теряется. */
.callback__person {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(13, 27, 42, .82);
  backdrop-filter: blur(4px);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
}
.callback__person strong { display: block; font-size: 14px; font-weight: 800; }
.callback__person span { font-size: 12px; color: var(--text-inverse-soft); }

/* ── Адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .callback { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
  .callback__photo { width: 292px; right: 20px; }
  .callback__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callback__form .field:nth-child(3) { grid-column: 1 / -1; }
}

/* Ниже 900px фото убираем совсем: ужатая вырезка читается как артефакт,
   а форма важнее — отдаём ей всю ширину карточки. */
@media (max-width: 900px) {
  .callback {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
    padding: 28px 22px;
  }
  .callback__photo { display: none; }
  .callback__title { max-width: none; }
  .callback__form { grid-template-columns: minmax(0, 1fr); }
  .callback__form .field:nth-child(3) { grid-column: auto; }
  .callback__submit { justify-self: stretch; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ФИРМЕННЫЙ ОРАНЖЕВЫЙ: производные от акцента

   Сама палитра живёт в :root style.css (утверждена 20.07.2026, вариант
   orange-aa). Здесь — только то, что нельзя выразить одним токеном:
   места, где акцентный цвет зашит числом или зависит от подложки.

   Про контраст. Токен --accent #d1440d на белом и под белым текстом даёт
   4.6:1 и проходит WCAG AA. Но на тонированных подложках (--accent-soft,
   --bg-tint) он проседает до 4.16–4.26:1, поэтому акцентный ТЕКСТ на них
   переведён на --accent-ink #c2410c (4.66–4.77:1). Замерено в браузере.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Акцентный текст на светлом: затемнённый тон ────────────────────────── */
/* Ссылки внутри текстовых блоков — обычный кегль, нужен полный AA */
.seotext a,
.legal-text a,
.seo-card a,
.field__consent a,
.review-card__foot a,
a.contacts__note,
a.contacts__value:hover,
.page-intro a,
.page-blocks a { color: var(--accent-ink); }

/* Цены 18px/800 — чуть ниже порога «крупного текста» (18.66px bold) */
.service-card__price,
.svc-card__price strong,
.wcalc__sum--full strong,
.includes__note strong { color: var(--accent-ink); }

/* Полный прайс ремонта: счётчик позиций — 12px/800 на своей же светлой
   подложке accent-soft. Телефон в блоке «ничего не нашлось» — 15px/700. */
.fprice__gcount,
.fprice__empty a { color: var(--accent-ink); }

/* Значки и номера на заливке accent-soft: там сам --accent даёт 4.16:1.
   Все они мельче 18.66px bold, то есть считаются обычным текстом. */
/* .step .step__n, а не просто .step__n: в style.css номер шага красит
   правило .step span (0,1,1), оно специфичнее одиночного класса. */
.step .step__n,
.prof-card__tag,
.wcalc__tariff.is-active .wcalc__tariff-title { color: var(--accent-ink); }

/* Тёмные подложки — исключение из всего блока выше: ink задуман для
   светлого фона и на тёмном даёт 3.4:1. Ссылки там остаются белыми.
   Правило .callback__consent стоит выше по файлу и при равной
   специфичности проигрывало ink — поэтому дублируем его здесь. */
.callback__consent a,
.section--dark .field__consent a { color: #fff; }

/* ── Производные от акцента цвета, зашитые числом ──────────────────────── */
/* Оффер в hero. Осторожно: у hero две подложки, и тон нужен разный —
   светлый тон на светлом hero давал 1.77:1 (проверено измерением). */
.hero:not(.hero--light) .hero__offer { color: #ff9670; }
.hero--light .hero__offer { color: var(--accent-ink); }

/* Подложка карточки-заглушки работ — была холодная голубая */
.work-card__ph {
  background:
    radial-gradient(120% 90% at 80% 0%, #fdefe9 0%, rgba(253, 239, 233, 0) 60%),
    linear-gradient(160deg, #fdf7f4 0%, #f7ece6 100%);
}

/* Свечение на постере видео — тот же accent в rgba */
.video-card__poster {
  background:
    radial-gradient(90% 120% at 20% 0%, rgba(209, 68, 13, .16) 0%, rgba(209, 68, 13, 0) 55%),
    linear-gradient(160deg, #10233a 0%, #0d1b2a 100%);
}