/* ==========================================================================
   РусДом152 — хвойная тёмная база, светлый зелёный фон, зелёный акцент.
   Имена токенов исторические (gold/cream), значения — зелёные.
   ========================================================================== */

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

:root {
  --dark: #14201A;
  --dark-2: #1C2C24;
  --dark-3: #27392E;
  --cream: #EEF2EA;
  --cream-2: #E3EADE;
  --cream-3: #D7E0D2;
  --cream-4: #E8EFE3;
  --gold: #37734A;
  --gold-2: #2C6440;
  --gold-3: #86C494;
  --gold-soft: #A9D9B5;
  --gold-deep: #1B4429;
  --text: #16211A;
  --text-2: #44544A;
  --text-3: #68776D;
  --line: #CFD9C9;
  --line-2: #BCC9B4;
  --white: #ffffff;
  --star: #B8842F;            /* охра: только звёзды рейтинга, другого смысла у неё нет */

  /* Шкала скруглений. До неё в файле жили 13 разных значений — 4, 6, 8, 9, 10,
     12, 14, 16, 18, 20, 24, 28, 32 — и вложенные блоки скруглялись вразнобой.
     Шесть шагов: элементы управления, поля и мелкие карточки, средние карточки,
     крупные блоки, полноширинные полотна, пилюля. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1280px;
  --pad: clamp(20px, 4vw, 48px);
  --t: cubic-bezier(0.7, 0, 0.2, 1);
  /* Мягкий выход: для появлений и подъёмов */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 81px;
}

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

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "ss01";
  /* clip, не hidden: hidden делает body скролл-контейнером
     и шапка перестаёт прилипать */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
/* display:block выше перебивал атрибут hidden — скрытая картинка
   продолжала занимать место (кадр под видео в галерее модели) */
img[hidden], video[hidden] { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* Typography ============================================================== */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 18px;
  position: relative;
  padding-left: 28px;
}
.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.section-label--light { color: var(--gold-3); }
.section-label--light::before { background: var(--gold-3); }

.section-title {
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 24px;
}
.section-title--center-off { text-align: center; }
.section-title--light { color: var(--cream); }

.section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  margin-bottom: 32px;
}

/* Buttons ================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  /* Прозрачная рамка в основе: с ней у залитой и обведённой кнопки
     одинаковая коробка, иначе обведённая выше на полтора пикселя сверху
     и снизу, и рядом они стоят уступом. */
  border: 1.5px solid transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: var(--r-xs);
  transition: color 0.2s var(--t), background-color 0.2s var(--t), border-color 0.2s var(--t), transform 0.22s var(--ease-out), scale 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), opacity 0.2s var(--t);
  white-space: nowrap;
  cursor: pointer;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: var(--dark);
  box-shadow: 0 4px 18px rgba(55, 115, 74, 0.35);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--gold-3) 0%, var(--gold) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(55, 115, 74, 0.5);
}

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--gold-2);
}
.btn--outline:hover {
  background: var(--gold-2);
  color: var(--white);
}

.btn--outline-dark {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--dark);
}
.btn--outline-dark:hover {
  background: var(--dark);
  color: var(--cream);
}

.btn--ghost-dark {
  background: rgba(255, 255, 255, 0.05);
  color: var(--cream);
  border: 1.5px solid rgba(238, 242, 234, 0.3);
  backdrop-filter: blur(10px);
}
.btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--cream);
}

.btn--block { width: 100%; }
.btn--lg { min-height: 64px; padding: 0 32px; font-size: 16px; }

/* TOPBAR ================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  color: var(--cream);
  border-bottom: 1px solid var(--dark-2);
}

.topbar__row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar__menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  height: 44px;
  border: 1.5px solid rgba(55, 115, 74, 0.5);
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-3);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.topbar__menu span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--gold-3);
  border-radius: 1px;
}
.topbar__menu:hover {
  background: rgba(55, 115, 74, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-right: clamp(10px, 2vw, 28px);
  color: var(--cream);
  text-decoration: none;
}

.brand__mark {
  color: var(--gold);
  display: inline-flex;
  flex-shrink: 0;
}

.brand__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.brand__dot { color: var(--gold); }

.brand__sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.2;
}

.topbar__center {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.topbar__socials {
  display: flex;
  gap: 4px;
}
.topbar__socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(55, 115, 74, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-3);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.topbar__socials a:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

.topbar__search {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.topbar__search:hover {
  background: var(--gold-3);
  transform: scale(1.05);
}

.topbar__phones {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  border-left: 1px solid rgba(55, 115, 74, 0.2);
}
.topbar__phone-ico { display: none; }

.topbar__phone {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.topbar__city {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}
.topbar__num {
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.topbar__num:hover { color: var(--gold); }

.topbar__cta {
  background: var(--cream);
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-xs);
  border: 1.5px solid var(--cream);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.topbar__cta:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.topbar__menu:active { scale: 0.96; }
@media (prefers-reduced-motion: reduce) {
  .topbar__cta:active, .topbar__menu:active, .topbar__phone:active { scale: 1; }
}

/* HERO ==================================================================== */

.hero {
  position: relative;
  /* svh, а не dvh: на телефоне адресная строка прячется, dvh
     скачет и первый экран дёргается при скролле */
  min-height: calc(100svh - 70px);
  display: flex;
  align-items: center;
  /* Отступы сжимаются вместе с экраном: раньше 60 и 80 были
     фиксированными, и кнопки уезжали за нижний край */
  padding: clamp(18px, 3.5vh, 52px) 0 clamp(22px, 4.5vh, 68px);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      rgba(20, 32, 26, 0.90) 0%,
      rgba(20, 32, 26, 0.78) 30%,
      rgba(20, 32, 26, 0.42) 58%,
      rgba(20, 32, 26, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 32, 26, 0.45) 0%,
      rgba(20, 32, 26, 0) 26%,
      rgba(20, 32, 26, 0) 70%,
      rgba(20, 32, 26, 0.5) 100%
    );
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  /* Карточка у левого края: взгляд идёт по строке слева направо,
     и заголовок читается первым.
     width обязателен: без него флекс-контейнер сжимается по
     карточке и уезжает в центр из-за margin: auto у .container */
  justify-content: flex-start;
  /* .hero — тоже флекс, поэтому дочернему нужен flex, иначе он
     сжимается по карточке и уезжает в центр через margin: auto */
  flex: 1 1 auto;
  width: 100%;
}

.hero__card {
  max-width: 520px;
  width: 100%;
}

.hero__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 8px 16px;
  border: 1px solid rgba(55, 115, 74, 0.4);
  border-radius: var(--r-pill);
  margin-bottom: 24px;
}

.hero__title {
  text-shadow: 0 2px 24px rgba(20, 32, 26, 0.45);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin-bottom: 20px;
}
.hero__title-em {
  color: var(--gold);
  font-style: normal;
  font-weight: 800;
}

.hero__lede {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(238, 242, 234, 0.85);
  margin-bottom: 24px;
  max-width: 480px;
}

.hero__bullets {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero__bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--cream);
  line-height: 1.4;
}
.hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.hero__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid rgba(238, 242, 234, 0.15);
  border-bottom: 1px solid rgba(238, 242, 234, 0.15);
  margin-bottom: 8px;
}
.hero__price-from {
  font-size: 14px;
  color: var(--text-3);
  text-transform: lowercase;
}
.hero__price-num {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ==========================================================================
   Акция в первом экране.

   Четвёртая версия, выбрана Вадимом 06.10.2026 из трёх (вариант A,
   _seo/demo/akciya.html). Прежняя светлая карточка с окном из каталога
   на фоне в клетку спорила с тёмным фото и читалась как вклейка, печать
   с днями на углу как наклейка. Теперь карточка из тёмного стекла:
   сквозь неё видно сам дом, а подарок и есть его окна на фото.

   Число дней стоит крупно рядом с кнопкой: это та же цифра, что была
   в печати, только теперь её видно и понятно, к чему она относится.
   Кнопка с белым текстом: тёмный текст на зелёном давал около 3:1.
   ========================================================================== */
.hero__inner { position: relative; }

.hero__offer {
  position: absolute;
  right: 0;
  /* Выше угловой плашки «Чат с менеджером»: она висит у низа экрана
     и на первом экране наезжала на кнопку акции */
  bottom: 72px;
  width: 372px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: rgba(20, 32, 26, 0.58);
  border: 1px solid rgba(238, 242, 234, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  color: var(--cream);
}
@media (prefers-reduced-transparency: reduce) {
  .hero__offer { background: var(--dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hero__offer-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.hero__offer-h {
  display: block;
  margin: 10px 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--cream);
}
.hero__offer-txt {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(238, 242, 234, 0.74);
  margin-bottom: 20px;
}
.hero__offer-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(238, 242, 234, 0.14);
}
.hero__offer-days b {
  display: block;
  font-size: 40px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.hero__offer-days span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: rgba(238, 242, 234, 0.6); }
.hero__offer .btn { width: 100%; color: #fff; white-space: nowrap; }
.hero__offer .btn:hover { color: #fff; }

/* Пока фото не сузилось: карточка уходит в поток под первый экран,
   поверх фото ей уже не хватает места, а прятать акцию нельзя. */
@media (max-width: 1080px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__offer {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 520px;
    flex: 0 0 auto;
    margin-top: 26px;
  }
}
@media (max-width: 480px) {
  .hero__offer { padding: 20px 18px; }
  .hero__offer-h { font-size: 26px; }
  .hero__offer-txt { font-size: 14px; margin-bottom: 16px; }
  .hero__offer-days b { font-size: 34px; }
}

.hero__mortgage {
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: 22px;
}

.hero__cta {
  display: grid;
  gap: 12px;
  justify-content: start;
  max-width: 100%;
}
.hero__cta .btn { width: auto; }

/* STATS =================================================================== */

.stats {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--cream);
  position: relative;
}

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

.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0 0 28px 0;
  overflow: hidden;
  transition: color 0.3s var(--t), background-color 0.3s var(--t), border-color 0.3s var(--t), transform 0.3s var(--t), box-shadow 0.3s var(--t), opacity 0.3s var(--t);
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 32, 26, 0.12);
  border-color: var(--gold);
}

.stat__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.stat__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20, 32, 26, 0.4));
}
.stat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stat__num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 24px;
  margin-bottom: 16px;
  color: var(--gold-2);
}
.stat__num b {
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat__num span {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: lowercase;
}

.stat__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
  padding: 0 24px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.stat__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  padding: 0 24px;
}

/* VIDEO =================================================================== */

.video {
  padding: clamp(40px, 6vw, 80px) 0;
  background: var(--cream-2);
}

.video__inner {
  max-width: 1280px;
}

.video__media {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--dark);
  box-shadow: 0 20px 50px rgba(20, 32, 26, 0.15);
}
.video__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.video__media:hover img { opacity: 1; }

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  transition: color 0.3s var(--t), background-color 0.3s var(--t), border-color 0.3s var(--t), transform 0.3s var(--t), box-shadow 0.3s var(--t), opacity 0.3s var(--t);
  box-shadow: 0 10px 30px rgba(55, 115, 74, 0.5);
}
.video__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--cream);
}
.video__play::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: videoPulse 2s infinite;
}
@keyframes videoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0; }
}

.video__caption {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.video__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.video__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
}
.video__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-2);
  text-decoration: none;
  transition: color 0.2s;
}
.video__more:hover { color: var(--gold-deep); }

/* CATALOG ================================================================= */


@media (max-width: 980px) {
}
/* Карточка не должна быть выше картинки: она держится по центру */



.field {
  display: block;
  margin-bottom: 14px;
}
.field label,
.field > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xs);
  font-size: 15px;
  color: var(--dark);
  outline: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: var(--white);
}
.field select { cursor: pointer; }


/* PROJECTS ================================================================ */

.projects {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--cream-2);
}

.projects__head {
  margin-bottom: clamp(26px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.projects__hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
  align-items: stretch;
}

.projects__hero-img {
  position: relative;
  border-radius: var(--r-xs);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.projects__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects__hero-watermark {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  font-size: 32px;
  font-weight: 800;
  color: rgba(238, 242, 234, 0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  pointer-events: none;
}

.projects__hero-info {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.projects__hero-code {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.projects__hero-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.projects__hero-specs li {
  display: flex;
  flex-direction: column;
}
.projects__hero-specs b {
  font-size: 24px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.projects__hero-specs span {
  font-size: 12px;
  color: var(--text-2);
  text-transform: lowercase;
  margin-top: 4px;
}

.projects__hero-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}
.projects__hero-price span {
  font-size: 14px;
  color: var(--text-2);
  text-transform: lowercase;
}
.projects__hero-price b {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold-2);
  letter-spacing: -0.02em;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 56px;
}

.proj {
  background: transparent;
}

.proj__img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--cream-3);
}
.proj__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--t);
}
.proj:hover .proj__img img { transform: scale(1.04); }

.badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--gold-soft);
  color: var(--dark);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--top { top: 18px; left: 18px; }

.proj__info {
  padding: 24px 4px 0;
}

.proj__code {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
  display: block;
}

.proj__specs {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.proj__specs li {
  display: flex;
  flex-direction: column;
}
.proj__specs b {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}
.proj__specs span {
  font-size: 11px;
  color: var(--text-2);
  text-transform: lowercase;
  margin-top: 2px;
}

.proj__price {
  font-size: 14px;
  color: var(--text-2);
}
.proj__price span { text-transform: lowercase; }
.proj__perm {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-style: normal;
  color: var(--text-3, var(--text-2));
}
.proj__price b {
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  margin-left: 6px;
  letter-spacing: -0.01em;
}

/* Видео в галерее модели: кадр заменяется плеером по клику на превью */
.pr__shot video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--dark); }
.pr__thumb--play { position: relative; }
.pr__thumb--play::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.pr__thumb--play img { filter: brightness(.62); }

/* Ролики производителя на странице о компании. preload="none" —
   до клика грузится только постер, иначе четыре видео тянули бы
   мегабайты у каждого посетителя. */
/* Первый ролик крупный, два других в ряд под ним: три одинаковых
   плитки в колонке 683px встают как 2 + 1 и последняя висит одна */
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px); margin: 0 0 26px; }
.vids__item:first-child { grid-column: 1 / -1; }
@media (max-width: 620px) { .vids { grid-template-columns: minmax(0, 1fr); } }
.vids__item { margin: 0; }
/* height:auto обязателен: атрибуты width/height у <video> стоят ради
   резерва места при загрузке, но без него они перебивают aspect-ratio */
.vids__item video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; background: var(--dark);
  border: 1px solid var(--line); border-radius: var(--r-sm); }
.vids__item figcaption { font-size: 13px; color: var(--text-3); margin-top: 8px; }

/* Снимок реального объекта в блоке партнёрства */
.tn-shot { margin: 0 0 22px; }
.tn-shot img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); }
.tn-shot figcaption { font-size: 13px; color: var(--text-3); margin-top: 8px; max-width: 62ch; }

/* ── «Где собирается дом» ─────────────────────────────────────
   Тёмная секция-передышка между сеткой карточек и списком ссылок.
   Главное в ней — шкала: полосы всех пяти технологий идут одна под
   другой на одинаковой ширине, поэтому разница «сколько работы уходит
   на завод» считывается за секунду, без чтения текста. Полосы растут
   при появлении секции; класс is-in ставит IntersectionObserver, без
   него секция полностью читаема и статична. */
.tline { background: var(--dark); color: var(--cream);
  padding: clamp(48px, 8vw, 110px) 0 clamp(44px, 7vw, 96px); }
.tline__top { max-width: 58ch; margin-bottom: clamp(30px, 4vw, 52px); }
.tline__top h2 { color: var(--cream); font-size: clamp(30px, 5.4vw, 62px);
  line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 16px; text-wrap: balance; }
.tline__top p { color: rgba(238, 242, 234, 0.62); font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65; }


.tline__rows { display: grid; }
.tline__row { display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 300px);
  grid-template-areas: "head lead facts" "scale scale scale";
  gap: 6px clamp(18px, 2.8vw, 44px); align-items: start;
  padding: clamp(22px, 3vw, 38px) 0;
  border-top: 1px solid rgba(238, 242, 234, 0.14); }
.tline__row:first-child { border-top: 0; }

.tline__head { grid-area: head; display: grid; gap: 3px; }
.tline__n { font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: rgba(238, 242, 234, 0.32); }
.tline__row h3 { color: var(--cream); font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; }
.tline__row--lead h3 { font-size: clamp(26px, 3vw, 38px); }
.tline__row--lead .tline__n { color: var(--gold-3); }
.tline__sub { font-size: 13px; color: rgba(238, 242, 234, 0.5); }

.tline__lead { grid-area: lead; color: rgba(238, 242, 234, 0.78);
  font-size: 15px; line-height: 1.62; max-width: 44ch; margin: 0; }
.tline__side { grid-area: facts; display: grid; gap: 14px; align-content: start; }
.tline__facts { display: grid; gap: 9px; margin: 0; }
.tline__fact { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px;
  align-items: baseline; }
.tline__fact dt { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(238, 242, 234, 0.4); }
.tline__fact dd { margin: 0; font-size: 14px; color: rgba(238, 242, 234, 0.88); }

/* Шкала во всю ширину строки — так полосы соседних технологий
   оказываются на одной оси и их длину можно сравнить глазом */
.tline__scale { grid-area: scale; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 16px; margin-top: clamp(14px, 2vw, 22px); }
.tline__bar { position: relative; display: block; height: 3px;
  background: rgba(238, 242, 234, 0.13); border-radius: 3px; }
/* риски делений: четверти шкалы */
.tline__bar::before { content: ""; position: absolute; inset: -4px 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(238, 242, 234, 0.18) 0 1px, transparent 1px 25%); }
.tline__bar i { position: relative; display: block; height: 100%; width: var(--bar);
  background: var(--gold-3); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.tline__bar i::after { content: ""; position: absolute; right: -3px; top: -3px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold-3);
  box-shadow: 0 0 0 4px rgba(134, 196, 148, 0.16); }
.tline.is-in .tline__bar i { transform: scaleX(1); }
.tline__mark { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-soft); white-space: nowrap; }

.tline__link { justify-self: start;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--gold-3);
  border-bottom: 1px solid rgba(134, 196, 148, 0.35);
  transition: color 0.25s var(--t), border-color 0.25s var(--t); }
.tline__link::after { content: " →"; }
.tline__link:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.tline__link:focus-visible { outline: 2px solid var(--gold-3); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .tline__row { opacity: 0; transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .tline.is-in .tline__row { opacity: 1; transform: none; }
  .tline.is-in .tline__row:nth-child(2) { transition-delay: 0.07s; }
  .tline.is-in .tline__row:nth-child(3) { transition-delay: 0.14s; }
  .tline.is-in .tline__row:nth-child(4) { transition-delay: 0.21s; }
  .tline.is-in .tline__row:nth-child(5) { transition-delay: 0.28s; }
  .tline.is-in .tline__bar i { transition-delay: 0.2s; }
}
@media (prefers-reduced-motion: reduce) { .tline__bar i { transform: scaleX(1); } }

@media (max-width: 1080px) {
  .tline__row { grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    grid-template-areas: "head facts" "lead facts" "scale scale"; }
  .tline__link { align-self: start; margin-top: 6px; }
}
@media (max-width: 720px) {
  .tline__row { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "lead" "facts" "scale"; gap: 12px; }
  .tline__scale { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tline__mark { white-space: normal; }
}

/* Полный список моделей внизу каталога. Карточки строит скрипт, поэтому
   в разметке нет ни одной ссылки на страницы моделей — поисковик их не
   обойдёт. Список свёрнут в одну строку: на странице не мешает, ссылки
   при этом лежат в разметке и доступны и роботу, и человеку. */
.allmodels { padding: 0 0 clamp(28px, 4vw, 48px); background: var(--cream); }
.allmodels__box { border-top: 1px solid var(--line); }
.allmodels__box > summary { list-style: none; cursor: pointer;
  padding: 16px 0; font-size: 14px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
  transition: color 0.2s var(--t); }
.allmodels__box > summary::-webkit-details-marker { display: none; }
.allmodels__box > summary::before { content: "+"; font-size: 15px; font-weight: 700;
  color: var(--gold-2); width: 14px; }
.allmodels__box[open] > summary::before { content: "–"; }
.allmodels__box > summary:hover { color: var(--text); }
.allmodels__box > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.allmodels__in { padding-bottom: 20px; }
.allmodels__group { margin-bottom: 20px; }
.allmodels__group h3 { font-size: 14px; font-weight: 800; margin-bottom: 8px;
  letter-spacing: -0.01em; }
.allmodels__group h3 span { font-weight: 600; color: var(--text-3); font-size: 12px; margin-left: 6px; }
.allmodels ul { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 28px; }
@media (max-width: 900px) { .allmodels ul { columns: 2; } }
@media (max-width: 560px) { .allmodels ul { columns: 1; } }
.allmodels li { break-inside: avoid; margin-bottom: 5px; }
.allmodels a { font-size: 13px; color: var(--text-3); }
.allmodels a:hover { color: var(--gold-2); }

/* Список документов производителя на странице «О компании» */
.docs { list-style: none; margin: 0 0 22px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); overflow: hidden; }
.docs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); }
.docs li:last-child { border-bottom: 0; }
.docs a { font-weight: 600; color: var(--gold-2); }
.docs a:hover { color: var(--gold-deep); }
.docs span { font-size: 13px; color: var(--text-3); }

/* ── Постройки ДОМ ТЕХНОНИКОЛЬ ──────────────────────────────
   У них вместо цены строка расчёта, а в характеристиках есть
   габариты — длинная строка, которая не влезает в колонку цифр. */
.badge--tn { background: var(--dark); color: var(--cream); font-size: 11px;
  letter-spacing: 0.08em; padding: 6px 12px; }
.proj--tn .proj__specs { flex-wrap: wrap; gap: 8px 18px; }
.proj--tn .proj__specs b { font-size: 14px; }
.proj__price--calc { font-size: 14px; font-weight: 600; color: var(--text-2); }

.projects__more {
  margin-top: clamp(20px, 2.6vw, 32px);
}

/* PROCESS ================================================================= */

.process {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--cream);
}

.process__head {
  margin-bottom: 56px;
  max-width: 720px;
}
.process__head .section-label { color: var(--gold-2); }

.process__list {
  display: grid;
  /* Шесть этапов ложатся ровно 3 + 3. При четырёх колонках
     второй ряд оставался наполовину пустым */
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--white);
}

.process__list li {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: relative;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.process__list li:nth-child(3n) { border-right: 0; }
.process__list li:nth-last-child(-n+3) { border-bottom: 0; }

.process__list li:hover {
  background: var(--dark);
  color: var(--cream);
}
.process__list li:hover h3 { color: var(--cream); }
.process__list li:hover p { color: rgba(238, 242, 234, 0.7); }
.process__list li:hover .process__num { color: var(--gold); }
.process__list li:hover .process__time { color: var(--gold-3); }

.process__num {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-2);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  font-family: var(--sans);
}

.process__list h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.process__list p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 16px;
}

.process__time {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.04em;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* APPROACH ================================================================ */

.approach {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--cream-2);
}

.approach__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.approach__left { position: sticky; top: 100px; }
.approach__left .btn { margin-top: 8px; }

.spec {
  display: flex;
  flex-direction: column;
}

.spec > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.spec > div:last-child { border-bottom: 1px solid var(--line); }

.spec dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
  padding-top: 4px;
}
.spec dd {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* REVIEWS ================================================================= */

.reviews {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--dark);
  color: var(--cream);
  /* карточка при смене уезжает на 60px вбок — прячем вылет,
     иначе на узком экране появляется горизонтальная прокрутка */
  overflow: hidden;
}

.reviews__head {
  margin-bottom: clamp(26px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.contact {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--cream);
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact__left { max-width: 460px; }

.contact__right {
  display: flex;
  flex-direction: column;
}

.contact__row:last-child { border-bottom: 1px solid var(--line); }

.contact__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
  padding-top: 4px;
}

.contact__value {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.contact__value a:hover { color: var(--gold-2); }

/* FOOTER ================================================================== */

.foot {
  background: var(--dark);
  color: rgba(238, 242, 234, 0.6);
  padding-top: clamp(32px, 4vw, 48px);
}

.foot__row {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(26px, 3.5vw, 40px);
}
@media (max-width: 860px) {
  .foot__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.foot__col--brand p {
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
  color: rgba(238, 242, 234, 0.55);
}

/* ==========================================================================
   Подвал на телефоне: колонки складываются в аккордеон.
   Ссылок в подвале больше двадцати, и на узком экране они занимали несколько
   экранов прокрутки. Сделано на нативном <details>: клавиатура и объявление
   состояния работают сами, без ARIA. Без JS колонки остаются раскрытыми.
   ========================================================================== */
.foot__sum { list-style: none; margin-bottom: 18px; }
.foot__sum::-webkit-details-marker { display: none; }
.foot__sum .foot__h { margin-bottom: 0; }
.foot__sum:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}

@media (max-width: 720px) {
  .foot__row { gap: 0; }
  .foot__col--brand { margin-bottom: 26px; }
  .foot__col--fold { border-top: 1px solid rgba(238, 242, 234, 0.12); }
  .foot__col--fold:last-of-type { border-bottom: 1px solid rgba(238, 242, 234, 0.12); }
  .foot__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;          /* палец попадает без прицеливания */
    margin-bottom: 0;
    cursor: pointer;
  }
  /* Галочка вниз в закрытом состоянии, вверх в раскрытом */
  .foot__sum::after {
    content: "";
    width: 8px; height: 8px;
    margin-left: 12px;
    border-right: 2px solid rgba(238, 242, 234, 0.55);
    border-bottom: 2px solid rgba(238, 242, 234, 0.55);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .foot__col--fold[open] .foot__sum::after { transform: translateY(2px) rotate(-135deg); }
  .foot__col--fold[open] { padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .foot__sum::after { transition: none; }
}

.brand--foot {
  color: var(--cream);
}
.brand--foot .brand__name { color: var(--cream); }

.foot__col h4, .foot__h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cream);
  margin-bottom: 18px;
}

.foot__col a {
  display: block;
  font-size: 14px;
  padding: 5px 0;
  color: rgba(238, 242, 234, 0.6);
  transition: color 0.2s;
}
.foot__col a:hover { color: var(--gold); }

/* Ссылка на сообщество: до сих пор ВК на сайте вёл только в личные сообщения,
   а самой группы не было видно нигде — при том что она указана в микроразметке. */
.foot__soc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(238, 242, 234, 0.18);
  border-radius: var(--r-xs);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  transition: border-color .2s var(--t), background-color .2s var(--t);
}
.foot__soc:hover { border-color: var(--gold-3); background: rgba(55, 115, 74, 0.16); }
.foot__soc:active { scale: 0.96; }

.foot__col p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(238, 242, 234, 0.6);
  margin: 4px 0;
}

.foot__bottom {
  border-top: 1px solid rgba(238, 242, 234, 0.1);
  padding: 16px 0 20px;
}
.foot__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(238, 242, 234, 0.4);
}
.foot__bottom-row a {
  color: rgba(238, 242, 234, 0.5);
  margin: 0 6px;
}
.foot__bottom-row a:hover { color: var(--gold); }

/* MODAL =================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 26, 0.75);
  backdrop-filter: blur(8px);
}

.modal__panel {
  position: relative;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 44px 40px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg, 0 30px 60px rgba(0, 0, 0, 0.4));
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s var(--t);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }

/* Выбранная комплектация — чтобы человек видел, за что просит смету */
/* display в правилах ниже перебивает атрибут hidden — гасим явно */
.modal__panel [hidden] { display: none !important; }  /* скрытые части модалки */

.modal__fail { padding: 8px 0 4px; }
.modal__fail p { color: var(--text-2); font-size: 15px; line-height: 1.6; margin-bottom: 16px; }

.modal__done { text-align: center; padding: 12px 0 4px; }
.modal__done-mark { display: grid; place-items: center; width: 54px; height: 54px;
  margin: 0 auto 16px; border-radius: 50%; background: var(--gold); color: #fff;
  font-size: 26px; line-height: 1; }
.modal__done p { color: var(--text-2); font-size: 16px; line-height: 1.6; }

#modalPkg { margin: -6px 0 12px; font-weight: 600; font-size: 14px; color: var(--gold-2);
  border-left: 2px solid var(--gold); padding-left: 10px; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream-3);
  color: var(--dark);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.modal__close:hover { background: var(--gold); }

.modal__panel h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 16px 0 12px;
  letter-spacing: -0.02em;
}
.modal__panel > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 24px;
}
.modal__panel form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal__policy {
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}

/* CHATBOT ================================================================ */

.chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: 0;
  transition: transform 0.2s;
}
.chatbot:hover { transform: translateY(-2px); }

.chatbot__bubble {
  background: var(--dark);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 14px 18px;
  border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md);
  box-shadow: 0 10px 30px rgba(20, 32, 26, 0.25);
  max-width: 180px;
  position: relative;
}
.chatbot__bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -8px;
  width: 16px;
  height: 16px;
  background: var(--dark);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.chatbot__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(20, 32, 26, 0.2);
}

/* CONTAINER =============================================================== */

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

/* Responsive ============================================================== */

/* Ниже 1180 навигация уходит в бургер, и телефон с кнопкой оставались
   висеть посреди строки: до правого края было под 140 px пустоты.
   Прижимаем их к краю — теперь у шапки два якоря, логотип и действия. */
@media (max-width: 1180px) {
  .topbar__phones { margin-inline-start: auto; }
}

@media (max-width: 1100px) {
  .topbar__center { display: none; }
  .topbar__phones { display: block; padding: 0; border-left: 0; }
  /* Одна высота и одно скругление у всех элементов управления в шапке:
     были 44, 42 и 42 с круглым телефоном среди прямоугольных кнопок. */
  .topbar__phone { display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--r-xs); border: 1.5px solid rgba(55, 115, 74, 0.5); }
  .topbar__phone:hover { background: rgba(55, 115, 74, 0.1); border-color: var(--gold); }
  .topbar__city, .topbar__num { display: none; }
  .topbar__phone-ico { display: block; color: var(--gold-3); }
  .topbar__cta { padding: 0 18px; font-size: 13px; }
  .brand__sub { display: none; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .projects__hero { grid-template-columns: 1fr; }
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .process__list li:nth-child(2n) { border-right: 0; }
  .process__list li:nth-child(4n) { border-right: 1px solid var(--line); }
  .process__list li:nth-child(n+5) { border-bottom: 0; }
  .approach__inner { grid-template-columns: 1fr; }
  .approach__left { position: static; }
  .reviews__grid { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; }
  .foot__row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --pad: 18px; }
  .topbar__row { padding: 12px var(--pad); gap: 10px; }
  .topbar__menu { width: 48px; height: 44px; }
  .topbar__cta { display: none; }
  /* «Заказать звонок» сюда не влезает, поэтому единственным явным
     действием в шапке становится звонок — и выглядит он как действие. */
  .topbar__phone { background: var(--cream); border-color: var(--cream); }
  .topbar__phone-ico { color: var(--dark); }
  .topbar__phone:hover { background: var(--gold); border-color: var(--gold); }
  .topbar__phone:hover .topbar__phone-ico { color: var(--dark); }
  .topbar__phone:active { scale: 0.96; }
  .brand__name { font-size: 18px; }
  .hero { padding: 40px 0 60px; }
  .hero__inner { justify-content: flex-start; }
  .hero__cta .btn { width: 100%; }
  .stats__grid { grid-template-columns: 1fr; }
  .projects__grid { grid-template-columns: 1fr; }
  .process__list { grid-template-columns: 1fr; }
  .process__list li { border-right: 0 !important; }
  .process__list li:nth-child(n+2) { border-top: 0; }
  .foot__row { grid-template-columns: 1fr; gap: 32px; }
  .foot__bottom-row { flex-direction: column; align-items: flex-start; }
  .chatbot { right: 16px; bottom: 16px; }
  .chatbot__bubble { display: none; }
  .section { padding: 60px 0; }
  .stat__num b { font-size: 44px; }
  .video__media { aspect-ratio: 16 / 9; }
  .video__title { font-size: 20px; }
  .video__play { width: 64px; height: 64px; }
}

@media (max-width: 420px) {
  .topbar__menu span { display: none; }
  .topbar__menu::after {
    content: "≡";
    font-size: 24px;
    color: var(--gold-3);
    line-height: 1;
  }
  .topbar__menu {
    font-size: 0;
  }
}

/* Зоны нажатия под палец в подвале: телефон, почта и политика были
   строчными ссылками высотой 14 px — попасть в них с телефона нельзя. */
@media (pointer: coarse) {
  .foot__col a { padding: 11px 0; }
  .foot__bottom-row small a {
    display: inline-block;
    padding: 15px 0;
  }
  /* Логотип — ссылка на главную, её тоже надо уметь нажать */
  .brand { min-height: 44px; }
  .lp__crumbs a, .crumbs a { display: inline-block; padding: 13px 0; }
}

/* Таблица цен не влезает в 375 px: три колонки с неразрывными суммами дают
   409 px и тянут вбок всю страницу. Прокрутка живёт внутри своей коробки,
   а не у body — правило одно на весь сайт. */
.lp__tblwrap {
  overflow-x: auto;
  margin: 16px 0 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lp__tblwrap .lp__tbl { margin: 0; min-width: 420px; }

/* Ссылка на сообщество в конце статьи. Дочитавший до конца уже прогрет,
   и ему логично предложить не вторую заявку, а продолжение чтения.
   Поэтому это не кнопка, а строка: главное действие на странице одно. */
.art__vk {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s var(--t), background-color .2s var(--t);
}
.art__vk:hover { border-color: var(--gold-3); background: var(--cream-4); }
.art__vk:active { scale: 0.99; }
.art__vk-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--dark);
  color: var(--cream);
}
.art__vk-txt { display: grid; gap: 2px; min-width: 0; }
.art__vk-txt b { font-size: 15.5px; letter-spacing: -0.01em; }
.art__vk-txt span { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.art__vk-go { flex: none; margin-inline-start: auto; color: var(--text-3); transition: transform .22s var(--t); }
.art__vk:hover .art__vk-go { transform: translate(2px, -2px); color: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .art__vk-go { transition: none; } }

/* Вопрос-ответ и нормативы в конце статьи. Обе врезки живут в той же
   типографике, что и текст: это продолжение материала, а не виджет.
   Вопрос набран как h3 — по нему строится и разметка FAQPage. */
.art__faq { max-width: 68ch; margin-top: clamp(30px, 5vw, 46px); }
.art__faq h2 { font-size: clamp(21px, 2.2vw, 29px); margin-bottom: 18px; }
.art__faq-item { padding: 16px 0; border-top: 1px solid var(--line); }
.art__faq-item:last-child { border-bottom: 1px solid var(--line); }
.art__faq-item h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  /* Вопрос часто уходит в две строки, и по умолчанию они склеивались */
  line-height: 1.35;
  text-wrap: balance;
  color: var(--text); margin: 0 0 7px;
}
.art__faq-item p { font-size: 16px; line-height: 1.6; color: var(--text-2); margin: 0; }

.art__src {
  max-width: 68ch;
  margin-top: clamp(26px, 4vw, 38px);
  padding: clamp(18px, 2.4vw, 24px);
  background: var(--cream-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.art__src h2 { font-size: 16px; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; }
.art__src ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.art__src li {
  position: relative; padding-left: 18px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
}
.art__src li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-3);
}

/* Ответ в начале статьи: визуально это врезка, а не первый абзац,
   иначе глаз проскакивает мимо и смысл выделения теряется. */
.art__answer {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  background: var(--cream-4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
}

/* Selection =============================================================== */

::selection { background: var(--gold); color: var(--dark); }

/* ── Меню в шапке ──────────────────────────────────────── */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin-left: 0;
  min-width: 0;
}
.topbar__nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(238, 242, 234, 0.72);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
  position: relative;
  transition: color 0.25s var(--t);
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold-3);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--t);
}
.topbar__nav a:hover { color: var(--cream); }
.topbar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1180px) { .topbar__nav { display: none; } }

/* Меню на узком экране раскрывается по кнопке-гамбургеру */
.topbar__nav.is-open {
  display: flex;
  position: absolute;
  top: 100%; left: 0; right: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--pad) 14px;
  z-index: 50;
}
.topbar__nav.is-open a {
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.topbar__nav.is-open a:hover,
.topbar__nav.is-open a:active { color: var(--gold-2); }
.topbar__nav.is-open a::after { display: none; }
.topbar__nav.is-open a:last-child { border-bottom: 0; }

/* ── Отзывы с Авито ────────────────────────────────────── */
.avito { margin-top: clamp(24px, 4vw, 44px); }
.avito__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.avito__brand { display: flex; align-items: center; gap: 12px; }
.avito__logo { display: inline-flex; }
.avito__brand b { display: block; font-size: 15px; color: var(--text); }
.avito__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.avito__rate { font-weight: 700; color: var(--text); }
.avito__stars { color: var(--star); letter-spacing: 1px; }
.avito__all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--gold-2); text-decoration: none;
  transition: color 0.25s var(--t);
}
.avito__all:hover { color: var(--gold-deep); }
.avito__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
}
.acard { background: var(--white); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.acard__top { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.acard__ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-2); color: var(--text-2);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.acard__top b { display: block; font-size: 14px; color: var(--text); }
.acard__date { font-size: 12px; color: var(--text-3); }
.acard__stars { color: var(--star); font-size: 13px; letter-spacing: 1px; }
.acard p { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ── Статьи ────────────────────────────────────────────── */
.blog { padding: clamp(56px, 8vw, 112px) 0; background: var(--cream); }
.blog__head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 46px); }
.blog__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.post {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.4s var(--t), border-color 0.3s var(--t);
}
.post:hover { transform: translateY(-4px); border-color: var(--gold); }
.post__shot {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
  /* Своих фото к статьям нет — общая фирменная обложка вместо серой плашки */
  background: var(--dark) url("img/article-cover.webp") center / cover no-repeat;
}
.post__shot span {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-3); background: rgba(20, 32, 26, 0.55);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.post__b { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post__meta { font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.post__b h3 { font-size: 18px; line-height: 1.25; color: var(--text); }
.post__b p { font-size: 14px; line-height: 1.55; color: var(--text-2); flex: 1; }
.post__more {
  align-self: flex-start; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: var(--gold-2); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.25s var(--t);
}
.post__more:hover { border-bottom-color: var(--gold-2); }

/* ── Первый экран помещается без скролла ───────────────── */
.hero__card > * + * { margin-top: clamp(9px, 1.5vh, 18px); }
.hero__title { font-size: clamp(27px, 2.1vw + 13px, 48px); line-height: 1.06; }
.hero__lede { font-size: clamp(14px, 0.4vw + 12px, 17px); }
.hero__bullets { gap: clamp(4px, 0.7vh, 9px); }
.hero__bullets li { font-size: clamp(13px, 0.3vw + 12px, 15px); }
.hero__price-num { font-size: clamp(25px, 1.9vw + 12px, 42px); }
.hero__mortgage { font-size: 13px; }
.hero__cta { gap: 10px; }
/* На низком экране первыми уходят украшения, а не кнопки:
   действие должно оставаться в пределах экрана */
@media (max-height: 800px) {
  .hero__badge { display: none; }
  .hero__mortgage { display: none; }
}
@media (max-height: 700px) {
  .hero__bullets li:nth-child(3) { display: none; }
}

/* ── Кнопка в шапке не сжимается и не переносится ───────── */
.topbar__cta { white-space: nowrap; flex-shrink: 0; }
.topbar__phones { flex-shrink: 0; }
.topbar__num { white-space: nowrap; }
.topbar__row { flex-wrap: nowrap; }

/* ── Гамбургер и меню-аккордеон ─────────────────────────── */
.topbar__menu { flex-shrink: 0; }
.topbar__menu span { transition: transform 0.3s var(--t), opacity 0.2s var(--t); }
.topbar__menu.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__menu.is-active span:nth-child(2) { opacity: 0; }
.topbar__menu.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1181px) { .topbar__menu { display: none; } }

/* ── Отзывы Авито в тёмной схеме секции ─────────────────── */
.avito { margin-top: 0; }
.avito__head {
  background: rgba(255,255,255,0.05);
  border-color: rgba(238, 242, 234,0.16);
}
.avito__brand b { color: var(--cream); }
.avito__meta { color: rgba(238, 242, 234,0.6); }
.avito__rate { color: var(--cream); }
.avito__all { color: var(--gold-3); }
.avito__all:hover { color: var(--gold-soft); }
.avito__grid {
  background: rgba(238, 242, 234,0.16);
  border-color: rgba(238, 242, 234,0.16);
}
.acard { background: rgba(255,255,255,0.04); }
.acard__ava { background: rgba(238, 242, 234,0.12); color: var(--cream); }
.acard__top b { color: var(--cream); }
.acard__date { color: rgba(238, 242, 234,0.5); }
.acard p { color: rgba(238, 242, 234,0.78); }
.section-lede--light { color: rgba(238, 242, 234,0.68); }

/* ── Зоны нажатия на телефоне ────────────────────────────
   Ссылки в 14px высотой промахиваются пальцем: добавляем
   вертикальный отступ, не трогая внешний вид на десктопе */
@media (max-width: 900px) {
  /* display у ссылок подвала не трогаем: inline-block склеивал их
     в один абзац вместо столбца. Отступ работает и на block. */
  .foot__col a { padding-block: 11px; }   /* 11 + 22 + 11 = 44px под палец */
  .contact__value, .post__more, .avito__all, .video__more {
    display: inline-block;
    padding-block: 10px;
  }
  .modal__close { width: 44px; height: 44px; }
}

/* ── Фильтры каталога на телефоне ────────────────────────
   Раскрытая панель занимала целый экран, и до проектов
   приходилось листать вслепую. Сворачиваем в одну строку */
@media (max-width: 1000px) {
  .side { padding: 0; }
  .side__head { padding: 14px 16px; margin: 0; cursor: pointer;
    align-items: center; border-bottom: 0; gap: 12px; }
  /* Заголовок со счётчиком держим одной строкой, иначе он
     переносится и строка «Фильтры · 8 проектов» ломается */
  .side__title { white-space: nowrap; flex: 1; min-width: 0; }
  .freset { white-space: nowrap; }
  .side.is-open .side__head { border-bottom: 1px solid var(--line); }
  .side__title::after { content: " · " attr(data-count); font-weight: 500; color: var(--text-3); }
  .side__toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-xs);
    font-size: 18px; line-height: 1; color: var(--text-2); flex-shrink: 0;
    transition: transform 0.3s var(--t); }
  .side.is-open .side__toggle { transform: rotate(45deg); }
  .side__body { display: none; padding: 0 16px 16px; }
  .side.is-open .side__body { display: block; }
  .side__count { display: none; }
}
@media (min-width: 1001px) {
  .side__toggle { display: none; }
}

/* ── Виджет мессенджеров ─────────────────────────────────
   Панель в графите, а не на белом: белая подложка с фирменными
   цветами Telegram и VK выпадала из палитры сайта. Роль иконок
   берёт на себя золото, различает их подпись. */
.msgr { position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.msgr__btn { display: flex; align-items: center; gap: 12px; background: none; border: 0;
  cursor: pointer; padding: 0; transition: transform 0.25s var(--t); }
.msgr__btn:hover { transform: translateY(-2px); }
.msgr__btn:active { transform: scale(0.96); }
.msgr__bubble { background: var(--dark); color: var(--cream); border-radius: var(--r-sm);
  padding: 10px 14px; font-size: 13px; font-weight: 600; line-height: 1.3;
  text-align: right; position: relative; box-shadow: 0 6px 22px rgba(20, 32, 26,0.28); }
.msgr__bubble::after { content: ""; position: absolute; right: -5px; top: 50%;
  transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--dark); }
.msgr__avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); color: var(--dark); display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(55, 115, 74,0.4); transition: background 0.25s var(--t); }
.msgr__btn:hover .msgr__avatar { background: var(--gold-3); }
.msgr[data-open="true"] .msgr__bubble { display: none; }

/* Плашка из двух частей (вариант B, 06.10.2026): зелёная — чат с
   менеджером прямо на сайте, тёмная — список мессенджеров. Собирает её
   script.js, без скрипта остаётся прежняя круглая кнопка. */
.msgr--bar .msgr__bar { display: flex; align-items: stretch; border-radius: var(--r-pill); overflow: hidden;
  background: var(--dark); box-shadow: 0 12px 30px rgba(20, 32, 26, 0.38); }
.msgr__chat { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 16px; border: 0;
  background: var(--gold); color: #fff; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color 0.2s var(--t); }
.msgr__chat:hover { background: var(--gold-2); color: #fff; }
.msgr__chat:active { scale: 0.97; }
.msgr__chat:focus-visible, .msgr--bar .msgr__btn:focus-visible { outline: 2px solid var(--gold-3); outline-offset: -3px; }
.msgr--bar .msgr__btn { gap: 6px; padding: 0 16px 0 14px; min-height: 52px; color: rgba(238, 242, 234, 0.82);
  transition: background-color 0.2s var(--t), color 0.2s var(--t); }
.msgr--bar .msgr__btn:hover { transform: none; background: var(--dark-3); color: var(--cream); }
.msgr--bar .msgr__btn:active { transform: none; scale: 0.97; }
.msgr--bar .msgr__btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.msgr--bar[data-open="true"] .msgr__btn { background: var(--dark-3); color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .msgr__chat, .msgr--bar .msgr__btn { transition: none; } }

.msgr__list { display: flex; flex-direction: column; gap: 4px;
  background: var(--dark); border: 1px solid var(--dark-3); border-radius: var(--r-md);
  padding: 8px; box-shadow: 0 14px 40px rgba(20, 32, 26,0.45); min-width: 248px; }
.msgr__list[hidden] { display: none; }
.msgr__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--r-sm); transition: background 0.2s var(--t); }
.msgr__item:hover { background: var(--dark-3); }
.msgr__ico { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(55, 115, 74,0.16); color: var(--gold-3);
  border: 1px solid rgba(55, 115, 74,0.35);
  transition: background 0.2s var(--t), color 0.2s var(--t); }
.msgr__item:hover .msgr__ico { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.msgr__txt b { display: block; font-size: 14px; font-weight: 700; color: var(--cream); }
.msgr__txt small { display: block; font-size: 12px; color: var(--text-3); }
/* Пока грузится чат ВКонтакте: пункт виден, но второй раз не жмётся */
.msgr__item[aria-busy="true"] { opacity: 0.6; cursor: progress; }
@media (max-width: 600px) {
  .msgr { right: 16px; bottom: 16px; }
  .msgr__bubble { display: none; }
  .msgr__list { min-width: 224px; }
}


/* ── Полоса фактов ───────────────────────────────────────
   Два прошлых захода не сработали: голый текст висел в пустоте,
   а карточки с плашками читались как ценники. Здесь блок —
   тёмная полоса сразу под первым экраном: она продолжает шапку,
   держит числа на себе и не требует ни рамок, ни подложек. */
.facts { background: var(--dark); color: var(--cream);
  padding: clamp(26px, 3.4vw, 44px) 0; }
.facts__row { list-style: none; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0; }
.fact { padding: 2px clamp(18px, 2.4vw, 40px);
  border-left: 1px solid rgba(238, 242, 234, 0.14); }
.fact:first-child { border-left: 0; padding-left: 0; }

/* Число — единственный цветной элемент блока */
.fact__n { display: flex; align-items: baseline; gap: 6px;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 50px); line-height: 1;
  letter-spacing: -0.035em; color: var(--gold-3); margin-bottom: 10px; }
.fact__n i { font-style: normal; font-size: 0.36em; font-weight: 700;
  letter-spacing: 0.02em; color: rgba(238, 242, 234, 0.55); }

.fact__t { display: block; font-size: clamp(14px, 1vw, 16px); font-weight: 700;
  color: var(--cream); margin-bottom: 4px; }
.fact__d { display: block; font-size: 13px; line-height: 1.5;
  color: rgba(238, 242, 234, 0.55); }

@media (max-width: 980px) {
  .facts__row { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .facts__row { grid-template-columns: 1fr; gap: 20px; }
  .fact { border-left: 0; padding-left: 0; }
  .fact__n { font-size: 32px; margin-bottom: 6px; }
}

/* Пометка Авито о состоявшейся сделке: главный признак того,
   что отзыв настоящий, а не написан для сайта */
.acard__deal { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gold-3); margin-top: auto; padding-top: 10px; }
.acard__deal::before { content: "✓"; font-size: 11px; }
.acard__deal--photo::after { content: ""; }
.acard { justify-content: flex-start; }

.proj__img--empty { display:grid; place-items:center; aspect-ratio:4/3; background:var(--cream-2);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px; }
.shot-ph { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }

/* ── Калькулятор сметы ─────────────────────────────────────
   Слева параметры, справа цена. Считается по prices.js. */
.calc { padding: clamp(56px, 8vw, 112px) 0; background: var(--cream); }
.calc__head { max-width: 64ch; margin-bottom: clamp(26px,4vw,44px); }

.calc__box { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; }
@media (max-width: 900px) { .calc__box { grid-template-columns: 1fr; } }
.calc__ctrl { background: var(--white); padding: clamp(20px,2.6vw,32px); display: grid;
  gap: clamp(20px,2.4vw,28px); align-content: start; }
.calc__res { background: var(--dark); color: var(--cream); padding: clamp(20px,2.6vw,32px);
  display: grid; align-content: start; gap: 10px; }

.calc__label { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; gap: 12px; }
.calc__label span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; }
.calc__label b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.calc__scale { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--text-3); }

.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 2px; background: var(--line); outline: none; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold); border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: grab; }
.calc__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--white); cursor: grab; }
.calc__range:active::-webkit-slider-thumb { cursor: grabbing; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg--col { flex-direction: column; }
.seg button { flex: 1; min-width: 92px; text-align: left; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent;
  font: inherit; font-size: 14.5px; cursor: pointer; color: var(--text);
  display: grid; gap: 3px;
  transition: border-color .2s var(--t), background-color .2s var(--t); }
.seg:not(.seg--col) button { text-align: center; justify-items: center; }
.seg button small { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.seg button:hover { border-color: var(--gold); }
.seg button.is-on { background: var(--dark); border-color: var(--dark); color: var(--cream); }
.seg button.is-on small { color: rgba(238, 242, 234,.62); }
/* Этажность гаснет, когда прайса на неё в этой площади нет: двухэтажных
   домов на 60 м² не бывает, и подсовывать выдуманную цену нечестно. */
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg button:disabled:hover { border-color: var(--line); }
.seg button:disabled:active { scale: 1; }

.calc__res-label { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-3); font-weight: 700; }
.calc__price { font-size: clamp(24px,3vw,34px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; }
.calc__incl { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 7px; }
.calc__incl li { font-size: 14.5px; color: rgba(238, 242, 234,.86); padding-left: 22px;
  position: relative; line-height: 1.45; }
.calc__incl li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-3);
  font-weight: 700; }
.calc__note { font-size: 13px; color: rgba(238, 242, 234,.55); line-height: 1.55; margin-top: 12px; }

.calc__matches-head { font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; margin-bottom: 12px; }


/* ── Появление блоков при прокрутке ────────────────────────
   Класс вешает скрипт: без JS контент виден сразу, поэтому
   стартовое состояние задаётся только вместе с [data-reveal]. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Первый экран показываем сразу, без ожидания прокрутки */
.hero__card > * { animation: heroUp 0.8s var(--ease-out) both; }
.hero__card > *:nth-child(1) { animation-delay: 0.05s; }
.hero__card > *:nth-child(2) { animation-delay: 0.14s; }
.hero__card > *:nth-child(3) { animation-delay: 0.23s; }
.hero__card > *:nth-child(4) { animation-delay: 0.32s; }
.hero__card > *:nth-child(5) { animation-delay: 0.41s; }
@keyframes heroUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Фон первого экрана медленно отъезжает — кадр «дышит» */
.hero__media img { animation: heroZoom 1.6s var(--ease-out) both; }
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Нажатие должно отзываться, иначе кнопка кажется неживой.
   Вниз кнопка идёт почти мгновенно (70 мс), а возвращается плавно: палец
   ждать не должен, а отпускание на той же скорости выглядит дёрганым. */
.btn:active, .topbar__cta:active, .mchoice__btn:active,
.pkg-pick:active, .seg button:active, .chip:active {
  scale: 0.96;
  transition-duration: 70ms;
}
/* Залитая кнопка на нажатии ещё и проседает в тень — как настоящая клавиша */
.btn--gold:active { box-shadow: 0 1px 6px rgba(55, 115, 74, 0.34); }
.btn--gold:hover:active { transform: translateY(0); }

/* Кому движение мешает — отключаем целиком */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Клавиатурный фокус должен быть виден — иначе сайт непроходим без мыши */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ── Выбор мессенджера в модалке ───────────────────────── */
.mchoice { display: grid; gap: 8px; margin-top: 4px; }
@media (min-width: 520px) { .mchoice { grid-template-columns: repeat(3, 1fr); } }
.mchoice__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--white); font: inherit; font-size: 15px; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: border-color 0.2s var(--t), background-color 0.2s var(--t),
              color 0.2s var(--t), transform 0.2s var(--t);
}
.mchoice__btn:hover { border-color: var(--gold); background: var(--gold); color: #fff; }
.mchoice__ico { display: grid; place-items: center; color: currentColor; }
.modal__hint {
  margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-3);
  transition: color 0.2s var(--t);
}
.modal__hint.is-done { color: var(--gold-2); font-weight: 600; }
.modal__panel textarea { min-height: 96px; resize: vertical; }



/* ── Контакты: слева данные, справа карта ──────────────────
   Раньше шесть строк в столбик занимали пол-экрана. */
.contact__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(24px,4vw,56px); align-items: start; }
@media (max-width: 900px) { .contact__inner { grid-template-columns: 1fr; } }

.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px,2.2vw,26px) clamp(18px,2.5vw,32px);
  margin-top: clamp(20px,2.6vw,30px); }
@media (max-width: 460px) { .contact__grid { grid-template-columns: 1fr; } }
.contact__item { display: grid; gap: 5px; align-content: start; }
.contact__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700; }
.contact__value { font-size: 16px; line-height: 1.5; color: var(--text); }
.contact__value--link { border-bottom: 1px solid var(--line-2);
  justify-self: start; transition: border-color .2s var(--t), color .2s var(--t); }
.contact__value--link:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }

.contact__msgs { display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(20px,2.6vw,30px); }
.contact__msg { display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600;
  color: var(--text); background: var(--white); border: 1px solid var(--line);
  transition: background-color .2s var(--t), border-color .2s var(--t), color .2s var(--t); }
.contact__msg:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.contact__map { position: relative; border-radius: var(--r-md); overflow: hidden;
  min-height: clamp(300px, 34vw, 420px); background: var(--cream-2);
  border: 1px solid var(--line); }
.contact__map iframe { display: block; width: 100%; height: 100%;
  min-height: clamp(300px, 34vw, 420px); border: 0;
  /* Чужой виджет не даёт задать цвета, поэтому уводим его в нашу гамму */
  filter: grayscale(0.45) sepia(0.35) hue-rotate(78deg) saturate(1.25) brightness(0.96); }
.contact__map-stub { position: absolute; inset: 0; display: grid; align-content: center;
  justify-items: center; gap: 8px; text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(45deg, rgba(55,115,74,.05) 0 12px, transparent 12px 24px),
    var(--cream-2); }
.contact__map-stub b { font-size: 19px; color: var(--text); }
.contact__map-stub > span { font-size: 14.5px; color: var(--text-2); }
.contact__map-stub .btn { margin-top: 10px; }
.contact__pin { display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(55,115,74,.12); color: var(--gold-2);
  margin-bottom: 4px; }
.contact__route { font-size: 14.5px; color: var(--gold-2);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--t); }
.contact__route:hover { border-bottom-color: var(--gold-2); }


/* ── Условия договора ──────────────────────────────────────
   Тёмная секция между «как строим» и сметой: сначала условия,
   потом цена — так вопрос «а не вырастет ли» закрыт заранее. */
.deal { padding: clamp(56px, 8vw, 112px) 0; background: var(--dark); color: var(--cream); }
.deal__head { max-width: 64ch; margin-bottom: clamp(28px,4vw,48px); }

.deal__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; background: rgba(238,242,234,.12);
  border: 1px solid rgba(238,242,234,.12); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 900px) { .deal__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .deal__grid { grid-template-columns: 1fr; } }

.deal__item { background: var(--dark); padding: clamp(20px,2.6vw,30px); display: grid;
  gap: 9px; align-content: start;
  transition: background-color .25s var(--t); }
.deal__item:hover { background: var(--dark-2); }
.deal__n { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--gold-3); }
.deal__item h3 { font-size: clamp(17px,1.6vw,20px); line-height: 1.25; color: var(--cream); }
.deal__item p { font-size: 15px; line-height: 1.6; color: rgba(238,242,234,.7); }

.deal__cta { margin-top: clamp(20px,3vw,32px); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(134,196,148,.09); border: 1px solid rgba(134,196,148,.22);
  border-radius: var(--r-md); padding: clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px); }
.deal__cta b { display: block; font-size: clamp(17px,1.7vw,20px); color: var(--cream);
  margin-bottom: 5px; }
.deal__cta span { font-size: 15px; color: rgba(238,242,234,.68); line-height: 1.55; }


/* ── Сортировка каталога ─────────────────────────────────── */
.catbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: clamp(14px,2vw,20px); }
.catbar__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; }
.catbar__opts { display: flex; flex-wrap: wrap; gap: 6px; }


/* ── Вопросы и ответы ──────────────────────────────────────
   На <details>: работает без скрипта и открывается поиском. */
.faq { padding: clamp(56px, 8vw, 112px) 0; background: var(--cream-2); }
.faq__head { max-width: 62ch; margin-bottom: clamp(24px,3.5vw,40px); }
.faq__list { display: grid; gap: 8px; max-width: 90ch; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .2s var(--t); }
.faq__item:hover { border-color: var(--gold); }
.faq__item[open] { border-color: var(--gold); }
.faq__item summary { cursor: pointer; list-style: none; padding: clamp(15px,1.8vw,20px) 52px clamp(15px,1.8vw,20px) clamp(16px,2vw,24px);
  font-size: clamp(16px,1.5vw,18px); font-weight: 600; line-height: 1.4; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px; border-right: 2px solid var(--gold-2);
  border-bottom: 2px solid var(--gold-2); transform: rotate(45deg);
  transition: transform .25s var(--t); }
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__a { padding: 0 clamp(16px,2vw,24px) clamp(16px,2vw,22px); }
.faq__a p { color: var(--text-2); font-size: 15.5px; line-height: 1.65; max-width: 72ch; }
.faq__cta { margin-top: clamp(18px,2.5vw,26px); display: flex; align-items: center;
  flex-wrap: wrap; gap: 14px; }
.faq__cta span { font-size: 15.5px; color: var(--text-2); }




/* ── Каталог в блоке подборки ──────────────────────────────
   Картинка с прозрачным фоном, поэтому тень рисуем фильтром
   по контуру предмета, а не под прямоугольником. */


/* Кнопка мессенджера подаёт сигнал раз в несколько секунд.
   Пульс редкий и короткий: постоянное мельтешение раздражает
   с третьего раза, а разовый импульс глаз ловит. */
.msgr__avatar { position: relative; }
.msgr__avatar::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-3);
  opacity: 0;
  animation: msgrPulse 6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes msgrPulse {
  0%   { transform: scale(0.9); opacity: 0; }
  6%   { opacity: 0.55; }
  22%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Сама кнопка коротко качается в том же ритме */
.msgr__avatar > svg { animation: msgrNudge 6s var(--ease-out) infinite; }
@keyframes msgrNudge {
  0%, 8%, 100% { transform: rotate(0deg) scale(1); }
  3%           { transform: rotate(-9deg) scale(1.06); }
  5.5%         { transform: rotate(7deg) scale(1.04); }
}

/* Когда список мессенджеров открыт, сигналить уже незачем */
.msgr[data-open="true"] .msgr__avatar::before,
.msgr[data-open="true"] .msgr__avatar > svg,
.msgr__btn:hover .msgr__avatar::before,
.msgr__btn:hover .msgr__avatar > svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .msgr__avatar::before, .msgr__avatar > svg { animation: none; }
}


/* Кнопка внутри тёмной карточки: светлая заливка, тёмный текст */


/* Текст внутри тёмной карточки: правила выше по файлу красили его
   в цвета для светлого фона, заголовок сливался с подложкой. */


/* Содержимое тянется по высоте: список забирает свободное место,
   кнопка всегда прижата к низу карточки */


/* Карточка подборки: одинаковые интервалы между смысловыми группами */


/* Ссылка для клавиатуры: видна только при фокусе */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--dark);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-size: 15px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }


/* Подпись автора под статьёй: сигнал экспертности для поиска */
.art__author {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  padding: 12px 16px;
  background: var(--cream-2); border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.5; color: var(--text-2);
}
.art__author a { color: var(--gold-2); }
.art__author-ava {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--dark);
}

/* ==========================================================================
   Отзывы. Раскладка, размеры и тайминги повторяют референс:
   сетка 1 : 1.4, карточка 32px радиуса, уход и приход по 0.6s
   с поворотом на 1.5°, звёзды влетают с разворота.
   ========================================================================== */
.rev { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .rev { grid-template-columns: 1fr 1.4fr; } }

.rev__nav { display: flex; align-items: center; gap: 16px; margin-top: 40px; }

.rev__arrow {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(238, 242, 234, 0.15);
  border-radius: 50%;
  background: none; color: var(--cream); cursor: pointer;
  transition-property: background-color, border-color, color, scale;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
}
.rev__arrow:hover { background: var(--cream); border-color: var(--cream); color: var(--dark); }
.rev__arrow:active { scale: 0.96; }

.rev__dots { display: flex; gap: 8px; margin-left: 16px; }
.rev__dot {
  position: relative; width: 12px; height: 6px;
  padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(238, 242, 234, 0.1);
  overflow: hidden; cursor: pointer;
  transition: width 420ms var(--ease-out);
}
/* Сама точка 6 px высотой — нажимать нечего. Невидимая зона вокруг
   доводит её до 44 px, при этом полоска остаётся тонкой. */
.rev__dot::before {
  content: "";
  position: absolute;
  inset: -19px -6px;
}
.rev__dot[aria-selected="true"] { width: 40px; }
.rev__dot span { position: absolute; inset: 0; background: var(--gold-3); transform: translateX(-100%); }
.rev__dot[aria-selected="true"] span { animation: revFill 6s linear forwards; }
@keyframes revFill { to { transform: translateX(0); } }

.rev__all {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 14px; font-weight: 600; color: var(--gold-3); text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.rev__all:hover { color: var(--gold-soft); }
.rev__avito { display: inline-flex; }

.rev__stage { position: relative; min-height: 380px; }
.rev__quote {
  position: absolute; top: -24px; left: -16px;
  color: rgba(134, 196, 148, 0.18); pointer-events: none;
}

.rev__card {
  position: relative;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(32px, 4vw, 48px);
  box-shadow: 0 40px 80px -30px rgba(11, 26, 16, 0.55);
  opacity: 0;
  transform: translateX(var(--dx, 60px)) rotate(var(--rot, 1.5deg));
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.rev__card.is-in { opacity: 1; transform: none; }

/* Тёплая охра вместо красного: красный больше нигде на сайте не встречается
   и на зелёном фоне читался как ошибка, а не как оценка. */
.rev__stars { display: flex; gap: 4px; color: var(--star); font-size: 18px; }
.rev__stars i { font-style: normal; opacity: 0; transform: scale(0) rotate(-90deg); }
.rev__card.is-in .rev__stars i { animation: revStar 420ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
@keyframes revStar { to { opacity: 1; transform: none; } }

.rev__text { margin-top: 24px; font-size: clamp(18px, 2vw, 24px); line-height: 1.6; color: var(--text); }
.rev__foot { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.rev__ava {
  width: 56px; height: 56px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-2), var(--dark));
  color: var(--gold-soft); font-weight: 600; font-size: 18px;
}
.rev__who b { display: block; font-weight: 600; color: var(--text); }
.rev__who span { font-size: 14px; color: var(--text-3); }
.rev__deal {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 7px 12px;
  border-radius: var(--r-pill); background: rgba(55, 115, 74, 0.12);
  font-size: 12.5px; font-weight: 600; color: var(--gold-2);
}

/* Бегущая строка материалов — как в референсе, с растворением по краям */
.rev__marquee {
  margin-top: clamp(56px, 8vw, 112px);
  padding: 32px 0;
  border-top: 1px solid rgba(238, 242, 234, 0.08);
  border-bottom: 1px solid rgba(238, 242, 234, 0.08);
}
.rev__marquee-k {
  margin-bottom: 24px; text-align: center;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3em; color: rgba(238, 242, 234, 0.4);
}
.rev__track {
  position: relative; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.rev__row { display: flex; flex: none; align-items: center; gap: 80px; padding-right: 80px;
  animation: revMarquee 34s linear infinite; }
.rev__row span {
  white-space: nowrap; font-size: clamp(22px, 3vw, 30px); font-weight: 600;
  color: rgba(238, 242, 234, 0.25);
  transition: color 200ms var(--ease-out);
}
.rev__row span:hover { color: var(--cream); }
@keyframes revMarquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .rev__card { opacity: 1; transform: none; transition: none; }
  .rev__stars i { opacity: 1; transform: none; }
  .rev__card.is-in .rev__stars i,
  .rev__dot[aria-selected="true"] span,
  .rev__row { animation: none; }
  .rev__dot[aria-selected="true"] span { transform: none; }
}

/* ==========================================================================
   Проекты на главной. Раскладка и поведение с референса: фильтры-пилюли
   с перетекающей подложкой, карточки 4:3, наезд фото и стрелка при наведении.
   ========================================================================== */
.pj__head {
  display: flex; flex-direction: column; gap: 32px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
@media (min-width: 1024px) {
  .pj__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* Подложка активной пилюли не появляется заново, а переезжает:
   так видно, откуда и куда переключились. */
.pj__filters { position: relative; display: flex; flex-wrap: wrap; gap: 4px; }
.pj__pill {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-pill); cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.pj__pill:hover { color: var(--text); }
.pj__pill[aria-selected="true"] { color: var(--cream); }
.pj__ink {
  position: absolute; top: 0; left: 0; z-index: 0;
  /* Высоту задаёт скрипт по выбранной пилюле. Растягивать на 100% нельзя:
     когда пилюли переносятся на вторую строку, это высота всего контейнера. */
  border-radius: var(--r-pill);
  background: var(--gold);
  transition-property: transform, width, height;
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
}

.pj__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .pj__grid { grid-template-columns: repeat(2, 1fr); } }

.pj__card {
  position: relative; display: block;
  overflow: hidden; border-radius: var(--r-lg);
  background: var(--dark-2);
  text-decoration: none; color: var(--cream);
  opacity: 0; transform: translateY(30px) scale(0.94);
  transition-property: opacity, transform;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.pj__card.is-in { opacity: 1; transform: none; }

.pj__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pj__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pj__card:hover .pj__shot img { transform: scale(1.1); }

/* Затемнение снизу: под ним читается белый текст поверх любого фото */
.pj__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--dark) 8%, rgba(20, 32, 26, 0.35) 45%, transparent 75%);
  opacity: 0.85;
  transition: opacity 500ms var(--ease-out);
}
.pj__card:hover .pj__veil { opacity: 0.95; }

.pj__tag {
  position: absolute; top: 20px; left: 20px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
}
.pj__go {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--white); color: var(--dark);
  opacity: 0;
  transition-property: opacity, rotate;
  transition-duration: 500ms;
  transition-timing-function: var(--ease-out);
}
.pj__card:hover .pj__go { opacity: 1; rotate: 45deg; }

.pj__body { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(20px, 3vw, 32px); }
.pj__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pj__name {
  margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em;
  /* цвет задаём явно: базовое правило для h3 тёмное, а текст лежит на фото */
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(11, 26, 16, 0.5);
}
.pj__specs {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 12px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; color: rgba(238, 242, 234, 0.72);
}
.pj__specs li { display: flex; align-items: center; gap: 6px; }
.pj__specs svg { color: var(--gold-3); flex: none; }
.pj__cost { text-align: right; flex: none; }
.pj__cost span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(238, 242, 234, 0.5); }
.pj__cost b { font-size: clamp(17px, 2vw, 22px); font-weight: 700; color: var(--gold-3); }

/* Линия дорисовывается слева направо: подсказка, что карточка кликабельна */
.pj__line {
  height: 1px; margin-top: 20px;
  background: rgba(134, 196, 148, 0.6);
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-out);
}
.pj__card:hover .pj__line { transform: scaleX(1); }

/* Подвал блока проектов принял на себя подбор под бюджет: отдельный блок
   с этой формой стоял сразу за первым экраном и просил бюджет раньше,
   чем человек успевал посмотреть хоть один дом. Здесь предложение
   попадает ровно в тот момент, когда подходящего проекта не нашлось. */
.pj__foot {
  margin-top: clamp(40px, 6vw, 56px);
  padding: clamp(22px, 3vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: center;
}
@media (min-width: 860px) {
  .pj__foot { grid-template-columns: minmax(0, 1fr) auto; }
}
.pj__foot-txt b {
  display: block;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.pj__foot p { margin: 0; max-width: 62ch; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pj__foot-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.pj__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  font-weight: 600; color: var(--gold); text-decoration: none;
}
.pj__link svg { transition: translate 200ms var(--ease-out); }
.pj__link:hover svg { translate: 2px -2px; }

@media (prefers-reduced-motion: reduce) {
  .pj__card { opacity: 1; transform: none; transition: none; }
  .pj__shot img, .pj__ink, .pj__line, .pj__go { transition: none; }
}

/* ==========================================================================
   Карточки каталога подтянуты к языку блока проектов: то же скругление,
   тот же наезд фото и стрелка при наведении. Цифры оставлены под фото:
   в каталоге их сравнивают между собой, поверх снимка читать тяжелее.
   ========================================================================== */
.proj__img {
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
}
.proj__img img {
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.proj:hover .proj__img img { transform: scale(1.07); }

/* Стрелка появляется и доворачивается: тот же жест, что в блоке проектов */
.proj__img::after {
  content: '';
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%2314201A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0;
  transition-property: opacity, rotate;
  transition-duration: 400ms;
  transition-timing-function: var(--ease-out);
  pointer-events: none;
}
.proj:hover .proj__img::after { opacity: 1; rotate: 45deg; }

/* Внутренний радиус меньше внешнего ровно на отступ, иначе углы «пережимает» */
.proj__info { border-radius: 0 0 var(--r-lg) var(--r-lg); }

@media (prefers-reduced-motion: reduce) {
  .proj__img img, .proj__img::after { transition: none; }
}

/* ==========================================================================
   Калькулятор: цена главная, управление второстепенное.
   Скругления и жесты те же, что в блоке проектов и в каталоге.
   ========================================================================== */
.calc__box {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(11, 26, 16, 0.45);
  gap: 0;
}
.calc__ctrl { background: var(--white); }
/* Тёмная панель тянется на всю высоту коробки. Раньше она была липкой
   и обрезалась по своему содержимому — под ней светилась подложка,
   и низ карточки выглядел оборванным. */
.calc__res  { background: var(--dark); align-self: stretch; }

/* Крупная сумма — нижняя граница вилки, она отвечает на «сколько минимум» */
.calc__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.calc__price-k {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(238, 242, 234, 0.55);
}
.calc__upto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 2px 0 8px;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(238, 242, 234, 0.72);
}
.calc__upto i {
  font-style: normal;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(238, 242, 234, 0.2);
  color: rgba(238, 242, 234, 0.5);
}

.calc__label span { color: var(--text-3); }
.calc__label b { color: var(--text); }

/* Ползунок толще, пройденная часть заливается: видно, куда двигали */
.calc__range {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(var(--gold), var(--gold)) 0 / var(--fill, 50%) 100% no-repeat, var(--cream-3);
}
.calc__range::-webkit-slider-thumb {
  border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(11, 26, 16, 0.28);
  transition: scale 140ms var(--ease-out);
}
.calc__range::-moz-range-thumb {
  border: 3px solid var(--white);
  box-shadow: 0 2px 10px rgba(11, 26, 16, 0.28);
}
.calc__range:active::-webkit-slider-thumb { scale: 1.12; }

/* Переключатели-пилюли: тот же жест, что у фильтров проектов */
.seg:not(.seg--col) { gap: 6px; }
.seg:not(.seg--col) button {
  /* «1,5 этажа» ломалось на две строки и делало свою пилюлю выше соседних */
  white-space: nowrap;
  border-radius: var(--r-pill); padding: 11px 18px;
  transition-property: background-color, border-color, color, scale;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

/* Комплектация: выбранная поднимается тенью, а не только заливкой */
.seg--col button {
  border-radius: var(--r-md); padding: 14px 16px;
  transition-property: background-color, border-color, color, box-shadow, scale;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
}
.seg--col button.is-on { box-shadow: 0 12px 28px -14px rgba(11, 26, 16, 0.6); }

/* Цена крупнее всего в блоке: за ней сюда и пришли */
.calc__price {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  color: var(--gold-soft);
}
.calc__res-label { color: rgba(238, 242, 234, 0.55); }
.calc__incl li { color: rgba(238, 242, 234, 0.82); }

/* Подходящие проекты: узкая строка с миниатюрой. Это подсказка возле
   расчёта, поэтому она не должна перетягивать внимание с цены. */
.calc__matches {
  grid-column: 1 / -1;
  background: var(--cream-4);
  border-top: 1px solid var(--line);
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.6vw, 32px);
}
.calc__matches-head {
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.calc__cards { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.ccard {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none; color: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  transition-property: box-shadow, translate;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
}
.ccard:hover { box-shadow: inset 0 0 0 1px var(--gold-3), 0 10px 24px -18px rgba(11, 26, 16, 0.6); }
.ccard:active { translate: 0 1px; }

.ccard__pic {
  width: 72px; height: 54px; flex: none;
  border-radius: var(--r-sm); object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px;
}
.ccard { min-width: 0; }
.ccard__txt { display: block; min-width: 0; flex: 1; }
.ccard__txt b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ccard__txt span {
  display: block; margin-top: 2px; font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccard__sum {
  flex: none; font-size: 13.5px; font-weight: 700; color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) { .ccard { transition: none; } }

/* Доплата за комплектацию: тихая подпись справа от названия,
   чтобы разница читалась до переключения, а не после. */
.seg--col button b { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.seg__delta {
  font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seg--col button.is-on .seg__delta { color: var(--gold-3); }

/* ==========================================================================
   Партнёрство с ДОМ ТЕХНОНИКОЛЬ.
   Статус был только строчкой в подвале и абзацем на «О компании» — там, куда
   доходят единицы. Блок стоит сразу за цифрами компании: это продолжение
   того же разговора о доверии.

   Сверху дальше от тёмной полосы фактов уходим в белый, чтобы два тёмных
   слоя подряд не читались одним куском.
   ========================================================================== */
.tnp {
  padding: clamp(56px, 8vw, 112px) 0;
  /* Стыкуемся с соседями по цвету: сверху блок проектов, снизу процесс.
     Белое остаётся в середине, под кадром, где оно и нужно. */
  background: linear-gradient(180deg,
    var(--cream-2) 0%, var(--white) 24%, var(--white) 74%, var(--cream) 100%);
}

.tnp__head {
  display: grid;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: end;
}
@media (min-width: 900px) {
  .tnp__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}
.tnp__lede {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  max-width: 56ch;
}

/* --- Кадр во всю ширину с плашкой статуса --- */
.tnp__hero {
  position: relative;
  margin: clamp(28px, 4vw, 52px) 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* Тонкая чёрная обводка: тонированный серый по краю снимка читается как грязь */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 34px 64px -34px rgba(20, 32, 26, .5);
}
.tnp__hero img {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 520px);
  object-fit: cover;
}
/* Затемнение только под плашкой — по всему кадру убивает берёзы */
.tnp__hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 68%;
  background: linear-gradient(180deg, rgba(20, 32, 26, 0) 0%, rgba(20, 32, 26, .82) 100%);
  pointer-events: none;
}
.tnp__plate {
  position: absolute;
  inset-inline-start: clamp(18px, 3vw, 40px);
  inset-block-end: clamp(18px, 3vw, 36px);
  inset-inline-end: clamp(18px, 3vw, 40px);
  z-index: 1;
  color: var(--cream);
  display: grid;
  gap: 4px;
  max-width: 46ch;
}
.tnp__plate-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.tnp__plate-n {
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.tnp__plate-d {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.45;
  color: rgba(238, 242, 234, .82);
}

/* --- Цифры --- */
.tnp__nums {
  list-style: none;
  margin: clamp(26px, 3.5vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 620px) { .tnp__nums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tnp__nums { grid-template-columns: repeat(4, 1fr); } }
.tnp__nums li {
  background: var(--white);
  padding: clamp(18px, 2vw, 26px);
  display: grid;
  align-content: start;
  gap: 2px;
}
.tnp__nums b {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold-2);
}
.tnp__nums b em {
  font-style: normal;
  font-size: .42em;
  font-weight: 700;
  letter-spacing: 0;
  margin-inline-start: 3px;
  color: var(--text-3);
}
.tnp__nums span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.tnp__nums i {
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  margin-top: 4px;
}

/* --- Два столбца: доводы и документы --- */
/* Три довода в ряд: после цифр это уже пояснение, а не отдельный раздел,
   поэтому колонка узкая и заголовки некрупные. */
.tnp__list {
  list-style: none;
  margin: clamp(26px, 3.5vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: 24px 32px;
}
@media (min-width: 640px)  { .tnp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tnp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tnp__list li { padding-inline-start: 16px; border-inline-start: 2px solid var(--gold-3); }
.tnp__list h3 {
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--text); margin: 0 0 5px;
}
.tnp__list p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 0; }

.tnp__nums i a { color: var(--gold-2); text-decoration: none; border-bottom: 1px solid currentColor; }
.tnp__nums i a:hover { color: var(--gold-deep); }

/* --- Нижняя строка с переходом в каталог --- */
.tnp__cta {
  margin-top: clamp(26px, 3.5vw, 44px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.tnp__cta b {
  display: block;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* На узкой карточке кнопка в 197 px оставляла справа неловкую дыру */
@media (max-width: 560px) {
  .tnp__cta .btn { width: 100%; }
}
.tnp__cta span {
  display: block; margin-top: 5px; max-width: 62ch;
  font-size: 14px; line-height: 1.5; color: rgba(238, 242, 234, .72);
}
.tnp__cta .btn { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .tnp__more svg { transition: none; }
}