/* ==========================================================================
   ДОМФОРТ — посадочная страница
   Mobile-first: базовые правила под узкий экран, десктоп через min-width.
   Цвета и типографика — раздел 6 CLAUDE.md. Тёмная тема не делается.
   ========================================================================== */

/* --- 1. Токены ----------------------------------------------------------- */

:root {
  --green:      #3D8529;
  --green-dark: #2E6620;
  --terracotta: #A1251F;
  --ink:        #1A1D1A;
  --muted:      #5C625C;
  --line:       #E2E5E1;
  --bg:         #FFFFFF;
  --bg-soft:    #F5F6F4;

  --green-soft: #EEF4EC;   /* подложка под акцентными плитками */
  --ink-soft:   #2B302B;

  --container: 1200px;
  --pad: 16px;
  --gap-section: 64px;

  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(26, 29, 26, .06), 0 2px 8px rgba(26, 29, 26, .04);
  --shadow-md: 0 4px 16px rgba(26, 29, 26, .10);
  --shadow-lg: 0 12px 40px rgba(26, 29, 26, .18);

  --header-h: 60px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
  :root { --pad: 24px; --gap-section: 96px; --header-h: 72px; }
}

/* --- 2. Сброс и база ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;           /* страховка от горизонтальной прокрутки */
}

img { max-width: 100%; height: auto; display: block; }

/* text-wrap: balance выравнивает строки заголовка и убирает висячее слово
   («…на самом / деле»). Браузеры без поддержки просто игнорируют свойство. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(28px, 6.2vw, 52px); }
h2 { font-size: clamp(24px, 4.4vw, 38px); }
h3 { font-size: clamp(19px, 2.4vw, 24px); }
h4 { font-size: clamp(17px, 1.9vw, 19px); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* --- 3. Раскладка -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section { padding-block: var(--gap-section); }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: calc(var(--gap-section) * .65); }

.section__head { max-width: 760px; margin-bottom: 32px; }
.section__head--wide { max-width: 900px; }
.section__lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); margin: 0; }

/* На широком экране заголовок с подводкой в одну колонку оставляет полэкрана
   пустым, а текст выглядит вжатым в левый край. Разводим их по двум колонкам:
   ширина используется, а длина строки остаётся в пределах 70 символов. */
@media (min-width: 1000px) {
  .section__head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 56px;
    align-items: start;
    margin-bottom: 40px;
  }
  .section__head--split > :first-child { margin-bottom: 0; }
  .section__head--split h2 { margin-bottom: 12px; }
  .section__head--split .section__lead { max-width: 56ch; }
}

/* Длина строки в тексте — не больше 70 символов (раздел 6 CLAUDE.md) */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }

.note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 12px;
}

.grid { display: grid; gap: 16px; }
@media (min-width: 768px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid { gap: 20px; } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 999px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }

table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; background: var(--bg-soft); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--green); color: var(--green-dark); }

.btn--ghost-light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(2px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.22); border-color: #fff; color: #fff; }

.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }

.btn[disabled] { opacity: .6; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row > .btn { flex: 1 1 240px; }

/* --- 5. Шапка ------------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.logo__img { width: auto; height: 32px; flex: 0 0 auto; }
.logo__geo {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
@media (min-width: 400px) { .logo__img { height: 36px; } }
@media (min-width: 900px) { .logo__img { height: 40px; } .logo__geo { font-size: 12px; } }

.nav { display: none; }

.header__spacer { flex: 1 1 auto; }

.header__phone { display: none; text-align: right; line-height: 1.15; }
.header__phone a { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header__phone a:hover { color: var(--green-dark); }
.header__phone span { display: block; font-size: 11px; color: var(--muted); }

.header__cta { display: none; }

.icon-btn {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { border-color: var(--green); color: var(--green-dark); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  .nav { display: flex; gap: 22px; margin-left: 20px; }
  .nav a { font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .nav a:hover { color: var(--green-dark); }
  .header__phone { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .header__call { display: none; }
}

/* Мобильное меню */
.menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 49;
  background: #fff;
  padding: 20px var(--pad) 32px;
  overflow-y: auto;
  display: none;
}
.menu[data-open="true"] { display: block; }
.menu ul { list-style: none; margin: 0 0 24px; padding: 0; }
.menu li { margin: 0; border-bottom: 1px solid var(--line); }
.menu a { display: block; padding: 15px 0; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.menu__phone { font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; display: block; margin-bottom: 4px; }
body[data-menu="open"] { overflow: hidden; }

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

.hero { position: relative; color: #fff; isolation: isolate; }

.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Кадр 16:9 в вытянутом по вертикали экране обрезается до середины, а дом
     на снимке стоит правее центра — на телефоне в кадр попадали одни деревья.
     Сдвигаем точку кадрирования вправо, на десктопе она не нужна. */
  object-position: 72% center;
  z-index: -2;
}
@media (min-width: 900px) { .hero__bg { object-position: center; } }
.hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,18,14,.80) 0%, rgba(14,18,14,.62) 42%, rgba(14,18,14,.86) 100%);
}
@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(14,18,14,.90) 0%, rgba(14,18,14,.74) 52%, rgba(14,18,14,.42) 100%);
  }
}

/* Первый экран должен помещаться в экран целиком — это его работа.
   svh, а не vh: на мобильных vh считается по развёрнутому во весь рост
   браузеру, и низ блока уезжает под адресную строку. */
.hero__inner {
  padding-block: clamp(28px, 4vh, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

/* Текстовая колонка ограничена по ширине ради длины строки, но сам контейнер
   остаётся отцентрованным: margin-inline: 0 прижимал бы весь текст к левому
   краю окна, и на широком мониторе он оказывался в левой трети. */
.hero__col { max-width: 640px; }
@media (min-width: 1100px) { .hero__col { max-width: 700px; } }

.hero__geo {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Без max-width в ch: на десктопе он ломал заголовок на три строки и
   раздувал первый экран по высоте. */
.hero h1 { color: #fff; margin-bottom: 14px; font-size: clamp(27px, 4.4vw, 46px); text-wrap: balance; }
.hero__sub { font-size: clamp(15px, 1.45vw, 19px); color: rgba(255,255,255,.92); margin-bottom: 20px; }
.hero__sub strong { color: #fff; }

.stage-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-width: 640px;
}
.stage-prices li {
  margin: 0;
  /* Поля намеренно узкие: на 360px три колонки по ~104px, и «от 1,5 млн ₽»
     в nowrap должно поместиться целиком, иначе появляется горизонтальная прокрутка. */
  padding: 10px 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
}
.stage-prices__name { display: block; font-size: 11.5px; line-height: 1.25; color: rgba(255,255,255,.82); margin-bottom: 6px; min-height: 2.5em; }
.stage-prices__val  { display: block; font-size: clamp(13px, 3.3vw, 20px); font-weight: 700; white-space: nowrap; }
.stage-prices__term { display: block; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }

.hero__note { font-size: 12px; color: rgba(255,255,255,.72); margin-bottom: 20px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero__cta .btn { flex: 1 1 240px; }
@media (min-width: 560px) { .hero__cta .btn { flex: 0 1 auto; } }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: rgba(255,255,255,.88);
}
.hero__trust li { margin: 0; display: flex; align-items: center; gap: 7px; }
/* Рейтинг в строке доверия — ссылка на блок отзывов: цифра, которую можно
   проверить, работает только если её есть где проверить. */
.hero__trust a { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.hero__trust a:hover { color: #fff; text-decoration-color: #fff; }
.hero__trust li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(61,133,41,.28);
  flex: 0 0 auto;
}

/* Невысокий телефон (360x640 и подобные): без сжатия ритма обе кнопки
   уходят за нижний край, а первый экран должен доводить до действия
   без скролла. Ужимаем отступы и кегль, содержание не трогаем. */
@media (max-width: 900px) and (max-height: 740px) {
  .hero__inner { padding-block: 18px; }
  .hero__geo { margin-bottom: 10px; padding: 4px 10px; font-size: 12px; }
  .hero h1 { font-size: clamp(24px, 6.4vw, 30px); margin-bottom: 10px; }
  .hero__sub { font-size: 14px; margin-bottom: 14px; }
  .stage-prices li { padding: 8px 6px; }
  .stage-prices__name { margin-bottom: 4px; min-height: 2.4em; }
  .hero__note { margin-bottom: 14px; }
  .hero__cta { margin-bottom: 14px; gap: 10px; }
  .hero__cta .btn { min-height: 46px; }
  .hero__trust { font-size: 12px; gap: 6px 14px; }
}

/* --- 7. Стадии готовности ------------------------------------------------ */

.stage-intro {
  border-left: 3px solid var(--green);
  padding: 2px 0 2px 16px;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}
@media (min-width: 1000px) {
  .section__head--split .stage-intro { margin-bottom: 0; }
}

/* Весь блок обязан помещаться в экран: три стадии сравнивают глазами, а не
   прокруткой. Поэтому у секции поля меньше обычных. */
.section--stages { padding-block: calc(var(--gap-section) * .4); }
.section--stages .section__head--split { margin-bottom: 20px; }
@media (min-width: 1000px) {
  /* Заголовок этого блока набран мельче остальных h2 — иначе он занимает
     две строки и блок перестаёт помещаться в экран. */
  .section--stages h2 { font-size: clamp(24px, 2.6vw, 30px); }
  .section--stages .section__head--split { gap: 16px 56px; }
}

.stage-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.stage-card--pick { border-color: var(--green); box-shadow: var(--shadow-md); }

/* Кадр показывает ровно ту стадию, что описана в карточке: ОСП с окнами,
   готовый фасад, отделанная комната. Высота фиксированная — иначе три
   карточки разъезжаются по высоте картинки. */
.stage-card__media { margin: 0; }
.stage-card__media img {
  width: 100%;
  /* На телефоне кадр крупнее: там он единственная передышка между
     блоками текста. На десктопе высота урезана, иначе три карточки
     перестают помещаться в экран. */
  height: 176px;
  object-fit: cover;
  background: var(--bg-soft);
}
@media (min-width: 900px) { .stage-card__media img { height: 132px; } }

.stage-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 18px; }

.stage-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  background: var(--terracotta);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}

.stage-card__title { font-size: clamp(19px, 2.1vw, 22px); margin-bottom: 1px; }
.stage-card__who { font-size: 13px; color: var(--muted); margin-bottom: 8px; }

/* Цена и срок в одну строку: раздельными абзацами они съедали высоту,
   а черта под ними заменила разделитель, который рисовала строка «кому». */
.stage-card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.stage-card__price { font-size: clamp(22px, 2.6vw, 27px); font-weight: 700; line-height: 1.1; }
.stage-card__term { font-size: 14px; color: var(--muted); }

/* Состав одной строкой — он делает работу списка, а полный перечень
   с размерами открывается кнопкой под ним. */
.stage-card__sum { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.stage-card__sum strong { color: var(--ink); }

.stage-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; font-weight: 700; }

.ticks { list-style: none; margin: 0 0 10px; padding: 0; font-size: 15px; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 7px; }
.ticks li::before {
  content: "";
  position: absolute; left: 4px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.stage-card__not {
  margin-top: auto;
  padding: 8px 11px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 10px;
}
.stage-card__not strong { color: var(--ink); }

.stage-card .btn { margin-top: auto; }
/* Кнопка «Ещё N пунктов» внутри карточки стоит вплотную к списку. */
.stage-card .mcut { margin: 0 0 12px; min-height: 36px; font-size: 14px; }

/* --- 8. Квиз ------------------------------------------------------------- */

/* С 30.09.2026 в блоке 4 — квиз Марквиз, он рисует себя сам. Стили .quiz__*
   ниже остались от своего квиза (js/quiz.js) и на странице не используются,
   кроме карточки .quiz у запасного блока. */
.quiz-mq { max-width: 820px; }
.quiz-fallback { padding: 22px 20px 26px; }
.quiz-fallback p { margin: 0 0 16px; }
@media (min-width: 768px) { .quiz-fallback { padding: 30px 32px 34px; } }

.quiz {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 820px;
}

.quiz__bar { height: 4px; background: var(--line); }
.quiz__bar span { display: block; height: 100%; background: var(--green); width: 0; transition: width .25s ease; }

.quiz__body { padding: 22px 20px 26px; }
@media (min-width: 768px) { .quiz__body { padding: 30px 32px 34px; } }

.quiz__step-no { font-size: 13px; font-weight: 700; color: var(--green-dark); letter-spacing: .04em; margin-bottom: 8px; }
.quiz__q { font-size: clamp(20px, 2.8vw, 26px); margin-bottom: 18px; }

.quiz__options { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }

.opt { display: block; position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__face {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  transition: border-color .15s, background-color .15s;
}
.opt__face::before {
  content: "";
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border: 2px solid #C7CDC5;
  border-radius: 50%;
  transition: border-color .15s, box-shadow .15s;
}
.opt:hover .opt__face { border-color: #C7CDC5; background: var(--bg-soft); }
.opt input:checked + .opt__face { border-color: var(--green); background: var(--green-soft); }
.opt input:checked + .opt__face::before { border-color: var(--green); box-shadow: inset 0 0 0 4px var(--green); }
.opt input:focus-visible + .opt__face { outline: 3px solid var(--green); outline-offset: 2px; }

.quiz__hint {
  font-size: 14px;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 18px;
}

.quiz__nav { display: flex; align-items: center; gap: 12px; }
.quiz__back {
  background: none;
  border: 0;
  padding: 10px 4px;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  min-height: 44px;
}
.quiz__back:hover { color: var(--ink); }

.quiz__result-sum {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
  margin-bottom: 12px;
}

.steps-list { counter-reset: s; list-style: none; padding: 0; margin: 0 0 20px; }
.steps-list li {
  counter-increment: s;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
}
.steps-list li::before {
  content: counter(s);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: grid; place-items: center;
}

/* --- 9. Формы ------------------------------------------------------------ */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.field input[type="text"],
.field input[type="tel"] {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;                /* меньше 16px — iOS зумит страницу при фокусе */
  color: var(--ink);
  background: #fff;
  transition: border-color .15s;
}
.field input:focus { outline: none; border-color: var(--green); }
.field input[aria-invalid="true"] { border-color: var(--terracotta); }

.field__error { display: none; margin-top: 6px; font-size: 13px; color: var(--terracotta); }
.field[data-invalid="true"] .field__error { display: block; }

.fields-row { display: grid; gap: 14px; }
@media (min-width: 560px) { .fields-row { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); }
.consent a { color: var(--green-dark); }
.consent[data-invalid="true"] { color: var(--terracotta); }

/* Ловушка для ботов: поле не видно человеку и не попадает в таб-порядок */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

.form-error {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #FBEEED;
  border: 1px solid #F0D4D2;
  color: var(--terracotta);
  font-size: 14px;
}
.form-error[data-show="true"] { display: block; }

/* Плашка отладки: пока LEAD_ENDPOINT пуст, заявка никуда не уходит,
   и об этом нужно кричать, а не молчать (раздел 8 CLAUDE.md). */
.debug-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--terracotta);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,.25);
}
.debug-banner b { display: block; font-size: 14px; }
.debug-banner button {
  margin-left: 10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* --- 10. Каталог и калькулятор ------------------------------------------- */

.cards { display: grid; gap: 18px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-soft); }

.card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }

.card__title { font-size: 20px; margin-bottom: 6px; }

.card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }

.card__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card__price-label { font-size: 13px; color: var(--muted); }
.card__price { font-size: 22px; font-weight: 700; white-space: nowrap; }
.card__full { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.card__full .card__price { font-size: 18px; color: var(--ink-soft); }
.card__mortgage { font-size: 13px; color: var(--green-dark); font-weight: 600; margin-top: 8px; }

.calc { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.calc > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
}
.calc > summary::-webkit-details-marker { display: none; }
.calc > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s;
  flex: 0 0 auto;
}
.calc[open] > summary::after { transform: rotate(-135deg); }

.calc__body { padding: 14px; }

.calc__opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.calc__opt input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); }
.calc__opt span { flex: 1 1 auto; }
.calc__opt b { font-weight: 700; white-space: nowrap; }

.calc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--green-soft);
  border-radius: var(--radius);
  font-weight: 700;
}
.calc__total span { font-size: 14px; font-weight: 600; }
.calc__total b { font-size: 20px; white-space: nowrap; }

.card .btn { margin-top: 14px; }

.catalog__more { display: flex; justify-content: center; margin-top: 24px; }

.changeable {
  margin-top: 36px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.changeable ul { columns: 2; column-gap: 28px; font-size: 15px; list-style: none; padding: 0; margin: 0; }
.changeable li { break-inside: avoid; padding-left: 18px; position: relative; }
.changeable li::before { content: "·"; position: absolute; left: 4px; color: var(--green); font-weight: 700; }
@media (max-width: 600px) { .changeable ul { columns: 1; } }

/* --- 11. Подсказки «как выбрать» ----------------------------------------- */

.tip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.tip__n {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
  margin-bottom: 12px;
}
.tip h3 { font-size: 18px; margin-bottom: 8px; }
.tip p { font-size: 15px; color: var(--muted); margin: 0; }

.conclusion {
  margin-top: 28px;
  padding: 28px 22px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
}
.conclusion h3 { color: #fff; }
.conclusion p { color: rgba(255,255,255,.86); max-width: 62ch; }
.conclusion .btn { margin-top: 8px; }
/* Адрес прямо под «приезжайте в офис»: звать в гости, не говоря куда, —
   значит терять тех, кто готов приехать сегодня. */
.conclusion__where {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--green);
  background: rgba(255,255,255,.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  max-width: 52ch;
}
.conclusion__where strong { color: #fff; }

/* --- 12. Ипотека --------------------------------------------------------- */

.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.tile h3 { font-size: 18px; margin-bottom: 8px; }
.tile p { font-size: 15px; color: var(--muted); margin: 0; }

.paytable td:first-child { font-weight: 700; white-space: nowrap; }
.paytable tbody tr:hover { background: var(--green-soft); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 768px) { .checklist { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }
.checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  margin: 0;
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px;
  border: 2px solid var(--green);
  border-radius: 4px;
}
.checklist li::after {
  content: "";
  position: absolute; left: 5px; top: 7px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.subblock { margin-top: 36px; }
.subblock h3 { margin-bottom: 6px; }


/* --- 12a. Раскрывающийся блок «подробнее» -------------------------------- */

/* Второй уровень для доказательной базы. Задача страницы — целевые заявки,
   а не прочтение: на виду остаётся аргумент, под раскрытием — цифры, которые
   ищет один читатель из десяти. Ничего не удалено, изменён только уровень. */
.more {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.section--soft .more { background: #fff; }

.more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.more > summary::-webkit-details-marker { display: none; }
/* Свёрнутый блок обязан выглядеть нажимаемым, иначе его просто не заметят:
   подложка, зелёный текст и стрелка при наведении. */
.more > summary:hover { color: var(--green-dark); background: var(--green-soft); }
.more > summary:hover::after { border-color: var(--green-dark); }
.more > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s;
}
.more[open] > summary { border-bottom: 1px solid var(--line); }
.more[open] > summary::after { transform: rotate(-135deg); }

.more__note { font-weight: 400; font-size: 13px; color: var(--muted); }

.more__body { padding: 22px 20px 24px; }
@media (min-width: 768px) { .more__body { padding: 26px 24px 28px; } }

/* --- 12b. Подсветка карточек при наведении -------------------------------
   Только для мыши: на тачскрине :hover «залипает» после тапа и карточка
   остаётся подсвеченной. Глобальное правило prefers-reduced-motion выше
   гасит переход для тех, кому анимация мешает.
   Смещение намеренно маленькое (2px): карточки некликабельны, и сильный
   отрыв от плоскости обещал бы переход, которого не будет. */
@media (hover: hover) and (pointer: fine) {
  .guarantee, .tile, .tip, .why__item, .control__item, .stage-card, .card, .specs__row {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .guarantee:hover, .tile:hover, .tip:hover, .control__item:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    box-shadow: var(--shadow-md);
  }
  .why__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

  /* Карточка проекта кликабельна по кнопке внутри — ей отрыв к месту */
  .card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-md); }
  .stage-card:hover { border-color: var(--green); box-shadow: var(--shadow-md); }

  .specs__row:hover { background: var(--green-soft); }

  /* Кейсы и галерея: только тень. Масштабирование кадра вылезало бы
     за скруглённые углы — обрезать его нечем, обёртки у картинок нет. */
  .case { transition: box-shadow .18s ease; }
  .case:hover { box-shadow: var(--shadow-md); }
  .gallery img { transition: box-shadow .18s ease; }
  .gallery img:hover { box-shadow: var(--shadow-md); }
}

/* --- 13. Производство ---------------------------------------------------- */

.spec-table th { width: 38%; }
@media (max-width: 560px) { .spec-table th, .spec-table td { padding: 10px; font-size: 14px; } .spec-table th { white-space: normal; } }

/* Список материалов: те же факты, что были сплошным абзацем, но с подписями.
   Шесть имён собственных подряд в прозе читатель пропускает целиком. */
.specs__title { font-size: 17px; margin: 28px 0 12px; }
.specs { margin: 0; display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.specs__row { display: grid; gap: 2px; padding: 12px 16px; background: #fff; }
.specs dt { font-weight: 700; font-size: 14px; }
.specs dd { margin: 0; font-size: 15px; color: var(--muted); }
@media (min-width: 640px) {
  .specs__row { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .specs dt { font-size: 15px; }
}

.why { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 768px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why__item { padding: 18px; background: var(--bg-soft); border-radius: var(--radius); }
.why__item h4 { margin-bottom: 6px; }
.why__item p { font-size: 15px; color: var(--muted); margin: 0; }

/* --- 14. СИП: разбор ----------------------------------------------------- */

.sip__grid { display: grid; gap: 24px; }
/* min-width: 0 обязателен. По умолчанию колонка грида не уже своего
   max-content, и широкая таблица вентиляции внутри растягивает колонку —
   текст рядом уезжает за экран. На body стоит overflow-x: hidden, поэтому
   переполнение не даёт прокрутки и его легко не заметить: строки просто
   обрезаются справа. */
.sip__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .sip__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
}

.sip__point { margin-bottom: 22px; }
.sip__point h3 { font-size: 18px; margin-bottom: 6px; }
.sip__point p { font-size: 15px; margin: 0; }

.sip__key {
  padding: 18px 20px;
  background: var(--green-soft);
  border-radius: var(--radius);
  font-size: 16px;
  margin-bottom: 22px;
}

.vent-table td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.vent-table td:nth-child(3) { font-size: 14px; color: var(--muted); }

/* --- 15. Этапы стройки --------------------------------------------------- */

.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; -webkit-overflow-scrolling: touch; }
.tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { border-color: #C7CDC5; }
.tab[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }

.tabpanel[hidden] { display: none; }
.tabpanel__cap { font-size: 15px; color: var(--muted); margin-bottom: 16px; max-width: 68ch; }

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.control { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 768px) { .control { grid-template-columns: repeat(3, 1fr); } }
.control__item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
}
.control__item::before {
  content: "";
  width: 10px; height: 10px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft);
}

/* --- 16. Кейсы ----------------------------------------------------------- */

.case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .case { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .case:nth-child(even) .case__media { order: 2; }
}

.case__media { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.case__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) { .case__media img { aspect-ratio: auto; min-height: 240px; } }

.case__body { padding: 22px 20px 24px; }
@media (min-width: 900px) { .case__body { padding: 30px 28px; } }
.case__title { font-size: clamp(19px, 2.2vw, 23px); margin-bottom: 14px; }
.case__row { margin-bottom: 12px; font-size: 15px; }
.case__row b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.case__result { margin: 0; padding: 12px 14px; background: var(--green-soft); border-radius: var(--radius); font-size: 15px; }
.case__result b { color: var(--green-dark); }

/* --- 17. Гарантии -------------------------------------------------------- */

.guarantee {
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.guarantee h3 { font-size: 17px; margin-bottom: 8px; }
.guarantee p { font-size: 15px; color: var(--muted); margin: 0; }

/* --- 18. Экскурсия и финальная форма ------------------------------------- */

.cta-block {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 22px;
}
@media (min-width: 900px) {
  .cta-block { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; padding: 44px 40px; }
}
.cta-block h2, .cta-block h3 { color: #fff; }
.cta-block p { color: rgba(255,255,255,.86); }
.cta-block .prose { max-width: 50ch; }

.cta-block__form {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-top: 22px;
  color: var(--ink);
}
@media (min-width: 900px) { .cta-block__form { margin-top: 0; padding: 26px 24px; } }
.cta-block__form .consent { color: var(--muted); }

.gift {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(255,255,255,.35);
  border-radius: var(--radius);
  font-size: 15px;
  color: rgba(255,255,255,.9);
}
.gift b { color: #fff; }

/* --- 19. Отзывы ---------------------------------------------------------- */

/* Рейтинг без числа оценок выглядит пустым — «5,0» рисует себе кто угодно.
   Поэтому рядом стоят и оценка, и сколько людей её поставили. */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 18px 20px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.rating__score { display: flex; align-items: baseline; gap: 8px; }
.rating__score b { font-size: 40px; line-height: 1; color: var(--green-dark); }
.rating__score span { font-size: 14px; color: var(--muted); }
.rating__meta p { margin: 0; font-size: 15px; }
/* Размер задаётся атрибутами самого виджета: рейтинговый бейдж Яндекса —
   150×50, растягивать его на всю ширину нельзя. */
.rating__badge { display: block; border: 0; max-width: 100%; margin-left: auto; }
@media (max-width: 560px) { .rating__badge { margin-left: 0; } }

/* Цитаты отзывов. Текст, имя и дата — как в карточке организации на
   Яндекс.Картах, орфография авторов сохранена (copy.md, блок 14). */
.quotes { display: grid; gap: 16px; }
@media (min-width: 760px)  { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* На телефоне пять цитат в столбик — это почти два лишних экрана на странице,
   которая и так длинная. Кладём их в ленту с прокруткой: тот же приём, что
   у широких таблиц. */
@media (max-width: 759px) {
  .quotes {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1);
    padding: 2px var(--pad) 10px;
  }
  .quote { scroll-snap-align: start; }
}
.quotes__hint { display: none; margin-bottom: 8px; }
@media (max-width: 759px) { .quotes__hint { display: block; } }

.quote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-size: 15px; }
.quote__cut { color: var(--muted); }
.quote figcaption {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px;
  font-size: 13px;
  color: var(--muted);
}
.quote figcaption b { font-size: 15px; color: var(--ink); }
.quote__tag { color: var(--green-dark); }

.reviews__video {
  margin-top: 20px;
  max-width: 420px;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.reviews__video:hover { border-color: var(--green); color: var(--green-dark); }
.reviews__video-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.reviews__video-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }

/* --- 20. FAQ ------------------------------------------------------------- */

/* На широком экране FAQ в одну колонку оставляет полэкрана пустым.
   Ставим рядом «кому мы не подходим» — оба блока работают как фильтр,
   и читаются они естественно в паре. */
.faq-layout { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .faq-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .faq-layout .not-for { margin-top: 0; position: sticky; top: calc(var(--header-h) + 24px); }
}

.faq { max-width: 860px; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-size: 17px;
  font-weight: 600;
  position: relative;
  min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 24px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.faq__a { padding: 0 0 20px; font-size: 15px; color: var(--muted); max-width: 68ch; }
.faq__a p { margin-bottom: .7em; }

.not-for {
  margin-top: 36px;
  padding: 24px 22px;
  border: 1px solid #F0D4D2;
  background: #FBF4F3;
  border-radius: var(--radius-lg);
}
.not-for h3 { color: var(--terracotta); margin-bottom: 8px; }
.not-for ul { margin: 0; padding-left: 20px; font-size: 15px; }
.not-for li::marker { color: var(--terracotta); }

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

.footer { background: var(--ink); color: rgba(255,255,255,.78); padding-block: 48px 32px; font-size: 15px; }
.footer a { color: #fff; }
.footer__grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.footer__name { color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.footer__req { font-size: 14px; line-height: 1.6; }
.footer__office {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer__office strong { color: #fff; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer__phone { font-size: 22px; font-weight: 700; color: #fff; text-decoration: none; display: inline-block; }
.footer__legal {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
}
.footer__legal a { color: rgba(255,255,255,.86); }

/* --- 22. Модальные окна -------------------------------------------------- */

dialog.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  overflow: auto;
}
dialog.modal::backdrop { background: rgba(14,18,14,.58); }

.modal__inner { padding: 26px 22px 24px; }
.modal__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 40px; height: 40px;
  border: 0; background: transparent;
  font-size: 26px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
}
.modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.modal h3 { padding-right: 36px; margin-bottom: 8px; }
.modal p { font-size: 15px; color: var(--muted); }

/* --- 23. Cookie-баннер --------------------------------------------------- */

.cookie {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  /* Выше свёрнутого чата Венио (#leadia-widget, z-index 1000001): иначе чат
     закрывает кнопку «Принимаю». Ниже открытого окна Марквиза (2147483647),
     чтобы не лечь на его кнопку «Далее». */
  z-index: 1000002;
  display: none;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  color: var(--muted);
}
.cookie[data-show="true"] { display: flex; }
.cookie p { margin: 0; flex: 1 1 320px; }
.cookie .btn { flex: 0 0 auto; }
@media (min-width: 768px) { .cookie { left: auto; right: 20px; bottom: 20px; max-width: 560px; } }

/* --- 24. Плавающая кнопка звонка на мобильном ---------------------------- */

.noscript-note {
  background: #FBF4F3;
  border-bottom: 1px solid #F0D4D2;
  color: var(--terracotta);
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
}

/* --- 25. Служебные страницы: политика, согласие, спасибо ----------------- */

.legal { padding-block: 40px 64px; }
.legal__inner { max-width: 820px; }
.legal h1 { font-size: clamp(24px, 4vw, 34px); margin-bottom: 8px; }
.legal h2 { font-size: clamp(18px, 2.4vw, 22px); margin-top: 1.8em; margin-bottom: .5em; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal__date { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.legal__back { display: inline-block; margin-bottom: 24px; font-size: 15px; }

/* Открытый плейсхолдер: должен бросаться в глаза, чтобы не уехать в продакшен */
.todo {
  background: #FFF4D6;
  border-bottom: 2px solid #E0B02A;
  padding: 1px 5px;
  font-weight: 700;
}

.thanks { padding-block: 64px 80px; text-align: center; }
.thanks__inner { max-width: 620px; margin-inline: auto; }
.thanks__mark {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid; place-items: center;
}
.thanks__mark svg { width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.thanks .btn-row { justify-content: center; margin-top: 28px; }
.thanks .btn-row > .btn { flex: 0 1 auto; }

/* --- 27. Липкая панель действия на мобильном ----------------------------- */

/* Кнопка в шапке на мобильном не помещается, а страница длиной около
   32 экранов. Панель появляется после первого экрана и прячется на финальной
   форме: две кнопки подряд читаются как ошибка вёрстки. */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(26, 29, 26, .12);
  backdrop-filter: saturate(140%) blur(6px);
  /* visibility, а не hidden: с ним панель выезжает, а не появляется рывком,
     и при этом остаётся недоступной для клавиатуры и скринридера, пока
     спрятана. */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .2s ease, visibility .2s;
}
.bottom-bar[data-show="true"] { visibility: visible; transform: none; }
.bottom-bar__cta { flex: 1 1 auto; min-height: 50px; }
.bottom-bar__call { width: 50px; height: 50px; }
.bottom-bar__call svg { width: 22px; height: 22px; }

/* На десктопе есть и кнопка в шапке, и телефон — панель лишняя. */
@media (min-width: 900px) { .bottom-bar { display: none; } }

/* Подвал не должен уезжать под панель, а cookie-баннер — накладываться. */
body[data-bottombar="on"] { padding-bottom: 76px; }
body[data-bottombar="on"] .cookie { bottom: 84px; }
@media (min-width: 900px) {
  body[data-bottombar="on"] { padding-bottom: 0; }
  body[data-bottombar="on"] .cookie { bottom: 20px; }
}

/* Свёрнутый чат Венио прижат к низу экрана поверх всего и на телефоне ложился
   на панель, закрывая обе её кнопки — главный CTA мобильного трафика.
   Поднимаем чат над панелью (71px — её высота) отступом снизу: bottom Венио
   ставит в атрибут style с !important, его стилями страницы не перебить.
   id задаёт Венио: если он сменится, правило перестанет действовать и чат
   снова ляжет на панель. */
@media (max-width: 899px) {
  body[data-bottombar="on"] #leadia-widget {
    margin-bottom: calc(71px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --- 28. Подбор проектов: фильтр и пустое состояние ---------------------- */

.filter {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.filter__row { display: grid; gap: 8px; }
@media (min-width: 760px) {
  .filter__row { grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 16px; }
}
.filter__label { font-size: 14px; font-weight: 700; color: var(--muted); }
.filter__opts { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 7px 14px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 100px;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.chip span b { font-weight: 400; font-size: 12px; color: var(--muted); }
.chip:hover span { border-color: #C7CDC5; }
.chip input:checked + span { border-color: var(--green); background: var(--green-soft); }
.chip input:checked + span b { color: var(--green-dark); }
.chip input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }

/* На 360px фильтр из трёх рядов чипов занимал бы почти экран целиком:
   ужимаем кегль и поля, чтобы в ряд вставали две кнопки, а не одна. */
@media (max-width: 559px) {
  .filter { padding: 14px 12px; gap: 12px; }
  .filter__opts { gap: 6px; }
  .chip span { padding: 6px 11px; font-size: 14px; min-height: 44px; }
  .chip span b { font-size: 11px; }
}

.filter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.filter__count { font-weight: 700; color: var(--ink); }

.cards__empty {
  max-width: 62ch;
  margin: 0;
  padding: 22px 20px;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  font-size: 15px;
}
.cards__empty p { margin: 0; }
/* Кнопка отдельной строкой: .btn — inline-flex, и внутри абзаца текст
   обтекал бы её, оставляя «сумму.» висеть сбоку. */
.cards__empty .btn { display: inline-flex; margin-top: 16px; }

/* Карточки лежат на белой секции — без тени они сливаются с фоном. */
.section:not(.section--soft) .cards .card { box-shadow: var(--shadow-sm); }

/* --- 29. Честные подписи к картинкам ------------------------------------- */

/* Страница дважды говорит «рендер покажет что угодно» и при этом показывает
   рендеры. Подпись снимает противоречие. */
.card__media { position: relative; margin: 0; }
.card__media figcaption {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(26, 29, 26, .72);
  color: #fff;
  font-size: 12px;
}
.card__actions { display: grid; gap: 8px; margin-top: 14px; }
.card__actions .btn { margin-top: 0; }

/* Фотографии этапов: подпись с месяцем съёмки там, где она есть в файле. */
.shot { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.shot figcaption { font-size: 12px; color: var(--muted); }

/* --- 30. Лайтбокс с планировкой ------------------------------------------ */

dialog.lightbox {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  overflow: auto;
}
dialog.lightbox::backdrop { background: rgba(14, 18, 14, .7); }

.lightbox__inner { padding: 22px 20px 24px; }
.lightbox__title { font-size: clamp(18px, 2.2vw, 22px); padding-right: 42px; margin-bottom: 14px; }
.lightbox__stage { padding: 10px; background: var(--bg-soft); border-radius: var(--radius); }
.lightbox__stage img { width: 100%; height: auto; background: #fff; border-radius: 6px; }
.lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
}
.lightbox__cap { margin: 0; font-size: 14px; font-weight: 600; }
.lightbox__nav { display: flex; gap: 8px; }
.lightbox .note { margin-bottom: 16px; }

/* --- 31. Крючки, ответы на возражения, «что будет дальше» ---------------- */

.hook {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 16px 0 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}
.hook > span { color: var(--muted); }

.answer {
  max-width: 78ch;
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--green-soft);
  border-radius: var(--radius);
  font-size: 15px;
}
.answer b { display: block; font-size: 17px; margin-bottom: 4px; }
.answer--soft { margin-top: 18px; background: var(--bg-soft); border: 1px solid var(--line); }

/* Порядок дальнейших шагов рядом с кнопкой: человек должен знать, кто и
   когда позвонит, до того как оставит номер. */
.next-steps {
  counter-reset: n;
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}
.next-steps li {
  counter-increment: n;
  position: relative;
  margin: 0;
  padding-left: 34px;
  font-size: 15px;
}
.next-steps li::before {
  content: counter(n);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid; place-items: center;
}
.cta-block .next-steps li { color: rgba(255, 255, 255, .88); }

/* --- 32. Экран результата квиза ------------------------------------------ */

/* Раньше экран отдавал одно число. Число без картинки не запоминается,
   а главное — человек не понимал, что произойдёт дальше. */
.quiz__pick {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .quiz__pick { grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 18px; }
}
.quiz__pick-media { position: relative; margin: 0; }
.quiz__pick-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.quiz__pick-media figcaption {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(26, 29, 26, .72);
  color: #fff;
  font-size: 11px;
}
.quiz__pick-label { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.quiz__pick-name { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.quiz__pick .note { margin-bottom: 6px; }
.quiz__next-title { margin: 22px 0 0; font-weight: 700; }
.quiz__excursion-note { margin: 22px 0 12px; font-weight: 600; }

/* --- 33. Короткая версия текста на мобильном ---------------------------- */

/* Кнопка «Подробнее» появляется только на узком экране: её вставляет
   initMobileCuts() и прячет атрибутом hidden на десктопе. */
.mcut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 2px 0 14px;
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--green-dark);
  text-align: left;
  cursor: pointer;
}
.mcut::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  flex: 0 0 auto;
}
.mcut:hover { color: var(--green); }

/* Короткие мобильные формулировки там, где сокращения одним отрезанием
   куска не получается: на десктопе видна полная фраза, на телефоне — сжатая.
   Оба варианта зафиксированы в copy.md. */
.m-only { display: none; }
@media (max-width: 899px) {
  .d-only { display: none; }
  .m-only { display: block; }
  span.m-only, b.m-only, strong.m-only { display: inline; }

  /* Разделитель в карточке стадии рисовала строка «чаще берут те, кто…».
     На телефоне её нет — переносим черту на срок, иначе «30 дней»
     упирается в заголовок «Входит». */
  .stage-card__term {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
}

/* --- 34. Утилиты --------------------------------------------------------- */

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

[hidden] { display: none !important; }

.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }