/* ============================================================
   Шувое — отделка деревянных домов. Общая дизайн-база сайта.
   Тема «Уголь» (утверждена Иваном 16.07): тёмный тёплый фон, золотой акцент, шрифт Onest.
   ЦА 45–65: крупный кегль, высокий контраст, большие цели нажатия.
   Все страницы используют ТОЛЬКО классы отсюда — свой CSS не пишем.
   ============================================================ */

/* ---------- Шрифт локально ----------
   Требование .agents/LEGAL-COMPLIANCE-RF.md: подключение через fonts.googleapis.com
   передаёт IP посетителя на зарубежные серверы — для сайта с ПДн граждан РФ
   это нарушение. Файлы лежат в fonts/, лицензия OFL. */
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/onest-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/onest-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/onest-500-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/onest-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/onest-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/onest-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/onest-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/onest-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/onest-800-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/onest-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Тема «Уголь» — утверждена Иваном 16.07, токены перенесены из phase6 */
  --ink:        #171813;   /* основной текст */
  --ink-2:      #57544d;   /* вторичный текст */
  --ink-3:      #777268;   /* подписи */
  --canvas:     #faf8f2;   /* фон страницы, молочная бумага */
  --surface:    #f7f3e9;   /* фон карточек и секций */
  --surface-2:  #efe9de;   /* фон таблиц, зебра */
  --line:       rgba(27,28,23,.16);   /* границы */
  --line-2:     rgba(27,28,23,.10);   /* тонкие разделители */

  /* Единственный акцент — золото/брасс. Дизайнеру: менять здесь. */
  --accent:     #b79252;
  --accent-2:   #a9680d;   /* тёплая охра для иконок и ссылок */
  --accent-ink: #ffffff;   /* текст на акценте */
  --accent-sf:  rgba(183,146,82,.12);  /* мягкая заливка акцента */
  --accent-cta: linear-gradient(180deg,#c2a05f,#a9680d);  /* белый текст 7:1 */

  --wa:       #25d366;
  --tg:       #2aabee;
  --max:      #471AFF;   /* MAX — основной фирменный синий */

  --hdr:      rgba(24,20,16,.96);
  --hdr-line: rgba(211,183,127,.22);

  --radius:   14px;
  --radius-s: 10px;
  --radius-l: 24px;      /* плита секции */
  --maxw:     1240px;
  --gap:      24px;

  /* Светлая полка — второй тон страницы (концепция 18.08).
     Переменные переопределяются внутри .section--paper, поэтому все
     вложенные компоненты перекрашиваются сами, без правки разметки. */
  --paper:      #f2eee4;
  --paper-card: #ffffff;
  --paper-2:    #ece5d9;
  --paper-line: #e2dacd;
  --paper-ink:  #1e1a16;
  --paper-ink2: #4f463d;
  --paper-ink3: #6b6055;
  --paper-acc:  #96650f;   /* золото, читаемое на белом: контраст 4.9:1 */

  /* Типографическая шкала: пять размеров вместо девяти */
  --fs-display: clamp(30px, 3.4vw, 52px);
  --fs-h2:      clamp(25px, 2.4vw, 38px);
  --fs-h3:      clamp(17px, 1.2vw, 20px);
  --fs-body:    16.5px;
  --fs-small:   14px;

  /* Вертикальный ритм секций */
  --sec-pad:    clamp(56px, 5.6vw, 96px);
  --col-text:   720px;   /* строка не длиннее ~75 знаков */
}

/* На широких мониторах контейнер расширяется, иначе первый экран идёт
   во всю ширину, а секции сидят узкой колонкой по центру — читается
   как «второй экран обрезан». Потолок есть: строки текста не должны
   становиться бесконечными. */
/* Контейнер держим в разумных рамках: на 1680 блоки читались как «слишком широкие»
   (правка Ивана 18.08). Дальше растёт не контейнер, а поля вокруг него. */
@media (min-width:1500px){ :root{ --maxw:1320px; } }
@media (min-width:1800px){ :root{ --maxw:1360px; } }

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

/* display:flex/grid у компонентов перебивает hidden — возвращаем атрибуту силу */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:104px; overflow-x:hidden; }
body{ overflow-x:hidden; }  /* ничто не должно давать горизонтальный скролл */

body{
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:18px; line-height:1.55; color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Типографика ---------- */
h1{ font-size:var(--fs-display); line-height:1.08; font-weight:800; letter-spacing:-.02em; }
h2{ font-size:var(--fs-h2); line-height:1.14; font-weight:800; letter-spacing:-.015em; }
h3{ font-size:var(--fs-h3); line-height:1.25; font-weight:700; }
.lead{ font-size:clamp(17px, 1.2vw, 19px); color:var(--ink-2); max-width:var(--col-text); }
.note{ font-size:15px; color:var(--ink-3); }
.hl{ color:var(--accent); }

/* ---------- Шапка ---------- */
.header{ position:sticky; top:0; z-index:50; background:var(--hdr);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--hdr-line); }
.header__in{ max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand__logo{ height:40px; width:auto; }
.brand__name{ font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.1; }
.header__right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.contact{ text-align:right; }
.contact__geo{ font-size:12px; color:var(--ink-3); white-space:nowrap; }
.contact__phone{ font-size:22px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; display:block; }
.contact__hours{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
.msgs{ display:flex; gap:9px; }
.msgs a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  transition:transform .16s ease, filter .16s ease; }
.msgs a:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.msgs a.wa{ background:var(--wa); }
.msgs a.tg{ background:var(--tg); }
.msgs a.mx{ background:#fff; border:1px solid rgba(255,255,255,.28); }
.msgs a.mx img{ width:25px; height:25px; object-fit:contain; }
.msgs svg{ width:22px; height:22px; color:#fff; }


/* --- Шапка: лого · слоган · рейтинг · почта · мессенджеры · телефон ---
   Порядок утверждён Иваном 11.08 по образцу plot-artel и teplo-well.
   Гео-строки в шапке нет: налезала на почту, регион вынесен в подвал. */
.brand-meta{ display:flex; flex-direction:column; gap:3px; flex:0 0 auto; }
.brand__desc{ display:block; font-size:13px; color:var(--ink-3); line-height:1.3;
  width:16ch; }  /* ровно две строки: «Отделка и ремонт / деревянных домов» */
.header__sp{ flex:1; }
.mail{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); }
.mail svg{ width:16px; height:16px; opacity:.75; }
.mail a:hover{ color:var(--ink); }
.copy{ background:none; border:1px solid var(--line); border-radius:7px; width:28px; height:28px;
  display:grid; place-items:center; cursor:pointer; color:var(--ink-3); flex:0 0 auto; }
.copy:hover{ color:var(--accent); border-color:var(--accent); }
.copy.is-done{ color:var(--accent); border-color:var(--accent); }
.copy svg{ width:14px; height:14px; }

/* Рейтинг площадок — вынесен в шапку (как у Плотницкой артели и TeploWell) */
.rating{ display:flex; align-items:center; gap:12px; padding-left:14px;
  border-left:1px solid var(--line); flex:0 0 auto; }
.rate{ display:flex; align-items:center; gap:8px; }
/* полный логотип площадки: фиксируем высоту, ширину отдаём картинке —
   иначе «Яндекс»/«2GIS» сплющивало в 26px квадрат */
.rate__logo{ height:15px; width:auto; flex:0 0 auto; display:block;
  object-fit:contain; }
.rate__logo--gis{ height:17px; }
/* во вкладках отзывов — полные логотипы площадок, не знаки-«квадратики» */
.rtab__logo{ height:15px; width:auto; display:block; flex:0 0 auto; }
.rtab__logo--gis{ height:17px; }
/* на светлой полке белый логотип исчезает — держим обе версии и переключаем */
.rtab__logo--light{ display:none; }
.section--paper .rtab__logo--dark{ display:none; }
.section--paper .rtab__logo--light{ display:block; }
.msgs .wa,
.msgs .tg{ display:none; }
.rate__b{ line-height:1.15; }
.rate__num{ display:block; font-size:16px; font-weight:800; }
/* подпись площадки — только когда в шапке реально есть место.
   На 1420 подписи ещё распирали .header__in на 28px, поднял порог до 1520. */
.rate__cap{ display:none; font-size:12px; color:var(--ink-3); white-space:nowrap; }
@media (min-width:1520px){ .rate__cap{ display:block; } }
.rate__stars{ color:var(--accent-2); font-size:13px; letter-spacing:1px; }

/* Обратный звонок — маленькой пунктирной ссылкой под телефоном */
.callback{ display:inline-block; margin-top:2px; font-size:13px; color:var(--accent-2);
  border-bottom:1px dashed currentColor; cursor:pointer; background:none; border-left:0;
  border-right:0; border-top:0; padding:0; font-family:inherit; }
.callback:hover{ color:var(--accent); }
.nav__drop a .t{ display:block; font-weight:700; }
.nav__drop a .d{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; }
@media (max-width:1100px){ .mail{ display:none; } }

/* ---------- Навигация ---------- */
.nav{ position:relative; z-index:120; border-bottom:1px solid rgba(221,162,74,.14); background:transparent; }
.nav__in{ max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nav a{ padding:14px 14px; font-size:16px; font-weight:600; color:var(--ink-2); }
.nav a:hover{ color:var(--ink); }
.nav a.is-active{ color:var(--ink); box-shadow:inset 0 -3px 0 var(--accent); }
.nav__services{ position:relative; }
.nav__services > a::after{ content:" ▾"; color:var(--ink-3); }
.nav__drop{ display:none; position:absolute; z-index:130; top:100%; left:0; min-width:520px;
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; box-shadow:0 18px 44px rgba(0,0,0,.45);
  grid-template-columns:1fr 1fr; gap:4px; }
.nav__services:hover .nav__drop{ display:grid; }
.nav__drop a{ padding:11px 12px; border-radius:var(--radius-s); font-weight:600; }
.nav__drop a:hover{ background:var(--surface); }

/* ---------- Кнопки ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:58px; padding:16px 28px; border-radius:var(--radius-s);
  font-size:17px; font-weight:700; cursor:pointer; border:2px solid transparent;
  transition:.15s ease; text-align:center; }
.btn--primary{ background:var(--accent-cta); color:var(--accent-ink); }
.btn--primary:hover{ filter:brightness(1.08); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink-3); }
.btn--sm{ min-height:46px; padding:11px 18px; font-size:15px; }
.btn--wide{ width:100%; }

/* ---------- Секции ---------- */
/* Единый фон у всех секций. Раньше они чередовались двумя оттенками графита
   и полосатость читалась как разнобой. Ритм теперь задаём не заливкой,
   а воздухом, тонкой линией-разделителем и плотностью карточек. */
.section{ position:relative; padding:var(--sec-pad) 0; border-top:0; background:var(--canvas); }
.section + .section::before{ content:""; position:absolute; left:50%; top:0;
  translate:-50% 0; width:min(var(--maxw), 100% - 48px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(221,162,74,.16) 24%,
    rgba(221,162,74,.22) 50%, rgba(221,162,74,.16) 76%, transparent); }
/* акцентная секция — для квиза и финального призыва */
.section--tint{ background:
    radial-gradient(1100px 520px at 18% 0%, rgba(221,162,74,.07), transparent 62%),
    linear-gradient(180deg, #221d18 0%, #1c1814 100%); }
.section__head{ max-width:var(--col-text); margin-bottom:32px; }
/* кикер над заголовком секции — приём из референсов Ивана */
.kicker{ display:block; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--accent-2); margin-bottom:12px; }

/* ---------- Светлая полка ----------
   Второй тон страницы. Переопределяем токены — вложенные компоненты
   (карточки, таблицы, кнопки, иконки) перекрашиваются сами. */
.section--paper{
  --canvas:     var(--paper);
  --surface:    var(--paper-card);
  --surface-2:  var(--paper-2);
  --line:       var(--paper-line);
  --line-2:     var(--paper-line);
  --ink:        var(--paper-ink);
  --ink-2:      var(--paper-ink2);
  --ink-3:      var(--paper-ink3);
  --accent-2:   var(--paper-acc);
  --accent-sf:  rgba(150,101,15,.08);
  background:var(--paper); color:var(--paper-ink);
}
.section--paper h1, .section--paper h2, .section--paper h3, .section--paper b{ color:var(--paper-ink); }
.section--paper .lead, .section--paper p{ color:var(--paper-ink2); }
/* разделительная золотая нить между секциями на светлом не нужна */
.section--paper::before, .section--paper + .section::before{ display:none; }
.section__head.center{ margin-left:auto; margin-right:auto; }
.section__head .lead{ margin-top:14px; }
.section__head h2{
  max-width:900px;
  text-wrap:balance;
}
.section__head .lead{
  line-height:1.55;
  text-wrap:pretty;
}

/* ---------- Hero ---------- */
.hero{ padding:56px 0 64px; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero h1{ margin-bottom:18px; }
.hero .lead{ margin-bottom:26px; }
/* Буллеты hero — единый формат для всех страниц (утверждён Иваном 13.08
   по референсу тёплого шва): сетка 2×2, карточка в тонкой золотой рамке,
   внутри жирный тезис и пояснение под ним. */
.hero__facts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr;   /* карточки в ряду одной высоты, как на референсе */
  gap:12px; margin:27px 0 26px; max-width:620px; }
.fact{ display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:start;
  padding:13px 15px; border:1px solid rgba(239,193,105,.28); border-radius:10px;
  background:linear-gradient(180deg, rgba(38,30,21,.72), rgba(19,15,11,.66));
  backdrop-filter:blur(7px);
  font-size:14.8px; line-height:1.36; color:#c8bcaa; }
.fact b{ grid-column:2; display:block; margin-bottom:2px; font-size:16.5px; font-weight:800;
  line-height:1.22; color:#f2e9da; text-wrap:balance; }
.fact span:not(.fact__icon){ grid-column:2; display:block; }
/* иконка слева от текста — по обновлённому референсу тёплого шва (14.08) */
.fact__icon{ grid-row:span 2; width:30px; height:30px; margin-top:2px;
  display:grid; place-items:center; color:var(--accent-2); }
.fact__icon svg{ width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fact:not(:has(.fact__icon)){ grid-template-columns:1fr; }
.fact:not(:has(.fact__icon)) b,
.fact:not(:has(.fact__icon)) span{ grid-column:1; }
.hero__media{ border-radius:var(--radius); overflow:hidden; }
.hero__media img, .hero__media video{ width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3; display:block; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__micro{ margin-top:14px; font-size:15px; color:var(--ink-3); }

/* Главная: фото дома как фон всего первого экрана.
   Настройки: --home-hero-position двигает дом, --home-hero-size отдаляет/приближает фото,
   --home-hero-shade управляет левой тенью. */
/* Фото кроем весь экран (cover) и гасим ОДНИМ градиентом слева направо.
   Было: маска + четыре слоя градиентов поверх — фон мылился, а снизу
   не хватало высоты и вылезала пустая полоса.

   Тот же приём для страниц услуг: секции ставим класс .hero--bg
   и через --hero-bg подкладываем свой кадр. Пример:
   <section class="hero hero--bg" style="--hero-bg:url('images/shlifovka-hero-bg.webp')">
   Правило одно на всех — цвета и растворение вниз не дублируются. */
.hero--home,
.hero--bg{
  --home-nav-space:165px;
  position:relative;
  isolation:isolate;
  min-height:100svh;
  padding:calc(var(--home-nav-space) + clamp(16px, 1.6vw, 38px)) 0 64px;
  overflow:hidden;
  background:
    /* читаемость текста слева, дом справа остаётся чистым */
    linear-gradient(90deg,
      rgba(13,10,7,.83) 0%,
      rgba(13,10,7,.79) 26%,
      rgba(14,11,8,.56) 44%,
      rgba(15,11,8,.22) 62%,
      rgba(15,11,8,.04) 80%,
      rgba(15,11,8,0) 100%),
    /* сверху — подложка под шапку; снизу фото растворяется ровно в цвет
       страницы, чтобы стык со вторым блоком не читался линией */
    linear-gradient(180deg, rgba(11,8,6,.70) 0%, rgba(11,8,6,.34) 14%,
      rgba(10,8,6,0) 30%, rgba(30,26,22,0) 46%, rgba(30,26,22,.30) 62%,
      rgba(30,26,22,.62) 74%, rgba(30,26,22,.88) 85%,
      rgba(30,26,22,.99) 94%, #1e1a16 100%),
    var(--hero-bg, url("images/home-hero-bg.webp")) var(--hero-bg-pos, right 38%) / cover no-repeat,
    #17120e;
}
@media (min-width:761px){
  .hero--home,
  .hero--bg{
    min-height:calc(100svh + 110px);
    padding-bottom:130px;
  }
}
/* На телефоне кадр сильно обрезается по бокам, и главное с фото может уехать
   за край. Страница задаёт свою точку через --hero-bg-pos-mob (см. pokraska). */
@media (max-width:760px){
  .hero--bg{ background-position:0 0, 0 0, var(--hero-bg-pos-mob, var(--hero-bg-pos, right 38%)); }
}
/* Вариант с видео вместо фото: разметка та же, кадр кладём в .hero__bgvideo.
   Плашка-затемнение общая, поэтому текст читается одинаково. */
.hero--video{ background:
    /* левая часть на 10% плотнее общей плашки: у видео котельной там светлая
       стена и подоконник, текст на них терялся */
    linear-gradient(90deg,
      rgba(11,8,6,.99) 0%, rgba(11,8,6,.98) 30%, rgba(13,10,7,.89) 48%,
      rgba(14,10,7,.55) 66%, rgba(15,11,8,.24) 84%, rgba(15,11,8,.06) 100%),
    linear-gradient(180deg, rgba(11,8,6,.70) 0%, rgba(11,8,6,.34) 14%,
      rgba(10,8,6,0) 30%, rgba(30,26,22,0) 46%, rgba(30,26,22,.30) 62%,
      rgba(30,26,22,.62) 74%, rgba(30,26,22,.88) 85%,
      rgba(30,26,22,.99) 94%, #1e1a16 100%),
    #17120e; }
.hero__bgvideo{ position:absolute; inset:0; width:100%; height:100%; z-index:-1;
  object-fit:cover; object-position:center bottom; }
.hero--bg:not(.hero--home):not(.hero--video){
  background:
    linear-gradient(90deg,
      rgba(13,10,7,.82) 0%,
      rgba(13,10,7,.77) 28%,
      rgba(14,11,8,.50) 48%,
      rgba(15,11,8,.18) 68%,
      rgba(15,11,8,.03) 88%,
      rgba(15,11,8,0) 100%),
    linear-gradient(180deg,
      rgba(11,8,6,.66) 0%,
      rgba(11,8,6,.28) 16%,
      rgba(10,8,6,0) 36%,
      rgba(245,240,230,0) 60%,
      rgba(245,240,230,.42) 76%,
      rgba(245,240,230,.82) 91%,
      #f5f0e6 100%),
    var(--hero-bg, url("images/home-hero-bg.webp")) var(--hero-bg-pos, right 38%) / cover no-repeat,
    #f5f0e6;
}

/* Первый экран, шапка и секции живут в ОДНОМ контейнере: иначе на широком
   мониторе заголовок hero стоял у самого края, а H2 секций — на 300px правее. */
.home-page .header__in,
.home-page .nav__in{
  max-width:var(--maxw);
  padding-inline:24px;
}
.hero--home .wrap,
.hero--bg .wrap{ position:relative; z-index:1; }
.hero--home .hero__grid,
.hero--bg .hero__grid{ display:block; }
.hero--home .hero__content{ max-width:1080px; }
.hero--bg .hero__content{ max-width:760px; }
.hero--home h1,
.hero--bg h1{
  max-width:930px;
  margin-bottom:20px;
  font-size:clamp(46px, 3.45vw, 70px);
  line-height:1.08;
  color:#fff8ed;
  text-wrap:balance;
  text-shadow:0 2px 22px rgba(0,0,0,.42);
}
.hero--home .lead,
.hero--bg .lead{
  max-width:600px;
  margin-bottom:33px;
  color:#efe4d5;
  text-wrap:pretty;
  text-shadow:0 1px 16px rgba(0,0,0,.40);
}
.hero--home .hero__cta,
.hero--bg .hero__cta{ gap:14px; }
.hero--home .btn,
.hero--bg .btn{
  border-radius:10px;
  min-height:60px;
  padding:17px 30px;
  box-shadow:none;
}
.hero--home .btn--primary,
.hero--bg .btn--primary{
  background:linear-gradient(180deg, #d9a044 0%, #a86c1d 100%);
  color:#fffaf0;
  border-color:rgba(255,218,149,.28);
  box-shadow:0 14px 30px rgba(138,83,18,.34);
}
.hero--home .btn--primary:hover,
.hero--bg .btn--primary:hover{
  filter:none;
  background:linear-gradient(180deg, #e2ad55 0%, #b77925 100%);
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(138,83,18,.42);
}
.hero--home .btn--ghost,
.hero--bg .btn--ghost{
  background:rgba(18,14,10,.62);
  border-color:rgba(239,193,105,.62);
  color:#fff4e2;
  backdrop-filter:blur(8px);
}
.hero--home .btn--ghost:hover,
.hero--bg .btn--ghost:hover{
  border-color:var(--accent-2);
  background:rgba(42,32,22,.78);
  transform:translateY(-1px);
}
.hero--home .hero__micro,
.hero--bg .hero__micro{
  color:#d4c6b4;
  text-shadow:0 1px 14px rgba(0,0,0,.42);
}

@media (min-width:1025px){
  /* Шапка лежит поверх фото. Затемняем плотнее, иначе сквозь неё
     просвечивает крыша и полоса читается как грязь. */
  .home-page .header,
  .home-page .nav{
    position:absolute;
    left:0;
    right:0;
    z-index:120;
    background:rgba(13,10,8,.76);
    /* блюр только общим слоем ниже: на самой шапке он давал второй,
       более сильный проход и фон под ней мылился */
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .home-page .header{
    top:0;
    z-index:130;
    border-bottom:0;
  }
  /* Блюр держим только под верхней строкой шапки: меню остаётся поверх hero
     без отдельной тёмной плашки. */
  .home-page .header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:118px;
    z-index:-1;
    pointer-events:none;
    backdrop-filter:saturate(1.04) blur(6px);
    -webkit-backdrop-filter:saturate(1.04) blur(6px);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%,
      rgba(0,0,0,.32) 91%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 72%,
      rgba(0,0,0,.32) 91%, transparent 100%);
  }
.home-page .nav{
    top:110px;
    border-bottom:0;
    background:rgba(247,243,233,.90);
    border-top:1px solid rgba(255,255,255,.18);
    border-bottom:1px solid rgba(27,28,23,.10);
    box-shadow:0 14px 32px rgba(14,12,9,.12);
    backdrop-filter:saturate(1.06) blur(10px);
    -webkit-backdrop-filter:saturate(1.06) blur(10px);
  }
  .home-page .nav__in{
    background:transparent;
  }
  .home-page .nav a{ color:#332f28; }
  .home-page .nav a:hover,
  .home-page .nav a.is-active{ color:#171813; }
  .home-page main{
    position:relative;
  }
}

/* ---------- Слот под изображение / видео ----------
   Пустое место для дизайнера. Внутри — HTML-комментарий с ТЗ.
   Ничего не генерируем: Codex подставит реальное медиа.        */
.slot{ position:relative; border:2px dashed #4a4036; border-radius:var(--radius);
  background:var(--surface); min-height:340px;
  display:flex; align-items:center; justify-content:center; padding:24px; }
.slot__hint{ font-size:14px; color:var(--ink-3); text-align:center; max-width:46ch; }
.slot--wide{ min-height:420px; }
.slot--tall{ min-height:100%; }
.slot--photo{ min-height:260px; }
.slot--sm{ min-height:180px; }
.slot--ba{ min-height:300px; }

/* ---------- Карточки ---------- */
.cards{ display:grid; gap:var(--gap); }
.cards--2{ grid-template-columns:repeat(2, 1fr); }
.cards--3{ grid-template-columns:repeat(3, 1fr); }
.cards--4{ grid-template-columns:repeat(4, 1fr); }
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  background:var(--canvas); display:flex; flex-direction:column; gap:12px; }
.card--tint{ background:var(--surface); border-color:transparent; }
/* карточка на тонированной секции: тот же фон сливался — возвращаем контраст и рамку */
.section--tint .card--tint{ background:var(--canvas); border-color:var(--line); }
.card__kicker{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; }
.card__price{ font-size:22px; font-weight:800; }
.card__price span{ font-size:15px; font-weight:600; color:var(--ink-3); }
.card__foot{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top:8px; }

/* ---------- Списки ---------- */
.list{ list-style:none; display:grid; gap:12px; }
.list li{ position:relative; padding-left:32px; font-size:17px; }
.list li::before{ content:""; position:absolute; left:0; top:9px; width:18px; height:10px;
  border-left:3px solid var(--accent); border-bottom:3px solid var(--accent);
  transform:rotate(-45deg); border-radius:1px; }
.list--dash li::before{ content:""; top:14px; width:14px; height:0;
  border:0; border-top:3px solid var(--ink-3); transform:none; }

/* ---------- Сравнение «мы / они» ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.compare__col{ border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.compare__col--bad{ background:var(--surface); }
.compare__col--good{ background:var(--accent-sf); border-color:var(--accent); }
.compare__col h3{ margin-bottom:14px; }

/* ---------- Таблица цен ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:16px; min-width:560px; }
th, td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-2); }
th{ background:var(--surface-2); font-size:13px; text-transform:uppercase;
  letter-spacing:.05em; font-weight:800; color:var(--ink-2); }
tbody tr:last-child td{ border-bottom:0; }
td.price{ font-weight:800; white-space:nowrap; }
.total-row{ background:var(--accent-sf); }
.total-row td{ font-weight:800; font-size:18px; }

/* ---------- Квиз ---------- */
.quiz{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--canvas); }
.quiz__grid{ display:grid; grid-template-columns:1fr; }
.quiz__aside{ display:none; }
.quiz__expert{ display:flex; flex-direction:column; gap:11px; }
.quiz__body{ padding:28px 30px 30px; }
.quiz__step{ font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-weight:700; margin-bottom:10px; }
.quiz__options{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:18px 0 22px; }
.opt{ border:2px solid var(--line); border-radius:var(--radius-s); padding:16px;
  font-weight:600; cursor:pointer; background:var(--canvas); }
.opt:hover{ border-color:var(--accent); }

/* ---------- Квиз: шаги, прогресс, карточки-варианты ---------- */
.quiz__progress{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.quiz__bar{ flex:1; height:6px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
.quiz__bar i{ display:block; height:100%; width:0; border-radius:6px;
  background:var(--accent); transition:width .3s ease; }
.quiz__back{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  font-size:15px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; }
.quiz__back:hover{ color:var(--ink); }
.quiz__back svg{ width:16px; height:16px; }
.quiz__q{ font-size:20px; font-weight:800; line-height:1.24; margin-bottom:4px; }
.quiz__hint{ font-size:14px; color:var(--ink-3); margin-bottom:14px; }

/* варианты-карточки с картинкой (эталон Ивана: не радио-список) */
.opts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:20px;
  align-items:start; }
.opts--2{ grid-template-columns:repeat(2, 1fr); }
.opt{ position:relative; border:2px solid var(--line); border-radius:var(--radius-s);
  background:var(--canvas); cursor:pointer; overflow:hidden; text-align:left;
  font-family:inherit; color:var(--ink); padding:0; display:flex; flex-direction:column;
  transition:.15s ease; }
.opt:hover{ border-color:var(--accent); transform:translateY(-2px); }
.opt.is-on{ border-color:var(--accent); background:var(--accent-sf); }
/* картинка тянется на всю свободную высоту — карточки в ряду выходят ровными */
.opt__img{ flex:0 0 auto; height:170px; background:var(--surface-2); }
.opt__img img{ width:100%; height:100%; object-fit:cover; }
.opt__b{ flex:1 1 auto; padding:9px 11px; display:flex; flex-direction:column; gap:2px; }
.opt__t{ font-size:15px; font-weight:700; line-height:1.22; }
.opt__d{ display:block; font-size:12.5px; line-height:1.28; color:rgba(248,244,235,.72); }
.opt__tick{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%;
  background:rgba(15,12,9,.56); color:transparent; border:1.5px solid rgba(239,193,105,.62);
  display:grid; place-items:center; backdrop-filter:blur(4px); transition:.15s ease; }
.opt.is-on .opt__tick{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.opt__tick svg{ width:15px; height:15px; }
/* компактный вариант без картинки */
.opt--plain{ padding:14px 16px; grid-column:1 / -1; }
.opt--plain .opt__b{ padding:0; }

.quiz__nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--line-2); padding-top:18px; }
.quiz__multi{ font-size:14px; color:var(--ink-3); }
.quiz__done{ text-align:center; padding:8px 0 4px; }
.quiz__done h3{ font-size:24px; margin-bottom:10px; }
/* сводка ответов на финале — тем и заменяем цену, которую показывать нельзя */
.quiz__sum{ font-size:15.5px; color:var(--ink-2); background:var(--accent-sf);
  border-left:3px solid var(--accent); border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:11px 15px; margin-bottom:14px; }
.quiz__sum b{ color:var(--ink); }
/* выбор канала связи */
.chans{ display:flex; flex-wrap:wrap; gap:9px; }
.chan{ cursor:pointer; }
.chan input{ position:absolute; opacity:0; width:0; height:0; }
.chan span{ display:inline-block; padding:10px 16px; border-radius:22px;
  border:2px solid var(--line); font-size:15px; font-weight:600; }
.chan input:checked + span{ border-color:var(--accent); background:var(--accent-sf); }
.chan input:focus-visible + span{ outline:2px solid var(--accent-2); outline-offset:2px; }

/* боковая карточка эксперта */
.qex__photo{ position:relative; border-radius:var(--radius-s); overflow:hidden;
  aspect-ratio:1/1; background:var(--surface-2); }
.qex__photo img{ width:100%; height:100%; object-fit:cover; }
.qex__badges{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.qex__badge{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-2); }
.qex__badge svg{ width:17px; height:17px; flex:0 0 auto; color:var(--accent-2); margin-top:2px; }
.qex__online{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#8fd39a; }
.qex__online::before{ content:""; width:8px; height:8px; border-radius:50%; background:#8fd39a; }

/* ---------- Форма ---------- */
.field{ display:grid; gap:8px; margin-bottom:16px; }
.field label{ font-size:15px; font-weight:600; }
.field input, .field textarea{ border:2px solid var(--line); border-radius:var(--radius-s);
  padding:14px 16px; font-size:17px; font-family:inherit; min-height:56px; background:var(--canvas); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink-2); }
.consent input{ width:22px; height:22px; margin-top:2px; flex:0 0 auto; }

/* ---------- Этапы ---------- */
.steps{ display:grid; gap:18px; counter-reset:step; }
.step{ display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start;
  border-bottom:1px solid var(--line-2); padding-bottom:18px; }
.step:last-child{ border-bottom:0; }
.step__num{ width:56px; height:56px; border-radius:50%; background:var(--accent-sf);
  color:var(--accent-2); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; }
.prime{ max-width:96ch; border-left:4px solid var(--accent); background:var(--accent-sf);
  padding:18px 22px; border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:17px; font-weight:600; margin-top:22px; }

/* ---------- Кейсы ---------- */
.case{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.case__body{ padding:22px; display:flex; flex-direction:column; gap:10px; }
.case__geo{ font-size:14px; color:var(--ink-3); }
.case__meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:15px; border-top:1px solid var(--line-2); padding-top:12px; }
.case__meta b{ display:block; font-size:17px; }

/* ---------- Отзывы ---------- */
.reviews{ border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--canvas); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ padding:22px 44px 22px 0; font-size:19px; font-weight:700;
  cursor:pointer; list-style:none; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:8px; top:18px;
  font-size:28px; font-weight:400; color:var(--ink-3); }
.faq details[open] summary::after{ content:"–"; }
.faq p{ padding:0 44px 22px 0; color:var(--ink-2); max-width:82ch; }

/* ---------- Подвал ---------- */
.footer{ background:var(--canvas); border-top:1px solid var(--line); padding:56px 0 32px; }
.footer__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--gap); }
.footer h3{ margin-bottom:14px; }
.footer .brand__logo{ height:48px; }
.footer a{ color:var(--ink-2); }
.footer a:hover{ color:var(--ink); }
.footer__map{ margin-top:18px; height:190px; border-radius:var(--radius-s);
  overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.footer__map iframe{ display:block; width:100%; height:100%;
  filter:grayscale(.35) contrast(1.05) brightness(.88); }
.footer__legal{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-3); display:flex; gap:20px; flex-wrap:wrap; }
.footer--compact{ padding:24px 0 28px; border-top:1px solid rgba(221,162,74,.12);
  background:#1c1814; }
.footer--compact .footer__compact{ display:flex; align-items:center; justify-content:space-between;
  gap:28px; }
.footer--compact .footer__brandline{ display:flex; align-items:center; gap:18px; min-width:260px;
  color:var(--ink); font-weight:800; }
.footer--compact .brand__logo{ height:42px; width:auto; flex:0 0 auto; }
.footer--compact .footer__services{ display:flex; justify-content:flex-end; gap:8px 18px;
  flex-wrap:wrap; font-size:14.5px; font-weight:700; }
.footer--compact .footer__services a{ color:var(--ink-3); }
.footer--compact .footer__services a:hover{ color:var(--accent-2); }
.footer--compact .footer__legal{ margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(221,162,74,.10); gap:12px 18px; }


/* --- Якорные переходы: отступ задаёт scroll-padding у html.
   Не дублируем его scroll-margin у цели, иначе получалось 208px вместо 104px. --- */
@media (max-width:760px){
  html{ scroll-padding-top:112px; }
}

/* --- Таблица шире экрана: подсказываем, что её можно листать --- */
.table-wrap{ position:relative; }
.table-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:38px;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
  background:linear-gradient(90deg, rgba(30,26,22,0), rgba(30,26,22,.92)); }
@media (max-width:900px){
  .table-wrap::after{ width:24px; opacity:.32; }
  .table-wrap{ scroll-snap-type:x proximity; }
}

/* ============================================================
   БЛОКИ ПО РЕФЕРЕНСАМ, ВЫБРАННЫМ ИВАНОМ 11.08.2026
   Каждый раздел ниже — реализация конкретного образца из
   apps/shuvoe-otdelka/references/. Менять форму блока —
   только по новому решению, эталон записан в комментарии.
   ============================================================ */

/* ---------- Услуги ----------
   Раскладка по референсу Ивана (13.08): заголовок стоит внутри сетки слева,
   первый ряд — заголовок + 3 карточки, второй — 3 широких. Кнопок внутри нет,
   кликается вся карточка. */
.svc-section{ position:relative; border-top:0; padding-top:0; }
/* стык с первым экраном: секция начинается тем же цветом, что низ hero,
   плюс тонкая золотая линия-разделитель как на референсе */
.svc-section::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(221,162,74,.22) 22%,
    rgba(221,162,74,.30) 50%, rgba(221,162,74,.22) 78%, transparent 100%); }
.svc-section > .wrap{ position:relative; z-index:1; padding-top:72px; }

.svc-lead{ grid-column:span 3; align-self:start; padding-right:22px; }
.svc-lead h2{ margin-bottom:16px; font-size:clamp(23px, 1.85vw, 30px); line-height:1.18; }
.svc-lead .lead{ font-size:16.5px; line-height:1.5; }

.svc-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; align-items:stretch; }
.svc-grid > .svc:nth-of-type(-n+3){ grid-column:span 3; }   /* первый ряд — рядом с заголовком */
.svc-grid > .svc:nth-of-type(n+4){ grid-column:span 4; }    /* второй ряд — шире */
.svc{ display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  background:var(--canvas); border:1px solid var(--line); transition:.18s ease; }
.svc:hover{ border-color:var(--accent-2); transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(239,193,105,.35);
  background:linear-gradient(180deg, rgba(60,46,28,.5), rgba(30,25,19,.5)); }
.svc:hover .svc__t{ color:var(--accent-2); }
.svc__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface); }
/* пропорции кадра по референсу: узкие карточки почти квадрат, широкие — панорама */
.svc-grid > .svc:nth-of-type(-n+3) .svc__media{ aspect-ratio:4/3; }
.svc-grid > .svc:nth-of-type(n+4) .svc__media{ aspect-ratio:2/1; }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.svc[data-service="inzhenerka"] .svc__media img{ object-position:56% center; }
.svc[data-service="shlifovka"] .svc__media img{ object-position:center 58%; }
.svc[data-service="teplyishov"] .svc__media img{ object-position:center center; }
.svc[data-service="pokraska"] .svc__media img{ object-position:center 52%; }
.svc[data-service="konopatka"] .svc__media img{ object-position:center 48%; }
.svc[data-service="obsada"] .svc__media img{ object-position:center 54%; }
.svc:hover .svc__media img{ transform:scale(1.04); }
.svc__media .slot{ position:absolute; inset:0; min-height:0; border-radius:0; border:0;
  border-bottom:2px dashed #4a4036; }
.svc__icon{ position:absolute; left:13px; top:13px; z-index:2;
  width:44px; height:44px; border-radius:50%; display:none; place-items:center;
  background:rgba(14,11,8,.72); border:1.5px solid rgba(239,193,105,.42);
  color:var(--accent-2); backdrop-filter:blur(6px); }
.svc__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.svc__media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  display:none;
  background:linear-gradient(180deg, rgba(10,8,6,.44) 0%, rgba(10,8,6,0) 38%); }

/* Нумерованные пункты сметы в ряд (референс главной) */
.calc-note{ position:relative; margin-top:26px; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg, rgba(40,32,23,.5), rgba(24,19,14,.5));
  padding:28px 30px 28px 150px; }
/* золотое свечение с иконкой слева, как на референсе */
.calc-note::before{ content:""; position:absolute; left:-46px; top:50%; translate:0 -50%;
  width:190px; height:190px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(221,162,74,.20) 0%, rgba(221,162,74,.06) 46%, transparent 70%); }
.calc-note__ic{ position:absolute; left:34px; top:50%; translate:0 -50%;
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid rgba(239,193,105,.42); background:rgba(24,18,12,.7);
  color:var(--accent-2); }
.calc-note__ic svg{ width:36px; height:36px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.calc-note h3{ margin-bottom:20px; }
.section--paper .calc-note{ color:var(--ink); }
.calc-note__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.calc-note__grid--4{ grid-template-columns:repeat(4, 1fr); gap:18px; }
.calc-note__it{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; }
.calc-note__n{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(239,193,105,.34); background:rgba(221,162,74,.07);
  color:var(--accent-2); font-size:14px; font-weight:800; letter-spacing:.04em; }
.calc-note__t{ font-size:15.5px; line-height:1.45; color:var(--ink-2); }
.calc-note__t b{ color:var(--ink); }
.calc-note__foot{ max-width:104ch; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2);
  font-size:15px; color:var(--ink-3); }
.svc__body{ display:flex; align-items:center; gap:12px; padding:15px 17px 16px;
  margin-top:auto; }
.svc__t{ font-size:18.5px; font-weight:800; letter-spacing:-.01em; }
.svc__d{ font-size:13.5px; color:var(--ink-3); margin-top:4px; line-height:1.35; }
.svc__arrow{ margin-left:auto; flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(239,193,105,.5); display:grid; place-items:center;
  color:var(--accent-2); background:rgba(221,162,74,.05); transition:.18s ease; }
.svc:hover .svc__arrow{ background:var(--accent); border-color:var(--accent);
  color:#1c1409; transform:translateX(2px); }
.svc__arrow svg{ width:19px; height:19px; }

/* ---------- Этапы: 5 шагов в ряд (образец krokva.ru) ---------- */
.steps5{ display:grid; grid-template-columns:repeat(5, 1fr); gap:26px; }
/* шаги по образцу референсов Ивана: иконка в кружке + пунктир между шагами */
.step5{ position:relative; }
.step5__ic{ width:52px; height:52px; padding:13px; border-radius:50%; color:var(--accent-2);
  border:1px solid var(--line); background:var(--surface); margin-bottom:18px; }
.step5__ic svg{ width:100%; height:100%; }
@media (min-width:861px){
  .steps5 .step5:not(:last-child)::after{ content:""; position:absolute; top:26px;
    left:64px; right:14px; border-top:1px dashed var(--line); }
}
.step5__t{ font-size:19px; font-weight:800; margin-bottom:8px; }
.step5__d{ font-size:15px; color:var(--ink-2); line-height:1.45; }

/* ---------- Доверие: 3 пункта · фото · 3 пункта (образец teploshov.ru) ---------- */
.trust{ display:grid; grid-template-columns:1fr minmax(300px, 420px) 1fr; gap:44px; align-items:center; }
.trust__col{ display:grid; gap:34px; }
.trust__col--l{ text-align:right; }
.trust__it h3{ font-size:18px; font-weight:800; margin-bottom:8px; }
.trust__it p{ font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.trust__it b{ color:var(--ink); }
.trust__media{ border-radius:var(--radius); overflow:hidden; }
.trust__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
/* классы висят на одном элементе, а не вложены — селектор через потомка не срабатывал */
.trust__media.slot{ min-height:520px; }

/* ---------- Кейсы: фотоплитки с подписью поверх, как в версии помощника ---------- */
.cases{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-rows:305px 305px;
  grid-auto-rows:330px;
  gap:18px;
}
.case{
  position:relative;
  min-height:305px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:0;
  overflow:hidden;
  background:#2a2b25;
  cursor:zoom-in;
}
.case:first-child{ grid-row:1 / span 2; }
.case:nth-child(4){ grid-column:1 / -1; }
.case::after{
  content:"";
  position:absolute;
  inset:38% 0 0;
  z-index:1;
  background:linear-gradient(180deg, rgba(15,16,13,0), rgba(15,16,13,.88));
  pointer-events:none;
}
.case__media{
  position:absolute;
  inset:0;
  background:var(--surface);
  outline:none;
}
.case__media:focus-visible{ outline:3px solid var(--accent-2); outline-offset:-5px; }
.case__slides{
  position:absolute;
  inset:0;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.case__slides::-webkit-scrollbar{ display:none; }
.case__slides > *{ flex:0 0 100%; scroll-snap-align:center; height:100%; }
.case__slides img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s ease;
}
.case:hover .case__slides img{ transform:scale(1.025); }
.case__slides .slot{ min-height:0; border-radius:0; }
.case__nav{ display:none; }
.case__count{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  font-size:11px;
  font-weight:700;
  color:#f8f4eb;
  background:rgba(20,17,13,.72);
  border:1px solid rgba(255,255,255,.22);
  padding:7px 12px;
  border-radius:999px;
  backdrop-filter:blur(7px);
}
.case__place{ display:none; }
.case__body{
  position:absolute;
  left:25px;
  right:25px;
  bottom:24px;
  z-index:2;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#fff;
  pointer-events:none;
}
.tag{
  align-self:flex-start;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#d8c18e;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  font-weight:700;
}
.case__body h3{
  max-width:760px;
  margin:0;
  font-size:24px;
  font-weight:600;
  line-height:1.15;
  color:#fff;
  text-wrap:balance;
}
.case:first-child .case__body h3{ font-size:30px; }
.case__facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  color:rgba(255,255,255,.74);
  font-size:12px;
}
.case__facts b{ color:#fff; font-weight:800; }
.case__geo{
  max-width:620px;
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.6;
}
.case__meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:15px;
  border-top:1px solid var(--line-2); padding-top:12px; }
.case__meta b{ display:block; font-size:17px; }
.case__more{ display:none; }

.case-lightbox{
  position:fixed;
  inset:0;
  z-index:220;
  display:grid;
  grid-template-columns:78px minmax(0, 1fr) 78px;
  align-items:center;
  gap:18px;
  padding:34px;
  background:rgba(12,10,8,.92);
  backdrop-filter:blur(10px);
}
.case-lightbox[hidden]{ display:none !important; }
body.is-lightbox-open{ overflow:hidden; }
.case-lightbox__figure{
  min-width:0;
  max-width:min(1180px, 100%);
  margin:0 auto;
}
.case-lightbox__figure img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#15110d;
}
.case-lightbox__figure figcaption{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding-top:14px;
  color:#f4efe6;
  font-size:15px;
  line-height:1.45;
}
.case-lightbox__figure figcaption b{
  flex:0 0 auto;
  color:var(--accent-2);
  font-size:14px;
}
.case-lightbox__close,
.case-lightbox__nav{
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s ease, border-color .2s ease;
}
.case-lightbox__close:hover,
.case-lightbox__nav:hover{
  background:var(--accent);
  border-color:var(--accent);
}
.case-lightbox__close{
  position:absolute;
  top:22px;
  right:22px;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:32px;
  line-height:1;
}
.case-lightbox__nav{
  width:58px;
  height:58px;
  border-radius:50%;
  justify-self:center;
}
.case-lightbox__nav svg{ width:24px; height:24px; }

/* ---------- Отзывы: сводка · площадки · карточки (образец сайта модульных домов) ---------- */
.revs__sum{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px;
  background:var(--canvas); margin-bottom:22px; }
.revs__score{ font-size:34px; font-weight:800; line-height:1; }
.revs__score span{ font-size:15px; font-weight:600; color:var(--ink-3); }
.revs__stars{ color:var(--accent-2); font-size:19px; letter-spacing:2px; }
.revs__note{ font-size:15px; color:var(--ink-2); }
.revs__link{ margin-left:auto; font-weight:700; color:var(--accent-2); white-space:nowrap;
  display:inline-flex; align-items:center; min-height:44px; }
.revs__link:hover{ color:var(--accent); }
.revs__tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.rtab{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:24px;
  min-height:46px;
  border:1px solid var(--line); background:var(--canvas); color:var(--ink-2);
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }
.rtab:hover{ border-color:var(--ink-3); color:var(--ink); }
.rtab.is-active{ background:var(--accent-sf); border-color:var(--accent); color:var(--ink); }
.rtab__n{ font-size:13px; color:var(--ink-3); }
.revs__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap); }
.rev{ border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  background:var(--canvas); display:flex; flex-direction:column; gap:12px; }
.rev__top{ display:flex; align-items:flex-start; gap:12px; }
.rev__top > span:nth-child(2){ min-width:0; }
.rev__name{ display:block; }
.rev__ava{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid;
  place-items:center; background:var(--surface-2); color:var(--ink-2);
  font-size:14px; font-weight:800; }
.rev__name{ font-size:17px; font-weight:800; }
.rev__sub{ font-size:13.5px; color:var(--ink-3); display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; margin-top:2px; }
.rev__src{ margin-left:auto; flex:0 0 auto; font-size:13px; font-weight:700; color:var(--ink-2);
  border:1px solid var(--line); border-radius:20px; padding:4px 11px; }
.rev__txt{ font-size:15.5px; color:var(--ink-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.rev.is-open .rev__txt{ -webkit-line-clamp:unset; }
.rev__more{ align-self:flex-start; font-size:15px; font-weight:700; color:var(--accent-2);
  background:none; border:0; padding:9px 0; cursor:pointer; font-family:inherit;
  min-height:40px; }
.rev__ph{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin:2px 0 0;
}
.rev__ph--1{ grid-template-columns:1fr; }
.rev__ph img, .rev__ph .slot{
  width:100%;
  height:82px;
  min-height:0;
  border-radius:11px;
  object-fit:cover;
  padding:0;
}
.rev__ph--1 img{ height:104px; }
.rev__deal{ align-self:flex-start; font-size:12.5px; font-weight:700; color:#8fd39a;
  background:rgba(143,211,154,.10); border:1px solid rgba(143,211,154,.35);
  border-radius:20px; padding:4px 11px; }

#otzyvy.section--paper{
  background:
    linear-gradient(180deg, #f2eee4 0%, #ebe5da 100%);
}
#otzyvy .section__head{
  margin-bottom:26px;
}
#otzyvy .revs__sum{
  gap:16px 20px;
  padding:22px 24px;
  border-color:rgba(74,61,40,.13);
  border-radius:18px;
  background:#fffdf8;
  box-shadow:0 18px 54px rgba(45,39,28,.08);
}
#otzyvy .revs__score{
  color:#171813;
}
#otzyvy .revs__score span,
#otzyvy .revs__note{
  color:#5f594f;
}
#otzyvy .revs__stars{
  color:#b97911;
}
#otzyvy .revs__link{
  min-height:46px;
  padding:0 18px;
  border:1px solid rgba(169,104,13,.26);
  border-radius:999px;
  background:#f7f1e6;
  color:#8d570b;
}
#otzyvy .revs__link:hover{
  border-color:#a9680d;
  background:#fff8ec;
}
#otzyvy .revs__tabs{
  margin-bottom:18px;
}
#otzyvy .rtab{
  border-color:rgba(74,61,40,.13);
  background:#fffdf8;
  color:#403a31;
  box-shadow:0 10px 28px rgba(45,39,28,.05);
}
#otzyvy .rtab:hover{
  border-color:rgba(169,104,13,.30);
  color:#1d1b16;
}
#otzyvy .rtab.is-active{
  border-color:#a9680d;
  background:#a9680d;
  color:#fff;
}
#otzyvy .rtab.is-active .rtab__n{
  color:rgba(255,255,255,.78);
}
#otzyvy .rtab__n{
  color:#776e60;
}
#otzyvy .rev{
  border-color:rgba(74,61,40,.12);
  background:#fffdf8;
  box-shadow:0 16px 48px rgba(45,39,28,.08);
}
#otzyvy .rev__ava{
  background:#f0eadf;
  color:#7b5d26;
}
#otzyvy .rev__name{
  color:#171813;
}
#otzyvy .rev__sub{
  color:#776e60;
}
#otzyvy .rev__src{
  border-color:rgba(74,61,40,.13);
  background:#f7f3e9;
  color:#5f594f;
}
#otzyvy .rev__txt{
  color:#4f493f;
}
#otzyvy .rev__more{
  color:#8d570b;
}

/* ---------- Команда: роли слева ↔ карточка справа (образец инженерки) ---------- */
.team{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.team__list{ display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.trole{ display:flex; align-items:center; gap:15px; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; background:none; border:0; border-left:3px solid transparent;
  padding:16px 18px; color:var(--ink); transition:background .15s ease; }
.trole + .trole{ border-top:1px solid var(--line); }
.trole:hover, .trole.is-active{ background:var(--accent-sf); }
.trole.is-active{ border-left-color:var(--accent); }
.trole__ic{ width:44px; height:44px; border-radius:12px; flex:0 0 auto; display:grid;
  place-items:center; background:var(--surface-2); color:var(--accent-2); }
.trole.is-active .trole__ic{ background:var(--accent-cta); color:#fff; }
.trole__ic svg{ width:23px; height:23px; }
.trole__b{ min-width:0; }
.trole__t{ display:block; font-size:16.5px; font-weight:800; line-height:1.2; }
.trole__h{ display:block; font-size:13px; color:var(--ink-3); margin-top:2px; }
.trole__badge{ margin-left:auto; flex:0 0 auto; font-size:11.5px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--accent-2);
  border:1px solid var(--accent); border-radius:20px; padding:4px 9px; }
.trole__chev{ margin-left:auto; flex:0 0 auto; width:19px; height:19px; color:var(--accent-2);
  opacity:0; transition:opacity .15s; }
.trole.is-active .trole__chev{ opacity:1; }
.team__card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; }
.team__photo{ position:relative; aspect-ratio:16/10; border-radius:13px; overflow:hidden;
  background:var(--surface-2); display:grid; place-items:center; }
.team__photo img{ width:100%; height:100%; object-fit:cover; }
.team__name{ font-size:20px; font-weight:800; margin-top:16px; }
.team__role{ font-size:13px; font-weight:700; color:var(--accent-2); margin-top:4px;
  text-transform:uppercase; letter-spacing:.05em; }
.team__desc{ font-size:15px; color:var(--ink-2); line-height:1.5; margin-top:13px; }
.team__docs{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.team__doc{ font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:20px; padding:6px 12px; }

/* ---------- Утилиты ---------- */
.mt-0{ margin-top:0 } .mt-12{ margin-top:12px } .mt-18{ margin-top:18px }
.mt-24{ margin-top:24px } .mt-32{ margin-top:32px }
.center{ text-align:center; }
.stack{ display:grid; gap:18px; }

/* ---------- Адаптив ---------- */
@media (max-width:1180px){
  .rating{ display:none; }   /* дублируется плашкой над отзывами */
}
@media (max-width:1460px){
  .mail{ display:none; }     /* на средних десктопах иначе обрезается телефон */
  .hero--home{
    --home-hero-size:clamp(820px, 76vw, 1060px) auto;
    padding:calc(var(--home-nav-space) + 72px) 0 38px;
  }
}

@media (min-width:1025px) and (max-height:1000px){
  .hero--home,
  .hero--bg{
    padding:calc(var(--home-nav-space) + clamp(46px, 5.2vh, 62px)) 0 26px;
  }
  .hero--home h1,
.hero--bg h1{
    max-width:880px;
    margin-bottom:16px;
    font-size:clamp(42px, 3.02vw, 62px);
    line-height:1.06;
  }
  .hero--home .lead,
.hero--bg .lead{
    max-width:570px;
    margin-bottom:23px;
    font-size:20px;
    line-height:1.44;
  }
  .hero--home .btn,
.hero--bg .btn{
    min-height:54px;
    padding:14px 26px;
  }
  .hero--home .hero__micro,
.hero--bg .hero__micro{
    margin-top:12px;
  }
}

@media (min-width:1025px) and (max-height:820px){
  .hero--home,
  .hero--bg{
    padding:calc(var(--home-nav-space) + 30px) 0 20px;
  }
  .hero--home h1,
.hero--bg h1{
    max-width:760px;
    margin-bottom:12px;
    font-size:clamp(42px, 3.05vw, 46px);
    line-height:1.04;
  }
  .hero--home .lead,
.hero--bg .lead{
    max-width:520px;
    margin-bottom:14px;
    font-size:18.5px;
    line-height:1.38;
  }
  .hero--home .btn,
.hero--bg .btn{
    min-height:50px;
    padding:12px 24px;
    font-size:16px;
  }
  .hero--home .hero__micro,
.hero--bg .hero__micro{
    margin-top:10px;
    font-size:14px;
  }
}

@media (min-width:1025px) and (max-height:760px){
  .hero--home,
  .hero--bg{
    padding:calc(var(--home-nav-space) + 24px) 0 18px;
  }
  .hero--home h1,
.hero--bg h1{
    max-width:710px;
    margin-bottom:10px;
    font-size:38px;
    line-height:1.03;
  }
  .hero--home .lead,
.hero--bg .lead{
    max-width:490px;
    margin-bottom:12px;
    font-size:17px;
    line-height:1.34;
  }
  .hero--home .btn,
.hero--bg .btn{
    min-height:48px;
    padding:11px 22px;
  }
  .hero--home .hero__micro,
.hero--bg .hero__micro{
    margin-top:8px;
  }
}

@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; gap:28px; }
  .cards--3, .cards--4{ grid-template-columns:repeat(2, 1fr); }
  .quiz__grid{ grid-template-columns:1fr; }
  .quiz__aside{ border-right:0; border-bottom:1px solid var(--line); }
  .footer__grid{ grid-template-columns:1fr 1fr; }

  .svc-grid{ grid-template-columns:repeat(2, 1fr); }
  .svc-lead{ grid-column:1 / -1; padding-right:0; }
  .svc-grid > .svc:nth-of-type(-n+3),
  .svc-grid > .svc:nth-of-type(n+4){ grid-column:auto; }
  .svc-grid > .svc:nth-of-type(-n+3) .svc__media,
  .svc-grid > .svc:nth-of-type(n+4) .svc__media{ aspect-ratio:4/3; }
  .calc-note__grid{ grid-template-columns:1fr 1fr; }
  .calc-note{ padding-left:30px; }
  .calc-note__ic, .calc-note::before{ display:none; }
  .steps5{ grid-template-columns:repeat(3, 1fr); gap:30px 24px; }
  .revs__grid{ grid-template-columns:repeat(2, 1fr); }
  /* Доверие: фото уходит наверх, пункты — двумя колонками под ним */
  .trust{ grid-template-columns:1fr 1fr; gap:28px; }
  .trust__col--l{ text-align:left; }
  .trust__media{ grid-column:1 / -1; order:-1; }
  .trust__media img{ aspect-ratio:16/9; }
  .trust__media.slot{ min-height:320px; }
}
@media (max-width:760px){
  body{ font-size:17px; }

  /* --- Шапка: логотип, мессенджеры, телефон. Всё лишнее скрыто --- */
  .brand-meta, .mail, .contact__geo, .contact__hours, .header__sp,
  .rating, .callback, .header__right .btn{ display:none; }
  .header__in{ flex-wrap:nowrap; gap:10px; padding:10px 14px; min-width:0; }
  .home-page .header__in{ padding:10px 14px; }
  .brand{ flex-shrink:1; min-width:0; padding:8px 0; }
  /* ссылки в тексте, подвале и перелинковке — пальцу нужна высота */
  .note .hl, .note a{ display:inline-block; padding:7px 0; }
  .footer .list li a, .footer__legal a{ display:inline-block; padding:9px 0; }
  .card .list li a[href^="tel"]{ display:inline-block; padding:8px 0; }
  .brand__logo{ height:30px; }
  .header__right{ margin-left:auto; gap:8px; min-width:0; flex-shrink:1; }
  .contact{ min-width:0; }
  .contact__phone{ font-size:16px; padding:6px 0; }
  .msgs{ gap:6px; flex:0 0 auto; }
  .msgs a{ width:32px; height:32px; }
  .msgs svg{ width:18px; height:18px; }

  /* --- Навигация: одна строка со скроллом, мега-меню свёрнуто --- */
  .nav{ position:relative; }
  .nav::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:42px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(250,248,242,0), #faf8f2 72%);
  }
  .nav__in{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-right:58px; }
  .home-page .nav__in{ padding-left:24px; padding-right:58px; }
  .nav a{ white-space:nowrap; padding:12px 10px; font-size:15px; }
  .nav__drop{ display:none !important; }
  .nav__services > a::after{ content:""; }

  .cards--2, .cards--3, .cards--4, .compare, .quiz__options{ grid-template-columns:1fr; }

  /* Блоки по референсам на телефоне */
  .svc-grid{ grid-template-columns:1fr; }
  .svc-grid > .svc{ grid-column:auto !important; }
  .svc-grid > .svc .svc__media{ aspect-ratio:16/10 !important; }
  .calc-note{ padding:22px 20px; }
  .calc-note__grid{ grid-template-columns:1fr; gap:18px; }
  .svc__icon{ width:46px; height:46px; left:12px; top:12px; }
  .svc__icon svg{ width:23px; height:23px; }
  .svc__t{ font-size:19px; }
  .steps5{ grid-template-columns:1fr; gap:26px; }
  .step5{ display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; }
  .step5__ic{ width:52px; height:52px; margin-bottom:0; }
  .trust{ grid-template-columns:1fr; }
  .trust__col{ gap:26px; }
  .trust__media.slot{ min-height:240px; }
  .opts, .opts--2{ grid-template-columns:1fr 1fr; gap:10px; }
  .opt__t{ font-size:15px; }
  .opt__d{ display:block; font-size:12px; line-height:1.25; }
  .quiz__q{ font-size:20px; }
  .cases, .revs__grid, .team{ grid-template-columns:1fr; }
  .team, .team__list, .team__card{ min-width:0; }
  .team__card{ order:-1; }
  /* бейдж «отвечает за всё» распирал список на узком экране */
  .trole{ padding:14px 15px; gap:12px; min-width:0; }
  .trole__badge{ white-space:normal; text-align:center; max-width:80px; line-height:1.2; }
  .revs__link{ margin-left:0; }
  #otzyvy .revs__sum{ padding:18px; }
  #otzyvy .revs__link{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  #otzyvy .rtab{ flex:1 1 auto; justify-content:center; }
  .case__nav{ width:46px; height:46px; }
  .rev__ph img,
  .rev__ph .slot{ width:100%; height:78px; }
  .rev__ph--1 img{ height:96px; }
  /* hero на мобиле: буллеты в два столбца и компактнее, чтобы кнопка попала в первый экран */
  .hero{ padding:26px 0 36px; }
  /* grid-auto-rows:1fr тянул низкую карточку под высокую — снизу оставалась пустота */
  .hero__facts{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; gap:8px; margin:18px 0; }
  .fact{ padding:11px 13px; font-size:14px; line-height:1.35; }
  .fact b{ font-size:15px; margin-bottom:2px; }
  .hero .lead{ margin-bottom:18px; }
  .footer__grid{ grid-template-columns:1fr; }
  .section{ padding:48px 0; }
  .btn{ width:100%; }
  .hero__cta{ flex-direction:column; }
}

/* Телефоны: в два столбца текст рвался по одному слову в строку, а карточки
   раздувались в высоту. Ставим один столбец — строка получает всю ширину,
   карточка сжимается до двух строк, блок в целом ниже на четверть. */
@media (max-width:560px){
  .hero__facts{ grid-template-columns:1fr; gap:7px; margin:16px 0; }
  .fact{ padding:9px 12px; column-gap:11px; font-size:13.5px; line-height:1.3; }
  .fact b{ font-size:14.5px; margin-bottom:1px; line-height:1.2; }
  .fact__icon{ width:24px; height:24px; margin-top:1px; }
}

@media (max-width:400px){
  .msgs{ display:none; }          /* дублируются кнопкой «Написать в MAX» в hero */
  .contact__phone{ font-size:16px; }
  .brand__logo{ height:24px; }
}

@media (max-width:1024px){
  .hero--home{
    --home-hero-position: 70% center;
    --home-hero-shade: .98;
    min-height:auto;
    padding:44px 0 38px;
    background:
      linear-gradient(90deg,
        rgba(15,12,9,var(--home-hero-shade)) 0%,
        rgba(18,14,10,.93) 38%,
        rgba(24,17,11,.62) 66%,
        rgba(25,17,10,.18) 100%),
      linear-gradient(180deg, rgba(12,9,7,.18) 0%, rgba(12,9,7,.22) 48%, rgba(12,9,7,.52) 100%),
      url("images/home-hero-bg.webp") var(--home-hero-position) / cover no-repeat;
  }
  .hero--home::before{ display:none; }
}

@media (max-width:760px){
  .hero--home{
    --home-hero-position: 72% center;
    padding:38px 0 36px;
    background:
      linear-gradient(90deg,
        rgba(15,12,9,.95) 0%,
        rgba(18,14,10,.90) 48%,
        rgba(24,17,11,.54) 100%),
      linear-gradient(180deg, rgba(12,9,7,.20) 0%, rgba(12,9,7,.26) 48%, rgba(12,9,7,.66) 100%),
      url("images/home-hero-bg.webp") var(--home-hero-position) / cover no-repeat;
  }
  .hero--home h1,
.hero--bg h1{
    max-width:11.5em;
    margin-bottom:16px;
    font-size:clamp(32px, 9vw, 40px);
    line-height:1.08;
  }
  .hero--home .lead,
.hero--bg .lead{
    max-width:25em;
    margin-bottom:20px;
  }
  .hero--home .btn,
.hero--bg .btn{
    width:100%;
    min-height:56px;
  }
}

@media (max-width:360px){
  .hero--home{
    --home-hero-position: 75% center;
  }
}

/* Невысокие мониторы (ноутбуки, окно не на весь экран): первый экран
   должен помещаться целиком вместе с кнопками. Жмём буллеты и отступы. */
@media (min-width:1025px) and (max-height:900px){
  .hero, .hero--home, .hero--bg{
    min-height:calc(100svh + 90px);
    padding:calc(var(--home-nav-space) + clamp(38px, 4vh, 58px)) 0 72px;
  }
  .hero h1, .hero--home h1, .hero--bg h1{ font-size:clamp(40px, 3vw, 54px); margin-bottom:12px; }
  .hero .lead, .hero--home .lead, .hero--bg .lead{ font-size:17px; margin-bottom:5px; }
  .hero .hero__facts, .hero--home .hero__facts, .hero--bg .hero__facts{ margin:20px 0 24px; gap:8px; max-width:590px; }
  .fact{ padding:9px 12px; font-size:13.8px; column-gap:10px; }
  .fact b{ font-size:15.2px; margin-bottom:1px; }
  .fact__icon{ width:24px; height:24px; }
  .hero .btn, .hero--home .btn, .hero--bg .btn{ min-height:54px; padding:14px 26px; }
  .hero__micro{ margin-top:10px; font-size:14px; }
}

/* ---------- Кто работает на объекте (без фото людей) ----------
   Заменил интерактив с карточками мастеров: фотографий у клиента нет,
   блок стоял с шестью заглушками. Сетка ролей честнее и компактнее. */
.roles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.role{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:20px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(42,35,26,.55), rgba(26,21,17,.55)); }
.role--lead{ grid-column:span 3; grid-template-columns:auto 1fr auto; align-items:center;
  border-color:rgba(221,162,74,.36);
  background:linear-gradient(120deg, rgba(221,162,74,.10), rgba(42,35,26,.5) 46%); }
.role__ic{ width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid rgba(239,193,105,.32); border-radius:12px;
  background:rgba(221,162,74,.06); color:var(--accent-2); }
.role--lead .role__ic{ width:54px; height:54px; }
.role__ic svg{ width:23px; height:23px; }
.role--lead .role__ic svg{ width:28px; height:28px; }
.role__t{ font-size:17.5px; font-weight:800; color:var(--ink); }
.role--lead .role__t{ font-size:21px; }
.role__d{ max-width:80ch; margin-top:4px; font-size:14.5px; line-height:1.45; color:var(--ink-3); }
.role--lead .role__d{ font-size:16px; color:var(--ink-2); max-width:70ch; }
.role__badge{ margin-left:auto; flex:0 0 auto; align-self:center;
  font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--accent-2); border:1px solid var(--accent); border-radius:20px; padding:6px 13px; }
@media (max-width:1024px){
  .roles{ grid-template-columns:repeat(2, 1fr); }
  .role--lead{ grid-column:span 2; }
}
@media (max-width:640px){
  .roles{ grid-template-columns:1fr; }
  .role--lead{ grid-column:auto; grid-template-columns:auto 1fr; }
  .role__badge{ display:none; }
}

/* ---------- Контакты с картой (финальный блок) ---------- */
.contacts{ display:grid; grid-template-columns:1fr 1.05fr; gap:32px; align-items:stretch; }
#kontakty-blok{ padding-bottom:48px; }
.contacts__col{ display:flex; flex-direction:column; }
.contacts__row{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--line-2); }
.contacts__row:first-child{ padding-top:0; }
.contacts__ic{ width:42px; height:42px; display:grid; place-items:center;
  border:1px solid rgba(239,193,105,.30); border-radius:12px;
  background:rgba(221,162,74,.06); color:var(--accent-2); }
.contacts__ic svg{ width:21px; height:21px; }
.contacts__phone{ display:block; font-size:26px; font-weight:800; letter-spacing:-.01em; }
.contacts__phone:hover{ color:var(--accent-2); }
.contacts__mail{ display:block; font-size:19px; font-weight:700; }
.contacts__mail:hover{ color:var(--accent-2); }
.contacts__row b{ font-size:17.5px; }
.contacts__map{ min-height:420px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--surface); }
.contacts__map iframe{ display:block; width:100%; height:100%; min-height:420px;
  filter:grayscale(.28) contrast(1.04) brightness(.92); }
@media (max-width:900px){
  .contacts{ grid-template-columns:1fr; gap:24px; }
  .contacts__map{ min-height:300px; order:-1; }
  .contacts__map iframe{ min-height:300px; }
  .contacts__phone{ font-size:23px; }
  .footer--compact .footer__compact{ align-items:flex-start; flex-direction:column; gap:18px; }
  .footer--compact .footer__services{ justify-content:flex-start; }
}
@media (max-width:560px){
  .footer--compact{ padding-top:22px; }
  .footer--compact .footer__brandline{ display:grid; grid-template-columns:1fr; gap:12px;
    min-width:0; width:100%; }
  .footer--compact .brand__logo{ height:38px; }
  .footer--compact .footer__brandline span{ font-size:17px; line-height:1.25; }
  .footer--compact .footer__services{ gap:10px 16px; font-size:14px; }
  .footer--compact .footer__legal{ margin-top:16px; padding-top:16px; }
}

/* ---------- Фото с подписью ---------- */
.figure{ margin:0; }
.figure img{ width:100%; border-radius:var(--radius); border:1px solid var(--line); }
.figure figcaption{ max-width:104ch; margin-top:12px; font-size:14.5px; line-height:1.5; color:var(--ink-3); }

@media (max-width:760px){
  /* тач-цели в новых блоках: бейдж источника отзыва и контакты */
  .rev__src{ min-height:36px; display:inline-flex; align-items:center; }
  .contacts__phone{ display:inline-flex; align-items:center; min-height:44px; }
  .contacts__mail{ display:inline-flex; align-items:center; min-height:40px; }
}

/* Первый экран на телефоне. Проверка показала: кнопка «Написать в MAX»
   и строка под ней уезжали за экран на шести страницах из семи —
   до +143px. Жмём типографику и отступы, кнопки ставим в ряд. */
@media (max-width:760px){
  .hero, .hero--bg, .hero--home{ padding-top:22px; padding-bottom:28px; }
  .hero--bg, .hero--home{ min-height:0; }
  .hero h1, .hero--bg h1, .hero--home h1{
    font-size:clamp(27px, 7.4vw, 34px); line-height:1.14; margin-bottom:10px; }
  .hero .lead, .hero--bg .lead, .hero--home .lead{
    font-size:15.5px; line-height:1.45; margin-bottom:14px; }
  .hero__facts, .hero--bg .hero__facts, .hero--home .hero__facts{ gap:7px; margin:14px 0; }
  .fact{ padding:9px 11px; font-size:13px; line-height:1.3; column-gap:9px; }
  .fact b{ font-size:14px; margin-bottom:1px; }
  .fact__icon{ width:22px; height:22px; }
  .hero__cta{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .hero__cta .btn{ width:auto; flex:1 1 auto; min-height:50px; padding:13px 18px; font-size:15.5px; }
  .hero__micro{ margin-top:9px; font-size:13.5px; }
}

@media (max-width:760px){
  /* На узком экране текстовая колонка сужается, а горизонтальный градиент
     рассчитан под широкий кадр — светлые места фото выходили под белый текст.
     Поверх кладём вертикальное затемнение по всей ширине. */
  .hero--bg::after, .hero--home::after, .hero--video::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(12,9,7,.86) 0%, rgba(12,9,7,.78) 46%,
      rgba(14,11,8,.62) 70%, rgba(20,16,12,.72) 100%);
  }
  .hero--bg, .hero--home, .hero--video{ isolation:isolate; }
}

/* ---------- Юридические страницы ---------- */
.legal{ padding:52px 0 72px; }
.legal .wrap{ max-width:840px; }
.legal__back{ display:inline-block; margin-bottom:26px; font-size:15px; color:var(--accent-2); }
.legal__back:hover{ color:var(--accent); }
.legal h1{ font-size:clamp(27px, 3vw, 38px); margin-bottom:10px; }
.legal__date{ font-size:15px; color:var(--ink-3); margin-bottom:30px;
  padding-bottom:22px; border-bottom:1px solid var(--line); }
.legal h2{ font-size:20px; margin:32px 0 12px; }
.legal p{ font-size:16.5px; line-height:1.62; color:var(--ink-2); margin-bottom:14px; }
.legal a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--accent); }
.legal__links{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  font-size:15.5px; }

/* ---------- Cookie-баннер (мягкий: уведомляет, не блокирует) ---------- */
.cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:760px; margin:0 auto; display:flex; align-items:center; gap:18px;
  padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(26,21,16,.97); backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.5); }
.cookie[hidden]{ display:none; }
.cookie__text{ font-size:14.5px; line-height:1.45; color:#ded3c2; }
.cookie__text a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:2px; }
.cookie__btn{ flex:0 0 auto; min-height:46px; padding:12px 26px; border:0;
  border-radius:var(--radius-s); background:var(--accent-cta); color:var(--accent-ink);
  font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer; }
.cookie__btn:hover{ filter:brightness(1.08); }
@media (max-width:640px){
  .cookie{ bottom:92px; flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px; }
  .cookie__btn{ width:100%; }
}

/* фото эксперта в квизе — компактное, иначе боковая колонка тянет всю высоту */
.qex__photo{ aspect-ratio:1/1; max-width:150px; }
.qex__name{ font-size:17px; }
.qex__badges{ gap:7px; }
.qex__badge{ font-size:13px; }

/* Секция квиза должна помещаться в один экран — Иван, 18.08.
   Поджимаем её отдельно от остальных секций. */
#kvyz{ padding:56px 0; }
#kvyz .section__head{ margin-bottom:20px; }
#kvyz .section__head .lead{ margin-top:8px; font-size:16.5px; }

/* ---------- Опыт команды (главная) ---------- */
.exp{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.exp__num{ padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(40,32,23,.42), rgba(24,19,14,.42)); }
.exp__num b{ display:block; font-size:clamp(26px, 2.4vw, 34px); font-weight:800;
  line-height:1.05; color:var(--accent-2); letter-spacing:-.02em; margin-bottom:8px; }
.exp__num span{ display:block; font-size:15px; line-height:1.45; color:var(--ink-2); }
/* на светлой полке полупрозрачная тёмная заливка давала грязно-серый:
   карточка белая, цифра тёмная, как в референсах Ивана */
.section--paper .exp__num{ background:var(--paper-card); border-color:var(--paper-line); }
.section--paper .exp__num b{ color:var(--paper-ink); }
.section--paper .exp__num span{ color:var(--paper-ink2); }
.crew{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.crew__item{
  min-height:210px;
  padding:26px 28px;
  border:1px solid rgba(74,61,40,.12);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(247,243,233,.92)),
    var(--paper-card);
  box-shadow:0 16px 44px rgba(45,39,28,.08);
}
.crew__num{
  display:block;
  margin-bottom:34px;
  color:#9b7c48;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
}
.crew__item h3{
  max-width:260px;
  margin:0 0 11px;
  color:var(--paper-ink);
  font-size:23px;
  font-weight:800;
  line-height:1.12;
  text-wrap:balance;
}
.crew__item p{
  max-width:310px;
  margin:0;
  color:var(--paper-ink2);
  font-size:15px;
  line-height:1.52;
}

.wood-section{
  background:
    linear-gradient(180deg, #faf8f2 0%, #f2eee4 100%);
}
.wood-grid{
  display:grid;
  grid-template-columns:1.1fr .95fr .95fr;
  grid-auto-rows:minmax(220px, auto);
  gap:18px;
}
.wood-card{
  position:relative;
  min-width:0;
  padding:24px 26px;
  border:1px solid rgba(74,61,40,.13);
  border-radius:18px;
  background:rgba(255,255,255,.54);
  box-shadow:0 16px 46px rgba(45,39,28,.08);
}
.wood-card--photo{
  grid-row:span 2;
  min-height:460px;
  overflow:hidden;
  padding:0;
  color:#fff;
  background:#2c271f;
}
.wood-card--photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  filter:saturate(.92) contrast(.98);
}
.wood-card--photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(20,17,12,.76) 100%);
}
.wood-card--photo div{
  position:absolute;
  z-index:1;
  left:25px;
  right:25px;
  bottom:25px;
}
.wood-card--photo span,
.wood-card__tag{
  display:block;
  margin-bottom:13px;
  color:#a77a2f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.wood-card--photo span{ color:#e1c78e; }
.wood-card h3{
  margin:0 0 12px;
  color:var(--paper-ink);
  font-size:24px;
  font-weight:800;
  line-height:1.13;
  text-wrap:balance;
}
.wood-card--photo h3{
  max-width:420px;
  color:#fff;
}
.wood-card p{
  margin:0;
  color:#5b554a;
  font-size:15px;
  line-height:1.55;
}
.wood-note{
  display:grid;
  grid-template-columns:minmax(240px, .55fr) 1fr;
  gap:26px;
  align-items:start;
  padding:24px 28px;
  border:1px solid rgba(155,124,72,.25);
  border-radius:18px;
  background:#ebe5da;
}
.wood-note h3{
  margin:0;
  color:var(--paper-ink);
  font-size:24px;
  line-height:1.15;
}
.wood-note ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.wood-note li{
  position:relative;
  padding-left:22px;
  color:#5b554a;
  font-size:15px;
  line-height:1.45;
}
.wood-note li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9b7c48;
}

/* ---------- Знакомство с директором ---------- */
.boss{ display:grid; grid-template-columns:minmax(280px, 400px) 1fr; gap:44px; align-items:start; }
.boss__photo{ position:sticky; top:130px; }
.boss__photo img{ width:100%; border-radius:var(--radius); display:block; }
.boss__slot{ aspect-ratio:4/5; border:2px dashed #4a4036; border-radius:var(--radius);
  background:var(--surface); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; color:var(--ink-3); text-align:center; padding:22px; }
.boss__slot svg{ width:64px; height:64px; opacity:.5; }
.boss__slot span{ font-size:14px; }
.boss__eyebrow{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:var(--accent-2); margin-bottom:12px; }
.boss__body h2{ margin-bottom:16px; }
.boss__body .lead{ margin-bottom:28px; }
.boss__facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bfact{ display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:start;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--canvas); }
.bfact__ic{ grid-row:span 2; width:30px; height:30px; margin-top:1px;
  display:grid; place-items:center; color:var(--accent-2); }
.bfact__ic svg{ width:100%; height:100%; }
.bfact b, .bfact span:not(.bfact__ic){ grid-column:2; }
.bfact b{ display:block; font-size:16.5px; font-weight:800; line-height:1.25;
  color:var(--ink); margin-bottom:5px; }
.bfact span{ display:block; font-size:14.5px; line-height:1.42; color:var(--ink-3); }
.boss__sign{ margin-top:24px; font-size:15px; color:var(--ink-3); font-style:italic; }

/* ---------- Директор: перенос структуры из версии помощника ---------- */
.director-section{
  background:var(--paper);
  color:var(--paper-ink);
  padding:118px 0;
}
.director-card{
  min-height:760px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(74,61,40,.12);
  border-radius:32px;
  background:
    radial-gradient(circle at 12% 15%, rgba(211,183,127,.33), rgba(211,183,127,0) 36%),
    linear-gradient(112deg, #eee6d7 0%, #f7f2e9 54%, #d9d0c1 100%);
  box-shadow:0 24px 70px rgba(45,39,28,.10);
}
.director-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(247,242,233,.98) 0%, rgba(247,242,233,.92) 49%, rgba(247,242,233,.18) 66%, rgba(247,242,233,0) 78%);
}
.director-content{
  position:relative;
  z-index:2;
  width:61%;
  padding:66px 0 58px 64px;
}
.director-content .section-kicker{
  display:block;
  margin-bottom:18px;
  color:#8a7652;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1.2;
  text-transform:uppercase;
}
.director-content h2{
  max-width:670px;
  margin:0 0 21px;
  color:var(--paper-ink);
  font-family:Georgia, 'Times New Roman', serif;
  font-size:58px;
  font-weight:400;
  line-height:1.01;
  letter-spacing:0;
}
.director-lead{
  max-width:640px;
  margin:0 0 29px;
  color:#5f5b52;
  font-size:15px;
  line-height:1.7;
}
.director-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 27px;
  max-width:650px;
  border-top:1px solid rgba(56,51,42,.18);
}
.director-facts article{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:11px;
  min-height:96px;
  padding:15px 0;
  border-bottom:1px solid rgba(56,51,42,.18);
}
.director-fact-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:#9b7c48;
  font-size:16px;
  font-weight:700;
}
.director-facts h3{
  margin:1px 0 5px;
  color:#26251f;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
}
.director-facts p{
  margin:0;
  color:#6c675e;
  font-size:13.5px;
  line-height:1.48;
}
.director-sign{
  margin-top:24px;
  color:#716756;
  font-size:14px;
  line-height:1.45;
}
.director-photo-frame{
  position:absolute;
  inset:0 0 0 auto;
  width:52%;
  margin:0;
  overflow:hidden;
  background:#d5d0c9;
}
.director-photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(238,230,215,.92) 0%, rgba(238,230,215,.15) 24%, rgba(238,230,215,0) 46%),
    linear-gradient(180deg, rgba(0,0,0,0) 73%, rgba(26,25,21,.42) 100%);
}
.director-photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 38%;
  filter:saturate(.86) contrast(.98);
}
.director-photo-frame figcaption{
  position:absolute;
  right:29px;
  bottom:24px;
  z-index:1;
  color:#f6f1e8;
  text-shadow:0 1px 12px rgba(0,0,0,.38);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.04em;
}

/* ---------- Призыв под кейсами ---------- */
.cases__cta{ padding:26px 30px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(40,32,23,.44), rgba(24,19,14,.44)); }
.cases__cta-t{ font-size:21px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.cases__cta-d{ font-size:16px; color:var(--ink-2); margin-bottom:18px; max-width:70ch; }

@media (max-width:1024px){
  .exp{ grid-template-columns:1fr 1fr; }
  .crew{ grid-template-columns:1fr; }
  .crew__item{ min-height:0; }
  .crew__num{ margin-bottom:18px; }
  .wood-grid{ grid-template-columns:1fr 1fr; }
  .wood-card--photo{ grid-column:1 / -1; grid-row:auto; min-height:360px; }
  .wood-note{ grid-template-columns:1fr; }
  .boss{ grid-template-columns:1fr; gap:28px; }
  .boss__photo{ position:static; max-width:340px; }
  .director-card{ min-height:820px; }
  .director-content{ width:66%; padding-left:48px; }
  .director-content h2{ font-size:48px; }
  .director-facts{ grid-template-columns:1fr; }
  .director-facts article{ min-height:0; }
  .director-photo-frame{ width:49%; }
}
@media (max-width:760px){
  .exp{ grid-template-columns:1fr; gap:12px; }
  .exp__num{ padding:16px 18px; }
  .crew{ gap:12px; }
  .crew__item{ padding:21px 20px; border-radius:16px; }
  .crew__item h3{ font-size:21px; }
  .crew__item p{ font-size:14px; }
  .wood-grid{ grid-template-columns:1fr; gap:12px; }
  .wood-card{ padding:21px 20px; border-radius:16px; }
  .wood-card--photo{ min-height:340px; padding:0; }
  .wood-card--photo div{ left:20px; right:20px; bottom:20px; }
  .wood-card h3,
  .wood-note h3{ font-size:21px; }
  .wood-card p,
  .wood-note li{ font-size:14px; }
  .wood-note{ gap:16px; padding:21px 20px; border-radius:16px; }
  .boss__facts{ grid-template-columns:1fr; }
  /* пустой слот под фото директора на телефоне съедал полэкрана */
  .boss__slot{ aspect-ratio:auto; min-height:190px; }
  .boss__slot svg{ width:44px; height:44px; }
  .director-section{ padding:80px 0; }
  .director-card{
    min-height:0;
    display:flex;
    flex-direction:column;
    border-radius:22px;
  }
  .director-card::before{ display:none; }
  .director-photo-frame{
    position:relative;
    order:-1;
    width:100%;
    height:370px;
  }
  .director-photo-frame::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(32,29,23,.42) 100%); }
  .director-photo-frame img{ object-position:50% 34%; }
  .director-photo-frame figcaption{ left:18px; right:18px; bottom:16px; }
  .director-content{
    width:100%;
    padding:38px 30px 34px;
  }
  .director-content h2{ font-size:39px; }
  .director-lead{ font-size:14px; }
  .director-facts{ grid-template-columns:1fr 1fr; }
  .director-facts article{ min-height:0; padding:14px 0; }

  .cases{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-rows:auto;
  }
  .case,
  .case:first-child,
  .case:nth-child(4){
    grid-column:auto;
    grid-row:auto;
    min-height:390px;
  }
  .case:first-child .case__body h3{ font-size:24px; }
  .case__body{ left:20px; right:20px; bottom:20px; }
  .case-lightbox{
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
  }
  .case-lightbox__figure img{ max-height:72vh; }
  .case-lightbox__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
  }
  .case-lightbox__nav--prev{ left:14px; }
  .case-lightbox__nav--next{ right:14px; }
  .case-lightbox__figure figcaption{
    flex-direction:column;
    gap:6px;
  }
  .cases__cta{ padding:20px; }
}

/* иконки каналов связи в форме квиза */
.chan span{ display:inline-flex; align-items:center; gap:9px; }
.chan__ic{ width:18px; height:18px; }
.chan__logo{ width:20px; height:20px; border-radius:5px; display:block; }

@media (max-width:1024px){
  /* эксперт уходит под квиз, а не рядом */
  .quiz__grid{ grid-template-columns:1fr; }
  .quiz__aside{ order:0; border-left:0; border-bottom:1px solid var(--line); }
  .qex__photo{ max-width:120px; }
}
@media (max-width:760px){
  .opts{ grid-template-columns:1fr 1fr; gap:8px; }
  .opt__img{ height:127px; }
  .opt__t{ font-size:14px; }
}

@media (max-width:430px){
  .director-photo-frame{ height:315px; }
  .director-content{ padding:30px 22px 26px; }
  .director-content h2{ font-size:34px; }
  .director-facts{ grid-template-columns:1fr; }
  .director-facts article{ grid-template-columns:27px 1fr; gap:10px; padding:13px 0; }
  .director-facts h3{ font-size:13px; }
  .case,
  .case:first-child,
  .case:nth-child(4){ min-height:360px; }
  .case__body h3,
  .case:first-child .case__body h3{ font-size:21px; }
  .case__geo{ font-size:11.5px; }
}

/* ============================================================
   Боевая полировка 26.08.2026
   ============================================================ */

.nav__toggle{ display:none; }
.msgs{ display:none; }

.hp-field{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.form-error{
  margin:14px 0 0;
  padding:12px 14px;
  border:1px solid rgba(180,73,50,.38);
  border-radius:10px;
  background:rgba(180,73,50,.12);
  color:#ffd9d0 !important;
  font-size:14px;
  line-height:1.45;
}
.form-error[hidden]{ display:none; }
.btn.is-loading{ cursor:wait; opacity:.72; }

/* Два кейса — две полноценные карточки, без искусственной пустой трети. */
.cases.cases--one{
  display:block;
}
.cases.cases--one > .case,
.cases.cases--one > .case:first-child{
  width:100%;
  min-height:520px;
}
.cases.cases--two{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:520px;
  grid-auto-rows:520px;
}
.cases.cases--two > .case,
.cases.cases--two > .case:first-child,
.cases.cases--two > .case:nth-child(4){
  grid-column:auto;
  grid-row:auto;
  min-height:520px;
}
.cases.cases--two > .case:first-child .case__body h3{ font-size:26px; }

/* Единая типографика вместо случайного журнального блока. */
.director-card{ min-height:680px; border-radius:24px; }
.director-content h2{
  font-family:inherit;
  font-size:clamp(40px, 4.1vw, 58px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.035em;
}

/* На тёмной версии этапов поздние общие правила больше не гасят контраст. */
#etapy.section--paper .step5__t{ color:#f4f0e7; }
#etapy.section--paper .step5__d{ color:rgba(255,255,255,.72); }
#etapy.section--paper .step5__ic{
  color:#d0b171;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}
#etapy.section--paper .btn--ghost{
  color:#f8f4eb;
  border-color:rgba(255,255,255,.3);
}

/* Большие постеры остаются акцентами, но не перетягивают страницу на себя. */
.shlifovka-poster-section,
.service-poster-section{ padding-block:72px; }
.shlifovka-poster,
.service-poster{
  min-height:640px;
  border-radius:22px;
  box-shadow:0 22px 60px rgba(34,30,24,.12);
}
.shlifovka-poster h2,
.service-poster h2{ font-size:clamp(38px, 5vw, 68px); }

@media (min-width:761px){
  .shlifovka-poster__copy,
  .service-poster__copy{ padding:54px 52px 46px; }
  .shlifovka-poster h2,
  .service-poster h2{ font-size:clamp(40px, 3.7vw, 54px); }
  .shlifovka-poster p,
  .service-poster p{ margin-top:20px; font-size:18px; }
  .shlifovka-poster__bottom,
  .service-poster__bottom{ margin-top:34px; }
  .shlifovka-poster__claim,
  .service-poster__claim{ font-size:27px; }
}

.error-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:#24251f;
  color:#f8f4eb;
}
.error-page__main{ width:min(720px, 100%); text-align:center; }
.error-page__brand{ display:inline-flex; margin-bottom:42px; }
.error-page__brand .brand__logo{ width:170px; }
.error-page h1{ margin:8px 0 18px; font-size:clamp(44px, 8vw, 82px); }
.error-page .lead{ margin:0 auto 30px; color:rgba(255,255,255,.7); }
.error-page .hero__actions{ justify-content:center; }
.error-page .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }

@media (max-width:760px){
  .nav{
    position:sticky;
    top:0;
    z-index:145;
    padding:8px 16px;
    background:rgba(250,248,242,.97);
    box-shadow:0 8px 22px rgba(31,33,29,.08);
    backdrop-filter:blur(12px);
  }
  .nav__toggle{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 10px;
    border:0;
    background:transparent;
    color:#1f211d;
    font:700 14px/1 Onest, sans-serif;
    cursor:pointer;
  }
  .nav__toggle-lines{ width:22px; display:grid; gap:4px; }
  .nav__toggle-lines i{ display:block; height:2px; border-radius:2px; background:currentColor; }
  .nav__in,
  .home-page .nav__in{
    display:none;
    max-width:none;
    overflow:visible;
    padding:8px 0 4px;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .nav.is-open .nav__in{ display:flex; }
  .nav__in > a,
  .nav__services > a{
    display:block;
    width:100%;
    padding:12px 10px;
    border-radius:9px;
  }
  .nav__in > a:hover,
  .nav__services > a:hover{ background:#f0eadf; }
  .nav.is-open .nav__toggle-lines i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav.is-open .nav__toggle-lines i:nth-child(2){ opacity:0; }
  .nav.is-open .nav__toggle-lines i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .cases.cases--two{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-rows:auto;
  }
  .cases.cases--two > .case,
  .cases.cases--two > .case:first-child{
    min-height:390px;
  }
  .cases.cases--two > .case:first-child .case__body h3{ font-size:24px; }
  .cases.cases--one > .case,
  .cases.cases--one > .case:first-child{ min-height:390px; }

  .director-section{ padding-block:56px; }
  .director-card{ min-height:0; }
  .director-content h2{ font-size:34px; }

  .shlifovka-poster-section,
  .service-poster-section{ padding-block:38px; }
  .shlifovka-poster,
  .service-poster{ min-height:0; }

  .cookie{
    left:10px;
    right:10px;
    bottom:66px;
    padding:12px 14px;
  }
  .cookie__text{ font-size:12.5px; }
  .cookie__btn{ min-height:40px; padding:9px 18px; }
}

/* Фото с подписью сбоку: на всю ширину кадр занимал два экрана. */
.figure--side{ display:grid; grid-template-columns:1.35fr 1fr; gap:26px; align-items:center; }
.figure--side img{ border-radius:var(--radius); }
.figure--side figcaption{ margin-top:0; font-size:16px; line-height:1.55; }
@media (max-width:900px){
  .figure--side{ grid-template-columns:1fr; gap:14px; }
}

/* иконка в карточке — чуть темнее золота, чтобы не спорила с текстом */
.card__ic{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:12px;
  border-radius:12px; background:rgba(221,162,74,.09); color:rgba(239,193,105,.85); }
.card__ic svg{ width:24px; height:24px; }

/* ============================================================
   Быстрый дизайн-проход перед показом клиенту, 25.08.2026.
   Цель: убрать ощущение разрозненных рамочных блоков, не меняя
   структуру страниц и не ожидая дополнительных материалов.
   ============================================================ */

.quiz{
  border-color:rgba(239,193,105,.16);
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(221,162,74,.12), transparent 34%),
    linear-gradient(180deg, rgba(35,29,23,.78), rgba(22,18,14,.88));
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.quiz__body{ padding:32px 34px 34px; }
.quiz__bar{ background:rgba(244,239,230,.10); }
.opts{ gap:18px; }
.opt{
  border-width:1px;
  border-color:rgba(244,239,230,.16);
  border-radius:16px;
  background:rgba(28,24,19,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.opt:hover{
  border-color:rgba(239,193,105,.62);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.opt.is-on{
  border-color:var(--accent-2);
  background:linear-gradient(180deg, rgba(67,49,25,.72), rgba(34,26,17,.92));
  box-shadow:0 0 0 1px rgba(239,193,105,.18), 0 16px 34px rgba(0,0,0,.28);
}
.opt__img{ height:204px; }
.opt__img img{ transition:transform .5s ease, filter .5s ease; }
.opt:hover .opt__img img{ transform:scale(1.035); filter:saturate(1.05); }
.opt__b{ padding:11px 13px 12px; }
.opt__tick{
  width:31px;
  height:31px;
  background:rgba(18,15,12,.56);
  border-color:rgba(239,193,105,.58);
}
.opt.is-on .opt__tick{
  box-shadow:0 0 0 4px rgba(239,193,105,.14);
}

.case{
  border:0;
  border-radius:22px;
  box-shadow:0 18px 46px rgba(0,0,0,.26);
}
.case::after{
  inset:26% 0 0;
  background:linear-gradient(180deg, rgba(15,16,13,0), rgba(15,16,13,.58) 48%, rgba(15,16,13,.82));
}
.case__count{
  top:16px;
  right:16px;
  background:rgba(18,15,12,.62);
}
.case__body{
  left:28px;
  right:28px;
  bottom:26px;
}
.case__body h3{
  font-weight:700;
  line-height:1.12;
}
.case-section-cta{
  margin-top:14px;
}
.case-section-cta .btn{
  min-height:58px;
  box-shadow:0 14px 30px rgba(138,83,18,.22);
}
#keysy{
  padding-top:clamp(46px, 4.6vw, 76px);
  padding-bottom:clamp(48px, 5vw, 82px);
}

.boss{
  position:relative;
  grid-template-columns:minmax(280px, 38%) 1fr;
  gap:0;
  align-items:stretch;
  padding:32px;
  overflow:hidden;
  border:1px solid rgba(74,61,40,.12);
  border-radius:var(--radius-l);
  background:
    radial-gradient(circle at 12% 15%, rgba(211,183,127,.28), rgba(211,183,127,0) 36%),
    linear-gradient(112deg, #eee6d7 0%, #f7f2e9 58%, #ddd3c3 100%);
  color:var(--paper-ink);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.boss__photo{
  position:relative;
  top:auto;
  align-self:stretch;
}
.boss__photo img,
.boss__slot{
  width:100%;
  height:100%;
  min-height:560px;
  border:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(48,40,28,.14);
}
.boss__slot{
  position:relative;
  aspect-ratio:auto;
  display:block;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(26,22,18,.54) 100%),
    url("images/director-dmitry-sachkov.jpg") 50% 38% / cover no-repeat;
}
.boss__slot svg{ display:none; }
.boss__slot span{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  display:block;
  color:#f6f1e8;
  text-align:left;
  font-size:12px;
  line-height:1.45;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.boss__photo img{
  object-fit:cover;
  object-position:50% 38%;
}
.boss__body{
  padding:20px 8px 8px 42px;
}
.boss__eyebrow{
  color:#8a7652;
  letter-spacing:.12em;
}
.boss__body h2{
  max-width:820px;
  color:var(--paper-ink);
}
.boss__body .lead{
  color:#5f5b52;
}
.boss__facts{
  gap:12px;
}
.bfact{
  border-color:rgba(56,51,42,.13);
  background:rgba(255,255,255,.46);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
}
.bfact__ic{
  color:#9b7c48;
}
.bfact b{
  color:#27231e;
}
.bfact span{
  color:#665e52;
}
.boss__sign{
  color:#716756;
}

@media (max-width:1024px){
  .boss{
    grid-template-columns:1fr;
    gap:24px;
    padding:24px;
  }
  .boss__photo{
    max-width:none;
  }
  .boss__photo img,
  .boss__slot{
    min-height:430px;
  }
  .boss__body{
    padding:0;
  }
}

@media (max-width:760px){
  .quiz{
    border-radius:18px;
  }
  .quiz__body{
    padding:24px 18px 24px;
  }
  .opts{
    gap:10px;
  }
  .opt{
    border-radius:14px;
  }
  .opt__img{
    height:152px;
  }
  .boss{
    padding:18px;
    border-radius:20px;
  }
  .boss__photo img,
  .boss__slot{
    min-height:360px;
    border-radius:16px;
  }
  .boss__facts{
    grid-template-columns:1fr;
  }
}

@media (max-width:430px){
  .opt__img{
    height:142px;
  }
  .boss__photo img,
  .boss__slot{
    min-height:315px;
  }
  .case{
    border-radius:18px;
  }
}

/* ============================================================
   Молочная палитра и быстрые действия, 25.08.2026.
   Основа взята из версии помощника: бумажный фон, тёплая охра,
   оливково-угольные акцентные секции вместо почти чёрных полос.
   ============================================================ */

.header{
  color:#f8f4eb;
  background:linear-gradient(90deg, rgba(17,14,11,.98), rgba(28,22,18,.93));
  border-bottom-color:rgba(211,183,127,.22);
  box-shadow:0 12px 34px rgba(14,12,9,.16);
}
.header .brand__desc,
.header .contact__hours,
.header .rate__cap,
.header .mail{ color:#bdb4a6; }
.header .contact__phone,
.header .brand__name{ color:#fff; }
.header .copy{ border-color:rgba(255,255,255,.18); color:#d7c7ad; }
.nav{
  background:rgba(247,243,233,.96);
  border-bottom:1px solid rgba(27,28,23,.10);
  box-shadow:0 12px 30px rgba(31,33,29,.08);
  backdrop-filter:saturate(1.05) blur(10px);
  -webkit-backdrop-filter:saturate(1.05) blur(10px);
}
.nav a{ color:#332f28; }
.nav a:hover,
.nav a.is-active{ color:#171813; }
.nav__drop{
  background:#fff;
  border-color:rgba(27,28,23,.14);
  box-shadow:0 22px 48px rgba(31,33,29,.12);
}
.nav__drop a:hover{ background:#f2eee4; }

.section{ background:var(--canvas); color:var(--ink); }
.section + .section::before{
  background:linear-gradient(90deg, transparent, rgba(183,146,82,.18) 24%,
    rgba(183,146,82,.22) 50%, rgba(183,146,82,.18) 76%, transparent);
}
.section--tint{
  background:
    radial-gradient(900px 460px at 18% 0%, rgba(183,146,82,.13), transparent 62%),
    linear-gradient(180deg, #f2eee4 0%, #ebe5da 100%);
}

.card,
.prime,
.rev,
.revs__sum,
.faq details,
.contacts__row,
.footer--compact{
  box-shadow:0 1px 0 rgba(255,255,255,.58) inset;
}

#kvyz,
#kontakty-blok{
  color:#171813;
}
#kvyz .section__head h2,
#kontakty-blok .section__head h2{ color:#171813; }
#kvyz .section__head .lead,
#kontakty-blok .section__head .lead{ color:#57544d; }
.quiz{
  color:#f8f4eb;
  border-color:rgba(211,183,127,.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(194,160,95,.18), transparent 34%),
    linear-gradient(180deg, rgba(43,43,36,.96), rgba(31,32,27,.98));
}
.quiz .lead,
.quiz p{ color:#d4cabc; }
.quiz__q,
.quiz__sum b,
.quiz .field label{ color:#f8f4eb; }
.quiz__hint,
.quiz__step,
.quiz__multi,
.quiz__back,
.quiz__sum,
.quiz .consent{ color:#bcb4a8; }
.quiz__back:hover{ color:#fff; }
.quiz .field input,
.quiz .field textarea{
  color:#f8f4eb;
  background:#1f211d;
  border-color:rgba(255,255,255,.18);
}
.quiz .field input:focus,
.quiz .field textarea:focus{ border-color:#c2a05f; }
.quiz .chan span{
  color:#f8f4eb;
  border-color:rgba(255,255,255,.20);
}
.quiz .chan input:checked + span{
  border-color:#c2a05f;
  background:rgba(194,160,95,.16);
}

#etapy.section--paper{
  --canvas:#292a24;
  --surface:#32332c;
  --surface-2:#252620;
  --line:rgba(255,255,255,.18);
  --line-2:rgba(255,255,255,.14);
  --ink:#f4f0e7;
  --ink-2:rgba(255,255,255,.68);
  --ink-3:rgba(255,255,255,.54);
  --accent-2:#c6a662;
  background:#292a24;
  color:#f4f0e7;
}
#etapy.section--paper h2,
#etapy.section--paper h3,
#etapy.section--paper b,
#etapy.section--paper .step5__t{ color:#f4f0e7; }
#etapy.section--paper .lead,
#etapy.section--paper .step5__d{ color:rgba(255,255,255,.68); }
#etapy.section--paper .step5__ic{
  color:#c6a662;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
#etapy.section--paper .steps5 .step5:not(:last-child)::after{
  background:repeating-linear-gradient(90deg, rgba(198,166,98,.8) 0 7px, transparent 7px 15px);
}
#etapy.section--paper .btn--ghost{
  color:#f8f4eb;
  border-color:rgba(255,255,255,.28);
}
#etapy.section--paper .btn--ghost:hover{ border-color:#c6a662; }

#keysy{ padding-bottom:58px; }
#keysy + #etapy{ padding-top:58px; }
#etapy .step5__t{ color:#171813; }
#etapy .step5__d{ color:#57544d; }
#etapy .step5__ic{
  color:#9b6b19;
  background:#fffdf8;
  border:1px solid rgba(155, 107, 25, .22);
}
#etapy .steps5 .step5:not(:last-child)::after{
  background:repeating-linear-gradient(90deg, rgba(155, 107, 25, .46) 0 7px, transparent 7px 15px);
}
#etapy .btn--ghost{
  color:#171813;
  border-color:rgba(27, 28, 23, .18);
}
#etapy .btn--ghost:hover{ border-color:rgba(155, 107, 25, .45); }

.faq summary{ color:#171813; }
.faq summary::after{ color:#9b7c48; }
.faq p{ color:#57544d; }
.contacts__ic{
  color:#9b7c48;
  border-color:rgba(155,124,72,.28);
  background:rgba(183,146,82,.09);
}
.contacts__phone,
.contacts__mail{ color:#171813; }
.contacts__phone:hover,
.contacts__mail:hover{ color:#8d570b; }
.contacts__map{
  border-color:rgba(27,28,23,.15);
  box-shadow:0 20px 60px rgba(31,33,29,.12);
}
.contacts__map iframe{ filter:saturate(.8) contrast(1.02) brightness(.98); }
#otzyvy.section--paper{
  padding-bottom:clamp(58px, 5vw, 84px);
  background:
    linear-gradient(180deg, #f2eee4 0%, #eee7dc 72%, #f0eadf 100%);
}
#otzyvy + .section--tint{
  padding-top:clamp(58px, 5vw, 84px);
  padding-bottom:clamp(40px, 3.8vw, 58px);
  background:
    linear-gradient(180deg, #f0eadf 0%, #f4f0e8 44%, #f1eadf 100%);
}
#otzyvy + .section--tint::before,
#kontakty-blok::before{
  display:none;
}
#otzyvy + .section--tint .faq{
  display:grid;
  gap:10px;
  border-top:0;
}
#otzyvy + .section--tint .faq details{
  border:1px solid rgba(74,61,40,.12);
  border-radius:14px;
  background:rgba(255,253,248,.56);
  box-shadow:0 1px 0 rgba(255,255,255,.58) inset;
  overflow:hidden;
}
#otzyvy + .section--tint .faq summary{
  padding:18px 50px 18px 20px;
  font-size:18px;
  line-height:1.35;
}
#otzyvy + .section--tint .faq summary::after{
  right:20px;
  top:14px;
}
#otzyvy + .section--tint .faq p{
  max-width:76ch;
  padding:0 50px 20px 20px;
  font-size:16px;
  line-height:1.58;
}
#kontakty-blok.section--tint{
  padding-top:clamp(42px, 4vw, 62px);
  background:
    linear-gradient(180deg, #f1eadf 0%, #ebe2d4 100%);
}
#kontakty-blok .contacts__row{
  border-color:rgba(74,61,40,.12);
}
#kontakty-blok .contacts__map{
  border-color:rgba(74,61,40,.14);
  box-shadow:0 18px 54px rgba(45,39,28,.10);
}
.footer--compact{
  color:#f8f4eb;
  background:linear-gradient(100deg,#110e0b,#1d1813);
}
.cases__cta{
  border-color:rgba(27,28,23,.14);
  background:#f7f3e9;
  color:#171813;
  box-shadow:0 20px 60px rgba(31,33,29,.10);
}
.cases__cta-d{ color:#57544d; }

/* Главная в молочном ключе: фото остаётся, но первый экран больше не утоплен в уголь. */
.home-page .hero--home{
  background:
    linear-gradient(90deg,
      rgba(250,248,242,1) 0%,
      rgba(250,248,242,.82) 28%,
      rgba(250,248,242,.38) 45%,
      rgba(250,248,242,.08) 61%,
      rgba(250,248,242,0) 76%),
    linear-gradient(180deg,
      rgba(250,248,242,.22) 0%,
      rgba(250,248,242,.06) 20%,
      rgba(250,248,242,0) 48%,
      rgba(250,248,242,.10) 86%,
      rgba(250,248,242,.42) 100%),
    url("images/home-hero-bg.webp") var(--hero-bg-pos, right 38%) / cover no-repeat,
    #faf8f2;
}
.home-page .hero--home::after{ display:none; }
.home-page .hero--home h1{
  color:#171813;
  text-shadow:0 1px 0 rgba(255,255,255,.46);
}
.home-page .hero--home .lead{
  color:#4f463d;
  text-shadow:0 1px 0 rgba(255,255,255,.38);
}
.home-page .hero--home .fact{
  color:#5f594f;
  border-color:rgba(183,146,82,.22);
  background:rgba(255,255,255,.70);
  box-shadow:0 14px 38px rgba(38,34,24,.09);
}
.home-page .hero--home .fact b{ color:#1e1a16; }
.home-page .hero--home .fact__icon{ color:#9b6b19; }
.home-page .hero--home .btn--ghost{
  color:#1e1a16;
  background:rgba(255,255,255,.68);
  border-color:rgba(155,107,25,.32);
  backdrop-filter:blur(8px);
}
.home-page .hero--home .btn--ghost:hover{
  background:#fff;
  border-color:#a9680d;
}

@media (max-width:1024px){
  .home-page .hero--home{
    background:
      linear-gradient(90deg,
        rgba(250,248,242,.90) 0%,
        rgba(250,248,242,.68) 42%,
        rgba(250,248,242,.28) 68%,
        rgba(250,248,242,.06) 100%),
      linear-gradient(180deg, rgba(250,248,242,.28) 0%, rgba(250,248,242,.05) 48%, rgba(250,248,242,.45) 100%),
      url("images/home-hero-bg.webp") var(--home-hero-position) / cover no-repeat,
      #faf8f2;
  }
}

@media (max-width:760px){
  .home-page .hero--home{
    background:
      linear-gradient(90deg,
        rgba(250,248,242,.92) 0%,
        rgba(250,248,242,.74) 62%,
        rgba(250,248,242,.42) 100%),
      linear-gradient(180deg, rgba(250,248,242,.38) 0%, rgba(250,248,242,.10) 48%, rgba(250,248,242,.58) 100%),
      url("images/home-hero-bg.webp") var(--home-hero-position) / cover no-repeat,
      #faf8f2;
  }
}

.side-actions{
  position:fixed;
  z-index:80;
  right:16px;
  bottom:24px;
  width:176px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  padding-top:48px;
  border:1px solid rgba(74,61,40,.14);
  border-radius:14px;
  background:rgba(255,252,245,.88);
  box-shadow:0 18px 48px rgba(45,39,28,.16);
  backdrop-filter:blur(12px);
}
.side-actions.is-collapsed{ display:none; }
.side-actions-close{
  position:absolute;
  top:0;
  right:0;
  width:40px;
  height:40px;
  border:0;
  border-radius:10px;
  background:#a9680d;
  color:#fff;
  cursor:pointer;
}
.side-actions-close:hover{ background:#8d570b; }
.side-actions-close span{
  position:absolute;
  top:19px;
  left:12px;
  width:17px;
  height:1.5px;
  background:currentColor;
}
.side-actions-close span:first-child{ transform:rotate(45deg); }
.side-actions-close span:last-child{ transform:rotate(-45deg); }
.side-action{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:62px;
  padding:12px 13px;
  border:1px solid rgba(74,61,40,.16);
  border-radius:10px;
  background:#fffaf1;
  color:#1f211d;
  text-align:left;
  font:inherit;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(45,39,28,.08);
  transition:transform .2s ease, border-color .2s ease;
}
.side-action:hover{
  border-color:#a9680d;
  transform:translateX(-3px);
}
.side-action-accent{
  border-color:#a9680d;
  box-shadow:0 10px 24px rgba(169,104,13,.18);
}
.side-action svg{
  width:26px;
  height:26px;
  flex:0 0 26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.side-action strong{
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0;
  text-transform:uppercase;
}
.side-action-max{
  min-height:54px;
  border-color:#5d6dff;
  box-shadow:0 10px 24px rgba(93,109,255,.16);
}
.side-action-logo{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:8px;
}
.side-actions-open{
  position:fixed;
  z-index:80;
  right:0;
  bottom:24px;
  width:38px;
  min-height:112px;
  padding:12px 7px;
  border:0;
  border-radius:8px 0 0 8px;
  background:#a9680d;
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(38,34,24,.18);
}
.side-actions-open[hidden]{ display:none !important; }
.side-actions-open span{
  display:block;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.side-actions-open:focus-visible,
.side-actions-close:focus-visible,
.side-action:focus-visible{
  outline:3px solid #d0b171;
  outline-offset:3px;
}

@media (max-width:900px){
  .side-actions{
    top:auto;
    right:12px;
    bottom:12px;
    left:12px;
    width:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:8px 48px 8px 8px;
    border-radius:13px;
    transform:none;
    border:1px solid #d4cfc4;
    border-radius:12px;
    background:rgba(247,244,237,.96);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 35px rgba(31,33,29,.22);
  }
  .side-actions-close{
    top:6px;
    right:6px;
    width:36px;
    height:36px;
    border-radius:8px;
  }
  .side-actions-close span{ top:17px; left:9px; width:18px; }
  .side-action{
    min-height:56px;
    justify-content:center;
    padding:8px 12px;
    box-shadow:none;
  }
  .side-action:hover{ transform:none; }
  .side-actions-open{
    top:auto;
    right:12px;
    bottom:12px;
    width:auto;
    min-height:0;
    padding:12px 17px;
    border-radius:8px;
    transform:none;
  }
  .side-actions-open span{
    writing-mode:horizontal-tb;
    transform:none;
  }
}
@media (min-width:901px) and (max-width:1500px){
  .side-actions{
    right:8px;
    bottom:18px;
    left:auto;
    width:126px;
    display:flex;
    grid-template-columns:none;
    gap:7px;
    padding:36px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
  }
  .side-actions-close{
    top:0;
    right:0;
    width:34px;
    height:34px;
    border-radius:7px 7px 0 0;
  }
  .side-actions-close span{ top:16px; left:9px; width:16px; }
  .side-action{
    min-width:0;
    min-height:54px;
    gap:8px;
    padding:10px 9px;
    box-shadow:0 8px 20px rgba(45,39,28,.08);
  }
  .side-action:hover{ transform:translateX(-2px); }
  .side-action-accent{ box-shadow:0 8px 20px rgba(169,104,13,.16); }
  .side-action-max{ box-shadow:0 8px 20px rgba(93,109,255,.16); }
  .side-action svg{
    width:21px;
    height:21px;
    flex-basis:21px;
  }
  .side-action-logo{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
  .side-action strong{
    font-size:8px;
    letter-spacing:.055em;
  }
  .side-actions-open{
    right:0;
    bottom:18px;
    width:34px;
    min-height:104px;
    padding:11px 6px;
    border-radius:8px 0 0 8px;
  }
  .side-actions-open span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
  }
}
@media (max-width:560px){
  .side-actions{
    right:8px;
    bottom:8px;
    left:8px;
    gap:6px;
    padding:6px 40px 6px 6px;
    border-radius:11px;
  }
  .side-actions-close{
    top:4px;
    right:4px;
    width:32px;
    height:32px;
    border-radius:7px;
  }
  .side-actions-close span{ top:15px; left:8px; width:16px; }
  .side-action{
    flex-direction:column;
    gap:6px;
    min-height:49px;
    padding:7px 8px;
    border-radius:7px;
  }
  .side-action svg{
    width:20px;
    height:20px;
    flex-basis:20px;
  }
  .side-action-logo{
    width:21px;
    height:21px;
    flex-basis:21px;
    border-radius:6px;
  }
  .side-action strong{
    text-align:center;
    font-size:7px;
    letter-spacing:.045em;
    line-height:1.2;
  }
  .side-actions-open{
    right:8px;
    bottom:8px;
    width:52px;
    height:44px;
    padding:0;
    border-radius:9px;
  }
  .side-actions-open span{
    font-size:7px;
    letter-spacing:.05em;
    line-height:1;
  }
}

/* ============================================================
   Мобильная полировка и единые повторяющиеся блоки, 25.08.2026.
   Светлый контактный блок теперь можно ставить на любой странице
   классом .contact-section, не привязываясь к id главной.
   ============================================================ */

.contact-section{
  color:#171813;
}
.contact-section .section__head h2{ color:#171813; }
.contact-section .section__head .lead{ color:#57544d; }
.contact-section.section--tint{
  padding-top:clamp(42px, 4vw, 62px);
  background:
    linear-gradient(180deg, #f1eadf 0%, #ebe2d4 100%);
}
#otzyvy + .contact-section.section--tint{
  padding-top:clamp(42px, 4vw, 62px);
  background:
    linear-gradient(180deg, #f1eadf 0%, #ebe2d4 100%);
}
.contact-section::before{ display:none; }
.contact-section .contacts__row{ border-color:rgba(74,61,40,.12); }
.contact-section .contacts__map{
  border-color:rgba(74,61,40,.14);
  box-shadow:0 18px 54px rgba(45,39,28,.10);
}

/* Единый ритм нижних секций: отзывы, FAQ и контакты идут как один светлый блок,
   без жёстких полос и лишнего воздуха между соседними секциями. */
.section + .section::before{ display:none; }
.director-section{
  padding-top:clamp(72px, 6.8vw, 104px);
  padding-bottom:clamp(52px, 4.6vw, 72px);
}
#otzyvy.section--paper{
  padding-top:clamp(46px, 4.2vw, 66px);
  padding-bottom:clamp(44px, 4vw, 62px);
  background:linear-gradient(180deg, #f1eadf 0%, #eee7db 52%, #eee7db 100%);
}
#garantiya + #otzyvy.section--paper{
  padding-top:clamp(30px, 2.8vw, 42px);
}
#etapy:has(+ #otzyvy.section--paper){
  padding-bottom:clamp(34px, 3vw, 48px);
  background:linear-gradient(180deg, var(--canvas) 0%, #f4efe6 58%, #f1eadf 100%);
}
#etapy + #otzyvy.section--paper{
  margin-top:-1px;
  padding-top:clamp(32px, 3vw, 46px);
}
#garantiya.director-section:has(+ #otzyvy.section--paper){
  background:linear-gradient(180deg, var(--paper) 0%, #f4efe6 58%, #f1eadf 100%);
}
#otzyvy .section__head{
  margin-bottom:18px;
}
#otzyvy .revs__sum{
  margin-bottom:16px;
  padding:18px 22px;
}
#otzyvy .revs__tabs{
  margin-bottom:16px;
}
#otzyvy + .section--tint{
  padding-top:clamp(44px, 4vw, 62px);
  padding-bottom:clamp(44px, 4vw, 62px);
  background:linear-gradient(180deg, #eee7db 0%, #f1ece2 58%, #f2ede4 100%);
}
#otzyvy + .section--tint::before,
.contact-section::before{
  display:none;
}
#faq + .contact-section.section--tint,
#otzyvy + .contact-section.section--tint,
.contact-section.section--tint{
  padding-top:clamp(44px, 4vw, 62px);
  background:linear-gradient(180deg, #f2ede4 0%, #ece3d7 100%);
}
.quiz__q{
  font-size:clamp(32px, 2.2vw, 42px);
  line-height:1.14;
  margin-bottom:10px;
}
.quiz .opt__t{
  color:#f8f4eb;
  font-size:clamp(21px, 1.45vw, 27px);
  font-weight:900;
  line-height:1.08;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.quiz .opt__d{
  margin-top:6px;
  color:rgba(248,244,235,.76);
  font-size:15px;
  font-weight:500;
  line-height:1.35;
  text-shadow:0 1px 8px rgba(0,0,0,.24);
}
.quiz .opt__b{
  background:linear-gradient(180deg, rgba(20,17,14,.88), rgba(18,15,12,.98));
}
.quiz .opt--plain{
  background:rgba(18,15,12,.72);
}
.quiz .opt--plain .opt__b{
  background:transparent;
}
.quiz .opt--plain .opt__t,
.quiz .opt--plain .opt__d{
  color:#f8f4eb;
  font-weight:800;
}
.quiz .opt--plain .opt__d{
  color:rgba(248,244,235,.76);
  font-weight:500;
}

.shlifovka-poster-section{
  padding:76px 0 82px;
}
.shlifovka-poster{
  position:relative;
  min-height:620px;
  overflow:hidden;
  border-radius:30px;
  background:#eee7da;
  box-shadow:0 24px 90px rgba(45,39,28,.11);
}
.shlifovka-poster__image{
  position:absolute;
  inset:0 0 0 43%;
  background:url("images/cases-clean/krasnogorsk-fasad.jpg") center / cover no-repeat;
}
.shlifovka-poster__image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      #eee7da 0%,
      rgba(238,231,218,.98) 16%,
      rgba(238,231,218,.70) 36%,
      rgba(238,231,218,.16) 62%,
      rgba(238,231,218,0) 100%),
    linear-gradient(180deg,
      rgba(238,231,218,.08) 0%,
      rgba(238,231,218,0) 52%,
      rgba(238,231,218,.20) 100%);
}
.shlifovka-poster__copy{
  position:relative;
  z-index:2;
  width:min(760px, 62%);
  padding:76px 70px 58px;
}
.shlifovka-poster__label{
  display:block;
  margin-bottom:16px;
  color:#a17020;
  font-size:13px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.shlifovka-poster h2{
  max-width:720px;
  margin:0;
  color:#171813;
  font-size:58px;
  line-height:1.06;
  text-wrap:balance;
}
.shlifovka-poster p{
  max-width:650px;
  margin:26px 0 0;
  color:#5b534a;
  font-size:22px;
  line-height:1.48;
}
.shlifovka-poster__bottom{
  max-width:650px;
  margin-top:58px;
}
.shlifovka-poster__claim{
  color:#171813;
  font-size:34px;
  line-height:1.15;
  font-weight:800;
  text-wrap:balance;
}
.shlifovka-poster__claim span{
  color:#a17020;
}
.shlifovka-poster__proof{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(27,28,23,.20);
}
.shlifovka-poster__proof div{
  position:relative;
  min-width:0;
  padding-left:22px;
}
.shlifovka-poster__proof div::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b79252;
  box-shadow:0 0 0 7px rgba(183,146,82,.14);
}
.shlifovka-poster__proof span{
  display:block;
  margin-bottom:5px;
  color:#8b7552;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.shlifovka-poster__proof b{
  display:block;
  color:#2b251e;
  font-size:18px;
  line-height:1.35;
}
.shlifovka-poster__tag{
  position:absolute;
  z-index:3;
  right:58px;
  bottom:48px;
  max-width:310px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(45,39,28,.12);
  color:#40382f;
  font-size:16px;
  line-height:1.45;
}
.shlifovka-poster__tag b{
  display:block;
  margin-bottom:5px;
  color:#171813;
  font-size:20px;
}

.service-poster-section{
  padding:76px 0 82px;
}
.service-poster{
  position:relative;
  min-height:590px;
  overflow:hidden;
  border-radius:30px;
  background:#eee7da;
  box-shadow:0 24px 90px rgba(45,39,28,.11);
}
.service-poster__image{
  position:absolute;
  inset:0;
  background:var(--poster-bg, url("images/cases-clean/krasnogorsk-fasad.jpg")) center / cover no-repeat;
}
.service-poster__image::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      #eee7da 0%,
      rgba(238,231,218,.98) 18%,
      rgba(238,231,218,.78) 43%,
      rgba(238,231,218,.18) 67%,
      rgba(238,231,218,0) 100%),
    linear-gradient(180deg,
      rgba(238,231,218,.08) 0%,
      rgba(238,231,218,0) 52%,
      rgba(238,231,218,.20) 100%);
}
.service-poster__copy{
  position:relative;
  z-index:2;
  width:min(760px, 62%);
  padding:72px 70px 56px;
}
.service-poster__label{
  display:block;
  margin-bottom:16px;
  color:#a17020;
  font-size:13px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.service-poster h2{
  max-width:720px;
  margin:0;
  color:#171813;
  font-size:clamp(44px, 4vw, 58px);
  line-height:1.06;
  text-wrap:balance;
}
.service-poster p{
  max-width:650px;
  margin:24px 0 0;
  color:#5b534a;
  font-size:21px;
  line-height:1.48;
}
.service-poster__bottom{
  max-width:650px;
  margin-top:48px;
}
.service-poster__claim{
  color:#171813;
  font-size:32px;
  line-height:1.15;
  font-weight:800;
  text-wrap:balance;
}
.service-poster__claim span{
  color:#a17020;
}
.service-poster__proof{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(27,28,23,.20);
}
.service-poster__proof div{
  position:relative;
  min-width:0;
  padding-left:22px;
}
.service-poster__proof div::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b79252;
  box-shadow:0 0 0 7px rgba(183,146,82,.14);
}
.service-poster__proof span{
  display:block;
  margin-bottom:5px;
  color:#8b7552;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-poster__proof b{
  display:block;
  color:#2b251e;
  font-size:17px;
  line-height:1.35;
}
.service-poster__tag{
  position:absolute;
  z-index:3;
  right:58px;
  bottom:48px;
  max-width:310px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:20px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(45,39,28,.12);
  color:#40382f;
  font-size:16px;
  line-height:1.45;
}
.service-poster__tag b{
  display:block;
  margin-bottom:5px;
  color:#171813;
  font-size:20px;
}

@media (max-width:760px){
  body{ padding-bottom:72px; }
  .wrap{ padding-inline:24px; }
  .section{ padding:42px 0; }
  .section__head{ margin-bottom:22px; }
  .section__head h2{ font-size:clamp(25px, 8vw, 31px); line-height:1.12; }
  .section__head .lead{ font-size:16px; line-height:1.48; margin-top:10px; }

  .quiz__q{ font-size:23px; }
  .quiz__hint{ font-size:14px; line-height:1.5; }
  .opt__tick{
    background:rgba(18,15,12,.68);
    border-color:rgba(239,193,105,.72);
  }

  .director-section{ padding:56px 0; }
  .director-photo-frame{ height:300px; }
  .director-content{ padding:28px 22px 26px; }
  .director-content .section-kicker{ margin-bottom:13px; font-size:11px; }
  .director-content h2{
    font-size:clamp(30px, 8.3vw, 34px);
    line-height:1.05;
    margin-bottom:16px;
  }
  .director-lead{
    margin-bottom:20px;
    font-size:14.5px;
    line-height:1.55;
  }
  .director-facts article{
    grid-template-columns:26px 1fr;
    gap:10px;
    padding:12px 0;
  }
  .director-facts h3{ font-size:14px; }
  .director-facts p{ font-size:13.5px; line-height:1.43; }
  .director-sign{ margin-top:18px; font-size:13.5px; }

  #keysy .section__head .lead{
    max-width:34ch;
  }
  .cases__cta{
    padding:20px;
    border-radius:18px;
  }
  .cases__cta-t{ font-size:22px; line-height:1.16; }
  .cases__cta-d{ font-size:16px; line-height:1.46; }

  .crew__item,
  .wood-card,
  .wood-note{ min-height:0; }
  .wood-card{ padding:20px; }
  .wood-card--photo{ min-height:300px; }
  .wood-card h3,
  .wood-note h3{ font-size:20px; line-height:1.18; }

  .shlifovka-poster-section{ padding:44px 0; }
  .shlifovka-poster{
    min-height:0;
    border-radius:22px;
  }
  .shlifovka-poster__image{
    position:relative;
    inset:auto;
    display:block;
    min-height:260px;
    background-position:center 54%;
  }
  .shlifovka-poster__image::before{
    background:linear-gradient(180deg, rgba(238,231,218,0) 0%, rgba(238,231,218,.12) 44%, #eee7da 100%);
  }
  .shlifovka-poster__copy{
    width:100%;
    padding:24px 22px 26px;
  }
  .shlifovka-poster__label{
    margin-bottom:12px;
    font-size:11px;
  }
  .shlifovka-poster h2{
    font-size:clamp(30px, 9vw, 38px);
    line-height:1.05;
  }
  .shlifovka-poster p{
    margin-top:16px;
    font-size:15.5px;
    line-height:1.5;
  }
  .shlifovka-poster__bottom{
    margin-top:26px;
  }
  .shlifovka-poster__claim{
    font-size:24px;
    line-height:1.14;
  }
  .shlifovka-poster__proof{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:18px;
    padding-top:18px;
  }
  .shlifovka-poster__proof b{
    font-size:15.5px;
    line-height:1.35;
  }
  .shlifovka-poster__tag{
    position:relative;
    right:auto;
    bottom:auto;
    max-width:none;
    margin:0 22px 24px;
    padding:16px 18px;
    border-radius:16px;
    font-size:14.5px;
  }
  .service-poster-section{ padding:44px 0; }
  .service-poster{
    min-height:0;
    border-radius:22px;
  }
  .service-poster__image{
    position:relative;
    inset:auto;
    display:block;
    min-height:190px;
    background-position:center 54%;
  }
  .service-poster__image::before{
    background:linear-gradient(180deg, rgba(238,231,218,0) 0%, rgba(238,231,218,.12) 44%, #eee7da 100%);
  }
  .service-poster__copy{
    width:100%;
    padding:19px 22px 22px;
  }
  .service-poster__label{
    margin-bottom:9px;
    font-size:11px;
  }
  .service-poster h2{
    font-size:clamp(27px, 8.1vw, 32px);
    line-height:1.05;
  }
  .service-poster p{
    margin-top:13px;
    font-size:14.8px;
    line-height:1.45;
  }
  .service-poster__bottom{
    margin-top:20px;
  }
  .service-poster__claim{
    font-size:20.5px;
    line-height:1.14;
  }
  .service-poster__proof{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:15px;
    padding-top:15px;
  }
  .service-poster__proof b{
    font-size:14.4px;
    line-height:1.35;
  }
  .service-poster__tag{
    position:relative;
    right:auto;
    bottom:auto;
    max-width:none;
    margin:0 22px 22px;
    padding:14px 16px;
    border-radius:16px;
    font-size:14px;
  }
  .service-poster__tag b{ font-size:17px; }

  #otzyvy + .section--tint .faq summary,
  .faq summary{
    font-size:17px;
    line-height:1.32;
  }
  #otzyvy + .section--tint .faq p,
  .faq p{
    font-size:15px;
    line-height:1.55;
  }
  .rev__ph img,
  .rev__ph--1 img{ height:76px; }
  .contact-section .contacts__map,
  .contact-section .contacts__map iframe{
    min-height:270px;
  }
}

/* Сметный блок на страницах услуг: светлая читаемая версия вместо серой плашки */
.calc-note,
.section--paper .calc-note{
  background:linear-gradient(180deg, #fffdf8 0%, #f6f0e6 100%);
  border-color:rgba(74, 61, 40, .14);
  color:#171813;
  box-shadow:0 18px 54px rgba(45, 39, 28, .08);
}
.calc-note::before,
.section--paper .calc-note::before{
  background:radial-gradient(circle, rgba(183, 146, 82, .14) 0%, rgba(183, 146, 82, .05) 48%, transparent 72%);
}
.calc-note h3,
.calc-note__t b,
.section--paper .calc-note h3,
.section--paper .calc-note b{
  color:#171813;
}
.calc-note__t,
.section--paper .calc-note .calc-note__t{
  color:#4f463d;
}
.calc-note__foot,
.section--paper .calc-note__foot{
  color:#5f594f;
  border-top-color:rgba(74, 61, 40, .14);
}
.calc-note__n,
.section--paper .calc-note__n{
  color:#9b6b19;
  border-color:rgba(155, 107, 25, .32);
  background:rgba(183, 146, 82, .09);
}
.calc-note__ic,
.section--paper .calc-note__ic{
  color:#9b6b19;
  border-color:rgba(155, 107, 25, .28);
  background:#f7f1e6;
}

@media (max-width:430px){
  .wrap{ padding-inline:24px; }
  .director-photo-frame{ height:286px; }
  .director-content h2{ font-size:30px; }
  .director-lead{ font-size:14px; }
  .wood-card--photo{ min-height:280px; }
}

/* Финальные переопределения держим в конце файла: эти блоки должны быть
   компактнее исходных журнальных макетов на всех страницах услуг. */
@media (min-width:761px){
  .shlifovka-poster-section,
  .service-poster-section{ padding-block:64px; }
  .shlifovka-poster,
  .service-poster{ min-height:590px; border-radius:22px; }
  .shlifovka-poster__copy,
  .service-poster__copy{ padding:48px 50px 42px; }
  .shlifovka-poster h2,
  .service-poster h2{ font-size:clamp(40px, 3.45vw, 50px); }
  .shlifovka-poster p,
  .service-poster p{ margin-top:18px; font-size:18px; line-height:1.44; }
  .shlifovka-poster__bottom,
  .service-poster__bottom{ margin-top:30px; }
  .shlifovka-poster__claim,
  .service-poster__claim{ font-size:26px; }
  .shlifovka-poster__proof,
  .service-poster__proof{ margin-top:20px; padding-top:18px; }
}

/* Главная: поздние общие правила не должны перебивать утверждённый тёмный блок этапов. */
.home-page #etapy.section--paper,
.home-page #etapy.section--paper:has(+ #otzyvy.section--paper){
  background:#292a24;
  color:#f4f0e7;
}
.home-page #etapy.section--paper h2,
.home-page #etapy.section--paper h3,
.home-page #etapy.section--paper b,
.home-page #etapy.section--paper .step5__t{ color:#f4f0e7; }
.home-page #etapy.section--paper .lead,
.home-page #etapy.section--paper .step5__d{ color:rgba(255,255,255,.72); }
.home-page #etapy.section--paper .step5__ic{
  color:#d0b171;
  background:#32332c;
  border-color:rgba(255,255,255,.16);
}
.home-page #etapy.section--paper .steps5 .step5:not(:last-child)::after{
  background:repeating-linear-gradient(90deg, rgba(198,166,98,.8) 0 7px, transparent 7px 15px);
}

/* Компактный сервисный квиз, 27.08.2026.
   На страницах услуг #kvyz — карточка, а не секция как на главной,
   поэтому старое правило #kvyz{padding:56px 0} добавляло внутрь 112px. */
.section#ceny{
  padding-block:clamp(44px, 4vw, 58px);
}
.section#ceny > .wrap > .section__head{
  max-width:1100px;
  margin:0 auto 20px;
}
.section#ceny > .wrap > .section__head .lead{
  margin-top:10px;
}
.section#ceny > .wrap > .quiz#kvyz{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0;
}
.section#ceny .quiz__body{
  padding:24px 26px 26px;
}
.section#ceny .quiz__q{
  margin-bottom:7px;
  font-size:clamp(27px, 1.8vw, 34px);
  line-height:1.15;
}
.section#ceny .quiz__hint{
  margin-bottom:12px;
}
.section#ceny .opts{
  gap:12px;
  margin-bottom:14px;
}
.section#ceny .quiz__nav{
  padding-top:14px;
}
.section#ceny .quiz__nav [data-next]{
  margin-left:auto;
}

@media (min-width:761px){
  .section#ceny .opts--2 .opt--plain{
    grid-column:auto;
    min-height:70px;
    padding:12px 50px 12px 15px;
  }
  .section#ceny .opts--2 .opt--plain .opt__b{
    justify-content:center;
  }
  .section#ceny .opts--2 .opt--plain .opt__tick{
    top:50%;
    right:14px;
    width:28px;
    height:28px;
    transform:translateY(-50%);
  }
  .section#ceny .quiz .opt__t{
    font-size:clamp(18px, 1.25vw, 22px);
    line-height:1.12;
  }
  .section#ceny .quiz .opt__d{
    margin-top:4px;
    font-size:14px;
    line-height:1.3;
  }
}

@media (max-width:760px){
  .section#ceny{
    padding-block:36px;
  }
  .section#ceny > .wrap > .section__head{
    margin-bottom:16px;
  }
  .section#ceny .quiz__nav [data-next]{
    width:100%;
    margin-left:0;
  }
  .section#ceny .quiz__q{
    font-size:23px;
  }
  .section#ceny .quiz .opt__t{
    font-size:17px;
  }
  .section#ceny .quiz .opt__d{
    font-size:13px;
  }
}

/* Контакты и компактный подвал: без белого inset-блика,
   с оптически центрированным телефоном и читаемой подписью юрлица. */
.contact-section .contacts__row{
  align-items:center;
  border-bottom-color:rgba(74,61,40,.15);
  box-shadow:none;
}
.contact-section .contacts__row:first-child{
  padding-top:12px;
}
.contact-section .contacts__row:first-child > div{
  padding-top:5px;
}
.contact-section .contacts__phone{
  line-height:1.15;
}
.footer--compact{
  border-top-color:rgba(183,146,82,.18);
  box-shadow:none;
}
.footer--compact .footer__brandline{
  color:#f8f4eb;
}
.footer--compact .footer__brandline span{
  color:rgba(248,244,235,.86);
}
.footer--compact .footer__legal{
  color:rgba(248,244,235,.66);
}
.footer--compact .footer__legal a{
  color:rgba(248,244,235,.76);
}
.footer--compact .footer__legal a:hover{
  color:#fff;
}