/* ==========================================================================
   fixokno.kz - модульная система
   Стиль: монохром, типографика-first, единственный акцент - WhatsApp green
   Шрифт: Geist (геометричный, кириллица). Хостится локально, без запросов
   к Google Fonts (быстрее, GDPR-чисто, не блокируется на медленных сетях).

   ----- БРЕЙКПОЙНТЫ (зафиксировано 2026-05-26) -----
   Desktop-first: базовые стили под 1600+ (не трогаем — уже работают).
   Дополнительные правила пишем только под 4 точки:

     @media (max-width: 1279px) { ... }   /* ноутбуки 13-14": MacBook 1280, FullHD ноуты */
     @media (max-width: 1023px) { ... }   /* планшеты landscape, маленькие ноуты, iPad Pro */
     @media (max-width: 767px)  { ... }   /* планшеты portrait, большие телефоны */
     @media (max-width: 479px)  { ... }   /* все телефоны: iPhone SE 320 – iPhone Pro Max 430 */

   Если на каком-то конкретном элементе требуется ещё узкая точка
   (например, iPhone SE 320 ломает заголовок) — допустим
   @media (max-width: 359px), но только как ИСКЛЮЧЕНИЕ для одного элемента.

   Новые @media с любыми ДРУГИМИ числами (900, 1100, 600 и т.п.) — запрещены.
   ========================================================================== */

/* ---------- LOCAL FONTS (Geist 400/500/600/700, латиница + кириллица) ----- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Geist-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0460-052F, U+0490-0491, U+04B0-04B1, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Geist-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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Geist-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0460-052F, U+0490-0491, U+04B0-04B1, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Geist-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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Geist-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0460-052F, U+0490-0491, U+04B0-04B1, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Geist-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: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Geist-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0460-052F, U+0490-0491, U+04B0-04B1, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Geist-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;
}

/* ---------- TOKENS ---------- */
:root {
  --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #F4F4F4;
  --border: #EAEAEA;
  --border-2: #DADADA;

  --ink: #0A0A0A;
  --ink-2: #545454;
  --ink-3: #8A8A8A;
  --ink-4: #BFBFBF;

  --dark: #0F0F0F;
  --dark-2: #1A1A1A;

  /* изумруд: дизайнерский акцент, не "WhatsApp-зелёный", контрастит с белым текстом */
  --wa: #10B981;
  --wa-2: #0E9F70;
  /* светлый мятный – только для типографического акцента в hero */
  --wa-light: #6EE7B7;

  /* звёзды в отзывах – наш фирменный зелёный (вместо стандартного жёлтого) */
  --star: var(--wa);

  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;  /* крупное скругление для "карточек-секций" в стиле safevision */

  --wrap: 1280px;
  --wrap-n: 880px;
  --pad: 28px;

  --tr: .2s ease;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Защита от горизонтального скролла: html+body обрезают любые full-bleed
   псевдоэлементы (зелёная полоса команды, бейдж/кнопка промо, off-screen
   мобильное меню через translateX) и не дают двигать страницу пальцем
   вправо/влево.

   ВАЖНО: используем `overflow-x: clip` (не `hidden`). Разница:
   `hidden` создаёт новый containing-block, к которому цепляется position:fixed.
   На мобильных это ломает sticky-плашку bottom:0 при скрытии URL-bar браузера
   (плашка остаётся в layout viewport, "висит в воздухе"). `clip` запрещает
   скролл по оси, но НЕ создаёт containing-block — fixed остаётся привязан
   к visual viewport.
   Fallback `hidden` оставлен для очень старых браузеров (Safari < 16). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, p { margin: 0; }

/* ---------- ACCESSIBILITY: keyboard focus indicator (WCAG 2.4.7) ----------
   *:focus { outline: none } убирает дефолтный outline для всех вариантов
   фокуса, *:focus-visible возвращает его ТОЛЬКО для клавиатурной навигации
   (Tab/Shift+Tab/стрелок). При клике мышью outline не показывается — это
   современный паттерн, поддержан всеми Evergreen-браузерами.
   На тёмных секциях outline переключается на белый, чтобы не сливался
   с зелёным фоном WA-кнопок. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--wa);
  outline-offset: 3px;
  border-radius: 2px;
}
.sec--reviews *:focus-visible,
.sec--mvid *:focus-visible,
.sec--promo *:focus-visible,
.sec--final *:focus-visible,
.sec--guar *:focus-visible,
.hero *:focus-visible,
.ft *:focus-visible,
.mm *:focus-visible,
.doc-hero *:focus-visible,
.stm *:focus-visible {
  outline-color: #fff;
}

/* ---------- ACCESSIBILITY: skip-link "Перейти к содержимому" ----------
   Реально скрыт через классический visually-hidden паттерн (1×1px, clip).
   При фокусе клавиатуры (Tab из адресной строки) — раскрывается в плашку.
   Этот подход надёжнее transform: translateY(-110%) — на iOS/Chrome mobile
   при скролле transform-скрытый элемент мог "проскакивать" в viewport,
   тут таких проблем нет (элемент имеет нулевой размер). */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 14px 22px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--wa);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r);
  outline: 2px solid #fff;
  outline-offset: -5px;
}

/* ---------- LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--narrow { max-width: calc(var(--wrap-n) + var(--pad) * 2); }

.sec {
  padding: 120px 0;
}

.sec__head {
  margin-bottom: 64px;
  max-width: 720px;
}
.sec__head--wide { max-width: 920px; }
.sec__h {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
}
.sec__sub {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.eyebrow--light { color: rgba(255,255,255,.5); }

/* ---------- BUTTONS / LINKS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
  white-space: nowrap;
  user-select: none;
  padding: 13px 22px;
  font-size: 15px;
}
.btn:active { transform: scale(.98); }

.btn--sm { padding: 8px 16px; font-size: 14px; gap: 6px; }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--xl { padding: 22px 36px; font-size: 17px; }
.btn--block { width: 100%; }

.btn--wa {
  background: var(--wa);
  color: #fff;
}
@media (hover: hover) { .btn--wa:hover { background: var(--wa-2); } }

.btn--dark {
  background: var(--ink);
  color: #fff;
}
@media (hover: hover) { .btn--dark:hover { background: var(--dark-2); } }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-2);
}
@media (hover: hover) { .btn--ghost:hover { background: var(--surface); border-color: var(--ink); } }
/* Вариант на тёмном фоне (hero и другие dark-секции): белый текст и рамка,
   при ховере остаётся белый текст, чтобы не сливался с фоном */
.btn--ghost--dark {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
@media (hover: hover) { .btn--ghost--dark:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
} }

/* text link with arrow */
.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--ink);
  font-size: 15px;
  transition: opacity var(--tr);
}
.link__arrow { transition: transform var(--tr); display: inline-block; }
@media (hover: hover) { .link:hover .link__arrow { transform: translateX(3px); } }
.link--lg { font-size: 16px; gap: 8px; }
.link--xl { font-size: 18px; gap: 10px; }
.link--light { color: #fff; }

/* ---------- HEADER ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  top: 0;
  z-index: 50;
  /* плотный тёмный, но всё равно с лёгким blur для эффекта frosted glass */
  background: rgba(10, 10, 10, .85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background var(--tr), border-color var(--tr), transform .3s ease;
}
/* Авто-скрытие header'а при скролле вниз на мобайле/планшете.
   Класс ставится из JS (см. script.js autoHideHeader). Откат: убрать класс
   из JS или закомментировать этот блок CSS. */
.hdr.hdr--hidden { transform: translateY(-100%); }
.hdr.is-solid {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
}
/* поверх тёмного hero текст шапки белый.
   ВАЖНО: правило применяется и к <a> ссылкам, и к <button> триггеру
   подменю "Услуги" — иначе кнопка наследует серый ink-2 и выглядит
   полупрозрачной/блёклой. */
.hdr:not(.is-solid) .hdr__logo,
.hdr:not(.is-solid) .hdr__phone,
.hdr:not(.is-solid) .hdr__nav a,
.hdr:not(.is-solid) .hdr__nav-trigger { color: #fff; }
.hdr:not(.is-solid) .hdr__logo-mark { color: #fff; }
.hdr:not(.is-solid) .hdr__dot { color: rgba(255,255,255,.5); }
.hdr:not(.is-solid) .hdr__burger { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.hdr:not(.is-solid) .hdr__burger span { background: #fff; }
.hdr__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
}
.hdr__logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--ink);
}
.hdr__logo-mark { color: var(--ink); display: inline-flex; }
.hdr__dot {
  color: var(--ink-3);
  display: inline-block;
  margin: 0 -5px;
}

.hdr__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.hdr__nav > a,
.hdr__nav-trigger {
  transition: color var(--tr);
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (hover: hover) { .hdr__nav > a:hover,
.hdr__nav-trigger:hover { color: var(--ink); } }

/* dropdown: "Услуги ▾" */
.hdr__nav-item { position: relative; }
.hdr__nav-caret { transition: transform var(--tr); opacity: .55; }
@media (hover: hover) { .hdr__nav-item:hover .hdr__nav-caret,
.hdr__nav-item.is-open .hdr__nav-caret { transform: rotate(180deg); opacity: 1; } }

.hdr__sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 340px;
  background: #fff;
  border-radius: var(--r);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .14),
    0 6px 18px rgba(0, 0, 0, .06),
    0 0 0 1px rgba(0, 0, 0, .04);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
  z-index: 60;
}
/* невидимый «мост» сверху чтобы при переходе мыши на меню не закрывалось */
.hdr__sub::before {
  content: '';
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}
@media (hover: hover) { .hdr__nav-item:hover .hdr__sub,
.hdr__nav-item.is-open .hdr__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
} }
.hdr__sub a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--ink) !important;
  transition: background var(--tr);
}
@media (hover: hover) { .hdr__sub a:hover { background: var(--surface-2); } }

/* Иконка-плашка слева от текста: квадрат с лёгким фоном, тонкая иконка */
.hdr__sub-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background var(--tr), color var(--tr);
}
@media (hover: hover) { .hdr__sub a:hover .hdr__sub-icon {
  background: var(--wa);
  color: #fff;
} }

.hdr__sub-text { display: flex; flex-direction: column; min-width: 0; }
.hdr__sub-t {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
.hdr__sub-d {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.35;
  white-space: nowrap;       /* описания всегда в 1 строку — единообразный вид */
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdr__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 1279px) {
  .hdr__right { gap: 10px; }
}
.hdr__phone {
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.005em;
  white-space: nowrap; /* номер +7 (701) 517 8645 не должен ломаться на 3 строки */
}
/* Иконка WhatsApp в header-right на мобайле/планшете — outline стиль,
   аналогично бургеру (border + transparent bg + белая иконка).
   data-wa подставляется per-page (hero, hero-plastic, hero-mesh и т.д.),
   ссылка ставится автоматически через bindWA() из script.js. */
.hdr__wa-icon {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--wa);
  background: rgba(16, 185, 129, .12);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--wa);  /* основной WhatsApp-зелёный, чуть темнее mint'а */
  flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr);
}
.hdr:not(.is-solid) .hdr__wa-icon {
  border-color: var(--wa);
  background: rgba(16, 185, 129, .15);
  color: var(--wa);
}
@media (hover: hover) {
  .hdr__wa-icon:hover {
    background: rgba(16, 185, 129, .25);
    border-color: var(--wa-2);
  }
}
/* Только на мобайле (≤768) — на планшетах остаётся зелёная плашка .btn--wa.btn--sm */
@media (max-width: 768px) {
  .hdr__wa-icon { display: inline-flex; }
}

.hdr__burger {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.hdr__burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--tr), opacity var(--tr);
}
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------- HERO (FULL-SCREEN) ---------- */
.hero--fs {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 1080px;
  overflow: hidden;
  color: #fff;
  background: #0F0F0F;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}
@media (max-width: 768px) {
  .hero__bg { object-position: 60% center; }
  /* На странице "Установка откосов" по центру виден только проём окна,
     а нужный смысловой объект (откос) — в верхне-правой части кадра. */
  .hero__bg[src*="ustanovka-otkosov"] { object-position: right top; }
}

/* плотное симметричное затемнение под центральный текст + низ (верх затемняет .hdr) */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 95% 80% at 50% 55%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 38%, rgba(0,0,0,.25) 75%, rgba(0,0,0,.1) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
}

.hero__layer {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 0 80px;
  text-align: center;
}
.hero__copy {
  max-width: 1320px;
  width: 100%;
}
/* Эйбрау в hero — больший отступ снизу, чтобы заголовок дышал
   и блок с рейтингом+эйбрау визуально оторвался от H1. */
.hero__copy .eyebrow { margin-left: auto; margin-right: auto; margin-bottom: 72px; }
.hero__h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 auto 40px;
  color: #fff;
  font-weight: 600;
}
.hero__h1-main {
  font-size: clamp(34px, 5.8vw, 84px);
  line-height: 1.02;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.hero__h1-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: .04em;
  font-weight: 600;
  /* светлый мятный – лучше светится на&nbsp;тёмном hero */
  color: var(--wa-light);
}
.hero__h1-sub__line {
  display: inline-block;
  width: clamp(32px, 5vw, 72px);
  height: 1.5px;
  background: currentColor;
  opacity: .6;
  flex-shrink: 0;
}
.hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  margin: 0 auto 44px;
  max-width: 920px;
}
.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Доверие-якорь в hero: рейтинг 2GIS.
   Базовое положение — под CTA (margin-top). Модификатор --top переносит
   плашку наверх hero-секции над eyebrow и снимает верхний margin. */
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 8px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition: background var(--tr), border-color var(--tr);
}
@media (hover: hover) { .hero__trust:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
} }
.hero__trust b { color: #fff; font-weight: 600; font-feature-settings: 'tnum'; }
.hero__trust-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--wa);
}
/* Модификатор: рейтинг наверху hero — над eyebrow, без верхнего margin */
.hero__trust--top { margin-top: 0; margin-bottom: 20px; }

/* ---------- STRIP STATS (плавающая карточка с наложением на hero) ---------- */
.strip-sec {
  position: relative;
  z-index: 5;
  margin-top: -56px;
  padding: 0 0 8px;
  background: transparent;
}
.strip-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .18),
    0 6px 16px rgba(0, 0, 0, .06),
    0 0 0 1px rgba(0, 0, 0, .03);
  padding: 32px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--border);
}
.strip__item:last-child { border-right: none; }
.strip__item b {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: 4px;
  font-feature-settings: 'tnum';
}
.strip__item span {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* ---------- PLACEHOLDERS ---------- */
.ph {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  text-align: center;
  padding: 16px;
  overflow: hidden;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 14px,
      rgba(0,0,0,.025) 14px,
      rgba(0,0,0,.025) 15px);
  z-index: 0;
}
.ph > * { position: relative; z-index: 1; }
.ph__t {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -.01em;
  font-feature-settings: 'tnum';
}
.ph__d {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  max-width: 240px;
  line-height: 1.4;
}
.ph__tag {
  position: absolute;
  top: 14px; left: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 2;
}
.ph__tag--on { background: var(--ink); color: #fff; }

.ph--hero { aspect-ratio: 720 / 880; min-height: 480px; }
.ph--srv { aspect-ratio: 4 / 3; border-radius: var(--r) var(--r) 0 0; }
/* плейсхолдер фото для крупных плиток-направлений (5 шт.) */
.ph--dir { width: 100%; height: 100%; border-radius: 0; min-height: 220px; }

/* Реальное фото услуги внутри .srv__media */
.srv__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-2);
}

/* Фото договора в&nbsp;блоке гарантии */
.guar__img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  background: #1A1A1A;
  margin: 0 auto;
}
.ph--portrait { aspect-ratio: 4 / 5; border-radius: var(--r) var(--r) 0 0; }
.ph--case { aspect-ratio: 4 / 3; border-radius: 0; }
.ph--doc { aspect-ratio: 4 / 5; min-height: 480px; background: #1A1A1A; }
.ph--doc::before {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) 14px,
      rgba(255,255,255,.025) 14px,
      rgba(255,255,255,.025) 15px);
}
.ph--doc .ph__t { color: rgba(255,255,255,.7); }
.ph--doc .ph__d { color: rgba(255,255,255,.4); }
.ph--map { aspect-ratio: 720 / 520; min-height: 360px; }

/* ---------- SERVICES ---------- */
.sec--services { padding-top: 80px; }
.srv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.srv {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--tr), transform var(--tr);
}
@media (hover: hover) { .srv:hover { border-color: var(--ink); transform: translateY(-2px); } }
.srv__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* медиа-контейнер: фото + затемнение + бейдж цены */
.srv__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r) var(--r) 0 0;
}
.srv__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.0) 30%,
    rgba(0,0,0,.0) 50%,
    rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.srv__price {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  padding: 6px 12px;
  background: rgba(10, 10, 10, .5);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

/* время – маленьким лейблом над заголовком */
.srv__time {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-feature-settings: 'tnum';
}
.srv__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 10px;
}
.srv__desc {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}
.srv__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: gap var(--tr);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
@media (hover: hover) { .srv__link:hover { gap: 10px; } }

.srv-bottom {
  margin-top: 56px;
  padding: 40px 48px;
  background: var(--surface);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.srv-bottom__t {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.srv-bottom p { color: var(--ink-2); font-size: 15.5px; }

/* ====================================================================
   SAFE-VISION-STYLE: «вложенность секций» через крупные скругления верха
   секции, который "затягивается" под предыдущую секцию. Применяем к
   секциям, у которых фон отличается от предыдущей (тёмное↔светлое).
   ==================================================================== */
.sec--cap-top {
  position: relative;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  margin-top: -80px;
  z-index: 2;
  padding-top: 200px;  /* 120 + 80 компенсация смещения */
}

/* Секция, ИДУЩАЯ ПЕРЕД cap-top секцией, получает доп. отступ снизу —
   иначе контент прижимается к скруглению тёмной плашки. */
.sec:has(+ .sec--cap-top) {
  padding-bottom: 200px;
}
@media (max-width: 1100px) {
  .sec:has(+ .sec--cap-top) { padding-bottom: 160px; }
}
@media (max-width: 768px) {
  .sec:has(+ .sec--cap-top) { padding-bottom: 120px; }
}
/* Для футера паддинг другой, корректируем */
.ft.sec--cap-top {
  padding-top: 160px;  /* 80 + 80 */
  margin-top: -80px;
}

@media (max-width: 1100px) {
  .sec--cap-top { padding-top: 156px; border-radius: 60px 60px 0 0; margin-top: -60px; }
  .ft.sec--cap-top { padding-top: 128px; margin-top: -60px; }
}
@media (max-width: 768px) {
  .sec--cap-top { padding-top: 112px; border-radius: 40px 40px 0 0; margin-top: -40px; }
  .ft.sec--cap-top { padding-top: 96px; margin-top: -40px; }
}

/* ---------- DIRS: 5 направлений ремонта (главная витрина) ---------- */
.sec--dirs { padding-top: 120px; }
.dirs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* 6 одинаковых плиток: 3 в ряд × 2 ряда. Все одного размера, без span. */

.dir {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
  color: var(--ink);
}
@media (hover: hover) { .dir:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
} }
.dir__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.dir__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
@media (hover: hover) { .dir:hover .dir__img { transform: scale(1.04); } }
.dir__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.dir__price {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  padding: 7px 14px;
  background: rgba(255,255,255,.96);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  letter-spacing: -.005em;
}
.dir__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 7px 12px;
  background: var(--wa);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  max-width: calc(100% - 32px);
  line-height: 1.3;
}
.dir__body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.dir__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.dir__desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 18px;
  flex-grow: 1;
}
.dir__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 16px;
  border-top: 1px solid var(--border);
  transition: gap var(--tr);
}
@media (hover: hover) { .dir:hover .dir__cta { gap: 10px; } }

/* ---------- PRICELIST: компактный прайс на главной ---------- */
.sec--pricelist {
  padding-top: 0;  /* идёт сразу после .sec--dirs */
}
.pricelist {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pricelist__row {
  display: grid;
  grid-template-columns: 1fr 140px 200px;
  align-items: center;
  gap: 24px;
  padding: 20px 8px;
  border-bottom: 1px solid var(--border);
  transition: background var(--tr);
}
.pricelist__row:last-child { border-bottom: none; }
@media (hover: hover) { .pricelist__row:hover { background: var(--surface); } }
.pricelist__name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
}
.pricelist__time {
  font-size: 13px;
  color: var(--ink-3);
  font-feature-settings: 'tnum';
  letter-spacing: .02em;
}
.pricelist__price {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-feature-settings: 'tnum';
  letter-spacing: -.01em;
  white-space: nowrap;
}
.pricelist__row--free .pricelist__price { color: var(--wa-2); }
.pricelist__note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
}
.pricelist__note a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-4);
  transition: border-color var(--tr);
}
@media (hover: hover) { .pricelist__note a:hover { border-color: var(--ink); } }

/* ---------- TEAM: 4 карточки на главной (вместо 3) ---------- */
.team--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------- STAGES ---------- */
.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.stage {
  padding: 0;
}
.stage__n {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-3);
  padding-bottom: 24px;
  border-top: 1.5px solid var(--ink);
  padding-top: 24px;
  margin-bottom: 4px;
  font-feature-settings: 'tnum';
}
.stage__t {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: 12px;
  /* Держим заголовок одной строкой. Самый длинный — "Фиксируем цену в договоре".
     При gap=36px и .wrap=1280px колонка ~290px, шрифт 21px умещается впритык. */
  white-space: nowrap;
}
.stage p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---------- GUARANTEE ---------- */
.sec--guar {
  background: var(--dark);
  color: #fff;
}
.guar {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.guar .sec__h { color: #fff; }
.guar__lead {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  margin: 28px 0 36px;
  max-width: 520px;
}
.guar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 24px 0;
}
.guar__cell {
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.guar__cell:last-child { border-right: none; }
.guar__cell:first-child { padding-left: 0; }
.guar__cell dt {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 4px;
  font-feature-settings: 'tnum';
}
.guar__cell dd {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
  margin: 0;
}
.guar__fine {
  font-size: 14.5px;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
  max-width: 520px;
}

/* ---------- WHY ---------- */
.why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.why__item {
  padding: 36px 32px 36px 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.why__item:nth-child(3n) { border-right: none; padding-right: 0; }
.why__item:nth-child(3n+1) { padding-left: 0; }
.why__item:nth-child(n+4) { padding-top: 36px; }
.why__t {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.why__item:not(:nth-child(3n+1)) { padding-left: 32px; }
.why__item p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Зелёная полоса .t6-bar — визуальное закрытие секции. Убираем
   нижний padding у .sec--team, чтобы полоса вплотную примыкала к
   следующей секции (тёмной плашке .sec--mvid). */
.sec--team { padding-bottom: 0; }

/* ===== ВАРИАНТ F — Гибрид: серые карточки стыкуются с общей зелёной
   полосой без зазора. Карточки скруглены только сверху, нижние углы
   прямые. Полоса перекрывает 1px нижнего края карточек чтобы исключить
   subpixel-щели ("лесенки/мерцания") на стыке. */
.team-v6 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.t6-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.t6-card {
  background: var(--surface);
  /* скругление ТОЛЬКО верхних углов — нижний край прямой, стыкуется с полосой */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.t6-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Зелёная полоса full-bleed. margin-top: -1px — перекрывает нижний пиксель
   карточек, убирает subpixel-зазор. z-index выше карточек чтобы перекрытие
   рендерилось поверх. */
.t6-bar {
  margin-top: -1px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--wa);
  color: #fff;
}
.t6-bar::before,
.t6-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  background: var(--wa);
}
.t6-bar::before { right: 100%; }
.t6-bar::after  { left: 100%; }

.t6-person {
  position: relative;
  padding: 22px 18px 24px;
  text-align: center;
}
/* Маленькая вертикальная палочка-разделитель ТОЛЬКО между ячейками
   (не у самого левого края). Высота 36px — короче плашки, по центру. */
.t6-person + .t6-person::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 1px;
  background: rgba(255, 255, 255, .35);
}
.t6-person__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.t6-person__role {
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .005em;
}

/* Responsive ----- Парная структура card+person на мобайле/планшете -----
   На десктопе все 4 фото в ряд + полоса с 4 именами под ними (full-bleed).
   На планшете и мобайле — каждая фотография имеет СВОЁ имя прямо под ней,
   образуя 4 отдельных мини-карточки.
   Используем display: contents на .t6-cards/.t6-bar — их дети становятся
   прямыми детьми .team-v6 и могут позиционироваться в общей grid. */

@media (max-width: 1100px) {
  /* На десктопе нижний padding убран ради full-bleed зелёной ленты.
     На мобайле — лента не нужна, возвращаем нормальный padding. */
  .sec--team { padding-bottom: 96px; }
  /* Сетка 2×2: пара card+person сверху-снизу, две пары горизонтально, две пары
     по вертикали. grid-template-rows фиксирует gap 28px МЕЖДУ парами (row 3),
     но row-gap: 0 везде — card и person в одной паре вплотную. */
  .team-v6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 28px auto auto;
    column-gap: 14px;
    row-gap: 0;
  }
  .t6-cards, .t6-bar {
    display: contents;
  }
  /* Полоса фона .t6-bar full-bleed на десктопе — на мобайле/планшете не нужна. */
  .t6-bar::before,
  .t6-bar::after { display: none; }
  /* Фото — вертикальные, видна голова + плечи + грудь (object-position наследуется). */
  .t6-card {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
  }
  /* Person — зелёный footer той же ширины что card, скруглён снизу. */
  .t6-person {
    background: var(--wa);
    color: #fff;
    padding: 14px 12px 16px;
    text-align: center;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    margin-top: 0;
  }
  .t6-person + .t6-person::before { display: none; }
  /* Парная посадка через явный grid-row/column для каждого элемента */
  .t6-card:nth-child(1)   { grid-row: 1; grid-column: 1; }
  .t6-person:nth-child(1) { grid-row: 2; grid-column: 1; }
  .t6-card:nth-child(2)   { grid-row: 1; grid-column: 2; }
  .t6-person:nth-child(2) { grid-row: 2; grid-column: 2; }
  .t6-card:nth-child(3)   { grid-row: 4; grid-column: 1; }
  .t6-person:nth-child(3) { grid-row: 5; grid-column: 1; }
  .t6-card:nth-child(4)   { grid-row: 4; grid-column: 2; }
  .t6-person:nth-child(4) { grid-row: 5; grid-column: 2; }
  .t6-person__name { font-size: 14.5px; margin-bottom: 3px; }
  .t6-person__role { font-size: 12px; }
}

@media (max-width: 479px) {
  /* На узких телефонах — те же 2×2, но компактнее шрифты + меньше column-gap */
  .team-v6 { column-gap: 10px; grid-template-rows: auto auto 20px auto auto; }
  .t6-person { padding: 12px 8px 14px; }
  .t6-person__name { font-size: 13.5px; }
  .t6-person__role { font-size: 11.5px; }
}

/* ---------- CASES (галерея реальных работ) ---------- */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
  display: flex;
  flex-direction: column;
}

/* Видимость карточек: первые N показаны, остальные скрыты до .is-expanded.
   Десктоп (>1100): первые 9 видны, 10-24 скрыты.
   Tablet/Mobile – см. media queries ниже. */
.cases:not(.is-expanded) > .case:nth-child(n+10) { display: none; }
.cases.is-expanded > .case:nth-child(n+10) { animation: caseFadeIn .35s ease both; }

@keyframes caseFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) { .case:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
} }
.case__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}
.case__b {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.case__b h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.case__b p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 16px;
  flex-grow: 1;
}
.case__m {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.case__m b {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

/* кнопка "Показать ещё" */
.cases__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.cases__more .btn {
  padding: 16px 32px;
  font-size: 15.5px;
}
.cases__more .link__arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--tr);
}
.cases.is-expanded ~ .cases__more .link__arrow { transform: rotate(180deg); }

/* ---------- REVIEWS ---------- */
.rate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.rate__stars { display: inline-flex; gap: 2px; color: var(--star); }
.rate__stars svg { width: 18px; height: 18px; }
.rate b { color: var(--ink); font-weight: 600; font-feature-settings: 'tnum'; }

/* ============================================================
   REVIEWS – тёмная секция + edge-to-edge бесконечная карусель.
   Стиль: safevision.kz – тёмный фон, белые карточки с тенью,
   карточки уходят за края viewport.
   ============================================================ */
.sec--reviews {
  background: var(--dark);
  color: #fff;
  /* отступы скорректированы под edge-to-edge viewport */
  padding-bottom: 96px;
}
.sec--reviews .sec__h { color: #fff; }
.sec--reviews .rate { color: rgba(255,255,255,.7); }
.sec--reviews .rate b { color: #fff; }

/* Header: заголовок слева, кнопки навигации справа */
.sec__head--reviews {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  max-width: 100%;
  margin-bottom: 56px;
}
.rev-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.rev-nav__btn {
  width: 52px; height: 52px;
  border-radius: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
@media (hover: hover) { .rev-nav__btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); } }
.rev-nav__btn:active { transform: scale(.94); }

/* Edge-to-edge viewport: занимает всю ширину экрана, перекрывает .wrap */
/* Viewport — нативный horizontal scroll с CSS scroll-snap.
   Mandatory snap означает: после остановки скролла позиция всегда выровняется
   на ближайшую карточку. Inertia (быстрый свайп → много карточек) работает
   нативно через браузер. Никакого pointer-handler'a больше нет. */
.reviews-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  padding-right: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  padding-top: 8px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
  scrollbar-width: none;              /* Firefox */
  scroll-behavior: auto;              /* smooth контролируется JS-кнопками */
  overscroll-behavior-x: contain;     /* не дёргает страницу при достижении края loop */
}
.reviews-viewport::-webkit-scrollbar { display: none; }

/* Сцена с карточками — простой flex, без transform. */
.reviews-stage {
  display: flex;
  gap: 20px;
}

/* Карточка отзыва — фиксированной ширины (важно для loop).
   ВАЖНО: секция .sec--reviews ТЁМНАЯ (var(--dark) = #0F0F0F).
   Карточки тоже тёмные, но чуть светлее фона — мягкое разделение
   через увеличение освещённости, а не контраст (как у safevision). */
.rev {
  flex: 0 0 380px;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg);
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  color: #fff;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
@media (hover: hover) { .rev:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
} }
.rev__hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.rev__av {
  width: 48px; height: 48px;
  border-radius: 100%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  flex-shrink: 0;
  letter-spacing: -.01em;
  overflow: hidden;
}
.rev__av--photo { background: transparent; border-color: transparent; }
.rev__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.rev__meta { min-width: 0; flex-grow: 1; }
.rev__name {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: #fff;
}
.rev__date {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
  margin-top: 3px;
  font-feature-settings: 'tnum';
}
.rev__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);  /* --star = --wa (зелёный) */
  margin-bottom: 14px;
}
.rev__stars svg { width: 16px; height: 16px; }
.rev__txt {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.rev-plat {
  margin-top: 40px;
  text-align: left;
  font-size: 14px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.rev-plat > span { margin-right: 4px; }
.rev-plat a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
  background: #fff;
  transition: border-color var(--tr), background var(--tr);
}
.rev-plat a svg { color: var(--wa); }
@media (hover: hover) { .rev-plat a:hover { border-color: var(--ink); background: var(--surface); } }

/* ============================================================
   MASTER VIDEO – секция "Так выглядит наша работа изнутри"
   Стиль: 2 колонки, видео-плеер (9:16, как телефон) слева,
   текст с буллетами и CTA справа. На мобайле stack.
   Видео через facade pattern: до клика – постер, после клика
   загружается реальный <video> (экономия 16 MB трафика).
   ============================================================ */
/* Секция "Так выглядит наша работа изнутри" — на тёмной подложке
   (того же тона, что и .sec--reviews), сразу после зелёной полосы команды.
   Цвета текста инвертированы под тёмный фон. */
.sec--mvid {
  background: var(--dark);
  color: #fff;
  padding-top: 120px;
  padding-bottom: 120px;
}
.sec--mvid .sec__h { color: #fff; }
.sec--mvid .sec__sub { color: rgba(255, 255, 255, .65); }
.sec--mvid .mvid__title { color: rgba(255, 255, 255, .5); }
.sec--mvid .mvid__steps li { color: rgba(255, 255, 255, .8); }
.sec--mvid .mvid__steps li b { color: #fff; }
.sec--mvid .mvid__author {
  background: rgba(255, 255, 255, .06);
}
.sec--mvid .mvid__author-av {
  background: var(--wa);
  color: #fff;
  overflow: hidden;
}
.sec--mvid .mvid__author-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.sec--mvid .mvid__author-name { color: #fff; }
.sec--mvid .mvid__author-role { color: rgba(255, 255, 255, .65); }

.mvid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: center;
}

/* ============================================================
   PLAYER: вертикальный 9:16 как телефон.
   КОРНЕВАЯ АРХИТЕКТУРА:
   - overflow:hidden на родителе — обрезает blur/scale, нативные controls
     и любые overlay'и СТРОГО в границах радиуса. Без него blur вылезал.
   - НЕТ background на родителе — без этого чёрный фон родителя
     не "просвечивает" сквозь субпиксельное скругление и НЕТ лесенки
     (это была корневая причина артефакта в прошлой итерации).
   - Радиус дублируется на видео — на случай если overflow:hidden
     некорректно обрезает GPU-композиционный слой video на старых браузерах.
   ============================================================ */
/* Унифицированный радиус для всех элементов вокруг видео — даёт визуальный
   язык секции: плеер, автор-плашка и кнопка CTA выглядят согласованно. */
.mvid__player,
.mvid__author,
.mvid__cta-btn {
  --mvid-radius: 24px;
}

.mvid__player {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  border-radius: var(--mvid-radius);
  overflow: hidden;
  isolation: isolate;  /* свой stacking context для overlay */
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .14),
    0 4px 12px rgba(0, 0, 0, .06);
}
.mvid__poster,
.mvid__player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mvid__poster {
  cursor: pointer;
}

/* "Стеклянный" frosted-glass overlay поверх постера.
   backdrop-filter применяется внутри границ overlay и обрезается
   родительским overflow:hidden + border-radius. НЕ выходит за рамки.
   Лёгкое размытие: видно мастера, окно, фон — но детали мягко стёрты. */
.mvid__glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(5px) saturate(115%);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  /* Очень лёгкая прохладная тонировка для ощущения стекла */
  background: rgba(20, 24, 32, .06);
  /* Тонкая inset-обводка — премиум glass-эффект */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .08);
}

/* Play-кнопка. Треугольник центрирован геометрией SVG, без translateX.
   z-index выше glass-overlay чтобы быть кликабельной поверх. */
.mvid__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 100%;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(0, 0, 0, .04),
    inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: background var(--tr), color var(--tr), transform var(--tr);
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.mvid__play svg { color: inherit; }
@media (hover: hover) { .mvid__play:hover {
  background: var(--wa);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.05);
} }
.mvid__play:active {
  transform: translate(-50%, -50%) scale(.96);
}
@media (hover: hover) { .mvid__player:hover .mvid__play {
  background: var(--wa);
  color: #fff;
} }

/* Длительность видео – badge снизу-справа на постере */
.mvid__duration {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  padding: 5px 10px;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: 6px;
  font-feature-settings: 'tnum';
  pointer-events: none;
}
/* "Без монтажа" – badge сверху-слева */
.mvid__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 12px;
  background: var(--wa);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  pointer-events: none;
}

/* Когда видео реально играет — прячем все элементы facade. Video element
   занимает всю площадь .mvid__player через position:absolute. Нативные
   controls свободны от наших click-обработчиков (см. script.js). */
.mvid__player.is-playing .mvid__play,
.mvid__player.is-playing .mvid__poster,
.mvid__player.is-playing .mvid__glass,
.mvid__player.is-playing .mvid__badge,
.mvid__player.is-playing .mvid__duration { display: none; }

.mvid__player video {
  position: absolute;
  inset: 0;
  background: #0F0F0F;
}

/* Info справа */
.mvid__info {
  display: flex;
  flex-direction: column;
}
.mvid__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.mvid__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mvid__steps li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  position: relative;
  padding-left: 24px;
}
.mvid__steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--wa);
}
.mvid__steps li b {
  color: var(--ink);
  font-weight: 600;
}

/* Автор-плашка — компактная, единый радиус с плеером */
.mvid__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 16px 18px;
  background: var(--surface);
  border-radius: var(--mvid-radius);
  margin-bottom: 16px;
  align-self: flex-start;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
}
.mvid__author-av {
  width: 52px;
  height: 52px;
  border-radius: 100%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}
.mvid__author-info { min-width: 0; }
.mvid__author-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.mvid__author-role {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* CTA-блок: кнопка той же ширины что и плашка автора (440px max).
   Радиус кнопки оставляем pill (от .btn) — это базовый паттерн всех
   кнопок сайта. Если задать тот же 24px, нарушим консистентность. */
.mvid__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mvid__cta-btn {
  width: 100%;
  max-width: 440px;
  justify-content: center;
  letter-spacing: .04em;
  font-weight: 600;
}

/* Вариант .rev-plat внутри тёмной секции отзывов */
.rev-plat--dark { color: rgba(255,255,255,.55); margin-top: 48px; }
.rev-plat--dark a {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
@media (hover: hover) { .rev-plat--dark a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); } }

/* ---------- COVERAGE ---------- */
.cov {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
}
.cov__list h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 24px 0 12px;
}
.cov__list h3:first-child { margin-top: 0; }
.cov__list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cov__list li {
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 10px;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: border-color var(--tr);
}
@media (hover: hover) { .cov__list li:hover { border-color: var(--border-2); } }
.cov__mkr {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- PROMO ---------- */
.sec--promo { padding: 120px 0; }
.promo {
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 80px 64px;
  text-align: left;
  max-width: 100%;
  position: relative;
}

/* QR-код в правом верхнем углу блока акции. Ведёт на /go/promo (с подсчётом сканов).
   Белая подложка под код — обязательна для надёжного сканирования. */
.promo__qr {
  position: absolute;
  top: 48px;
  right: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  background: #fff;
  border-radius: var(--r);
  text-decoration: none;
}
.promo__qr img {
  display: block;
  width: 220px;
  height: 220px;
}
.promo__qr-cap {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.promo .eyebrow { margin-bottom: 20px; }
.promo__h {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 20px;
  max-width: 760px;
}
/* Зелёный бейдж с датой акции. margin-left: -64px вытягивает его
   к левому краю .promo, при этом padding-left: 64px возвращает
   текст в зону контента — чтобы "до X мая" встало на одну вертикаль
   с заголовком. Скругление — только справа: бейдж заходит за
   стенку тёмного блока без визуального отрыва. */
.promo__badge {
  display: inline-block;
  margin-left: -64px;
  margin-bottom: 32px;
  padding: 12px 28px 12px 64px;
  background: var(--wa);
  color: #fff;
  border-radius: 0 999px 999px 0;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  /* Гарантия: текст всегда одной строкой, даже для самого длинного
     варианта "до 30 сентября" (14 симв.) при любом размере экрана. */
  white-space: nowrap;
}
.promo__sub {
  font-size: 17px;
  color: rgba(255,255,255,.6);
  margin-bottom: 48px;
  max-width: 560px;
  line-height: 1.55;
}
/* Промо-строка: счётчик + кнопка в одну линию с воздухом между.
   На мобайле — переносится. */
.promo__row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.cd {
  display: inline-flex;
  gap: 8px;
  margin: 0;
}
.cd__c {
  background: rgba(255,255,255,.08);
  border-radius: var(--r);
  padding: 18px 22px;
  min-width: 96px;
  text-align: center;
}
.cd__c b {
  display: block;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  font-feature-settings: 'tnum';
  margin-bottom: 4px;
}
.cd__c span {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* CTA-кнопка промо: зеркало бейджа — приклеена к правой стенке тёмного
   блока (margin-right компенсирует padding-right .promo), скруглена
   ТОЛЬКО слева тем же радиусом, что и блоки счётчика (var(--r)),
   по высоте растягивается на всю строку счётчика. */
.promo__cta {
  margin-left: auto;
  margin-right: -64px;
  align-self: stretch;
  padding: 0 56px 0 36px;
  border-radius: var(--r) 0 0 var(--r);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
  gap: 14px;
}
.promo__cta svg { width: 28px; height: 28px; }

/* ============================================================
   КОМПОНЕНТЫ ПОДСТРАНИЦ (используются на /uslugi/*)
   - .hero--service — компактный hero для страницы услуги
   - .crumbs        — хлебные крошки сверху страницы
   - .probs/.prob   — «Что чиним» сетка проблем
   - .related/.related-card — карточки смежных услуг
   ============================================================ */

/* ---------- HERO ПОДСТРАНИЦЫ — full-screen с тёмно-зелёным градиентом ----------
   Размеры — 1-в-1 с .hero--fs на главной (height: 100vh, min-height: 640px),
   но фон не фото, а тёмный градиент с зелёным свечением.
   Используется на /uslugi/* пока не подложены реальные фотографии. */
.hero--service {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 1080px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 110% 80% at 50% 45%, rgba(16, 185, 129, .22) 0%, rgba(15, 15, 15, 0) 55%),
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(16, 185, 129, .10) 0%, rgba(15, 15, 15, 0) 65%),
    linear-gradient(180deg, #0a0a0a 0%, #161616 45%, #0F0F0F 100%);
}
/* Длинные H1 услуг ("Ремонт пластиковых окон в Алматы" — 33 символа)
   не должны переноситься no-wrap'ом как на главной. */
.hero--service .hero__h1-main {
  white-space: normal;
  font-size: clamp(30px, 5.4vw, 76px);
}

/* ---------- «ЧТО ЧИНИМ» — повторяет .srv-grid с главной, но контекстный ----------
   Используются те же классы (.srv-grid, .srv, .srv__media, .srv__img, .srv__title,
   .srv__desc, .srv__link), чтобы вёрстка/адаптив совпадали с услугами главной. */

/* ---------- СМЕЖНЫЕ УСЛУГИ — повторяют .dirs с главной ----------
   Не нужно нового компонента — .dir карточка с фото+ценой+CTA уже идеально подходит.
   Используется на каждой подстранице с 6 карточками (5 других услуг + «Все виды окон»). */

/* ---------- ПРЕВЬЮ-ПЛЕЙСХОЛДЕР для будущих фото проблем ----------
   Когда нет реальной фотографии (например для "Что чиним" на подстранице услуги),
   используется .srv__media с этим классом-модификатором — тёмная плашка с иконкой,
   которая визуально читается как "тут будет фото" без edge-case-уродства. */
.srv__media--placeholder {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(16, 185, 129, .10) 0%, rgba(15, 15, 15, 0) 70%),
    linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 60%, #1f1f1f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
}
.srv__media--placeholder .srv__img {
  display: none;
}
.srv__media--placeholder svg {
  width: 72px;
  height: 72px;
  opacity: .85;
}

/* ============================================================
   СТРАНИЦА «Установка откосов» — спец-блоки
   ============================================================ */

/* ---------- «Чистый монтаж за 2–3 часа» — 3 шага ---------- */
.clean-mount {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.clean-mount__copy h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.clean-mount__copy h2 b { color: var(--wa); font-weight: 600; }
.clean-mount__lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.clean-mount__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clean-mount__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.clean-mount__step-n {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wa);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
}
.clean-mount__step-t {
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.clean-mount__step-d {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
/* Правая сторона — фото */
.clean-mount__media {
  border-radius: var(--r);
  background: #161616;
  padding: 8px;
  align-self: start;
}
.clean-mount__media img {
  width: 100%; height: auto; display: block; border-radius: calc(var(--r) - 6px);
}

@media (max-width: 900px) {
  /* На мобайле/планшете: 1 колонка, порядок eyebrow → h2 → lead → MEDIA → steps.
     Используем display: contents на copy чтобы дети попали в общую grid clean-mount,
     где media-блок вставлен между lead и steps через явный grid-row. */
  .clean-mount {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 0;
    align-items: stretch;
  }
  .clean-mount__copy { display: contents; }
  .clean-mount__copy > .eyebrow      { grid-row: 1; margin-bottom: 14px; }
  .clean-mount__copy > h2            { grid-row: 2; margin-bottom: 16px; }
  .clean-mount__copy > .clean-mount__lead { grid-row: 3; margin-bottom: 24px; }
  .clean-mount__media                { grid-row: 4; margin-bottom: 28px; }
  .clean-mount__copy > .clean-mount__steps { grid-row: 5; }
}

/* ---------- «С чем работаем» — бренды/материалы ---------- */
.brands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.brand {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color var(--tr), transform var(--tr);
}
@media (hover: hover) { .brand:hover { border-color: var(--ink); transform: translateY(-2px); } }
.brand__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.brand__icon svg { width: 22px; height: 22px; }
.brand__t {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.brand__d {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .brands { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .brands { grid-template-columns: 1fr; }
}

/* ---------- Прайс по типу окна (компактные карточки) ---------- */
.win-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.win-type {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  text-align: left;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
@media (hover: hover) { .win-type:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .06);
} }
.win-type__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 14px;
  color: var(--ink);
}
.win-type__icon svg { width: 26px; height: 26px; }
.win-type__t {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.win-type__size {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.win-type__price {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  font-feature-settings: 'tnum';
}
.win-type__price-note {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .win-types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .win-types { grid-template-columns: 1fr; }
}

/* ---------- Цветные ламинированные откосы ---------- */
.colors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.color {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--tr), transform var(--tr);
}
@media (hover: hover) { .color:hover { border-color: var(--ink); transform: translateY(-3px); } }
.color__swatch {
  aspect-ratio: 1/1;
  display: block;
}
.color__swatch--white { background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%); border-bottom: 1px solid var(--border); }
.color__swatch--oak { background: linear-gradient(135deg, #c9a062 0%, #a37e4a 100%); }
.color__swatch--walnut { background: linear-gradient(135deg, #6a4322 0%, #4a2d18 100%); }
.color__swatch--anthracite { background: linear-gradient(135deg, #3a3a3a 0%, #1f1f1f 100%); }
.color__swatch--wenge { background: linear-gradient(135deg, #2d1d18 0%, #1a0f0a 100%); }
.color__name {
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
}

@media (max-width: 900px) {
  .colors { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .colors { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- «Переделаем после плохой бригады» — белая карточка-разделитель ---------- */
.redo {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 48px;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.redo__copy { position: relative; }
.redo__eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wa);
  margin-bottom: 12px;
}
.redo__h {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--ink);
}
.redo__lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 22px;
}
/* Правая колонка — фото + чек-лист */
.redo__right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Правое медиа — фото «до / после» */
.redo__media {
  border-radius: var(--r);
  background: #161616;
  padding: 8px;
}
.redo__media img { width: 100%; height: auto; display: block; border-radius: calc(var(--r) - 6px); }
/* Чек-лист как карточка под фото */
.redo__checklist {
  background: #f6f7f8;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 22px;
}
.redo__checklist-t {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.redo__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}
.redo__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
}
.redo__list li::before {
  content: '✓';
  color: var(--wa);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  /* На мобайле/планшете перестраиваем порядок:
     1) Заголовок (h2)
     2) Описание (lead)
     3) Картинка (media)
     4) "Что входит в переделку" (checklist)
     5) Кнопка "Прислать фото проблемы" (cta)
     Делается через display: contents — дети copy/right попадают в общий grid .redo,
     где каждому элементу присвоен явный grid-row. Eyebrow на мобайле скрыт. */
  .redo {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 0;
    align-items: stretch;
  }
  .redo__copy, .redo__right { display: contents; }
  .redo__copy > .redo__h        { grid-row: 1; margin-bottom: 18px; }
  .redo__copy > .redo__lead     { grid-row: 2; margin-bottom: 24px; }
  .redo__right > .redo__media   { grid-row: 3; margin-bottom: 18px; }
  .redo__right > .redo__checklist { grid-row: 4; margin-bottom: 24px; }
  .redo__copy > .btn            { grid-row: 5; align-self: stretch; justify-self: stretch; width: 100%; }
}
@media (max-width: 479px) {
  .redo { padding: 24px 20px; }
}

/* "Наши мастера" — заголовок на 2 строки на мобайле/планшете */
@media (max-width: 768px) {
  .sec--team .sec__h .br-m,
  .sec--team .sec__h br.br-m { display: inline; }
}

/* ============================================================
   СТРАНИЦА «Москитные сетки» — спец-блоки
   ============================================================ */

/* ---------- БЛОК "АНТИКОШКА" (главная фишка страницы сеток) ---------- */
.antikoshka {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  color: #fff;
}
.antikoshka__media {
  position: relative;
  min-height: 540px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(16, 185, 129, .18) 0%, rgba(15, 15, 15, 0) 60%),
    linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 60%, #1f1f1f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .35);
  font-size: 14px;
  text-align: center;
  padding: 32px;
}
.antikoshka__media-note {
  max-width: 240px;
  line-height: 1.5;
}
.antikoshka__media-note b { display: block; color: rgba(255, 255, 255, .65); font-size: 16px; margin-bottom: 8px; }
/* Если есть реальное фото (кот на антикошке) — заполняет всё пространство */
.antikoshka__media--photo {
  padding: 0;
  background: #000;
}
.antikoshka__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.antikoshka__copy {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.antikoshka__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wa);
  margin-bottom: 16px;
}
.antikoshka__h {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.antikoshka__lead {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 28px;
}
.antikoshka__levels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.antikoshka__level {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.antikoshka__level:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.antikoshka__level-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, .15);
  color: var(--wa);
  border-radius: 8px;
}
.antikoshka__level-icon svg { width: 18px; height: 18px; }
.antikoshka__level-t {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}
.antikoshka__level-d {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .65);
}
.antikoshka__cta {
  display: inline-flex;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .antikoshka { grid-template-columns: 1fr; }
  .antikoshka__media { min-height: 340px; }
  .antikoshka__copy { padding: 36px 28px; }
}
@media (max-width: 480px) {
  .antikoshka__media { min-height: 260px; }
  .antikoshka__copy { padding: 28px 20px; }
}

/* ---------- КАЛЬКУЛЯТОР МОСКИТНЫХ СЕТОК ---------- */
.calc-wrap {
  background: var(--bg);
  padding: 0;
}
/* Зелёная "карточка" калькулятора на белом фоне секции */
.calc {
  background: linear-gradient(135deg, var(--wa) 0%, var(--wa-2) 100%);
  border-radius: var(--r-lg);
  padding: 48px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.calc::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.calc__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  position: relative;
}
.calc__head-l { flex: 1; min-width: 260px; }
.calc__eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 12px;
}
.calc__h {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 6px;
  color: #fff;
}
.calc__sub {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.4;
}
/* Шкала прогресса 1/4 */
.calc__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
  position: relative;
}
.calc__progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
  transition: background var(--tr);
}
.calc__progress-step.is-active,
.calc__progress-step.is-done {
  background: #fff;
}
.calc__step-label {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 14px;
  position: relative;
}
.calc__step-label b { color: #fff; font-weight: 600; }
/* Контент шага */
.calc__step {
  display: none;
  position: relative;
}
.calc__step.is-active { display: block; }
.calc__step-h {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
  color: #fff;
}
/* Шаг 1: типы сеток */
.calc-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.calc-type {
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: 18px 16px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (hover: hover) { .calc-type:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); } }
.calc-type.is-selected {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.calc-type__t { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.calc-type__p { font-size: 12.5px; opacity: .8; line-height: 1.3; }
.calc-type.is-selected .calc-type__p { color: var(--ink-2); opacity: 1; }
/* Шаг 2: размеры — пресеты + ручной ввод */
.calc-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.calc-size {
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: 14px 12px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  transition: background var(--tr), border-color var(--tr);
}
@media (hover: hover) { .calc-size:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); } }
.calc-size.is-selected { background: #fff; color: var(--ink); border-color: #fff; }
.calc-size__t { font-weight: 600; font-size: 15px; }
.calc-size__p { font-size: 11.5px; opacity: .7; margin-top: 2px; }
.calc-size.is-selected .calc-size__p { color: var(--ink-2); opacity: 1; }
.calc-custom {
  background: rgba(255, 255, 255, .1);
  border: 1.5px dashed rgba(255, 255, 255, .3);
  border-radius: var(--r);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.calc-custom__t {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.calc-custom__input {
  background: rgba(255, 255, 255, .15);
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  padding: 10px 14px;
  width: 90px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: border-color var(--tr), background var(--tr);
}
.calc-custom__input::placeholder { color: rgba(255, 255, 255, .4); }
.calc-custom__input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, .25);
}
.calc-custom__x {
  font-size: 16px;
  color: rgba(255, 255, 255, .65);
  font-weight: 600;
}
.calc-custom__unit { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
/* Шаг 3 и 4: опции и цвета */
.calc-opts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.calc-opt {
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--tr), border-color var(--tr);
}
@media (hover: hover) { .calc-opt:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); } }
.calc-opt.is-selected { background: #fff; color: var(--ink); border-color: #fff; }
.calc-opt__sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  flex-shrink: 0;
}
.calc-opt.is-selected .calc-opt__sw { border-color: var(--ink-2); }
.calc-opt__sw--white { background: #fff; }
.calc-opt__sw--brown { background: #5b3a26; }
.calc-opt__sw--grey { background: #6e6e6e; }
.calc-opt__sw--anthracite { background: #2a2a2a; }
/* Навигация шагов */
.calc__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.calc__btn {
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  transition: background var(--tr), border-color var(--tr), opacity var(--tr);
}
@media (hover: hover) { .calc__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .15); border-color: #fff; } }
.calc__btn:disabled { opacity: .35; cursor: not-allowed; }
.calc__btn--primary {
  background: #fff;
  color: var(--wa-2);
  border-color: #fff;
}
@media (hover: hover) { .calc__btn--primary:hover:not(:disabled) { background: rgba(255, 255, 255, .9); } }
/* Шаг "Готово" — результат */
.calc-result {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.calc-result__left { min-width: 0; }
.calc-result__t {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.calc-result__price {
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-feature-settings: 'tnum';
  margin-bottom: 6px;
  line-height: 1;
}
.calc-result__price-note {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.calc-result__summary {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 10px;
  line-height: 1.5;
}
.calc-result__summary b { color: var(--ink); font-weight: 600; }
.calc-result__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wa);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--tr);
}
@media (hover: hover) { .calc-result__cta:hover { background: var(--wa-2); } }
.calc-result__reset {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  margin-top: 12px;
}
@media (hover: hover) { .calc-result__reset:hover { color: var(--ink); } }

/* Адаптив калькулятора */
@media (max-width: 900px) {
  .calc { padding: 32px 24px; }
  .calc-types { grid-template-columns: repeat(2, 1fr); }
  .calc-sizes { grid-template-columns: repeat(2, 1fr); }
  .calc-opts { grid-template-columns: repeat(2, 1fr); }
  .calc-result { grid-template-columns: 1fr; padding: 22px 24px; }
  .calc-result__cta { justify-self: stretch; justify-content: center; }
}
@media (max-width: 480px) {
  .calc { padding: 24px 18px; border-radius: 20px; }
  .calc-types { grid-template-columns: 1fr; }
  .calc-sizes { grid-template-columns: 1fr; }
  .calc-opts { grid-template-columns: 1fr; }
  .calc-custom { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .calc-custom__input { width: 100%; }
  .calc__nav { flex-direction: column-reverse; }
  .calc__btn { width: 100%; }
}

/* ---------- БЛОК "ЗАМЕР ПО ФОТО В WHATSAPP" ---------- */
.wa-measure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.wa-measure__copy h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.wa-measure__copy p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.wa-measure__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.wa-measure__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.wa-measure__step-n {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wa);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
}
.wa-measure__step-t {
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 4px;
}
.wa-measure__step-d {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.wa-measure__cta-wrap {
  margin-top: 28px;
}
/* Правая сторона: имитация WhatsApp-чата.
   Тёмная подложка с паттерном (как реальный WhatsApp) + зелёный header. */
.wa-chat {
  background:
    url('/assets/img/wa-chat-bg.png') #0b141a center / 360px 640px repeat;
  border-radius: 24px;
  padding: 0 14px 14px;   /* боковые отступы для пузырей; верх — нет, header растянут */
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  overflow: hidden;
}
/* Header растянут на всю ширину контейнера (компенсируем боковой padding negative-margin) */
.wa-chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #075E54;
  margin: 0 -14px 14px;
  border-bottom: none;
}
.wa-chat__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 15px;
  flex-shrink: 0;
}
.wa-chat__name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.wa-chat__status {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .75);
  margin-top: 1px;
}
.wa-chat__msg {
  background: #fff;
  border-radius: 8px 8px 8px 2px;
  padding: 10px 14px;
  margin-bottom: 8px;
  max-width: 75%;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  position: relative;
}
/* фото-сообщения уже текстовых — как в реальном WhatsApp */
.wa-chat__msg:has(.wa-chat__photo) {
  max-width: 62%;
  padding: 6px;
}
.wa-chat__msg--mine {
  background: #DCF8C6;
  border-radius: 8px 8px 2px 8px;
  margin-left: auto;
}
.wa-chat__msg-time {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  text-align: right;
}
.wa-chat__photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  margin: 4px 0;
  display: block;
  /* fallback fon если div вместо img */
  background:
    linear-gradient(135deg, #1f1f1f 0%, #444 60%, #1f1f1f 100%);
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-align: center;
}

@media (max-width: 900px) {
  .wa-measure { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- БЛОК "РЕМОНТ СЕТОК ЗА 1 ЧАС" ---------- */
.mesh-repair {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.mesh-repair__copy h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.mesh-repair__copy h2 b { color: var(--wa); font-weight: 600; }
.mesh-repair__lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.mesh-repair__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}
.mesh-repair__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.45;
}
.mesh-repair__list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wa);
  margin-top: 8px;
  flex-shrink: 0;
}
/* Правая колонка ремонта: фото порванной сетки + прайс под ним */
.mesh-repair__right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mesh-repair__photo {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #1f1f1f;
  aspect-ratio: 16 / 10;
}
.mesh-repair__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mesh-repair__pricelist {
  background: #fff;
  border-radius: var(--r);
  padding: 26px 28px;
  display: grid;
  gap: 14px;
}
.mesh-repair__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mesh-repair__row:last-child { border-bottom: none; padding-bottom: 0; }
.mesh-repair__row-name { color: var(--ink); }
.mesh-repair__row-price { font-weight: 700; color: var(--ink); font-feature-settings: 'tnum'; }
.mesh-repair__cta {
  display: inline-flex;
}

@media (max-width: 900px) {
  .mesh-repair { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
}
@media (max-width: 480px) {
  .mesh-repair { padding: 24px 20px; }
  .mesh-repair__pricelist { padding: 20px 22px; }
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; }
.faq__i {
  border-top: 1px solid var(--border);
}
.faq__i:last-child { border-bottom: 1px solid var(--border); }
.faq__i summary {
  padding: 28px 56px 28px 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.012em;
  cursor: pointer;
  position: relative;
  list-style: none;
  line-height: 1.3;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  border-radius: 100%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12'%3E%3Cpath fill='none' stroke='%230A0A0A' stroke-width='2.4' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--tr);
}
.faq__i[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq__a {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  padding: 0 56px 28px 0;
  max-width: 760px;
}

/* ---------- FINAL ---------- */
.sec--final {
  background: var(--dark);
  color: #fff;
  padding: 140px 0;
}
.final {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
}
.final .eyebrow { margin-bottom: 24px; }
.final__h {
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 24px;
}
.final__h-em {
  display: inline-block;
  margin-top: .35em;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--wa);
}
.final__sub {
  font-size: 18px;
  color: rgba(255,255,255,.6);
  margin-bottom: 48px;
  line-height: 1.5;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .final__sub { font-size: 14px; margin-bottom: 32px; line-height: 1.55; }
}
.final__cta {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- FOOTER ---------- */
.ft {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
}
.ft__top {
  margin-bottom: 56px;
}
.ft__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.ft__about {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 420px;
  line-height: 1.5;
}
.ft__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.ft__cols--4 { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 40px; }
.ft__meta-small { font-size: 12px; color: var(--ink-3); letter-spacing: -.005em; }
.ft__cols h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.ft__phone {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.ft__link {
  display: block;
  font-size: 15px;
  color: var(--ink-2);
  padding: 5px 0;
  transition: color var(--tr);
}
@media (hover: hover) { .ft__link:hover { color: var(--ink); } }
.ft__meta {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 8px;
  line-height: 1.5;
}
.ft__btm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: var(--ink-3);
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- STICKY MOBILE ---------- */
/* ---------- STICKY MOBILE — горизонтальная плашка во всю ширину ----------
   Делится 50/50: слева "Позвонить" (тёмная), справа "WhatsApp" (зелёная).
   Иконка + текст, фиксированная внизу экрана. Включается на ≤768.
   safe-area-inset-bottom — отступ под home-indicator iPhone X+. */
.stm {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: 58px;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .25);
  /* НЕ используем env(safe-area-inset-bottom) — на iPhone home-indicator
     отрисовывается поверх плашки (стандартное iOS-поведение, к которому
     пользователи привыкли). Это убирает "растянутость" кнопок и пустые
     полосы. Эталонная реализация: autolux-service.kz */
}
.stm__btn {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #fff;
  text-decoration: none;
  transition: background var(--tr);
  white-space: nowrap;
}
.stm__btn svg { flex-shrink: 0; }
.stm__btn--call { background: var(--ink); }
.stm__btn--call:active { background: #1a1a1a; }
.stm__btn--wa { background: var(--wa); }
.stm__btn--wa:active { background: var(--wa-2); }

/* Чтобы плашка не перекрывала контент в самом низу страницы (footer):
   когда плашка видна — добавляем body padding-bottom равный её высоте. */

/* ---------- MOBILE MENU ---------- */
.mm {
  position: fixed;
  inset: 72px 0 0;
  background: #fff;
  z-index: 45;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  padding: 32px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mm.is-open { transform: translateX(0); }
.mm__nav { display: flex; flex-direction: column; gap: 24px; }
.mm__group { display: flex; flex-direction: column; }
.mm__group-t {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
  padding-bottom: 12px;
}
.mm__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.012em;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.mm__group > a:last-child { border-bottom: none; }

/* Иконка в mobile menu (используется в группе "Услуги") — те же визуальные
   правила, что у .hdr__sub-icon в desktop dropdown, чтобы UX был согласован. */
.mm__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  transition: background var(--tr), color var(--tr);
}
@media (hover: hover) { .mm__nav a:hover .mm__icon,
.mm__nav a:active .mm__icon,
.mm__nav a[aria-current="page"] .mm__icon {
  background: var(--wa);
  color: #fff;
} }
.mm__nav a[aria-current="page"] { color: var(--wa-2); }
.mm__cta { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mm__phone {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------- BR HELPERS ---------- */
.br-m { display: none; }
/* desktop-only line-break: виден ≥769, скрыт на мобайле/планшете */
.br-d { display: inline; }
@media (max-width: 768px) { .br-d { display: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- HEADER: переключение nav→burger на маленьких ноутах и планшетах ----------
   На любом окне ≤1279px 7 пунктов nav физически не влезают в одну строку
   с логотипом, номером и WA-кнопкой → ломается перенос. Поэтому уже на 1279
   полностью прячем nav-ссылки в бургер-меню. Лого + номер + WA + бургер
   умещаются комфортно на iPad Pro 1194 и других "пограничных" экранах. */
@media (max-width: 1279px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
}

@media (max-width: 1100px) {
  .sec { padding: 96px 0; }
  .sec__head { margin-bottom: 48px; }
  .hero__h1 { font-size: clamp(40px, 6.5vw, 76px); }
  .hero__layer { padding-bottom: 72px; }
  /* Плюсик-паттерн: gap:0 + один внутренний border-right (между 1-2 и 3-4) +
     один внутренний border-bottom (между верхним и нижним рядом). Линии
     получаются непрерывные и образуют ровный крест.
     Используется ТОЛЬКО на touch-ширинах. Десктоп (>1100) — горизонтальный ряд, не трогаем. */
  .strip-card { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .strip__item {
    border-right: 1px solid var(--border);
    border-top: none;
    margin-top: 0;
    padding: 16px 24px;
  }
  .strip__item:nth-child(2n) { border-right: none; }
  .strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .srv-grid { grid-template-columns: repeat(2, 1fr); }
  /* DIRS: на планшете 2 кол, широкая плитка балконных дверей становится обычной */
  .dirs { grid-template-columns: repeat(2, 1fr); }
  /* TEAM 4 → 4 в ряд на планшете тоже 4, но карточки уже */
  .team--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  /* PRICELIST */
  .pricelist__row { grid-template-columns: 1fr 110px 170px; gap: 16px; }
  /* FOOTER 4 кол → 2x2 */
  .ft__cols--4 { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Master video: на планшете в столбик, видео по центру */
  .mvid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 560px;
  }
  .mvid__player { margin: 0 auto; }
  /* Описание (не жирная часть, 2-я строка) — мельче жирного для контраста. */
  .mvid__steps li { font-size: 12.5px; padding-left: 22px; line-height: 1.45; }
  /* Жирный заголовок шага становится отдельной первой строкой, описание — со второй. */
  .mvid__steps li b {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 3px;
  }
  /* Зелёная точка-маркер на уровне первой жирной строки. */
  .mvid__steps li::before {
    top: 6px;
  }
  .stages { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .why { grid-template-columns: repeat(2, 1fr); }
  .why__item { padding: 32px 24px; }
  .why__item:nth-child(3n) { border-right: 1px solid var(--border); padding-right: 24px; }
  .why__item:nth-child(2n) { border-right: none; padding-right: 0; }
  .why__item:nth-child(2n+1) { padding-left: 0; }
  .team { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  /* tablet: 2 кол, видны первые 8 (4 ряда), скрыты 9+ */
  .cases { grid-template-columns: repeat(2, 1fr); }
  .cases:not(.is-expanded) > .case:nth-child(n+9) { display: none; }
  /* Карусель отзывов: на планшете карточки уже */
  .rev { flex: 0 0 340px; }
  .sec__head--reviews { flex-wrap: wrap; }
  .cov { grid-template-columns: 1fr; gap: 32px; }
  .guar { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .sec { padding: 72px 0; }
  .sec__head { margin-bottom: 40px; }
  .sec__h { font-size: clamp(28px, 8vw, 40px); }
  /* Текст под заголовком — мельче для контраста типографики (на десктопе 18px,
     на мобайле — 14.5px). Та же логика для guar__lead (под "До 3 лет гарантии"). */
  .sec__sub { font-size: 14.5px; margin-top: 14px; line-height: 1.5; }
  .guar__lead { font-size: 15px; line-height: 1.55; }

  /* На десктопе у нас осмысленные <br> для красивых переносов в подзаголовках
     ("Цена ниже — если случай простой,<br>выше — если сложный."). На мобайле
     ширина экрана маленькая, и эти переносы дают 5-7 коротких строк, выглядит
     рвано. Прячем ВСЕ принудительные <br> внутри подзаголовков и подобных
     текстов — пусть текст переносится естественно по ширине экрана. */
  .sec__sub br,
  .guar__lead br,
  .hero__sub br,
  .promo__sub br,
  .mvid__steps li br,
  .doc__lead br,
  .why__item p br,
  .stage p br,
  .rev__text br,
  .strip__item span br {
    display: none;
  }
  /* .srv-bottom p br НЕ скрываем — на странице "Установка откосов"
     там нужны управляемые br-m переносы ("Пришлите фото проёма…/мастер скажет…/и назовёт цену"). */
  /* .case__b p br НЕ скрываем — переносы между двумя предложениями карточки
     нужны и на мобайле для читаемости.
     .final__sub br НЕ скрываем — там нужны 3 строки на мобайле
     ("Бесплатная диагностика" / "цена фиксируется в договоре" / "Гарантия до 3 лет"). */

  /* .hdr__nav и .hdr__burger переключены раньше (@media 1279) */
  .hdr__phone, .hdr__right .btn--sm { display: none; }

  /* Hero trust в столбик */
  .hero__trust { font-size: 12.5px; padding: 7px 14px; }
  .hero__trust-stars svg { width: 12px; height: 12px; }

  /* DIRS на мобайле – 1 кол */
  .dirs { grid-template-columns: 1fr; gap: 16px; }
  .dir__body { padding: 20px 22px 22px; }
  .dir__title { font-size: 19px; }

  /* PRICELIST на мобайле — карточный layout вертикально:
     1-я строка: название работы (крупно, жирно)
     2-я строка: время · цена (мелче, в одной строке, разделены точкой)
     Это компактнее и читаемее, чем 3 колонки. */
  .pricelist__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 4px;
  }
  .pricelist__name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.3;
  }
  /* Время и цена inline в одной строке через "·" разделитель.
     Псевдоэлемент ::after на time добавляет точку перед price. */
  .pricelist__time {
    display: inline;
    font-size: 13px;
    color: var(--ink-3);
  }
  .pricelist__time::after {
    content: ' · ';
    color: var(--ink-4);
    margin: 0 2px;
  }
  .pricelist__price {
    display: inline;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
  }
  /* Псевдо-grouping: time и price идут как одна inline-строка под name */
  .pricelist__time,
  .pricelist__price {
    margin-top: 0;
  }
  /* Особый случай — "Диагностика и выезд: бесплатно" — время "–" уродливое,
     прячем его и точку. */
  .pricelist__row--free .pricelist__time { display: none; }
  .pricelist__row--free .pricelist__price { font-size: 14px; color: var(--wa-2); }

  /* TEAM 4 → 1 кол */
  .team--4 { grid-template-columns: 1fr; gap: 16px; }

  /* REVIEWS на мобайле – 1 кол, более компактные */
  .rev { padding: 22px 22px 24px; border-radius: var(--r); }
  .rev__av { width: 42px; height: 42px; font-size: 15px; }

  /* FOOTER на мобиле – 1 кол */
  .ft__cols--4 { grid-template-columns: 1fr; gap: 32px; }

  /* Master video на мобайле – компактнее */
  .sec--mvid { padding-top: 72px; padding-bottom: 72px; }
  .mvid { gap: 36px; }
  .mvid__player { max-width: 300px; }
  .mvid__play { width: 68px; height: 68px; }
  .mvid__play svg { width: 26px; height: 26px; }
  .mvid__steps li { font-size: 15px; }
  .mvid__author { padding: 14px 16px; }
  .mvid__author-av { width: 44px; height: 44px; font-size: 17px; }
  .mvid__author-role { font-size: 12px; line-height: 1.35; }

  /* Hero — синхронизировано для главной (.hero--fs) и подстраниц услуг
     (.hero--service). Одинаковые min-height, padding и центровка. */
  .hero--fs,
  .hero--service { min-height: 540px; height: 100vh; max-height: none; }
  /* padding-top: 72 (минимум — впритык к высоте header'а, чтобы бейдж 2GIS
     не уходил под header). padding-bottom: 152 — большая разница с top
     поднимает content на ~40px выше относительно прошлого положения.
     На длинных экранах виден большой "воздух" под CTA до sticky-плашки — это OK,
     именно такая позиция читается как "контент сверху-по центру". */
  .hero__layer {
    align-items: center;
    padding: 72px 0 152px;
  }
  /* Eyebrow: "Ремонт окон и балконных дверей" / "Алматы · с 2006" — две строки
     на мобайле через скрытый разделитель ".eyebrow__sep" (виден на десктопе). */
  .hero__copy .eyebrow { margin-bottom: 24px; }
  .eyebrow .eyebrow__sep { display: block; height: 0; overflow: hidden; visibility: hidden; }
  .hero__trust--top { margin-bottom: 18px; }
  .hero__trust { font-size: 13px; padding: 7px 14px; }
  .hero__trust-stars svg { width: 12px; height: 12px; }
  .hero__h1 { gap: 20px; margin-bottom: 28px; }
  /* Дублируем селектор для .hero--service — там L2126 у h1-main более
     специфичный селектор, без этого подстраницы услуг получат базовые desktop-значения. */
  .hero__h1-main,
  .hero--service .hero__h1-main {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1;
    letter-spacing: -.025em;
  }
  /* "ПОЧИНИМ ОКНА И ДВЕРИ ЗА 1 ВИЗИТ" — ВСЕГДА на одной строке.
     Скрываем декоративные линии по бокам (нет места), уменьшаем шрифт
     и letter-spacing, плюс white-space: nowrap. */
  .hero__h1-sub {
    font-size: clamp(13px, 3.6vw, 19px);
    letter-spacing: .015em;
    white-space: nowrap;
    gap: 0;
  }
  .hero__h1-sub__line { display: none; }
  /* Subtitle "Пластиковые, алюминиевые..." — добавляем боковой padding,
     чтобы текст не упирался в края экрана. */
  .hero__sub {
    font-size: 14.5px;
    margin-bottom: 28px;
    max-width: 100%;
    line-height: 1.5;
    padding: 0 14px;
  }
  .hero__sub br { display: none; }
  /* CTA-кнопка компактнее, не "громоздкая" */
  .hero__cta { gap: 14px; width: 100%; }
  .hero__cta .btn--lg { padding: 14px 22px; font-size: 15px; }
  .hero__cta .btn { width: 100%; max-width: 320px; }
  /* На мобайле фото нужно затемнить сильнее: текст по центру, радиальное
     затемнение под центром, плюс линейный тёмный градиент сверху и снизу
     для контраста header и stats-карточки. */
  .hero__shade {
    background:
      radial-gradient(ellipse 110% 70% at 50% 50%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.35) 80%, rgba(0,0,0,.25) 100%),
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.8) 100%);
  }
  .strip-sec { margin-top: -32px; }
  /* На мобайле — чистый 2×2 grid, перекрываем "костыли" tablet-правил
     с margin-top/padding-top на 3-й и 4-й ячейках. Только обычные
     внутренние бордеры между ячейками. */
  .strip-card {
    padding: 20px 8px;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .strip__item {
    padding: 14px 10px;
    border-right: 1px solid var(--border);
    border-top: none;
    margin-top: 0;
  }
  .strip__item:nth-child(2n) { border-right: none; }
  .strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .strip__item:nth-child(3),
  .strip__item:nth-child(4) { padding-top: 14px; }
  .strip__item b { font-size: 22px; }
  .strip__item span { font-size: 12.5px; }

  .srv-grid { grid-template-columns: 1fr; gap: 16px; }
  /* "Не нашли вашу проблему?" — на мобайле центрируем всё содержимое:
     заголовок, описание и кнопка по центру, как кнопка раньше. */
  .srv-bottom {
    padding: 28px 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .srv-bottom .btn { width: 100%; }
  .srv-bottom__t { font-size: 21px; }
  .srv-bottom p { font-size: 13.5px; line-height: 1.5; }

  .stages { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .why__item { padding: 28px 0 !important; border-right: none !important; }
  .why__item:nth-child(n+2) { border-top: 1px solid var(--border); }
  .team { grid-template-columns: 1fr; }
  /* mobile: 1 кол, видны первые 6, скрыты 7+ */
  .cases { grid-template-columns: 1fr; }
  .cases:not(.is-expanded) > .case:nth-child(n+7) { display: none; }
  /* Карусель отзывов: карточка чуть уже viewport, чтобы был виден "хвост" следующей —
     это подсказывает пользователю что можно свайпнуть для просмотра. */
  .rev {
    flex: 0 0 calc(100vw - var(--pad) * 2 - 48px);
    max-width: 340px;
    scroll-snap-align: start;
    scroll-snap-stop: normal;  /* быстрый swipe = много карточек, snap только на финале */
    padding: 24px 22px 26px;
  }
  .rev-nav__btn { width: 44px; height: 44px; }
  .reviews-viewport {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .cov__list ul { grid-template-columns: 1fr; }

  .guar__grid { grid-template-columns: 1fr; padding: 12px 0; }
  /* На мобайле — горизонтальный layout: цифра слева, текст справа, на одном уровне. */
  .guar__cell {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .guar__cell:last-child { border-bottom: none; }
  .guar__cell dt {
    flex-shrink: 0;
    min-width: 92px;
    font-size: 24px;
    margin-bottom: 0;
  }
  .guar__cell dd {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.4;
  }

  /* Promo-блок на мобайле: countdown сверху, кнопка "Воспользоваться скидкой"
     полной шириной по нижнему краю блока, скруглена только снизу под
     border-radius самого блока. Реализуем через position: absolute. */
  .promo {
    padding: 48px 28px 108px;
    position: relative;
  }
  /* На мобайле QR не нужен (телефон уже в руках, проще тапнуть кнопку) */
  .promo__qr { display: none; }
  .promo__h { font-size: clamp(28px, 8vw, 44px); }
  .promo__badge { margin-left: -28px; padding: 10px 20px 10px 28px; }
  .promo__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 18px 20px;
    align-self: auto;
    justify-content: center;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    font-size: 14px;
    gap: 10px;
    letter-spacing: .03em;
  }
  .promo__cta svg { width: 22px; height: 22px; }
  .cd { flex-wrap: wrap; gap: 6px; }
  .cd__c { min-width: 72px; padding: 14px 12px; }
  .cd__c b { font-size: 28px; }

  .ft__cols { grid-template-columns: 1fr; gap: 32px; }
  .ft__btm { flex-direction: column; align-items: flex-start; gap: 12px; }

  .final { padding: 0 8px; }
  /* Сильно ужимаем заголовок на мобайле, чтобы "ОТВЕТИМ ЗА 5 МИНУТ"
     уместилось одной строкой при текущей ширине viewport. */
  .final__h { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.15; }
  .final__cta { flex-direction: column; gap: 16px; }

  .faq__i summary { font-size: 16.5px; padding: 22px 44px 22px 0; }
  .faq__i summary::after { width: 20px; height: 20px; }
  .faq__a { font-size: 15px; padding-right: 0; padding-bottom: 22px; }

  .br-m { display: inline; }
  .stm { display: flex; }
  /* Резервируем место под sticky-плашку, чтобы footer не перекрывался */
  body { padding-bottom: 58px; }
}

@media (max-width: 480px) {
  .case__media { grid-template-columns: 1fr; gap: 1px; }
}

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