/* Vконтейнере Бани — вариант 2, светлый. По просьбе Алёны: «как severno.pro — легко, дорого, читаемо».
   Белый фон, тонкий Montserrat, графит, квадратные углы, много воздуха; акцент — тёплый серый, как кнопки (Алексей, 22.09). */

:root {
  --fon: #FFFFFF;
  --fon-2: #F7F3EE;      /* тёплая подложка карточек */
  --fon-3: #F4F4F2;      /* поля формы, серые блоки */
  --seryy: #4A4A4A;      /* бывшая серая лента — с 21.09 ленты цвета акцента (просьба Алёны) */
  --temn: #1F1F1F;       /* подвал, чёрные кнопки */
  --t: #232323;
  --t2: #5F5F5F;
  --t3: #8C8C8C;
  --linia: #E6E2DC;
  --linia-2: #CFC9C0;
  --akcent: #77716B;     /* ленты, метки, выбор — тот же тёплый серый, что кнопки (Алексей, 22.09: «все акценты серыми»; был липовый #A55E26) */
  --akcent-2: #5E5954;
  --knopka: #77716B;     /* кнопки — тёплый серый «тауп» (Алёна и Алексей, 21.09 ночь: оранжевый в кнопках — на серый) */
  --knopka-2: #5E5954;   /* кнопка под курсором */
  --akcent-fon: #EEEBE7;
  --zoloto: #B8B2AB;     /* ссылки в подвале — светлый тёплый серый (на тёмном фоне серый кнопок не читается) */
  --shirina: 1216px;
  --pole: clamp(16px, 4vw, 40px);
  --razdel: clamp(72px, 9vw, 128px);
  --shrift: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --shapka: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--shapka) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fon);
  color: var(--t);
  font-family: var(--shrift);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ikonki { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ik { width: 20px; height: 20px; flex: none; }

.shirma { width: 100%; max-width: calc(var(--shirina) + 2 * var(--pole)); margin: 0 auto; padding: 0 var(--pole); }

/* ---------- кнопки: прямоугольные, как у severno ---------- */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  background: var(--temn); color: #fff; border: 1px solid var(--temn); border-radius: 0;
  font-family: var(--shrift); font-size: 15px; font-weight: 500; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.knopka:hover { background: #000; border-color: #000; }
.knopka:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.knopka-kontur { background: transparent; color: var(--t); border-color: var(--t); }
.knopka-kontur:hover { background: var(--knopka); color: #fff; border-color: var(--knopka); }
.knopka-svet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.knopka-svet:hover { background: #fff; color: var(--t); border-color: #fff; }
.knopka-akcent { background: var(--knopka); border-color: var(--knopka); color: #fff; }
.knopka-akcent:hover { background: var(--knopka-2); border-color: var(--knopka-2); }
.knopka-s { min-height: 44px; padding: 0 22px; font-size: 14px; }
.knopka-shir { width: 100%; }
.knopka:disabled { opacity: .55; cursor: default; }

/* ---------- заголовки разделов ---------- */
.razdel { padding: var(--razdel) 0; }
.razdel-shapka { max-width: 820px; margin-bottom: clamp(36px, 5vw, 56px); }
.metka {
  font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 18px;
}
.razdel-zag { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.01em; }
.razdel-lead { margin-top: 20px; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--t2); font-weight: 400; }
.podzag { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: clamp(56px, 7vw, 88px) 0 28px; }
/* заголовок и подзаголовок раздела один раз выезжают справа налево, когда до них долистали (Алёна, 21.09 23:17).
   .poyav ставит app.js только тем, что ниже первого экрана, .vidno — когда показались; «меньше движения» — без выезда */
.poyav { opacity: 0; transform: translate3d(44px, 0, 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, .8, .24, 1); }
.poyav.vidno { opacity: 1; transform: none; }
.razdel-zag.poyav { transition-delay: .07s; }
.razdel-lead.poyav, .podzag-lead.poyav { transition-delay: .2s; }
.s-vyezdom .razdel { overflow-x: clip; }   /* пока заголовок сдвинут вправо, страница не становится шире экрана */
@media (max-width: 640px) { .poyav { transform: translate3d(28px, 0, 0); } }

/* квадратные маркеры, как в карточках вакансий severno */
.spisok-kv li { position: relative; padding-left: 20px; margin: 0 0 10px; color: var(--t2); line-height: 1.55; }
.spisok-kv li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--akcent); }

/* ---------- плашка демо ---------- */
.demo {
  position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 52px 10px 20px; background: var(--fon-2); color: var(--t2); font-size: 13.5px; line-height: 1.45;
  border-bottom: 1px solid var(--linia); text-align: center;
}
.demo-znak {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akcent); border: 1px solid var(--akcent); padding: 3px 8px;
}
.demo-x {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--t3); cursor: pointer;
}

/* ---------- шапка: белая, как у severno ---------- */
.shapka {
  position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 1px solid transparent; transition: background-color .3s, border-color .25s, box-shadow .25s;
}
.shapka.skroll { border-bottom-color: var(--linia); box-shadow: 0 6px 24px rgba(0, 0, 0, .04); }
.shapka-in {
  max-width: calc(var(--shirina) + 2 * var(--pole)); margin: 0 auto; padding: 0 var(--pole);
  height: var(--shapka); display: flex; align-items: center; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo-znak { width: 40px; height: auto; }
.logo-slova { display: flex; flex-direction: column; gap: 5px; }
.logo-slovo { width: 140px; height: auto; }
.logo-bani { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); white-space: nowrap; }
.menu { display: flex; gap: clamp(14px, 1.5vw, 24px); margin-left: auto; }
.menu a { font-size: 14.5px; text-decoration: none; color: var(--t); white-space: nowrap; position: relative; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--t); transition: right .25s; }
.menu a:hover::after { right: 0; }
.shapka-soc { display: flex; gap: 10px; }
.shapka-soc a {
  width: 36px; height: 36px; border: 1px solid var(--t); border-radius: 50%;
  display: grid; place-items: center; color: var(--t); transition: background .2s, color .2s;
}
.shapka-soc a:hover { background: var(--knopka); border-color: var(--knopka); color: #fff; }
.shapka-soc svg { width: 17px; height: 17px; }
.shapka-tel { display: flex; flex-direction: column; text-decoration: none; font-size: 17px; line-height: 1.2; white-space: nowrap; }
.shapka-tel small { font-size: 11px; color: var(--t3); letter-spacing: .06em; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--t); background: none; cursor: pointer; position: relative; flex: none; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--t); transition: transform .25s, top .25s; }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 20.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 20.5px; transform: rotate(-45deg); }

/* шапка белая сразу, с логотипом — и над обложкой тоже (Алексей, 21.09 ночь: «верх сразу белый, а не прозрачный») */
.burger span { transition: transform .25s, top .25s, background-color .3s; }

/* overscroll-behavior: докрутили меню до конца — дальше не тянем страницу под ним (22.09, её «попадаешь в конец сайта») */
.mob-menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; background: #fff; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px var(--pole) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linia);
}
.mob-menu nav a {
  display: block; padding: 15px 0; font-size: 20px; text-decoration: none; border-bottom: 1px solid var(--linia);
}
.mob-menu-niz { display: grid; gap: 12px; margin-top: 28px; }
.mob-menu-niz a { text-decoration: none; color: var(--t2); font-size: 16px; }
.mob-menu-niz b { color: var(--t); font-weight: 500; }

/* ---------- обложка: её кадр без надписи и логотип ВНИЗУ, на тёмном полу у полка (Алёна, 21.09 ночь) ----------
   Кадр вертикальный 3 : 4 — показываем целиком по высоте под белой шапкой: на телефоне стоя он во весь экран
   (срезаются только бока), шире 3 : 4 — по центру, а по бокам тот же кадр размытым фоном.
   Без aspect-ratio: ширина считается от высоты (урок Safari).
   Вариант «с надписью» (?oblozhka=2): логотип сверху, внизу «Бани нового уровня» шрифтом их логотипа. */
.oblozhka {
  --oh: clamp(520px, calc(100vh - var(--shapka)), 1120px);
  --kw: min(100vw, calc(var(--oh) * .75));   /* ширина кадра — от неё размер логотипа и надписи */
  position: relative; height: var(--oh);
  display: flex; justify-content: center; overflow: hidden; background: #2B211A;
}
@supports (height: 100svh) { .oblozhka { --oh: clamp(520px, calc(100svh - var(--shapka)), 1120px); } }
.oblozhka-fon { position: absolute; inset: 0; overflow: hidden; }
.oblozhka-fon img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); filter: blur(26px) brightness(.58) saturate(1.05); }
.oblozhka-kadr { position: relative; flex: none; height: 100%; width: min(100%, calc(var(--oh) * .75)); box-shadow: 0 0 80px rgba(0, 0, 0, .35); }
.oblozhka-foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* кадр «оживает», как видео: медленный наезд камеры к окну — её идея 21.09, 23:40 («первую фотографию с лёгким зумом
   приближения»; Алексей: «как анимацию, как будто видео»). Один долгий проход, без рывков; «меньше движения» — без наезда */
.oblozhka-kadr { overflow: hidden; }
@keyframes naezd { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(0, -1.2%, 0); } }
.oblozhka-foto { transform-origin: 50% 58%; will-change: transform; backface-visibility: hidden; animation: naezd 22s cubic-bezier(.25, .46, .45, .94) .1s both; }
@media (prefers-reduced-motion: reduce) { .oblozhka-foto { animation: none; will-change: auto; } }
/* её вид 22.09: логотип в верхней трети, внизу «Бани нового уровня» и подзаголовок.
   Буквы — тонкий Montserrat 200 заглавными: «Бани» крупно, «нового уровня» строкой ниже — как на её макете 21.09 (msg-63617).
   Сверху и снизу — мягкое затемнение, чтобы светлый логотип и текст читались на дереве и полу */
.oblozhka-kadr::before, .oblozhka-kadr::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
}
.oblozhka-kadr::before {
  top: 0; height: 40%;
  background: linear-gradient(180deg, rgba(16, 11, 7, .55) 0%, rgba(16, 11, 7, .24) 55%, rgba(16, 11, 7, 0) 100%);
}
.oblozhka-kadr::after {
  bottom: 0; height: 50%;
  background: linear-gradient(0deg, rgba(14, 10, 7, .8) 0%, rgba(14, 10, 7, .52) 42%, rgba(14, 10, 7, 0) 100%);
}
.oblozhka-logo {
  position: absolute; z-index: 2; left: 50%; top: 9%; transform: translateX(-50%);
  width: clamp(150px, calc(var(--kw) * .36), 250px); height: auto; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .5));
}
.oblozhka-tekst {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 6.5%;
  padding: 0 clamp(20px, calc(var(--kw) * .07), 48px); text-align: center; color: #F2EDE6;
}
.oblozhka-zag { margin: 0; font-weight: 200; text-transform: uppercase; line-height: .96; text-shadow: 0 2px 22px rgba(0, 0, 0, .42); }
.oz-1 { display: block; font-size: calc(var(--kw) * .148); font-weight: 200; letter-spacing: .045em; }
/* вторая строка мельче — на 200 она истончилась бы до волоска, поэтому 300 */
.oz-2 { display: block; margin-top: .34em; font-size: calc(var(--kw) * .064); font-weight: 300; letter-spacing: .085em; }
.oblozhka-podzag {
  margin: clamp(14px, calc(var(--kw) * .034), 26px) auto 0; max-width: 29em;
  font-size: clamp(14.5px, calc(var(--kw) * .029), 19px); line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5); text-wrap: balance;
}
/* «Бани», следом «нового уровня» и подзаголовок мягко выезжают справа налево (её просьба 21.09, 23:17) */
@keyframes vyezd-sprava { from { opacity: 0; transform: translate3d(56px, 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .oblozhka.s-nadpisyu .oz-1 { animation: vyezd-sprava 1.2s cubic-bezier(.16, .8, .24, 1) .25s both; }
  .oblozhka.s-nadpisyu .oz-2 { animation: vyezd-sprava 1.2s cubic-bezier(.16, .8, .24, 1) .45s both; }
  .oblozhka.s-nadpisyu .oblozhka-podzag { animation: vyezd-sprava 1.2s cubic-bezier(.16, .8, .24, 1) .65s both; }
}

/* прежний вид (панель «без надписи»): только логотип внизу, у полка; заголовок остаётся для поисковиков, но не виден */
.oblozhka.bez-nadpisi .oblozhka-kadr::before { display: none; }
.oblozhka.bez-nadpisi .oblozhka-kadr::after {
  height: 34%; background: linear-gradient(0deg, rgba(16, 11, 7, .5) 0%, rgba(16, 11, 7, .2) 55%, rgba(16, 11, 7, 0) 100%);
}
.oblozhka.bez-nadpisi .oblozhka-logo { top: auto; bottom: 7.5%; width: clamp(150px, calc(var(--kw) * .38), 260px); }
.oblozhka.bez-nadpisi .oblozhka-tekst {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- акция ---------- */
.akciya { background: var(--fon-2); border-bottom: 1px solid var(--linia); }
.akciya .shirma { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding-top: 18px; padding-bottom: 18px; text-align: center; }
.akciya-metka { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--akcent); padding: 5px 10px; }
.akciya-tekst { font-size: 15px; color: var(--t); max-width: 720px; }
.akciya a { font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--akcent); text-decoration: none; text-wrap: balance; }
.akciya a .celoe { white-space: nowrap; }
.akciya a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.akciya a svg { display: inline-block; width: 19px; height: 19px; margin-right: 7px; vertical-align: -4px; }
.akciya a:hover { color: var(--akcent-2); }

/* ---------- три кнопки под обложкой: «Работа цеха», «Уже построили», «Конструктор бани» ---------- */
.tri { padding: clamp(26px, 3.4vw, 40px) 0; }
.tri-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tri .knopka { min-width: 232px; }

/* ---------- лента цвета акцента: размеры и цена (цифры 30 / 1 / 14 / 2 152 она сняла 21.09) ---------- */
.lenta { background: var(--akcent); color: #fff; padding: clamp(30px, 3.6vw, 46px) 0; }
.cifry { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; text-align: center; padding-top: clamp(20px, 3vw, 40px); }
.cifra b { display: block; font-size: clamp(38px, 4.6vw, 60px); font-weight: 300; line-height: 1; letter-spacing: -.01em; }
.cifra b small { font-size: .42em; font-weight: 400; margin-left: .3em; letter-spacing: 0; }
.cifra p { margin-top: 14px; font-size: 15px; line-height: 1.45; color: #fff; max-width: 220px; margin-left: auto; margin-right: auto; }
.cifry:not([hidden]) + .harakteristiki { margin-top: clamp(36px, 4.4vw, 56px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .35); }
.harakteristiki { display: flex; }
.harakteristiki div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; text-align: center; }
/* цене — место шире: «от 1 600 000 ₽» самая длинная строка */
.harakteristiki div:last-child { flex-grow: 1.4; }
.harakteristiki div + div { border-left: 1px solid rgba(255, 255, 255, .38); }
.harakteristiki span { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.harakteristiki b { font-size: clamp(19px, 1.9vw, 26px); font-weight: 400; line-height: 1.2; white-space: nowrap; letter-spacing: -.005em; font-variant-numeric: lining-nums; }

/* ---------- уже построили: крупные карточки одной лентой ----------
   Листаешь вправо; средняя встаёт по центру, соседи выглядывают по краям; углы скруглены — видно, что лента листается. */
.proekty-shapka, .lenta-shapka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; margin-bottom: clamp(28px, 3.6vw, 44px); }
.proekty-shapka-t, .lenta-shapka-t { max-width: 760px; }
.lenta-nav { display: flex; align-items: center; gap: 10px; }
.lenta-schet { margin-right: 12px; font-size: 14px; letter-spacing: .1em; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lenta-str {
  width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid var(--t); background: #fff;
  color: var(--t); cursor: pointer; transition: background .2s, color .2s, opacity .2s, border-color .2s;
}
.lenta-str svg { width: 22px; height: 22px; }
@media (hover: hover) { .lenta-str:hover:not(:disabled) { background: var(--t); color: #fff; } }
.lenta-str:disabled { opacity: .28; cursor: default; }
.lenta-str:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.karusel {
  --kw: min(66vw, 800px); --kg: clamp(12px, 1.6vw, 24px);
  position: relative; display: flex; gap: var(--kg); padding: 6px 0 12px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none;
}
.karusel::-webkit-scrollbar { display: none; }
/* распорки: первая и последняя карточки тоже встают по центру */
.karusel::before, .karusel::after { content: ""; flex: 0 0 calc((100% - var(--kw)) / 2 - var(--kg)); }
.proekt {
  flex: 0 0 var(--kw); scroll-snap-align: center; display: flex; flex-direction: column;
  padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.proekt-foto {
  position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--fon-2);
  transform: translateZ(0); transition: opacity .4s ease;
}
.proekt-foto::before { content: ""; display: block; padding-top: 75%; }
.proekt-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proekt-foto em {
  position: absolute; right: 14px; bottom: 14px; font-style: normal; font-size: 12.5px; font-weight: 500;
  background: rgba(255, 255, 255, .92); color: var(--t); padding: 5px 11px; border-radius: 999px;
}
.proekt-metka {
  position: absolute; left: 14px; top: 14px; font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; background: var(--akcent); color: #fff; padding: 6px 11px; border-radius: 999px;
}
.proekt-t { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: 18px; padding: 0 4px; transition: opacity .4s ease; }
.proekt-tl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.proekt-h { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; color: var(--t); font-weight: 400; }
.proekt-n { font-size: 14px; color: var(--t3); line-height: 1.4; }
/* цена готовой бани — её цифры 22.09; справа от названия, одной строкой */
.proekt-cena { flex: none; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; font-weight: 500; color: var(--t); white-space: nowrap; font-variant-numeric: lining-nums; }
.proekt:not(.tsentr) .proekt-foto { opacity: .5; }
.proekt:not(.tsentr) .proekt-t { opacity: .35; }
.proekt:not(.tsentr):hover .proekt-foto { opacity: .72; }
.proekt.tsentr .proekt-foto::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.proekt.tsentr:hover .proekt-h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.proekt:focus-visible { outline: none; }
.proekt:focus-visible .proekt-foto { outline: 2px solid var(--akcent); outline-offset: 3px; }
.karusel-polosa { position: relative; height: 2px; margin-top: clamp(20px, 2.6vw, 32px); background: var(--linia); overflow: hidden; }
.karusel-polosa i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--akcent); transition: width .35s ease; }

/* ---------- знакомство с Артёмом ---------- */
.artem { padding-top: 0; }
.artem-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.artem-foto { position: sticky; top: calc(var(--shapka) + 24px); }
.artem-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 40%; background: var(--fon-2); }
.artem-foto figcaption { margin-top: 14px; font-size: 14px; color: var(--t2); letter-spacing: .02em; }
.artem-t { padding-top: clamp(0px, 3vw, 40px); }
.artem-tekst { margin-top: 24px; display: grid; gap: 14px; font-size: 17px; line-height: 1.7; color: var(--t2); }
.artem-citata { margin: 34px 0 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--akcent); }
.artem-citata p { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; color: var(--t); font-weight: 300; }
.artem-citata footer { margin-top: 14px; font-size: 14px; color: var(--t2); }
.artem-citata footer b { font-weight: 500; color: var(--t); }
.artem-citata small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--t3); }
.artem .spisok-kv { margin-top: 30px; }
.artem-podzag { margin: 40px 0 18px; font-size: 22px; }
.soc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.soc-knopka {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px;
  border: 1px solid var(--t); text-decoration: none; color: var(--t); font-size: 15px; transition: background .2s, color .2s;
}
.soc-knopka b { font-weight: 500; }
.soc-knopka small { margin-left: auto; font-size: 18px; transition: transform .2s; }
.soc-knopka:hover { background: var(--knopka); border-color: var(--knopka); color: #fff; }
.soc-knopka:hover small { transform: translateX(3px); }
.soc-knopka svg { width: 22px; height: 22px; }
.soc-tg svg { color: #2AA0DA; }
.soc-knopka:hover svg { color: inherit; }
.kontakty { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--linia); }
.kontakt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--linia); }
.kontakt > span { font-size: 13px; color: var(--t3); letter-spacing: .02em; }
.kontakt a, .kontakt div { font-size: 17px; text-decoration: none; color: var(--t); }
.kontakt div { max-width: 360px; text-align: right; font-size: 15px; line-height: 1.5; }
.kontakt-marshrut { display: inline-block; color: var(--akcent) !important; font-size: 14px !important; margin-left: 6px; }

/* ---------- цех онлайн: телефон с лентой канала ---------- */
.ceh-blok {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px);
  align-items: center; background: #ECEBE7; padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 72px);
  margin-top: 40px;
}
.telefon {
  justify-self: center; width: 300px; max-width: 100%; height: 600px; margin-top: calc(-1 * clamp(76px, 9vw, 110px));
  background: #121212; border-radius: 46px; padding: 11px; box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .35), 0 0 0 1px #2c2c2c inset;
  position: relative;
}
.telefon::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 24px; background: #121212; border-radius: 14px; z-index: 2;
}
.telefon-ekran { height: 100%; border-radius: 36px; overflow: hidden; background: #D9E3CF; display: flex; flex-direction: column; }
.tg-shapka {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 52px 14px 12px; background: #fff;
  border-bottom: 1px solid #E5E5E5; text-align: left;
}
.tg-shapka img { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: #F2F2F2; padding: 5px; }
.tg-shapka span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tg-shapka b { font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-shapka small { font-size: 11px; color: #8A8A8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.efir { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #C8452E; display: flex; align-items: center; gap: 5px; }
.efir::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E0492F; animation: efir 1.6s ease-in-out infinite; }
@keyframes efir { 50% { opacity: .25; } }
.tg-okno { flex: 1; overflow: hidden; position: relative; }
.tg-lenta { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 18px; animation: lenta 46s linear infinite; }
.tg-okno:hover .tg-lenta { animation-play-state: paused; }
@keyframes lenta { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .tg-lenta { animation: none; } }
.zapis {
  background: #fff; border-radius: 14px 14px 14px 4px; padding: 9px 11px 7px; text-align: left;
  font-size: 12.5px; line-height: 1.42; color: #1d1d1d; box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
}
.zapis-tag { display: inline; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent); margin-bottom: 3px; }
.zapis time { display: block; text-align: right; font-size: 10px; color: #9A9A9A; margin-top: 3px; }
.ceh-t .razdel-zag { font-size: clamp(28px, 3.2vw, 42px); }
.ceh-t .knopka { margin-top: 32px; min-width: 280px; }
.knopka-tg svg { width: 22px; height: 22px; color: #2AA0DA; }
.knopka-tg:hover svg { color: #fff; }
.knopka-tg span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.knopka-tg small { font-size: 12px; font-weight: 400; opacity: .7; }
.etapy { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.etap-foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--fon-2); }
.etap-foto img { width: 100%; height: 100%; object-fit: cover; }
.etap figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--t2); }
.etap figcaption b { display: block; font-weight: 500; color: var(--t3); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }

/* ---------- конструктор ---------- */
.konf { border-top: 1px solid var(--linia); }
/* порядок блоков — планировки, паспорт, опции (Алёна, 21.09 ночь). На компьютере паспорт — правая колонка на обе строки
   и едет за страницей; на телефоне встаёт между планировками и опциями */
.konf-set {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "modeli pravo" "opcii pravo";
  column-gap: clamp(28px, 4vw, 56px); row-gap: 56px; align-items: start;
}
.konf-modeli-blok { grid-area: modeli; min-width: 0; }
.konf-opcii-blok { grid-area: opcii; min-width: 0; }
.konf-shag { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.konf-shag + .modeli, .konf-shag + .opcii { margin-top: 0; }
.opcii { margin-bottom: 0; }
/* «можно без опций» — в начале опций, как она просила */
.bez-opciy {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin: 0 0 28px; padding: 16px 18px; background: var(--fon-2); border-left: 3px solid var(--akcent);
}
.bez-opciy p { font-size: 14.5px; line-height: 1.5; color: var(--t2); }
/* конец опций: итог и «Отправить расчёт» — на телефоне, где паспорт остался выше */
.konf-konec { display: none; }
.konf-konec-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.konf-konec-t small { font-size: 12px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konf-konec-t b { font-size: 20px; font-weight: 500; white-space: nowrap; }
.konf-nomer {
  width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--t);
  font-size: 14px; font-weight: 500;
}
.konf-shag h3 { font-size: 24px; }
.modeli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.model {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 186px; padding: 18px 18px 16px;
  border: 1px solid var(--linia); background: #fff; text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.model:hover { border-color: var(--linia-2); }
.model.on { border-color: var(--akcent); background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--akcent); }
.model:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.model.on::after {
  content: ""; position: absolute; right: 14px; top: 16px; width: 18px; height: 18px; background: var(--akcent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.model-nazv { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); padding-right: 22px; line-height: 1.4; }
.model-razmer { font-size: 22px; line-height: 1.2; color: var(--t); }
/* контур — как на их чертеже, все бани в одном масштабе; пунктир — терраса */
.konf-podskazka { margin: -6px 0 18px; font-size: 13px; line-height: 1.5; color: var(--t3); }
.model-shema { display: block; height: 72px; margin: 6px 0 2px; }
/* планировка из каталога — листом чертежа в карточке */
.model-plan {
  display: flex; align-items: center; justify-content: center; height: 124px; margin: 8px 0 4px; padding: 6px;
  background: #fff; border: 1px solid var(--linia); overflow: hidden;
}
.model-plan img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.model-shema svg { display: block; width: 100%; height: 100%; overflow: visible; }
.model-shema path { fill: none; stroke: var(--t2); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .2s, fill .2s; }
.model-shema .zdanie { fill: rgba(35, 35, 35, .045); }
.model-shema .punktir { fill: none; stroke-dasharray: 4 3; }
.model-shema .terrasa { stroke: var(--t3); stroke-dasharray: 3 3; }
.model.on .model-shema .zdanie { stroke: var(--akcent); fill: rgba(119, 113, 107, .12); }
.model.on .model-shema .terrasa { stroke: var(--akcent); }
.model.on .model-shema .punktir { fill: none; }
.model-metka { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent); line-height: 1.35; }
.model-niz { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linia); }
.model-pl { font-size: 13px; color: var(--t3); }
.model-cena { font-size: 16px; font-weight: 500; white-space: nowrap; text-align: right; line-height: 1.3; }
/* по акции: цена без акции зачёркнута над ценой сентября */
.model-cena s { display: block; font-size: 12.5px; font-weight: 400; color: var(--t3); text-decoration-thickness: 1px; }
.pb-stroka b s { margin-right: 6px; font-size: 13px; font-weight: 400; color: var(--t3); text-decoration-thickness: 1px; }

.gruppa + .gruppa { margin-top: 30px; }
.gruppa-zag { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); padding-bottom: 10px; border-bottom: 1px solid var(--t); }
.gruppa-zag span { font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--akcent); }
.opciya {
  width: 100%; display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px 10px 12px 2px; border: 0; border-bottom: 1px solid var(--linia); background: none; text-align: left; cursor: pointer;
  transition: background .2s;
}
.opciya:hover { background: #FBF9F6; }
.opciya.on { background: var(--fon-2); }
.tumbler { width: 20px; height: 20px; border: 1px solid var(--linia-2); background: #fff; position: relative; }
.opciya.on .tumbler { background: var(--akcent); border-color: var(--akcent); }
.opciya.on .tumbler::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.opciya-foto { position: relative; width: 64px; height: 48px; overflow: hidden; background: var(--fon-2); cursor: zoom-in; }
.opciya-foto img { width: 100%; height: 100%; object-fit: cover; }
/* лупа: нажатие на превью открывает её кадр целиком */
.opciya-foto i {
  position: absolute; right: 3px; bottom: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23232323' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.2'/%3E%3Cpath d='m10 10 3.4 3.4'/%3E%3C/g%3E%3C/svg%3E") center / 11px no-repeat;
}
.opciya.bez-foto { grid-template-columns: 22px minmax(0, 1fr) auto; }
.opciya-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opciya-t b { font-weight: 500; font-size: 15px; line-height: 1.35; }
.opciya-t span { font-size: 13px; color: var(--t3); line-height: 1.45; }
.opciya-cena { font-size: 15px; font-weight: 500; white-space: nowrap; }
.opciya-cena.raschet { font-weight: 400; color: var(--t3); font-size: 13.5px; }

.konf-pravo { grid-area: pravo; align-self: start; position: sticky; top: calc(var(--shapka) + 20px); }
.pasport-bani { background: var(--fon-2); padding: 26px 26px 22px; border-top: 3px solid var(--akcent); }
.pb-verh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.pb-metka { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--t); }
.pb-nomer { font-size: 12px; color: var(--t3); letter-spacing: .08em; }
.pb-plan { position: relative; background: #fff; border: 1px solid var(--linia); padding: 12px 12px 30px; }
.pb-plan img { width: 100%; height: 170px; object-fit: contain; }
.pb-plan-podpis { position: absolute; right: 10px; bottom: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.pb-opcia { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 8px; background: #fff; border: 1px solid var(--linia); font-size: 13.5px; color: var(--t2); min-height: 64px; transition: opacity .25s; }
.pb-opcia img { width: 64px; height: 48px; object-fit: cover; flex: none; }
.pb-opcia.pusto { display: none; }
.pb-stroki { margin-top: 16px; }
.pb-stroka { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 14px; color: var(--t2); line-height: 1.4; }
.pb-stroka span { min-width: 0; }
.pb-stroka i { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--linia-2); transform: translateY(-4px); }
.pb-stroka b { font-weight: 500; color: var(--t); white-space: nowrap; }
.pb-stroka.glavnaya { color: var(--t); font-weight: 500; }
.pb-itog { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--t); }
.pb-itog span { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.pb-itog b { font-size: clamp(30px, 2.6vw, 36px); font-weight: 400; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-po-raschetu { margin-top: 8px; font-size: 13px; color: var(--akcent); line-height: 1.45; }
.pb-knopki { display: grid; gap: 10px; margin-top: 20px; }
.pb-knopki .knopka { padding-left: 16px; padding-right: 16px; }
.pb-prim { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: var(--t3); }

.konf-mini {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 16px;
  background: #fff; border: 1px solid var(--t); box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
.konf-mini-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.konf-mini-t small { font-size: 12px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konf-mini-t b { font-size: 19px; font-weight: 500; }

/* ---------- комплектация ---------- */
.pasport { border-top: 1px solid var(--linia); padding-bottom: calc(var(--razdel) * .6); }
.glavnoe-lenta { background: var(--akcent); color: #fff; padding: clamp(48px, 6vw, 76px) 0; margin-bottom: clamp(56px, 7vw, 96px); }
.glavnoe-zag { text-align: center; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.2; margin-bottom: clamp(32px, 4vw, 52px); }
.glavnoe { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px; text-align: center; }
.glav svg { width: 40px; height: 40px; margin: 0 auto 16px; color: #fff; }
.glav b { display: block; font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.glav span { display: block; font-size: 15px; line-height: 1.6; color: #fff; max-width: 320px; margin: 0 auto; }
.zony { display: grid; gap: clamp(56px, 7vw, 96px); }
.zona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.zona:nth-child(even) .zona-foto { order: 2; }
.zona-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fon-2); }
.zona-foto img { width: 100%; height: 100%; object-fit: cover; }
.zona-kod { display: block; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; }
.zona-nazv { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.zona-schet { display: block; margin-top: 8px; font-size: 14px; color: var(--t3); }
.zona ol { margin-top: 24px; }
.zona ol li { position: relative; padding: 0 0 0 20px; margin-bottom: 11px; font-size: 15px; line-height: 1.55; color: var(--t2); }
.zona ol li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--akcent); }
.zona ol li b { font-weight: 500; color: var(--t); }

/* стена и пол — внутри «Базовой комплектации» тёплой полосой (её просьба 21.09 22:59: «вставить разрезы пирог стены и пола») */
.pasport .razrez { padding: clamp(48px, 6vw, 80px) 0; }
.pasport .razrez .podzag { margin-top: 0; }
.podzag-lead { margin: -14px 0 28px; max-width: 680px; font-size: 15px; line-height: 1.6; color: var(--t3); }
.podzag-lead:empty { display: none; }

/* остальное из базы листается, как «Уже построили»: страницы каталога, пока их нет — зоны карточками */
.stranicy-shapka { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(24px, 3vw, 36px); }
.stranicy-shapka .podzag { margin: clamp(56px, 7vw, 88px) 0 0; }
.stranicy-shapka .podzag-lead { margin: 10px 0 0; }
.karusel.stranicy { --kw: min(86vw, 1080px); }
.str-karta { flex: 0 0 var(--kw); scroll-snap-align: center; transition: opacity .4s ease; }
.str-karta:not(.tsentr) { opacity: .42; cursor: pointer; }
/* зона — только текст (Алёна, 22.09: «убрать фото, оставить текст»): слева крупный номер и название, справа пункты */
.str-karta.zona {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4.4vw, 72px); align-items: start;
  background: var(--fon-2); padding: clamp(28px, 3.8vw, 56px);
}
.zona-l { display: flex; flex-direction: column; align-items: flex-start; }
.zona-nomer { font-size: clamp(64px, 6.6vw, 104px); font-weight: 200; line-height: .86; letter-spacing: -.02em; color: #B9B1A7; font-variant-numeric: lining-nums; }
.str-karta.zona .zona-nazv { margin-top: clamp(18px, 2.2vw, 30px); }
.str-karta.zona .zona-schet { margin-top: 10px; }
.str-karta.zona .zona-sp { margin-top: 4px; }
.str-karta.zona .zona-sp li { margin-bottom: 12px; font-size: 15.5px; line-height: 1.6; }
.str-karta.zona .zona-sp li:last-child { margin-bottom: 0; }
/* каждый лист — своей высоты (Алёна, 22.09 вечер: «на листах 2–6 много пустого места под заголовком — убрать»).
   Раньше лента тянула все листы по самому длинному, и на телефоне лишнее вставало между названием зоны и пунктами.
   Высоту ленты по текущему листу ставит lentaStranic (класс po-listu); бледные соседние подрезаются по ней */
.str-karta.zona { align-content: start; }
.karusel.po-listu { transition: height .4s ease; }
.karusel.po-listu > .zona, .karusel.po-listu > .opl-variant { overflow: hidden; }
.karusel.po-listu.mer { height: auto !important; align-items: flex-start; transition: none; }
@media (prefers-reduced-motion: reduce) { .karusel.po-listu { transition: none; } }
/* «Получить каталог с описанием» под лентой — на компьютере; на телефоне её роль у «ездящей» кнопки */
.stranicy-niz { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }
.stranicy-niz .knopka { min-width: 300px; }
.karusel.stranicy.s-stranicami { --kw: min(64vw, 540px); }
.stranica { display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; }
.stranica-foto {
  position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--fon-2);
  box-shadow: 0 1px 2px rgba(40, 30, 20, .06), 0 12px 32px rgba(40, 30, 20, .09);
}
.stranica-foto::before { content: ""; display: block; padding-top: 141.4%; }   /* лист А4 */
.stranica-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stranica-podpis { margin-top: 14px; font-size: 15px; color: var(--t2); }
.stranica:focus-visible { outline: none; }
.stranica:focus-visible .stranica-foto { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* ---------- стена и пол ---------- */
.razrez { background: var(--fon-2); }
/* карточку слоя с фото Алёна сняла 21.09 ночью — чертежи стены и пола теперь рядом, во всю ширину */
.razrez-set { display: block; }
.razrez-levo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; }
.razrez-levo > .gabarity, .razrez-levo > .razrez-zametka { grid-column: 1 / -1; }
.chertezh { background: #fff; border: 1px solid var(--linia); padding: 24px; }
.chertezh-zag { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 22px; margin-bottom: 18px; }
.chertezh-zag span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.sloi-stena { display: grid; grid-template-columns: repeat(4, 1fr); height: 150px; border: 1px solid var(--t); }
.sloi-pol { display: grid; grid-template-rows: repeat(4, 1fr); height: 190px; border: 1px solid var(--t); }
.sloy { position: relative; border: 0; padding: 0; cursor: pointer; transition: filter .2s, box-shadow .2s; }
.sloi-stena .sloy + .sloy { border-left: 1px solid rgba(35, 35, 35, .5); }
.sloi-pol .sloy + .sloy { border-top: 1px solid rgba(35, 35, 35, .5); }
.sloy:hover { filter: brightness(.96); }
.sloy.on { box-shadow: inset 0 0 0 2px var(--akcent); z-index: 1; }
.sloy-n { position: absolute; left: 6px; top: 5px; font-size: 10.5px; font-weight: 600; color: var(--t); background: rgba(255, 255, 255, .85); padding: 1px 4px; }
.sloy-opis-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fon-3); }
.sloy-t-stal { background: repeating-linear-gradient(135deg, #B9BCBE 0 2px, #D3D6D8 2px 7px); }
.sloy-t-ppu { background: radial-gradient(circle at 30% 30%, #EFDFA9 0 2px, transparent 2.5px) 0 0 / 9px 9px, #F6EBC6; }
.sloy-t-brus { background: repeating-linear-gradient(90deg, #D8B480 0 5px, #CFA86F 5px 7px, #DDBC8A 7px 12px); }
.sloy-t-lipa { background: repeating-linear-gradient(0deg, #F0DDBB 0 6px, #E6CFA6 6px 7px, #F3E4C7 7px 14px); }
.sloy-t-plitka { background: linear-gradient(90deg, rgba(0, 0, 0, .12) 1px, transparent 1px) 0 0 / 34px 100%, #CFCBC5; }
.sloy-t-styazhka { background: radial-gradient(circle, #B8B2A9 0 1px, transparent 1.5px) 0 0 / 7px 7px, #DAD5CD; }
.sloy-t-csp { background: repeating-linear-gradient(45deg, #D2C9BB 0 3px, #C7BDAE 3px 5px); }
.sloy-t-epps { background: repeating-linear-gradient(90deg, #DDE7EC 0 10px, #CFDCE3 10px 11px); }
.razmery { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 11.5px; color: var(--t3); text-align: center; }
.legenda { margin-top: 18px; display: grid; gap: 2px; }
.legenda button {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 8px;
  border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--linia); transition: background .2s;
}
.legenda button:hover { background: #FBF9F6; }
.legenda button.on { background: var(--akcent-fon); }
.legenda i { font-style: normal; font-size: 12px; color: var(--t3); font-weight: 500; }
.legenda b { font-weight: 500; font-size: 14.5px; }
.legenda span { font-size: 13px; color: var(--t3); white-space: nowrap; }
.gabarity { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border: 1px solid var(--linia); padding: 20px 24px; }
.gabarity svg { width: 100%; height: auto; }
.gabarity dl { margin: 0; display: grid; gap: 10px; }
.gabarity dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linia); padding-bottom: 8px; font-size: 14px; }
.gabarity dt { color: var(--t3); }
.gabarity dd { margin: 0; font-weight: 500; text-align: right; }
.razrez-zametka { font-size: 14px; line-height: 1.6; color: var(--t2); border-left: 2px solid var(--akcent); padding-left: 18px; }
.sloy-opis { position: sticky; top: calc(var(--shapka) + 20px); background: #fff; border: 1px solid var(--linia); padding: 16px 16px 26px; }
.sloy-opis-foto img { width: 100%; height: 100%; object-fit: cover; }
.sloy-opis-foto.pusto img { display: none; }
.sloy-opis small { display: block; margin: 18px 6px 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.sloy-opis h3 { margin: 0 6px; font-size: 24px; line-height: 1.25; }
.sloy-opis h3 em { font-style: normal; color: var(--akcent); font-size: .7em; margin-left: 6px; white-space: nowrap; }
.sloy-opis p { margin: 12px 6px 0; font-size: 15px; line-height: 1.6; color: var(--t2); }

/* ---------- порядок оплаты: варианты — страницами, листаются вбок, как «Уже построили» (Алёна, 22.09) ---------- */
.karusel.oplata-lenta { --kw: min(80vw, 880px); }
.opl-variant { background: var(--fon-2); padding: clamp(26px, 3.4vw, 48px); }
.opl-variant header { padding-bottom: 20px; border-bottom: 1px solid var(--linia-2); margin-bottom: 8px; }
.opl-nomer { display: block; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.opl-variant h3 { font-size: 26px; line-height: 1.2; }
.opl-variant header p { margin-top: 8px; font-size: 15px; color: var(--t2); }
.opl-variant li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--linia); }
.opl-variant li:last-child { border-bottom: 0; padding-bottom: 0; }
.opl-dolya { font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--akcent); }
.opl-etap { display: block; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; }
.opl-t b { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.4; }
.opl-t span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--t2); }
.oplata-zametka { margin-top: 28px; max-width: 820px; font-size: 15px; line-height: 1.65; color: var(--t2); border-left: 2px solid var(--akcent); padding-left: 20px; }

/* ---------- доставка ---------- */
.dostavka { border-top: 1px solid var(--linia); }
/* сначала карта (расстояния и примерная стоимость), потом фото погрузки краном и текст — Алёна, 21.09 23:43 */
.dostavka-niz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.dostavka-niz .razdel-lead { margin-top: 0; color: var(--t); }
.dostavka-zametka { margin-top: 18px; font-size: 15px; line-height: 1.65; color: var(--t); border-left: 2px solid var(--akcent); padding-left: 18px; }
.dostavka-foto { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; }
.dost-kadr { border: 0; padding: 0; background: var(--fon-2); cursor: zoom-in; aspect-ratio: 3 / 4; overflow: hidden; }
.dost-kadr img { width: 100%; height: 100%; object-fit: cover; }
.karta-set { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.karta { position: relative; background: var(--fon-2); border: 1px solid var(--linia); }
.karta svg { width: 100%; height: auto; display: block; }
.graticula { stroke: #D9D2C7; stroke-width: 1; fill: none; }
.graticula-podpis { fill: #A9A197; font-size: 12px; font-family: var(--shrift); }
.duga { fill: none; stroke: #BDB3A5; stroke-width: 1.4; stroke-dasharray: 4 5; transition: stroke .2s; }
.duga.on { stroke: var(--akcent); stroke-width: 2; stroke-dasharray: none; }
.paket { fill: var(--akcent); }
.start-kolco { fill: none; stroke: var(--t); stroke-width: 1; }
.start { fill: var(--t); }
.start-imya { fill: var(--t); font-size: 13px; font-weight: 600; letter-spacing: .08em; font-family: var(--shrift); }
.tochka-ten { fill: rgba(119, 113, 107, .16); }
.tochka { fill: var(--akcent); }
.gorod-imya { fill: var(--t2); font-size: 12px; font-family: var(--shrift); letter-spacing: .04em; }
.gi-n { fill: var(--t3); }
.gorod-nomer { display: none; fill: var(--t); font-size: 30px; font-weight: 500; font-family: var(--shrift); }
.gorod-tochka { cursor: pointer; }
/* подпись — под схемой, а не поверх: с Калугой, Пензой и Сызранью (22.09) точки опустились к нижнему краю,
   и на телефоне подпись легла на Самару и Сызрань */
.karta-podpis { display: block; padding: 9px 14px 10px; border-top: 1px solid var(--linia); font-size: 11.5px; line-height: 1.4; color: var(--t3); }
.karta-podpis b { color: var(--t); font-weight: 400; }
.goroda { display: grid; gap: 0; border-top: 1px solid var(--t); max-height: 560px; overflow: auto; }
.gorod { padding: 12px 4px; border-bottom: 1px solid var(--linia); cursor: pointer; outline: none; transition: background .2s; }
.gorod:hover, .gorod.on, .gorod:focus-visible { background: var(--fon-2); }
.gorod b { display: flex; gap: 10px; font-weight: 500; font-size: 15px; }
.gorod b i { font-style: normal; color: var(--t3); font-weight: 400; font-size: 13px; padding-top: 1px; }
.gorod em { display: block; font-style: normal; font-size: 12.5px; color: var(--akcent); margin: 2px 0 0 30px; }
.gorod span { display: block; font-size: 13px; color: var(--t3); margin: 2px 0 0 30px; line-height: 1.45; }
.gorod-cena { display: block; margin: 3px 0 0 30px; font-size: 14px; font-weight: 500; color: var(--t); font-variant-numeric: lining-nums; }
.goroda-zametka { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--t3); }
.poprobovat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.poprob { background: var(--fon-2); padding: 26px; }
.poprob small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
.poprob h4 { font-size: 21px; line-height: 1.3; font-weight: 400; }
.poprob p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--t2); }

/* ---------- магазин: карточки как статьи у severno ---------- */
.magazin { border-top: 1px solid var(--linia); }
.magazin-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tovar { background: var(--fon-2); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* её снимки товаров вертикальные (4 : 5) и сделаны специально — показываем целиком; эскиз 4 : 3 вписываем без обрезки */
.tovar-foto { aspect-ratio: 4 / 5; overflow: hidden; background: #EAE0D2; position: relative; }
.tovar-foto img { width: 100%; height: 100%; object-fit: cover; }
.tovar-foto.s-eskizom img { object-fit: contain; }
.tovar-eskiz { position: absolute; right: 12px; bottom: 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); background: rgba(255, 255, 255, .8); padding: 4px 8px; }
.tovar-t { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.tovar-nal { align-self: flex-start; font-size: 12px; font-weight: 500; background: var(--akcent); color: #fff; padding: 4px 9px; margin-bottom: 12px; }
.tovar h3 { font-size: 20px; line-height: 1.3; }
.tovar p { margin-top: 8px; font-size: 14px; color: var(--t2); }
.tovar-niz { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tovar-cena { font-size: 20px; font-weight: 500; white-space: nowrap; }
/* «Заказать» у каждой вещи — окно с именем и телефоном, вещь уже отмечена */
.tovar-kupit {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 500;
  color: var(--t); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.tovar-kupit svg { width: 18px; height: 18px; transition: transform .2s; }
.tovar-kupit:hover { color: var(--akcent-2); }
.tovar-kupit:hover svg { transform: translateX(3px); }
.tovar-zakaz { background: var(--knopka); color: #fff; justify-content: center; padding: 32px; min-height: 240px; transition: background .2s; }
.tovar-zakaz:hover { background: var(--knopka-2); }
.tovar-zakaz span { font-size: 24px; line-height: 1.25; display: flex; align-items: center; gap: 12px; }
.tovar-zakaz em { font-style: normal; font-size: 14px; color: #fff; margin-top: 10px; }
.tovar-zakaz:hover span svg { transform: translateX(4px); }
.tovar-zakaz svg { width: 26px; height: 26px; transition: transform .2s; }

/* ---------- как заказать ---------- */
.zakaz { border-top: 1px solid var(--linia); }
.shagi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; counter-reset: shag; }
.shag { counter-increment: shag; padding: 26px 0 30px; border-top: 1px solid var(--t); }
.shag::before { content: counter(shag, decimal-leading-zero); display: block; font-size: 13px; color: var(--t3); letter-spacing: .1em; margin-bottom: 14px; }
.shag h3 { font-size: 22px; line-height: 1.25; }
.shag p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--t2); }

/* ---------- вопросы ---------- */
.voprosy { border-top: 1px solid var(--linia); }
.voprosy-set { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.voprosy-set .razdel-shapka { position: sticky; top: calc(var(--shapka) + 24px); }
.voprosy-spisok { border-top: 1px solid var(--t); }
.vopros { border-bottom: 1px solid var(--linia); }
.vopros summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: 18px; line-height: 1.4;
}
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary::after { content: "+"; font-size: 26px; font-weight: 300; line-height: 1; color: var(--t2); transition: transform .25s; }
.vopros[open] summary::after { transform: rotate(45deg); }
.vopros p { padding: 0 48px 24px 0; font-size: 15.5px; line-height: 1.7; color: var(--t2); }

/* ---------- заявка ---------- */
.zayavka-blok { border-top: 1px solid var(--linia); }
.triptih { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); height: clamp(180px, 22vw, 300px); margin-bottom: clamp(36px, 5vw, 56px); }
.triptih img { width: 100%; height: 100%; object-fit: cover; }
.zayavka-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; padding: 0 clamp(0px, 3vw, 36px); }
.zayavka-levo .kontakty { margin-top: 32px; }
.forma { display: grid; gap: 18px; }
.pole { display: grid; gap: 8px; }
.pole > span { font-size: 12px; color: var(--t2); }
.pole input, .pole textarea {
  width: 100%; border: 1px solid transparent; background: var(--fon-3); padding: 15px 16px; font: inherit; font-size: 16px; color: var(--t);
  border-radius: 0; outline: none; transition: border-color .2s, background .2s; -webkit-appearance: none; appearance: none;
}
.pole textarea { resize: vertical; min-height: 96px; }
.pole input:focus, .pole textarea:focus { border-color: var(--t); background: #fff; }
.pole.oshibka input { border-color: #C0392B; background: #FDF3F1; }
.forma .knopka { min-height: 58px; font-size: 16px; margin-top: 6px; }
/* согласие на обработку данных — отдельная галочка, заранее не отмеченная (152-ФЗ с 01.09.2025) */
.soglasie-galka { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.soglasie-galka input {
  width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--akcent); cursor: pointer;
  border: 1px solid var(--linia-2); border-radius: 0;
}
.soglasie-galka span { font-size: 13px; line-height: 1.5; color: var(--t2); }
.soglasie-galka a { color: var(--t); text-underline-offset: 3px; }
.soglasie-galka.oshibka span { color: #B03A2E; }
.soglasie-galka.oshibka input { outline: 2px solid #C0392B; outline-offset: 2px; }
.forma-soglasie { font-size: 12px; line-height: 1.5; color: var(--t3); }
.forma-soglasie a { color: inherit; text-underline-offset: 3px; }
.forma-status { font-size: 14.5px; line-height: 1.5; min-height: 1px; }
.forma-status.ok { color: #2E7D4F; }
.forma-status.err { color: #B03A2E; }

/* ---------- подвал: тёмный, ссылки золотом ---------- */
.podval { background: var(--temn); color: #fff; padding: clamp(48px, 6vw, 72px) 0 28px; }
.podval-in { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 56px); align-items: start; }
.podval-logo img { width: 130px; height: auto; }
.naverh {
  display: grid; place-items: center; width: 64px; height: 64px; margin-top: 28px; border-radius: 50%;
  background: #fff; color: var(--t); font-size: 12px; text-decoration: none;
}
.podval-kolonki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.podval-kolonki h4 { font-size: 17px; font-weight: 500; margin-bottom: 16px; }
.podval-kolonki a { display: block; font-size: 14.5px; line-height: 1.4; margin-bottom: 10px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.podval-kolonki a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.podval-kolonki .zoloto a, .podval-kolonki a.zoloto { color: var(--zoloto); }
.podval-kolonki p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); margin-bottom: 10px; }
.podval-niz {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; color: rgba(255, 255, 255, .6);
}
.podval-panel { color: rgba(255, 255, 255, .6); }
.podval-niz-levo { display: grid; gap: 6px; max-width: 620px; }
.podval-oferta { color: rgba(255, 255, 255, .45); line-height: 1.55; }
.podval-niz-pravo { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: flex-start; }
.podval-niz-pravo a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.podval-niz-pravo a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- «ездящие» кнопки на телефоне: «Конструктор бани» и «Рассчитать баню» (Алёна, 22.09) ---------- */
.plav {
  display: none; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 44;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--linia); box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  transform: translateY(170%); transition: transform .3s;
}
.plav.vidno { transform: none; }
.plav .knopka { min-height: 48px; padding: 0 10px; font-size: 14.5px; line-height: 1.2; }
.plav .knopka-kontur { background: #fff; }
/* надпись «Рассчитать баню» ⇄ «Получить каталог с описанием» меняется мягко */
@keyframes smena { from { opacity: .2; } }
.plav-bystro.smena { animation: smena .45s ease; }

/* ---------- окно проекта ---------- */
.proekt-okno { position: fixed; inset: 0; z-index: 80; background: rgba(20, 18, 16, .6); display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 32px 16px; }
.po-in { position: relative; width: 100%; max-width: 1160px; background: #fff; padding: clamp(22px, 3vw, 40px); }
.po-shapka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: end; padding-right: 44px; padding-bottom: 24px; border-bottom: 1px solid var(--linia); margin-bottom: 20px; }
.po-metka { display: block; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
.po-shapka h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.po-shapka p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--t2); max-width: 720px; }
.po-knopki { display: flex; flex-wrap: wrap; gap: 10px; }
.po-shapka .po-cena { margin-top: 10px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 500; color: var(--t); font-variant-numeric: lining-nums; }
.po-cena span { margin-right: 10px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); vertical-align: .22em; }
.po-x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; font-weight: 300; line-height: 1; cursor: pointer; color: var(--t); }

/* «Получить полную смету» по этой бане: имя и телефон прямо здесь, без прыжка в конструктор */
.po-smeta { display: grid; gap: 14px; margin: 0 0 24px; padding: clamp(18px, 2.4vw, 26px); background: var(--fon-2); border-left: 3px solid var(--akcent); }
.po-smeta-zag { font-size: 16px; line-height: 1.5; color: var(--t); }
.po-smeta-polya { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.po-smeta .pole input { background: #fff; }
.po-smeta .knopka { min-height: 58px; }
.po-smeta.gotovo .po-smeta-zag, .po-smeta.gotovo .po-smeta-polya, .po-smeta.gotovo .forma-soglasie { display: none; }
.po-smeta.gotovo .forma-status { font-size: 16px; }

/* коллаж: ряды разной высоты, кадр целиком — без обрезки; ширину доли задаёт app.js по пропорциям снимка */
.kollazh { display: flex; flex-direction: column; gap: var(--kg, 8px); }
.k-ryad { display: flex; align-items: flex-start; gap: var(--kg, 8px); }
.po-kadr { flex: 1 1 0; min-width: 0; display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--fon-2); cursor: zoom-in; transform: translateZ(0); }
.po-kadr img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.po-kadr:hover img { transform: scale(1.03); }
.po-kadr:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.k-pusto { flex: 1 1 0; }
.po-niz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linia); }
.po-niz span { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; }

/* ---------- просмотр фото ---------- */
.lajtboks { position: fixed; inset: 0; z-index: 90; background: rgba(12, 11, 10, .94); display: flex; align-items: center; justify-content: center; }
.lb-kadr { max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lb-kadr img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.lb-kadr figcaption { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.lb-x, .lb-str { position: absolute; border: 0; background: none; color: #fff; cursor: pointer; }
.lb-x { right: 14px; top: 10px; width: 48px; height: 48px; font-size: 34px; font-weight: 300; }
.lb-str { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 26px; border: 1px solid rgba(255, 255, 255, .4); }
.lb-nazad { left: 14px; }
.lb-vpered { right: 14px; }
.lb-str:hover { background: #fff; color: var(--t); }

/* ---------- быстрая заявка: имя и телефон в окне (Алёна, 22.09) ----------
   На компьютере — окно по центру, на телефоне — лист снизу. «Артём свяжется с вами в ближайшее время» — с его лицом */
.bystro {
  position: fixed; inset: 0; z-index: 85; display: flex; padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(20, 18, 16, 0); transition: background-color .3s ease;
}
.bystro.otkryto { background: rgba(20, 18, 16, .56); }
.bystro-in {
  position: relative; width: 100%; max-width: 480px; margin: auto; background: #fff; padding: clamp(28px, 3.6vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28); outline: none;
  opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .3s ease, transform .45s cubic-bezier(.16, .8, .24, 1);
}
.bystro.otkryto .bystro-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bystro, .bystro-in { transition: none; } }
.bystro-x {
  position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 30px; font-weight: 300; line-height: 1; color: var(--t);
}
.bystro-metka { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
.bystro-zag { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; padding-right: 36px; }
.bystro-tekst { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--t2); }
.bystro-artem {
  display: flex; align-items: center; gap: 14px; margin: 22px 0; padding: 12px 16px 12px 12px;
  background: var(--fon-2); font-size: 15.5px; line-height: 1.4; color: var(--t);
}
.bystro-artem img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fon-3); }
.bystro-forma { display: grid; gap: 14px; }
.bystro-forma .knopka { min-height: 56px; font-size: 16px; margin-top: 4px; }
/* расчёт из конструктора — строки паспорта и итог */
.bystro-raschet { margin-top: 18px; padding: 12px 16px 16px; background: var(--fon-2); border-top: 3px solid var(--akcent); }
.bystro-raschet .pb-stroka { font-size: 13.5px; padding: 5px 0; }
.bystro-raschet .pb-itog { margin-top: 10px; padding-top: 12px; }
.bystro-raschet .pb-itog b { font-size: 26px; }
/* аксессуары: отметить, что интересует (можно ничего) */
.bystro-tovary { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.bystro-tovary-zag { flex-basis: 100%; font-size: 12px; color: var(--t2); margin-bottom: 2px; }
.tovar-galka {
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 12px; border: 1px solid var(--linia-2);
  background: #fff; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.tovar-galka i { position: relative; width: 16px; height: 16px; flex: none; border: 1px solid var(--linia-2); background: #fff; }
.tovar-galka small { font-size: 12.5px; color: var(--t3); white-space: nowrap; }
.tovar-galka:hover { border-color: var(--t3); }
.tovar-galka[aria-pressed="true"] { border-color: var(--akcent); background: var(--fon-2); }
.tovar-galka[aria-pressed="true"] i { background: var(--akcent); border-color: var(--akcent); }
.tovar-galka[aria-pressed="true"] i::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.bystro-gotovo { padding: 16px 0 4px; text-align: center; }
.bystro-galka {
  display: block; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--fon-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2377716B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.bystro-spasibo { margin: 0 auto 24px; max-width: 22em; font-size: 20px; line-height: 1.45; outline: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1480px) {
  .shapka-soc, .logo-bani { display: none; }
}
@media (max-width: 1280px) {
  .shapka-tel { display: none; }
  .menu a { font-size: 14px; }
}
@media (max-width: 1100px) {
  .menu, .shapka-tel { display: none; }
  .shapka-knopka { margin-left: auto; }
  .burger { display: block; }
  .konf-set { grid-template-columns: minmax(0, 1fr); grid-template-areas: "modeli" "pravo" "opcii"; row-gap: 44px; }
  .konf-pravo { position: static; }
  #pbBezOpciy { display: none; }   /* на телефоне «без опций» — сразу ниже, в начале опций: не дублируем */
  .konf-konec {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px;
    padding: 12px 12px 12px 16px; background: #fff; border: 1px solid var(--t);
  }
  .pasport-bani { max-width: 560px; }
  .karusel { --kw: min(74vw, 760px); }
  .podval-in { grid-template-columns: 150px minmax(0, 1fr); }
  .podval-knopka { grid-column: 2; }
  .plav { display: grid; }
  .stranicy-niz { display: none; }
}
@media (max-width: 900px) {
  .razrez-levo { grid-template-columns: minmax(0, 1fr); }
  :root { --shapka: 68px; }
  .artem-in, .zona, .dostavka-niz, .razrez-set, .voprosy-set, .zayavka-set { grid-template-columns: minmax(0, 1fr); }
  .zona:nth-child(even) .zona-foto { order: 0; }
  .artem-foto, .sloy-opis, .voprosy-set .razdel-shapka { position: static; }
  .artem-foto { max-width: 520px; }
  .ceh-blok { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .telefon { order: 2; margin-top: 0; height: 540px; }
  .cifry { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .etapy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glavnoe { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .karta-set { grid-template-columns: minmax(0, 1fr); }
  .goroda { max-height: none; }
  .poprobovat, .magazin-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shagi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zayavka-set { padding: 0; }
  .po-shapka { grid-template-columns: minmax(0, 1fr); }
  /* размеры: три в первом ряду, два во втором */
  .harakteristiki { flex-wrap: wrap; }
  .harakteristiki div { flex: 1 1 33.333%; padding: 12px; }
  .harakteristiki div:nth-child(n+4) { flex-basis: 50%; border-top: 1px solid rgba(255, 255, 255, .38); }
  .harakteristiki div:nth-child(4) { border-left: 0; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .karusel.stranicy { --kw: 86vw; }
  .karusel.stranicy.s-stranicami { --kw: 78vw; }
  .str-karta.zona { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 18px 26px; }
  /* номер и название зоны — в одну строку, пункты ниже */
  .zona-l { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
  .zona-nomer { font-size: 46px; }
  .str-karta.zona .zona-nazv { margin-top: 0; font-size: 22px; }
  .str-karta.zona .zona-schet { flex-basis: 100%; margin-top: 8px; }
  .str-karta.zona .zona-sp li { font-size: 15px; margin-bottom: 10px; }
  .karusel.oplata-lenta { --kw: 86vw; }
  .opl-variant { padding: 24px 18px 26px; }
  .stranicy-shapka .lenta-nav { margin-left: auto; }
  .logo-znak { width: 34px; }
  .logo-slovo { width: 118px; }
  .logo-bani { display: none; }
  .shapka-in { gap: 12px; }
  .shapka-knopka { padding: 0 14px; font-size: 13.5px; }
  /* три кнопки: две в ряд, «Конструктор бани» во всю ширину */
  .tri-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tri .knopka { min-width: 0; padding: 0 10px; }
  .tri #heroK3 { grid-column: 1 / -1; }
  /* размеры: по два в ряд, цена — во всю ширину */
  .harakteristiki div { flex-basis: 50%; padding: 14px 8px; gap: 4px; }
  .harakteristiki div + div { border-left: 0; }
  .harakteristiki div:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .38); }
  .harakteristiki div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .38); }
  .harakteristiki div:last-child:nth-child(odd) { flex-basis: 100%; }
  .harakteristiki span { font-size: 12px; letter-spacing: .1em; }
  .proekty-shapka { gap: 18px; }
  .lenta-str { width: 46px; height: 46px; }
  .karusel { --kw: 80vw; --kg: 12px; }
  .proekt-foto { border-radius: 12px; }
  .proekt-foto::before { padding-top: 100%; }
  .proekt-foto em { right: 10px; bottom: 10px; }
  .proekt-metka { left: 10px; top: 10px; }
  .proekt-t { flex-direction: column; gap: 6px; margin-top: 14px; padding: 0 2px; }
  .proekt-h { font-size: 17px; }
  .proekt-cena { font-size: 17px; }
  .proekt-n { font-size: 13px; }
  .po-smeta-polya { grid-template-columns: minmax(0, 1fr); }
  .po-knopki { width: 100%; }
  .po-knopki .knopka { flex: 1 1 auto; }
  .po-niz { flex-direction: column; align-items: stretch; text-align: center; }
  /* на телефоне крестик всегда под рукой — коллаж длинный */
  .po-x { position: fixed; right: 10px; top: 10px; z-index: 2; background: rgba(255, 255, 255, .94); border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, .14); }
  .soc { grid-template-columns: minmax(0, 1fr); }
  .kontakt div { text-align: left; }
  .ceh-blok { padding: 28px 18px 0; overflow: hidden; }
  .telefon { width: 270px; height: 480px; margin-bottom: -120px; }
  .ceh-t .knopka { min-width: 0; width: 100%; }
  .etapy { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
  .modeli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .model { min-height: 170px; padding: 14px 12px 12px; }
  .model-plan { height: 96px; padding: 4px; }
  .bez-opciy { padding: 14px 14px; }
  .bez-opciy .knopka { width: 100%; }
  .konf-konec .knopka { padding: 0 16px; }
  .model-razmer { font-size: 17px; }
  .model-cena { font-size: 14px; }
  .opciya { grid-template-columns: 22px 52px minmax(0, 1fr); gap: 12px; }
  .opciya-foto { width: 52px; height: 40px; }
  .opciya-cena { grid-column: 3; justify-self: start; margin-top: -4px; }
  .opciya.bez-foto { grid-template-columns: 22px minmax(0, 1fr); }
  .opciya.bez-foto .opciya-cena { grid-column: 2; }
  .pasport-bani { padding: 20px 16px; }
  .gabarity { grid-template-columns: minmax(0, 1fr); }
  .gabarity svg { max-width: 200px; }
  .chertezh { padding: 16px; }
  .opl-variant li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .poprobovat, .magazin-set, .shagi { grid-template-columns: minmax(0, 1fr); }
  .gorod-imya, .start-imya, .graticula-podpis { display: none; }
  .gorod-nomer { display: block; }
  .triptih { height: 130px; }
  .podval-in { grid-template-columns: minmax(0, 1fr); }
  .podval-kolonki { grid-template-columns: minmax(0, 1fr); }
  .podval-knopka { grid-column: auto; }
  .proekt-okno { padding: 0; }
  .po-in { min-height: 100%; }
  .vopros summary { font-size: 16.5px; }
  .vopros p { padding-right: 0; }
  .lb-str { display: none; }
  .demo { font-size: 13px; padding-right: 44px; }
  .demo-znak, .akciya-metka, .proekt-metka, .model-metka, .etap figcaption b,
  .pb-plan-podpis, .sloy-n, .razmery, .karta-podpis, .efir, .zapis-tag, .zapis time, .tg-shapka small { font-size: 12px; }
  /* «Индивидуальный» — одно длинное слово: галочку выбора уносим вниз, заголовку — вся ширина */
  .model-nazv { letter-spacing: .02em; font-size: 12px; padding-right: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .model.on::after { top: auto; bottom: 14px; right: 12px; }
  .model-niz { flex-direction: column; align-items: flex-start; gap: 2px; padding-right: 22px; }
  .tg-shapka { padding: 50px 10px 10px; gap: 8px; }
  .tg-shapka img { width: 30px; height: 30px; padding: 4px; }
  .efir { letter-spacing: .03em; gap: 4px; }
  .gorod-nomer { font-size: 34px; }
}
/* быстрая заявка на телефоне — лист снизу, при длинном расчёте листается сам */
@media (max-width: 640px) {
  .bystro { padding: 0; overflow: hidden; }
  .bystro-in {
    max-width: none; margin: auto 0 0; max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain;
    padding: 26px 18px calc(22px + env(safe-area-inset-bottom)); transform: translate3d(0, 60px, 0);
  }
  .bystro-zag { font-size: 25px; }
  .bystro-artem { margin: 18px 0; font-size: 15px; }
  .bystro-artem img { width: 46px; height: 46px; }
  .tovar-galka { font-size: 13.5px; }
}
@media (max-width: 360px) {
  .plav .knopka { font-size: 13.5px; padding: 0 6px; }
}
/* узкие телефоны: 360 — самый частый Android, 320 — старый iPhone SE. Логотип, «Рассчитать» и меню
   занимали 359 px — на 360 меню прилипало к краю, на 320 страница становилась шире экрана */
@media (max-width: 374px) {
  .shapka-in { gap: 10px; }
  .logo { gap: 9px; }
  .logo-znak { width: 30px; }
  .logo-slovo { width: 104px; }
  .shapka-knopka { padding: 0 12px; font-size: 13px; }
}
@media (max-width: 349px) {
  .shapka-in { gap: 8px; }
  .logo { gap: 7px; }
  .logo-znak { width: 27px; }
  .logo-slovo { width: 86px; }
  .shapka-knopka { padding: 0 10px; font-size: 12.5px; }
}