/* ==========================================================================
   dstroy.pro — стили сайта
   Один файл, без препроцессоров. Цвета и размеры оригинала (Tilda) вынесены
   в CSS-переменные ниже — менять стиль сайта удобнее всего здесь.
   ========================================================================== */

/* ---------- Шрифт (Tilda Sans, SIL OFL, self-hosted) ---------- */
@font-face {
  font-family: 'Tilda Sans';
  src: url('../fonts/TildaSans-VF.woff2') format('woff2-variations'),
       url('../fonts/TildaSans-VF.woff2') format('woff2');
  font-weight: 250 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Переменные ---------- */
:root {
  --font: 'Tilda Sans', Arial, Helvetica, sans-serif;

  --accent: #dd503c;        /* основные кнопки */
  --accent-dark: #9c4336;   /* «3D»-тень под кнопкой */
  --accent-hover: #c8452f;
  --accent-light: #ff7a45;  /* телефон в карточке контактов */
  --orange: #ff7700;        /* радио/чекбоксы квиза */
  --navy: #072554;          /* плашки с цифрами, мобильная шапка */
  --navy-2: #072b63;        /* плашка над заголовком */
  --ink: #12182d;           /* карточка контактов */
  --text: #000;
  --muted: #666;
  --bg: #f5f5f5;            /* фон страницы */
  --bg-warm: #f5f2ee;       /* фон портфолио */
  --bg-map: #e5e3df;        /* фон блока контактов */
  --white: #fff;
  --pink: #e9a298;          /* декоративные круги */
  --line: rgba(0, 0, 0, .1);

  --container: 1200px;
  --gutter: 20px;
  --nav-h: 40px;            /* полоса навигации в шапке (DS-028); hero прибавляет её к отступу */
  --hdr-h-mobile: 93px;     /* высота фиксированной шапки на ≤ 768 px; отступ hero = она + зазор */
  --radius: 15px;
  --radius-sm: 5px;
  --shadow-card: 0 30px 40px -10px rgba(0, 0, 0, .1);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
b, strong { font-weight: 700; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 1000px; }

/* Заголовки секций: обычное начертание + жирная часть внутри, как в оригинале */
.section-title { font-size: 36px; line-height: 1.2; font-weight: 400; }
.section-title strong { font-weight: 700; }
.section-subtitle { font-size: 22px; line-height: 1.35; font-weight: 400; margin-top: 14px; }
/* DS-044: строки заголовков и подзаголовков центрированных разделов — примерно равной
   длины, без «висящих» одного-двух слов на последней. Не трогает .cta-banner (текст
   слева, кнопка справа — выравнивание намеренно левое) и рубрики каталога /mebel
   (.mebel-section) — они тоже левые и не по этому заданию. Браузер без поддержки
   text-wrap: balance просто переносит текст как раньше. */
.section-title, .section-subtitle { text-wrap: balance; }
.cta-banner .section-title, .cta-banner .section-subtitle,
.mebel-section .section-title { text-wrap: wrap; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 14px 32px;
  background: var(--accent); color: var(--white);
  font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center;
  border-radius: 10px;
  box-shadow: 0 8px 0 var(--accent-dark);
  transition: background-color .2s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--accent-dark); }
.btn--flat { box-shadow: none; border-radius: var(--radius-sm); }
.btn--flat:active { transform: none; }
.btn--outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.btn--outline:hover { background: rgba(221, 80, 60, .08); }
/* Иконка мессенджера в кнопке (DS-032: пары Telegram/MAX на /mebel и «Спасибо») —
   .btn уже flex с gap:10px, иконке нужен только размер. */
.btn__icon { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   Шапка
   ========================================================================== */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding: 12px 0 4px;
}
/* margin-bottom — зазор до синей полосы навигации ниже (DS-031: подчёркивания
   Telegram/MAX иначе сливались с её верхней кромкой); нижний padding шапки выше
   уменьшен с 12 до 4 px, чтобы высота шапки в сумме выросла не больше чем на 8 px. */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__icon { width: 60px; height: 60px; flex: none; }
.brand__icon--light { display: none; }
.page-header .brand__icon--dark { display: none; }
.page-header .brand__icon--light { display: block; }
.brand__text { font-size: 13px; line-height: 1.25; max-width: 200px; }
.header-city { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 500; }
.header-city__pin { width: 24px; height: 24px; }
.header-contact { text-align: right; line-height: 1.2; }
.header-contact__label { font-size: 15px; }
.header-contact__phone { display: block; font-size: 20px; font-weight: 500; text-decoration: underline; margin: 2px 0; }
.header-contact__hours { font-size: 12px; }
.header-contact__msgs { display: flex; justify-content: flex-end; gap: 14px; margin-top: 4px; font-size: 13px; }

/* Ссылка на мессенджер — иконка + текст, общий вид для шапки и подвала (DS-028), чтобы
   размер/цвет иконки MAX не задавался в стилях дважды. Разметка каждого места (шапка,
   подвал) свои классы не теряет — .msg-link/.msg-link__icon добавляются к ним, а не
   заменяют их. */
.msg-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; }
.msg-link__icon { width: 16px; height: 16px; flex: none; }
/* В шапке подчёркивание по умолчанию убрано (DS-031): рядом с подчёркнутым телефоном
   две подчёркнутые подписи Telegram/MAX рябили; иконка + текст и так читаются как
   ссылка. Подчёркивание остаётся на :hover/:focus-visible. В подвале — другой фон и
   размер, там подчёркивание по умолчанию не трогаем. */
.header-contact__msgs .msg-link { text-decoration: none; }
.header-contact__msgs .msg-link:hover,
.header-contact__msgs .msg-link:focus-visible { text-decoration: underline; }

/* Навигация по разделам сайта — отдельной строкой под основной шапкой, не в общей строке:
   на 769–1024 px логотипу, городу и контактам самим тесно, четырём ссылкам там места нет.
   Шапка на hero-страницах position: absolute, места в потоке не занимает — hero отбивает
   её сверху своим padding-top. Полоса делает шапку выше на --nav-h, поэтому каждый
   hero-вариант (.hero, .thanks-hero, .remont-hero, .mebel-hero, .styles-hero) прибавляет
   var(--nav-h) к верхнему отступу через calc(): без этого полоса накрывала бы бейдж
   первого экрана (ревью DS-028). На ≤ 768 px полоса скрыта и --nav-h обнулена. */
.site-nav { background: var(--navy); }
.site-nav__inner { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.site-nav a {
  font-size: 14px; font-weight: 500; color: var(--white); opacity: .75;
  padding: 2px 0; border-bottom: 2px solid transparent; text-decoration: none;
}
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }
.site-nav a[aria-current="page"] { opacity: 1; font-weight: 700; border-bottom-color: var(--accent); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* верхний отступ = место под шапку + полоса навигации (--nav-h, см. блок «Шапка»);
   130px → 138px в DS-031: шапка выросла на 8 px (зазор перед полосой навигации) */
.hero { position: relative; overflow: hidden; padding: calc(138px + var(--nav-h)) 0 40px; }
.hero > .container { position: relative; z-index: 1; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture { height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 30%, rgba(255, 255, 255, .55) 60%, rgba(255, 255, 255, .25) 100%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 700px) 1fr; gap: 20px; align-items: end; }
.hero__badge {
  display: inline-block; padding: 12px 18px; margin-bottom: 22px;
  background: var(--navy-2); color: var(--white);
  font-size: 26px; line-height: 1.2; border-radius: var(--radius-sm);
}
.hero__title { font-size: 44px; line-height: 1.2; font-weight: 400; }
.hero__title strong { font-weight: 700; }
.hero__lead { font-size: 22px; line-height: 1.35; margin-top: 20px; max-width: 640px; }
.hero__cta { position: relative; margin-top: 60px; max-width: 510px; }
.hero__cta .btn { width: 100%; min-height: 105px; font-size: 22px; padding: 18px 30px; border-radius: 15px; }
.hero__free { display: block; text-align: right; font-size: 13px; margin-top: 14px; }
.hero__arrow {
  position: absolute; right: -90px; bottom: 10px; width: 46px; height: 74px;
  transform: scaleY(-1) rotate(25deg);
}
.hero__limit { display: flex; align-items: center; gap: 18px; margin-top: 24px; font-size: 16px; }
.hero__limit img { width: 40px; height: 40px; flex: none; }

.hero__visual { position: relative; min-height: 640px; align-self: stretch; }
.hero__manager {
  position: absolute; right: -60px; bottom: -30px; width: 520px; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.hero__phone { position: absolute; left: 0; bottom: 40px; width: 140px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .25)); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; position: relative; z-index: 2; }
.stat {
  display: flex; align-items: center; gap: 22px;
  min-height: 108px; padding: 18px 40px;
  background: var(--navy); color: var(--white); border-radius: 999px;
}
.stat__num { font-size: 30px; font-weight: 700; white-space: nowrap; }
.stat__text { font-size: 16px; font-weight: 700; line-height: 1.3; }

/* ==========================================================================
   Подводка + квиз
   ========================================================================== */
.quiz-section { padding: 70px 0 90px; scroll-margin-top: 20px; }
/* DS-044: заголовок и подзаголовок были левым краем, почти все остальные разделы — по
   центру (там это делает обёртка вроде .about__head); здесь такой обёртки нет, поэтому
   центрируем оба напрямую — text-align на сам блок и margin-inline:auto, чтобы уже
   заданный max-width не прижимал его к левому краю контейнера. */
.quiz-section .section-title { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.quiz-section .section-subtitle { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; }

.quiz {
  position: relative; margin-top: 60px;
  background: var(--white); border: 1px solid #f0f0f0; border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.quiz__progress { height: 5px; background: rgba(221, 80, 60, .2); }
.quiz__progress-bar { height: 100%; width: 20%; background: var(--accent); transition: width .3s; }
.quiz__body { padding: 40px 45px 30px; }
.quiz__intro { display: flex; align-items: center; gap: 18px; font-size: 18px; line-height: 1.4; }
.quiz__intro img { width: 110px; height: auto; flex: none; margin-top: 2px; }

.quiz__step { display: none; margin-top: 50px; }
.quiz__step.is-active { display: block; }
.quiz__step-title { font-size: 30px; line-height: 1.2; font-weight: 700; margin-bottom: 26px; }
.quiz__step-grid { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
.quiz__step-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.quiz__step-media picture { height: 100%; }
.quiz__step-media img { width: 100%; height: 100%; object-fit: cover; }

/* варианты-кнопки (radio) */
.choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 205px)); gap: 15px; }
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; min-height: 60px;
  background: var(--bg); border-radius: var(--radius);
  font-size: 20px; line-height: 1.2; cursor: pointer;
  transition: box-shadow .15s, background-color .15s;
}
.choice:hover { background: #efefef; }
.choice input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--orange); position: relative; background: var(--white);
}
.choice__mark::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--orange); transform: scale(0); transition: transform .15s;
}
.choice input[type="radio"]:checked + .choice__mark::after { transform: scale(1); }
.choice input[type="radio"]:focus-visible + .choice__mark { outline: 3px solid var(--orange); outline-offset: 2px; }
.choice--own { grid-column: 1 / -1; flex-wrap: wrap; }
.choice__own-label { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.choice--own input[type="text"] {
  flex: 1 1 160px; min-width: 0; background: transparent;
  border: 0; border-bottom: 1px solid #999; padding: 4px 0; font-size: 18px;
}
.choice--own input[type="text"]:focus { outline: none; border-bottom-color: var(--orange); }

/* варианты с картинками (checkbox) */
.style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.style-card { position: relative; cursor: pointer; display: block; }
.style-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.style-card__img {
  display: block; position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--white);
  transition: box-shadow .15s;
}
.style-card__img picture { height: 100%; }
.style-card__img img { width: 100%; height: 100%; object-fit: cover; }
.style-card__img::after {
  content: ''; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;
}
.style-card input:checked ~ .style-card__img { box-shadow: 0 0 0 3px var(--orange); }
.style-card input:checked ~ .style-card__img::after { opacity: 1; transform: scale(1); }
.style-card input:focus-visible ~ .style-card__img { outline: 3px solid var(--orange); outline-offset: 2px; }
.style-card__img--empty { display: flex; align-items: center; justify-content: center; font-size: 34px; color: #bbb; }
.style-card__text { display: block; margin-top: 10px; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center; }
.quiz__hint { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* финальный шаг */
.quiz__final { max-width: 560px; }
.quiz__final-list { font-size: 18px; line-height: 1.5; margin: 14px 0 34px; }
.quiz__label { display: block; font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.quiz__note { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.quiz__input {
  width: 100%; max-width: 420px; height: 60px; padding: 0 22px;
  background: var(--bg); border: 2px solid transparent; border-radius: var(--radius);
  font-size: 20px;
}
.quiz__input:focus { outline: none; border-color: var(--orange); }
.quiz__input.is-invalid { border-color: var(--accent); }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 4px;
  border: 2px solid var(--orange); background: var(--white); position: relative;
}
.consent__box::after {
  content: ''; position: absolute; inset: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7700' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
}
.consent input:checked + .consent__box::after { opacity: 1; }
.consent input:focus-visible + .consent__box { outline: 3px solid var(--orange); outline-offset: 2px; }
.consent.is-invalid .consent__box { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(221, 80, 60, .25); }
.consent a { text-decoration: underline; }

.quiz__error {
  display: none; margin-top: 16px; padding: 12px 16px;
  background: #fdecea; color: #a22; border-radius: 8px; font-size: 15px;
}
.quiz__error.is-visible { display: block; }

.quiz__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid #f0f0f0;
}
.quiz__meta { display: flex; align-items: center; gap: 16px; font-size: 12px; line-height: 1.35; max-width: 460px; }
.quiz__counter { color: var(--muted); white-space: nowrap; }
.quiz__nav { display: flex; gap: 8px; flex: none; }
.quiz__prev { width: 50px; min-height: 50px; padding: 0; }
.quiz__prev[hidden], .quiz__next[hidden], .quiz__submit[hidden] { display: none; }
.quiz__next, .quiz__submit { min-height: 50px; padding: 12px 30px; font-size: 16px; }
.quiz__submit { min-width: 200px; }
.quiz__submit.is-loading { opacity: .7; pointer-events: none; }
.quiz__nav svg { width: 16px; height: 16px; }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ==========================================================================
   Портфолио
   ========================================================================== */
.portfolio { position: relative; overflow: hidden; padding: 50px 0 100px; background: var(--bg-warm); }
.portfolio__head { text-align: center; }
.portfolio__list { margin-top: 50px; display: grid; gap: 50px; }
.project {
  display: grid; grid-template-columns: 560px minmax(0, 1fr) 188px; gap: 0 40px; align-items: start;
  min-height: 402px; background: var(--bg); border-radius: var(--radius);
}
.project__info { padding: 20px 0 20px 8px; }
.project__title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.project__facts { margin: 22px 0 24px; font-size: 18px; line-height: 1.35; }
.project__facts li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.project__facts li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
}
.project__note { font-size: 13px; margin-bottom: 14px; }
.project__btn { width: 100%; max-width: 360px; min-height: 76px; font-size: 18px; }
.project__review { border-radius: 10px; overflow: hidden; }
.project__review img { width: 100%; height: auto; }

.more-projects { position: relative; margin-top: 90px; text-align: center; }
.more-projects__title { font-size: 26px; font-weight: 700; }
.more-projects .slider { max-width: 840px; margin: 40px auto 0; }
.portfolio__tape { position: absolute; left: -60px; bottom: 40px; width: 300px; z-index: 0; pointer-events: none; }
.more-projects .slider { z-index: 1; }

/* ---------- Слайдер ---------- */
.slider { position: relative; border-radius: var(--radius); overflow: hidden; background: #e8e5e0; }
.slider__track { display: flex; transition: transform .35s ease; will-change: transform; }
.slider__slide { flex: 0 0 100%; min-width: 0; }
.slider__slide img { width: 100%; height: auto; display: block; }
.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: #222;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); transition: background-color .15s;
}
.slider__btn:hover { background: #fff; }
.slider__btn svg { width: 18px; height: 18px; }
.slider__btn--prev { left: 12px; }
.slider__btn--next { right: 12px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.slider__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: background-color .15s, transform .15s; }
.slider__dot.is-active { background: #fff; transform: scale(1.3); }
.slider__count {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px;
}

/* ==========================================================================
   Баннер-призыв (между секциями) — ведёт к квизу
   ========================================================================== */
.cta-banner { padding: 60px 0; background: var(--bg); }
.cta-banner__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 50px; align-items: center;
  padding: 40px 50px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.cta-banner .section-subtitle { font-size: 18px; margin-top: 10px; }
.cta-banner .btn { min-height: 76px; padding: 16px 36px; font-size: 18px; max-width: 380px; }
/* Пара Telegram+MAX в правой колонке cta-banner (DS-032): колонка — auto по ширине
   контента, поэтому у пары свой max-width — иначе две кнопки по 380px растянули бы
   колонку и сжали текст слева; при нехватке места перенос внутри пары, а не поломка
   сетки. */
.cta-banner__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
.cta-banner__actions .btn { max-width: 230px; padding: 12px 20px; font-size: 16px; gap: 8px; }
.cta-banner__actions .btn__icon { width: 16px; height: 16px; }

/* ==========================================================================
   «Что ещё важно о нас знать»
   ========================================================================== */
.about { position: relative; overflow: hidden; padding: 60px 0 80px; background: var(--bg); }
.about__head { text-align: center; }
.about__list { margin-top: 60px; display: grid; gap: 60px; position: relative; z-index: 1; }
.feature { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 40px; align-items: start; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) 560px; }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 560 / 324; background: #e6e6e6; }
.feature__media picture { height: 100%; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__title { font-size: 30px; line-height: 1.2; font-weight: 400; margin-top: 8px; }
.feature__text { font-size: 18px; line-height: 1.4; margin-top: 16px; }
.feature__text p + p { margin-top: 14px; }
.about__samples { position: absolute; left: -190px; top: 400px; width: 273px; z-index: 0; pointer-events: none; }
.about__circle { position: absolute; border-radius: 50%; background: var(--pink); opacity: .85; pointer-events: none; }
.about__circle--1 { width: 150px; height: 150px; right: -20px; top: 1720px; }
.about__circle--2 { width: 120px; height: 120px; right: -70px; top: 1820px; }
.about__circle--3 { width: 200px; height: 200px; left: -110px; bottom: -60px; }

/* ==========================================================================
   «О студии» на главной (DS-030): связный текст о компании — факты для
   поисковика и ИИ-поиска. Класс about переиспользован ради общих отступов
   и фона секции (как .about.remont-section на /remont); id другой — #about
   занят блоком «Что ещё важно о нас знать» выше по странице.
   ========================================================================== */
/* DS-046: текст — по центру, шириной ~820px, как подзаголовки разделов.
   Отступы блока (текст/сетка/кнопка) — подобраны так, чтобы вся секция на
   1280px не превышала высоту, что была у неё до этого задания (критерий 3):
   .about (padding 60/80) и .about__head (± та же высота у заголовка) не
   трогаем — они общие с другими секциями на .about, не входят в scope. */
.about-studio__text { margin: 30px auto 0; max-width: 820px; text-align: center; font-size: 18px; line-height: 1.4; position: relative; z-index: 1; }
.about-studio__text p + p { margin-top: 10px; }
.about-studio__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.about-studio__text a:hover { color: var(--accent); }

/* Сетка фактов: 4 в ряд на ≥1025px (переопределяется на 2 ниже, в общем блоке
   @media (max-width: 1024px)), карточки одной высоты в ряду — по умолчанию у
   grid-элементов (align-items: stretch). Тень/скругление — как у .remont-card. */
.about-studio__facts {
  margin: 40px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  position: relative; z-index: 1;
}
.about-studio__fact {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px 18px; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  text-decoration: none; color: inherit;
}
a.about-studio__fact { transition: box-shadow .15s; }
a.about-studio__fact:hover, a.about-studio__fact:focus-visible { box-shadow: 0 30px 40px -10px rgba(0, 0, 0, .22); }
.about-studio__fact-num { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--accent); }
.about-studio__fact--dark .about-studio__fact-num { color: var(--text); }
.about-studio__fact-label { font-size: 13px; line-height: 1.3; color: var(--muted); }

.about-studio__cta { margin-top: 36px; text-align: center; position: relative; z-index: 1; }
.about-studio__cta-note { margin-top: 10px; font-size: 15px; color: var(--muted); }
.about-studio__cta-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.about-studio__cta-note a:hover { color: var(--accent); }

/* ==========================================================================
   FAQ на «/», «/remont», «/mebel» (DS-030): нативные <details> — раскрытие
   без JS. Текст 1:1 дублируется в JSON-LD FAQPage в <head> той же страницы.
   ========================================================================== */
.faq { padding: 60px 0 70px; background: var(--bg-warm); }
/* DS-044: заголовок «Частые вопросы» — по центру, сами вопросы/ответы — как есть, влево. */
.faq .section-title { text-align: center; }
.faq__list { margin: 40px 0 0; display: grid; gap: 16px; }
.faq__item { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 4px 28px; }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 40px 20px 0; font-size: 19px; font-weight: 700; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] summary::after { margin-top: -4px; transform: rotate(-135deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.faq__answer { font-size: 17px; line-height: 1.5; color: var(--muted); padding-bottom: 24px; }
.faq__answer a { color: var(--accent); }
.faq__answer a:hover { color: var(--accent-hover); }

/* ==========================================================================
   Контакты
   ========================================================================== */
/* Карточка «Где мы» отвечает за «где» (адрес, часы, кнопка на карточку организации в
   Яндекс Картах), карточка «Наши контакты» — за «как связаться сейчас». На десктопе это
   две колонки внутри общего контейнера, одной высоты (align-items: stretch). Раньше
   вместо «Где мы» был виджет Яндекс Карт — убран в DS-033: у бесплатного виджета снизу
   реклама Яндекс Директа, убрать её параметром нельзя, только вместе с самим виджетом;
   ключ JS API (своя карта без рекламы) не заводим — решение владельца. */
.contacts { background: var(--bg-map); }
.contacts__inner {
  padding: 120px 0; display: grid;
  grid-template-columns: minmax(380px, 460px) 1fr; gap: 40px; align-items: stretch;
}
.contacts__card {
  padding: 60px 60px 56px;
  background: var(--ink); color: var(--white); border-radius: var(--radius);
}
.contacts__title { font-size: 30px; font-weight: 700; }
.contacts__phone { display: inline-block; margin-top: 32px; font-size: 20px; color: var(--accent-light); text-decoration: underline; }
.contacts__hours { margin-top: 4px; opacity: .8; }
.contacts__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.contacts__action { width: 100%; }
/* Внутри тёмной карточки обычный .btn--outline (рамка/текст цвета --accent) не читается —
   тут своя, белая версия того же паттерна, остальные .btn--outline на сайте не трогает. */
.contacts__action.btn--outline { color: var(--white); border-color: var(--white); }
.contacts__action.btn--outline:hover { background: rgba(255, 255, 255, .12); }
.contacts__action-icon { width: 20px; height: 20px; flex: none; }

/* «Где мы» (DS-033, п. 2 ревью): светлая карточка — контраст тёмной .contacts__card
   рядом; тот же набор отступов/радиуса/тени, что у неё, но фон белый, поэтому обычный
   .btn--outline (без белой версии, как у .contacts__action) читается сам по себе. Адрес
   и ссылка на Яндекс Карты раньше дублировались в обеих карточках — теперь только
   здесь; кнопка идёт сразу за текстом (не прижата к низу), чтобы не было пустого
   промежутка в середине — карточки всё равно одной высоты (align-items: stretch у
   .contacts__inner), а лишняя высота, если она есть, остаётся полем снизу, под сноской. */
.contacts__where {
  padding: 60px 60px 56px; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.contacts__where-address { margin-top: 32px; font-size: 20px; font-weight: 700; line-height: 1.35; }
.contacts__where-text { margin-top: 14px; font-size: 15px; line-height: 1.45; opacity: .75; }
.contacts__where-btn { width: 100%; margin-top: 24px; }
.contacts__where-note { margin-top: 14px; font-size: 13px; line-height: 1.4; opacity: .6; text-align: center; }

/* ==========================================================================
   Футер
   ========================================================================== */
.site-footer { background: #000; color: var(--white); padding: 24px 0 26px; font-size: 12px; line-height: 1.35; }
.site-footer__inner { display: flex; justify-content: space-between; gap: 30px; }
.site-footer__brand { display: flex; gap: 16px; align-items: flex-start; }
.site-footer__logo { width: 170px; flex: none; }
.site-footer__slogan { max-width: 170px; font-size: 14px; line-height: 1.3; opacity: .75; }
/* Ссылки на разделы — навигация, не сноска: крупнее и без подчёркивания по умолчанию
   (DS-027, было 12 px наследуемых от .site-footer и подчёркнуто всегда). */
.site-footer__policy {
  display: inline-block; margin-top: 10px; font-size: 16px; line-height: 1.2; opacity: 1;
  text-decoration: none;
}
.site-footer__policy:hover, .site-footer__policy:focus-visible { text-decoration: underline; }
.site-footer__slogan + .site-footer__policy { margin-top: 16px; }
/* Политика — не раздел сайта, а сноска: стоит последней перед реквизитами и в их
   стиле, чтобы навигация (разделы выше) не терялась среди служебных ссылок. */
.site-footer__policy--legal { font-size: 13px; opacity: .6; }
.site-footer__legal { margin-top: 18px; font-size: 13px; line-height: 1.25; opacity: .6; }
.site-footer__contact { text-align: right; }
.site-footer__contact .header-contact__label { font-size: 15px; }
.site-footer__credit { display: inline-block; margin-top: 18px; font-weight: 700; }

/* ==========================================================================
   Страница «Спасибо»
   ========================================================================== */
.thanks-hero { padding: calc(138px + var(--nav-h)) 0 80px; min-height: 100vh; } /* DS-031: +8px */
.thanks-hero .hero__grid { align-items: center; }
.thanks-hero .hero__title { font-size: 48px; }
.thanks-hero .hero__cta { margin-top: 44px; max-width: 420px; }
.thanks-hero .hero__cta .btn { min-height: 90px; }
.thanks-hero .hero__visual { min-height: 520px; }
.thanks-hero .hero__manager { width: 420px; right: 0; }

/* ==========================================================================
   Ссылки на бот поддержки (DS-003)
   ========================================================================== */
.site-footer__msgs { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.site-footer__msg { font-size: 15px; }
/* Telegram + MAX в строку рядом (DS-032): .hero__cta задаёт .btn { width: 100% } всем
   кнопкам подряд, здесь это переопределено, чтобы пара делила строку пополам. */
.thanks-hero__msgs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
/* уже, чем обычная кнопка: пара делит 420px .hero__cta пополам, поэтому размер и
   паддинги меньше, чтобы «Написать в Telegram»/«Написать в MAX» не переносились */
.thanks-hero .thanks-hero__msgs .btn { width: auto; flex: 1 1 180px; min-height: 56px; padding: 10px 16px; font-size: 15px; gap: 8px; }
.thanks-hero__msgs .btn__icon { width: 16px; height: 16px; }
.policy__revision { margin: 0 0 12px; font-size: 15px; color: var(--muted); }

@media (max-width: 768px) {
  /* Мессенджеры в мобильной шапке — иконками без текста (DS-028): в одну строку не
     влезли бы подписи «Telegram»/«MAX» рядом с телефоном. Область клика 40×40 px даёт
     псевдоэлемент, а не padding — сама иконка 24 px, чтобы не раздувать и без того
     тесную фиксированную шапку по высоте (лимит из задания — не больше +28 px). */
  .header-contact__msgs { justify-content: flex-end; gap: 8px; margin-top: 3px; }
  .header-contact__msgs .msg-link { position: relative; }
  .header-contact__msgs .msg-link::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px; transform: translate(-50%, -50%);
  }
  .header-contact__msgs .msg-link__icon { width: 24px; height: 24px; }
  .header-contact__msgs .msg-link__text { display: none; }
  /* Разделы сайта на телефоне — в подвале, здесь строка только растит фиксированную шапку.
     --nav-h = 0, чтобы отступы hero через calc() не считали скрытую полосу. Сама шапка
     со строкой иконок — 93 px (--hdr-h-mobile), мобильные отступы hero считаются от неё:
     иначе бейдж первого экрана прилипает к шапке (ревью 2 DS-028). */
  :root { --nav-h: 0px; }
  .site-nav { display: none; }
  .thanks-hero__msgs { flex-direction: column; gap: 10px; }
  .thanks-hero .thanks-hero__msgs .btn { width: 100%; flex: none; min-height: 56px; padding: 14px 24px; font-size: 16px; gap: 10px; }
  .thanks-hero__msgs .btn__icon { width: 18px; height: 18px; }
}

/* ==========================================================================
   Страница «Политика конфиденциальности»
   ========================================================================== */
.page-header { position: static; background: var(--navy); color: var(--white); padding: 14px 0; }
.page-header .header-contact__phone { color: var(--white); }
.policy { padding: 60px 0 90px; max-width: 900px; font-size: 16px; line-height: 1.6; }
.policy h1 { font-size: 34px; line-height: 1.2; font-weight: 700; margin-bottom: 30px; }
.policy h2 { font-size: 22px; font-weight: 700; margin: 36px 0 14px; }
.policy p { margin: 0 0 12px; }
.policy ul { list-style: disc; padding-left: 24px; margin: 0 0 12px; }
.policy li { margin-bottom: 6px; }
.policy a { text-decoration: underline; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1240px) {
  .hero__manager { right: -20px; width: 420px; }
  .project { grid-template-columns: 480px minmax(0, 1fr) 170px; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .section-title { font-size: 32px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .hero__title { font-size: 38px; }
  .hero__visual { min-height: 520px; }
  .hero__manager { width: 340px; right: -30px; }
  .hero__phone { width: 110px; left: 0; }
  .stats { grid-template-columns: 1fr; }
  .quiz__step-grid { grid-template-columns: 1fr 320px; }
  .style-grid { grid-template-columns: repeat(3, 1fr); }
  .project { grid-template-columns: minmax(0, 1fr) 170px; }
  .project .slider { grid-column: 1 / -1; }
  .project__info { padding: 24px 0 24px 24px; }
  .project__review { margin: 24px 24px 24px 0; }
  .contacts__inner { grid-template-columns: minmax(320px, 1fr) 1fr; }
  .about-studio__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .section-title { font-size: 26px; }
  .section-subtitle { font-size: 16px; }

  /* фиксированная тёмная шапка, как в мобильной версии оригинала */
  .site-header { position: fixed; padding: 8px 0; background: var(--navy); color: var(--white); }
  .site-header.page-header { position: static; }
  /* margin-bottom из десктопного правила — только под полосу навигации, которой здесь
     нет (DS-031, п. 3: на ≤ 768 px ничего не меняем, высота шапки та же). */
  .site-header__inner { gap: 10px; margin-bottom: 0; }
  .brand__icon { width: 44px; height: 44px; }
  .brand__icon--dark { display: none; }
  .brand__icon--light { display: block; }
  .brand__text { font-size: 10px; max-width: 130px; }
  .header-city { display: none; }
  .header-contact__label { font-size: 12px; }
  .header-contact__phone { font-size: 16px; }
  .header-contact__hours { font-size: 10px; }

  /* шапка (--hdr-h-mobile) + зазор 29 px, как было при шапке 66 px и отступе 95 px */
  .hero { padding: calc(var(--hdr-h-mobile) + 29px) 0 30px; }
  .hero__bg::after { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .6) 100%); }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__badge { font-size: 18px; padding: 8px 12px; margin-bottom: 16px; }
  .hero__title { font-size: 30px; }
  .hero__lead { font-size: 16px; margin-top: 14px; }
  .hero__visual { min-height: 300px; margin-top: 10px; order: 2; }
  .hero__manager { width: 220px; right: 0; bottom: 0; }
  .hero__phone { width: 120px; left: 10px; bottom: 20px; }
  .hero__cta { order: 3; margin-top: 30px; max-width: none; }
  .hero__cta .btn { min-height: 90px; font-size: 20px; }
  .hero__arrow { right: auto; left: 14px; top: -78px; bottom: auto; transform: scaleY(-1) rotate(-160deg) scale(.9); }
  .hero__free { font-size: 12px; }
  .hero__limit { order: 4; font-size: 15px; }
  .hero__text { display: contents; }
  .stats { gap: 14px; margin-top: 24px; }
  .stat { min-height: 100px; padding: 16px 30px; }
  .stat__num { font-size: 28px; }
  .stat__text { font-size: 17px; }

  .quiz-section { padding: 40px 0 50px; }
  .quiz { margin-top: 30px; border-radius: 12px; }
  .quiz__body { padding: 24px 18px 20px; }
  .quiz__intro { font-size: 15px; }
  .quiz__step { margin-top: 30px; }
  .quiz__step-title { font-size: 22px; margin-bottom: 18px; }
  .quiz__step-grid { grid-template-columns: 1fr; gap: 20px; }
  .quiz__step-media { aspect-ratio: 16 / 9; order: -1; }
  .choice-list { grid-template-columns: 1fr; gap: 10px; }
  .choice { font-size: 17px; padding: 14px 16px; min-height: 52px; }
  .style-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .style-card__text { font-size: 14px; }
  .quiz__final-list { font-size: 16px; }
  .quiz__input { height: 54px; font-size: 18px; }
  .quiz__footer { flex-direction: column-reverse; align-items: stretch; margin-top: 28px; }
  .quiz__nav { justify-content: stretch; }
  .quiz__next, .quiz__submit { flex: 1; }
  .quiz__meta { flex-direction: column; align-items: flex-start; gap: 6px; }

  .portfolio { padding: 40px 0 60px; }
  .portfolio__list { margin-top: 30px; gap: 30px; }
  .project { grid-template-columns: 1fr; min-height: 0; }
  .project__info { padding: 20px 18px 6px; }
  .project__title { font-size: 22px; }
  .project__facts { font-size: 16px; margin: 16px 0 18px; }
  .project__btn { max-width: none; min-height: 64px; font-size: 16px; }
  .project__review { margin: 18px auto 24px; width: 170px; }
  .more-projects { margin-top: 50px; }
  .more-projects__title { font-size: 22px; }
  .more-projects .slider { margin-top: 20px; }
  .portfolio__tape { display: none; }

  .cta-banner { padding: 40px 0; }
  .cta-banner__inner { grid-template-columns: 1fr; padding: 28px 22px; }
  .cta-banner .btn { max-width: none; width: 100%; }

  .about { padding: 40px 0 60px; }
  .about__list { margin-top: 30px; gap: 36px; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature__title { font-size: 22px; }
  .feature__text { font-size: 16px; }
  .about__samples, .about__circle--1, .about__circle--2 { display: none; }
  .about__circle--3 { width: 140px; height: 140px; left: -70px; bottom: -40px; }

  .about-studio__text { margin-top: 24px; font-size: 16px; }
  .about-studio__facts { margin-top: 30px; gap: 12px; }
  .about-studio__fact { padding: 18px 16px; }
  .about-studio__fact-num { font-size: 22px; }
  .about-studio__cta { margin-top: 28px; }

  .faq { padding: 40px 0 50px; }
  .faq__list { margin-top: 24px; gap: 12px; }
  .faq__item { padding: 2px 20px; }
  .faq__item summary { font-size: 17px; padding: 16px 32px 16px 0; }
  .faq__answer { font-size: 16px; padding-bottom: 18px; }

  .contacts__inner { display: block; padding: 40px 0 30px; }
  .contacts__card { padding: 36px 26px; }
  .contacts__title { font-size: 26px; }
  .contacts__phone { font-size: 18px; }
  /* «Где мы» — под карточкой контактов, во всю ширину (DS-033, п. 4). */
  .contacts__where { margin-top: 24px; padding: 36px 26px; }
  .contacts__where-address { font-size: 18px; }

  .site-footer__inner { flex-direction: column; gap: 22px; }
  /* Логотипу и колонке текста вдвоём не хватает ширины на телефоне — логотип отдельной
     строкой сверху (DS-027, было в одну строку, логотип уходил под текст). */
  .site-footer__brand { flex-direction: column; gap: 10px; }
  .site-footer__logo { width: 150px; }
  .site-footer__contact { text-align: left; }
  .site-footer__msgs { justify-content: flex-start; flex-wrap: wrap; }

  .thanks-hero { padding: calc(var(--hdr-h-mobile) + 29px) 0 50px; min-height: 0; }
  .thanks-hero .hero__title { font-size: 32px; }
  .thanks-hero .hero__visual { min-height: 300px; }
  .thanks-hero .hero__manager { width: 220px; }
  .policy { padding: 30px 0 60px; }
  .policy h1 { font-size: 26px; }
  .policy h2 { font-size: 19px; }
}

@media (max-width: 400px) {
  .brand__text { max-width: 110px; }
  .hero__title { font-size: 27px; }
  .hero__manager { width: 190px; }
  .hero__phone { width: 105px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slider__track { transition: none; }
}

/* ==========================================================================
   Страница «Ремонт» (/remont) — DS-010
   Только новые классы с префиксом remont-: правила выше общие для всех страниц
   и не меняются, иначе поедет главная.
   ========================================================================== */
/* первый экран без человека: фото прораба и руководителя у студии нет, поэтому
   оффер и кнопка занимают его целиком (DS-010 § 3) */
.remont-hero { padding: calc(158px + var(--nav-h)) 0 50px; } /* DS-031: +8px */
.remont-hero .hero__grid { grid-template-columns: minmax(0, 1fr); }
.remont-hero .hero__text { max-width: 900px; margin: 0 auto; text-align: center; }
.remont-hero .hero__lead { max-width: 760px; margin-left: auto; margin-right: auto; }
.remont-hero .hero__cta { margin: 44px auto 0; max-width: 560px; }
.remont-hero__note { display: block; margin-top: 14px; font-size: 15px; }

/* в плашках не цифра, а короткая фраза — ей нужен перенос. min-width: 0 — иначе
   грид-ячейка (min-width: auto по умолчанию для flex-контейнера) не сжимается
   до ширины трека 1fr, и карточка вылезает за .remont-stats на 1025–1100px
   (воспроизведено: без этой строки текст длиннее исходного тянет карточку за
   пределы контейнера, при этом document.scrollWidth не растёт — обрезает
   .hero { overflow: hidden }, баг не виден на проверке горизонтального скролла). */
.remont-stats .stat { padding: 18px 34px; gap: 18px; min-width: 0; }
.remont-stats .stat__num { white-space: normal; font-size: 26px; }
/* DS-035 ревью 2: на узких десктопах колонки текста внутри «пилюли» не хватает даже
   для сокращённых описаний — номер и текст в столбик, текст по центру, вместо
   строки. На ≥1280px — как в остальных .stats (число слева, текст справа). */
@media (min-width: 1025px) and (max-width: 1279px) {
  .remont-stats .stat { flex-direction: column; text-align: center; }
}

/* квиз ремонта: фотографий к вариантам нет, поэтому варианты занимают всю ширину */
.remont-quiz .quiz__step { margin-top: 0; }
.remont-quiz .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remont-quiz .quiz__final { max-width: 620px; }
.remont-quiz__label { margin-top: 22px; }
.remont-contact { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.remont-contact .quiz__label { margin-bottom: 10px; padding: 0; }
.remont-contact__list { grid-template-columns: repeat(2, minmax(0, 200px)); }

/* карточки «Как мы работаем» и «Что важно о нашей работе»:
   типографика и скругления блока «Что ещё важно о нас знать» */
.remont-section { padding: 60px 0 70px; }
.remont-cards {
  margin: 50px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  position: relative; z-index: 1;
}
.remont-card {
  padding: 30px 30px 32px; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.remont-card__num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  background: var(--navy); color: var(--white);
  border-radius: 50%; font-size: 20px; font-weight: 700;
}
.remont-card__title { font-size: 22px; line-height: 1.25; font-weight: 700; }
.remont-card__text { font-size: 17px; line-height: 1.45; margin-top: 12px; }

@media (max-width: 1024px) {
  .remont-hero { padding: calc(138px + var(--nav-h)) 0 40px; } /* DS-031: +8px */
  .remont-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .remont-hero { padding: calc(var(--hdr-h-mobile) + 29px) 0 30px; }
  .remont-hero .hero__text { text-align: left; }
  .remont-hero .hero__cta { margin-top: 30px; max-width: none; }
  .remont-hero__note { font-size: 14px; }
  .remont-stats .stat__num { font-size: 22px; }
  .remont-quiz .choice-list { grid-template-columns: 1fr; }
  .remont-contact__list { grid-template-columns: 1fr; }
  .remont-section { padding: 40px 0 50px; }
  .remont-cards { margin-top: 30px; grid-template-columns: 1fr; gap: 16px; }
  .remont-card { padding: 22px 20px 24px; }
  .remont-card__title { font-size: 20px; }
  .remont-card__text { font-size: 16px; }
}

/* ==========================================================================
   Переход между направлениями (DS-013)
   Тёмная карточка, чтобы баннер «Ремонт» и идущий следом cta-banner
   не читались как один и тот же блок, напечатанный дважды.
   ========================================================================== */
.remont-cross { background: var(--bg); }
.remont-cross__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 50px; align-items: center;
  padding: 36px 50px; background: var(--ink); color: var(--white); border-radius: var(--radius);
}
.remont-cross__title { font-size: 30px; line-height: 1.2; font-weight: 700; }
.remont-cross__text { font-size: 18px; line-height: 1.4; margin-top: 12px; }
.remont-cross .btn { min-height: 76px; padding: 16px 36px; font-size: 18px; max-width: 380px; }

/* ссылка на соседнее направление в подвале — строкой под политикой */
.site-footer__crosslink { display: block; }

@media (max-width: 768px) {
  .remont-cross__inner { grid-template-columns: 1fr; padding: 26px 22px; }
  .remont-cross__title { font-size: 22px; }
  .remont-cross__text { font-size: 16px; }
  .remont-cross .btn { width: 100%; max-width: none; min-height: 64px; font-size: 16px; }
}

/* ==========================================================================
   Фото-карточки на /remont: виды работ и примеры объектов (DS-014, фото — DS-015)
   Картинка идёт целиком, 1:1: это коллаж из четырёх снимков, и object-fit: cover
   срезал бы часть кадра. Подписей на фотографиях больше нет — их убрал владелец.
   ========================================================================== */
.remont-section__lead { max-width: 820px; margin-left: auto; margin-right: auto; }
.remont-card--photo { padding: 0; overflow: hidden; }
.remont-card__media { display: block; background: #e6e6e6; }
.remont-card__media img { width: 100%; height: auto; }
a.remont-card__media { transition: opacity .15s; }
a.remont-card__media:hover { opacity: .9; }
.remont-card__body { padding: 22px 26px 26px; }
.remont-card__body .remont-card__title { font-size: 21px; }

@media (max-width: 768px) {
  .remont-card__body { padding: 18px 20px 22px; }
  .remont-card__body .remont-card__title { font-size: 19px; }
}

/* ==========================================================================
   Сноска под плашками первого экрана (DS-020)
   Раскрывает «от 900 ₽/м²»: за что эта цена, а за что 1 500 в карточках проектов.
   Лежит на светлой части подложки первого экрана, поэтому цвет — общий приглушённый
   var(--muted), как у подписей квиза, а не белый, как внутри самих плашек.
   ========================================================================== */
.stats__note { margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--muted); max-width: 760px; }

@media (max-width: 768px) {
  .stats__note { font-size: 14px; margin-top: 12px; }
}

/* ==========================================================================
   Мебель: страница /mebel и блок «Мебель тоже делаем сами» (DS-022)
   Картинки каталога вынуты из PDF владельца и больше 460 px в нём нет, поэтому
   карточка ограничена по ширине, а не картинка растянута: на широких экранах
   ряд просто не расползается. Шире 460 CSS-px изображение станет мыльным.
   ========================================================================== */
.mebel-hero { padding: calc(138px + var(--nav-h)) 0 50px; } /* DS-031: +8px */
.mebel-hero .hero__title { max-width: 900px; }
.mebel-hero__lead { font-size: 20px; line-height: 1.4; margin-top: 18px; max-width: 720px; }
.mebel-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 32px; }
.mebel-hero__phone { font-size: 20px; font-weight: 700; text-decoration: underline; }

/* оглавление: шесть разделов ссылками, чтобы 30 карточек не были стеной */
.mebel-toc { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.mebel-toc a {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-card);
  font-size: 16px; font-weight: 700;
}
.mebel-toc a:hover { background: var(--navy); color: var(--white); }

.mebel-section { padding: 60px 0 10px; scroll-margin-top: 20px; }
.mebel-section:first-of-type { padding-top: 40px; }
.mebel-cards {
  margin: 30px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 460px)); gap: 24px; justify-content: start;
}
.mebel-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.mebel-card__media { display: block; background: #e6e6e6; aspect-ratio: 3 / 4; overflow: hidden; transition: opacity .15s; }
.mebel-card__media:hover { opacity: .9; }
.mebel-card__media img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.mebel-card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.mebel-card__title { font-size: 21px; line-height: 1.25; font-weight: 700; }
.mebel-card__text { font-size: 16px; line-height: 1.45; margin-top: 10px; }
.mebel-card__feat { font-size: 14px; line-height: 1.45; margin-top: 12px; color: var(--muted); }

/* Блок-приглашение на /mebel с главной и с /remont. Светлый: тёмный баннер
   на этих страницах уже есть (remont-cross), два подряд слиплись бы. */
.mebel-cross { background: var(--bg); padding: 10px 0 0; }
.mebel-cross__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 50px; align-items: center;
  padding: 34px 44px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.mebel-cross__title { font-size: 30px; line-height: 1.2; font-weight: 400; }
.mebel-cross__title strong { font-weight: 700; }
.mebel-cross__text { font-size: 18px; line-height: 1.4; margin-top: 12px; }
.mebel-cross__shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mebel-cross__shots img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.mebel-cross .btn { min-height: 76px; padding: 16px 36px; font-size: 18px; max-width: 380px; }

@media (max-width: 1024px) {
  .mebel-cards { grid-template-columns: repeat(2, minmax(0, 460px)); }
}

@media (max-width: 768px) {
  .mebel-hero { padding: calc(var(--hdr-h-mobile) + 34px) 0 36px; }
  .mebel-hero__lead { font-size: 17px; }
  /* ревью DS-032: на телефоне Telegram/MAX должны быть одной ширины (во всю ширину
     контейнера), а не по ширине текста — иначе пара выглядит рвано */
  .mebel-hero__cta { flex-direction: column; align-items: stretch; }
  .mebel-hero__cta .btn { width: 100%; }
  .mebel-section { padding: 40px 0 6px; }
  .mebel-cards { grid-template-columns: minmax(0, 460px); gap: 16px; }
  .mebel-card__title { font-size: 19px; }
  .mebel-card__text { font-size: 15px; }
  .mebel-cross__inner { grid-template-columns: 1fr; padding: 24px 20px; }
  .mebel-cross__title { font-size: 22px; }
  .mebel-cross__text { font-size: 16px; }
  .mebel-cross__shots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mebel-cross__shots img { height: 150px; }
  .mebel-cross .btn { width: 100%; max-width: none; min-height: 64px; font-size: 16px; }
}

/* ==========================================================================
   Гид по стилям: страница /styles и блок на «Спасибо» (DS-023)
   Иллюстрации стилей нарезаны из гида владельца, 684x818 — это ровно колонка
   страницы PDF, больше в исходнике нет. Поэтому сетка 2x2 ограничена по ширине,
   а не растянута: на широких экранах кадр не поднимается выше исходного размера.
   ========================================================================== */
.styles-hero { padding: calc(138px + var(--nav-h)) 0 46px; } /* DS-031: +8px */
.styles-hero .hero__title { max-width: 900px; }
.styles-hero__lead { font-size: 20px; line-height: 1.4; margin-top: 18px; max-width: 760px; }
.styles-hero .btn { margin-top: 30px; max-width: 460px; min-height: 76px; font-size: 18px; }

.styles-toc { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.styles-toc a {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-card);
  font-size: 16px; font-weight: 700;
}
.styles-toc a:hover { background: var(--navy); color: var(--white); }

.style-block { padding: 56px 0 0; scroll-margin-top: 20px; }
.style-block__inner {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 30px 46px; align-items: center;
}
/* каждый второй блок — фотографии справа, текст слева. Класс ставится в разметке,
   а не через :nth-of-type: на странице есть и другие <section>, и счёт бы сбился. */
.style-block--flip .style-block__shots { order: 2; }
.style-block__shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.style-block__shots img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); background: #e6e6e6; }
.style-block__title { font-size: 32px; line-height: 1.15; font-weight: 700; }
.style-block__meta { margin-top: 10px; font-size: 15px; color: var(--muted); }
.style-block__meta b { font-weight: 700; color: var(--ink); }
.style-block__text { font-size: 17px; line-height: 1.5; margin-top: 16px; }
.style-block__fit { font-size: 16px; line-height: 1.45; margin-top: 14px; }
.style-block__fit b { font-weight: 700; }

/* «Пока ждёте звонка» на странице «Спасибо» */
.thanks-styles {
  margin-top: 30px; padding: 24px 28px; max-width: 560px;
  background: rgba(255, 255, 255, .86); border-radius: var(--radius);
}
.thanks-styles__title { font-size: 20px; font-weight: 700; }
.thanks-styles__text { font-size: 16px; line-height: 1.45; margin-top: 8px; }
.thanks-styles .btn { margin-top: 16px; min-height: 60px; font-size: 16px; padding: 14px 28px; }

@media (max-width: 1024px) {
  .style-block__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .style-block--flip .style-block__shots { order: 0; }
  .style-block__shots { max-width: 560px; }
}

@media (max-width: 768px) {
  .styles-hero { padding: calc(var(--hdr-h-mobile) + 34px) 0 32px; }
  .styles-hero__lead { font-size: 17px; }
  .styles-hero .btn { width: 100%; max-width: none; min-height: 64px; font-size: 16px; }
  .style-block { padding: 36px 0 0; }
  .style-block__title { font-size: 24px; }
  .style-block__text { font-size: 16px; }
  .style-block__shots { gap: 8px; }
  .thanks-styles { padding: 20px 20px; }
  .thanks-styles__title { font-size: 18px; }
  .thanks-styles .btn { width: 100%; }
}

/* ==========================================================================
   Модалка с фото (лайтбокс, DS-034) — нативный <dialog>: фокус внутри,
   Esc и блокировка страницы под модалкой работают без ручного кода.
   ========================================================================== */
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
.lightbox { padding: 0; margin: 0; border: none; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lightbox__figure picture { display: block; max-width: 92vw; max-height: 76vh; }
.lightbox__figure img { display: block; max-width: 92vw; max-height: 76vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { display: flex; align-items: center; gap: 16px; color: var(--white); font-size: 16px; text-align: center; }
.lightbox__counter { opacity: .7; font-size: 14px; }
.lightbox__close, .lightbox__nav {
  position: fixed; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .12); color: var(--white); cursor: pointer; transition: background-color .15s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox__close svg, .lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) {
  .lightbox__close, .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__close { top: 10px; right: 10px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__figure { max-width: 96vw; max-height: 90vh; gap: 10px; }
  .lightbox__figure picture, .lightbox__figure img { max-width: 96vw; max-height: 78vh; }
  .lightbox__caption { font-size: 14px; }
}

/* ==========================================================================
   /remont: портфолио с бюджетами, кейс с документами, этапы, доверие (DS-037,
   презентация Романа 25.09). Стили новых блоков — здесь, в конце файла.
   ========================================================================== */

/* строка гарантии/замера/срока под ценами в hero */
.remont-hero__terms { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--navy); }

/* портфолио: основной ряд — карточки с бюджетом и что сделано */
.portfolio-grid {
  margin: 50px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.portfolio-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
/* рамка одной пропорции на все четыре карточки (851×731 у новых коллажей, 1135×1135
   у старых квадратных) — через padding-top в процентах, а не aspect-ratio: внутри
   грида aspect-ratio на карточках разной ширины давал разную высоту (переверено,
   баг ревью), padding-percentage от собственной ширины блока работает надёжно. */
.portfolio-card__media { display: block; position: relative; padding-top: 75%; background: #e9e9e9; overflow: hidden; }
.portfolio-card__media picture { position: absolute; inset: 0; display: block; }
.portfolio-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
a.portfolio-card__media { transition: opacity .15s; }
a.portfolio-card__media:hover { opacity: .9; }
.portfolio-card__body { padding: 24px 26px 28px; }
.portfolio-card__title { font-size: 21px; line-height: 1.25; font-weight: 700; }
.portfolio-card__meta { margin-top: 4px; font-size: 15px; color: var(--muted); }
.portfolio-card__price { margin-top: 18px; }
.portfolio-card__budget { display: block; font-size: 26px; font-weight: 700; color: var(--navy); }
.portfolio-card__budget-label { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.portfolio-card__breakdown { margin: 12px 0 0; display: grid; gap: 4px; }
.portfolio-card__breakdown div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.portfolio-card__breakdown dd { font-weight: 600; color: var(--ink); }
.portfolio-card__list { margin: 16px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.portfolio-card__list li { margin-top: 6px; }
.portfolio-card__list li:first-child { margin-top: 0; }
.portfolio-grid__note { margin: 20px 0 0; max-width: 760px; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* портфолио: «Ещё объекты» — старые карточки без цифр, визуально легче основного ряда */
.portfolio-more__title { margin: 60px 0 0; font-size: 22px; font-weight: 700; }
.portfolio-more { margin-top: 24px; }

/* кейс с документами */
.case__inner { margin-top: 50px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.case__media { display: block; border-radius: var(--radius); overflow: hidden; background: #e9e9e9; }
.case__media img { width: 100%; height: auto; display: block; }
a.case__media { transition: opacity .15s; }
a.case__media:hover { opacity: .9; }
.case__title { font-size: 24px; font-weight: 700; }
.case__meta { margin-top: 6px; font-size: 15px; color: var(--muted); }
.case__sums { margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case__sums dt { font-size: 13px; color: var(--muted); }
.case__sums dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--navy); }
.case__list { margin: 20px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.case__list li { margin-top: 6px; }
.case__list li:first-child { margin-top: 0; }
.case__docs-note { margin: 40px 0 0; max-width: 760px; font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.case-docs { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case-docs__item a { display: block; border-radius: var(--radius-sm); overflow: hidden; background: #e9e9e9; }
.case-docs__item img { width: 100%; height: auto; display: block; }
.case-docs__item a { transition: opacity .15s; }
.case-docs__item a:hover { opacity: .9; }
.case-docs__caption { margin: 10px 0 0; font-weight: 700; font-size: 15px; }
.case-docs__text { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }

/* этапы и оплата */
.stages-timeline {
  margin: 50px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.stages-timeline li { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 24px 18px; text-align: center; }
.stages-timeline__num { display: block; font-size: 19px; font-weight: 700; color: var(--navy); }
.stages-timeline p { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.stages-payment { margin-top: 40px; padding: 28px 34px; background: var(--navy); color: var(--white); border-radius: var(--radius); }
.stages-payment p { font-size: 17px; line-height: 1.5; }
.stages-payment strong { font-weight: 700; }

/* абзац про людей под сеткой фото работ (#works) */
.remont-section__note { margin: 40px auto 0; max-width: 760px; text-align: center; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* строка условий под финальным CTA */
.cta-banner__note { margin-top: 20px; text-align: center; font-size: 15px; color: var(--muted); }

@media (max-width: 1024px) {
  /* портфолио остаётся в две колонки на планшете (ревью: в одну — фото растягивались
     на весь экран, 845–984px в высоту, по экрану на карточку) */
  .case__inner { grid-template-columns: 1fr; }
  .stages-timeline { grid-template-columns: 1fr; }

  /* документы кейса — ряд с горизонтальной прокруткой вместо столбца (ревью:
     сократить длину страницы на телефоне без потери содержимого; задание это
     разрешало — «на телефоне — в столбец или горизонтальный скролл-ряд») */
  .case-docs {
    display: flex; grid-template-columns: none; overflow-x: auto; gap: 16px;
    padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .case-docs__item { flex: 0 0 72%; scroll-snap-align: start; }

  /* «Ещё объекты» — компактный ряд миниатюр вместо полноразмерных карточек
     (ревью: та же цель — короче страница на телефоне без удаления контента) */
  .portfolio-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .portfolio-more.remont-cards { margin-top: 24px; }
  .portfolio-more .remont-card { box-shadow: none; border-radius: var(--radius-sm); }
  .portfolio-more .remont-card__body { padding: 8px 4px; text-align: center; }
  .portfolio-more .remont-card__title { font-size: 13px; line-height: 1.3; }
}

@media (max-width: 600px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .portfolio-card__body { padding: 20px 20px 24px; }
  .portfolio-more__title { margin-top: 40px; font-size: 20px; }
  .case__inner { margin-top: 30px; gap: 20px; }
  .case__sums { grid-template-columns: 1fr; gap: 10px; }
  .case__docs-note { margin-top: 30px; font-size: 16px; }
  .stages-payment { padding: 22px 20px; }
  .remont-section__note { margin-top: 30px; font-size: 16px; }
}

/* ==========================================================================
   Меню сайта (DS-045): кнопка «Меню» на телефоне, закреплённая полоса на
   компьютере, общая панель меню для обеих. Без JS кнопка — обычная ссылка
   на #site-footer (подвал со всеми ссылками), ничего не ломается.
   ========================================================================== */
html.menu-open, html.menu-open body { overflow: hidden; }

/* Якоря меню и подвала не должны прятаться под мобильной фиксированной шапкой
   (--hdr-h-mobile) или закреплённой полосой на компьютере (56px) при переходе —
   запас у самих секций-целей, а не только у общего html (ID сильнее .quiz-section
   и .mebel-section, поэтому переопределяет их scroll-margin-top: 20px там, где эти
   секции совпадают с целями меню). */
#top, #quiz, #how, #portfolio, #case, #documents, #stages, #faq, #contacts, #about,
#kitchen, #living, #bedroom, #hall, #wardrobe, #kids {
  scroll-margin-top: 76px;
}
@media (max-width: 768px) {
  #top, #quiz, #how, #portfolio, #case, #documents, #stages, #faq, #contacts, #about,
  #kitchen, #living, #bedroom, #hall, #wardrobe, #kids {
    scroll-margin-top: calc(var(--hdr-h-mobile) + 20px);
  }
}

/* ---------- Кнопка «Меню» (переиспользуется в шапке на телефоне и в полосе
   на компьютере — сама видимость каждой зависит от контекста, см. ниже) ---------- */
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  color: inherit; text-decoration: none; cursor: pointer;
}
.menu-btn svg { width: 24px; height: 24px; }

/* ---------- Панель меню (<dialog>, как лайтбокс DS-034: top-layer сам решает
   конфликт по z-index с виджетом чата — переопределять z-index не нужно) ---------- */
.site-menu { padding: 0; margin: 0; border: none; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.site-menu[open] { display: flex; justify-content: flex-end; }
.site-menu::backdrop { background: rgba(0, 0, 0, .6); }
.site-menu__panel {
  position: relative; display: flex; flex-direction: column; gap: 28px;
  width: 100%; max-width: 400px; height: 100%; overflow-y: auto;
  background: var(--navy); color: var(--white);
  padding: 70px 24px 32px;
  transform: translateX(100%); transition: transform .25s ease;
}
.site-menu.is-open .site-menu__panel { transform: translateX(0); }
.site-menu__close {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255, 255, 255, .08); border: none; border-radius: 50%;
  color: var(--white); cursor: pointer;
}
.site-menu__close:hover { background: rgba(255, 255, 255, .18); }
.site-menu__close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.site-menu__close svg { width: 20px; height: 20px; }

.site-menu__section { display: flex; flex-direction: column; gap: 2px; }
.site-menu__section-title {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; opacity: .55;
}
.site-menu__section a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--white); text-decoration: none; font-size: 18px; font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-menu__section a[aria-current="page"] { font-weight: 700; color: var(--accent-light); }
.site-menu__page a { font-size: 16px; font-weight: 400; opacity: .85; }

.site-menu__contact { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.site-menu__phone.btn { justify-content: center; }
.site-menu__msgs { display: flex; flex-direction: column; gap: 10px; }
.site-menu__msgs .btn { justify-content: flex-start; }
/* Тёмная панель — белая версия .btn--outline, как у карточки контактов (DS-025). */
.site-menu .btn--outline { color: var(--white); border-color: var(--white); }
.site-menu .btn--outline:hover { background: rgba(255, 255, 255, .12); }
.site-menu__address { margin: 4px 0 0; font-size: 14px; line-height: 1.4; opacity: .85; }
.site-menu .header-contact__hours { font-size: 13px; opacity: .7; }

@media (max-width: 768px) {
  /* На телефоне панель — во весь экран (задание §1), подложка не видна за ней. */
  .site-menu__panel { max-width: none; }
  /* Кнопка «Меню» — в фиксированной шапке, у правого края. Место освобождено
     тем, что .brand ниже растягивается на всё свободное место (flex: 1) —
     сама иконка и текст логотипа не двигаются, просто у ссылки-обёртки
     больше кликабельной area; высота шапки (--hdr-h-mobile) не меняется,
     .header-contact — по-прежнему стек лейбл/телефон/часы/мессенджеры,
     самый высокий столбец в строке, он и держит высоту, как раньше. */
  .site-header__inner { position: relative; }
  .site-header .brand { flex: 1; min-width: 0; }
  .site-header .menu-btn { display: flex; }
}

/* ---------- Закреплённая полоса на компьютере: появляется, когда основная
   шапка ушла за верх окна (IntersectionObserver в main.js), пропадает при
   возврате к ней. Поверх страницы (position: fixed), место не резервируется —
   рывка контента при появлении нет. ---------- */
.sticky-bar {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9;
  background: var(--navy); color: var(--white);
  transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
/* visibility сама не анимируется (это нормально: скрывается она мгновенно, а не
   плавно) — без неё скрытая, но ещё в потоке полоса пропускала Tab на свои ссылки
   за пределами экрана. */
.sticky-bar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.sticky-bar__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; height: 56px; }
.sticky-bar__logo { display: flex; align-items: center; flex: none; }
.sticky-bar__logo img { display: block; width: 32px; height: 32px; }
.sticky-bar__nav { display: flex; align-items: center; gap: 22px; flex: 1; flex-wrap: wrap; }
.sticky-bar__nav a {
  font-size: 14px; font-weight: 500; color: var(--white); opacity: .75; text-decoration: none;
  padding: 2px 0; border-bottom: 2px solid transparent;
}
.sticky-bar__nav a:hover, .sticky-bar__nav a:focus-visible { opacity: 1; }
.sticky-bar__nav a[aria-current="page"] { opacity: 1; font-weight: 700; border-bottom-color: var(--accent); }
.sticky-bar__phone { flex: none; font-size: 15px; font-weight: 500; color: var(--white); text-decoration: underline; white-space: nowrap; }
.sticky-bar .menu-btn { display: flex; }

@media (min-width: 769px) {
  .sticky-bar { display: block; }
}